I have 5 occurence of UL on a single page. So , when i mouse-over one image then the same effect runs of every instance of UL(i.e. it changes the HTML of all 5 occurences).
I want to execute the script on individual UL so that the effect runs on the respective UL where i mouse-hover instead of all of them.
Live code example : http://jsfiddle.net/5FPSc/
Thanks in advance. Any help / pointer would be of great help. / GSA
HTML :
<ul class="answerOptions">
<li data-score="0" data-answer="A" class="answer-1">
<figure><img src="assets/images/styles/quiz/ques2_A.jpg" alt="" title="" />
<figcaption>Dinner and a movie</figcaption>
</figure>
</li>
<li data-score="1" data-answer="B" class="answer-2">
<figure><img src="assets/images/styles/quiz/ques2_B.jpg" alt="" title="" />
<figcaption>2 words: Laser Tag</figcaption>
</figure>
</li>
<li data-score="0" data-answer="C" class="answer-3">
<figure><img src="assets/images/styles/quiz/ques2_C.jpg" alt="" title="" />
<figcaption>Stroll through the park and a picnic</figcaption>
</figure>
</li>
<li data-score="0" data-answer="D" class="answer-4">
<figure><img src="assets/images/styles/quiz/ques2_D.jpg" alt="" title="" />
<figcaption>Skydiving</figcaption>
</figure>
</li>
<li data-score="4" data-answer="E" class="answer-5">
<figure><img src="assets/images/styles/quiz/ques2_E.jpg" alt="" title="" />
<figcaption>Art gallery and wine tasting</figcaption>
</figure>
</li>
</ul>
<div class="answerItem-1"></div>
SCRIPT :
$('.answerOptions figure').hover(function(){
$(".answerItem-1").html($(this).find("figcaption").html());
},function(){
if($('figure').hasClass('selected') != true){
$(".answerItem-1").html("");
}
else {
$(".answerItem-1").html($("figure.selected").find("figcaption").html());
}
});
$('.answerOptions figure').click(function(){
$('figure').removeClass('selected');
$(this).addClass("selected");
$(".answerItem-1").html($(this).find("figcaption").html());
});
Dont use class, use Id. class hover efects runs on all items, id can be only one on page.
The reason they are all "popping up" is because of this line: $(".answerItem-1") you're selecting EACH and every .answerItem-1 and you have a bunch of those.
You'd need to set unique identifiers. I would do something like this:
<figure rel="q1">
...
<div id="q1" class="answerItem-1"></div>
//jquery code
var q = $(this).attr('rel');
$('#'+q).html($(this).find("figcaption").html());
http://jsfiddle.net/5FPSc/4/
I think you should use objective concept, that make the LI tag has own event handler.
Just take a look to below scripts and kindly be a reference to your codes.
$('ul.answerOptions').delegate('li.answer-1', 'hover', function(event) {
if (event.type == 'mouseenter') {
console.log('inbound');
var $target = $(this).parents('div.question').find('div.answerItem-1');
var showText = '';
showText = $(this).find('figcaption').html();
$target.html(showText);
} else if (event.type == 'mouseleave') {
var $target = $(this).parents('div.question').find('div.answerItem-1');
$target.html('');
}
});
Related
I don't know how to explain this because I am an amateur.
I have a language menu with 6 languages: Es, Br, Fr, It, De, En
So, I have the default language selected EN and a dropdown with the rest of the images.
The question is: how can I update the text and the image when I click on It (for example).
My structure is like this:
$(".dropbtn, .burger").click(function() {
$(this).next(".dropdown-content, .items").stop().slideToggle(500);
//$(this).find(".arrow-up, .arrow-down").toggle();
});
// If you click outside dropdown - close dropdown
var $menu = $('.dropdown');
$(document).mouseup(function(e) {
if (!$menu.is(e.target) && $menu.has(e.target).length === 0) {
$('.dropdown-content').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="javascript:void(0)" class="dropbtn">
<img src="assets/img/languages/flag_en.png" alt=""> EN
<span class="ico ico-pointer_down"></span>
</a>
<div class="dropdown-content" id="dd-content">
<img src="assets/img/languages/flag_br.png" alt=""> PT
<img src="assets/img/languages/flag_es.png" alt=""> ES
<img src="assets/img/languages/flag_fr.png" alt=""> FR
<img src="assets/img/languages/flag_de.png" alt=""> DE
<img src="assets/img/languages/flag_it.png" alt=""> IT
</div>
You could wrap the text in the span like :
<span class="lang">EN</span>
And attach click event then on click copy the text and image to the .dropbtn and hide the clicked anchor using hide class and finally remove the class hide from all the other anchors, like :
$(".dropbtn").click(function() {
$(this).next(".dropdown-content, .items").stop().slideToggle(500);
});
// If you click outside dropdown - close dropdown
var $menu = $('.dropdown');
$(document).mouseup(function(e) {
if (!$menu.is(e.target) && $menu.has(e.target).length === 0) {
$('.dropdown-content').hide();
}
});
$("#dd-content a").click(function() {
var text = $(this).text();
var img = $(this).find('img').clone(true);
$('.dropbtn .lang').text(text);
$('.dropbtn img').replaceWith(img);
$("#dd-content a").removeClass('hide');
$(this).addClass('hide');
});
a.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:void(0)" class="dropbtn">
<img src="assets/img/languages/flag_en.png" alt=""><span class="lang">EN</span>
<span class="ico ico-pointer_down"></span>
</a>
<div class="dropdown-content" id="dd-content">
<img src="assets/img/languages/flag_en.png" alt=""> EN
<img src="assets/img/languages/flag_br.png" alt=""> PT
<img src="assets/img/languages/flag_es.png" alt=""> ES
<img src="assets/img/languages/flag_fr.png" alt=""> FR
<img src="assets/img/languages/flag_de.png" alt=""> DE
<img src="assets/img/languages/flag_it.png" alt=""> IT
</div>
First of all you need a click event-handler for your images.
You are using a click event-handler already.
$(".dropdown-content img").click(function (e) {});
Inside your event-handler you need to define what to do.
Your mission is to change the src attribute.
So what you need to do first is to save the attribute in a variable.
var src = $(this).attr("src");
Then you need to change the attribute of the image you want to change.
$(".dropbtn").attr("src", src); //<-- the first parameter defines the attribute you want to change.
//The second attribute is our variable we set earlier.
In the end, it should look like this:
$(".dropdown-content img").click(function (e) {
var src = $(this).attr("src"); //<-- getting the attribute of the clicked element (this)
$(".dropbtn").attr("src", src); //<-- changing the attribute.
});
There are a lot of guides out there that can help you out.
However, this is not best practise for internalization but might be good to learn some basic JQuery and JS rules.
I would wrap the country name in a span. Then, when you click on the language options, swap out the image src and text for the chosen language.
I have added a little css to help illustrate the image src changing.
$(".dropbtn, .burger").click(function(e) {
e.preventDefault();
$(this).next(".dropdown-content, .items").stop().slideToggle(500);
//$(this).find(".arrow-up, .arrow-down").toggle();
});
// If you click outside dropdown - close dropdown
var $menu = $('.dropdown');
$(document).mouseup(function(e) {
if (!$menu.is(e.target) && $menu.has(e.target).length === 0) {
$('.dropdown-content').hide();
}
});
var $lang = $('.dropbtn');
//when user clicks on language
$('.dropdown-content').on('click', 'a', function(e) {
e.preventDefault();
var $this = $(this),
$img = $this.find('img');
//set the image of .dropbtn to the chosen image
$lang.find('img').attr('src', $img.attr('src'));
//set the name of the language
$lang.find('.lang-name').text($this.text());
});
<!-- added to help visualise the image src attribute changing. Can be safely ignored. -->
.dropbtn img:after {
content: attr(src);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" class="dropbtn">
<img src="assets/img/languages/flag_en.png" alt=""> <span class="lang-name">EN</span>
<span class="ico ico-pointer_down"></span>
</a>
<div class="dropdown-content" id="dd-content">
<img src="assets/img/languages/flag_br.png" alt=""> PT
<img src="assets/img/languages/flag_es.png" alt=""> ES
<img src="assets/img/languages/flag_fr.png" alt=""> FR
<img src="assets/img/languages/flag_de.png" alt=""> DE
<img src="assets/img/languages/flag_it.png" alt=""> IT
</div>
I'm using woocommerce, and by default it use the large image in the product loop.
The goal is that I want to replace each large product image (1000x1000px) with the thumbnail image (300x300px) which is contained in the same folder as the large image.
Here is the html code:
<div class="products_container">
<ul>
<li>
<div>
<a>
<img class="attachment-entry wp-post-image" width="1000" height="1000" alt="IMG_2606" src="//wp-content/uploads/2015/08/IMG_2606.jpg" />
</a>
</div>
</li>
<li>
<div>
<a>
<img class="attachment-entry wp-post-image" width="1000" height="1000" alt="IMG_2607" src="//wp-content/uploads/2015/08/IMG_2607.jpg" />
</a>
</div>
</li>
<li>
<div>
<a>
<img class="attachment-entry wp-post-image" width="1000" height="1000" alt="IMG_2608" src="//wp-content/uploads/2015/08/IMG_2608.jpg" />
</a>
</div>
</li>
...
...
...
</ul>
</div>
With a total of 24 products per page.
And the jQuery :
I tried to put the jQuery code under the <script></script> tag in the child-theme/woocommerce/loop/loop-start.php file before the <ul>, and in my custom.js file, both doesn't work.
jQuery(document).ready(function($) {
$('.products_container img.wp-post-image').each(function() {
var $this = $(this);
$this.attr('src').replace('.jpg', '-300x300.jpg');
});
});
If I put this code in the browser console, it replace the large image with the thumbnail as I want $('.products_container').find('img.wp-post-image').attr('src').replace('.jpg', '-300x300.jpg');
Any help would be appreciated
You can pass a function as the second parameter of .attr( attributeName, function )
The function is called for each element in the set and should return the new value of the attribute you've defined with the first parameter
jQuery(document).ready(function ($) {
$('.products_container img.wp-post-image')
.attr('src', function(idx, src) {
return src.replace('.jpg', '-300x300.jpg');
});
});
I am working on ID card image[multiple] which is inside an LI element and in this process I have come up with below code. For single image path it is working fine. The requirement is to populate all the selected images path, when user click on "printBtn" button. I need to achieve it for PDF conversion(printing purpose). Any help? Thanks in advance.
HTML
<div class="idcard-cont">
<ul>
<li>
<img src="../../images/img-IDcard.gif" alt="" />
</li>
<li>
<img src="../../images/img-IDcard.gif" alt="" />
</li>
<li>
<img src="../../images/img-IDcard.gif" alt="" />
</li>
</ul>
</div>
<input type="button" value="Print" id="printBtn" />
JQUERY
$(".idcard-cont").find("li").on('click', function(){
var $this = $(this);
$this.toggleClass("selected");
if($this.hasClass("selected")){
alert($this.html());
}
});
$('#printBtn').click(function(){
var urls=[];
$('.idcard-cont .selected').each(function(){
urls.push($(this).find('img').attr('src'));
});
console.log(urls); //contains all the selected imgs
});
Sounds like you want to add to an array
I'm not an expert at jQuery by no means but maybe something like
var list = new Array();
$(".idcard-cont").find("li").on('click', function(){
var $this = $(this);
$this.toggleClass("selected");
if($this.hasClass("selected")){
list.push(item.text);
}
});
console.log(list.length);
I'm using this javascript to open a div containing an image when clicking on a text
http://jsfiddle.net/BfMDL/1/
my script :
$(document).ready(function() {
$('.image_trombi').hide();
$('.titre').click(function() {
$('.image_trombi').slideUp();
$(this).next().slideToggle();
return false;
});
});
my html
<div>image 1<div class="image_trombi"><img src="http://lorempixel.com/output/fashion-q-c-200-200-9.jpg" class="trombi_anim"/></div>
<div>image 2<div class="image_trombi"><img src="http://lorempixel.com/output/fashion-q-c-200-200-5.jpg" class="trombi_anim"/></div>
<div>iamge 3<div class="image_trombi"><img src="http://lorempixel.com/output/sports-q-c-200-200-5.jpg" class="trombi_anim"/></div>
It works perfectly, but I would like the div to close after clicking again on the link.
So, click on "image1", open image 1, and click again on "image1" close image 1...
and so on...
use only slideToggle() as you are doing slideToggle() you don't need to slideUp() that image container.
$('.titre').click(function() {
$(this).next().slideToggle();
return false;
});
Fiddle Demo
Here is a simple demo of an accordion effect that i made a year ago.
JS
(function() {
var menu = $('#acordion'),
contents = menu.find('.acordion-content').hide();
menu.children('li').click( function() {
contents.slideUp(200);
$(this).children('.acordion-content:hidden').slideDown(200);
});
})();
HTML
<ul id="acordion">
<li>
<div class="acordion-title">Cosa1</div>
<img class="acordion-content" src="" />
</li>
<li>
<div class="acordion-title">Cosa2</div>
<img class="acordion-content" src="" />
</li>
<li>
<div class="acordion-title">Cosa3</div>
<img class="acordion-content" src="" />
</li>
Im stuck with a little problem with fancyBox v2.
I want to launch fancyBox on button click. Once clicked, it will load all the images from the list (from the src attribute of the ).
I have created this jsfiddle to show what I am trying to do: http://jsfiddle.net/fPFZg/
jQuery(document).ready(function($) {
$('button').on('click', function() {
$.fancybox();
});
});
Can anybody see how this would be possible?
I had the same question and found the following to be a simpler method:
HTML
<button class="fancybox" value="Open Fancybox">Open Fancybox</button>
<div class="hidden" id="fancybox-popup-form">
(your Fancybox content goes in here)
</div>
jQuery
$('.fancybox').click(function () {
$.fancybox([
{ href : '#fancybox-popup-form' }
]);
});
CSS
.hidden { display: none; }
Further Reading
Fancybox Docs (click the "API Methods" tab, then read up on the first method, which is called "Open").
you can use it like this:
$.fancybox.open([
{
href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title : '1st title'
},
{
href : 'http://fancyapps.com/fancybox/demo/2_b.jpg',
title : '2nd title'
}
], {
padding : 0
});
Your code doesn't work because this $.fancybox(); doesn't tell fancybox what to open so does nothing.
What I would do, if you don't want to edit every link in your html, is:
1). add an ID to the <ul> tag so we can use that selector like
<ul id="images">
2). bind fancybox to all <a> anchors that are child of your element #images like
var fancyGallery = $("#images").find("a"); // we cache the selector here
fancyGallery.attr("rel","gallery").fancybox({
type: "image"
});
notice that we are adding a rel attribute on the fly to all anchors so they will be part of the same gallery
3). bind a click event to the button (I would recommend you to give it an ID too so it won't mess with other possible buttons in the future) that triggers the existing fancybox script as above, so with this html
<button id="fancyLaunch">Launch Fancybox</button>
use this script
$('#fancyLaunch').on('click', function() {
fancyGallery.eq(0).click(); // triggers a click
});
notice that we used the method .eq() to launch the gallery from the first item (first index in javascript is always 0)
Summarizing, your whole script may look like this :
jQuery(document).ready(function($) {
var fancyGallery = $("#images").find("a");
fancyGallery.attr("rel","gallery").fancybox({
type: "image"
});
$('#fancyLaunch').on('click', function() {
fancyGallery.eq(0).click();
});
});
See JSFIDDLE
Your html:
<ul>
<li>
<a href="http://placekitten.com/400/400" title="" class="fancybox">
<img src="http://placekitten.com/100/100" alt="" />
</a>
</li>
<li>
<a href="http://placekitten.com/400/400" title="" class="fancybox">
<img src="http://placekitten.com/100/100" alt="" />
</a>
</li>
<li>
<a href="http://placekitten.com/400/400" title="" class="fancybox">
<img src="http://placekitten.com/100/100" alt="" />
</a>
</li>
<li>
<a href="http://placekitten.com/400/400" title="" class="fancybox">
<img src="http://placekitten.com/100/100" alt="" />
</a>
</li>
Your jQuery:
$(document).ready(function() {
$('button').on('click', function() {
$.fancybox($("a.fancybox"));
});});