Hi Im having troubles with getting the following to work. Only the first element works, how should I think?
<div class="hi">
<a id="tabBtn" href="javascript:void(0)"></a>
</div>
<div class="hi">
<a id="tabBtn" href="javascript:void(0)"></a>
</div>
<div class="hi">
<a id="tabBtn" href="javascript:void(0)"></a>
</div>
<script>
$('#tabBtn').on("click",function(){
if ($(this).parent('.hi').css('max-height') == '65px'){
$(this).parent(".hi").addClass('open');
}
else{
$(this).parent(".hi").removeClass('open');
}
})
</script>
Using the same id on multiple elements is invalid, use a class instead:
$('.tabBtn').on("click", function() {
if ($(this).parent('.job').css('max-height') == '65px') {
$(this).parent(".job").addClass('open');
} else {
$(this).parent(".job").removeClass('open');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="hi">
<a class="tabBtn" href="javascript:void(0)">Hello</a>
</div>
<div class="hi">
<a class="tabBtn" href="javascript:void(0)">Hello2</a>
</div>
<div class="hi">
<a class="tabBtn" href="javascript:void(0)">Hello3</a>
</div>
first thing first id attribute should be ONCE per page
having say that all you need to do is work on the on function from the document and in a selecter way like so
$(document).on("click",".tabBtn",function(){
//do work
})
Related
I have an element like this
I want mylink2 to also be clicked whenever somebody clicks on mylink
To start I am trying to get the parent container on click like this
$("#mylink").click(function(){
parentcontainer = this.closest('.myelement');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myelement">
<div class="container">
<div class="testitem">
<a id="mylink" href="#">
Test Link 1
</a>
</div>
</div>
<div class="container">
<a id="mylink2" href="#">
Test Link 2
</a>
</div>
</div>
But now I am stuck trying to click mylink2 am I on the right track?
You can use closest to get the parent and then find second element and trigger click command but since you have ids maybe you can use them for selecting elements. Keep in mind that id's must be unique.
$("#mylink").click(function() {
const parent = $(this).closest('.myelement');
parent.find('#mylink2').trigger('click')
});
$("#mylink2").on('click', function() {
console.log('click link 2')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myelement">
<div class="container">
<div class="testitem">
<a id="mylink" href="#">
Test Link 1
</a>
</div>
</div>
<div class="container">
<a id="mylink2" href="#">
Test Link 2
</a>
</div>
</div>
you can trigger the jQuery first click to trigger the second one this way:
$("#mylink").click(function(){
$("#mylink2").click();
});
taking in cosider that #mylink2 has some kind of a click handler function
If your links have ids the easiest way would be to use these ids:
$('#mylink').on('click', function(event) {
console.log('my link click');
$('#mylink2').click();
});
$('#mylink2').on('click', function(event) {
console.log('my link2 click');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myelement">
<div class="container">
<div class="testitem">
<a id="mylink" href="#">
Test Link 1
</a>
</div>
</div>
<div class="container">
<a id="mylink2" href="#">
Test Link 2
</a>
</div>
</div>
Try this:
$('#mylink, #mylink2').on('click', function(event){
console.log($("#mylink1").text());
console.log($("#mylink2").text());
});
It should be straightforward since you are using unique IDs for the two elements.
Triggering the second elements click event in the first elements handler.
$("#mylink").on("click", function(){
$("#mylink2").trigger("click");
});`
This code is working and all, but both links are opening the same info, which is the info of link2 `POP2, . If i remove the second link, the first one opens without problem. What am i missing ?
HTML
$(document).ready(function(){
$('.open').click(function() {
$('.pop_background').fadeIn();
$('.pop_box').fadeIn();
return false;
});
$('.close').click(function() {
$('.pop_background').fadeOut();
$('.pop_box').fadeOut();
return false;
});
$('.pop_background').click(function(){
$('.pop_background').fadeOut();
$('.pop_box').fadeOut();
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="responsive1">
<div class="pop_background"></div>
<div class="pop_box">
<h1>POP1</h1>
<span class="close">×</span>
</div>
<div class="img">
<a class="open" href="#">
click to open pop
</a>
</div>
</div>
<div class="responsive1">
<div class="pop_background"></div>
<div class="pop_box">
<h1>POP2</h1>
<span class="close">×</span>
</div>
<div class="img">
<a class="open" href="#">
click to open pop2
</a>
</div>
</div>
The codes are all referencing the same object. You have to assign IDs to each.
Update: I have created a javascript function to accept the parameters which is the container id so you can call it once. Its at the bottom of this answer
HTML
<div id="pb1" class="pop_box">
<h1>POP1</h1>
<span class="close">×</span>
</div>
<div class="img">
<a id="openpb1" class="open" href="#">
click to open pop1
</a>
<div id="pb2" class="pop_box">
<h1>POP2</h1>
<span class="close">×</span>
</div>
<div class="img">
<a id="openpb2" class="open" href="#">
click to open pop2
</a>
</div>
</div>
JAVASCRIPT
Repeat the code for pop2
<script>
$(document).ready(function(){
$('#openpb1').click(function() {
$('#pb1').fadeIn();
$('.pop_box').fadeIn();
return false;
});
$('#pb1 .close').click(function() {
$('#pb1').fadeOut();
$('#pb1').fadeOut();
return false;
});
$('.pop_background').click(function(){
$('.pop_background').fadeOut();
$('.pop_box').fadeOut();
return false;
});
});
</script>
Using it as a function
<script>
function myPopup(container){
$(container).fadeIn();
$('.pop_box').fadeIn();
return false;
}
$('#openpb1').click(function() {
myPopup('#pb1');
});
$('#openpb2').click(function() {
myPopup('#pb2');
});
</script>
To me it looks like you have only written the JavaScript for the first pop-up? You are not telling the computer which pop-up it should open.
I am showing a set of products via shortcode in WordPress. The display has an image and button.
Problem: Only the photo contains the link to single product page. The associated button does not have the link to the single product page.
This is the current code:
<div class="display-products">
<div class="wpb_wrapper">
<div class="displayProduct-shortcode displayProduct-Container">
<div class="product_grid dp-section dp-group woocommerce" id="displayProduct">
<div class="dp_product_item dp-col dp-col_1_of_6 firstcol">
<div class="dp_images">
<a class="dp-product-image" title="Custom Made Wedding Cabinet" href="yahoo.com">
<div class="he-wrap tpl1">
<div class="dp-img-wrapper"> <img width="192" height="264" alt="#" class="attachment-display_product_thumbnail size-display_product_thumbnail wp-post-image" src="img_src"> </div>
</div> <span data-id="696" class="dpquickview dp_quickview_button"><img src="img_src"></span> </a>
</div>
<div class="dp-product-information clearfix">
<h2 class="product-name">
<a title="Custom Made Wedding Cabinet" href="#">Custom Made Wedding Cabinet</a>
</h2>
<div class="dp-stock"></div>
<div class="dp-grid-button"> <a class="single_add_to_cart_button button alt db_customButton" href="#">READ MORE</a> </div>
<div style="clear: both;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
Desired Output: I want to somehow iterate over each .single_add_to_cart_button and copy the link of every product-name to each READ MORE button
This is my current jquery code:
j('.display-products .displayProduct-shortcode .dp-product-information .dp-grid-button .single_add_to_cart_button').each(function() {
var getProductLink = j('.display-products .displayProduct-shortcode .dp-product-information .product-name > a').attr('href');
j(this).attr('href', getProductLink);
});
Set the href attribute value using the elements context. Use closest() to traverse up to dp-product-information element then find the desired anchor element the read its attribute and set the value.
Use
j('.display-products .displayProduct-shortcode .dp-product-information .dp-grid-button .single_add_to_cart_button').attr('href', function(){
return j(this).closest('.dp-product-information').find('.product-name>a').attr('href');
});
$(function() {
$('.dp-product-information .dp-grid-button .single_add_to_cart_button').attr('href', function() {
return $(this).closest('.dp-product-information').find('.product-name > a').attr('href');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dp-product-information clearfix">
<h2 class="product-name">
<a title="Custom Made Wedding Cabinet" href="#Test">Custom Made Wedding Cabinet</a>
</h2>
<div class="dp-stock"></div>
<div class="dp-grid-button">
<a class="single_add_to_cart_button button alt db_customButton" href="#">READ MORE</a>
</div>
<div style="clear: both;"></div>
</div>
Instead of assigning value for the different buttons with the links I would like to suggest you to use a common class (if you can) then trigger the click event for them:
$('.selector').on('click',function(){
$('.a-selector').trigger('click');
});
So, I have a series of divs and inside each div there is a link.
What I want to accomplish is to open in another window or tab the .pdf file if the link ends in.pdf if not do nothing or something else to decide later.
The problem I'm having is that when you click on the link it will open the same document as many times as you have .pdfs on the page.
I tried replicating the problem in this fiddle:
https://jsfiddle.net/x9fo6cgk/
But it isn't working. The code works on my side.
Here is the code:
$('.somelink').click(function(eventObject) {
var elem = $(this);
if (elem.attr("href").match(/\.pdf$/i)) {
eventObject.preventDefault();
elem.attr('target', '_blank');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="linkholder">
<a class="somelink" href="https://bitcoin.org/bitcoin.pdf">pdf 1</a>
</div>
<div class="linkholder">
<a class="somelink" href="http://www.pdf995.com/samples/pdf.pdf">pdf 2</a>
</div>
<div class="linkholder">
<a class="somelink" href="http://www.bing.com">.com</a>
</div>
<div class="linkholder">
<a class="somelink" href="http://www.google.org">.org</a>
</div>
Thanks in advance!
You should just change the targets on page load if they are PDFs.
$('.somelink').each(function() {
var elem = $(this);
if (elem.attr("href").match(/\.pdf$/i)) {
elem.attr('target', '_blank');
}
});
JSFiddle: https://jsfiddle.net/x9fo6cgk/3/
Results in this HTML:
<div class="linkholder">
<a class="somelink" href="https://bitcoin.org/bitcoin.pdf" target="_blank">pdf 1</a>
</div>
<div class="linkholder">
<a class="somelink" href="http://www.pdf995.com/samples/pdf.pdf" target="_blank">pdf 2</a>
</div>
<div class="linkholder">
<a class="somelink" href="http://www.bing.com">.com</a>
</div>
<div class="linkholder">
<a class="somelink" href="http://www.google.org">.org</a>
</div>
Note: Your JSFiddle did not have jQuery selected so nothing ran.
You can do like this:
$('.somelink').click(function(eventObject) {
var elem = $(this);
if (elem.attr("href").match(/\.pdf$/i)) {
eventObject.preventDefault();
window.open(elem.attr('href'));
}
});
Look here: https://jsfiddle.net/x9fo6cgk/6/
For some reason the behavior of this script:
https://learn.jquery.com/events/event-basics/#preventdefault
under Magnolia CMS acts a bit weird.
So this code was used instead:
$(".linkholder a[href$='pdf']").attr('target','_blank').addClass('pdf');
$(".linkholder a:not(a[href$='pdf'])").addClass('generic');
Here is a the fiddle:
https://jsfiddle.net/x9fo6cgk/13/
Thanks everyone!
HTML
<div class="topparent">
<div class="secondparent">
<div class="firstparent">
<a href="#" class="link" >Menu Link</a>
</div>
</div>
</div>
here I want to get <div class="secondparent"> by jQuery or JavaScript. My code would be on Anchor Tag and i want to get its second most parent element by Index number. Or is there any other way? I don't want get element by hard coded ID or CLASS.
You can use parents() and eq()
Using parents() you can get all ancestors
eq() will help to select by index
CODE:
var p1=$('a.link').parents().eq(0);
var p2=$('a.link').parents().eq(1);
var p3=$('a.link').parents().eq(2);
console.log(p1.attr('class'),p2.attr('class'),p3.attr('class'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="topparent">
<div class="secondparent">
<div class="firstparent">
<a href="#" class="link" >Menu Link</a>
</div>
</div>
</div>
Hi now you can used to parent()
var p1=$('a.link').parent();
var p2=$(p1).parent();
var p3=$(p2).parent();
console.log(p1.attr('class'),p2.attr('class'),p3.attr('class'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="topparent">
<div class="secondparent">
<div class="firstparent">
<a href="#" class="link" >Menu Link</a>
</div>
</div>
</div>