Android jQuery fadeIn weird behavior - javascript

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.

Related

How to add a banner inside a div at the bottom?

I have this website.
I have a div with an embeded YouTube video and I am trying to hide the lower part of the video with a banner so that the YouTube logo that appears at the bottom is covered.
I have added another div for the banner, I used z-index and position: absolute; top:700px; to make it stack over the video but this makes the banner position unpredictable on all browser.
Firefox and IE looks good but it's not working well on Chrome or Safari because the banner is too low and doesn't cover the bottom of the video properly.
How else can I do this so that it works on all browsers? Basically I just need the banner to stack over the bottom of video so that it covers the area I want hidden.
Here's what I have
.embed-container {
width: 100%;
overflow: hidden;
position: relative;
margin-top: -80px;
padding-bottom: 0px;
margin-bottom: 0px;
z-index: -1;
}
.mask {
position: absolute;
top: 700px;
right: 0px;
width: 100%;
height: 150px;
background-color: #ef1446;
z-index: 11;
}
.bottom {
bottom: 0;
}
<div id="lgvid" class='embed-container'>
<div class='over'></div>
<style>
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class='embed-container'><iframe src="https://www.youtube.com/embed/Yo19ZhO7CAc?autoplay=1&loop=1&playlist=Yo19ZhO7CAc&cc_load_policy=1rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe></div>
</div>
</div>
<div class="mask bottom">
<br><br>
<center>
<h1 style="color:white;">¿Que estas buscando?</h1>
</center>
</div>
Use Vimeo, or HTML5. If removing the YouTube logo is all you want, it's a lot less trouble doing it that way. You can download the video from Youtube, here
Another thread discusses placing a div over a youtube video, this might be what you are looking for.
How to show a div over a Youtube video (z-index)?
[SOLVED] My main problem was just that the banner was not in the same position on Chrome and Safari when using z-index to stack my divs. On these two browsers, the banner was horizontally lower than in I.E. and Firefox.
I solved the issue by using a browser specific CSS hack found here: http://rafael.adm.br/css_browser_selector/
The browser specific CSS hack allowed me to position the banner in the exact position I wanted for those two browsers where the banner was out of place. I still used z-index in all style sets for all browsers just slightly different top margins for the Chrome and Safari specific CSS.

Webpage displays incorrectly on different resolutions due to incorrect css

I'm having some issues with a webpage of mine, mainly on mobile devices but it also affects desktop devices too, I would be willing to award a bounty (as and when stackoverflow allows me) to whomever can help with these problems
HTML: http://pastebin.com/raw.php?i=bbFsMcwT
CSS: http://pastebin.com/raw.php?i=SGMwt3cs
JSFiddle: http://jsfiddle.net/D8SJD/
Issue 1 - Left/Right Scroll Image Buttons
Currently my left and right scroll image buttons are done in html using onmouseover and onmouseout I want to be able to convert them into css based "buttons"
Issue 2 - Dynamic Resolution(s)
The header and footers aren't dynamic with different resolutions for example, I created the page designed on a 1680x1050 monitor which looks like: Desktop 1680x1050 however making the window smaller it looks like: Desktop Small Window
On a Nexus 4 mobile phone on default zoom it looks like: Mobile Original Zoom
On a Nexus 4 mobile phone zoomed out to as far as it can go it looks like: Mobile Max Distance
On a Nexus 4 zoomed out and scrolled to the bottom (so that the browsers URL bar disappears) it looks like: Zoomed out without URL bar (the footer of the actual webpage vanishes)
On a Nexus 4 zoomed out and scrolled just off from the bottom (so that the browsers URL bar is visible) it looks like: Zoomed out with URL bar (the footer returns)
.
The placeholder image and arrows are supposed to be in the center of the footer and headers and should shrink in accordance to the screen resolution.
Mobile device default zoom (if possible) needs to be decreased so they can see more and on getting smaller (if possible) if it gets close to Mobile Original Zoom then the Up to Top, Down to Key, placeholder logos should vanish...
Please see images at bottom of this post
For the mobile devices I tried things like below just for testing but none of them worked...
#media (max-width: 640px) {
#header > a img {
display: none;
}
}
EDIT 14/11/2013 # 01:58GMT
On a 1920x1080 screen it looks kind of okay although there is a big gap between the text and the placeholder image as seen below:
On a 1680x1050 screen it looks roughly how it should take note of where "Semi" is located and compare to the 1920x1080 image from above.
On a 600x600 screen it appears as follows, which as you can see there is a big gap between the placeholder and the left arrow but on the right arrow there is no gap and infact it overflows, as for the text it too is too far to the right.
Type
#media screen and (max-width:640px) {
/* Your specific styles go here */
}
and dont forget to add
<meta name="viewport" content="width=device-width,initial-scale=1.0">
Hope that helps :-)
I see a border around your links, remove from your links:
a{
border:none ;
}
for first issue you can do it with CSS, just remove <img> tag inside <a> tag like this:
<div class="footleft">
<a class="def" href="javascript: void(0);">
</a>
</div>
create image buttons like this:
then set background to <a> tag like this:
#footer .footleft a {
width: 100px;
height: 47px;
display: block;
background: url(path/to/leftarrow.png);
background-position: 0 0;
}
#footer .footright a{
width: 100px;
height: 47px;
display: block;
background: url(path/to/rightarrow.png);
background-position: 0 0;
}
#footer .footleft a:hover , #footer .footright a:hover{
background-position: 0 100%;
}
second issue, I think if you remove position:absolute; from #header .headimage and #footer .footimage it will be okay.
and if your want to centerize headmid and footmid and footmidtwo you have two choices,
First: set fixed width to them and use CSS like this:
#footer .footmid {
top: 50%;
left: 50%;
position: absolute;
font-size: 15px;
width: 292px;
margin-left: -146px;
}
#footer .footmidtwo {
top: 70%;
left: 50%;
position: absolute;
font-size: 15px;
width: 126px;
margin-left: -63px;
}
#header .headmid {
top: 60%;
left: 50%;
position: absolute;
font-size: 15px;
width: 302px;
margin-left: -151px;
}
Second: if you need to have dynamic width you can use this CSS and JQuery:
CSS:
#header .headmid {
top: 60%;
left: 50%;
position: absolute;
font-size: 15px;
}
#footer .footmid {
top: 50%;
left: 50%;
position: absolute;
font-size: 15px;
}
#footer .footmidtwo {
top: 70%;
left: 50%;
position: absolute;
font-size: 15px;
}
JQuery:
var $widthhead = $(".headmid").width();
var $widthfoot = $(".footmid").width();
var $widthfoot2 = $(".footmidtwo").width();
$(".headmid").css("margin-left",$widthhead/2*(-1));
$(".footmid").css("margin-left",$widthfoot/2*(-1));
$(".footmidtwo").css("margin-left",$widthfoot2/2*(-1));
jsFiddle is here
Okay I've tried to filter out all of the irrelevant code for this solution.
See the solution here.
Most of the time, it is best to use relative positioning to fit elements absolutely inside of another element. In your case, with three different strings to fit in a 300x80 window, it's a bit crowded. I tried to place things in a logical position to demonstrate.
By placing a container in the footimage div with relative position, you can then place every element inside the footimage div absolutely relavtive to the footimage div, rather than to the entire page.
For example, what you had:
#footer .footmid
{
position: absolute;
top: 50%;
left: 50%;
}
Will place the div of class footmid at a position 50% of the page height from the top of the page and 50% of the page width from the left of the page:
This will work if every user that visits your page has the exact same resolution, however it causes problems when the don't. Obviously, this isn't a perfect world, so different resolutions will visit your page.
What you can do is use relative positioning!
Basically I tell CSS that instead of moving 50% from the top and left of the window, move 50% from the top and left of the nearest parent element with relative positioning:
You can modify the bottom, left, and right attributes of my fiddle to move the footmid elements within the relative element .footimageContainer that is the same size and in the same position as the .footimage.
As far as your arrows, I wasn't quite sure what you were trying to accomplish; your question was pretty vague, so I simply made them fade out slightly when you mouseover them. Any mouseover/out events can be handled using CSS psuedo-elements.
.element //Native and mouseout
{}
.element:hover //onmouseover
{}
Remember that if you use pseudo-elements, you have to specify the attribute that will be changing in both the native and :hover rules.
.element
{color:red;}
.element
{color:black;}
If you have any additional questions on the arrows, let me know and I'll revise my answer.
http://jsfiddle.net/D8SJD/4/
Instead of using absolute positioning, you can just take advantage of the text-align center and images and text will center automatically.
If you want offset from center, try position:relative, and top, left, right etc and it will move relative to it's central position.
Elements that are display:inline; or display:inline-block; will align according to parents text-align property, in this case text-align:center.
#footer .footimage {
display:inline;
position:relative;
top:-10px;
}
#footer .footmid {
top: 50%;
width:100%;
position: absolute;
font-size: 15px;
}
#footer .footmidtwo {
top: 70%;
width:100%;
position: absolute;
font-size: 15px;
}
As per issue 2, i could be wrong but when targeting the image through the structure of the site
i.e.
headImg a img{...}
The style wouldn't work. But if you add classes to the images the style will work; the case could be that there are some unclosed divs or elements messing with the architecture.
<div class="headimage">
<img class="placeholder" src="http://placehold.it/300x80"/>
</div>
#media screen and (max-width: 640px) {
.placeholder {
display: none;
}
}
JsFiddle here - http://jsfiddle.net/Q5bEb/

How to make a div remain at the bottom of the page

I would like to put a small tab at the bottom of the page for Contact Us- that should scroll as the page scrolls and should work in Older versions of IE also like IE 5.0. Please see the page at
http://www.goshti.com/testcode.html
Any suggestions on how to solve this. I CSS or Javascript solution is both fine.
You can use position:fixed on the element.
<body>
<div class="tab">
Contact Us
</div>
CSS:
.tab {
position: fixed;
bottom: 0px;
right: 0px;
}
Have you tried position:fixed?
I'm not sure if it would work on older browsers tho.
You can wrap the bar within a relative div
#page-wrap {
margin: 15px auto;
position: relative;
}
#bar {
position: fixed;
bottom: 0px;
right: 0px;
}

Visibility of stacked HTML popups

I'm developing a jQuery Backbone.js web app.
I have a table with table entries. The table has a white background.
If the user selects a table entry, a modal popup is shown. To show the user that the popup is now in modal mode, I used to have the jQuery UI diagonal stripes (ui-widget-overlay).
But I changed to an alternative. Those stripes were too "striking", "obtrusive" for me. I now change the opacity of the table to 0.5. I like this more.
The problem now is that I have popups in the popup window. And if I also change the opacity of the first popup to show the user that only the second popup is working now, the table shines through the first popup.
Is there any possibility, any alternative way to have a popup window (a div) "dim", "grey out" to half of its appearance without getting transparent?
I would add another div on top of the div that has the same dimensions but has grey background color with opacity 0.75. This should work pretty fine.
CSS
.inner {
position: absolute;
}
.fade {
background: grey;
opacity: 0.75;
}
HTML
<div class="outer">
<div class="inner">content</div>
<div class="inner fade"></div>
</div>​
This way you are pretty safe when it comes to cross-browser references. Also you can control the fade by adding an "id" attribute to the fade class and make it go away. This way, you can also make div inactive, as they div inner fade is on top of it.
Try with hsla (look here).
<style>
#el1 {
background: red;
width: 700px;
height: 700px;
}
#el2 {
background-color: hsla(190, 30%, 94%, 0.6);
width: 500px;
height: 500px;
}
#el3 {
background: green;
width: 300px;
height: 300px;
}
</style>
<div id="el1">
<div id="el2">
<div id="el3">
</div>
</div>
</div>
In my code, el1 is the holder and not transparent at all. Then, el2 as first child uses hsla for transparency. The contained el3 is not transparent again and this works.
You could lay a glass pane on top of your page and set the z-index appropriately so that your 2nd popup lies on top of it and everything else is hidden under it:
#pane {
position: fixed;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
opacity:0.5;
z-index: 999;
}
Assure that your 2nd popup has a z-index higher than the pane and you're fine.

Transparent PNG Reacting to Sites Image Sliders and Content

I just stumbled across this guys site: http://mantia.me/
He has an awesome logo that reacts to the content the site is currently showing, if you wait on his homepage the logo changes with the slide show of images. I was wondering if anyone knows how to replicate the effect. I'm guessing it's a transparent png with a rotating master background then the site is layered on top, but I'm probably wrong.
Any guesses on how to make something similiar?
Images:
It's really simple what he has. Like you mention it's a transparent PNG that matches the given background ( in this case white ) and places it on top of it with z-index. The rest is just jQuery with fadeIn and fadeOut images.
You can view the png on top of the image transitions.
So basically you just need a div with position:relative set the width the height of it; then add another div inside it which has the jQuery Slideshow (check this out: http://medienfreunde.com/lab/innerfade/), set it a z-index:0 Then add another div (which will go on top of the slider) and add it a background with z-index to something higher than 0 and you're good to go.
Here is how he does it:
HTML
<div id="content">
<div id="feature"></div>
<div id="navigation"></div>
</div>
CSS
#content {
position: relative;
width: 800px;
margin: 64px auto;
font: normal 13px/16px "myriad-pro-1","myriad-pro-2", sans-serif;
color: #404040;
}
#navigation{
position: absolute;
z-index: 1000;
top: 0;
left: 0;
width: 800px;
height: 46px;
background: transparent
url(http://mantia.me/wp- content/themes/minimalouie/img/nav.png)
no-repeat top left;
}
#feature {
width: 800px;
height: 466px;
overflow: hidden;
background-color: aqua;
}
And then he just adds an img element to #feature.
<div id="feature">
<img src="http://mantia.me/images/supermariobros_large.jpg"
alt="Super Mario Bros.">
</div>
See fiddle.

Categories

Resources