I have tried this code to hide the body, and show when is loaded in totality. But I noticed that is not working well, because when the fade occurs, some images are not yet loaded.
How I can do this effect?
<script type="text/javascript">
$(document).ready(function(){
$('.nav').fadeIn(700);
});
</script>
<body class="nav" style="display: none">
Surely it's as simple as:
$(window).load(function() {
$('.nav').fadeIn(700);
});
If you want to wait for the images (questionable idea, but it's your site) you can just handle the "load" event instead:
$(document).load(function() { $('.nav').fadeIn(700); });
I say that that's a questionable idea because it may take some time to get the images, and that may be confusing. However, I don't have any clue what your site looks like, of course, so perhaps it's fine.
Oh, also: if you're really just targetting the body element, then you can just use
$('body').fadeIn(700);
Not that it matters at all in this context, but that's going to be more efficient.
Related
I have a homepage that dynamically writes javascript in order to handle the mouseover of potential user choices. However, the .bind("mouseover",function()) does not seem to be working.
The PHP produces a script like this:
<script type="text/javascript">
function setPreview(art, title, rt, excerpt) {
$("#boxPreview").attr("src", art);
$("#selectedTitle").text(title);
$("#runningTime").text(rt);
$("#excerpt").text(excerpt);
}
$(document).ready(function() {
$("#tb0").bind("mouseover",setPreview(url,title,running time,excerpt));
$("#tb1").bind("mouseover",setPreview(url,title,running time,excerpt));
$("#tb2").bind("mouseover",setPreview(url,title,running time,excerpt));
$("#tb3").bind("mouseover",setPreview(url,title,running time,excerpt));
</script>
However, it seems that the mouseover event never fires. Instead, it seems that when the page is fully loaded, setPreview is run for the very last element (#tb3).
I have no idea what I'm doing wrong. If you would like to see the page in action for yourself, you can view it here.
You may try writing the same code like this
$("#tb0").bind("mouseover" , function(){
setPreview(url,title,running time,excerpt);
});
This may solve your issue. Because i've got same issue before but it was fixed writing this way.
I am trying to make my homepage consistently have a fade in effect when this loads. however, it only works part of the time. This is the current script I am using. I set it to html, since individual div elements didn't seem to work, but setting it to html does and doesn't.
$(document).ready(function () { $('html').hide().fadeIn(1500).delay(6000)});
set to priority before other scripts.
$(document).ready(function () { $('body').hide().fadeIn(1500).delay(6000)});
Try the below code. It will work:
Set ur body first:
<body>
This is my page
</body>
Now the jQuery:
$(document).ready(function(){$("body").hide().fadeIn(1000);});
Check out some Loading effect at CODROPS Article ..
u may find it useful
http://tympanus.net/codrops/2013/09/18/creative-loading-effects/
It won't work if the page loads too slow.
Maybe a lot of images(large photos), scripts etc.
Or just because the slow internet connection.
http://mogswamp.com/testing/
Clicking the "Click to see incentives" header should make the boxes drop down. I have no idea what is wrong. I've been fiddling with this a while, and am at a loss. I'd really appreciate some help.
<script language="JavaScript" type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script language="JavaScript" type="text/javascript" src="/testing/extend.js"></script>
extend.js
(function(){
$('.incentives').hide();
$('.incentives-click').on("click", function(){
$('.incentives').fadeToggle();
});
})();
If you need me to submit anything else, just ask, but it should be easy to see in the page source. Thanks.
Looks like your code is executing before your scripts and/or page is fully loaded. Try this:
$(document).ready(function() {
$('.incentives').hide();
$('.incentives-click').on("click", function(){
$('.incentives').fadeToggle();
});
});
Either put your javascript at the bottom of the page as you should, rather at the head, or make it work with content added after it. Try event delegation, or waiting for DOM ready
I'm trying to use someone's code from an earlier post that I posted on here, and in it, he provided a jsFiddle that shows how to toggle between two images.
I'm trying to replicate exactly what that person is doing, but it doesn't seem to work on my code:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$('#ellomatey').toggle(
function(){
$(this).attr('src', 'bgimage.png');
},
function(){
$(this).attr('src', 'redsquare.png');
});
</script>
</head>
<body>
<img id="ellomatey" src="bgimage.png" />
</body>
</html>
Does anyone know what I'm doing wrong? I have a feeling that it's not calling the function correctly, but it seems to work on that person's example.
The other two answers talk about the actual problem, but they don't tell you how you get to discover that, this is where debugging comes into play.
console.log("before");
$('#ellomatey').toggle(
function(){
console.log("bgimage"); $(this).attr('src', 'bgimage.png');
},
function(){
console.log("redsquare"); $(this).attr('src', 'redsquare.png');
});
console.log("after");
If you do this, you'll notice "before" and "after" in your console. That's okay. But when clicking on the image, you would expect the other console logs, which means that the toggle function isn't doing what you thought it would do.
You can somewhat suppose the heavily used function to work properly, so there must be something up with the selector. Let's inspect that.
console.log($('#ellomatey'));
Heh, what?! No elements.
And then you start to think why and then you'll discover you need to wait till the DOM loaded; supposing you would have some underlying background in how a webpage loads, which is a prerequisite for what you're doing.
Wrapping
$(document).ready(function() { ... });
around it does exactly that.
All it takes is a little understanding and some simple debug output...
Don't just mindlessly code supposing it'll work, but verify your assumptions while you do it.
You need to wrap your code in a document.ready call. The way you have it the code will try to run before the actual content of the page has loaded.
<script>
$(document).ready(function() {
$('#ellomatey').toggle(
function(){
$(this).attr('src', 'bgimage.png');
},
function(){
$(this).attr('src', 'redsquare.png');
});
});
</script>
You're defining your toggle function for an element that doesn't exist yet in the document, so you should wrap the js code on window.load handler (assuming you want to wait the complete image load) or at document.ready event
I created a flexible toggle script:
jsBin demo
put the second image url inside an data attribute for your image:
<img id="ellomatey" src="img_1.jpg" data-src="img_2.jpg" />
and on click just call the 'swap' function!
$(function(){ // BTW, you were just missing this 'ready' function :)
function swap(){
var mem = this.src;
this.src = $(this).data('src');
$(this).data('src',mem);
}
$('#ellomatey').click( swap );
});
This snippet can also handle multiple elements by just nesting your elements:
$('#ellomatey, .button, #something').click( swap );
(Added also in the demo a pure JS version. Have fun!)
I have an element which shows important text to the user, as such I'd like to animate it in to the pane (motion draws the eye) rather than just have it somewhere where the user may miss it.
How can I have it showing by default (for the 1% or so of users who surf with javascript off), but animated in for the rest?
Using
$(document).ready(function(){
$('#messagecenter').hide();
$('#messagecenter').show('fade', 'slow');
})
Causes the element to load visible, then disapear, then fade.
display:hidden;
$(document).ready(function(){
$('#messagecenter').show('fade', 'slow');
})
Will of course hide it for users with no Javascript.
Is there any good way to do this?
Simple way: have the content hide for JS-enabled users immediately after
including it in the page, rather than waiting for the entire document to load:
<div id="messagecenter">Albatross!</div>
<script type="text/javascript">
$('#messagecenter').hide();
$(document).ready(function() {
$('#messagecenter').show('fade', 'slow');
});
</script>
This is usually enough to stop a flash of the content rendering as the page loads. But maybe not if the content is complicated/large. In that case:
Watertight way: add a class to an ancestor element (eg body) when JS is enabled, using CSS to ensure that the content being loaded is hidden-by-default only when JS is on:
<head>
<style type="text/css">
body.withjs #messagecenter { visibility: hidden; }
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#messagecenter').show('fade', 'slow');
});
</script>
</head>
<body>
<script type="text/javascript">
$(document.body).addClass('withjs');
</script>
...
<div id="messagecenter">Albatross!</div>
You can go with your second option of using display: none;, and include your text again inside a noscript tag.
Not exactly the cleanest thing though, since you'll be duplicating your element/text.
Easiest answer: Don't wait for document.ready to show it. Just put that code at the bottom of your <body> and it should hardly be noticeable.
Be sure to chain your queries too.
$('#messagecenter').hide().fadeIn('slow');
Always use the <noscript>...</nosript> tag for those 1% users.
And keep the code for the normal users untouched.