jQuery page fadeIn() only working on index page - javascript

Thanks everyone, for the quick help! Script now works. I've updated the site and code below. Maybe someone can find this code useful. :)
I've gotten the page (http://www.katmcgo.com) to fade in as desired using jQuery. However, it only fades in on the index page -- all subsequent pages load as normal.
I have the following script in the header of each page (including the sub-pages that are not fading in); it is included in each page using PHP:
$(document).ready(function() {
function fadePage() {
// Target the tags you want to effect with the fade
var fadingTag = "section";
var fadingTag2 = "hr";
var delay = 0; // Initialize delay - Should start at 0
var delayStagger = 600; // Delay stagger - Time between elements fading in
var fadingNum = document.getElementsByTagName(fadingTag).length; // Find out how many elements you need to hide
// Get and fix the overall document height before it disappears (which will happen when elements are hidden)
var pageHeight = $(document).height() + "px";
$("#wrapper").css("height", pageHeight);
// Hide all targeted tags
$(fadingTag).css("display", "none");
$(fadingTag2).css("display", "none");
// Fade each targeted tag in, one by one
for (var i = 0; i < fadingNum; i++){
$($(fadingTag).get(i)).delay(delay).fadeIn(delayStagger);
$($(fadingTag2).get(i)).delay(delay).fadeIn(delayStagger);
delay += 350;
}
}
fadePage();
});
I've been racking my brain as to why this is happening, and doing searches to the find the answer, but coming up with nothing...
This page is in the early stages, so I'm just doing dev in Firefox and Safari... fade works in both, but only on the first page. Any help would be greatly appreciated.

install firebug in firefox. your getting an undefined element[0] on all pages except index.php.
Edit:
wrap your s3Slider call inside an if statement checking if the element exists.
if( $('#slider').length ) {
$('#slider').s3Slider({
timeOut: 3500
});
}
Alternatively you could not output that code from the server if your not on the index page.

You have an error coming from s3Slider.js on all of your subsequent pages. Probably because the slider element does not exist on those pages, but the plugin is still being called.
The fade script probably works fine.

Related

Using jQuery's .each feature when page is constantly updating

I've been trying to get to find a solution for this all day but can't think of a good one that I can get working.
Basically, I made some jQuery/javascript code that runs an each() loop for certain items on a web page. This works well, but the page it runs on updates when you scroll to the bottom, adding more results. At the moment, my script can only go through as many items as there are loaded on the page. I would love for it to be able to go through all of them that are loaded, then scroll to the bottom and go through all the new results and continually repeat this process.
I've tried a lot of different solutions but can't seem to make one that works well.
Any help would definitely be appreciated.
Thanks :)
Edit:
Here are some of the concepts I've tried so far:
Place the code in a while loop and add an offset so it skips all of the items its already gone over
var a = 0;
var offset = 0;
while (a == 0) {
jQuery('.Grid-cell .js-stream-item .ProfileCard').each(function (i, ele) {
if (i >= offset) {
//Run script
}
});
offset = offset + 18; //18 is how many new items are added each time
setTimeout(function () {
jQuery('html, body').animate({scrollTop:$(document).height()}, 'fast'); //To scroll to the bottom
}, 5000);
}
Place code in while loop but no offset
(Similar to previous but offset removed since I figured it could just runover the ones already done)
This one was a bit more experimental since I was getting desperate after the previous attempts failed. Basically, I added a hidden checkbox, then I put my script and the each loop inside of a function. Then whenever the checkbox was clicked it would run the function which ran my script and once the each loop was complete it would scroll to the bottom of the page and click the checkbox to make the function go again
$( ".Footer-copyright" ).append( "<input type='checkbox' class='functionclass' style='display:none' value='no' />" );
jQuery(".functionclass").on("click", function() {
myfunction();
})
function myfunction() {
jQuery('.Grid-cell .js-stream-item .ProfileCard').each(function (i, ele) {
//Run script
});
jQuery('html, body').animate({scrollTop:$(document).height()}, 'fast');
jQuery(".functionclass").click();
}
jQuery(".functionclass").click();
So I believe I've found a solution to my issue. It's not exactly the cleanest solution ever, but it seems to get the job done. Basically, I've put the task inside of a setInterval() function and so it will now complete the task every 5 seconds and will scroll to the bottom after 15 tasks. This allows it to get an updated list of all of the elements every time it runs. Here is the code for anyone curious:
var i = 0;
task = setInterval(function(){
var elements = jQuery(".Grid-cell .js-stream-item .ProfileCard"); //Gets all of the elemnts
var element = jQuery(elements[i]); //Gets the element for the attempt number
//Completes task
if (i % 15 === 0){
jQuery('html, body').animate({scrollTop:$(document).height()}, 'fast'); //Scrolls to bottom when attempt number is divisible by 15
}
i++;
}, 5000);

Why getComputedStyle returns 'auto' for slider's width after page-reload?

Here a link: wbrapist.github.io/slider/index.html
First time when you loading page, it's fine (getComputedStyle returns valid value). But just try to reload page by Ctrl+F5, wait for a few seconds then just reload by F5 and you'll see that navigation of slider not at center position. In this moment you can open the browser's console and see that getComputedStyle after reload (F5) returns just 'auto' value. Why is this happening? Why after force reload (ctrl+f5) it's okay and in otherwise case is not?
Can notice: in that case my slider's switch slides animation is not working too. (there getting values via getComputedStyle() too)
Here a bit of code:
var sliderWidth = getComputedStyle(document.getElementsByClassName('slider')[0]).width;
function setSliderNavPosition() {
var nav = document.querySelector('.slider .navigation');
var navWidth = parseFloat(getComputedStyle(nav).width);
var slidersWidth = parseFloat(sliderWidth);
nav.style.left = ( (slidersWidth / 2) - (navWidth / 2) ) + 'px';
}
This trouble exist in Chrome and Mozilla at least.
It's a bad idea to use the document when it's not fully loaded. Depending on the time it takes to load it, your values are going to be different. That's why you get different behaviors.
To solve this, just wait for the document to be loaded by wrapping your code like this:
window.addEventListener('load', function(){
/* ...YOUR CODE GOES HERE... */
});

window interval - checking for element on page and then appending to it

I am trying to wrap some code around jQuery that will continually check for an element on a page and when that element is present, append a defined variable to it. in this case i'm looking for a specific div with a unique ID and trying to append a defined iframe. here's what i have.
window.myInterval = setInterval(function() {
$('#thankyou-container').append(iframehtml);
clearInterval(window.myInterval);
}
), 50);
UPDATE:
Here's the code that I'm trying to insert into the #thankyou-container but have it load after the page loads. The issue I'm having is that this ad code (below) only loads on the page when I refresh my browser. It's so weird that it doesn't display right away:
<script type="text/javascript">
vm_load({
"displayId": "12584",
"publisherId": "33927",
"campaign": "9380",
"maxResults": "3",
"areaofstudy":
JSON.parse(jQuery.cookie('CategorySubCategorySpecialty')).CATEGORIES[0].text.replace('Business','1').replace('Criminal Justice & Legal','3').replace('Education','5').replace('Fine Arts & Design','2').replace('Health & Medicine','8').replace('Liberal Arts & Humanities','5').replace('Math, Science & Engineering','9').replace('Public Affairs & Social Sciences','13').replace('Religious Studies','5').replace('Technology','9').replace('Vocational Training',''),
"md": "1"
});
</script>
jQuery is loaded on the page, and the javascript file that references the vm_load function is loaded prior to this code.
I think I need something that wraps around the code and tells it to load after the page is finished loading. Could that be the solution?
This should fix your problem...
window.myInterval = setInterval(function() {
var $container = $('#thankyou-container');
if ($container.length) {
clearInterval(window.myInterval);
$container.append(iframehtml);
}
), 50);
It will check that the element exists. If it doesn't, nothing happens. If it does then it clears the interval and does the append.
However, I'd recommend this approach instead...
function containerAppend() {
var $container = $('#thankyou-container');
if ($container.length) {
$container.append(iframehtml);
}
else {
setTimeout(containerAppend, 50);
}
}
containerAppend();
It's a little more convoluted, but it uses timeouts instead of intervals so that it takes into account anything that takes time. With the original method you could find the element search taking longer than 50ms, which could cause problems.

infinite scroll pagination javascript implementation issues

I am trying to implement an infinite scroll pagination with javascript in jsfiddle but i am having issues getting it to work properly. I am not seeing the fading in when scrolling and when i reach the end of the content i am supposed to get the message that there is no more data but instead it says it is waiting for more data.
The original example: http://andersonferminiano.com/jqueryscrollpagination/
My implementation: http://jsfiddle.net/jsuHD/
I added an External Resource to the jsfiddle: scrollpagination.js
I think my problem is with the javascript and not knowing what to pass in as contentPage
$(function(){
$('#content').scrollPagination({
'contentPage': 'http://jsfiddle.net/jsuHD/', // the url you are fetching the results
'contentData': {}, // these are the variables you can pass to the request, for example: children().size() to know which page you are
'scrollTarget': $(window), // who gonna scroll? in this example, the full window
'heightOffset': 10, // it gonna request when scroll is 10 pixels before the page ends
'beforeLoad': function(){ // before load function, you can display a preloader div
$('#loading').fadeIn();
},
'afterLoad': function(elementsLoaded){ // after loading content, you can use this function to animate your new elements
$('#loading').fadeOut();
var i = 0;
$(elementsLoaded).fadeInWithDelay();
if ($('#content').children().size() > 100){ // if more than 100 results already loaded, then stop pagination (only for testing)
$('#nomoreresults').fadeIn();
$('#content').stopScrollPagination();
}
}
});
// code for fade in element by element
$.fn.fadeInWithDelay = function(){
var delay = 0;
return this.each(function(){
$(this).delay(delay).animate({opacity:1}, 200);
delay += 100;
});
};
});
If you fire up the console [f12 in google chrome] you will see that when you reach the end of the page a 403 forbidden request is made to jsFiddle itself. Yes I think the problem is in what you are passing to contentPage.
Here's a working fiddle http://jsfiddle.net/jsuHD/10/ of your solution. When you load the html from an external source which allows you to get the resource you want, it works as expected.
//load the html from external resource
'contentPage': 'http://dl.dropbox.com/u/4001846/sample.html'

Google related bar - how to keep from showing up on my website

A new "google related" bar shows up at the bottom of my website. It displays links to my competitors and other things like maps, etc. It is tied in with users using the google toolbar. If anyone has any ideas on how I can disable from displaying on my web side I would sure appreciate it.
Taken from http://harrybailey.com/2011/08/hide-google-related-bar-on-your-website-with-css/
Google inserts an iframe into your html with the class .grelated-iframe
So hiding it is as simple as including the following css:
iframe.grelated-iframe {
display: none;
}
Google removed div and frame names and put everything to important so original answer no longer works on my site. We need to wait for the iframe to be created and then hide it by classname. Couldn't get .delay to work, but this does...today anyway.
$(document).ready(function() {
setTimeout(function(){
$(‘.notranslate’).hide();},1000);
});
Following javascript code tries to find the google related iframe as soon as the window finishes loading. If found, it is made hidden, else an interval of one second is initialized, which checks for the specified iframe and makes it hidden as soon as it is found on page.
$(window).load(function (){
var giframe = null;
var giframecnt = 0;
var giframetmr = -1;
giframe = $("body > iframe.notranslate")[0];
if(giframe != null)
$(giframe).css("display", "none");
else
giframetmr = setInterval(function(){
giframe = $("body > iframe.notranslate")[0];
if(giframe != null) {
clearInterval(giframetmr);
$(giframe).css("display", "none");
} else if(giframecnt >= 20)
clearInterval(giframetmr);
else
giframecnt++;
}, 1000);});
Find the parent DIV element that contains the stuff in the bar. If it has an id or name attribute, and you can control the page CSS then simply add a rule for the element, i.e. if you see something like
<div id="footer-bar-div".....
then add a CSS rule
#footer-bar-div {display:none ! important}
This will not work if the bar is inside an iframe element, but even in that case you should be able to hide it using javascript, but you will need to find the name/id of the frame, i.e.:
var badFrame = document.getElementById('badFrameId').contentWindow;
badFrame.getElementById('footer-bar-div').style.display='none';
if the frame has a name, then instead you should access it with:
var badFrame = window.frames['badFrameName']
There is also a chance that the bar is generated on-the-fly using javascript. If it is added to the end of the page you can simply add a <noscript> tag at the end of your content - this will prevent the javascript from executing. This is an old trick so it might not always work.

Categories