Tag: cross-browser
Nabin Nepal (Starx) cross-browser css jquery scrolling
November 5, 2012

scrolltop() is not work smoothly in chrome & safari but work in firefox

Question by sandeep

sandeepsandeep

If you check this link http://jsfiddle.net/Hbkdt/.

$(window).scroll(function() {
       $(".fixed").css("top", $(window).scrollTop() + "px");
    });

Move your scroller downward. Then you can saw the .fixed DIV work smoothly in FF but it’s not work smoothly in Safari & Webkit.

I don’t know how can i fix it. Any help is appreciated 🙂

I am using Chrome Version 22.0.1229.94 in mac.

Answer by Starx

StarxStarx

I am suggesting an alternative. The most favorable option to give to the smooth effect is to animate the change in position, to fake the easing.

Something like this

$(window).scroll(function(){
    $(".fixed").stop(false, true).animate({ "top" : $(window).scrollTop()}, 1000); 
});

Demo

This works great but when you starting scrolling with the scroll pane it starts stammering again.

But, to overcome this, you can use of debouncing techniques.

$(window).scroll(function(){
    $.doTimeout( 'scroll', 250, function(){
                         // ^ This time prevents the following code to run, 
                         //   if another scrolling occurs within this time

                         //   Thus enabling us to give a smooth scroll effect
                         //   Once the user is done scroll

        $(".fixed").stop(false, true) //break the queue fast
                   .animate({ "top" : $(window).scrollTop()}, 200);
    });
});

Demo

Nabin Nepal (Starx) cross-browser css jquery
May 29, 2012

How to make application browser compatible

Question by Rajesh

Rajesh Rajesh

I am building an application which is working fine in IE8 and Mozilla Firefox,but not in IE7. I like firebug and I like to debug my application using that,but currently I am struggling with browser compatibility thing. I found that application developed is working in IE8,FF11 but not in IE7(mainly layout is highlighly impacted). I am using jquery for browser related functionality and the jquery thing seems to be working..what shall I do to make layout working fine in IE7?
Framework used is spring3,hibernate..
I have huge set of CSS I dont think pasting that here will be any helpful.I have used postion relative and used top,left position some things..padding and margin are used but not that much..is that the cause? what is the possible suggestion? why IE7 and IE8 render things in different way? Shall I load different set of CSS for IE7,using spring? is it good solution?if yes then how to do that in spring?
Shall i discard using firebug and rely on IE8 debugger because our client mainly use IE7

Answer by Starx

StarxStarx

Browser compatibility is a very lengthy topic and it covers more than one area to perform correctly.

If IE 7 or IE browsers are your only problem, then CSS Conditional comments is the PERFECT solution for you.

Create a separate stylesheet, with all the neccessary fixes for IE7 browser. Then call the script is such a way, only IE 7 will render it.

<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" media="screen" href="ie7fix.css" />
<![endif]-->

Now, the above stylesheet is only apply, in case if the browser is IE 7. So, all your fixes will be applied, thus the layout will be fixed. 🙂

To read more about conditional comments, read this article.

Nabin Nepal (Starx) cross-browser css html javascript jquery
April 20, 2012

How can I detect (and correct?) various scroll bar visibilities cross-browser?

Question by Alan H.

Alan H.Alan H.

Basically, I need to have (or fake) scrollbars showing up exactly at the same times in textarea and in a div (with white-space: pre-wrap, so as to treat whitespace the same), when their contents are the same.

In Webkit, this is easy:

textarea.foo, div.foo {
  overflow: auto; /* show scrollbars exactly when needed */
  /* also match padding, height, width, font, line-height, etc. */
}

But some other browsers (Firefox on OS X, I think, and IE7) will actually show a scrollbar on only the textarea and not the div (or vice versa) when the content isn’t long enough to require scrolling.

For clarity, I am not demanding that scrollbars show the same across all browsers. I need this to be true in all major browsers: A div and a textarea show scrollbars exactly whenever the other element does, given the same content, within the same browser. If that’s sometimes, always, or (on Safari/OS X Lion) never is inconsequential.

Answer by Starx

StarxStarx

Configure the scroll bar to show up all the time

textarea.foo, div.foo {
  overflow-y: scroll; /* Show vertical scroll bars at all time 

}
Nabin Nepal (Starx) browser cross-browser html javascript webbrowser
April 9, 2012

Detect when Browser Scrolls Below a Certain Point

Question by user1277170

user1277170user1277170

I have a webpage filled with divs, and when the page reaches 300px from the bottom, it loads more divs.
I’m having trouble finding a detection that works everywhere.

I need some JavaScript (i.e. not JQuery) if statement to put into the body’s onscroll function that will detect the browser scrolling below 300px from the bottom, which works with IE, FF, Chrome, Opera, Safari, Android browsers, iBrowsers, etc.

Answer by Starx

StarxStarx

You have to know the position of the point, then checks the window scrollTop

if ($(window).scrollTop() > point) {
 //Carry On
}
...

Please fill the form - I will response as fast as I can!