Click event triggers the loading of a page

Question

Click event triggers the loading of a page

Recently, I found a simple jQuery event that loads a page into an iframe within the corresponding div when clicked.
You can check out the JS Fiddle example here

Now, my goal is to achieve the following:

Instead of using separate codes for #frame1 and #frame2, I want to load events using the same code.

showIframe = function (url) {
document.getElementById('iframetarget').src = url;
document.getElementById('frame').style.display = 'block';
}

When clicking on 1 in the list style, the corresponding iframe page should load. Similarly, clicking on 2 should load the respective iframe page while hiding or "killing" the page loaded for 1

You can view the desired fiddle demo here

I've tried using the document.getElementByClassName syntax since using the same ID in different divs is not possible, but it doesn't seem to work. Any help would be greatly appreciated.

jquery html css iframe

Answer 1

Answer №1

Check out this helpful jsFiddle example. Both iframes in the code snippet below are linked to the buttons via data-url value.

var buttons = document.getElementsByClassName('iframe-btn');
for( var x=0;x<buttons.length;x++){
    buttons[x].addEventListener("click", function(event){
        event.preventDefault();
        var urlValue = this.getAttribute('data-url');
        var targetFrame = this.getAttribute('href').split('#')[1];

        var iframeElements = document.getElementsByTagName('iframe');
        for( var y=0;y<buttons.length;y++){
            iframeElements[y].src='';
        }
        document.getElementById(targetFrame).src = urlValue;
        document.getElementById(targetFrame).style.display = 'block'; 
    }, false);
}

Answer 2

Check out this helpful jsFiddle example. Both iframes in the code snippet below are linked to the buttons via data-url value.

var buttons = document.getElementsByClassName('iframe-btn');
for( var x=0;x<buttons.length;x++){
    buttons[x].addEventListener("click", function(event){
        event.preventDefault();
        var urlValue = this.getAttribute('data-url');
        var targetFrame = this.getAttribute('href').split('#')[1];

        var iframeElements = document.getElementsByTagName('iframe');
        for( var y=0;y<buttons.length;y++){
            iframeElements[y].src='';
        }
        document.getElementById(targetFrame).src = urlValue;
        document.getElementById(targetFrame).style.display = 'block'; 
    }, false);
}

Answer 3

Answer №2

Hopefully this code snippet works as expected! I am utilizing the getelementbyClassName attribute in this example.

http://jsfiddle.net/uniqueusername/abcdefg123/

Below is the HTML code:

<ul>
<li><a href="#frame" onclick="showIframe('http://www.website.com/');">1</a></li>
<li><a href="#frame" onclick="showIframe('http://example.com/');">&nbsp;2</a></li>
</ul>  

<div id="frame" style="background-color:#9C27B0">
<iframe id='iframetarget' class="full" frameborder="0" src=""></iframe>
</div>

Javascript function:

showIframe = function (url) {

    var divs = document.getElementsByClassName('full');
for(var i=0; i < divs.length; i++) { 
  divs[i].src = url;
}

    //document.getElementByClassName('full').src = url;
    document.getElementById('frame').style.display = 'block';
}

CSS styles:

ul{list-style:none;position:fixed;margin:0;padding:0;}
ul li{float:left}
a{text-decoration:none}

.full {width:100%; height:100%;}

Answer 4

Hopefully this code snippet works as expected! I am utilizing the getelementbyClassName attribute in this example.

http://jsfiddle.net/uniqueusername/abcdefg123/

Below is the HTML code:

<ul>
<li><a href="#frame" onclick="showIframe('http://www.website.com/');">1</a></li>
<li><a href="#frame" onclick="showIframe('http://example.com/');">&nbsp;2</a></li>
</ul>  

<div id="frame" style="background-color:#9C27B0">
<iframe id='iframetarget' class="full" frameborder="0" src=""></iframe>
</div>

Javascript function:

showIframe = function (url) {

    var divs = document.getElementsByClassName('full');
for(var i=0; i < divs.length; i++) { 
  divs[i].src = url;
}

    //document.getElementByClassName('full').src = url;
    document.getElementById('frame').style.display = 'block';
}

CSS styles:

ul{list-style:none;position:fixed;margin:0;padding:0;}
ul li{float:left}
a{text-decoration:none}

.full {width:100%; height:100%;}

Answer 5

Answer №3

Implementing jquery functionality with the following code

HTML

<ul>
<li><a href="#frame1" onclick="showIframe('http://www.uibrush.com/');">1</a></li>
<li><a href="#frame2" onclick="showIframe2('http://imgur.com/');">&nbsp;2</a></li>
</ul>
<br><br>


<div id="frame1" style="background-color:#9C27B0">
<iframe id='iframetarget1' class="full" frameborder="0" src=""></iframe>
</div>
<br>


<div id="frame2" style="background-color:#ffd800">
<iframe id='iframetarget2' class="full" frameborder="0" src=""></iframe>
</div>

Javascript

$("#link1").click(showIframe);
$("#link2").click(showIframe);

function showIframe() {
   var target ='#'+ $(this).attr('data-target');
   var url = $(this).attr('data-url');
   $(target).attr('src',url);  
   $(target).parent().css("display:'block'");
}

Link to Working Example

Answer 6

Implementing jquery functionality with the following code

HTML

<ul>
<li><a href="#frame1" onclick="showIframe('http://www.uibrush.com/');">1</a></li>
<li><a href="#frame2" onclick="showIframe2('http://imgur.com/');">&nbsp;2</a></li>
</ul>
<br><br>


<div id="frame1" style="background-color:#9C27B0">
<iframe id='iframetarget1' class="full" frameborder="0" src=""></iframe>
</div>
<br>


<div id="frame2" style="background-color:#ffd800">
<iframe id='iframetarget2' class="full" frameborder="0" src=""></iframe>
</div>

Javascript

$("#link1").click(showIframe);
$("#link2").click(showIframe);

function showIframe() {
   var target ='#'+ $(this).attr('data-target');
   var url = $(this).attr('data-url');
   $(target).attr('src',url);  
   $(target).parent().css("display:'block'");
}

Link to Working Example

Answer 7

Answer №4

To add event listeners programmatically, you can use code like this:

$('#element').on('click', function(){ //logic });
Each event carries an object to the handler, which contains the executor. You can assign data-* attributes to the executor, such as holding a URL or other information.

Here are some useful references:

Answer 8

To add event listeners programmatically, you can use code like this:

$('#element').on('click', function(){ //logic });
Each event carries an object to the handler, which contains the executor. You can assign data-* attributes to the executor, such as holding a URL or other information.

Here are some useful references:

Click event triggers the loading of a page

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How can I retrieve a Jquery tooltip from a HiddenField?

How to create vertical spacing between <a> elements within the same div using HTML and CSS

What impact does utilizing CSS 3D Transforms have on search engine optimization (SEO)?

The input range in ChromeVox is behaving incorrectly by skipping to the maximum value instead of following the correct step value

What is the best way to display an image and text side by side within a single row in react-table?

Gather data from a variety of HTML5 video seminars

Minimize CPU consumption in your threejs application

Set up bootstrap 5 on your website while incorporating the beloved color scheme of bootstrap

Blending HTML elements with ASP.NET code

Bootstrap Popover not displaying information after an AJAX request

Creating visualizations by overlaying shapes onto images using specified coordinates in jQuery

When using jQuery and Laravel, why does the element not appear when setting its display to block after receiving a response?

The CSS styles for a:link, a:active, and a:visited do not seem to work with

Could one potentially include the if statement within `${'put your code here'}`?

Error in jQuery Audio Player - Promise rejection (DOMException): Unable to load due to absence of compatible source

What might be causing issues with the functionality of my user registration form?

What is the reason behind observing numerous post requests in the Firebug console after submitting a form through Ajax in jQuery?

Challenge encountered in handling AJAX response data for presentation

Building a versatile and interactive table using AngularJS with data sourced from a

"Enhance your website with dynamic drop-down menus using