I just found out about this really cool plugin (new for me, old for some of you maybe) and it works like a charm upon implementation, but only in regular computer browsers. When I try it on my android phone, the css3 animation of the dropdown moves really really choppy, just like its dropping frames. How can I fix this problem?
Here is the plugin I am reffering to:
http://responsive-nav.com/
They seem to have done a really nice job with the plugin, I would say the largest cause of the drop of frame rate may be because you are repainting the entire screen. If you would like, roll your own side navigation but make it go over the existing web page rather than move all the elements on the screen.
EXAMPLES OF SIMPLER MOBILE NAV without repainting
http://fringewebdevelopment.com/
http://www.sony.com/index.shtml
As a further step you can also get rid of the javascript and just do plain CSS and see how that works for you, an example of using checkboxes and labels to control the side nav can be found on my site (just inspect the code) - www.aktof.ca . Hope this helps!
Related
So I've been working on browser compatibility. Unfortunately, when I first designed my site, I desigend the CSS aesthetically for Firefox only. Now I'm having all sorts of trouble trying to get it to look good in the other major browsers. However, when I fix the CSS positioning such as floating a box object to the right, IE8 forces it left. I checked my code on W3C and it's okay semantically. I use little to no javascript. It's a portfolio website. The screensize shifts everything around no matter what browser, yet there is no perfect CSS for this so how does one get things to stay in place? I'm not too familiar with JQuery, but this seems to be the closest I can get to an answer. Where would I plug this into my site to see if this works?
I have been going through this website, I was wondering how to implement a scroll like this. I mean background picture is changing and you can see front image sliding nicely.
Same type of effect I saw at Apple Inc Website. Here if you scroll down, in middle of the page you see an image of iPhone getting separated from a lot and joining another one while scrolling. I just started learning jquery. Can anyone suggest me how to implement this type of animation as I am not sure how to search for such effect. Please, any help is appreciated.
There's another plugin for it, probably a bit more options and designed to work also in old browsers such as IE 9 or IE 8 (OnePageScroll doesn't) and which I believe is essential nowadays.
It is called fullPage.js
I believe it will fit you better.
The Apple website uses functionality similar to OnePageScroll.
I have an issue with jQuery ScrollTo.
It skips and there is a lag when applied to my page.
Here's a link to the jsFiddle example that works and here is the same code applied to my page that does not work.
It might function correctly on some machines but all the machines I have tested this on don't!
Might there be an issue with the amount of images I am using?
Is there anything I can do to overcome this?
The problem there is the background image. On "poor peformances machines", using a full page background image like you did and scrolling is not very efficient.
For instance, my machine at work lags as hell on your page, either using the top menu or regular scrollbar. On the otherhand, my MacBook Pro handles your page perfectly with a smooth feel when using the top menu to scroll.
I tested it using chrome on my machine, and removing the background image using developers tools. It now works perfectly. As soon as I put the background image back, it starts lagging again.
Its a bit jumpy on my machine (your site that is), but one thing i noticed that may help is that it is really nice and smooth smooth if i very quickly click back and fourth between 'Senior Executive' and 'Experienced Hire'.
Is there any callback or some calculation being done before, during or after the scroll perhaps?
With the most latest updates Google has been rolling out, the sites have all been getting custom JS scroll bars (at least in Chrome).
What I like most about it is that its simple and works perfectly. Until now a lot of the JS scrollers that I have seen don't function that well - i.e. if you scroll really fast or scroll and move your mouse around they don't function that well.
Hence I'm just wondering if anyone know of any scroller out there that is simple/small (code foot print is small) and functions well (as mentioned about).
I have thought about using jQueryUI's scroll as a base, but for my needs I can't take on jQueryUI for this one feature.
They're done by styling ::-webkit-scrollbar psudo-elements with CSS, not JS.
I have been using the lion bars jquery scroller, and I think it meets all the specifications you mentioned, give it a try.
Take a look at https://gist.github.com/fanzeyi/3995618
Works fine for me.
I'm developing a product to be used by a number of customers alongside our Web application.
Quick background:
These customers have incorporated into their pages a widget that we've developed.
The widget's content can be modified by using our application.
The idea behind this product is a bookmarklet that we supply, which will "highlight" our widget on their page, turning it into a clickable link that leads to an administration panel in our app.
The "highlight" effect actually involves some z-index tricks; we create a semi-transparent "backdrop" <div> just a few ticks below the maximum-supported z-index to gray out the page; then, we adjust the z-index of our widget to sit on top of that translucent backdrop. The visual effect should look about like this:
http://skitch.com/troywarr/dtexp/example-good
However, in Safari, as well as Firefox under certain conditions, there seem to be some sort of rendering artifacts that prevent this from looking as intended:
http://skitch.com/troywarr/dteqx/example-bad
As you can tell from the screenshot, a couple of elements (our logo image and the <iframe> that holds an advertisement) are still "bright," as intended. But, the rest of the widget is still shaded-out.
I've been poking around with Firebug for quite a while to try to get at the source of the problem, but I haven't had any revelations. I'm hoping that someone has experienced a similar issue, or recognizes the "visual signature" of this kind of problem. Or, if you're simply adept at JavaScript/jQuery and/or Firebug, I could really use your help trying to figure out where this approach is falling short.
I created a test bookmarklet as a live example. To see it, please:
Open Firefox (the version under development currently only works there reliably).
Go to this page and drag the link there to your Bookmarks Bar: Example Bookmarklet
Navigate to: http://www.sfgate.com/cgi-bin/article.cgi?f=/n/a/2010/07/30/sports/s170637D86.DTL
Click the bookmarklet while on that page, and you should see what I'm referring to.
Thanks very much in advance for any help! This has me baffled.
I was about to give up on this, but I think I found the problem. You have a hell of a lot of DOM elements going on here, but luckily that isn't the issue causing this problem.
The iframe inside DIV#onespot_nextclick needs a background color of #FFF.
Simple!