I am trying to animate 1 column of boxes aka placeholder.png down with margin-top but it animates all 9 of the boxes down instead of 3 in a column. Here is the code: http://jsfiddle.net/MgL3E/1
$(document).ready(function()
{
$("span").click(function()
{
$("#1").animate(
{
"margin-top": "300px"
}, 1000);
});
});
You should layout columns first, eg
<div>
<div class="column">
<img class="hpbox" src="img/placeholder.png"/>
<img class="hpbox" src="img/placeholder.png"/>
<img class="hpbox" src="img/placeholder.png"/>
</div>
<div class="column">
<img class="hpbox" src="img/placeholder.png"/>
<img class="hpbox" src="img/placeholder.png"/>
<img class="hpbox" src="img/placeholder.png"/>
</div>
<div class="column">
<img class="hpbox" src="img/placeholder.png"/>
<img class="hpbox" src="img/placeholder.png"/>
<img class="hpbox" src="img/placeholder.png"/>
</div>
</div>
And CSS
.column {
float:left;
width: 98px;
}
http://jsfiddle.net/MgL3E/2/
Two errors:
registering on span click, but theres no span element in your fiddle
ids cannot start with a digit
This js runs fine for me, when changing id="1" to id="t1". Testwise its registered on all img tags.. Replace it with whatever should cause the animation to spin in.
$(document).ready(function() {
$("img").click(function() {
$("#t1").animate({
"margin-top": "300px"
}, 1000);
});
});
Related
No onClick, just automatic change of image and caption every second.
Here's the code I have so far:
HTML:
<div class="col-md-6">
<h2>Fishing Slide Show</h2>
<h4 id="caption">Casting on the Upper Kings</h4>
<img id="slide" src="images/casting1.jpg" alt="" height="200px">
<div id="slides">
<img src="images/casting1.jpg" alt="Casting on the Upper Kings" height="200px">
<img src="images/casting2.jpg" alt="Casting on the Lower Kings" height="200px">
<img src="images/catchrelease.jpg" alt="Catch and Release on the Big Horn" height="200px">
<img src="images/fish.jpg" alt="Catching on the South Fork" height="200px">
<img src="images/lures.jpg" alt="The Lures for Catching" height="200px">
</div>
</div>
And this is my Javascript:
var img_array = ["images/casting1.jpg", "images/casting2.jpg"
,"images/catchrelease.jpg", "images/fish.jpg"
,"images/lures.jpg"];
var alt_array = ["Casting on the Upper Kings", "Casting on the Lower Kings",
"Catch and Release on the Big Horn", "Catching on the South Fork",
"The Lures for Catching"];
var currImg = 0;
var currAlt = 0;
function slideShow();{
img.src = img_array[index++, img_array.length];
img.alt = alt_array[index++, alt_array.length];
//document.getElementById("slides").src = img_array[currImg];
//document.getElementById("slides").alt = alt_array[currAlt];
}
let stop = setInterval(slideShow, 1000);
Here's a simple slideshow I made.
You simply have the first slide have the active tab, then you use .nextElementSibling to get the next slide.
function runSlideshow() {
const current = document.querySelector(".slide.current");
current.classList.toggle("current");
current.nextElementSibling ?
current.nextElementSibling.classList.toggle("current") :
clearInterval(slideshow);
}
const slideshow = setInterval(runSlideshow, 2000);
.slide {
height: 200px;
display: none;
}
.slide.current {
display: block;
}
<div id="container">
<img class="slide current" src="https://cataas.com/cat/6136c137ebad510011b54b90" />
<img class="slide" src="https://cataas.com/cat/6136be59ebad510011b54b88" />
<img class="slide" src="https://cataas.com/cat/61307aa542fcca001bb841f5" />
<img class="slide" src="https://cataas.com/cat/6123cb0fe8503700118bdb62" />
<img class="slide" src="https://cataas.com/cat/6120c8103a342d0013920e23" />
</div>
I have many divs with a class and every div contains diferent elements including a link.
what I want is to get the link and add it to all Elments of parent div such as img, headline etc. (using JavaScript)
Ex:
.myClass{
background-color:red;
display:inline-block;
width:150px;
overflow:hidden;
}
<div class="myClass">
<div></div>
<div></div>
<div><h1>test</h1></div>
<div><img src="https://scx1.b-cdn.net/csz/news/800/2019/2-nature.jpg" alt="">
Link1
</div>
</div>
<div class="myClass">
<div></div>
<div></div>
<div><h1>test</h1></div>
<div><img src="https://scx1.b-cdn.net/csz/news/800/2019/2-nature.jpg" alt="">
Link2
</div>
</div>
This is the fastest
Note I use function where I want to get at this or $(this)
$(function() { // on page load
$(".ecs-event").on("click", function() { // click any ecs-event container
location = $(this).find("a[rel=bookmark]").attr("href"); // find the bookmark
})
});
.myClass {
background-color: red;
display: inline-block;
width: 150px;
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ecs-events compact compact-1">
<div class="ecs-event maerz_ecs_category">
<div class="date_thumb">
<div class="month">Mar</div>
<div class="day">6</div>
</div>
<div class="ecs-thumbnail"><img width="75" height="75" src="https://dev.musikzentrum-hannover.de/wp-content/uploads/2019/12/01-03-hannover-schulparty-1-200x200.jpg" class="attachment-75x75 size-75x75 wp-post-image" alt=""></div>
<div class="summary">Hannover Schulparty – abgesagt!</div>
<div class="ecs-button">Mehr erfahren</div>
</div>
<div class="ecs-event maerz_ecs_category">
<div class="date_thumb">
<div class="month">Mar</div>
<div class="day">7</div>
</div>
<div class="ecs-thumbnail"><img width="75" height="75" src="https://dev.musikzentrum-hannover.de/wp-content/uploads/2019/10/001-200x200.jpg" class="attachment-75x75 size-75x75 wp-post-image" alt=""></div>
<div class="summary">Eno und Sero el Mero – abgesagt</div>
<div class="ecs-button">Mehr erfahren</div>
</div>
</div>
Plain JS
window.addEventListener("load", () => { // on page load
[...document.querySelectorAll(".ecs-event")].forEach(div => { // find all ecs-event
div.addEventListener("click", function(e) { // add a click handler
location = this.querySelector("a[rel=bookmark]").getAttribute("href"); // find the bookmark
})
})
});
.myClass {
background-color: red;
display: inline-block;
width: 150px;
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ecs-events compact compact-1">
<div class="ecs-event maerz_ecs_category">
<div class="date_thumb">
<div class="month">Mar</div>
<div class="day">6</div>
</div>
<div class="ecs-thumbnail"><img width="75" height="75" src="https://dev.musikzentrum-hannover.de/wp-content/uploads/2019/12/01-03-hannover-schulparty-1-200x200.jpg" class="attachment-75x75 size-75x75 wp-post-image" alt=""></div>
<div class="summary">Hannover Schulparty – abgesagt!</div>
<div class="ecs-button">Mehr erfahren</div>
</div>
<div class="ecs-event maerz_ecs_category">
<div class="date_thumb">
<div class="month">Mar</div>
<div class="day">7</div>
</div>
<div class="ecs-thumbnail"><img width="75" height="75" src="https://dev.musikzentrum-hannover.de/wp-content/uploads/2019/10/001-200x200.jpg" class="attachment-75x75 size-75x75 wp-post-image" alt=""></div>
<div class="summary">Eno und Sero el Mero – abgesagt</div>
<div class="ecs-button">Mehr erfahren</div>
</div>
</div>
i have a main div under which i have three different div, each sub div contain image and text. i want to zoom image of that particular sub div to scale(1.1) whenever i hover on a that sub div. for now when i hover on any sub div all the three images of all sub div are scaled.
html for my code is
<html>
<div class="main">
<div class="sub-div">
<img class="img" src="...">
<p>abc</p>
</div>
<div class="sub-div">
<img class="img" src="...">
<p>xyz</p>
</div>
<div class="sub-div">
<img class="img" src="...">
<p>abz</p>
</div>
</div>
and jquery is
$(".sub-div").each(function(){
$(this).hover(function(){
$('.img').css('transform','scale(1.1)');
},function(){
$('.img').css('transform','scale(1.0)');
});
});
If you absolutely have to use Javascript, use the selector this :
$(".sub-div").hover(function(){
$('.img',this).css('transform','scale(1.1)');
},function(){
$('.img',this).css('transform','scale(1.0)');
});
But you can do the same with CSS :
.sub-div:hover .img{
transform: scale(1.1);
}
Working JSFiddle here : https://jsfiddle.net/26zdf038/
Why jquery? .simply do with css :hover
.sub-div img{
transition:all 0.2s ease-in;
transform:scale(1.0);
width:100px;
height:100px;
}
.sub-div:hover img{
transform:scale(1.1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<div class="main">
<div class="sub-div">
<img class="img" src="https://www.w3schools.com/html/pic_mountain.jpg">
<p>abc</p>
</div>
<div class="sub-div">
<img class="img" src="https://www.w3schools.com/html/pic_mountain.jpg">
<p>xyz</p>
</div>
<div class="sub-div">
<img class="img" src="https://www.w3schools.com/html/pic_mountain.jpg">
<p>abz</p>
</div>
</div>
Try this It will help you,
div:hover .picture{
transform: scale(1.1);
}
<div>
<img class="picture" src="https://www.vetsure.com/wp-content/uploads/2014/02/puppies.jpg">
</div>
<div >
<img class="picture" src="https://www.vetsure.com/wp-content/uploads/2014/02/puppies.jpg">
</div>
<div>
<img class="picture" src="https://www.vetsure.com/wp-content/uploads/2014/02/puppies.jpg">
</div>
You don't need to loop with each. Just assign a hover event for .sub-div
Use $(this) to refer to the current object you interact with and find img inside of it.
$(".sub-div").hover(function(){
$(this).find('.img').css('transform','scale(1.1)');
},function(){
$(this).find('.img').css('transform','scale(1.0)');
});
.sub-div {
float: left;
width: 33%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<div class="main">
<div class="sub-div">
<img class="img" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded">
<p>abc</p>
</div>
<div class="sub-div">
<img class="img" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded">
<p>xyz</p>
</div>
<div class="sub-div">
<img class="img" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded">
<p>abz</p>
</div>
</div>
The problem is your selector for the image selects all the images, while you have to select only the child one:
$(".sub-div").each(function() {
$(this).hover(function() {
$(this).find('.img').css('transform', 'scale(1.1)');
}, function() {
$(this).find('.img').css('transform', 'scale(1.0)');
});
});
However in that case I would recommend you to use CSS because of performance:
.sub-div img { transition: 0.3s ease }
.sub-div:hover img { transfrom: scale(1.1) }
I am sort of new to JS, and I'm having trouble getting my code to work exactly how I want it to.
(See JSFiddle https://jsfiddle.net/ey02227z/3/)
I have 3 images, and would like to be able to click on an image and have it show a hidden div, and then when the next image is clicked, I want it to hide the first div and show the next one.
(Click Image 1 to see HiddenContent1, Click Image2, it hides HiddenContent1 and shows HiddenContent2, etc.)
Here is My Code:
(I didn't include any JS because honestly, I don't know where to start.)
Thank you in advance!
#ImgContainer{
text-align:center;
}
.Hidden{
display:none;
}
.image:hover{
border: 1px solid purple;
}
#HiddenContentContainer{
text-align: center;
min-height:50px;
min-width:100%;
border: 1px solid teal;
}
<div id="MainContainer">
<div id="ImgContainer">
<img id="image1" class="image" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+1';" onmouseout="this.src='http://placehold.it/150';" />
<img id="image2" class="image" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+2';" onmouseout="this.src='http://placehold.it/150';" />
<img id="image3" class="image" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+3';" onmouseout="this.src='http://placehold.it/150';" />
</div>
<div id="HiddenContentContainer">
<h3>HIDDEN CONTENT SHOULD APPEAR HERE</h3>
<div id="Hidden1" class="Hidden">This is My Hidden Content for Image 1</div>
<div id="Hidden2" class="Hidden">This is My Hidden Content for Image 2</div>
<div id="Hidden3" class="Hidden">This is My Hidden Content for Image 3</div>
</div>
</div>
This may solve your problem.
Try It
HTML
<div id="MainContainer">
<div id="ImgContainer">
<img id="image1" class="image" data-target="#Hidden1" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+1';" onmouseout="this.src='http://placehold.it/150';" />
<img id="image2" class="image" data-target="#Hidden2" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+2';" onmouseout="this.src='http://placehold.it/150';" />
<img id="image3" class="image" data-target="#Hidden3" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+3';" onmouseout="this.src='http://placehold.it/150';" />
</div>
<div id="HiddenContentContainer">
<h3>HIDDEN CONTENT SHOULD APPEAR HERE</h3>
<div id="Hidden1" class="Hidden">This is My Hidden Content for Image 1</div>
<div id="Hidden2" class="Hidden">This is My Hidden Content for Image 2</div>
<div id="Hidden3" class="Hidden">This is My Hidden Content for Image 3</div>
</div>
JS:
//Normal hide-show
$(".image").click(function(){
$(".Hidden").hide();
$($(this).attr("data-target")).show();
});
//For Toggle same code
$(".image").click(function(){
$(".Hidden").hide();
if(!$($(this).attr("data-target")).hasClass("current")){
$($(this).attr("data-target")).show().addClass("current");
}
else{
$($(this).attr("data-target")).removeClass("current");
}
});
Here's a starting point:
// listen to clicks from any of the links
$( '#ImgContainer a' ).on( 'click', function( e ) {
e.preventDefault(); // not necessary in this case but good practice
var link = $( this ); // the link that was clicked
var index = link.index(); // its index position
$( '#HiddenContentContainer div' ).addClass( 'Hidden' ); // reset all to hidden
$( '#Hidden' + ( index + 1 ) ).removeClass( 'Hidden' ); // remove the hidden associated with this clicked link
});
Included comments to help you better understand what each line does.
I have a bit of an issue.
I have a grid of images (3x3), and have a function to swap the image, and show a "content" panel.
While the 1st 2 rows appear to show the content area properly, the bottom row goes in and out and in and out and in and out, etc...
What is causing this behavior, and how can I fix it?
Fiddle
http://jsfiddle.net/o7thwd/4s9GT/
Please excuse the hover image... seems jsfiddle doesn't like it or something... but rest assured that in the site, it works..
Code - jQuery 1.7
// panel grid image swapper
$('.panel img').mouseover(function() {
var $this = $(this);
var src = $this.attr("src").match(/[^\.]+/) + "-hover.png";
$this.attr("src", src);
// Show data panel
$('.' + $this.attr('data-panel')).show('fast');
}).mouseout(function() {
var $this = $(this);
var src = $this.attr("src").replace("-hover.png", ".png");
$this.attr("src", src);
// Hide data panel
$('.' + $this.attr('data-panel')).hide('fast');
});
HTML
<div class="panel-3-image-grid">
<div class="panel1 panel">
<img src="/core/images-tmp/panel-images/panel-3/image1.png" alt="" data-panel="panelGrid-1-content" />
<div class="panelGrid-content panelGrid-1-content">Panel 1</div>
</div>
<div class="panel2 panel">
<img src="/core/images-tmp/panel-images/panel-3/image2.png" alt="" data-panel="panelGrid-2-content" />
<div class="panelGrid-content panelGrid-2-content">Panel 2</div>
</div>
<div class="panel3 panel">
<img src="/core/images-tmp/panel-images/panel-3/image3.png" alt="" data-panel="panelGrid-3-content" />
<div class="panelGrid-content panelGrid-3-content">Panel 3</div>
</div>
<div class="panel4 panel">
<img src="/core/images-tmp/panel-images/panel-3/image4.png" alt="" data-panel="panelGrid-4-content" />
<div class="panelGrid-content panelGrid-4-content">Panel 4</div>
</div>
<div class="panel5 panel">
<img src="/core/images-tmp/panel-images/panel-3/image5.png" alt="" data-panel="panelGrid-5-content" />
<div class="panelGrid-content panelGrid-5-content">Panel 5</div>
</div>
<div class="panel6 panel">
<img src="/core/images-tmp/panel-images/panel-3/image6.png" alt="" data-panel="panelGrid-6-content" />
<div class="panelGrid-content panelGrid-6-content">Panel 6</div>
</div>
<div class="panel7 panel">
<img src="/core/images-tmp/panel-images/panel-3/image7.png" alt="" data-panel="panelGrid-7-content" />
<div class="panelGrid-content panelGrid-7-content">Panel 7</div>
</div>
<div class="panel8 panel">
<img src="/core/images-tmp/panel-images/panel-3/image8.png" alt="" data-panel="panelGrid-8-content" />
<div class="panelGrid-content panelGrid-8-content">Panel 8</div>
</div>
<div class="panel9 panel">
<img src="/core/images-tmp/panel-images/panel-3/image9.png" alt="" data-panel="panelGrid-9-content" />
<div class="panelGrid-content panelGrid-9-content">Panel 9</div>
</div>
</div>
CSS
.panel-3{height:515px;width:990px;margin:0 auto;clear:both;position:relative;z-index:1;}
.panel-3-content{width:480px;float:left;padding-top:160px;}
.panel-3-image-grid{width:475px;float:left;padding-top:20px;}
.panel-3-image-grid div.panel{width:154px;height:154px;float:left;margin-right:3px;margin-bottom:3px;}
.panel-3-image-grid div.panel:hover, .panel-3-image-grid div.panel:active, .panel-3-image-grid div.panel.active{
}
.panel-3-image-grid div.panel:last-child{margin-right:0;}
.panelGrid-content{display:none;position:absolute;width:154px;height:310px;background:#c8deed;}
.panelGrid-1-content, .panelGrid-2-content, .panelGrid-3-content{margin-top:3px;}
.panelGrid-4-content, .panelGrid-5-content{margin:-154px 0 0 157px;}
.panelGrid-6-content{margin:-154px 0 0 -157px;}
.panelGrid-7-content, .panelGrid-8-content, .panelGrid-9-content{margin-top:-314px;}
This is caused by the data panel growing until it is beneath the mouse pointer, which triggers a mouseout on the panel image, which causes the data panel to shrink until it's no longer beneath the pointer, which triggers the mouseenter on the panel image again...
The content panel gets shown on top of the image. If you look at the other rows, it is placed next to or under the image.
Because the content panel is in front of the image, the mouseover event is no longer getting fired for the image (because the mouse is now over the content panel). This is causing it to hide the content panel, which means the mouse is over the image again and a loop is formed.
To break this loop, you either need to attach the mouseover event to the .panel elements (because the mouseover event is going to bubble up there if its over either the image or the content panel) or make sure the content panel is never on top of the image.