Weird iframe loads src but displays blank in firefox and safari - javascript

I'm facing a weird issue I can't seem to figure. I'm using an iframe in a scroll box type widget, and it loads fine in Chrome.
However, in firefox the iframe loads but displays blank 80%+ of the time. And in safari, it displays blank until I move over it with my cursor.
What's really driving me crazy is it shows correctly time to time, but has the problem most of the time despite my best efforts.
Any ideas why?
The iframe loads in a corner box that scrolls up about 30% down the page.
Here's the outputted code of the whole scroll box on the page
<div id="lf-widget" class="scroll-triggered-box stb stb-bottom-right" style="position: fixed; right: 0px; border-top-width: 7px; border-top-style: solid; border-top-color: rgb(52, 152, 219); margin-right: 20px; z-index: 9999; visibility: visible; background-size: 50px; padding: 0px !important; background-image: url(https://s3.amazonaws.com/asdfasdf/assets/load.gif) !important; background-position: 50% 50%; background-repeat: no-repeat no-repeat;" data-trigger="percentage" data-trigger-percentage="0">
<iframe allowtransparency="true" src="http://app.asdfdsaf.com/asdfasdf/20/widget/#20?trigger=percentage&trigger-percentage=0" height="319" width="300" style="display: block !important;" frameborder="0" scrolling="no" id="lf-frame"></iframe>
<div class="triangle" id="triangle" style="border-color: #3498db transparent transparent transparent !important; margin-top: -1px;"><p class="inner-triangle">❯</p></div>
<span id="cf-close" class="stb-close">×</span>
</div>
Thanks for any input.

#main_nav ul ul ul {
top:-150;
}
It's not the best solution, but all your menus can be displayed without scrolling down.
A Better solution would be to write a javascript function that sets the top value to the negative value of the difference between the top edges of adjacent menus.

Related

Scrolling/loading issues Google Chrome/Opera

I've been working on my website and it works flawlessly in Firefox and Safari (also no scrolling issues with IE), but it's opened in both Opera and Chrome the site keeps reloading every area every time you scroll a little bit so when you've loaded an area, you scroll to a new one (which loads strangely) and back again to the first location it reloads everything again. I found that the problems come from the background that I use, but once again, in half of the browsers it works flawlessly. Does anybody know how to get this code to work? I've tried changing the absolute attachment property to both fixed and relative but fixed only makes the site work more terrible and relative does the same as absolute.
Or... is it possible to add css specific for Firefox, IE and Safari to make sure it works there and delete the background image in the other browsers?
.div-1{
background: url(../images/blue1.png), url(../images/background.jpg);
background-attachment: absolute, absolute;
background-position: left bottom, right top;
background-repeat: no-repeat, no-repeat;
background-size: cover, cover;
background-color:#000;
color: #fff;
text-align: center;
padding: 10% 10% 30% 10%;
border-bottom: 5px #000;
}
.div-2{
background: url(../images/blue1.png);
background-repeat: no-repeat;
background-size: cover;
background-attachment: absolute;
background-position: left bottom;
background-color:#000;
color: #95C8D1;
text-align: center;
padding: 10% 10% 30% 10%;
border-bottom: 5px #95C8D1;
margin-top: -2px;
}
.div-3{
background: url(../images/black1.png);
background-repeat: no-repeat;
background-size: cover;
background-attachment: absolute;
background-position: right bottom;
background-color:#95C8D1;
color: #fff;
text-align: center;
padding: 10% 10% 30% 10%;
border-bottom: 5px #000;
margin-top: -1px;
}
It's about the site: http://cdmolenaar.nl/en/
The main problem you're facing is that your page (images, video) is massive (24MB). Chrome is redrawing the images when they enter the viewable area. I'd recommend:
I see you are loading a bunch of images that are not visible on the page.
None of your images are optimized/resized. When saving your images, try not to make them so much larger than they appear in the page.
The angled color pngs could probably be achieved with CSS or SVG. (Take a look at: http://apps.eky.hk/css-triangle-generator/)
I can't tell you why Firefox and Safari are so much better (except they render differently). The images aren't technically reloading, but they do need to be decoded and painted to the page on scroll. Some general info about scroll Jank can be found here: http://jankfree.org/

IE10- transparent overlay using z-index

I am working on beautification of javascript alert.I need a transparent overlay which overlay the whole page other than the alert block,just like the origin javascript alert.
The html:
<html>
<body>
<div class="alert-overlay">
<div class="alert-block"></div>
</div>
</body>
</html>
The css of the overlay:
.alert-overlay {
width: 100%;
height: 100%;
position: fixed;
z-index: 1100;
left:0;
top:0;
}
The css of the alert block:
.alert-block{
position:absolute;
top:30%;
left:50%;
width: 300px;
background-color: #fff;
margin-left: -150px;
border-radius: 5px;
z-index:1200;
}
It works in IE11,chrome and firefox,but failed in IE10-.
The overlay seems overlay nothing in IE10-,all the elements on the page are active.Strangely,if I add a background-color:black,it will overlay everything but the alert-block,and make the page inactive like the origin javascript alert except the additional background,which is not what I want.
So how can I make the transparent overlay work on IE10-?Is that a z-index bug?
IE10 has some issues. Try giving a background with filter. Here is how you can do it-
background:white; filter:alpha(opacity=1);
Some helpful links :
z-index problem in IE with transparent div
IE z-index trouble on element with transparent background
Hope it helps.
IE10 and less allow actions through elements when it's not having any backgorund or content. You must add a background to your overlay. Use a transparent one if you don't want it to be visible:
background-color: rgba(0,0,0,0);

Div is invisible but responds to touch

I don't have that much exp with css. I am testing the html in my iphone. The problem is that sometimes the div is not visible but still it responds to touches. When I debug in Safari by connecting it to a mac machine, it shows the div in the inspector but it is hidden on the device.
When I test the same on my ipad, And in portrait if my div is invisible and if I change the orientation, it becomes visible. I don't understand the magic thats happening here. Need some expert guidance on this. I want to display the HTML DIV and also need to enable touch. Please help.
Here is the css which I am using:
#container {
margin-left: 0px;
margin-top: -20px;
padding-right: 0px;
background-position: 0px -2px;
background-repeat: no-repeat;
position: absolute;
-webkit-transform-origin: 0px 0px;
-webkit-transition-timing-function: cubic-bezier(0.1, 0.25, 0.1, 1.0);
background-color: yellow;
-webkit-transform-origin-x: 0px;
-webkit-transform-origin-y: 0px;
-webkit-transition-duration: 0ms;
-webkit-transform: translate3d(0px, 0px, 0px);
}
It can be done using CSS pointer-events
Try setting
div
{
pointer-events: none;
}
For different view ports (different screen widths), prefer using css through Media Queries, it's the preferred method these days.

Android jQuery fadeIn weird behavior

I'm developing a phonegap app for iphone and android.
I have a black overlay with a loading message that appears when the user clicks on a button.
Everything is fine on ios, but on android, the fadeIn() function only displays parts of the overlay. Like, really, parts. Sometimes just the bottom, sometimes the bottom and the top right corner... Really weird.
Although if I use .show() instead, everything goes right.
Have you ever seen something like this ? (terrible quality but you can see the overlay on the bottom half, and a semi-transparent piece of overlay on the top right corner.)
What's wrong with the .fadeIn() function on android ?
(Here is the css if you need it)
.black-overlay {
position: absolute;
width: 100%;
height: 120%;
background-color: #000;
color: #FFF;
display: none;
z-index: 99999;
top:0;
}
And the beginning of the HTML code :
<body class="side">
<div class="black-overlay row-fluid"> //overlay
<div class="span12 loading-splash">
<div class="span12"><span>Chargement...</span></div>
<div class="span12 span-no-margin"><img src="img/ajax-loader_black.gif" alt=""></div>
</div>
</div>
<div class="app container-fluid event-creation"> //Rest of the app...
Here's some CSS that I use for background overlays.
.ajax-loader-background
{
background-color: rgba(0,0,0,0.2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#30000000,endColorstr=#30000000);
zoom: 1; /* Force hasLayout in IE. */
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 99999;
}
I'm not sure why you get a different result with .fadeIn, except that jQuery might need to know the width/height of the element, and if it's not visible it has zero width/height.
I've noticed slight differences between width: 100% and left: 0px; right: 0px. Same with height: 100%. You're also setting the height to 120% which I've never seen done with absolute positioning. You should not have to do that for an overlay.

Iframe full height in a wordpress page problems (without scroll bar)

Am trying to get this code
<iframe src="http://www.play-asia.com/paOS-38-19-0,,none,0,0,0,0,trans,000000,left,0,0-49-en-76-5-70-dhf7-6-2-78-2i-90-f8z9-33-iframe_banner-40-6-44-100%2525.html" style="border-style: none; border-width: 0px; border-color: #FFFFFF; padding: 0px; margin: 0px; scrolling: vertical; frameborder: 0;" scrolling="vertical" frameborder="0" width="100%25" height="1428"></iframe>
To fill the page (height wise) and also without the scroll bar ive tryed and tryed to use css without any luck
Anyone have any ideas how/if I do do this?
Thanks
Make the iframe absolutely positioned:
iframe { position: absolute; top: 0px; left: 0px;}
You talk about filling the page height-wise but you have a set height. You also talk 'without scrollbars' but you have scrolling turned on. The code above will help your iframe jump out of it's container to fill the page as long as its container is not position: relative
Try style="overflow: none;" as an iframe atribute

Categories

Resources