I have a simple jquery popup. I am having issues making it work. Right now the popup does not show up. The Live webpage can be seen at: http://www.domainandseo.com/fibro/index.html
If you scroll down a little there is a link that says "click to enlarge" which should make the popup show up.
My html is:
<div id="lightbox">
<img src="img/cross.png" alt="X" />
<img src="img/lightbox-img.jpg" alt="Supplemental Facts" class="lightbox-img" />
</div>
<div class="overlay"></div>
The CSS is:
#lightbox {
width: 722px;
height: 732px;
background: #FFF;
z-index: 1000;
position: absolute;
left: 250px;
top: 100px;
display: none;
}
.cross {
float: right;
}
.lightbox-img {
margin-left: 90px;
margin-top: 45px;
}
.overlay {
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
width:100%;
height:130%;
z-index:998;
background: url(../img/gray.png) repeat;
display: none;
}
And the jQuery for the popup:
$(document).ready(function(){
//open popup
$(".pop").click(function(){
$("#lightbox").fadeIn(1000);
$(".overlay").css ({display: 'block'});
positionPopup();
});
//close popup
$(".close").click(function(){
$("#lightbox").fadeOut(500);
$(".overlay").css ({display: 'none'});
});
});
//position the popup at the center of the page
function positionPopup(){
if(!$("#lightbox").is(':visible')){
return;
}
$("#lightbox").css({
});
}
//maintain the popup at center of the page when browser resized
$(window).bind('resize',positionPopup);
Change
$(".#lightbox")
to
$("#lightbox")
This is a simplified version that should be easily implemented into your code. The problem with using an anchor tag to trigger the event is that an empty anchor tag will send the user back to the top of the page. Use a div instead.
http://jsfiddle.net/tvb4X/
Related
Here's the challenge:
I have two divs layered on top of one another in an HTML file. The top div is mostly transparent using CSS the bottom div has an image as its background. On mouseenter, I want the top div to disappear and on mouseleave I want the top div to come back.
$(document).ready(function() {
$('.dimmer').on('mouseenter', event => {
$(this).hide();
}).on('mouseleave', event => {
$(this).show();
});
});
.experience {
background: url("cmu-110.png") no-repeat center;
height: 110px;
width: 110px;
z-index: 2;
}
.dimmer {
background: rgba(238, 238, 238, .25);
position: relative;
top: -128px;
z-index: 3;
}
<div>
<div class="experience"></div>
<div class="dimmer"></div>
</div>
The jquery code snippet above is in a separate file and called in the html's head.
<head>
<!--- Some head stuff like title, meta, calling css in separate file, etc --->
<!--jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="interaction.js"></script>
</head>
Full transparency: I am new to jquery and trying to use it for the first time. Despite working through the full codecademy jquery tutorial, reading w3C school tutorial, searching other stackoverflow posts, and spending more than a reasonable amount of time, I can't seem to get this to work--probably due to a dumb mistake.
Thank you for your help!
I believe a jquery '.on( "mouseout", handler )' on the bottom div should be sufficient to make the top div visible/fade in.
This post should help you: jquery .mouseover() and .mouseout() with fade
If not (if that does not work) what I would do/suggest is:
When mouse enters the top div activate a setTimeout polling functiion or .mouseMove that runs every 1 second or so which checks the mouse position and hide the top div.
If the mouse is not on the bottom div (mousemove) , then display the top div and disable the polling.
You can seach this forum for how to write a setTimeout polling function, etc. If I have some time over the weekend I will give it a whirl...
Trust this helps.
You can set the css visibility property to hidden and visible on mouseenter and mouseleave. I put some space between two divs to make the effect visible clearly.
$(document).ready(function() {
$('.dimmer').on('mouseenter', () => {
$('.dimmer').css("visibility","hidden");
}).on('mouseleave', () => {
$('.dimmer').css("visibility","visible");
});
});
.experience {
background: red;
height: 110px;
width: 110px;
z-index: 0;
}
.dimmer {
background: blue;
position: absolute;
top: -10px;
height: 110px;
width: 110px;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="experience"></div>
<div class="dimmer"></div>
</div>
jQuery(document).ready(function(){
jQuery(".dimmer").on({
mouseenter: function () {
jQuery(this).css('opacity', '0');
},
mouseleave: function () {
jQuery(this).css('opacity', '1');
}
});
});
.experience {
background: url("http://lorempixel.com/400/200/") no-repeat center;
height: 110px;
width: 110px;
z-index: 2;
}
.imparant{
position:relative;
height: 110px;
width: 110px;
}
.dimmer {
background: rgba(238, 238, 238, .25);
position: absolute;
top: 0;
left:0;
right:0;
bottom:0;
z-index: 3;
transition:opacity 320ms;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="imparant">
<div class="experience"></div>
<div class="dimmer"></div>
</div>
You don't really need to use jQuery or javascript at all for this. You can do it with a single div, a pseudo-element, and a hover style:
.container{
position:relative;
height: 110px;
width: 110px;
background-image: url("https://randomuser.me/api/portraits/men/41.jpg");
}
.container::before{
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
transition: opacity 0.4s;
}
.container:hover::before{
opacity: 0;
}
<div class="container"></div>
If for some reason you wanted to keep the extra divs you could still do it but you'd want to change the CSS hover rule slightly. If you were ok moving the .dimmer before .experience you could just do the hover directly on the .dimmer element:
.dimmer:hover { opacity: 0 }
Otherwise you'd need to use a descendant selector:
.outerDiv:hover .dimmer { opacity: 0 }
I disabled the entire page using the over-lay div and I want to show an warning message upon this overlay div . Please let me know , how to handle this.
If I add add div after overlay div , it showing hidden. I want have this warning message upon this overlay div.
<div id="overlay"></div>
#overlay {
background-color: rgba(0, 0, 0, 0.2);
z-index: 999;
position: absolute;
left: 0;
top: 0;
width: 100%;
width: 100%;
height: 100%;
display: none;
}
$("#overlay").show();
Thanks
I tried this fiddle
Added some HTML, made a sibling to the overlay div
<div id="overlay"></div>
<div id="warning">
I am a warning
</div>
applied almost same css on #warning except the z-index
#warning{
width:200px;
height:20px;
border:solid 1px red;
position:absolute;
display:none;
z-index:1000;
}
and used callback of overlay to show warning div
$("#overlay").show(function(){
$('#warning').show();
});
I have a number of images on a page. Each image has a CSS spinner that I want to show before each image is loaded. At the moment, I have it where when 'img' loads, the class 'spinner' is removed. This works but isn't what I want, as it removes the class 'spinner' whenever any 'img' is loaded.
Each img has it's own spinner and I want to only remove each 'individual' spinner class as each image loads.
Here is a basic jsfiddle example: http://jsfiddle.net/Forresty/xvx6maty/
Here is the code:
HTML:
<div class="work_items_wrapper">
<a class="work_item_link" href="#">
<div class="spinner"></div>
<img class="workImage" src="http://i151.photobucket.com/albums/s129/Aiki_liann/cosmos.jpg">
</a>
<a class="work_item_link" href="#">
<div class="spinner"></div>
<img class="workImage" src="http://i151.photobucket.com/albums/s129/Aiki_liann/cosmos.jpg">
</a>
<a class="work_item_link_no_margin" href="#">
<div class="spinner"></div>
<img class="workImage" src="http://i151.photobucket.com/albums/s129/Aiki_liann/cosmos.jpg">
</a>
</div>
scss:
.work_items_wrapper{
margin: 2.8em auto;
}
.work_item_link{
position: relative;
width: 32%;
height: auto;
float: left;
margin-right: 2%;
overflow: hidden;
img{
width: 100%;
display: block;
}
}
.work_item_link_no_margin{
position: relative;
width: 32%;
height: auto;
float: left;
overflow: hidden;
img{
width: 100%;
display: block;
}
}
.spinner{
width: 5em;
height: 5em;
background: red;
position: absolute;
}
Javascript:
$('img').on('load', function() {
$("div").removeClass("spinner");
}).each(function() {
if(this.complete) $(this).load();
});
I replaced the first line of javascript with this to test again:
$('img').on('click', function() {
When I clicked only one of the images, all 3 spinner classes were removed.
How can I go about doing it so that when one image loads, that image's individual spinner is removed. Is it a case of looping through the images or something?
Any help would be highly appreciated.
Thanks.
Try the following:
$(this).siblings('div').removeClass("spinner");
This will remove the class for the div which is on the same level and has the same parent as the img in question.
JS Fiddle Demo
Try changing the removeClass line to this:
$(this).prev().removeClass("spinner");
This will get the current selection, this, which is the img which was loaded, and get it's previous sibling, which is the div you want.
You need to use .prev() to find previous div
Use
$('img').on('load', function() {
$(this).prev("div").removeClass("spinner");
});
DEMO
i want to create a pop up window in phonegap jquery. Please help me out. i need click a button then it shows a popup that i have atached.
I don't think you can overlay above the status bar (time, battery info).
But if that isn't the problem... just add a div with an absolute position.
#myDiv {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.6);
z-index: 10;
display: none;
}
<body>
<div id='myDiv'>
<!-- add the fields/buttons here -->
</div>
</body>
<script>
//jQuery script
$('#myDiv').show();
</script>
i'm putting an overlay so that the elements on my page are disabled.
On my page there are two elements.
One is an anchor tag and another is a file upload input control.
File upload control is invisible by default and is triggered on clicking the anchor tag.
The problem is i have an overlay over these controls but its not working for the invisible file upload control.
During overlay if i click on the file upload area its triggered.Here is jsfiddle
Try clicking the PR text in jsfiddle, it shouldn't work due to overlay but is clickable
Here is the html code
<div class="ast">
<div class="notEdit-overlay"></div>
<a id="uploadQrCode" href="#" style="cursor:pointer;">Upload QR Code</a>
P<input id="qrCodeFileUpload" type="file" class="hideQRUpload" />R
</div>
Jquery code
$('#uploadQrCode').click(function(){
$('#qrCodeFileUpload').click();
});
And here is the css
.hideQRUpload
{
position:absolute;
opacity:0;
width:0px;
height:0px;
}
.notEdit-overlay
{
width: 1080px;
height: 99%;
left: 0px;
background: red;
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.ast{
position: relative;
}
Change css for .notEdit-overlay like this
.notEdit-overlay
{
width: 1080px;
height: 99%;
left: 0px;
background: none;
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
z-index: 1;
}
should use z-index.
http://jsfiddle.net/T5E8D/3/
Try adding pointer-events: none for your upload field – http://jsfiddle.net/T5E8D/2/