I have div containing a list of flash objects. The list is long so I've set the div height to 400 and overflow to auto.
This works fine on FF but on IE6 only the first 5 flash objects that are visible work. The rest of the flash objects that are initially outside the viewable area are empty when I scroll down. The swfs are loaded ok because I don't get the "movie not loaded". They also seem to be embedded correctly they are just empty ie. the content is never drawn.
Any ideas on how to fix this?
ps. The html elements involved are mainly floating in case that has an impact on this. The flash objects are embedded using the popular swfObject.
EDIT: It seems that the bug only occurs with the flash plugin "WIN 8,0,24,0"
Since I cant post a link I'll summarize the relevant code here:
<div style="overflow:auto; height:400px; float:left;">
<div id="item_1" style="float:left; clear:left; height:100px;">
<!-- swfObject Embed here -->
</div>
...
<div id="item_7" style="float:left; clear:left; height:100px;">
<!-- swfObject Embed here -->
</div>
</div>
EDIT:
After trying to recreate this problem in a separate page I found that the bug is some how related to the flash objects being hidden initially. My container div has "display:none; visibility:hidden" when page is loaded. Later on the style is changed via javascript to visible. If I load the page so that everything is visible from the start all is fine.
When I'm testing this sort of stuff in IE6, the first thing I do is start removing style information. Begin by removing all the floats and clears from both the parent DIV and children DIVs. If that doesn't work, remove all padding and margins, and give the parent DIV and children DIVs each a width of 100% (leaving in your height of 100px). If that doesn't work, then post back here. If I had to venture a guess I would say it is because none of your DIVs have a width, but that is a wild guess based upon what I know of the "peekaboo bug".
A few things that I'd try:
remove all CSS temporarily to determine whether the issue is CSS-specific
add pixel widths to the floated elements as well as their parent element
add the wmode transparent param to swfobject
add position:relative
I've heard of a bug in Flash that apparently only occurs if the flash loads with portions of it outside of the screen (i.e. body > #flash {margin-top:-50px}). Your problem could potentially be a variation of that.
Alternatively, you could drop the div with overflow altogether and try creating a container in flash with a scrollbar and load the individual SWFs into that one container flash file.
This is just a workaround, but you could try to create placeholders initially for the Flash objects (like div's with the corresponding height and width) and only load the movie (via something like swfobject) when it first becomes visible. This can create some problems (ie movies not preloading before they are visible), but it may be acceptable.
I think I have a solution for this. I can't be absolutely sure as the page in question was restructured (because of this bug). Later on I stumbled on a similar issue with the same flash component on a different page.
The issue there was that sometimes flash gives a Stage.height=0 and Stage.width=0. This is most likely to happen when the flash is initiated outside the browser viewport. We are using the Stage dimensions to scale the contents (to width=0 and height=0 in this case).
The solution was to add an onEnterFrame handler that checks for Stage dimensions and only proceeds once they are > 0.
Related
I have a landing page that has a header, a sticky footer and a main area with a Video and placeholder image. Using CSS, I do some calculations to make the Video area of the size that is available, but it doesn't work for all screen sizes, so I have to resort to resizing the elements in Javascript via the onresize event.
The problem is that I see the page render at first with element sizes that need correction, and then it gets corrected by javascript almost immediately ( < 0.5 seconds). I see this happening visually and am wondering if there is a way for me to delay the original render and simply see it when the elements have been correctly sized.
In the past I experimented with making the tag not visible to start and then making it visible in javascript. Is that the best approach to achieve what I am trying ?
You can achieve this by hiding the content using visibility: hidden in CSS and changing visibility to visibility: visible once the JavaScript processing is done.
I have an iframe that has quite a bit of white space tacked onto the end of visible elements. In fact, I know that the iframe is loading the size of all my elements including hidden elements. These elements were meant to be hidden until some knockout questions are answered, at which point the iframe should resize accordingly.
The other battle I am fighting with this is the fact that I am also having to deal with two scroll bars, one for the iframe, and of course the web page scroll bar. This is just very tacky and not very user friendly.
This is a problem I inherited, so I am hoping for a solution involving the iframe. I am also willing to explore other solutions as maybe this is not the most appropriate as it is.
To get rid of scroll bars, try adding scrolling="no" to the iframe.
HTML iframe - disable scroll
You might update the height of the <iframe> from the framed page using JavaScript after a new element is shown.
function resizeParent() {
if (!window.parent) return;
var height = $(document).height();
$(window.parent.document).find('iframe').height(height);
}
Demo
Source of framed page
Note, this will only work if both pages are loaded from the same domain.
Use both the inline style attribute style="overflow:hidden;" as well as the attribute scrolling="no". overflow:hidden is the proper HTML5 counterpart, so it's best to mix both.
Edit: In fact, if it is suited for your case, try using the iframe seamless boolean attribute. It practically makes the iframe styled as if it's part of the containing document, including no borders or scrollbars. I recommend it because it's like a one-stop for what you need to accomplish, and it does the work for you. You can try a combination of all the three attributes I recommended for ideal browser compatibility.
This is probably the most bizarre thing I've encountered in my years of website coding, so I thought I would run it by some people who are way smarter than me to try to explain why this is happening. If there's no explanation, I'm probably going to submit it as a bug report. It took me forever to actually suss out the cause of the problem.
The following behavior I can only produce in Firefox (version 15, currently, and maybe some others). No problem exists in Internet Explorer, Chrome, or Safari. It's so difficult to explain that I just created a demonstration here: http://sandbox.uatu.net/dom-changes.php
The general idea is that under a very specific set of conditions, DOM changes are getting held up by Firefox when a scrollable box is scrolled, whether the scrolling is done by the user or is automated by a script. Here's the set-up:
<div id="superContainer">
<div id="subContainer">
<div id="mainPage">
scrollable box in here
</div>
</div>
</div>
Important attributes:
superContainer has height and width dimensions
subContainer has a height dimension
subContainer has an opacity setting less than 1
subContainer has a background color
mainPage has a position attribute of absolute
Anyway, what you'll see if you visit that demo page is that attempting to scroll the box freezes up all page animations. You can actually watch some of these elements in Firebug and see that the properties are changing in real time, but Firefox is just refusing to repaint anything on the page.
If you toggle any of these attributes into an off position, everything is fine. It's just this particular combination of settings that seems to produce the problem.
Does anybody have any thoughts as to why? I can't tell you how crazy this drove me--I was basically troubleshooting it all weekend, totally refactoring my code on the site where I discovered it.
Seems to me that the opacity + position absolute are the culprits here, read the w3 specs on transparency to understand how engines render and threat opacity.
http://www.w3.org/TR/css3-color/#transparency
Since an element with opacity less than 1 is composited from a single
offscreen image, content outside of it cannot be layered in z-order
between pieces of content inside of it. For the same reason,
implementations must create a new stacking context for any element
with opacity less than 1. If an element with opacity less than 1 is
not positioned, implementations must paint the layer it creates,
within its parent stacking context, at the same stacking order that
would be used if it were a positioned element with ‘z-index: 0’ and
‘opacity: 1’. If an element with opacity less than 1 is positioned,
the ‘z-index’ property applies as described in [CSS21], except that
‘auto’ is treated as ‘0’ since a new stacking context is always
created. See section 9.9 and Appendix E of [CSS21] for more
information on stacking contexts. The rules in this paragraph do not
apply to SVG elements, since SVG has its own rendering model ([SVG11],
Chapter 3).
If you remove position: absolute from #mainPage you will notice the bug to be gone, you might want to file the bug anyway and think of a plan B for your implementation.
I've read quite some posts about webkit browsers having issues with images. I couldn't find a post and thus an answer for the one I'm about to explain.
I created a home-made slideshow using jQuery that basically places all the images next to each other on a row and I then play with a mask element (overflow: hidden) and the margin-left property to select which one is to be displayed. I didn't reinvent the wheel...
On FF, Opera and even IE, it works like a charm! But I have no luck on Chrome (I didn't test Safari) : the first image shows ok but when the sliding effect kicks in, 20px-ish of the first slide remains at the top of the slideshow and overlay the second slide. If I carry on sliding, the first slide part remains as an overlay on the following slides. The images don't refresh ok on Chrome which makes the whole slideshow look rubbish.
I tried to play with the images css properties after the sliding effect to kind of force the container to refresh its content but again, no luck.
Does anybody have an idea on how to work that out?
Thank you
Found the fix...
As I said, trying to force the container to refresh its content using some different css properties didn't work.
What worked though was to add a span to the container, that's it... At the time of the issue, my container only had images in it and a map. I added a span (out of luck) and it worked straight away!
I can only assume why adding a span makes the whole container behave ok. I guess it is kind of the same than the "hasLayout" property IE6 used to throw at geeks. It couldn't render the element properly until it had an element that had a consistency (height, width ... set with a value).
Anyway, I hope this will help and yes, I did dare to compare Chrome to IE6... ;-)
Good day
I tried googling, but didn't come up with much. I'm building a horizontal carousel which displays images in a LI, floated. The issue I want to solve is, everytime I add thumbnails to the carousel (I'm lazy loading), I need to recalculate the width of the carousel (so that all the floated thumbnails line up nicely side by side).
For one, I rather not have to do these kinds of calculations in JS, and for two, I found that it's hard to find a cross browser way to ensure that the width will be properly calculated (I end up having to add or remove pixels from the total width depending on the browser).
So my question is, is there any way without JS, to be able to add content to a div, and have the width adjust as needed, the same way a div's height would?
And if not, have you found a more efficient way to handle this scenario than recalculating the width every time?
I'm not new to web dev, and for as long as I've been in this field, to my knowledge this has never been possible. But with the advent of new technologies cropping up, I thought maybe there was an obscure way of achieving this now.
Thanks in advance!
[EDIT] (for clarification, but simplified): If my carousel is 500px wide with overflow hidden. There's a slideable section containing thumbnails, each is 100px wide, floated, they fit 5 across in the carousel. When a user clicks Next, it lazy loads the next set of 5 thumbnails, and appends it to the slider area after the first set of 5. But since this div was 500px wide to accommodate 5 thumbnails, adding another 5, I need to recalculate the width to get the new thumbnails to show up side by side. Ideally I'd like to find a way to have the div autoresize its width to fit horizontal content, the same way it naturally does for vertical content.
I've found that using a containing carousel div with white-space: nowrap and overflow: hidden has worked. I then have display: inline-block for each item in the div.
Using this class for each individual item:
.eachItem {
display: inline-block;
}
Will work (I've done something similar to that).
The problem is that in IE7 it won't work! and you'll have to use JavaScript anyway :(
EDIT: I meant inline-block... and as you may know, IE7 doesn't "like" it.