CODEWITHSUNDEEP
phpjavascriptjqueryhtml
user2220051
user2220051

Reputation: 31

Code works in jsfiddle but doesn't work when I put all the code into my website

My goal is to have a button on each side of my iframe (which contains a calendar) which toggles back and forth between calendar #1 and calendar #2 in a single iframe.

Any suggestions?

|arrowLeft| |-----Iframe-------| |arrowRight|

The code works in jsfiddle but doesn't work when I put all the code into my website.

Why is that?

HTML:

<p id="toggle">
<span> Left </span>
<span> </span>
</p>

<div id="left"> <iframe>LEFT CONTENT</iframe> L</div>
<div id="right"> <iframe>RIGHT CONTENT</iframe>R </div>

<p id="toggle">
<span></span>
<span> Right </span></p>

CSS:

#right { display:none; }

Script:

$('#toggle > span').click(function() {
   var ix = $(this).index();

   $('#left').toggle( ix === 0 );
   $('#right').toggle( ix === 1 );
});

Upvotes: 2

Views: 197

Answers (1)

GitaarLAB
GitaarLAB

Reputation: 14655

Since you say you have loaded jquery..

Probably your onclick setter (the jquery code) is run before the document is loaded (and as such there are no elements in document.body at that moment to set).

In jsfiddle ('No-Library' pure JS) code is wrapped (by default) in:

window.onload=function(){
// your code here
};

That should already do the trick.

This is what jsfiddle does when you select the (default) option 'onLoad' in the options panel on the left, under "Frameworks & Extensions".

If you would select 'onDomready' then your code would (currently) be wrapped in a function called VanillaRunOnDomReady, like this:

var VanillaRunOnDomReady = function() {
// your code here
}

var alreadyrunflag = 0;

if (document.addEventListener)
    document.addEventListener("DOMContentLoaded", function(){
        alreadyrunflag=1; 
        VanillaRunOnDomReady();
    }, false);
else if (document.all && !window.opera) {
    document.write('<script type="text/javascript" id="contentloadtag" defer="defer" src="javascript:void(0)"><\/script>');
    var contentloadtag = document.getElementById("contentloadtag")
    contentloadtag.onreadystatechange=function(){
        if (this.readyState=="complete"){
            alreadyrunflag=1;
            VanillaRunOnDomReady();
        }
    }
}

window.onload = function(){
  setTimeout("if (!alreadyrunflag){VanillaRunOnDomReady}", 0);
}

Note that this eventually still ends up in a window.onload like the 'onLoad' option.

If you'd load library JQuery 1.9.1 then things change (a little).
The option 'onLoad' then wraps your code like this: 

$(window).load(function(){
// your code here
});

Note that this is essentially still the the same as the first option in this answer, but then in the JQuery way.

If you'd select the option 'onDomready' (whilst the JQuery library is loaded in JSFiddle), then your code would be wrapped in: 

$(function(){
// your code here
});


As ErikE pointed out in the comments below, since you already load and use JQuery you might also want to use yet another JQuery way:

$(document).ready(function() { 
// your code here
});

Finally as ErikE also pointed out in his comment to your question (a serious problem I overlooked), id's are meant to be unique. Whereas you gave to both paragraphs the id "toggle".
You should instead give them the class "toggle" and select the elements by class to assign the onclick function.

Upvotes: 2

Related Questions