Running into a problem that seems to ONLY be an issue with IE, and I'm not sure how to fix it. I know a lot of people do this but I'm not sure how to make it properly work with IE.
I'm working on an ecommerce site where we want some details of a product to overlay over the top of the product image when hovering over the image. The containing DIV is the javascript trigger, but if your mouse hits the image before it hits the div, the div class change doesn't execute.
http://jsfiddle.net/eQMzg/
If you go to the jsfiddle, if you start the hover from the right or left side of the div, it works perfectly. If you start it from the bottom or top, where the image is expanded to, it doesn't.
<div class="product">
<div class="product_activitylayer" align="right" onmouseout="this.className='';this.className='product_activitylayer'" onmouseover="this.className='';this.className='product_activitylayer_hover'">
</div>
<div class="product_containertop" align="center">
<img src="images/demoimages/product.jpg" height="160">
</div>
</div>
.product {
width:244px;
height:221px;
display:block;
float:left;
margin:0px 3px 5px 0px;
border-top:solid;
border-top-color:#10B0E5;
border-top-width:6px;
}
.product_containertop {
height:160px;
width:244px;
background:#FFFFFF;
border-bottom:solid;
border-bottom-width:1px;
border-bottom-color:#C7EEFA;
margin-bottom:2px;
}
.product_activitylayer {
height:160px;
width:244px;
position:absolute;
z-index:999;
}
.product_activitylayer_hover {
height:160px;
width:244px;
position:absolute;
z-index:999;
background:#00CCFF;
opacity:.5;
filter:alpha(opacity="50");
}
John,
This one is a known bug in IE. If any element has transparent background - IE does not takes executes the hover on it. You can fix it by applying the background to .product_activitylayer and set it's opacity to 0
See I updated your fiddle.
http://jsfiddle.net/NETJ4/1/
.product_activitylayer {
height:160px;
width:244px;
position:absolute;
z-index:999;
background:#00CCFF;
opacity:0;
filter:alpha(opacity="0");
}
Or here is a improved version using jQuery
http://jsfiddle.net/zzLr6/2/
Related
I'm very new to web development so have mercy with your responses.
I have a grid of images that I want to modify. When the mouse hovers over an image, I want an overlay with text to appear over the image (this may require the cell in the grid to expand to contain all the text).
When the image with the overlay is clicked, it should open a modal (I already have this working) with the full text and info inside.
All changes need to look smooth with transitions (overlay shouldn't just be there when the mouse touches, it should animate in, etc.) when they enter/exit.
I'm not sure what the right terminology is for this, so I'm struggling to find info searching on Google. So, if you could provide me with some resources to learn this, or provide some examples, it'd be much appreciated. Thanks in advance :)
Edit: Here's close to what I want to happen
There will be an image, like this:
After the mouse hover over this image, an overlay should animate in to look like this:
The difference between this and what I want, is I want to show text instead of an icon, and I also want the cell in the grid upon which the mouse is hovering to expand to more pleasantly present the text that will be shown on the overlay.
You can do this with just css first you need to wrap your image in a div and set the position to relative. Then place the image and the overlay inside of it. Then you can use css transitions to achieve the desired effect. You will set the original opacity of the overlay to 0 and set the hover opacity to 1. Below is an example. Since you haven't posted any code I can't tell what your markup will be so I just made an example.
.img-container{
position:relative;
display:inline-block;
}
.img-container .overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgb(0,170,170);
opacity:0;
transition:opacity 500ms ease-in-out;
}
.img-container:hover .overlay{
opacity:1;
}
.overlay span{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
color:#fff;
}
<div class="img-container">
<img src="https://placehold.it/300x300">
<div class="overlay">
<span>overlay content</span>
</div>
</div>
Set image as "block"
.img-container{
position:relative;
display:inline-block;
}
.img-container img{
display:block
}
.img-container .overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgb(0,170,170);
opacity:0;
transition:opacity 500ms ease-in-out;
}
.img-container:hover .overlay{
opacity:1;
}
.overlay span{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
color:#fff;
}
<div class="img-container">
<img src="https://placehold.it/300x300">
<div class="overlay">
<span>overlay content</span>
</div>
</div>
Sounds like you're looking for tooltip, see
https://getbootstrap.com/docs/4.0/components/tooltips/
I want to make a gallery in HTML/CSS/jQuery. I have a bunch of thumbnails that all represent different images of varying sizes and orientations. When the thumbnail is clicked, I want the image to slide down from the top of the screen. The image should be as large as possible but still fitting in the window, taking into account margins and the like.
I have gotten all this to work properly in the past. However, now I want to add a caption below the image.
My solution was this. I have a div container that is fixed and is positioned with top:-96% and bottom:100% When a thumbnail is clicked, jQuery moves that to top:2% and bottom:2%
Previously I had a border that surrounded the image. Now I want to make that border actually part of a div instead, so that the border can go around the caption which should be below the image and centered, and said image.
Nothing I am doing is working, however. The image will not fit into the viewport, and will always be its max size no matter what I change the percent to.
I'm completely lost, I have no idea how to make this all work out. If you need code, I can give it to you, but as I said, it doesn't work. Thank you all in advance.
EDIT: Added code
HTML:
<div id=imgHoverCont>
<div id=imgBg>
<img id=imgHover src="" alt="">
<div id=commentHover></div>
</div>
</div>
CSS:
#imgHoverCont{
text-align:center;
position:fixed;
left:2%;
right:2%;
top:-96%;
bottom:100%;
}
#imgHover{
display:block;
height:100%;
width:auto;
}
#imgBg{
position: relative;
display: inline-block;
max-width:100%;
max-height:100%;
}
#commentHover{
position:absolute;
left:0;
bottom:0;
width:100%;
color:black;
background-color:white;
}
JS: Thumbnails are stored in an array of objects with their ID and their source.
for(let i in thumbnails){
$(thumbnails[i].id).on("click",function(livingHell){
return function(){
$("#imgHover").attr("src",thumbnails[livingHell].src)
$("#imgHoverCont").css("display","block");
$("#commentHover").html(thumbnails[livingHell].comment);
$("#imgHoverCont").animate({bottom:"2%",top:"2%"},1000);
}
}(i));
};
I've made some changes to your CSS
if I understood your question it works like expected, look here: https://jsfiddle.net/cratgjks/
#imgHoverCont{
text-align:center;
position:fixed;
left:2%;
right:2%;
top:-96%;
bottom:100%;
width:100%; /*new rule*/
}
#imgHover{
display:block;
height:100%;
width:100%;/*changed rule*/
}
#imgBg{
position: relative;
display: inline-block;
max-width:100%;/*changed rule*/
max-height:100%;
width:1500px
}
#commentHover{
position:absolute;
left:0;
bottom:0;
width:100%;
color:black;
background-color:white;
}
I'm trying to make a fullscreen site, also responsive, but on smaller screens the elements in the container overflow making it not 100% it varies depending on how many items are in it. Using:
top:100%;
position:relative;
width:100%;
height:100%
works, only if the screen is a certain size, on mobile devices using that it doest work, and appears half on the previous container.
Is there a way to position from the bottom of the element rather than top?
http://jsfiddle.net/q8tvwm2k/2/
Update:
Never minds found a pretty bad but working solution.
I'm pretty sure you really want a position:absolute to have another div relative to it. You just didn't word the question correctly. position:relative sets the point to which its children can be position:absolute, which is where you want to use top and the like. This is the structure you need to see:
HTML
<div class='surround'>
<div class='inside'>
<div class='outer'>
<div class='inner'>
</div>
</div>
</div>
</div>
CSS
.surround{
position:relative;
}
.inside{
height:100px; width:100px; position:absolute; top:100px; left:100px;
}
.outer{
height:100px; width:100px; position:relative;
}
.inner{
position:absolute; top:30px; left:10px;
}
I am trying to inject a banner div
<div id='banner'></div>
on top of an existing webpage in such a manner so that when a person scrolls the webpage the banner remains on top. Also the webpage should be pushed down by the banner so that every part of the page remains accessible.
Here is my CSS:
#banner {
position:fixed;
display:block;
top:0px;
background-color:#FFFFFF;
width:100%; height:250px;
border:2px solid;
}
Here is my jquery:
$("body").prepend("<div id='banner'></div>");
I tried using jquery to find all divs that were fixed and changing them to relative before executing the above line but still the banner does not work. The error is shown in the following picture https://drive.google.com/file/d/0B0sCu8aj8zu2akhtcEdtajJJZEU/edit?usp=sharing
Please Help.
And I am not looking for ad revenue here this is just a practice task.
Here is a jsFiddle I have created. The banner div is at the top of the page.
It stays at the top while scrolling.
The HTML:
<div class="page">
</div>
The css:
.oldBody
{
width:100%;
height: 3000px;
background-color: navy;
margin-top:250px;
}
#banner
{
position:fixed;
top:0px;
background-color:#FFFFFF;
width:100%;
height:250px;
border:2px solid;
z-index:10000;
}
The JS:
$("body").wrapAll("<div class='oldBody'></div>");
$("body").prepend("<div id='banner'></div>");
Please maintain z-index of banner div.Z-index should be grater then other div on that page.
#banner {
position:fixed;
display:block;
top:0px;
background-color:#FFFFFF;
width:100%; height:250px;
border:2px solid;
z-index : 99999
}
i'd just like to present a different way to create the element:
var $banner = $('<div/>', { 'id' : 'banner' });
$('body').prepend($banner);
this technique for creating elements with jquery comes in handy when you have several different element to create. as a note, you can also create the element like so:
var $banner = $('<div/>').attr('id', 'banner');
I think the best way is first keep your ad on top in relative position when a person scroll page your function check the page-scroll .scrollTop() and then add fixed position on banner ad container just like freeze header, if you need further help in this regard let me know, I will provide you code. thanks I hope this technique will help you
It is a grid structured content similar to this:
<div id="gridBlock">
<div class="list-lot-item">
<div class="list-lot-item-info">
<div class="list-lot-item-col2"></div>
<div class="list-lot-item-col3"></div>
</div>
</div>
<div class="list-lot-item">....</div>
</div>
with some CSS like so (but more in JSFiddle):
#gridBlock .list-lot-item{
float:left;
position:relative;
height:25px;
width:50px;
border:1px solid #fff;
padding-left:2px;
}
#gridBlock .list-lot-item-info,
#gridBlock .list-lot-item-info-on{
display:block;
position:absolute;
background-color:#fff;
border:1px solid #fff;
width:50px;
}
#gridBlock .list-lot-item-info{
z-index:199;
}
#gridBlock .list-lot-item-info-on{
border:1px solid red;
top:0;
z-index:200;
position:relative;
background-color:yellow;
}
#gridBlock .list-lot-item-col2,
#gridBlock .list-lot-item-col3{visibility:hidden;}
#gridBlock .list-lot-item-info-on .list-lot-item-col2,
#gridBlock .list-lot-item-info-on .list-lot-item-col3{visibility:visible;}
where for each box "hover" state I apply a new "on" class with higher z-index:
$('#gridBlock .list-lot-item').hover(
function(){$(this).children(0).removeClass("list-lot-item-info");$(this).children(0).addClass("list-lot-item-info-on");},
function(){$(this).children(0).removeClass("list-lot-item-info-on");$(this).children(0).addClass("list-lot-item-info");}
);
It works perfect, obviously, in FF, Chrome, IE8+ but our old little friend IE7 is weak. Please try in Compatibility Mode and see it:
Live Demo in Action
IE7 pops the hovered box under the neighboring grid boxes when it should be visa-verse. Any good suggestion how to fix it?
I don't have access to any versions of IE to test this as I work on Ubuntu.
But, my understanding is that z-index depends on the position:absolute;
Try it out removing position:relative; from #gridBlock .list-lot-item-info-on
If this happens to break your design, you could reset it with margins too.
Add this:
#gridBlock .list-lot-item:hover {
z-index:200;
}
Since IE7 is very strict with z-indices. Take your .list-lot-item they all have the same z-index value (which is nothing) so whichever come last are on top of the earlier ones. And they cannot break out of the order of the parents.
Take elements A and B, which have a z-index of 1 and 2 respectively, any child of A, no matter how high the z-index will appear under B. IE7/8 is very strict about this.
JSFiddle