I have the following set up in my html:
<div class="col-sm-8">
<img id="click-1" class="glasses one active" src="<?php bloginfo('template_directory'); ?>/assets/images/Statesman-Three.png"/>
<img id="click-2" class="glasses two" src="<?php bloginfo('template_directory'); ?>/assets/images/Statesman-Three.png" style="background:red;"/>
<img id="click-3" class="glasses three" src="<?php bloginfo('template_directory'); ?>/assets/images/Statesman-Three.png" style="background:blue;"/>
<img id="click-4" class="glasses four" src="<?php bloginfo('template_directory'); ?>/assets/images/Statesman-Three.png" style="background:pink;"/>
<ul class="toggle_points">
<li data-toggle-target="click-1">
<div class="circle"><div class="inner_circle"></div></div>
</li>
<li data-toggle-target="click-2">
<div class="circle"><div class="inner_circle"></div></div>
</li>
<li data-toggle-target="click-3">
<div class="circle"><div class="inner_circle"></div></div>
</li>
<li data-toggle-target="click-4">
<div class="circle"><div class="inner_circle"></div></div>
</li>
</ul>
</div>
And I'm looking to fadein and out images based on the click. I have them sharing a connect with a data-attr and Id's.
I feel like my current jquery is on the right path but Im definitely missing/forgetting something
$('.toggle_points li').click(function (e) {
$( '#' + $(this).data('toggleTarget') ).fadeIn().toggleClass('active').find('img.active').fadeOut().removeClass('active);
});
You need to break up your jQuery statement into:
$('.toggle_points li').click(function (e) {
$('img.glasses.active').fadeOut().removeClass('active');
$( '#' + $(this).data('toggleTarget') ).fadeIn().toggleClass('active');
});
In your code, .find('img.active') will attempt to search the descendants of the image you select, but won't find a match since the image you want isn't a descendant. Also, you left out a ' in your removeClass().
Here's a fiddle https://jsfiddle.net/k53k9ydy/ that should lead you in the right direction and also caches the elements you're selecting to variables.
$('.toggle_points li').on('click', function (e) {
var $this = $(this);
var el = $(this).data('toggleTarget');
if ($this.hasClass('active')) {
$('#' + el).fadeIn().toggleClass('active');
$(this).toggleClass('active');
} else {
$('#' + el).fadeOut().toggleClass('active');
$(this).toggleClass('active');
}
});
Related
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.
I am trying to show animation on list item click. Same animation work with button click but not with list item.
No exception printing on console.
Here is my code.
function animateButtons(clicked_btn_id){
var circle = $('#' + clicked_btn_id + ' .circle');
if (!circle.length) {
$('#' + clicked_btn_id).append('<div class="circle"></div>');
circle = $('#' + clicked_btn_id + ' .circle');
}
setTimeout(function(){
circle.toggleClass('open');
});
setTimeout(function() {
//change image back
circle.toggleClass('open');
}, 300);
}
}
function clickedControlButton(clicked_btn_id){
animateButtons(clicked_btn_id);
}
Here is html code.
<div class="wrapper">
<ul class="nav nav-tabs list" id="myTab">
<li>
<img src="images/one.png" class="img-circle center-block img-reponsive" alt="one" onclick="clickedControlButton(this.id)" id="btnone">
<p style="color:white;" class="index-footer-btn-text" id="oneText"> one </p>
</li>
<li>
<img src="images/two.png" class="img-circle center-block img-reponsive" alt="two" onclick="clickedControlButton(this.id)" id="btntwo">
<p style="color:white;" class="index-footer-btn-text" id="twoText"> two </p>
</li>
<li>
<img src="images/three.png" class="img-circle center-block img-reponsive" alt="three" onclick="clickedControlButton(this.id)" id="btnthree">
<p style="color:white;" class="index-footer-btn-text" id="threeText"> three </p>
</li>
</ul>
</div>
You may need to add the listener to the list items and not to the images. Images do not support nested elements, meaning that you can't add any circles inside the image, so you need to add it inside the list and format it with CSS to look as you wish.
So:
Remove the onclick event from the img elements
Give the list elements some id's
Attach the events to the list elements
Format your circles using CSS
Here is a JSFiddle with the functionality you want to achieve:
https://jsfiddle.net/oz15hzsb/
Here is how to attach the listeners:
$('.nav-tabs li').click(function(){
animateButtons($(this).attr('id'));
})
I have 4 side panels that overlay each other when I click on their corresponding buttons. How can I hide one when another opens?
This is the menu that triggers the panels:
<div id="resources-menu-main">
<ul>
<li id="toc-main-button"><img src="gfx/toc.png" width="50" alt="Table of Contents"></li>
<li id="footnotes-main-button"><img src="gfx/footnotes.png" width="50" alt="Footnotes"></li>
<li id="references-main-button"><img src="gfx/references.png" width="50" alt="References"></li>
<li id="images-main-button"><img src="gfx/images.png" width="50" alt="Images"></li>
<li id="information-main-button"><img src="gfx/info.png" width="50" alt="Information"></li>
</ul>
</div>
This is one of the side panels (it has another menu within to facilitate navigation):
<div id="footnotes-section">
<
<hr id="line">
<h3>Resources<br/><br/></h3>
<div id="resources-menu-panel">
<ul>
<li id="footnotes-panel-button"><img src="gfx/footnotes.png" width="50" alt="Footnotes"></li>
<li id="references-panel-button"><img src="gfx/references.png" width="50" alt="References"></li>
<li id="images-panel-button"><img src="gfx/images.png" width="50" alt="Images"></li>
<li id="information-panel-button"><img src="gfx/info.png" width="50" alt="Information"></li>
</ul>
</div>
<hr id="line">
<details open>
<summary><h4><img src="gfx/footnotes.png" width="50" alt="Footnotes"><br/>Footnotes</h4></summary>
[content]
<h4>↑ Volver</h4>
</details>
</div>
This is the js function of the corresponding side panel:
function showFootnotesPanel() {
var elem = document.getElementById("footnotes-section");
if (elem.classList) {
console.log("classList supported");
elem.classList.toggle("show");
} else {
var classes = elem.className;
if (classes.indexOf("show") >= 0) {
elem.className = classes.replace("show", "");
} else {
elem.className = classes + " show";
}
console.log(elem.className);
}
}
Thank you!
Okay, I'm still not exactly sure what you want, but I broke it down to a basic layout to make it simpler. Here's the fiddle for it. http://jsfiddle.net/wvoa69r5/1/
Basically you show the div you want and then hide the previously shown div like this:
$('#link1').click(function() {
var left = $('#left-div1');
var leftShow = $('.left-div.show');
left.addClass('show');
leftShow.removeClass('show');
});
I have a div class "asset-container" with a data-id attribute.
I also have a div class "popover-content" with an associated data-id.
When I hover over "asset-container", I want the "popover-content" show.
There are a lot of these, which is why I have data-id attached to each of the two divs so I can call the associated div to show.
I have tried several iterations of script and am not getting anywhere
js:
$(document).ready(function() {
custom_popover();
});
function custom_popover() {
$(".asset-container").mouseover(function() {
$('.popover-content [data-id=' + this.value + ']').show();
});
}
html:
<ul class="col-xs-4">
<li class="thumnail-video">
<div class="popover-content" data-id="71"></div>
<div class="asset-container">
<video class="img-responsive portrait" type="video/mp4" src="https://ternpro-development.s3.amazonaws.com/media/films/71/mobile/3.mp4" data-id="71"> </video>
</div>
</li>
</ul>
<ul class="col-xs-4">
<li class="thumnail-video">
<div class="popover-content" data-id="69"></div>
<div class="asset-container">
<video class="img-responsive landscape" type="video/mp4" src="https://ternpro-development.s3.amazonaws.com/media/films/69/mobile/2.mp4" data-id="69"></video>
</div>
</li>
</ul>
</div>
Change your code to:
$(".asset-container").mouseover(function() {
var id = $(this).children("video").data("id");
$(this).parent().children('.popover-content[data-id=' + id + ']').show();
});
I've got an image viewer that combines a thumbnail/large image block that works great...
looks like this:
<div id="gallery-large" ><img id="largeImage" src="" /></div>
<div id="gallery-scroller" >
<ul class="holder">
<li class="slide first"><img src="galleries/kids/01.jpg" data-large="galleries/kids/06.jpg" alt="1st image description" /></li>
<li class="slide"><img src="galleries/kids/02.jpg" data-large="galleries/kids/07.jpg" alt="2nd image description" /></li>
<li class="slide"><img src="galleries/kids/03.jpg" data-large="galleries/kids/08.jpg" alt="3rd image description" /></li>
<li class="slide"><img src="galleries/kids/04.jpg" data-large="galleries/kids/09.jpg" alt="4th image description" /></li>
<li class="slide"><img src="galleries/kids/05.jpg" data-large="galleries/kids/10.jpg" alt="5th image description" /></li>
</ul>
<div class="clear"></div>
</div>
<script>
$('.holder').delegate('img','click', function(){
$('#largeImage').attr( 'src',$(this).attr('data-large') );
});
</script>
However when I try to combine this with a carousel (the simplest one I found here - http://www.flintstudio.biz/stuff/sliders/1.html )
It stops working...
the code looks like this
<div id="gallery-large" ><img id="largeImage" src="" /></div>
<div id="gallery-scroller" >
<a class="button prev" ><img src="images/arrow_left.png"/></a>
<a class="button next" ><img src="images/arrow_right.png"/></a>
<ul class="holder">
<li class="slide first"></li>
<li class="slide"></li>
<li class="slide"></li>
<li class="slide"></li>
<li class="slide"></li>
</ul>
<div class="clear"></div>
</div>
<script>
$( window ).load(function(){
var images = ['galleries/kids/01.jpg', 'galleries/kids/02.jpg', 'galleries/kids/03.jpg', 'galleries/kids/04.jpg', 'galleries/kids/05.jpg'];
$.preloadImages( images, init );
function init() {
$( '#gallery-scroller' ).imgSlider( images );
}
$('.holder').delegate('img','click', function(){
$('#largeImage').attr( 'src',$(this).attr('data-large') );
});
});
</script>
from a concept standpoint the only difference is that the list is populated after the window loads -
I've tried changing
.delegate('img','click', function(){
to
.on( 'click', 'img', finction(){
but that doesn't help..
OH - one important point - I changed one line in the carousel.js - so it's not doing a background-image css change, but adding an image...
so I changed this (line 37)
$( e ).find( '.holder > li' ).eq( i ).css( 'background', 'url('+images[i]+') no-repeat' );
to
$( e ).find( '.holder > li' ).eq( i ).html( '<img class="thumb" src="' + images[i] + '" />' );
What am I missing...???
jsfiddle of the simple thumbnail viewer... http://jsfiddle.net/cBpvZ/
jsfiddle of the carousel version... http://jsfiddle.net/ZJzLd/
I think you are binding the events on wrong DOM object, so instead of IMG it should be LI. You can inspect the HTML using firebug and can see that there is no IMG tag inside UL.holder. Try the following code.
$('.holder').delegate('li','click', function(){
var imgSrc = $(this).css('background-image').replace('url("','').replace('")','');
$('#largeImage').attr( 'src',imgSrc);
});
Ideally I should have used the RegExp to replace the string, however this works.
thx Mahesh
forest thru the trees... I couldn't see it because I'd fiddled with it so much... the missing reference to data-large was indeed the issue.
the solution was (defined by me) to have TWO arrays - one for thumbs and one for large..(I could take the path of adding some suffix or prefix to the image names and keep them correlated that way - but I choose not to - and therefor want the flexibility to name things whatever... and this needs two arrays)
var images = ['galleries/kids/01.jpg', 'galleries/kids/02.jpg', 'galleries/kids/03.jpg', 'galleries/kids/04.jpg', 'galleries/kids/05.jpg'];
var large = ['galleries/kids/06.jpg', 'galleries/kids/07.jpg', 'galleries/kids/08.jpg', 'galleries/kids/09.jpg', 'galleries/kids/10.jpg'];
$('#gallery-scroller').append('<img src="images/loader.gif" id="gallery-loader" style="position:absolute; top:45%; left:45%;"/>');
$.preloadImages( images, init );
function init() {
$( '#gallery-loader' ).remove();
$( '#gallery-scroller' ).imgSlider( images, large );
}
of course this mean altering the carousel.js to handle the additional passed array - no prob there...
works like a charm. I can now populate this with data, and place the carousel anywhere I need, and the large image viewer where I need it... bravo - thanks for the assist.