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'));
})
Related
I was just assigned my first project for work and am having some trouble with the last details.
Essentially, when a user clicks a list item in a class of "answerPick" is added to the li. When the user clicks another li item to change their answer the class of "answerPick" is removed from the first choice and added to the new choice. At the end of the form, the user submits and I take all values attached to li items with a class of "answerPick".
Here is an example of the structure of one of the form questions:
<!--Section B-->
<section id="section-b" class="grid">
<div class="content-wrap">
<div class="section-question">
<img src="/Images/modules/GiftThemeHeader_418x50.jpg">
</div>
<ul class="answer-options-grid">
<li class="answer" data-url="relaxation"><img src="/Images/modules/Relaxation_200x150.jpg" class="baseimg"> <img src="/Images/modules/Check1Mobile.png" class="topimg">Relaxation</li>
<li class="answer" data-url="skincare"><img src="/Images/modules/BodyCare_200x150.jpg" class="baseimg"> <img src="/Images/modules/Check1Mobile.png" class="topimg">Body Care</li>
<li class="answer" data-url="date-night"><img src="/Images/modules/DateNight_200x150.jpg" class="baseimg"> <img src="/Images/modules/Check1Mobile.png" class="topimg">Date Night</li>
<li class="answer" data-url="at-home-spa"><img src="/Images/modules/Spa_200x150.jpg" class="baseimg"> <img src="/Images/modules/Check1Mobile.png" class="topimg">At-home spa </li>
</ul>
</div>
</section>
You'll notice I have an image called "Check1Mobile" right next to the selected image. This image is automatically hidden via .hide().
Basically what I'm trying to do is have the check image show using .show(), when the li item is clicked and is given the class "answerPick". I'm trying to only target specific instances of the class "topimg" during the click function because I use that image/class for each of the form questions.
Here is a snippet of code. I can include everything but I am a javascript scrub so it is messy, to be honest.
$jq('.answer img').click(function () {
if ((this).parent().hasClass('answerPick')) {
$jq('.topimg').show();
}
else {
$jq('.topimg').hide();
} });
Based on the piece of code you have written it should be:
$jq('.answer img').click(function () {
$jq('.topimg').hide()
if ($jq(this).parent().hasClass('answerPick')) {
$jq(this)('.topimg').show();
}
});
But I can also suggest :
$jq('.answer img').on('click', function () {
const el = $jq(this)
el.parent().find('.topimg')
el.find('.topimg').toggle(el.hasClass('answerPick'))
});
Here's a jsfiddle for live example.
Apologies in advance if this is a simple trick, but I'm not any good at javascript so I don't know how to do it...
I have two buttons (blue and yellow) that toggle between two divs with content. On another part of the page, I have another two buttons (also blue and yellow) that are supposed to activate the same-colored button of these two toggle buttons. So blue will activate toggle-blue and yellow will activate toggle-yellow. I used the below script I found on here for the toggle feature:
<div class="flr-wrap">
<ul>
<li><a class="button active" data-rel="#content-a" href="#">a button</a>
</li>
<li><a class="button" data-rel="#content-b" href="#">b button</a>
</li>
</ul>
<div class="flr-inner">
<div class="container" id="content-a">AAA</div>
<div class="container" id="content-b">BBB</div>
</div>
</div>
// set content on click
$('.button').click(function (e) {
e.preventDefault();
setContent($(this));
});
// set content on load
$('.button.active').length && setContent($('.button.active'));
function setContent($el) {
$('.button').removeClass('active');
$('.container').hide();
$el.addClass('active');
$($el.data('rel')).show();
}
from here:
jsfiddle
What do I add to make the other two buttons trigger the active states of their corresponding toggle buttons?
Many thanks in advance for any help!
Since you said you need the second set of buttons to trigger actions of the first set, this means that buttons do the same thing.
Here's an example of how this works:
http://jsfiddle.net/ivanbatic/b43m405x/
Javascript:
$('.activator').on('click', function () {
var target = $(this).attr('data-target');
$('.panel').removeClass('active');
$(target).toggleClass('active');
});
HTML
<section>
<button class="activator" data-target=".panel-a">Blue</button>
<button class="activator" data-target=".panel-b">Yellow</button>
<section>
<div class="panel active panel-a">First Panel</div>
<div class="panel panel-b">Second Panel</div>
</section>
<section>
<button class="activator" data-target=".panel-a">Blue</button>
<button class="activator" data-target=".panel-b">Yellow</button>
</section>
Also, you are not using buttons in your example, you are using links. Links are meant to take you to another page, buttons are meant to trigger an action.
If you want buttons to look like plain text, use CSS for styling.
You can do pretty much the same, just use the selector based on your data-rel to add the active class and add the active class to the button's data-rel statement, like that it's quite easy to always toggle the matching tags
function setContent($el) {
var rel = $el.data('rel');
$('.active').removeClass('active');
$('.container').hide();
$('[data-rel="' + rel + '"]').addClass('active');
$(rel).show();
}
$(function() {
// the right place to fire the initial setContent (all scripts are ready and page is loaded)
setContent($('.button.active'));
// add event handlers in ready event (DOM is most surely there)
$('.button').click(function(e) {
e.preventDefault();
setContent($(this));
});
});
.container {
display: none;
}
.button.active {
color: #C00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="flr-wrap">
<ul>
<li><a class="button active" data-rel="#content-a" href="#">a button</a>
</li>
<li><a class="button" data-rel="#content-b" href="#">b button</a>
</li>
</ul>
<div class="flr-inner">
<div class="container" id="content-a">
AAA
</div>
<div class="container" id="content-b">
BBB
</div>
</div>
<ul>
<li><a class="button active" data-rel="#content-a" href="#">a button</a>
</li>
<li><a class="button" data-rel="#content-b" href="#">b button</a>
</li>
</ul>
</div>
I am trying to make a slideshow with Bootstrap's JavaScript collapse and tab. The idea is to have a list of thumbnails that can be clicked to show a blow up of the picture in a collapse.
I want to be able to click on the first thumbnail to open up the collapse with the first thumbnails blown up pic. When the second thumbnail is clicked, the first blown up pic should be replaced with the second one.
The problem I'm running into right now is that the blown up images are showing up in a list on top of each other instead of replacing each other.
Here is a fiddle with the current issue: http://jsfiddle.net/g7nrt9b4/
Code for the Fiddle:
<div class="panel-body">
<ul class="thumb-list">
<li><img class="thumb-img" src="http://www.trbimg.com/img-530546b6/turbine/la-fi-imgur-20140219" alt="temp img" /></li>
<li><img class="thumb-img" src="http://www.trbimg.com/img-530546b6/turbine/la-fi-imgur-20140219" alt="temp img" /></li>
</ul>
<div class="collapse pic-theater" id="collapseA1">
<img class="theater-img" src="http://www.trbimg.com/img-530546b6/turbine/la-fi-imgur-20140219" alt="temp img" />
</div>
<div class="collapse pic-theater" id="collapseA2">
<img class="theater-img" src="http://www.trbimg.com/img-530546b6/turbine/la-fi-imgur-20140219" alt="temp img" />
</div>
</div>
Thanks in advance!
Here you go:
Add some class (show-img in the example below) to your img tags, so you can append a click event to them.
Add some image loading indicator to inform the user that something is going on when thumbnail is clicked (used blockUI just for example).
And we're ready to go:
HTML:
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
Title.
</h3>
</div>
<div class="panel-body">
<ul class="thumb-list">
<li><img class="thumb-img" src="http://www.trbimg.com/img-530546b6/turbine/la-fi-imgur-20140219" alt="temp img" /></li>
<li><img class="thumb-img" src="http://www.trbimg.com/img-530546b6/turbine/la-fi-imgur-20140219" alt="temp img" /></li>
<!-- more images ... -->
</ul>
<div id="collapse" class="collapse pic-theater">
<div class="block">
<img class="theater-img" src="http://www.trbimg.com/img-530546b6/turbine/la-fi-imgur-20140219" alt="temp img" />
</div>
</div>
</div>
</div>
<img src="https://amitchandnz.files.wordpress.com/2010/08/please_wait.gif?w=614" id="spinner" />
jQuery:
// don't want to reload current image if it has been already loaded, so make variable for that:
var loaded = false,
// lastclicked is the item that was last clikced. This is just a variable now, so we do not have to repeat 'var':
lastClicked,
// set the collapse element as variable, so we have easir to call it later on:
collapseEl = $('#collapse');
// method that specify what should happen when the thumbnail is clicked:
$('.show-img').click( function(){
// class 'current' is to define if the thumbnail was clicked as last, if so, collapse the panel, if not, load image of the thumbnail that was just clicked
$('.thumb-img').removeClass('current');
$(this).find('.thumb-img').addClass('current');
if(this != lastClicked){
// the thumbnail wasn't clicked last time:
lastClicked = this;
loaded = false;
}else{
// the thumbnail was clicked last time, so we want to collapse the panel instead of reloading image again:
collapseEl.collapse('toggle');
loaded = true;
}
if(!loaded){
// show the panel as there's another item loaded inside:
collapseEl.collapse('show');
// set that this item is being loaded:
loaded = true;
// fetch the image source from the thumbnail 'href' attribute:
var img = $(this).find('.thumb-img').attr('src');
// notify the user that something is going on while loading the image:
$('.block').block({
message : $('#spinner'),
css : {
background : 'none',
border : 'none'
}
});
// load the image:
$('.theater-img').load( function(){
// set image as loaded, so the click would not repeat loading process (could be skipped if the images are cached):
loaded = false;
// remove loading indicator:
$('.block').unblock();
// added [ '?'+ (new Date).getTime() ] - to simulate different images. So each new (except the one that has a 'current' class) thumbnail click tends like it's a new image:
}).attr('src', img + '?'+ (new Date).getTime());
}
});
// when panel is collapsed, remove class 'current' from the img, so that we know it's not displayed:
collapseEl.on('hide.bs.collapse', function () {
$('.thumb-img').removeClass('current');
})
DEMO
This is a question regarding matching division widths with jquery. Here is the html code I am working with.
<ul class="thumbs_container">
<li class="thumbs">
<a class="fancybox" href="" >
<div class="thumbs_image_container">
<img src="" />
</div>
<div class="caption">
caption
</div>
</a>
</li>
<li class="thumbs">
<a class="fancybox" href="" >
<div class="thumbs_image_container">
<img src="" />
</div>
<div class="caption">
caption
</div>
</a>
</li>
</ul>
I will have multiple list items with the class 'thumbs'. What I want to do is match the widths of the divs with the class 'caption' to the widths of the divs with the class 'thumbs_image_container', but treating each list item separately.
Could someone please give me some pointers on how to do this? I know how to match the widths, but I am having problems figuring out how to treat each list item separately.
Try using $.each()
var $ulWidth = $('thumbs_container').width();
$('li.thumbs').each( function() {
var $divWidth = $(this).find('div.caption').width(); //Width of div inside Current li..
if( parseInt($ulWidth) == parseInt($divWidth) ) {
// Do Something
}
});
Use jQuery's each ( Jquery $.each selector )
This code will get the set of elements with class thumbs, then check if each element contains a class named caption, and if that element does contain caption, then it takes the related width on the element with class = thumbs_image_container and applies it to the iterated element.
$('.thumbs').each(function( location, element ){
if( $(this).find('.caption').length){
var w = $(this).find('.thumbs_image_container')[0].width();
$(this).width(w);
}
});
Thanks Sushanth and Travis, jquery each did the trick, after experimenting this is what I ended up with which does what I was trying to do,
$('li.thumbs').each( function() {
var $divWidth = 0;
$divWidth = $(this).find('img').width();
$(this).find('div.caption').width($divWidth);
});
it turns out it was the width of the image that I needed to match the 'caption' width to.
Thanks for the help
i am looking to replace a particular image when i click on it and change it to active image. but then i click on any other image, the clicked image becomes active and the other image becomes inactive again.
the html markup looks like this:
the HTML that i am using is:
<ul id="weeklyPrizeBlockThumb">
<li class="active"> <img src="images/bts/bts_overlay_wp_box_thumbw1.jpg" alt="Week1" id="week1" />
<p class="text"> <span>Gearing Up for School:</span> <span>$100 of Mead® School Supplies!1</span></p>
</li>
<li> <img src="images/bts/bts_overlay_wp_box_thumbw2.jpg" alt="Week2" id="week2" />
<p class="text"> <span>Sticking to a Schedule:</span> <span>$100 Gift Card from The Container Store®!</span></p>
</li>
<li> <img src="images/bts/bts_overlay_wp_box_thumbw3.jpg" alt="Week3" id="week3" />
<p class="text"> <span>Doing Lunch:</span> <span>Soft Lunch Bag with $100 of Unilever Products!</span></p>
</li>
</ul>
The JS is:
var src1 = $('ul#weeklyPrizeBlockThumb li').find('img').attr("src").replace("_active.jpg", ".jpg");
$('ul#weeklyPrizeBlockThumb li').find('img').attr("src", src1);
//$('#overlay_wp_weekImg div').find('img').attr("src").replace("_active", "");
var src = $(this).find('img').attr("src").match(/[^\.]+/) + "_active.jpg";
$(this).find('img').attr("src", src);
this is not working correctly. it does not de-active-ate the previous images.
try this~
$(function(){
$("#weeklyPrizeBlockThumb li").each(function(){
var li = $(this);
li.click(function(){
$("#weeklyPrizeBlockThumb>li>img").each(function(index){
$(this).attr("src","images/bts/bts_overlay_wp_box_thumbw"+ (index + 1) +".jpg");
alert($(this).attr("src"));
})
li.find("img").attr("src","images/bts/_active.jpg");
alert(li.find("img").attr("src"));
})
})
})