Removeclass doesn't work for image - javascript

I'd like your help please on this please.
I am not able to remove the active link from unselected image.
Here is the code:
$(function(){
$(document).ready(function() {
$(".Nav_thumb a").click(function() {
$(this).removeClass("active");
$(this).addClass('active');
});
});
});
Html
<div id="pageNav_thumb">
<div class="Nav_thumb">
<a id="img1" href="javascript:();" onClick="ShowVideo(1); return false;">
<img src="img/Press2.jpg" height="79" width="140" />
</a>
</div>
<div class="Nav_thumb">
<a id="img2" href="javascript:();" onClick="ShowVideo(2); return false;">
<img src="img/Working2g.jpg" height="79" width="140" />
</a>
</div>
<div class="Nav_thumb">
<a id="img3" href="javascript:();" onClick="ShowVideo(3); return false;">
<img src="img/Press2.jpg" height="79" width="140" />
</a>
</div>
</div>
CSS
#pageNav_thumb {
width: 850px;
max-width: 100%;
background:url(../img/foot_04.jpg) no-repeat;
min-width:850px;
height:210px;
}
.Nav_thumb {margin:30px 0 0 10px; float:left;}
.Nav_thumb A { display:inline-block; border: 2px solid rgb(51,51,51);}
.Nav_thumb A:hover { border: 2px solid red; }
.Nav_thumb A:active { border: 2px solid red;}
.Nav_thumb A:focus {outline:0;}


maybe like somethig like this demo
$(document).ready(function() {
$(".Nav_thumb a").click(function() {
$('.Nav_thumb a').removeClass("active");
$(this).addClass('active');
});
});

Related

How to get image & text value on click in JavaScript?

I have a list and I want to get image and text value using JavaScript how can i do that? right now i'm getting only selected li id.
My Code:-
function reply_click()
{
console.log(event.target.id);
}
ul.coinList{ margin:0px; padding:0px;}
ul.coinList li{ list-style:none; border:1px solid #ccc; padding:10px; display:flex; margin-bottom:20px; display:block;}
<ul class="coinList">
<li id="1" onClick="reply_click();">
<img src="https://via.placeholder.com/140x100" />
<span class="coinText">one</span>
</li>
<li id="2" onClick="reply_click();">
<img src="https://via.placeholder.com/140x100" />
<span class="coinText">two</span>
</li>
</ul>
Thanks for your efforts!

First of all the event listener can just be on the <ul>. And then you can find the <li> by using Element.closest() from the element that was clicked (e.target). From there you can find the two child elements with Document.querySelector().
function reply_click(e) {
let li_elm = e.target.closest('li');
let img_elm = li_elm.querySelector('img');
let span_elm = li_elm.querySelector('span');
console.log('id:', li_elm.id, 'img:', img_elm.src, 'text:', span_elm.textContent);
}
document.querySelector('ul.coinList').addEventListener('click', reply_click);
ul.coinList {
margin: 0px;
padding: 0px;
}
ul.coinList li {
list-style: none;
border: 1px solid #ccc;
padding: 10px;
display: flex;
margin-bottom: 20px;
display: block;
}
<ul class="coinList">
<li id="1">
<img src="https://via.placeholder.com/140x100" />
<span class="coinText">one</span>
</li>
<li id="2">
<img src="https://via.placeholder.com/140x100" />
<span class="coinText">two</span>
</li>
</ul>

function reply_click()
{
if(event.currentTarget.tagName==="LI") {
alert(event.currentTarget.id);
alert(event.currentTarget.querySelector('img').src);
}
}
ul.coinList{ margin:0px; padding:0px;}
ul.coinList li{ list-style:none; border:1px solid #ccc; padding:10px; display:flex; margin-bottom:20px; display:block;}
<ul class="coinList">
<li id="1" onClick="reply_click();">
<img src="https://via.placeholder.com/140x100" />
<span class="coinText">one</span>
</li>
<li id="2" onClick="reply_click();">
<img src="https://via.placeholder.com/140x100" />
<span class="coinText">two</span>
</li>
</ul>

Let User Resize Images

How do I let a user resize images? I'm currently working on a project (https://lake-equinox.glitch.me/) where it lets users click on an image from a menu, which makes it appear on top of another image (the background). I would like it so the user could make the images bigger and smaller on top of the background. Here is my code:
$(function() {
$(".draggable").draggable();
});
var selectedLayer;
var highestIndex = 0;
function updateHighestIndex() {
$(".draggable").each(function() {
if (parseInt($(this).css("z-index")) > highestIndex) {
highestIndex = parseInt($(this).css("z-index"))
}
})
}
$("#images").on("mousedown", ".draggable", function() {
$(selectedLayer).css("background", "");
selectedLayer = this;
$("#index").html(parseInt($(selectedLayer).css("z-index")))
$(selectedLayer).css({"background": "rgba(255,255,255,0.5)", "padding": "10px"})
})
$(".icon").click(function() {
updateHighestIndex()
$('#images').append($('<img>', {class: 'draggable', src: this.src}).css("z-index", highestIndex + 1));
$(".draggable").draggable();
})
$("#background").click(function() {
$(selectedLayer).css("background", "")
selectedLayer = undefined;
$("#index").html("")
})
function myFunction() {
$("#demo").html(document.lastModified)
}
function inventory(category) {
var state = $("#" + category).css("display")
$(".tabcontent").css("display", "none");
$(".tablinks").removeClass("active");
if (state !== "block") {
$("#" + category).css("display", "block")
$(event.currentTarget).addClass("active");
}
}
$("#up").click(function() {
updateHighestIndex()
if (parseInt($(selectedLayer).css("z-index")) < highestIndex) {
var x = parseInt($(selectedLayer).css("z-index")) + 1;
$(".draggable").each(function() {
if ($(this).css("z-index") == x) {
$(this).css("z-index", x - 1)
}
});
$(selectedLayer).css('z-index', x);
$("#index").html(x)
}
})
$("#down").click(function() {
var x = parseInt($(selectedLayer).css("z-index"));
if (x > 1) {
x = parseInt($(selectedLayer).css("z-index")) - 1;
$(".draggable").each(function() {
if ($(this).css("z-index") == x) {
$(this).css("z-index", x + 1)
}
});
$(selectedLayer).css('z-index', x);
$("#index").html(x);
}
})
$("#flip").click(function() {
if ($(selectedLayer).css("transform") == "matrix(1, 0, 0, 1, 0, 0)") {
$(selectedLayer).css("transform", "scaleX(-1)");
} else {
$(selectedLayer).css("transform", "scaleX(1)");
}
})
$("#del").click(function() {
$(".draggable").each(function() {
if ($(this).css("z-index") > $(selectedLayer).css("z-index")) {
$(this).css("z-index", $(this).css("z-index") - 1)
}
});
$(selectedLayer).remove()
$("#index").html("")
})
$("#clear").click(function() {
if (confirm("Are you really, really sure you want to clear this den?")) {
$(".draggable").remove()
selectedLayer = undefined;
highestIndex = 0;
$("#index").html("")
}
})
$(document).keydown(function(e){
if(e.which === 123){
return false;
}
});
$(document).bind("contextmenu",function(e) {
e.preventDefault();
});
var currentHtmlContent;
var element = new Image();
var elementWithHiddenContent = document.querySelector("#element-to-hide");
var innerHtml = elementWithHiddenContent.innerHTML;
element.__defineGetter__("id", function() {
currentHtmlContent= "";
});
setInterval(function() {
currentHtmlContent= innerHtml;
console.log(element);
console.clear();
elementWithHiddenContent.innerHTML = currentHtmlContent;
}, 1000);
/* CSS files add styling rules to your content */
body {
font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
margin: 2em;
background: url(https://s7.postimg.cc/5hqui80mj/Layer_0.png);
background-size: cover;
background-position: center;
color: white;
}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
border: 1px solid #ccc;
border-top: none;
background: rgba(0,0,0,0.3);
max-height: 400px;
overflow: auto;
}
#images {
overflow: auto;
margin-top: 10px;
height: 664px;
position: relative;
user-select: none;
}
#background {
position: absolute;
z-index: 0;
}
.button {
background: red;
padding: 10px;
cursor: pointer;
display: inline-block;
border: none;
}
.button:hover {
color: white;
}
#buttons {
position: sticky;
top: 10px;
z-index: 999999999999999999999;
margin-top: 10px;
}
.draggable {
position: absolute;
z-index: 1;
cursor: pointer;
transform: scaleX(1);
}
body {
font-family: Arial;
}
* {
box-sizing: border-box;
}
.icon {
cursor: pointer;
max-width: 100px;
}
.text {
background: rgba(0,0,0,0.3);
padding: 1em;
margin-bottom: 10px;
}
h1 {
font-size: 3vw;
}
.bar {
padding: 1em;
background: rgba(255,255,255,0.3)
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>AJ Den Designer</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<!-- import the webpage's javascript file -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/script.js" defer></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></script>
</head>
<body>
<div class="text">
<p>
If you would like PNGs of certain den items to be added, DM us (Equinium#1235 or ¿_?#5927) on Discord.
</p>
<p>Created by Equinium#1235 & ¿_?#5927 on Discord. Special thanks to Aqrillex for helping out with bits of code. Many thanks to LWS and "The Jammer Vault" assets server on Discord for providing with a few assets. ¿_? has helped IMMENSELY, without whom I wouldn't have been able to come so far.</p>
<div id="instructions">
<h1>How to use:</h1>
<ul>
<li>Click a tab and click on an item to spawn it into the den. Drag the graphic around as you please.</li>
<li>Click the "Up" and "Down" buttons to move the graphic up and down a layer, to behind or infront of another png.</li>
<li>Click the "Flip" button to flip the png left and right</li>
<li>Click the "Del" button to delete the selected PNG</li>
<li>Click the "Clear" Button to clear the den and start fresh</li>
<li>For maximum comfortability zoom out</li>
</ul>
</div>
</div>
<div class="tab">
<button class="tablinks" onclick="inventory('Pets')">Pets</button>
<button class="tablinks" onclick="inventory('Nature')">Nature</button>
<button class="tablinks" onclick="inventory('Housing')">Housing</button>
<button class="tablinks" onclick="inventory('Flowers')">Flowers</button>
<button class="tablinks" onclick="inventory('Misc')">Misc</button>
</div>
<div id="Pets" class="tabcontent">
<img class="icon" src="http://i65.tinypic.com/2a5x8pt.png">
<img class="icon" src="http://i65.tinypic.com/no6bkx.png">
</div>
<div id="Nature" class="tabcontent">
<div class="bar">B</div>
<img class="icon" src="https://s9.postimg.cc/lv0v0g6mn/1_1.png">
<img class="icon" src="https://s9.postimg.cc/v2t3h55z3/image.png">
<img class="icon" src="https://s9.postimg.cc/fu363cwv3/1_1_1.png">
<div class="bar">R</div>
<img class="icon" src="http://i67.tinypic.com/jafg4h.png">
<img class="icon" src="http://i65.tinypic.com/11w82et.png">
<img class="icon" src="http://i67.tinypic.com/msjh46.png">
<img class="icon" src="http://i67.tinypic.com/1l0kj.png">
<img class="icon" src="http://i66.tinypic.com/211toxv.png">
<img class="icon" src="http://i66.tinypic.com/2uptfrp.png">
<div class="bar">H</div>
<img class="icon" src="http://i66.tinypic.com/8xlz04.png">
<div class="bar">P</div>
<img class="icon" src="https://s7.postimg.cc/56qulyihn/2_2.png">
<img class="icon" src="https://s7.postimg.cc/7cl5g6jaj/3_2.png">
<img class="icon" src="https://s7.postimg.cc/6aayxn86z/4_2.png">
<img class="icon" src="https://s7.postimg.cc/eft0vt45n/5_2.png">
<img class="icon" src="https://s7.postimg.cc/hmnkffwbf/6_1.png">
<img class="icon" src="https://s7.postimg.cc/yzxuuazcb/7_1.png">
<img class="icon" src="https://s7.postimg.cc/yn6go4osb/8_1.png">
<img class="icon" src="https://s7.postimg.cc/k3zbmq3d7/9_1.png">
<img class="icon" src="https://s7.postimg.cc/glnbqj53v/image.png">
<div class="bar">J</div>
<img class="icon" src="https://s7.postimg.cc/tkdnd1lhn/image.png">
<img class="icon" src="https://s7.postimg.cc/afae3aejf/image.png">
<img class="icon" src="https://s7.postimg.cc/dm4xmx6p7/image.png">
<img class="icon" src="https://s7.postimg.cc/t7m96vqd7/image.png">
<div class="bar">T</div>
<img class="icon" src="http://i63.tinypic.com/ygppz.png">
<img class="icon" src="http://i68.tinypic.com/14b15l.png">
<img class="icon" src="http://i67.tinypic.com/2e4ae50.jpg">
<img class="icon" src="http://i68.tinypic.com/24xkgmv.jpg">
<img class="icon" src="http://i63.tinypic.com/spuoop.png">
<img class="icon" src="http://i63.tinypic.com/2iu2vt1.png">
<img class="icon" src="https://s9.postimg.cc/5g3t7lqan/image.png">
<img class="icon" src="https://s7.postimg.cc/jsvnfcr4b/1_1.png">
<img class="icon" src="https://s7.postimg.cc/ma7emmiqj/1_2.png">
<img class="icon" src="https://s7.postimg.cc/rlmb7cciz/1_3.png">
<img class="icon" src="https://s7.postimg.cc/m2g3esnvv/image.png">
<img class="icon" src="https://s7.postimg.cc/r8ux169or/1_5.png">
<img class="icon" src="https://s9.postimg.cc/rseubr873/image.png">
<img class="icon" src="https://s9.postimg.cc/eygsibfb3/image.png">
<img class="icon" src="https://s9.postimg.cc/ujy429yz3/image.png">
<img class="icon" src="https://s9.postimg.cc/fb86oisfz/image.png">
<img class="icon" src="https://s7.postimg.cc/7523xud9n/1_1.png">
<img class="icon" src="http://i64.tinypic.com/se6gia.jpg">
<img class="icon" src="http://i65.tinypic.com/205p9v6.jpg">
<img class="icon" src="http://i67.tinypic.com/21mvzue.jpg">
<img class="icon" src="https://s9.postimg.cc/93motxhf3/image.png">
<img class="icon" src="http://i64.tinypic.com/jac9sj.jpg">
<img class="icon" src="https://s7.postimg.cc/z3b4xeca3/1_1.png">
<img class="icon" src="https://s7.postimg.cc/xbi62i0mz/1_2.png">
<img class="icon" src="http://i68.tinypic.com/ml36zs.jpg">
<img class="icon" src="http://i67.tinypic.com/25uhanm.png">
<img class="icon" src="http://i65.tinypic.com/2a95z6r.png">
<img class="icon" src="https://s7.postimg.cc/xzbealp4r/1_4.png">
<img class="icon" src="http://i64.tinypic.com/2ut6tl5.png">
<img class="icon" src="http://i66.tinypic.com/ilddag.png">
<img class="icon" src="http://i65.tinypic.com/33cnsd3.png">
<img class="icon" src="http://i67.tinypic.com/301kr9y.png">
<img class="icon" src="http://i65.tinypic.com/jl7590.png">
<img class="icon" src="http://i68.tinypic.com/2m7jbl1.png">
<div class="bar">S</div>
<img class="icon" src="https://s9.postimg.cc/uk8rqy23z/1_6.png">
<img class="icon" src="https://s9.postimg.cc/3meup8cbz/image.png">
<img class="icon" src="https://s9.postimg.cc/a03xsgu2n/2_1.png">
<img class="icon" src="https://s9.postimg.cc/63qlwhgsv/2_2.png">
<img class="icon" src="https://s9.postimg.cc/c4oatkb4v/2_3.png">
<img class="icon" src="http://i65.tinypic.com/i57qxs.png">
</div>
<div id="Housing" class="tabcontent">
<img class="icon" src="https://s9.postimg.cc/lv1bjq83z/image.png">
<img class="icon" src="https://s9.postimg.cc/4j0yygme7/Green_Tea_Set.png">
<img class="icon" src="https://s9.postimg.cc/9ufvj6g6n/Layer_0.png">
<img class="icon" src="https://s7.postimg.cc/ln4tm4wx7/2_1.png">
<img class="icon" src="https://s7.postimg.cc/4zdbjn9vf/image.png">
<img class="icon" src="https://s7.postimg.cc/jvbur8szv/image.png">
<img class="icon" src="https://s7.postimg.cc/3x35146hn/image.png">
<img class="icon" src="https://s7.postimg.cc/he03jzoiz/image.png">
<img class="icon" src="https://s7.postimg.cc/yradyurjv/image.png">
<img class="icon" src="https://s7.postimg.cc/mpf04pxqz/image.png">
<img class="icon" src="https://s7.postimg.cc/gbpx1h0kr/image.png">
<img class="icon" src="https://s7.postimg.cc/dhmro164b/image.png">
</div>
<div id="Flowers" class="tabcontent">
<div class="bar">C</div>
<img class="icon" src="http://i67.tinypic.com/11rd380.png">
<img class="icon" src="http://i64.tinypic.com/2u5yu03.png">
<img class="icon" src="http://i64.tinypic.com/2ex4fit.png">
<img class="icon" src="http://i66.tinypic.com/68vwnc.png">
<div class="bar">T</div>
<img class="icon" src="https://s9.postimg.cc/e2anrr9un/image.png">
<img class="icon" src="https://s9.postimg.cc/tnrzbq8y7/image.png">
<img class="icon" src="https://s9.postimg.cc/q461lxdy7/image.png">
<img class="icon" src="https://s9.postimg.cc/tb0l5kdtr/image.png">
<img class="icon" src="https://s9.postimg.cc/yz6vwgagf/image.png">
<img class="icon" src="https://s9.postimg.cc/nzloktwvz/image.png">
<img class="icon" src="https://s9.postimg.cc/4hr14x2j3/image.png">
</div>
<div id="Misc" class="tabcontent">
<img class="icon" src="https://s9.postimg.cc/dyd9bwesv/1_1.png">
<img class="icon" src="https://s9.postimg.cc/77ws2hesf/1_3.png">
<img class="icon" src="https://s9.postimg.cc/4128iv227/1_4.png">
<img class="icon" src="https://s9.postimg.cc/b4a3yhf7j/1_5.png">
<img class="icon" src="https://s9.postimg.cc/id5198ypr/1_2.png">
</div>
<div id="buttons">
<button class="button" id="up">up</button>
<button class="button" id="down">down</button>
<button class="button" id="flip">flip</button>
<button class="button" id="del">del</button>
<button class="button" id="clear">clear</button>
<div><span>Layer: </span><span id="index"></span></div>
</div>
<div id="images">
<img src="https://s7.postimg.cc/ie46kj2kr/Layer_1.png" id="background" draggable="false">
</div>
<p>version: CLOSED BETA</p>
<button onclick="myFunction()" class="button">Click to check when the site was last updated</button>
<p id="demo"></p>
<div class="text">
<h1>Patchnotes & Updates:</h1>
<h2>5/19/18</h2>
<p>
<ul>
<li>Added 1 new item</li>
<li>Added new category "Misc"</li>
</ul>
</p>
</div>
</body>
</html>

By using the drag events, you can figure out how much the user has resized the image, and change the width / height properties accordingly:
let startX, startY;
handleDragStart = function(event) {
startX = event.x;
startY = event.y;
}
handleDrag = function(event) {
if (event.clientX > 0 && event.clientY > 0) {
event.srcElement.style.width = event.srcElement.clientWidth + (event.clientX - startX) + "px";
startX = event.clientX;
event.srcElement.style.height = event.srcElement.clientHeight + (event.clientY - startY) + "px";
startY = event.clientY;
}
}
#container {
display: inline-block;
cursor: nwse-resize;
}
<div id="container" draggable="true" ondragstart="handleDragStart(event)" ondrag="handleDrag(event)">
<img src="https://www.tobook.com/photos/7057_108284_just-a-test_Graz.jpg" />
</div>

How to select 2 image at the same time in javascript?

Hi I'm trying to learn how to select image and I've done this so far. I just don't get how to select 2 image at the same time because I already tried removing .removeClass('selected'); in the images_list li function.
HTML:
<div class="images_list">
<li class="border" title="content_1">
<img src="http://www.p69.com.br/wp-content/uploads/2013/04/imagens-lindas-6.jpg?0bce15" width="150" height="150" />
<span>
<img src="http://icons.iconarchive.com/icons/icojam/blue-bits/24/symbol-check-icon.png" />
</span>
</li>
<li class="border" title="content_2">
<img src="http://www.p69.com.br/wp-content/uploads/2013/04/imagens-lindas-6.jpg?0bce15" width="150" height="150" />
<span>
<img src="http://icons.iconarchive.com/icons/icojam/blue-bits/24/symbol-check-icon.png" />
</span>
</li>
</div>
<br><br><br><br><br><br><br><br><br>
<div class="img_info">
<div id="content_1" class="content hidden">content1</div>
<div id="content_2" class="content hidden">content2</div>
</div>
CSS
.images_list li {
list-style: none;
float: left;
width: 150px;
height: 150px;
margin-right: 10px;
}
.images_list li span {
display:none;
position:absolute;
top:0px;
left:0px;
width:24px;
height:24px;
}
.border {
border: 6px solid #D8D8D8;
background: url(upload/check.jpg);
}
.selected {
border: 6px solid green;
position:relative;
}
.hidden {
display:none;
}
.images_list li.selected span {
display:block;
}
JS: here's my JS where I'm having a problem with. I hope somebody can help me, Thanks!
$('.images_list li').click(function() {
$('.images_list .selected').removeClass('selected');
$(this).toggleClass('selected');
var clicked = $(this).attr('title');
$("#"+clicked).removeClass("hidden").siblings().addClass("hidden");
});
you can see my fiddle here: http://jsfiddle.net/jasonc21/59swswz7/

Simply comment out the removeClass line entirely.
$('.images_list li').click(function() {
// Left the following in, in case later you want to make it single again.
// $('.images_list .selected').removeClass('selected');
$(this).toggleClass('selected');
var clicked = $(this).attr('title');
$("#"+clicked).removeClass("hidden").siblings().addClass("hidden");
});
.images_list li {
list-style: none;
float: left;
width: 150px;
height: 150px;
margin-right: 10px;
}
.images_list li span {
display:none;
position:absolute;
top:0px;
left:0px;
width:24px;
height:24px;
}
.border {
border: 6px solid #D8D8D8;
background: url(upload/check.jpg);
}
.selected {
border: 6px solid green;
position:relative;
}
.hidden {
display:none;
}
.images_list li.selected span {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="images_list">
<li class="border" title="content_1">
<img src="http://www.p69.com.br/wp-content/uploads/2013/04/imagens-lindas-6.jpg?0bce15" width="150" height="150" />
<span>
<img src="http://icons.iconarchive.com/icons/icojam/blue-bits/24/symbol-check-icon.png" />
</span>
</li>
<li class="border" title="content_2">
<img src="http://www.p69.com.br/wp-content/uploads/2013/04/imagens-lindas-6.jpg?0bce15" width="150" height="150" />
<span>
<img src="http://icons.iconarchive.com/icons/icojam/blue-bits/24/symbol-check-icon.png" />
</span>
</li>
</div>
<br><br><br><br><br><br><br><br><br>
<div class="img_info">
<div id="content_1" class="content hidden">content1</div>
<div id="content_2" class="content hidden">content2</div>
</div>

Creating an active dynamic Menu with JQuery

I am trying to create a website with a dynamic menu which changes the active menu element depending on the scrolling. I was looking at other questions similar to this one, and trying different code, but I can not resolve the problem and can not see why it is not working in my site.
I have my code like that right now: https://jsfiddle.net/49rcfg0t/
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('.topmenu a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('.topmenu a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
<link rel="stylesheet" type="text/css" href="portfolio2.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--Menu superior-->
<nav class="header">
<div>
<a href="#anchor1" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-1-icon.png">
<span id="profile">Menu 1</span>
</a>
<a href="#anchor2" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-2-icon.png">
<span id="exp">Menu 2</span>
</a>
<a href="#anchor3" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-3-icon.png">
<span id="hab">Menu 3</span>
</a>
<a href="#anchor4" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-4-icon.png">
<span id="pro">Menu 4</span>
</a>
<a href="#anchor5" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-5-icon.png">
<span id="contact">Menu 5</span>
</a>
</div>
</nav>
<div class="cuerpo">
<span class="anchor" id="anchor1"></span>
<div style="background-color:blue">Area 1</div>
<span class="anchor" id="anchor2"></span>
<div style="background-color:red">Area 2</div>
<span class="anchor" id="anchor3"></span>
<div style="background-color:yellow">Area 3</div>
<span class="anchor" id="anchor4"></span>
<div style="background-color:brown">Area 4</div>
<span class="anchor" id="anchor5"></span>
<div style="background-color:green">Area 5</div>
</div>
I have the following problems:
When I scroll manually the elements are not activated.
When I use the links the elements are activated but they do not
answer to the anchor petition.
I also I would like, when I activate one of the elements of the
menu, to change the image with another one. For example, change the
first icon with this one:
Thank you in advance, this problem is driving me crazy!

You may simplify your code:
use mousemove/mouseenter instead of scroll event.
The snippet:
$(document).ready(function () {
$('a[href^="#"].topmenu').on('click', function (e) {
$('a.topmenu').removeClass('active');
$(this).addClass('active');
});
});
$(document).on('mousemove mouseenter', 'div.cuerpo div', function(event) {
$('a.topmenu').removeClass('active');
$('a[href="#' + this.previousElementSibling.id + '"].topmenu').addClass('active');
});
$(document).on('keyup', function (e) {
var charCode = (e.which) ? e.which : e.keyCode;
if ((charCode >= 49 && charCode <= 53) || (charCode >= 97 && charCode <= 101)) {
$('a[href="#anchor' + String.fromCharCode(charCode) + '"].topmenu').trigger('click');
$(document).scrollTop( $('#anchor' + String.fromCharCode(charCode)).offset().top);
}
});
body{
margin:0;
font-family:'Open Sans', sans-serif;
}
div{
overflow: auto;
}
/*Menu de cabecera*/
.header{
margin:auto;
background-color: white;
text-align: center;
position: fixed;
width:100%;
padding-top:7px;
padding-bottom: 7px;
z-index:5;
border-bottom:solid 2px #5882FA;
}
.header a{
text-decoration:none;
}
.topmenu img{
width:50px;
height:50px;
border-radius:90px;
padding: 2px 2px 2px 2px;
margin:2px 5px 17px 5px;
}
.topmenu img:active{
transform: translateY(4px);
}
.topmenu img:hover{
box-shadow:0px 2px 1px #5882FA;
}
/*Tooltips*/
.topmenu span{
visibility:hidden;
width: 120px;
color: white;
background-color: black;
text-align: center;
border-radius: 6px;
padding: 2px 0;
margin:1px;
font-variant: small-caps;
text-decoration:none;
/* Position the tooltip */
position: absolute;
top: 70%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition-property: opacity;
transition-duration: 2s;
}
.topmenu:hover span{
visibility:visible;
opacity: 1;
}
.active{
background-color:black;
}
.cuerpo{
position: absolute;
width: 100%;
margin-top:90px;
}
.cuerpo div{
height: 590px;
margin: 5px 15%;
}
.anchor{
display: block;
height: 90px;
margin-top: -90px;
visibility: hidden;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<nav class="header">
<div>
<a href="#anchor1" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-1-icon.png">
<span id="profile">Menu 1</span>
</a>
<a href="#anchor2" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-2-icon.png">
<span id="exp">Menu 2</span>
</a>
<a href="#anchor3" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-3-icon.png">
<span id="hab">Menu 3</span>
</a>
<a href="#anchor4" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-4-icon.png">
<span id="pro">Menu 4</span>
</a>
<a href="#anchor5" class="topmenu">
<img src="http://es.seaicons.com/wp-content/uploads/2016/05/Number-5-icon.png">
<span id="contact">Menu 5</span>
</a>
</div>
</nav>
<div class="cuerpo">
<span class="anchor" id="anchor1"></span>
<div style="background-color:blue">Area 1</div>
<span class="anchor" id="anchor2"></span>
<div style="background-color:red">Area 2</div>
<span class="anchor" id="anchor3"></span>
<div style="background-color:yellow">Area 3</div>
<span class="anchor" id="anchor4"></span>
<div style="background-color:brown">Area 4</div>
<span class="anchor" id="anchor5"></span>
<div style="background-color:green">Area 5</div>
</div>

how add class in selected images in slide show?

When I click on thumb image, I want to selected that thumb image, but here when I click other thumb image previous thumb image remain selected
CSS Code:
.imgStyle:hover {
border-color: black;
}
.imgStyle {
height: 100px;
width: 100px;
border: 2px solid grey;
}
.active {
border-color: red;
}
//js code
$(document).ready(function () {
$('#divContainer img').on('click', function () {
$(this).addClass('active');
var imgURl = $(this).attr('src');
$('#mainImage').fadeOut(1000, function () {
$(this).attr('src', imgURl);
}).fadeIn(1000);
});
});
HTML:
<img id="mainImage" src="images/Chrysanthemum.jpg" width="540" height="500" style="border:3px solid grey">
<br/>
<div id="divContainer">
<img class="imgStyle" src="images/Chrysanthemum.jpg" />
<img class="imgStyle" src="images/Desert.jpg" />
<img class="imgStyle" src="images/Hydrangeas.jpg" />
<img class="imgStyle" src="images/Jellyfish.jpg" />
<img class="imgStyle" src="images/Koala.jpg" />
</div>

Remove active class from siblings of the clicked image
$(document).ready(function() {
$('#divContainer img').on('click', function() {
$(this).addClass('active').siblings('img').removeClass('active');
var imgURl = $(this).attr('src');
$('#mainImage').fadeOut(1000, function() {
$(this).attr('src', imgURl);
}).fadeIn(1000);
});
});
.imgStyle:hover {
border-color: black;
}
.imgStyle {
height: 100px;
width: 100px;
border: 2px solid grey;
}
.active {
border-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img id="mainImage" src="images/Chrysanthemum.jpg" width="540" height="500" style="border:3px solid grey">
<br/>
<div id="divContainer">
<img class="imgStyle" src="images/Chrysanthemum.jpg" />
<img class="imgStyle" src="images/Desert.jpg" />
<img class="imgStyle" src="images/Hydrangeas.jpg" />
<img class="imgStyle" src="images/Jellyfish.jpg" />
<img class="imgStyle" src="images/Koala.jpg" />
</div>

Create 2 var:
Var currentslide;
var oldSlide;
In the function add
At the top :
OldSlide= currentSlide;
CurtentSlide=$(this);
Then add the classe to currentSlide,
And remove it from current slide.
Sorry for the sintax but i'm writing via phone.

Categories