I need some advice about my problem.
I'm using a JQ Multiselect and JQ Uniform to make more of the pages hotties.
The problem is.... The JQ are applied after the page has already loaded and it happens that you see the page without the "effects" (for about 1 second) and then start the effects / styles.
And this thing is horrible and frustrating.
Before writing here I took a tour on StackOverflow and on the internet but I can not find the solution to my problem.
Note: obviously, in the head tag I have the src of single js and othe tags before and after my "Javascript problem".
I tried with
<head>
<script>
$(document).ready(function(){
$(window).load(function(){
$('#SomeID').multiselect({});
});
});
</script>
</head>
and with
<head>
<script>
$(window).load(function(){
$('#SomeID').multiselect({});
});
</script>
</head>
but is the same thing!!!
You think there's a solution?
Do CSS display: none on the body or all the main sections of your page, so that when the entire page is loaded all the contents of it are hidden. You can then use whatever JavaScript effects you want to change the display property.
Related
I just have a Div ".text" that i want to fade in on a subdomain page… I googled on stackoverflow and came up with this:
<script type='text/javascript'>
$(function(){ // $(document).ready shorthand
$('.text').hide().fadeIn('400');
});
</script>
The CSS is just font styling… I even tried it before with a display:none; and without the .hide() but somehow it does not work… I load this jQuery:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
Do I need another one? Or do I need to name the subdomain in the script? I wanted to put the script in my index.php file… I just can not explain it to myself…
Load the script file next to including the Jquery plugin.
Since there is no fault in your code.
This may be the problem.
I think because you are feeding in fadeIn('400') 400 is an int value not a string. Try using
fadeIn(1600)
and you might see a more noticeable fade effect.
I mean page preloaders where you see percentage of loaded page. Is it just fakened or is it truly a size of just loaded page related to whole page size? Is it possible to measure it with javascript? How developers make it? Here's example which seems to be kinda http://www.ultranoir.com/en/#!/home/
Have a look at the jPreLoader jQuery plugin
Using it is very simple :
$(document).ready(function() {
$('body').jpreLoader();
});
Most websites are faking it. I was also searching sometime ago and only found solution like this plugin:
see in action here http://www.inwebson.com/demo/jpreloader/
<script type="text/javascript" src="js/jpreLoader.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$('body').jpreLoader();
});
// ]]></script>
also check out this solution, it's probably the closest to the real thing:
http://www.seabreezecomputers.com/tips/progress.htm
I have an auto-pager set up on my page to allow for infinite scrolling. I also used jQuery to change the opacity of images when they're hovered over. however, the animation only works on the first page, not the consecutive pages that are automatically loaded. any idea why this happens? or are there any methods of fixing this? thanks.
this is the code i'm using for the images and the auto-pager:
<script type="text/javascript">
$(document).ready(function(){
$(".post").animate({opacity:.8});
$(".post").hover(function(){$(this).stop().animate({opacity:1}, "fast");}, function(){
$(this).stop().animate({opacity:.8}, "slow");
});
});
</script>
<script type="text/javascript" src="http://static.tumblr.com/q0etgkr/J5bl3lkz1/tumblrautopagernopage.js"></script>
Where are your codes? We're not magicians...
To the extent of trying to figure out what you're saying here, I think there's a huge possibility that your code is not applying to the newer, auto-paged ones. See if you could put a more dynamic code into your system, and apply that AFTER the auto-pager has loaded the images.
One of the scripts added in between the <head> element kills my other javascript. Is their a way to isolate it or not to interfere with other scripts? I need this only for one page, not for the whole site ,etc. frontpage.php. Tried to add the script only to this page, but it dont work, as it seems what it only works than I put in between <head></head> elements.
This is the killer script:
<script type="text/javascript">
$(document).ready(function() {
$.noConflict();
<!-- THE ACTIVATION OF THE MINI IMAGE SLIDER PLUGIN -->
jQuery('#first_mini_slider').minislides(
{
width:980,
height:320,
slides:5,
padding:30,
ease:'easeOutQuint',
speed:400,
hidetoolbar:2000,
animtype:1,
mousewheel:'on'
})
<!-- THE ACTIVATION OF THE LIGHTBOX PLUGIN -->
jQuery('.freshlightbox').fhboxer({})
jQuery('.freshlightbox_round').fhboxer({
hover_round:"true"
})
});
</script>
The script you posted puts jQuery into "noConflict" mode, which means that the $ used to refer to jQuery will no longer work. You can still refer to jQuery with jQuery i.e. these two are equivilent:
$('.freshlightbox')
jQuery('.freshlightbox')
If this is what is causing problems with your other scripts you can do one of the following:
don't put jQuery into noConflict mode
change your other scripts to use jQuery instead of $
put the following code around your other scripts:
(function($){
// your code goes here
})(jQuery);
more detail on the last here: https://stackoverflow.com/a/4484317/12744
I have a page with several galleries including accordions and sliders. The problem is that the page takes forever to load. Is there a way of wrapping an image in a bit of code or applying a class to it to force it to load only after everything else is loaded?
Sure you can. Replace your img src attributes with a "#", and add a custom attribute, something like this:
<img src="#" data-delayedsrc="/img/myimage.png" />
Then, add a javascript line when your page loads that does something like this:
$('img').each(function(){
$(this).attr('src', $(this).data('delayedsrc'));
});
If you're using jQuery (and I assume you are as this is tagged as such) take a look at the Lazy Load Plugin for jQuery. It delays the loading of images that are outside the viewport until the user scrolls to them.
Update 2015: This plugin was broken at one point, but now works again. The last comment says as much, but I almost missed it because it was hidden in the collapsed comments.
An easy way to delay loading images (and iFrames) is with a combination of pure JS, jQuery.data() and the custom HTML5 data-* attribute. The src of the image initially can point to a loading GIF. The data-* attribute contains the URL path of the image you ultimately want to load. The pure JS sets up a delay (3000 milliseconds in the example below), and then executes the jQuery.data(), which sets the image's src to the intended image.
The example below performs on each image with class="load-delay".
Live Example: http://seandebutts.com/2013/07/03/html5-delay-loading-images-iframes/
CODE
JS and jQuery:
$(document).ready(function () {
setTimeout(function () {
$('.load-delay').each(function () {
var imagex = $(this);
var imgOriginal = imagex.data('original');
$(imagex).attr('src', imgOriginal);
});
}, 3000);
});
HTML and jQuery Library:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<meta charset="utf-8" />
</head>
<body>
<h1>Loading-Delayed Image</h1>
<img class="load-delay" src="http://i.imgur.com/7ZMlu3C.gif" data-original="http://oi42.tinypic.com/9sqmaf.jpg" />
</body>
</html>
Keep only one image into the HTML so that viewer has something to start with, then inject the rest using jQuery with
$(document).ready(function() {
//load rest of the images
});
You can also use event loaders and AJAX or "load as you go", just build a simple call back function if it's auto-rotating gallery or load on click.