CSS:hover:after overlay breaks jquery on click for me - javascript

I have a jQuery lightbox setup with a number of 300x300px images that on click open the lightbox. I would like to be able to overlay an semi-opaque background and text information with the video titles on the CSS :hover:after. The overlay works correctly and the lightbox works without the overlay code in place. But as soon as I combine the two the hover works but blocks the on click. Here is my HTML code:
<div class="screenShot" id="video1">
<a href="#"data-videoid="21183190" videosite="vimeo">
<img src="http://www.gorillacreativemedia.com/wp-content/themes/gorillashifter/img.php?mw=300&mh=300&src=library/images/noimage.png" />
</a>
</div>
And here is the CSS:
.screenShot{
display:inline-block;
position:relative;
margin:20px;
}
.ScreenShot img {
max-width: 100%;
height: auto;
}
#video1:hover:after {
content: '\A';
position: absolute;
width:300px;
height:300px;
background:rgba(255,0,0,0.6);
top:0;
left:0;
padding:100px auto;
text-align:center;
vertical-align:middle;
}
I don't know if I should be trying to trigger this off of a Javascript function instead or if I'm missing something simple with the formatting.

Use z-index:
CSS:
#video1:hover:after {
content:'\A';
position: absolute;
width:300px;
height:300px;
background:rgba(255, 0, 0, 0.6);
top:0;
left:0;
padding:100px auto;
text-align:center;
vertical-align:middle;
z-index:-1 //Generally lower than the element's z-index
}
Demo: http://jsfiddle.net/GCu2D/843/

I figured it out. The tag has to wrap around the element that you're putting the hover event on. I changed the HTML to this:
<div class="screenShot">
<a href="#" data-videoid="21183190" data-videosite="vimeo">
<div id="video1">
<img src="http://www.gorillacreativemedia.com/wp-content/themes/gorillashifter/img.php?mw=300&mh=300&src=library/images/noimage.png" />
</div>
</a>
</div>
Kept the CSS the same and it appears to work as intended now.

Related

Css Rescaling Fixed Banner

So quick question, I haven't been able to find the correct phrasing perhaps in google but I'm attempting to make a fixed banner will scale when the page is resized. I've found that using a percentage width works for at least the large container, however my banner container within the main container will not rescale into that adequately (The banner is extending longer than the main container).
CSS:
.contMain {
width:80%;
position: top
padding-top: 0;
border-top: 0;
margin: 0 auto;
background-color: #F1EDCC;
}
.contMain-banner {
position:fixed;
width: inherit;
background: #87AADF;
}
HTML:
<div class="contMain">
<div class="contMain-banner">
<h1 class="contMain-title">Some Title</h1>
{{> MeteorTemplate}}
</div>
</div>
The only higher level css is a .body tag in css for a background color. I am using MeteorJS for this. Cheers
Try this - codepen here
css
body {
height:100%;
width:100%;
}
.contMain {
height:150px;
width:80%;
padding:0;
margin: 0 auto;
background-color: #333333;
}
.contMain-banner {
position:fixed;
width: inherit;
height:auto;
background: #d7d7d7;
}
span {
color:#fff;
position:absolute;
top:125px;
}
HTML
<body>
<div class="contMain">
<div class="contMain-banner">
<h1 class="contMain-title">Main Content Banner</h1>
{{> MeteorTemplate}}
</div>
<span>This is the main container</span>
</div>
</body>

I want to overlay image on top of other existing image using javascript

I have user photo which I want to put on top other image, so as to make that image complete.
Here is my code
<div id="containerDiv">
<figure>
<img id="someImage" src="../images/someImage.gif" >
</figure>
<div id="buttonDiv">
<button>Done</button>
</div>
</div>
I have other image which I am taking from cache and putting in some
<img src=cachedImage />
I want to style it so that I can put the cached image on top of someImage also The entire containerDiv should be responsive to the browser window. So, I want to get the css part of this. I tries using relative and absolute positioning
<style>
#containerDiv{
position:relative; width:100%; height:300px;
}
#someImage{
position:absolute; top:10px; left:100px;
}
#buttonDiv{
position:absolute; top:100px; left:200px;
}
</style>
I want the button to be responsive with the someImage too. But it does not move along with the image. Also the cached image should be in sync with someImage. Thanks in advance.
i am not aware with your code but try this hope this helps you
<div class="div on which you want to show overlay">
<div class="overlay overlay-div">
<center>
<div class="overlay-content"><p>your overlay content,img goes here</p>
</div>
</center>
</div>
</div>
and css for overlay is :
.overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1050;
background-color: rgba(0,0,0,0.5); /*dim the background*/
}
you can show overlay div on mouse hover/in/out events.

How to hide/cover a certain part of an iframe

I have this iframe:
<iframe width='828'
height='465'
frameborder='0'
allowfullscreen
src='https://www.firedrive.com/embed/B027D40BFCD0BBC0'>
</iframe>
and would like to cover/remove the Firedrive logo in the corner to make it unclickable. How can I do this. I've been searching on the web for hours but nothing seems to work for me.
Jsfiddle: http://jsfiddle.net/aZ5p6/
Beware: THE IFRAME CONTAINS ADS. The logo is at the top right corner of the iframe.
I'm a newbie at html, please do not simply tell me how to solve it, spoon feed me the code.
You must add a container/wrapper around the iframe. Try this:
CSS
.wrapper{
position:relative;
z-index: 1;
display: inline-block;
}
.hidelogo{
position: absolute;
width: 150px;
height: 40px;
background: #222;
right: 0px;
bottom: 6px;
z-index:999;
display: block;
color: #fff;
}
HTML
<div class="wrapper">
<div class="hidelogo"></div>
<iframe width='828' height='465' frameborder='0' allowfullscreen src='https://www.firedrive.com/embed/B027D40BFCD0BBC0'></iframe>
</div>
DEMO HERE
Checkout
Your Log blocked by a Div with Id Blocker .Give the background color that you want or if you want any other logo give it as the background image of this div
CSS
#Blocker{
position:absolute;
z-index:10;
right:10px;
bottom:5px;
height:15px;
width:100px;
background-color:orange;
}
#frame{
height:100%;
width:100%;
position:absolute;
}
#Wrapper{
height:100%;
width:auto;
border:solid red 2px;
}
HTML
<div id="Wrapper">
<iframe id="frame" width='828' height='465' frameborder='0' allowfullscreen src='https://www.firedrive.com/embed/B027D40BFCD0BBC0'>
</iframe>
<div id="Blocker">
Logo Blocked
</div>
</div>
100% Work
iFrame has some limitation but there is another way is .load()
for external URL you need to add CSS also if you want the same look.
HTML :
<div id="urlDetails"></div>
JS:
$('#urlDetails').load('http://www.example.com/page.php #content');
Note: All data available in id="content" will appear here you can also use with a class name.
CSS (optional)
<link rel="stylesheet" href="http://example.com/css/style.cssenter code here">

JS Not Functioning as Intended

I am using a jQuery plugin called Sticky Floating Box to have a div that floats but is contained within the other div. It appears to work however it doesn't stay within the containing div. I have looked over the scripts demo page but cannot figure out what I am doing wrong.
Here is the JS Initialize Code:
$(function() {
jQuery('.addthis').stickyfloat('update',{ duration:0});
});
Here is a jsFiddle showing the issue.
HTML and CSS Below:
<div class="header"> HEADER </div>
<div class="container">
<div class="addthis">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_32x32_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_google_plusone_share"></a>
<a class="addthis_button_pinterest_share"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_button_email"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=undefined"></script>
<!-- AddThis Button END -->
</div>
<p>ICONS SHOULD STAY <BR> WITHIN THIS GRAY BOX<p>
</div>
<div class="footer"> SHOULD NOT GO BELOW THIS LINE</div>
.header{
width:400px;
background: #F00;
height:100px;
margin:0 auto;
}
.container{
position:relative;
height:400px;
width:400px;
margin:0 auto;
background: #999;
}
.footer{
height:700px;
width:400px;
background: #F0F;
margin:0 auto;
}
.addthis{
position:absolute;
top:0;
left:-50px;
}
I had to do three things to get the jsFiddle to work properly:
stickyfloat function needs to be called after the page is ready (and remove the 'update' part).
jQuery(document).ready(function() {
jQuery('.addthis').stickyfloat({ duration:0});
});
Add the following css rule:
.addthis_floating_style
{
position:inherit !important;
}
Give the .addthis div an explicit height and width:
.addthis
{
position:absolute;
top:0;
left:-50px;
width :36px;
height:222px;
}

position fixed element always inside the div

I need to be able to position fixed element always inside the div.
Problem is occuring when I resize the window. Then the fixed div is always floating above all other elements. How to prevent that? I need that div to be fixed but positioned inside the div .
Here is an example:
<div id="main">
<div id="one" style="background-color:yellow;"></div>
<div id="two" style="background-color:black;"></div>
<div id="three" style="background-color:yellow;">
<div id="four"></div>
</div>
</div>
CSS:
#main
{
position:relative;
width:1200px;
top:0;
bottom:0;
left:100px;
}
#one,#two,#three
{
position:relative;
width:100px;
height:1000px;
float:left;
top:0;
bottom:0;
}
#four
{
position:fixed;
top:50px;
background-color:blue;
width:100px;
height:200px;
}
EXAMPLE try moving horizontal scroll left and right and you will see what is happening.
Change position to relative.
Example
#four {
background-color: blue;
height: 200px;
position: relative;
top: 50px;
width: 100px;
}
Check out this answer on a similar question. The problem you're facing is something that can't be solved with CSS alone, unfortunately.

Categories