I have button to show phone number if clicked with this code:
var shortNumber = $("#phone_ch").text().substring(0, $("#phone_ch").text().length - 12);
var onClickInfo = "_gaq.push(['_trackEvent', 'EVENT-CATEGORY', 'EVENT-ACTION', 'EVENT-LABEL', VALUE, NON-INTERACTION]);";
$("#phone_ch").hide().after('<div id="clickToShowPc" onClick="' + onClickInfo + '">' + shortNumber + 'X XXXXXXXX</div>');
$('section:has(div.price_c,div.contact_name_info,div#clickToShowPc)').addClass('xoom_c');
$("#clickToShowPc , #phone_cc").click(function() {
$("#phone_ch").show();
$("#phone_cc").hide();
$("#clickToShowPc").hide();
});
And I try to clone it with this code:
$( ".phone_c" ).clone(true , true).attr('class', 'phone_c col-lg-6').appendTo( ".main-section" );
And this is the original button HTML:
<div class="phone_c col-lg-12 col-md-12 col-sm-6 col-xs-12">
<span id="phone_ch" style="display: none;"> 012 73962304</span><div id="clickToShowPc" onclick="_gaq.push(['_trackEvent', 'EVENT-CATEGORY', 'EVENT-ACTION', 'EVENT-LABEL', VALUE, NON-INTERACTION]);"> 01X XXXXXXXX</div>
<div id="phone_cc">Show phone</div>
</div>
The button cloned but with showing the hidden elements and If I click it it will show the hidden element on the original one.
Can some one advise me with the correct code please?
I tried to search here and I found that I need to enable the
.clone(true , true)
in my code. And also I found something about duplicating ID's but it was not clear to me and I failed to solve my problem.
Thank you
When you clone your div ".phone_c", you will have multiple elements with the same ID. So, when you use the DOM Selector "#phone_cc", it will select the first one because it's how it works. If you had :
<span class="phone_ch" style=...
So you could use the DOM Selector ".phone_cc" and all elements with that class will be selected.
Now, you want to show and hide only elements "near" the cloned clicked element. To do that, you will have to use classes instead of IDs.
<div class="phone_c col-lg-12 col-md-12 col-sm-6 col-xs-12">
<span class="phone_ch" style="display: none;"> 012 73962304</span>
<div class="clickToShowPc" onclick="_gaq.push(['_trackEvent', 'EVENT-CATEGORY', 'EVENT-ACTION', 'EVENT-LABEL', VALUE, NON-INTERACTION]);"> 01X XXXXXXXX</div>
<div class="phone_cc">Show phone</div>
</div>
Then try to reach the parent element to reach the children :
var shortNumber = $(".phone_ch").text().substring(0, $(".phone_ch").text().length - 12);
var onClickInfo = "_gaq.push(['_trackEvent', 'EVENT-CATEGORY', 'EVENT-ACTION', 'EVENT-LABEL', VALUE, NON-INTERACTION]);";
$(".phone_ch").hide().after('<div class="clickToShowPc" onClick="' + onClickInfo + '">' + shortNumber + 'X XXXXXXXX</div>');
$('section:has(div.price_c,div.contact_name_info,div.clickToShowPc)').addClass('xoom_c');
$(".clickToShowPc , .phone_cc").click(function() {
var parent = $(this).parent();
$(".phone_ch", parent).show();
$(".phone_cc", parent).hide();
$(".clickToShowPc", parent).hide();
});
I hope this helps.
Related
I have a select field and a couple of links with images. Clicking on these images displays another link. That works flawlessly.
Now I have, in Javascript, the text of the alt attribute of the image that has to be clicked. How can I select the right one to click the one with the same alt attribute:
This is my HTML:
<div class="additionalimages">
<div class="additional-images">
<div class="row">
<div class="col">
<img src="image1.jpg" class="product-image" style="cursor: pointer" data-descr="">
</div>
<div class="col">
<img src="image2.jpg" class="product-image" style="cursor: pointer" data-descr="">
</div>
</div>
</div>
</div>
This is my Javascript to get the values of the select. Now I got for example the text "ImageOne". Now I want to select the a element with the title attribute ImageOne, so that I can fire a click event.
$(".vm-chzn-select").chosen().change(function (event) {
console.log("Select changed");
var colorText = $(".vm-chzn-select option:selected").text();
$(".additionalimages").find("a.product-image").attr("title");
});
Now the last line gives me back the value, but how can I compare so I know which one to click?
If I assume that your colorText holds the selected text value ImageOne, you should be able to simply do like this to fire a click event on the anchor with the very same title value.
$(".vm-chzn-select").chosen().change(function (event) {
console.log("Select changed");
var colorText = $(".vm-chzn-select option:selected").text();
$(".additionalimages a.product-image[title='" + colorText + "']").click();
});
You can select elements by attribute (and a variable) like this...
var altValue = "alt-tag-value";
var $img = $("img[alt='" + altValue + "']");
That will return the image (or images) that have the specified alt attribute value.
I have tooltip for each table row to show edit options. I make it visible using this code:
function popupFunction(p) {
var popup = document.getElementById("sp" + p);
popup.classList.toggle("show");
}
It's working well. But now the problem is how to hide it if I click any other places?
Here is my html:
<div class='popup' id='eds'>
<i class='fa fa-ellipsis-v' id =" + values.items[i].id + " onclick='popupFunction(this.id)'></i>
<span class='popuptext' id =sp" + values.items[i].id + ">
<div onclick='edit(this.id)' id =ed" + values.items[i].id + ">Edit</div>
<br/>
<div onclick='deleteFunction(this.id)' id =de" + values.items[i].id + ">Delete</div>
</span>
</div>
if show class makes an element to be rendred as tooltip, then removing it, should hide it.
document.getElementById(some_id).classList.remove("show")
should do the trick, i believe.
I have a function that assigns dynamic classes to my div's. This function is a that runs on the page. After the page loads, all 10 of my primary 's have classes ".info1" or ".info2" etc...
I am trying to write a Jquery function that changes the class of the div you click on, and only that one. Here is what I have attempted:
$(".info" + (i ++)).click(function(){
$(".redditPost").toggleClass("show")
});
I have also tried:
$(".info" + (1 + 1)).click(function(){
$(".redditPost").toggleClass("show")
});
And
$(".info" + (i + 1)).click(function(){
$(".redditPost").toggleClass("show")
});
EDITED MY HTML: DIV RedditPost is actually a sibling to Info's parent
<div class="listrow news">
<div class="newscontainer read">
<div class=".info1"></div>
<div class="redditThumbnail"></div>
<div class="articleheader read">
</div>
<div class="redditPost mediumtext"></div>
</div>
My issue is two fold.
The variable selection for ".info" 1 - 10 isn't working because i doesn't have a value.
If I did target the correct element it would change all ".redditPost" classes instead of just targeting the nearest div.
Try like this.
$("[class^='info']").click(funtion(){
$(this).parent().find('.redditPost').toggleClass("show");
});
Alternative:
$('.listrow').each(function(){
var trigger = $(this).find("[class^='info']");
var target = $(this).find('.redditPost');
trigger.click(function(){
target.toggleClass("show");
});
});
Try this
$("div[class*='info']").click(function(){
$(this).parent().find(".redditPost").toggleClass("show")
});
Explanation:
$("div[class*='info'])
Handles click for every div with a class containing the string 'info'
$(this).parent().find(".redditPost")
Gets the redditPost class of the current clicked div
Since the class attribute can have several classes separated by spaces, you want to use the .filter() method with a RegEx to narrow down the element selection as follows:
$('div[class*="info"]').filter(function() {
return /\binfo\d+\b/g.test( $(this).attr('class') );
}).on('click', function() {
$(this).siblings('.redditPost').toggleClass('show');
});
.show {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="listrow news">
<div class="newscontainer read">
<div class="info1">1</div>
<div class="redditThumbnailinfo">2</div>
<div class="articleheader read">3</div>
<div class="redditPost mediumtext">4</div>
</div>
</div>
HTML :
<div class ="cards">
<span id="cardtitle">
</span>
<span id="cardinfo">
</span>
</div>
J-QUERY:
function build() {
var content1 = "Coolio";
var content2 = "Coolio";
$(".cards").flippy({
color_target: "#F8F8F8",
duration: "500",
verso: $("#cardtitle").text(content1)
// another instance of verso here to add content2
});
}
I am using this jquery plugin for flip effect. My question is how do I achieve multiple contents. At the moment the plug only accepts 1 content.
Well, it seems like the Developer has made it so you've got to recreate the instance of the flip each time you'd like to apply new content, so you've got to make that a little more generic within a .click() handler.
Dependant on the Button or Navigation you've clicked on, ask it to load the appropriate content that it's tagged too, example:
<div id="content-one" style="display: none;">
Some first Example text
</div>
<div id="content-two" style="display: none;">
Second Example Text
</div>
<input type="button"
class="updateflip"
value="Display Content One"
data-contenttext="content-one" />
<input type="button"
class="updateflip"
value="Display Content Two"
data-contenttext="content-two" />
<script>
$(document).on('click', '.updateflip', function( event ) {
$('.cards').flippy({
color_target: "#F8F8F8",
duration: "500",
verso: $('#'+ $(this).data('contenttext') +'').text()
//E.g. $('#content-one').text(); shows "Some first Example text"
});
});
</script>
Demo Fiddle: http://jsfiddle.net/8TQFb/
Upon clicking a class of .updateflip it will look at it's data-contenttext attribute, which in turns points to an hidden <div /> within the page, thus brings up the hidden text. You could apply this further with having different colours too within the data-* attribute:
<input type="button"
class="updateflip"
value="Display Content Two"
data-color-target="#f1f1f1"
data-speed="2100"
data-contenttext="content-two" />
And thus, pass these button specific related attributes into the .updateflip handler as well to create something like in the demo below:
Demo Fiddle: http://jsfiddle.net/Hx5uQ/
Sorry guys, i got it to work. The plugin does take multiple elements. It was a misunderstanding on my part.
var content1 = "Coolio";
var content2 = "Coolio";
$(".cards").flippy({
color_target: "#F8F8F8",
duration: "500",
verso: '<span id="cardtitle">' + content1
+ ' </span><span id="cardinfo"> ' + content2 + '</span>'
});
I changed:
verso: $("#cardtitle").text(content1)
to: verso: '<span id="cardtitle">' + content1 + ' </span><span id="cardinfo"> ' + content2 + '</span>'
I am trying to find the DIV within another DIV id.
<div id="container1">
<div class="inside">
</div>
</div>
<div id="container2">
<div class="inside">
</div>
</div>
Notice there are 2 DIVs with the class "inside". I am trying to select the one within a specific container.
When there is only 1 set of containers, this works:
$carousel_container = $(carousel).find(".inside");
However, when I define the parent ID, then try to select the inside div, it does not work:
$carousel_container = $(carousel).find("#" + o.theid + " .inside"); // where o.theid = container1 or container2
Try
$(carousel).find("#" + o.theid + " > .inside");
Where > means child of.
Have you tried:
$carousel_container = $(carousel).find("#" + o.theid).children('.inside');