Problems with jQuery animations when using auto-pager - javascript

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.

Related

Jquery div fadeIn on load not working

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.

Javascript Lightbox 2 Issue

I'm quite new at this, so please be thorough with the explanation.
I'm using the Lightbox 2 jQuery file, along with another jQuery file to execute a menu slide animation and a fade animation on my images.
I'm assuming that there is conflict between the two jQuery files, but I'm not sure how to resolve it.
Any advice? I read something about jQuery.noConflict(), but I'm not sure how to implement it, or it if will work.
<script src="../Scripts/jquery-2.0.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div#ScrollBox img').animate({
opacity:.5
});
$('div#ScrollBox img').hover(function(){
$(this).stop().animate({opacity:1}, 'fast');
}, function(){
$(this).stop().animate({opacity:.5}, 'slow');
});
});
</script>
<!--LIGHTBOX-->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
It looks like you are loading two different jQuery versions (1.10.2 and 2.0.2), which is, I believe, causing the problem. I would recommend removing the 1.10.2 jQuery script, and one of the following (in order of effort, in case you want to try all 3):
-see if your lightbox plugin still works
-find a newer version of the same lightbox
-use a different lightbox, for example fancybox
In any case, make sure that your end result only has one version of jQuery being loaded.
Is there a reason you need both? They should have pretty much the same code so you only need to include one. I would use whichever is the latest.
It would help if you included in your post the lines of code where you explicitly add them so we can see what you are doing.

Loads style and/or animation before show the page

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.

Is there a way to measure loaded content of page and show percentage of it?

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

jQuery Mobile + Flexslider2

I'm having huge troubles getting jQuery Mobile to work with other Javascript libraries - in my case Flexslider 2 (http://flex.madebymufffin.com/examples/basic.html).
I have a couple of pages where I want to use the flexslider in addition to jQM. Unfortunately, the slider doesn't work / isn't loaded when I click on links on my site.
I know this is because of the way jQM loads pages - by loading them with AJAX and adding them do the DOM.
I've been looking around for hours now to find out how to use events like "pageshow" and "mobileinit" etc but I just can't get it to work, so any help is really appreciated.
Heres what I'm doing now:
In each < head > part of my pages:
<script src="js/jquery-1.7.2.js"></script>
<script src="js/jquery.mobile-1.1.0.js"></script>
<script src="js/jquery.flexslider2.js"></script>
<script type="text/javascript">
$('#flexslider').bind('pageshow', function(){
$('.flexslider').flexslider({
animation: "slide",
});
});
</script>
This works when I reload the page manually, however it doesn't work when I visit the page through a link on my site.
You can add rel="external" or data-ajax="false" to the link of FlexSlider page, which can disable the Ajax loading of page. You can refer to the document here
Try putting it inside a callback of pageinit. Like so...
$(document).bind('pageinit', function(){ $('.flexslider').flexslider({ animation: 'slide' ); });
I'm sure someone more knowledgable can chime in as to why this is necessary, but I'm 99% sure it's the way to go.
Enjoy!
I had this same problem. Flexslider on the index page of a Jquery Mobile site would work when first navigated to, but not if returned to through the menu or back button.
I used the 'pageshow' event rather than the ''pageinit' event and it worked perfectly:
$(document).bind('pageshow', function() {
$('.flexslider').flexslider({
animation: "slide",
});
});

Categories