I am just starting to learn jquery with very little JS knowledge (long story short - I'm told it helps provide shortcuts - if I had time I would learn JS properly).
With that out of the way, I am trying to essentially create a scrolling marquee or multi-frame hero banner, whatever you want to call it. I don't want any automation, I am looking specifically for the end user to click a button/image to change the marquee image.
I am having issues with my jquery as is AND I'd like to ask for assistance on another piece I am struggling with, which is hiding the image that is currently showing.
what is wrong with my current jquery that it will not work appropriately?
a. file is loaded at top of the page
b. when I execute this ($("#imgd2").fadeIn;) part of the jquery it works in firebug, but within the click function it does not...
how could I go about looking to see what image is currently showing, hide that and fade in the appropriate image. For example, img1 is displayed by default, if i click on img3, how can I hide image 1 before fading in marquee 3?
//html - forgive the laziness
//I am showing the first image by default and hiding the other two images on the page.
<div style="width: 100%; height: 450px;" id="img-container">
<div id="imgd1" style="width: 432px; height: 398px; position: absolute; background-image: url(img1.jpg); background-size: cover;"></div>
<div id="imgd2" style="width: 432px; height: 398px; position: absolute; display: none; background-image: url(img2.jpg); background-size: cover;"></div>
<div id="imgd3" style="width: 432px; height: 398px; position: absolute; display: none; background-image: url(img3.jpg); background-size: cover;"></div>
<div style="position: absolute; top: 438px; left: 322px;" id="bttns">
<img id="img1" src="active.png">
<img id="img2" src="active.png">
<img id="img3" src="active.png">
</div>
</div>
//jquery
//On click of a particular button, I want to fadein the appropriate image
$("#img1").click(function () {
$("#imgd1").fadeIn;
});
$("#img2").click(function () {
$("#imgd2").fadeIn;
});
$("#img3").click(function () {
$("#imgd3").fadeIn;
});
thanks in advance!
it must have a parenthesis :-)
$("#imgd5").fadeIn();
for question #2..heres my fiddle http://jsfiddle.net/5PP4z/2/
fadeIn is a function, you need to invoke it
$("#imgd3").fadeIn();
Instead of writing a click handler for each of the imgd elements, you can target all of them(by adding a class imgd) and use a data-* attribute to specify the image(data-target attribute with the id of the image) to be displayed. Also add a class img to all the images so that we can hide it easily.
<div style="width: 100%; height: 450px;" id="img-container">
<div id="imgd1" class="imgd" style="width: 432px; height: 398px; position: absolute; background-image: url(//placehold.it/432x398/ff0000); background-size: cover;"></div>
<div id="imgd2" class="imgd" data-target="#img2" style="width: 432px; height: 398px; position: absolute; display: none; background-image: url(//placehold.it/432x398/00ff00); background-size: cover;"></div>
<div id="imgd3" class="imgd" data-target="#img3" style="width: 432px; height: 398px; position: absolute; display: none; background-image: url(//placehold.it/432x398/0000ff); background-size: cover;"></div>
<div style="position: absolute; top: 438px; left: 322px;" id="bttns">
<img id="img1" class="img" data-target="#imgd1" src="//placehold.it/32/ff0000" />
<img id="img2" class="img" data-target="#imgd2" src="//placehold.it/32/00ff00" />
<img id="img3" class="img" data-target="#imgd3" src="//placehold.it/32/0000ff" />
</div>
</div>
then
jQuery(function ($) {
var $imgds = $('.imgd');
$('.img').click(function () {
var $target = $($(this).data('target'));
$imgds.not($target).hide();
$target.stop(true, true).fadeIn();
})
});
Demo: Fiddle
Related
Basically, I have a page that should load 3 pngs when you press the button. The problem I'm having is that I have one image #heart that I want to overlay onto a #background. I've tried different permutations of positioning but it (the #heart image) won't move at all, even with a high z-index over the lower layer. It won't even move to the right with left: x px
Sorry. I'm still pretty new. I'm completely stuck as to how to proceed. Developer tools just tell me that it's sitting in an image div above where I want it to be... Here's the code:
#heart {
z-index: 99999;
left: 200px;
top: 100px;
height: 100px;
width: 100px;
position: relative;
}
#background {
width: 800px;
margin: 0 auto;
display: none;
z-index: -10;
position: relative;
}
<div class="action">
<img id="heart" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561725918/virtual%20pet/l1.png" alt="heart points image">
<img id="background" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561670551/virtual%20pet/little-board.png" alt="pin board image">
<div id="bennyNormal"></div>
</div>
To make this you will have to use some others css properties like flex and background-image and update you HTML DOM just like this:
#heart {
height: 100px;
width: 100px;
}
#background {
display: flex;
justify-content: center;
align-items: center;
width: 800px;
height: 500px;
background-image: url("https://res.cloudinary.com/dytmcam8b/image/upload/v1561670551/virtual%20pet/little-board.png");
background-size: cover;
background-position: center;
position: relative;
}
<div class="action">
<div id="background">
<img id="heart" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561725918/virtual%20pet/l1.png" alt="heart points image">
</div>
</div>
When you give an element "position: relative", it keeps it's place in the document flow, so when you change it's position on the page with top: 100px or whatever, it moves but the space it vacates is not removed from the document. Therefore, nothing moves in to take it's place and z-index does nothing.
Try this:
<div class="action">
// Switch the two images in the document flow to make this easier, although you can ignore that if you want.
<img id="background" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561670551/virtual%20pet/little-board.png" alt="pin board image">
<img id="heart" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561725918/virtual%20pet/l1.png" alt="heart points image">
<div id="bennyNormal"></div>
</div>
So now, #heart is no longer "below" the #background image in the document flow. bennyNormal div is still "above" everything inside the #action div but because the #background image comes first (with a relative position (or even if it had no position) #background will keep the div below it on the page in the doc flow. If you also give #background display: block it will stop the div from moving up, if that ever becomes an issue.
Then:
#heart {
z-index: 99999; <== this is irrelevant now. get rid of it.
left: 200px; <== change these to position over #background as you wish
top: 100px;
height: 100px;
width: 100px;
position: absolute; <== important bit.
}
#background {
width: 800px;
margin: 0 auto;
display: none; <== You want it invisible? Should be block.
z-index: -10; <= Same with this. Don't screw around with z-index if you can avoid it.
position: relative; <== This no longer matters, but you can still include it
}
As nitin9nair comment, setting #heart { position: absolute; } seems to be enough
#heart {
position: absolute;
top:200px;
left:320px;
}
<div class="action">
<img id="heart" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561725918/virtual%20pet/l1.png" alt="heart points image">
<img id="background" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561670551/virtual%20pet/little-board.png" alt="pin board image">
<div id="bennyNormal"></div>
</div>
Problem:
Essentially I have a row of in-line containers with images inside them, and an overlapping div with text at the bottom of the div/image. When the window is resized horizontally, the image and div snap to the row below it and stay inline. However, the overlay does not snap with them until it is completely covered by the horizontal resize of the window, which only then it will snap below the row and appear with the rest of the container.
If you keep resizing the window horizontally, eventually the overlay div will snap down and appear in its correct position.
Question:
How can I make it, via CSS, JS or jQuery, so that the overlay div follows the container it's in when the overflow forces the containers into the next row?
#container {
position: relative;
display: inline;
}
#overlay {
position: absolute;
display: inline;
text-align: center;
height: 20px;
background-color: gray;
width: 304px;
bottom: 0;
}
<div id="container">
<div id="overlay">
Test
</div>
<img src="http://www.navipedia.net/images/a/a9/Example.jpg" alt="Mountain View" style="width:304px;height:228px;">
</div>
<div id="container">
<div id="overlay">
Test
</div>
<img src="http://www.navipedia.net/images/a/a9/Example.jpg" alt="Mountain View" style="width:304px;height:228px;">
</div>
Example Fiddle: https://jsfiddle.net/buqbxgzz/2/
There are several issues with your code:
You are recycling IDs in your markup. IDs must be unique in a document. For example, use .container instead of #container.
Using position: absolute and display: inline on the overlay doesn't make a lot of sense, because it will be set to block level automatically (i.e. display: block).
Also, as long as you switch to display: inline-block on the container elements, the positioning will work. The reason is a bit convoluted, but if you look at the elaborate description of stacking contexts by W3C, you can see that inline level elements have a very different (and probably counterintuitive) characteristics described, compared to inline-block or block elements.
.container {
position: relative;
display: inline-block;
}
.overlay {
position: absolute;
text-align: center;
height: 20px;
background-color: gray;
width: 304px;
bottom: 0;
}
<div class="container">
<div class="overlay">
Test
</div>
<img src="http://www.navipedia.net/images/a/a9/Example.jpg" alt="Mountain View" style="width:304px;height:228px;">
</div>
<div class="container">
<div class="overlay">
Test
</div>
<img src="http://www.navipedia.net/images/a/a9/Example.jpg" alt="Mountain View" style="width:304px;height:228px;">
</div>
See fixed fiddle: https://jsfiddle.net/buqbxgzz/4/
Try:
#container {
position: relative;
display: inline-block;
}
Specify the width to the container instead of the overlay div node and give the latter element a 100% width. Here is the code:
#container {
position: relative;
display: inline-block;
width: 304px;
}
#overlay {
position: absolute;
display: inline;
text-align: center;
height: 20px;
background-color: gray;
width: 100%;
bottom: 0;
}
Here is it working: https://jsfiddle.net/buqbxgzz/5/
Edit:
I've just realized you are using a duplicate ID in your code. ID's must be unique. Change the container and overlay to classes
Is this the thing you are looking for? Btw, id attributes of elements should better be unique. For applying the same styling rules classes are used.
.container {
position: relative;
display: inline-block;
}
.overlay {
position: absolute;
display: inline-block;
text-align: center;
height: 20px;
background-color: gray;
width: 304px;
bottom: 0;
}
<div class="container">
<div class="overlay">
Test
</div>
<img src="http://www.navipedia.net/images/a/a9/Example.jpg" alt="Mountain View" style="width:304px;height:228px;">
</div>
<div class="container">
<div class="overlay">
Test
</div>
<img src="http://www.navipedia.net/images/a/a9/Example.jpg" alt="Mountain View" style="width:304px;height:228px;">
</div>
I'm using JCrop to crop photos (obviously) and my issue is that I have the image clickable (launches a modal) and the width and height are different than what I have set for the image that is clicked on.
An example is:
$("#avatar-photo").html("<img src='" + replace + "' alt='Avatar' class='w3-center w3-round w3-border' style='height: 280px; width: 400px;' id='enlarged-photo'>
but when it loads in the modal, JCrop adds an inline style of this:
<img src="image.jpg" alt="Avatar" class="w3-center w3-round w3-border" style="height: 152px; width: 152px; display: none; visibility: hidden;" id="enlarged-photo">
Is there anyway to prevent JCrop from doing this, as it is making the image too small in the modal.
I hope that explains my issue.
Thanks!
update:
I've isolated the image sizing issue to this:
<img src="image.jpg" alt="Avatar" class="w3-center w3-round w3-border" style="height: 150px; width: 150px; display: block; visibility: visible; border: none; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; opacity: 1;">
My only question is now is how to stop JCrop from putting a height and width for the style?
I believe it may be because the codes are manipulating each other.
IN your JS:
style='height: 280px; width: 400px;'
IN your HTML:
style="height: 152px; width: 152px;
There both trying to value the image at a height and width. Remove one of them.
fixed it, it was a boxWidth and boxHeight issue
So I've been playing around with this for a while, but cannot get the binded click event to fire from a jqzoomed element.
HTML:
<div class="product-clicktozoom-image">
<div class="product-clicktozoom-image-main">
<img itemprop="image" id="mainimage" src="http://exampe.com/image.jpg" alt="Image" title="Image"/>
</div>
</div>
JS:
jQuery(document).load(function() {
jQuery('#mainimage').bind('click',function(){
var fancyImage = jQuery('#mainimage').attr('src');
jQuery.fancybox.open(fancyImage);
});
});
jqzoom creates a couple of extra div's so the final page structure actually looks like this:
<div class="product-clicktozoom-image-main">
<a href="example.com/image.jpg" class="jqzoom" title="" rel="gall" style="outline-style: none; text-decoration: none;">
<div class="zoomPad">
<img itemprop="image" id="mainimage" src="http://example.com/image.jpg" alt="Image" title="Image" style="opacity: 1;">
<div class="zoomPup" style="display: none; top: 105px; left: 145px; width: 126px; height: 126px; position: absolute; border-width: 1px;"></div>
<div class="zoomWindow" style="position: absolute; z-index: 5001; cursor: default; left: 0px; top: 0px; display: none;">
<div class="zoomWrapper" style="border-width: 1px; width: 355px; cursor: crosshair;">
<div class="zoomWrapperTitle" style="width: 100%; position: absolute; display: none;"></div>
<div class="zoomWrapperImage" style="width: 100%; height: 355px;">
<img src="http://example.com/image.jpg" style="position: absolute; border: 0px; display: block; left: -411.26760563380276px; top: -298.5915492957746px;">
</div>
</div>
</div>
<div class="zoomPreload" style="visibility: hidden; top: 156px; left: 132.5px; position: absolute;">Loading zoom</div>
</div>
</a>
</div>
I have tried binding the click event to the #mainimage, along with the zoomPad class and also the img within the zoomWrapperImage element as this appears to be the top element when you mouseover the image.
All I want to do is open the full image in a fancybox if they click on the zoom (currently the zoom happens on mouseover). I know the fancybox.open(fancyImage); works, I can run the code in the click function directly in the console successfully, I just can't get it to fire from the click event itself.
Help!
This turned out to be pretty simple in the end, the click event needs to bind on the .zoomPad, and I used window.load in place of (document).ready as that ensures all the elements have loaded.
Final JS:
jQuery(window).load(function() {
jQuery('.zoomPad').bind('click',function(){
var fancyImage = jQuery('.zoomWrapperImage img').attr('src');
jQuery.fancybox.open([{href : fancyImage}], {closeClick : true});
});
});
I'm using bootstrap's carousel ( http://twitter.github.com/bootstrap/javascript.html#carousel ) to show a user submited gallery. Because it's user submited, it doesnt look very good with the rest of my website design thats why i want to add a layer mask on top off everything
Here is the mask : http://img52.imageshack.us/img52/2659/degrade.png
Unfortunatly, I'm unable to show that particular div...
It has to be non clickable because when a user click on a picture of the carousel, it opens modal popup with the full sized picture.
My css (its using less but you get the idea):
.carousel {
width: 292px;
height: 163px;
.carousel-inner {
width: 292px;
height: 163px;
img {
width: 100%;
height: 100%;
}
}
}
.carousel-control {
margin-top: 0;
top: 0;
right: 0;
background: none;
border: 0;
width: 60px;
height: 163px;
opacity: 0.65;
background-repeat: no-repeat;
&:hover.right {
background-image: url('/assets/index/r_arrow.png');
}
&:hover.left {
background-image: url('/assets/index/l_arrow.png');
}
}
heres is my html:
<div class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="thumbnail1.jpg" />
</div>
<div class="item">
<img src="thumbnail2.jpg" />
</div>
<div class="item">
<img src="thumbnail3.jpg" />
</div>
</div>
<a class="carousel-control left" href=".carousel" data-slide="prev"> </a>
<a class="carousel-control right" href=".carousel" data-slide="next"> </a>
</div>
Depending on your cross-browser support needs, you could try giving the overlay pointer-events: none. Here's an example of that.
If you insert <div class="overlay"></div> into .carousel-inner, give .carousel-inner {position: relative;} and
.overlay {
background: url(http://img52.imageshack.us/img52/2659/degrade.png) top left no-repeat;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
pointer-events: none;
}
There's an answer here that gives information and links to solutions using javascript. Unfortunately, the resources for the accepted answer to the linked question have gone offline, but there is a fairly simple demonstration here: http://jsbin.com/uhuto