I have a self-written lightbox that dymically loads up content from a database, and the result is something like this:
<div class="lightbox">
<div class="lbtop">
</div>
<div class="lbcontent">
lightbox content
</div>
<div class="lbbot">
</div>
</div>
All elements in the lightbox are block-level elements, and are floated (this includes sub elements like p, h1 etc).
The lightbox uses fixed positioning to make sure it is always on the same place like this:
.lightbox {
width: 320px;
height: auto;
z-index: 999;
position: fixed;
top: 0;
left: 0;
display: block;
overflow-y: scroll;
}
So far so good. Adding content to the lightbox is also no problem at all, and the elements all scroll nicely.
But when I then try to add iframes (specifically: soundcloud embeds) inside the lightbox, then the iframe elements scroll differently than the other elements inside of the lightbox like this:
In this example, I've just scrolled down and the iframe element now moved over the text, in stead of staying in place.
I've tried tons of solutions using different combinations of CSS position, overflow and even tried to build my own jQuery powered fix for this (wrapping the iframes in a correctly positioned div), but to no avail. All in all I get the feeling it might be a bug in webkit (i have the problem on Android, the website I'm developing is a mobile site). I did solve the bug in iOs using -webkit-overflow-scrolling : touch;(anyone, is there an android alternative for this?).
Searching the web for a fix also didnt give me any usable results. The closest I got was setting the position of the lightbox to absolute, but this affects the functionality of the lightbox and it does not satisfy me.
I would love any suggestions on this :) thanks in advance :)
After a while I managed to solve this. It was an issue that was only showing up in the android emulator(strangely) from the SDK. Too bad I spent so many hours to fix it but I figured it might be nice to stop other people from wasting time..
If you run into this issue, double check on a physical android device as for me the problem didn't exist there (across different OS / browser versions)
Related
I'm simply trying to emulate one of these methods for stickying a video that will play as a viewer reads a blog post on my Squarespace site.
https://www.cssigniter.com/make-sticky-floating-videos-page-scroll/
https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning
How to make div fixed after you scroll to that div?
http://js fiddle.net/4mqLhnpf/
Preferably the video would lock to the top portion of the screen, allowing the article to be scrolled below it.
I've tried all methods listed above and none have worked. I've copied the code directly, and even changed IDs and classes in case something was overlapping and causing an error. Nothing works. Is this sort of functionality not allowed by Squarespace inherently or am I doing something wrong here?
You can try the CSS position property.
Simply add this to the div styling:
position: sticky;
position: -webkit-sticky;
top: 0;
I've created a jsfiddle:
http://jsfiddle.net/daFalk/dx3xLgLq/2/
its all about the css styles
div.ding-wrap {
position: absolute;
}
As you can see there is an image well positioned if you open it with chrome or any other normal browser.
But if I open it with internet Explorer the image is gone! I need to change the positioning of ding-wrap to relative.
i would do so, but then my animations (not there) does not work very well. So I need the positioning absolute. How can I teach IE to take me serious?
Thanks, Falk
jiangshui gave a push in the right direction. I stopped centering via table and table-cell and used
margin: auto;
height: 100%;
for centering. Sadly, always if I googled vertical centering, everywhere I read only about the first method because the auto-margin shouldnt work. And I never tried. So thanks a lot to jiangshui!
Here the updated jsfiddle:
http://jsfiddle.net/daFalk/dx3xLgLq/5/
First post. Preface - Recently started web developing so don't have much experience with IE7.
Created a webpage using Adobe Muse for the first time because it's supposed to be fast for the design side. Design was fast but having some weird issues displaying the page in IE7. A div always jumps to the very top of the page whether the positioning is absolute or relative. Not sure what is going on. The page is found at
http://dealer.dealers2farmers.com/dealers/cherokeegarage/
There is a horizontal div that contains the "Search Inventory" and Google map that always jumps to the top of the page in IE7.
This is the CSS of the div
#horzBannerPosition
{
z-index: 2;
width: 0.01px;
top: -3px;
margin-bottom: -3px;
position: relative;
}
I thought the width was strange, Adobe Muse wrote most of this but it seems to work just fine with newer browsers. Not sure why this jumps to the top of the page in IE7. Any ideas?
Ok with just a quick glance over, looks like you have a conflict with your z-indexing, your positioning, as well as using top. Remember for IE7, z-indexing actually starts at 0 and gets all messy from there (this may help: http://www.shawnpreisz.com/css/z-index-internet-explorer-7-ie7). Also careful with using classes and id's in the same tag. I would have to dedicate more time to this to check it out in full, but check out that article for the time being.
I'm trying to create a PhoneGap Windows Phone 7 application. In order to imitate an Application bar that should always be visible at the left side of the screen in landscape orientation, I wanted to place a <div> with CSS as position:fixed. This does not work, however, because the IE on WP7 seems not to support it.
Does anyone have an idea how I can display such an Application bar without having position:fixed available?
Thanks in advance
I was also hanging on this problem. It really seems not to be possible to create a fixed element and to position elements after every scroll looks even worse (try the jquery mobile online examples on your phone they do it this way).
I "solved" the problem by using a div container for my non fixed content with style="overflow: scroll" and fixed size. This worked for me. But scrolling in this container doesn't look like native scrolling.
Hope that helps
I've managed to solve the problem on my Win phone 8 (Lumia 930).
I have a modal window and when opened on mobile should stay in view point and scroll inside. Android and iphone worked fine with position fixed but win phone didn't.
My solution was to put active class on html when the modal is active and add this to css:
html.modal_active{
overflow-y: hidden;-webkit-overflow-scrolling:touch; position: absolute; height: 100%; width: 100%;
body{overflow-y: hidden;-webkit-overflow-scrolling:touch; position: absolute; height: 100%; width: 100%;}
}
This positioning html and body to absolute when modal is opened solved the problem. Hope it helped!
When a user perform a search on my website I want to show the result in a small div with vertical scrollbars instead of that the user need to scroll the full page. That works perfect in all browsers BUT I get problems on the iPad. I can see that the search result doesn't fit into the div but no scroll bar is showing up on the iPad. Also when I try to scroll inside the div the full page is scrolled instead. Is there a solution to get this working?
HTML AND CSS:
<div class="searchResult">
//Here I show the search result
</div>
div.searchResult
{
height: 540px;
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
I believe the answer is that you cannot scroll unless you use the two-finger methods. However if you look at the last link, there is a workaround.
Issues:
CSS Overflow property not working in iPad
http://www.webmanwalking.org/library/experiments/dsp_frames_outer_document.html
Workaround:
http://cubiq.org/scrolling-div-on-iphone-ipod-touch
iScroll is the jQuery plugin that tahdhaze09 mentioned. And to be more specific:
iScroll is evolving and adding many new features to the basic
scrolling functionality. If all you need is the plain old scroller for
mobile webkit, you should really use iscroll-lite.js instead.
iscroll-lite.js is part of the iScroll package. It looks as if it will solve the one-finger scroll problem quite nicely.
For some odd reason changing the div to a span works on an iPad.