jquery - Replacing paragraph tag contents with a random word from javascript -
when user enters page div in center heading, quote underneath randomly picked list , button enter site. , cannot seem button fade in main site , fade out landing div. here jsfiddle try , explain things more.
as able tell, i'm not great javascript or jquery , have done far learning bits , pieces , surfing web through code examples
i not see why not work had play around in jsfiddle simplified version of want , worked.
below code simplified version (it wouldn't let me post without adding code?)
html
<div class="landingdiv"> <h1>landing div</h1> <button id="showmain">enter site</button> </div> <div class="main"> <h1>main site</h1> </div>
jquery
$("#showmain").click(function () { $(".main").fadein(1000); $(".landingdiv").fadeout(1000); });
css
.main { display: none; opactiy: 0; }
thanks in advanced.
steve.
the first jquery example threw error:
$ not defined
meaning jquery not defined/included. wasn't. in second jsfiddle, included jquery.
you'll notice on left hand side of jsfiddle, you'll see under "framewords & extensions" heading can include framewordk - so, include jquery!
here updated fiddle jquery included: http://jsfiddle.net/6cghf/1/
as move forward in javascript development, idea check browsers developer tools errors when unexpected happening. helps you, , when ask questions on stackoverflow, providing these errors us! :)
the shortcut developer tools in chrome f12 - can see little red circle x in if have errors - click more info. developer tools available in other major browsers (except ie8 , below).
edit:
wrap click()
event function in $(document).ready()
$(document).ready(function() { $("#showmain").click(function () { $(".main").fadein(1000); $(".landingdiv").fadeout(1000); }); });
what happening html file read top bottom. have reached click
function before #showmain
element had been read. so, jquery couldn't find it.
the reason wasn't problem in jsfiddle because javascript code wrapped in "onload" function (which is, admittedly, little different $(document).ready()
) solved problem executing javascript after had been loaded. can see on left hand side in fiddle linked above, you'll find dropdown "onload" selected. in it, can choose "ondomready" (which equivalent $(document).ready()
)
in summary:
- don't use
$(document).ready()
in jsfiddle. don't need it. - do use
$(document).ready()
around javascript relies on fact dom ready (ie. "all of content visible javascript").
Comments
Post a Comment