My one-page website (http://www.stefaanoyen.be) features a sticky navigation, but it doesn't work as expected on my iPad. It always stays on top of the page, but when I click the links, nothing happens. The links only work when I'm on the top of the page or when the section the link is pointing to is already partially visible.
I don't know if this is a javascript, css or html problem. In short, I have no clue why it's going wrong, please help me out here : )
Thanks so much for helping me out!
Stefaan
Pretty sure postion:fixed on mobile browsers is not supported. Check out this quirksmode article, it explains why. http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html
Related
I've been developing a mobile-first site, using Firefox as the primary browser. I have a branding logo at the top of the page, loaded by way of the WordPress customizer. The logo appears fine in Firefox, but disappears in Chrome and Safari when at a width of 320px. (That's the base width for this project.)
I'm just troubleshooting and trying to find the best way to fix the problem. I'm not really sure what's causing the issue, yet, though. I was hoping to get some other perspectives on this.
Here's the link:
--- link removed ---
Thanks!
I would like to suggest you something that had helped me a lot of times when I did not know from where comes a problem:
Reduce the content only to the part you want to fix(or in case if you have a bug and do not know from where comes - start removing code element by element).
BTW in the developer tools is showing a lot of errors.
Thanks, Marin. I appreciate your suggestions. I think my server at work may be contributing to the issue. For the time being, though, switching the width and height from % to em has at least resulted in the images being visible in chrome and safari. I think I'll have to wait until I can test it outside my workplace to be sure, though. Lol. Thanks, again.
I've been searching over internet with success, I appreciate if someone can help me.
My problem is, seems that last Google Chrome version has created a bug/or not with scrolling using the mousewheel. I will try explain the issue in the better way.
Case scenario:
I have a page with a IFRAME, the IFRAME has a vertical scroll and his parent window too. In the past when I start scrolling inside IFRAME and when a reach to the end/top the scrolling continues by the parent window, however this behavior has change now when a reach to the end/top the scrolling stops...
Anyone has an idea about that?
Is this a bug?
Is this a configuration?
Can I do something with codding?
Thank you all!
New versions of different browsers do not support iframe properly. Moreover it is now focus oriented. It scrolls only the part of page on which the mouse cursor is and if you want to scroll parent page change your cursor focus.
Posts of linkedin also go like this.
I am facing a flickering issue, on re-sizing, with my Firefox web browser. I think it is because of the use of SVGs on the page. I tried adding the transition css property by referring the following links, but didn't help.
1. https://css-tricks.com/forums/topic/can-i-stop-flickering-on-hover/.
2. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
Any help or a starting reference would be appreciated. Thank you. I am new with css. One more thing, the screen does not flicker in Chrome or IE. I hope this information helps and this is not a stupid question.
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'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!