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!
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");
});`
I'm trying to create an application whereas it runs through a web page and finds an href attribute, but for now I would like to find the href attribute, and alert my of the link.
I am new to JQuery, but I have tried to run the following via Fiddle, but I cannot seem to get it running:
$('soundTitle__tag sc-tag sc-tag-small').on("click", function() {
var self = $(this);
var link = self.find("a").attr('href');
alert(link);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="link-redirect">
<div class="soundTitle__tagContainer">
<a class="soundTitle__tag sc-tag sc-tag-small" href="/home">1</a>
</div>
<div class="soundTitle__tagContainer">
<a class="soundTitle__tag sc-tag sc-tag-small" href="/home">2</a>
</div>
</div>
<div class="link-redirect">
<div class="soundTitle__tagContainer">
<a class="soundTitle__tag sc-tag sc-tag-small" href="/home"></a>
</div>
<div class="soundTitle__tagContainer">
<a class="soundTitle__tag sc-tag sc-tag-small" href="/home"></a>
</div>
when you click on soundTitle__tagContainer it will find the nearest anchor tag
$('.soundTitle__tagContainer').on("click", function() {
var self = $(this);
var link = self.find("a").attr('href');
alert(link);
})
$(function(){
$('.soundTitle__tag.sc-tag.sc-tag-small').on("click", function(e) {
e.preventDefault();
var link = $(this).attr('href');
alert(link);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="link-redirect">
<div class="soundTitle__tagContainer">
<a class="soundTitle__tag sc-tag sc-tag-small" href="/home">link 1</a>
</div>
<div class="soundTitle__tagContainer">
<a class="soundTitle__tag sc-tag sc-tag-small" href="/home">link 2</a>
</div>
As some people pointed out, this is going to be the link in the click handler. You also probably don't need such a verbose selector, as it creates tighter coupling between your scripts and DOM, but I left it intact (with the addition of the class selectors) for demonstration.
$('.soundTitle__tag.sc-tag.sc-tag-small') write like this if your selector is anchor tag with three class.Or just wirte $('.soundTitle__tag').Use .className for selecting an element with class
event.preventDefault(); Use this for perventing the default behaviour of the anchor tag.This will prevent a link from following the URL
$('.soundTitle__tag.sc-tag.sc-tag-small').on("click", function(event) {
event.preventDefault();
var self = $(this);
var link = self.attr('href');
alert(link);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="link-redirect">
<div class="soundTitle__tagContainer">
<a class="soundTitle__tag sc-tag sc-tag-small" href="/home">Link-1</a>
</div>
<div class="soundTitle__tagContainer">
<a class="soundTitle__tag sc-tag sc-tag-small" href="/home">Link-2</a>
</div>
</div>
$('.link-redirect a').each(function () {
var $href = $(this).attr('href');
if ($(this).is([href="/home"]) {
alert($href);
}
});
Check this one :) It could help you.
If doesn't work just change if statement to:
$href
without any is, has blablabla. Give answer if works.
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
})
I am trying to get the data-position value using jquery on link click. Here is my code
<div class="dfd-article-tile-wrapper tile-position-6">
<div id="f_54ae4352d493b83429617a69" data-position="5" class="dfd-item tile">
<a class="dfd-item-wrap cxense" target="_blank" href="#">
<div class="imageholder">
<img src="#" alt="Depresjon - en oversikt " style="background-image: url(image.png);">
<div class="shader" style="">
<h2 class="dfd-tile-header">Hello World </h2>
<span class="source">xyz.com</span>
</div>
</div>
</a>
</div>
</div>
What I have tried so far to code this jquery code but it is not working;
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".dfd-item-wrap").click(function(event) {
var text = $(this).parents(".dfd-item").find('data-position').value
alert(text);
});
});
</script>
This is the jsfiddle link
http://jsfiddle.net/nt7243s6/
Need help and guidance. Thank you
You need to use .data() instead of .find() to get data attribute value. also use .closest(.dfd-item) or .parent() instead of .parents():
var text = $(this).closest(".dfd-item").data('position');
Complete Code:
$(".dfd-item-wrap").click(function(event) {
event.preventDefault();
var text = $(this).closest(".dfd-item").data('position');
alert(text);
});
Working Demo
The way you should access your data attributes is simply by data('position');
http://jsfiddle.net/nt7243s6/2/
I have found this code to make a menu that collapses when the user clicks on the minus sign within a page. But the menu shows all the contents within the Main Item when the page first loads. I would like to make the page show just the Main Item when the page loads. This is the code:
<script langauge="JavaScript" type="text/javascript">
function doMenu(item) {
obj=document.getElementById(item);
col=document.getElementById("x" + item);
if (obj.style.display=="none") {
obj.style.display="block";
col.innerHTML="[-]";
}
else {
obj.style.display="none";
col.innerHTML="[+]";
}
}
</script>
</head>
<body>
<a href="JavaScript:doMenu('main');" id=xmain>[+]</a> Main Item
<div id=main style="margin-left:1em">
<a href=#>Item 1</a><br>
<a href=#>Item 2</a><br>
<a href=#>Item 3</a>
</div>
<br>
</body>
</html>
I would be very grateful if someone could show me how to change the code to do this.
Thanks
window.addEventListener('load', function(){
document.getElementById('main').style.display = 'none';
}, false);
Change:
<a href="JavaScript:doMenu('main');" id=xmain>
to:
<a href="JavaScript:doMenu('main');" style="display: none;" id=xmain>
BTW, as some side notes the code you found is not very good. If this is intended as a professional project I wouldn't use it.
For one, I would change:
obj.style.display="block";
to:
obj.style.display="";
To avoid some bugs in certain browsers.
I think that changing
<div id=main style="margin-left:1em">
to
<div id=main style="margin-left:1em; display:none">
should work.