Develop Reference

Add class to element based on its index

Currently i am building a storytelling website, where the client can iterate through several videos. However, there is also a page with chapters on the website. So when the client clicks on the next or previous button, the chapters should be lighten up on the chapter he currently is on.
At the moment i build a click counter, so the counter is counting up, when he clicked on next and counting down, when clicked on previous. I have 11 chapters, so 11 video's. I am checking the chapters by index. They are going from 0 to 11. When the client hits the next button, he's going to the next video and the click counter goes up with one.
At the moment i have trouble to connect this click counter to the current index of the chapter. So if the click counter goes to two for instance, the background of only chapter 2 (index 2) should be lighten up.
At the moment i have this:
<a href="#" class="vorige prev-rew button-sound">
<svg>icon</svg>
</a>
<a href="#" class="next prev-rew button-sound">
<svg> icon</svg>
</a>
<div class="marketing-chapter job-chapter">
<a href="#">
<div class="anchor-point chapter-1">
<p>1</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-2">
<p>2</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-3">
<p>3</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-4">
<p>4</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-5">
<p>5</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-6">
<p>6</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-7">
<p>7</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-8">
<p>8</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-9">
<p>9</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-10">
<p>10</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-11">
<p>11</p>
</div>
</a>
</div>
// Anchorpoint loop
var set = $(".anchor-point");
var length = set.length;
var ViewportCount = 1;
$('.prev-rew').on("click", function() {
if ($(this).hasClass('next')) {
console.log('klikkert next');
ViewportCount = ViewportCount + 1;
} else if ($(this).hasClass('vorige')) {
console.log('klikkert vorige');
ViewportCount = ViewportCount - 1;
}
set.each(function(index) {
index = ViewportCount;
console.log(index);
console.log(ViewportCount);
if(index == ViewportCount){
// Change the background-color of the number, connected to the index. So
current chapter will light up
}
});
});

To do what you require you can use the eq() method to directly select the element in the collection without a loop:
var set = $(".anchor-point");
var ViewportCount = 0;
$('.prev-rew').on("click", function() {
if ($(this).hasClass('next')) {
ViewportCount = ViewportCount + 1;
} else if ($(this).hasClass('vorige')) {
ViewportCount = ViewportCount - 1;
}
set.removeClass('active').eq(ViewportCount % set.length).addClass('active');
});
.active { background-color: #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Previous
Next
<div class="marketing-chapter job-chapter">
<a href="#">
<div class="anchor-point chapter-1 active"><p>1</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-2"><p>2</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-3"><p>3</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-4"><p>4</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-5"><p>5</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-6"><p>6</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-7"><p>7</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-8"><p>8</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-9"><p>9</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-10"><p>10</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-11"><p>11</p></div>
</a>
</div>
However, you can avoid the need for the counter variable and instead move the active class based on its current position in the DOM. The <a> elements wrapping the div can also be removed as it's invalid HTML, it makes the JS more straightforward and it's also not necessary in this case
$('.prev-rew').on("click", function() {
let $current = $('.active');
let $target = $current[$(this).data('action')]();
if ($target.length) {
$current.removeClass('active');
$target.addClass('active');
}
});
.active {
background-color: #C00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Previous
Next
<div class="marketing-chapter job-chapter">
<div class="anchor-point chapter-1 active"><p>1</p></div>
<div class="anchor-point chapter-2"><p>2</p></div>
<div class="anchor-point chapter-3"><p>3</p></div>
<div class="anchor-point chapter-4"><p>4</p></div>
<div class="anchor-point chapter-5"><p>5</p></div>
<div class="anchor-point chapter-6"><p>6</p></div>
<div class="anchor-point chapter-7"><p>7</p></div>
<div class="anchor-point chapter-8"><p>8</p></div>
<div class="anchor-point chapter-9"><p>9</p></div>
<div class="anchor-point chapter-10"><p>10</p></div>
<div class="anchor-point chapter-11"><p>11</p></div>
</div>

Google tag manager get closest a text

i want use custom js variable to get card-title a shop-item-title-link's text for the event label = "product x".
Clicking the click class fa-cart-plus to get the label product x;
Click the image to get the label product x
I've tried this js below, but it gets [object] [object] as the result.
function() {
var el = {{Click Element}};
return $(el).closest('card-title').text('a.shop-item-title-link');
}
HTML
<div class="card card-product">
<div class="card-image">
<a href="#" title="product x">
<img width="230" height="230" src="#" class="attachment-_thumbnail" alt="product x">
</a>
<div class="ripple-container"></div>
</div>
<div class="content">
<h6 class="category">Items</h6>
<h4 class="card-title">
<a class="shop-item-title-link" href="#" title="product x">product x</a>
</h4>
<div class="card-description">
<p><span>product descirption</span></p>
</div>
<div class="footer">
<div class="price">
<h4><span class="Price"><span class="Price-currencySymbol">£</span>45.00</span></h4>
</div>
<div class="stats">
<a rel="nofollow" href="#" title="Add to cart">
<i rel="tooltip" data-original-title="Add to cart" class="fa fa-cart-plus"></i>
</a>
</div>
</div>
</div>
</div>

That is a very specific target, what you want to do is use parent and sibling together.
Try something like this:
return $(el).parents().siblings('.card-title').text();

Bootstrap Modal close button issue after print action

I am working on bootstrap modal. I had a set of gallery images. A modal popup is opened on clicking the image. The popup has two buttons one for print the modal content and second to close the modal.
The problem is when the user click print button every thing is ok and modal content will be printed, but when the user click in close button to close the modal after print the content nothing happen the modal doesn't closed. Please help me to fix this.
Here is my code
<div class="single-img">
<div class="container">
<h2 class="title"><span>title</span></h2>
<div class= "container popup">
<ul class="row list-inline">
<li class="col-md-3 col-xs-6" data-toggle="modal" data-target="#myModal">
<div class="content">
<a href="#myGallery" data-slide-to="0">
<span class="btn-link">
<i class="fa fa-plus" aria-hidden="true"></i>
</span>
<div class="img-wrap">
<img class="img-thumbnail" src="bluprnt3.png" alt="" />
</div>
</a>
</div>
</li>
<li class="col-md-3 col-xs-6" data-toggle="modal" data-target="#myModal">
<div class="content">
<a href="#myGallery" data-slide-to="1">
<span class="btn-link">
<i class="fa fa-plus" aria-hidden="true"></i>
</span>
<div class="img-wrap">
<img class="img-thumbnail" src="bluprnt4.png" alt="" />
</div>
</a>
</div>
</li>
<li class="col-md-3 col-xs-6" data-toggle="modal" data-target="#myModal">
<div class="content">
<a href="#myGallery" data-slide-to="2">
<span class="btn-link">
<i class="fa fa-plus" aria-hidden="true"></i>
</span>
<div class="img-wrap">
<img class="img-thumbnail" src="bluprnt5.png" alt="" />
</div>
</a>
</div>
</li>
</ul>
<!--begin modal window-->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" title="Close" >X</button>
</div>
<div class="modal-body">
<!--CAROUSEL CODE GOES HERE-->
<!--begin carousel-->
<div id="myGallery" class="carousel slide clearafter" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<img src="C.jpg" alt="item0">
</div>
<div class="item">
<img src="D.jpg" alt="item1">
</div>
<div class="item">
<img src="E.jpg" alt="item2">
</div>
</div>
</div>
<div class="slider-bottom clearafter">
<div class="modal-footer" style=" padding-left: 155px;">
<button class="btn-sm" type="button" data-dismiss="modal" style="float:left;" onclick="printDiv('myGallery')">Print</button>
</div>
<div class="slider-control">
<a class="left carousel-control" href="#myGallery" role="button" data-slide="prev">
<i class="fa fa-chevron-left" aria-hidden="true"></i>
</a>
<a class="right carousel-control" href="#myGallery" role="button" data-slide="next">
<i class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function printDiv(div) {
var printContents = document.getElementById(div).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>

//add this button to your main html
<button type="button" class="btn btn-default" onclick="javascript:test()" id="myBtn" data-dismis`enter code here`s="modal">Close</button>
//add this script to your main html
function test() {
$('#myModal').modal('toggle');
}
//add this style to your main html
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000000;
}

In my case Using bootstrap 4, using setTimeout helped me out.
By using setTimeout function, we hide modal after clicking print button.
function printDiv(div) {
var printContents = document.getElementById(div).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
setTimeout(function(){ $('#myModal').modal('hide'); }, 1000);
}

try this
function printDiv(divName) {
var elem = document.getElementById(divName)
var domClone = elem.cloneNode(true);
var $printSection = document.getElementById("printSection");
if (!$printSection) {
var $printSection = document.createElement("div");
$printSection.style = "width: 100%;";
$printSection.id = "printSection";
document.body.appendChild($printSection);
}
$printSection.innerHTML = "";
$printSection.appendChild(domClone);
window.print();
}

Nav-bar not expanding after being collapsed?

In this simple expand/collapse navbar I made, the second navbar does not re-expand once it is collapsed, though the first one works fine. Once I collapse the second section, it stays collapsed and will not expand, though the first section continues to work fine, expanding and collapsing Thanks, all help is appreciated.
Here is my code below:
<script>
var CurrentSec;
var CurrentMenu;
var CurrentLink;
function Change(sec, state) {
CurrentSec = "Sec-"+sec;
CurrentMenu = "Menu-"+sec;
CurrentLink = "Link-"+sec;
if (state == 0) {
document.getElementById(CurrentSec).src = "http://www.pirates-online-rewritten.com/Images/collapsed.gif";
document.getElementById(CurrentMenu).style.display = "none";
document.getElementById(CurrentLink).href = "javascript:Change("+sec+", 1)";
}
else {
document.getElementById(CurrentSec).src = "http://www.pirates-online-rewritten.com/Images/expanded.gif";
document.getElementById(CurrentMenu).style.display = "inline";
document.getElementById(CurrentLink).href = "javascript:Change("+sec+", 0)";
}
}
</script>
<div class="sdmenu" style="visibility:visible">
<span class="title" id="community"><img src="http://www.pirates-online-rewritten.com/Images/clear.gif" class="menuspacer" width="131" height="15" alt="Pirates Community" /><img src="http://www.pirates-online-rewritten.com/Images/expanded.gif" class="arrow" alt="Close Menu" id="Sec-1"/></span>
<div id="Navbar"><div class="submenu" id="Menu-1">
<a id="Link-1" >Test1</a>
<a id="Link-2" >Test2</a>
<a id="Link-3" >Test3</a>
<a id="Link-4" >Test4</a>
<span class="menubottom" id="menubottom">
<img src="http://www.pirates-online-rewritten.com/Images/boxbot.gif" alt="-" />
</span>
</div>
<span class="title" id="community">
<img src="http://www.pirates-online-rewritten.com/Images/clear.gif" class="menuspacer" width="131" height="15" alt="Pirates Community" />
<img src="http://www.pirates-online-rewritten.com/Images/expanded.gif" class="arrow" alt="Close Menu" id="Sec-2"/>
</span>
<div id="Navbar-2">
<div class="submenu" id="Menu-2">
<a id="Link-5" >Test5</a>
<a id="Link-6" >Test6</a>
<a id="Link-7" >Test7</a>
<a id="Link-8" >Test8</a>
<span class="menubottom" id="menubottom">
<img src="http://www.pirates-online-rewritten.com/Images/boxbot.gif" alt="-" />
</span>
</div>
</div>

The problem is that you are using the id for link-1 more than once; and please check if your open and closing divs are matching.
I changed your function to this:
function Change(sec, state) {
console.log('Change(sec, state)', sec, state);
var section = document.getElementById("Sec-"+sec);
var menu = document.getElementById("Menu-"+sec);
var menulink = document.getElementById("MenuLink-"+sec); // <-- new MenuLink
if (state == 0) {
section.src = "collapsed.gif";
menu.style.display = "none";
menulink.href = "javascript:Change("+sec+", 1)";
}
else {
section.src = "expanded.gif";
menu.style.display = "inline";
menulink.href = "javascript:Change("+sec+", 0)";
}
}
And the matching html. Instead of Link-1 i used MenuLink-1 since Link-1 was already in use for another element.
<span class="title" id="community">
<img src="clear.gif" class="menuspacer" width="131" height="15" alt="foo" />
<a href="javascript:Change(1, 0)" id="MenuLink-1">
<img src="expanded.gif" class="arrow" alt="Close Menu" id="Sec-1"/>
</a>
</span>
You have to do the same for MenuLink-2
This is the full html with where the nesting of the open and closing of divs matches:
<div class="sdmenu" style="visibility:visible">
<span class="title" id="community1">
<img src="clear.gif" class="menuspacer" width="131" height="15" alt="foo" />
<a href="javascript:Change(1, 0)" id="MenuLink-1">
<img src="expanded.gif" class="arrow" alt="Close Menu" id="Sec-1"/>
</a>
</span>
<div id="Navbar">
<div class="submenu" id="Menu-1">
<a id="Link-1">m1.1</a>
<a id="Link-2">m1.2</a>
<a id="Link-3">m1.3</a>
</div>
</div>
<span class="title" id="community2">
<img src="clear.gif" class="menuspacer" width="131" height="15" alt="foo" />
<a href="javascript:Change(2, 0)" id="MenuLink-2">
<img src="expanded.gif" class="arrow" alt="Close Menu" id="Sec-2"/>
</a>
</span>
<div id="Navbar-2">
<div class="submenu" id="Menu-2">
<a id="Link-5">m2.5</a>
<a id="Link-6">m2.6</a>
<a id="Link-7">m2.7</a>
</div>
</div>
</div>

how to remove parent div when click on child inner anchor element?

this is my html code for aove fig.....
when i click on delete (id ="outdelete") total div (id="rightoutimage") should be deleted.......................
<div id="rightoutputimgae">
<div id="rightimgId" class="rightimg" rel="tooltip" content="<img src='jqe13/image/1.jpg' class='tooltip-image'/> ">
<div id="outputimageId" class="outputimage"><img src="jqe13/image/1.jpg" alt="Right Bottom Image">
</div>
</div>
<ul>
<li id="outcheckbox"><input name="outCheck" type="checkbox"></li>
<li id="outedit"><img src="jqe13/image/edit_s.PNG" alt="edit" title="Edit"></li>
<li id="outdelete"> <img src="jqe13/image/delet_c.PNG" alt="delete" title="Delete"></li>
<li id="outfullscreen"><img src="jqe13/image/fullscreen_c.PNG" alt="Full Screen" class="fullscreen" title="Full Screen"></li>
<li id="outshare"><img src="jqe13/image/share_c.PNG" alt="Share" title="Share">
<div id="menu">
<div id="tooltip_menu">
<img src="jqe13/image/email.PNG" alt="Email" title="Email">
<img src="jqe13/image/fb.PNG" alt="Facebook" title="Facebook">
<img src="jqe13/image/twitter.png" alt="Twitter" title="Twitter">
<img src="jqe13/image/save.PNG" alt="Save" title="Save">
</div>
</div>
</li>
<li id="outprint"><img src="jqe13/image/print.PNG" class="printMe" alt="Print" title="Print"></li>
</ul>
</div>
this is my scripting code........
<script>
function deleteImg(id11) {
id11 = document.getElementById("outdelete");
$('#+id11').remove();
}
</script>

$('#outdelete').click(function(){
$("#rightoutputimgae").remove();
});

Here's another option for you, which you can see a working example here:
http://jsfiddle.net/TdLSy/
$(document).ready(function(){
$("li a").click(function(event){
event.preventDefault();
$(this).find('img').remove();
});
});
Along with your original HTML code:
<div id="rightoutputimgae">
<div id="rightimgId" class="rightimg" rel="tooltip" content="<img src='jqe13/image/1.jpg' class='tooltip-image'/> ">
<div id="outputimageId" class="outputimage"><img src="jqe13/image/1.jpg" alt="Right Bottom Image">
</div>
</div>
<ul>
<li id="outcheckbox"><input name="outCheck" type="checkbox"></li>
<li id="outedit"><img src="jqe13/image/edit_s.PNG" alt="edit" title="Edit"></li>
<li id="outdelete"> <img src="jqe13/image/delet_c.PNG" alt="delete" title="Delete" /></li>
<li id="outfullscreen"><img src="jqe13/image/fullscreen_c.PNG" alt="Full Screen" class="fullscreen" title="Full Screen"></li>
<li id="outshare"><img src="jqe13/image/share_c.PNG" alt="Share" title="Share">
<div id="menu">
<div id="tooltip_menu">
<img src="jqe13/image/email.PNG" alt="Email" title="Email">
<img src="jqe13/image/fb.PNG" alt="Facebook" title="Facebook">
<img src="jqe13/image/twitter.png" alt="Twitter" title="Twitter">
<img src="jqe13/image/save.PNG" alt="Save" title="Save">
</div>
</div>
</li>
<li id="outprint"><img src="jqe13/image/print.PNG" class="printMe" alt="Print" title="Print"></li>
</ul>
</div>

Change:
<li id="outdelete"><a href="#" onClick="deleteImg(outdelete)">
to:
<li id="outdelete"><a href="#" onClick="deleteImg(this)">
and your JS code:
<script>
function deleteImg(self) {
$(self).parents('#rightoutputimgae').get(0).remove();
}
</script>

Try this:
document.getElementById("rightoutimage").addEventListener("click", function(e) {
if(e.target.id === "outdelete") {
var parent = e.target.parentNode;
parent.parentNode.removeChild(parent);
}
});

You can do this:
$('#outdelete > a').click(function(){
$(this).closest('#rightoutputimgae').remove();
});