Develop Reference

iOS unable to manipulate jQuery DOM changes on the first page load

I've been having a weird issue with Safari on iOS.
I'm using jQuery to manipulate a couple of divs, moving them, wrapping them and giving them dynamic heights. On every browser, these changes are perfectly working during the first page load, on Safari, sometimes yes and sometimes not.
basically in Safari, it loads the page without applying any changes, then if I keep refreshing it, it never works, but if I reenter the url, on the address bar and I hit "enter", that time it works.
Now, I solved it wrapping the function that triggers those DOM manipulations in a setTimeout function and I give it a delay of 400. SO now it waits 400ms before firing the function, and this way it's working, but I don't like it that much. I was wondering if you guys know a better system.
my code:
$('.wrap-services, .wrap-banner-cta, .wrap-logos, footer').wrapAll('<div class="fixer"></div>');
$('.fixer').insertAfter('.content');
function getHeight() {
var imgOffset = $('.wrap-hero-home picture.splash-main img').offset().top;
var fixerHeight = $('.fixer').height();
imgHeight = $('.wrap-hero-home picture.splash-main img').height();
$('.fixer').css('top', (imgOffset + imgHeight) + 50);
$('.container').height((imgOffset + imgHeight + fixerHeight) + 50);
}
//this is what I use now to prevent that issue
setTimeout(getHeight, 400);
Thanks

Technically, jQuery's bind method is deprecated, so you should probably use on, like they suggest:
$(window).on('load', function(){
//Do something
});
See the notes in this page related to the deprecation: http://api.jquery.com/bind/
If you're using an old version of jQuery, I guess it wouldn't matter, then proceed with bind

jQuery animate() step: cross browser now argument

Disclaimer: I'm very new in jQuery animations and this problem sounds so stupid it has to have an easy solution but I can't even find a reference of it existing when searching online.
Disclaimer 2: The code you'll see is not optimised, for now I just need it to work.
So I have this svg and I have to animate some of its components, and that's no problem.
I wrote this piece of code that should work even cross browser, but it doesn't and I know why but I have no idea how to fix it.
$('#button_next').bind('click', function(){
if(!(parseFloat($('#last_rectangle').attr('x')) <= 308.1)){
$('.activeScroll').each(function(){
var xValue = parseFloat($(this).attr('x'));
// $(this).attr('x', (xValue - 45 - 85.5));
$(this).animate(
{
x: "-=130.5"
}, {
duration: 1000, step: function(now) { $(this).attr('x', now); }
});
});
}
});
What this does (and it works in Chrome) is it changes the x value smoothly giving me an eased scrolling. It doesn't work in FF though. It works only if i substitute
$(this).attr('x', xValue-now);
with
$(this).attr('x', now);
And I get why when logging the now value. In FF it goes from 0 to -130.5 which is not what I want in the first case, in Chrome the same exact code outputs the relative numbers i need so it works like a charm.
For completeness this is what my HTML elements look like:
<rect x="177.6" y="12.9" class="activeScroll" width="85.5" height="2"/>
and I have multiple <rect> elements.
It seems like FF can't work with relative values, although xValue gets detected correctly so it can read (and write, as you can see by the commented line, which works cross-browser but it's not animated) the attribute x.
The documentation doesn't mention such a difference in now so I'm stuck with this problem.
I'm using jQuery 2.1.4, if you think the issue is the version, updating to 3.2.1 gives me the error that I'm setting a property that only has a getter, but it sets itself anyways in jQuery 2.1.4 so I really don't understand where the problem lies there.
Anyone has a clue?

bootstrap scrollspy bug when resizing browser

Hello Stackoverflow bootstrappers!
I don't see that this question has been asked before, and I am really interested to see the outcome.
How to duplicate the bug:
Open the page: (my current url testing this bug) http://dnwebdev.com/dev/
Resize the page down to a tablet
Use the navbar
(notice that the url has changed to include #section) this only occurs if you resize the browser. This causes the spying/scrolling to be off.
NOTE: if you open it on a mobile device the problem does not occur so a client won't face it, it was just bugging me.
Thank you, looking forward to your responses.
Edit: When clicking on the title brand the url adds #section-1 without the need to resize, which is also throwing me off. At this point I am thinking it is a bootstrap thing.
The only Javascript I have on my page is the following:
function close_toggle()
{
if ($(window).width() <= 768)
{
$('.nav a').on('click', function() {
$(".navbar-toggle").click();
});
}
else
{
$('.nav a').off('click');
}
}
close_toggle();
$(window).resize(close_toggle);
The code above closes the toggle after a selection is made in mobile.
if ($(window).width() <= 768)
{
var offset = 75;
}
else
{
var offset = 90;
}
$('.navbar li a').click(function(event) {
event.preventDefault();
$($(this).attr('href'))[0].scrollIntoView();
scrollBy(0, -offset);
});
The code above (based on screensize) will offset the scrollspy
Edit #2
The only reason I need any offset is due to fixed-top which causes scrollspy to freak out.
Help is much appreciated.

Fixed-top seems to carry the bug with scroll spy leaving me no choice but to use javascript.

To handle navigation correct highlighting, you have to consider, that all the calculations made by scrollSpy are being performed when scrollTop value is equal to zero.
So the solution looks like this:
var refreshScrollSpy = function (element, navElement, offset) {
// cache current scroll position to come back after refreshing
var cacheScrolltop = $(element).scrollTop();
$(element)
.scrollTop(0)
.scrollspy(‘refresh’)
.scrollTop(cacheScrolltop);
};

jQuery UI .widgets resetting scroll positions of children when they are hidden

I am making heavy use of jQuery UI with my latest project. Unfortunately I've hit a major wall due to some really whacky behavior exhibited by the jQuery UI widgets when they contain elements with scrollbars for overflow.
Check out this demo
Scroll down in one of the .scroll-container elements
Click an accordion header
Click on old header - note the element was auto-scrolled to the top.
Is there anyway to prevent this from happening? It's screwing with a major plugin of mine that utilizes jQuery scrolling. I'm flat-out lost as to what to do here!
Perhaps this is a bug worth mentioning in the jQuery UI dev forums...
Edit
So far the bug has been confirmed in...
Chrome - 8.0.552.231 on OSX 10.6.5
Safari - 5.0.3 on OSX 10.6.5 (makes sense)
FF - 3.6.12 on OSX 10.6.5
And is not present in...
FF - 3.6.12 on OSX 10.6.5

I had the same problem. A workaround I came up with is to set the id of the ui object after creation. Then I save the scrollTop() position before I hide the object. And when I show the object again, I simply set the scrollTop() to the saved value.
// Set the id of the object if you have multiple objects with the same class
if ($("#divScroll").length == 0) { // If the object does not exist with an id
$(".ui-jqgrid-bdiv").each(function () { // Select each object via class
strID = $(this).attr("id");
// If the current object (selected via class) does not have an id, set id
if (strID == undefined || strID == false) {
$(this).attr("id", "divScroll");
}
});
}
// Save the scroll position before hide()
intScrollTop = $("#divScroll").scrollTop();
$("#divScroll").hide();
// Set the scroll position to the saved value after show()
$("#divScroll").show();
$("#divScroll").scrollTop(intScrollTop);

According to the jQuery UI dev who answered my trouble ticket:
This is just how browsers work, as soon as you hide an element, it loses the scroll position.

jQuery Javascript scrollTop not working as expected on Chrome to restore scrollbar position

I'm using the following jQuery Javascript to save the scrollbar position before the unload event and reapply it again:
$(document).ready(function () {
document.documentElement.scrollTop = $.cookie("scroll") || 0;
});
window.onbeforeunload = function () {
$.cookie("scroll", document.documentElement.scrollTop, { expires: 7 });
}
Basically I have a series of links that refresh the page and I would like the browser to restore the scrollbar position. Note I cannot use AJAX in this instance. It works a treat in Firefox. In Chrome and Safari however it only works when the browser window is refreshed, and not when the link is clicked to refresh the page. It's as if clicking the link isn't being recognised as onbeforeunload.
I have tried to modify the code to set the scroll cookie using a click event as follows with no luck:
$(document).ready(function () {
document.documentElement.scrollTop = $.cookie("scroll") || 0;
});
$('a.lockscrollbar').click(function() {
$.cookie("scroll", document.documentElement.scrollTop, { expires: 7 });
}
FYI I'm using jQuery 1.4.2 with the jQuery cookie plugin.
Any ideas?

This is an older post but I was having the same issue with Chrome 20. Using jQuery 1.7.1 this worked for me:
$(window).on('load', function(){
$('html body').scrollTop(0);
});

Before Chrome 10 this use to work like a charm... now it seem to only work in Firefox (Anyone have tested in IE9 ?)
var y = $(window).scrollTop();
$('html, body').animate({scrollTop:(y + 50)}, 1000);

Scrolling the <body> in Chrome and Safari doesn't work very well, or possibly at all. I don't know why but I once had a similar problem and I fixed it by using a <div> nested inside the <body>.

This is the code I use (tho the site I'm working on is still in build stage, but this works):
$(document).ready(function(){
$(window).scroll(function(){
var posY = $(document).scrollTop();
$('#trigger').click(function(){
if($.browser.webkit){
$('body').stop().animate({scrollTop:0},'slow');
}else{
$('html').stop().animate({scrollTop:0},'slow');
}
});
});
});
Webkit won't scroll to the top when the object being scrolled is 'html', so first I check for browser type (and before you say it I know jQuery.support would be better - like I said still in build stage). Browsers other than webkit accept the 'html' selector, so I use that for all other browsers (annoyingly, using 'html' works in Opera but not Chrome, and using 'body' works in Chrome but not Opera...!).