We Keep Coding

ready(function() doesn´t work properly

I'm using this jquery function to scroll into a div coming from a link at the index; when I execute the action (clicking on the link to go to the secondary page) and the scroll is executed, it works but not with the right 'scrollTop' measurement.
I realize that it works correctly until I reload the page. I do not know if I'm using the correct function.
var locationString = window.location.hash;
var headerHeight = -70;
$(document).ready(function(){
var divLoc = $(locationString).offset();
console.log(locationString, divLoc.top , divLoc.top + headerHeight);
$('html, body').animate({scrollTop: divLoc.top + headerHeight}, "slow");
});

The most common cause is the miss understanding of two event related to the page load: $(document).ready() (all elements of the DOM are ready to query/modify or whatever) and $(window).load() (all the images and related css are ready and the page will be rendered and will be fully displayed by the browser).
If you use $(document).ready() to apply actions that need all the page to be loaded for correctly display all the sizing, it will fail, because the images are not loaded yet so the vertical offsets (as in your case) may not be correctly computed.
So you need to use $(window).load() instead, so when you scroll to the element you will ensure that the page is fully rendered an all the elements will be placed as they should be.
Hope it helps.

Scrolling to an element without ID in a window opened by window.open

At the top of my page, I have a menu with a couple of items, and when I click them, I scroll to a point of in page where the div is placed, using this line of code:
$('html, body').animate({scrollTop:$(divid).position().top - 160 }, 'slow');
where $(divid) contains the classname of the div. (I am using Drupal so the possibility of adding an ID is not there).
This works fluently, but now I have the same menu in another page. When I click a link, I navigate to the page where the div is placed in, but I can't get it to scroll to the div.
After a lot of research I came to this piece of code
$('#block-views-footer-menu-block-2 .views-row-6 a').click(function(e){
e.preventDefault();
var newwindow = window.open('/aanbod', '_self');
$(newwindow.document).ready(function(){
to_position('.field-paragraphs:nth-of-type(6)');
});
});
where to_position() contains the first line of code in this post.
However, the to_position() function fires before the new window is loaded. This way, the moment the to_position() function is fired, '.field-paragraphs:nth-of-type(6)' is not known yet, so the function cannot access the position of it.
I really don't see what I am doing wrong, any help is appreciated.
Thanks in advance!

Pass the information to the pop-up itself and let it do the scrolling for you.
var newwindow = window.open('/aanbod?scrolltoposition=' + ".field-paragraphs:nth-of-type(6)", '_self');
now in this new window, add the code to scroll the position you want to scroll to
$(document).ready( function(){
var elementSelector = location.search.split( "=" )[1];
var $element = $( elementSelector );
$('html, body').animate({scrollTop:$element.position().top - 160 }, 'slow');
} );
ensure that you have included the jquery in the pop-up

If you are using jQuery, you may use the following
$(document).ready(function(){
// your code
});
A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).load(function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.

navigation appears when I scroll down page--it should appear on page load

The navigation bar appears when I scroll down the page, but I want it to appear on page load.
Here is jQuery code I am using:
<script type="text/javascript">
$(document).scroll(function() {
if ($(this).scrollTop() == 20) {
$("#floating-nav-content").slideUp(400);
} else {
$("#floating-nav-content").slideDown(600);
}
});
</script>
Here is link to where I am using this.
http://dev.servicescart.com/about
This link is only for the internal page of this site, like I said above.

If you want that to be applied on Page load, remove that scroll event and hook the action to document ready event.
Documentation for .ready() event
Description: Specify a function to execute when the DOM is fully
loaded.
$(function(){
// do your logic for slide action
});

With the help of Rahul, I did it. Here is code I used to load navigation on page load, not with scroll down wait.
<script type="text/javascript">
$( document ).ready(function() {
$("#floating-nav-content").slideDown(600);
});
</script>

Javascripts not fully loading in jQuery ajax content

I have a problem and it's giving me headaches since I started looking for it yesterday.
I have a couple of jQuery scripts and my page includes .load jQuery ajax (at the bottom of the page).
I use a hover effect for the images and a fixed position of the header that is located in js/tools.js
The problem is that, randomly my browsers won't load the tools.js into the ajax. So sometimes you don't see the image hover effect in the loaded ajax content. When refreshing the page it woks fine.
My first bet was that the scripts I use collide or that there's a problem with the order in which the content or the .js loads.
js:
$(document).ready(function() {
$('.cta-btn, .portf1, .portf2, .portf3, .portf4, .portf5, .btn-facebook, .btn-twitter, .btn-linkedin, .btn-studiofacebook, .btn-studiotwitter,.btn-studiolinkedin,.newsitem1, .newsitem2, .newsitem3').append('<span class="hover"></span>').each(function () {
var $span = $('> span.hover', this).css('opacity', 0);
$(this).hover(function () {
$span.stop().fadeTo(200, 1);
}, function () {
$span.stop().fadeTo(400, 0);
});
});
});
$(function(){
var stickyHeaderTop = $('#stickyheader').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
$('#stickyheader').css({position: 'fixed', top: '0px'});
$('#stickyalias').css('display', 'block');
} else {
$('#stickyheader').css({position: 'static', top: '0px'});
$('#stickyalias').css('display', 'none');
}
});
});
html:
<!-- portfolio -->
<div id="portfoliowrapper">
<div id="portfolioitems"></div>
<script>$("#portfolioitems").load("werk.html #portfolio");</script>
<div class="clear"></div>
<h2 class="btn">Werk</h2>
</div>
Any ideas? Thanks in advance!

You need to show some code, you can't expect us to dig through your site.
It's very likely that you're using
$(function(){
// code that depends on images being loaded here
});
However, that will not wait for the images to load, it only waits until the DOM is ready to be modified. The event that waits for images is the load event of the window.
$(window).load(function(){
// here all images in the HTML are guaranteed to be loaded
});
The second time your page is run, the images are in the cache and they are already loaded when the DOM is ready, that is from your $(document).ready() handler

The issue is here:
$("#portfolio").offset() is null
Line 33
According to Firebug. Looks like you are trying to call a function before the page has been completely rendered, this is causing an error as it cannot calculate the offset and it breaks the rest of the function.

How do I add a loading indicator to my page while my iframe loads?

I am currently creating a page where upon clicking a link an iframe is inserted into a div and it's contents loaded. I do this using the following jQuery call:
$('#mydiv').html('<iframe src="sourcelink.html" frameborder="0" width="760" height="2400" scrolling="no"></iframe>');
Sometimes the source content loads very slowly and, as a result, it looks like nothing is happening. I would like to have a simple loading animation while the content is loading while the iframe's content loads. When the iframe finishes loading it's content should pop in and the loading animation should go away.
I've been considering a couple ways I could do this (e.g. having a separate loader div to simply swap the two in and out) but I'm not sure of what the 'best' approach to solving this problem is. Perhaps I shouldn't be using .html()? I'm open to suggestion if there is a more correct solution.

Is there any reason you can't listen to the onload event of the iframe itself? It should fire after the child content has loaded.
Something like this:
showLoader();
$('#mydiv').html('<iframe src="sourcelink.html" frameborder="0" width="760" height="2400" scrolling="no"></iframe>');
$('#mydiv iframe').load(function() { hideLoader(); }

So In my case doing the following did for me..
The HTML
<iframe id="ifrmReportViewer" src="" frameborder="0" style="overflow:hidden;width:100%; height: 1000px;"></iframe>
and I was loading the iFrame on button of a click, so here is the JS
$(document).ready(function () {
$('body').on('click','#btnLoadiFrame',function () {
ShowLoader();
$('#ifrmReportViewer').attr('src', url);
$('#ifrmReportViewer').load(function () {
HideLoader();
});
});
});

You need to define a method that allows your iframe to highlight that it has finished loading, e.g.:
Main page:
var ChildFrameComplete = function()
{
$("#progress").hide();
};
var LoadChildFrame = function()
{
$("#progress").show();
$("#mydiv").html("<iframe src=\"sourcelink.html\" ... ></iframe>");
};
sourcelink.html:
$(function()
{
parent.ChildFrameComplete();
});
If the iframe is being sourced from the same domain as the parent page domain, it can call methods defined in the parent page through the window.parent property.

Just give the containing element (this case #myDiv) a background of a throbber and the iframe contents will overlap this when it's done loading.
That's the simplest.