Develop Reference

scroll to next div by js

I know there are lots of same examples, but their code don't work. Please Help! So I have arrow Image at the bottom of container block. The content of container are flex( if it is important to know?!) And when i click on arrow, it should move down by next container.
$("#arrow").click(function() {
var $target = $('.container.active').next('.container');
if ($target.length == 0)
$target = $('.container:first');
$('html, body').animate({
scrollTop: $target.offset().top
}, 'slow');
$('.active').removeClass('active');
$target.addClass('active');
});
.container {
height: 100%;
margin: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container first active" id="first">
///not important content
<button class="next">
<img src="arrow.png" id="arrow" alt="down">click
</button>
</div>
<div class="container second" id="second">
<div class="arrow">
<img src="arrowup.png" alt="up">
</div>
<div class="arrow">
<img src="arrow.png" alt="arrow">
</div>
</div>

You can simply use anchor tag and pass id of div you want to focus. Below is an example for that.
.container {
height: 100%;
margin: 0px;
}
.second, .first{
border : 1px solid black;
height : 500px;
width:100%
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container first active" id="first">
<!-- not important content -->
<a href="#second">
<img src="arrow.png" id="arrow" alt="down">click
</a>
</div>
<div class="container second" id="second">
<a class="arrow" href="#first">
<img src="arrowup.png" alt="up">
</a>
<div class="arrow">
<img src="arrow.png" alt="arrow">
</div>
</div>

https://jsfiddle.net/w7duthsa/ Try this. U should be careful where arrow event fires. It is in icon. u have to click to icon to run. Button doesn't down.
$("#arrow").on("click", function(e) {
$(document).scrollTop($(this).parent().parent().next().offset().top);
return false; // prevent anchor
});
If u want to give up down to button then give arrow id to button and use function below https://jsfiddle.net/w7duthsa/1/
$("#arrow").on("click", function(e) {
$(document).scrollTop($(this).parent().next().offset().top);
return false; // prevent anchor
});

Replace the main image with thumbnails in Javascript

Here my script :
function changeImage(event){
event = event || window.event;
var targetElement = event.target || event.srcElement;
if (targetElement.tagName == "IMG"){
document.getElementByClass("img-big-wrap").src = targetElement.getAttribute("src");
document.getElementById("mainimageLink").href = 'link'+targetElement.getAttribute("data-link")+'.html';
}
}
Inspired of this Answer : Javascript Gallery - Main Image href change
My HTML :
<div class="gallery-wrap">
<div class="img-big-wrap">
<a id="mainimagelink" href="<?php echo $data[0][gallery][0][photo];?>">
<img class="img-big-wrap" src="<?php echo $data[0][gallery][0][photo];?>" alt="">
</div>
<div class="img-small-wrap" onclick="changeImage(event)">
<div class="item-gallery"> <img src="<?php echo $data[0][gallery][1][thumb];?>" data-link="1"> </div>
<div class="item-gallery"> <img src="<?php echo $data[0][gallery][2][thumb];?>" data-link="2"> </div>
<div class="item-gallery"> <img src="<?php echo $data[0][gallery][3][thumb];?>" data-link="3"> </div>
<div class="item-gallery"> <img src="<?php echo $data[0][gallery][4][thumb];?>" data-link="4"> </div>
</div>
</div>
The code is actualy just open me the link of the main image only
I want to change the main image with the thumbnails when I click On, I dont know if what i'm doing is the good solution

Working Plunk: http://plnkr.co/edit/pjpHBUD4yPihqr7lJKAD?p=preview
<div class="gallery-wrap">
<div>
<a id="mainimagelink" href="https://blog.conservation.org/wp-content/uploads/2014/06/ci_19290600_cropped.jpg">
<img class="img-big-wrap" src="https://blog.conservation.org/wp-content/uploads/2014/06/ci_19290600_cropped.jpg?>" alt="">
</a>
<hr/>
</div>
<div class="img-small-wrap" ">
<div class="item-gallery " onclick="changeImage(event) "> <img src="https://s5.favim.com/610/52/Favim.com-winter-nature-small-canon-eos-7d-474348.jpg " data-link="1 "> </div>
<div class="item-gallery " onclick="changeImage(event) "> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfAMUZQLGObfUBSLgnPj5b5C7Ww2DNMtKbwkuTbglK-p1La17BnA " data-link="2 "> </div>
</div>
</div>
A couple of things you've missed.
The HTML DOM was not well constructed. The tag with id mainimagelink was left unclosed, leading to opening of the main image everytime you clicked on any image.
Not sure of your use case but I believe you were trying to create a thumbnail gallery with a preview. Added Image URLs and CSS to simulate the API response.
'img-big-wrap' class was used for the image container and the actual Image itself, which would lead to errors when you try to locate your element with js.
document.getElementByClass is not the right name for the method. I believe you were going for 'document.getElementsByClassName' which returns an array as multiple elements can have the same className.
Refer to querySelector (most useful of them all):
https://www.w3schools.com/jsref/met_document_queryselector.asp
All the best!

First of all, you have used the same class more than once and tried to access it img-big-wrap.
There is also no accessor called getElementByClass instead use
getElementsByClassName which is an array since you can have multiple divs with the same class.
Typo here "mainimageLink" which you called your div with id="mainimagelink", case matters.
I have moved onclick into JS using addEventListener which saves me passing parameters from the div.
Add an id into your thumbnail parent div myImgDiv and used it to hook an Event Listener to it.
Here is what the code looks like (Not many changes were made):
let smallImgDiv = document.getElementById('myImgDiv');
smallImgDiv.addEventListener('click', (e) => {
let targetElement = e.target || e.srcElement;
let tagName = targetElement.tagName;
if(tagName === "IMG") {
document.getElementById('bigImage').src = targetElement.getAttribute("src");
document.getElementById("mainimagelink").href = 'link' + targetElement.getAttribute("data-link") + '.html';
}
});
.img-small-wrap img{
width: 150px;
height: 150px;
}
.img-big-wrap {
height: 200px;
}
<div class="gallery-wrap">
<div class="img-big-wrap">
<a id="mainimagelink" href="#">
<img id="bigImage" class="img-big-wrap" src="http://via.placeholder.com/300.png" alt="">
</a>
</div>
<div id="myImgDiv" class="img-small-wrap">
<div class="item-gallery"> <img src="https://getuikit.com/v2/docs/images/placeholder_200x100.svg" data-link="1"> </div>
<div class="item-gallery"> <img src="https://cdn.dribbble.com/users/312581/screenshots/1676038/female-placeholder_1x.png" data-link="2"> </div>
<div class="item-gallery"> <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/1134418-200.png" data-link="3"> </div>
<div class="item-gallery"> <img src="https://source.sierrawireless.com/~/media/developer%20zone/icons/sw_dz_icons_placeholder.ashx?h=240&la=en&w=240" data-link="4"> </div>
</div>

jquery hide element if href is equal to

I recently made a jquery code that should hides an element if it's href is equal to another element's but i can't be able to make it work...
jsfiddle
HTML
<div class="a">
<a href="1">
<img scr="a">
</a>
</div>
<div class="thumb">
<a href="1">
<img scr="a">
</a>
</div>
<div class="thumb b">
<a href="2">
<img scr="b">
</a>
</div>
CSS
.a{width:400px;height:100px;background-color:black;}
.thumb{width:400px;height:100px;background-color:green;}
.b{background-color:yellow;}
JQUERY
var mainhref = $(".a a").attr('href');
if($("a", this).attr('href') == mainhref ) {
$(".a").hide();
}
else {
$(".a").show
}

Using plain javascript :D
let ar = document.getElementsByTagName('a'),
holdarray = [];
Array.from(ar, elem => {
if(holdarray.includes(elem.getAttribute('href')))
elem.parentNode.style.display = 'none'
else
holdarray.push(elem.getAttribute('href'))
})
.a { width:400px;height:100px;background-color:black; }
.thumb { width:400px;height:100px;background-color:green; }
.b { background-color:yellow; }
<div class="a" >
</div>
<div class="thumb">
</div>
<div class="thumb b">
</div>

You can try like this, only check for thumb class then it will hide specific div which contain same href
var mainhref = $(".a a").attr('href');
$('.thumb a').each(function(){
if($(this).attr('href') == mainhref)
{
$(this).parents('.thumb').hide();
}
});

Just select by that href (and parent not containing the base div's class 'a') and hide it
$('a[href="'+mainhref+'"]').parent(":not(.a)").hide();
var mainhref = $(".a a").attr('href');
var parentDiv = $('a[href="'+mainhref+'"]').parent(":not(.a)").hide();
.a{width:400px;height:100px;background-color:black;}
.thumb{width:400px;height:100px;background-color:green;}
.b{background-color:yellow;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a" >
<a href="1">
<img scr="a">
</a>
</div>
<div class="thumb">
<a href="1">
<img scr="a">
</a>
</div>
<div class="thumb b">
<a href="2">
<img scr="b">
</a>
</div>

Try something like this with Jquery.
Loop on each a and store the href. Select all <a> but first with same href and hide the parent
$("a").each(function(){
var href= $(this).attr("href");
$("a[href='"+href+"']").not(":first").parent().hide();
});
.a{width:400px;height:100px;background-color:black;}
.thumb{width:400px;height:100px;background-color:green;}
.b{background-color:yellow;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
<a href="1">
<img scr="a">
</a>
</div>
<div class="thumb">
<a href="1">
<img scr="a">
</a>
</div>
<div class="thumb b">
<a href="2">
<img scr="b">
</a>
</div>

You should loop through all elements.
$('a').each(function(){
if($(this).attr('href') == mainhref){
$(this).hide();
}
});

$('a').each(function(){
if($(this).attr('href') == mainhref){
$(this).hide();
}
});

Here's a trick, using the radio:checked.
$($("a").toArray().reverse()).each(function(index, el){
var href = $(el).attr('href');
$(el).parent().before('<input type="radio" name="' + href + '" class="hidden" checked />');
})
The reason that I use reverse is that I want the first a tag to remain showing. If you want the last a tag to remain, you can just use $('a') instead of $($("a").toArray().reverse())
css:
.hidden { display:none };
input[type=radio]+ div a { display: none };
input[type=radio]:checked + div a { display: block };
With this trick, you can make all the a tag with a unique href. Hope it can help you.

JavaScript: how can I, on click, change the text of my item?

I'm learning the JavaScript language and I'd like to reproduce something. I have a text called "Pause" and I'd like that, on click, another text replaces it with "Play".
Here's my JavaScript code:
(function($) {
$('#slideshow-pause-icon').click(function(e) {
e.preventDefault();
$('#slideshow, #slider, figcaption, #timeline').toggleClass('slideshow-pause');
});
})(jQuery);
Here's my HTML code:
<div id="slideshow">
<span id="slideshow-pause-icon" title="Click to pause">Pause</span>
<div id="slideshow-container">
<div id="slider">
<figure>
<a href="style-1.php">
<img src="images/image-1.jpg" alt="">
<figcaption>Style 1</figcaption>
</a>
</figure>
<figure>
<a href="style-2.php">
<img src="images/image-2.jpg" alt="">
<figcaption>Style 2</figcaption>
</a>
</figure>
<figure>
<a href="style-3.php">
<img src="images/image-3.jpg" alt="">
<figcaption>Style 3</figcaption>
</a>
</figure>
<figure>
<a href="style-4.php">
<img src="images/image-4.jpg" alt="">
<figcaption>Style 4</figcaption>
</a>
</figure>
</div>
<span id="timeline"></span>
</div>
</div>
Currently, when I click on the "Pause" text: http://i.stack.imgur.com/UYg7h.png
the slideshow-pause class is displayed and it has this CSS:
.slideshow-pause
{
animation-play-state: paused !important;
-webkit-animation-play-state: paused !important;
-moz-animation-play-state: paused !important;
-o-animation-play-state: paused !important;
}
Using JavaScript, I'd like that by clicking on the "Pause" text, my span ID slideshow-pause-iconis replaced by something like this:
<span id="slideshow-play-icon" title="Click to play">Play</span>
Thanks.

$(document).on("click", "#slideshow-pause-icon, #slideshow-play-icon", function(){
$(this).html()=="Play"?$(this).html("Pause"):$(this).html("Play");
this.id= (this.id=="slideshow-pause-icon"?"slideshow-play-icon":"slideshow-pause-icon");
this.title = (this.title=="Click to pause"?"Click to play":"Click to pause");
$("#slideshow, #slider, figcaption, #timeline").toggleClass("slideshow-pause");
});
This is gonna work for you.

With JQuery is quite easy:
$("#slideshow-play-icon").text("Pause");

You could do something like this. Just check if it has the class you're using to drive the text. It looks like this is playing an image gallery?
$('#slideshow-pause-icon').click(function()
{
var $this = $(this);
if($this.hasClass('slideshow-pause'))
{
$this.removeClass('slideshow-pause').text('Play');
//do something else to play the image gallery
}
else
{
$this.addClass('slideshow-pause').text('Pause');
//do something else to pause the image gallery
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="slideshow">
<span id="slideshow-pause-icon" class='slideshow-pause' title="Click to pause">Pause</span>
</div>

Change images "src" on hover, inside a div [duplicate]

This question already has answers here:
Change the image source on rollover using jQuery
(14 answers)
Closed 8 years ago.
I am very new to javascript and jquery so I could use some help.
How can I change the image src when I hover every image? For example when I hover the facebook-icon it changes, when I hover google+ image/icon it changes to another image that i have etc.
<div class="social-icons wrapper-social">
<a href="#" target="_blank">
<img id="facebook" src="images/Facebook.png" />
</a>
<a href="#" target="_blank">
<img id="google" src="images/Google+.png" />
</a>
<a href="#" target="_blank">
<img id="twitter" src="images/Tweeter.png" />
</a>
<a href="#" target="_blank">
<img id="pinterest" src="images/Pinterest.png" />
</a>
</div>
Thanks in advance!

$(document).ready(function() {
$("#facebook").hover(function() {
$(this).attr("src","new src");
});
});
If you want to retain previous image then use below code
var old_src="";
$(document).ready(function() {
$("#facebook").mouseover(function() {
old_src = $(this).attr("src");
$(this).attr("src","new src");
}).mouseout(function() {
$(this).attr("src",old_src);
});
})

Here is the updated and working code.
HTML Part-
<div class="social-icons wrapper-social">
<a href="#" target="_blank">
<img class="imgRes" id="facebook" src="images/Facebook.png" />
</a>
<a href="#" target="_blank">
<img class="imgRes" id="google" src="images/Google+.png" />
</a>
<a href="#" target="_blank">
<img class="imgRes" id="twitter" src="images/Tweeter.png" />
</a>
<a href="#" target="_blank">
<img class="imgRes" id="pinterest" src="images/Pinterest.png" />
</a>
</div>
JavaScript Part-
function handleImageHover(e) {
if(e.target.id == "facebook") {
e.target.src = "/images/newFacebookImage.png";
}
if(e.target.id == "google") {
e.target.src = "/images/newGoogleImage.png";
}
if(e.target.id == "twitter") {
e.target.src = "/images/newTwitterImage.png";
}
if(e.target.id == "pinterest") {
e.target.src = "/images/newPinterestImage.png";
}
}
var imagesArray = document.getElementsByClassName("imgRes");
for (img = 0; img < imagesArray.length; img++) {
imagesArray[img].addEventListener("mouseover", handleImageHover, false);
}

Just following up on WisdmLabs answer.
Here is the DEMO
Here is the jQuery
$(document).ready(function(){
$("#facebook").hover(function(){
$(this).attr("src","New src");
},function(){
$(this).attr("src","Original src");
});
});
Here is a solution created using CSS sprites which NATH was talking about. It will reduce the load on the sever as the CSS sprite will be loaded only once and then it can be used any number of times for your hover effects.
CSS Sprite DEMO

There is no need of JavaScript/Jquery for this, this can be achieved by pure css.
CSS
<style type="text/css">
.social-icons a{
width: 35px;
height: 35px;
display: inline-block;
}
.facebookIcon {
background-image:url('images/Facebook.png');
}
.facebookIcon:hover {
background-image:url('images/FacebookHover.png');
}
.googleIcon {
background-image:url('images/Google+.png');
}
.googleIcon:hover {
background-image:url('images/GoogleHover.png');
}
.twitterIcon {
background-image:url('images/Tweeter.png');
}
.twitterIcon:hover {
background-image:url('images/TweeterHover.png');
}
.pinIcon {
background-image:url('images/Pinterest.png');
}
.pinIcon:hover {
background-image:url('images/PinterestHover.png');
}
</style>
HTML
<div class="social-icons wrapper-social">
<a href="#" target="_blank" class="facebookIcon">
</a>
<a href="#" target="_blank" class="googleIcon">
</a>
<a href="#" target="_blank" class="twitterIcon">
</a>
<a href="#" target="_blank" class="pinIcon">
</a>
</div>