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.
Related
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
})
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!
I'm stuck with a menu I'd love to add to my website.
I have branched my work in:
Commercial
Fashion
Music
Portrait
So I have a menu like this one above.
When I click on one section, let's say "Commercial" I want all the others to be display:none.
Have a look at this FIDDLE: http://jsfiddle.net/bfevLsj2/8/
$(document).ready(function() {
$("#commercial").click(function() {
$(".commercial").toggleClass("show");
$(".fashion").toggleClass("hid");
$(".music").toggleClass("hid");
$(".portrait").toggleClass("hid");
});
});
You need siblings() width jquery
Description: Get the siblings of each element in the set of matched elements, optionally filtered by a selector.
$("[id]").click(function(){ //onclick on element with ID
var selected = $(this).attr("id"); // save the value of that ID
$("."+ selected).show().siblings("[class]").hide()//find the class with the same value as class and show it then find all siblings class and hide them
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="commercial">Commercial</div>
<div id="fashion">Fashion</div>
<div id="music">Music</div>
<div id="portrait">Portrait</div><br />
<div class="commercial">C</div>
<div class="fashion">F</div>
<div class="music">M</div>
<div class="portrait">P</div>
BUT a better approach would be to use data-*
$("[data-tab]").click(function(){
var current = $(this).attr("data-tab");
$("[data-content="+ current +"]").show().siblings("[data-content]").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div data-tab="commercial">Commercial</div>
<div data-tab="fashion">Fashion</div>
<div data-tab="music">Music</div>
<div data-tab="portrait">Portrait</div><br />
<div data-content="commercial">C</div>
<div data-content="fashion">F</div>
<div data-content="music">M</div>
<div data-content="portrait">P</div>
AGAIN it is better to use pure javascript
function runClick (event) {
var current = this.getAttribute("data-tab");
for( var content = 0; content < dataContent.length; content++) {
dataContent[content].style.display = "none"
}
document.querySelector("[data-content="+ current + "]").style.display = "block"
}
var dataTabs = document.querySelectorAll("div[data-tab]"),
dataContent = document.querySelectorAll("div[data-content]");
for(var tab = 0; tab < dataTabs.length; tab++){
dataTabs[tab].addEventListener("click", runClick , false);
}
<div data-tab="commercial">Commercial</div>
<div data-tab="fashion">Fashion</div>
<div data-tab="music">Music</div>
<div data-tab="portrait">Portrait</div><br />
<div data-content="commercial">C</div>
<div data-content="fashion">F</div>
<div data-content="music">M</div>
<div data-content="portrait">P</div>
HTML:
<div id="commercial" class="menuItem">Commercial</div>
<div id="fashion" class="menuItem">Fashion</div>
<div id="music" class="menuItem">Music</div>
<div id="portrait" class="menuItem">Portrait</div><br />
<div class="commercial content">C</div>
<div class="fashion content">F</div>
<div class="music content">M</div>
<div class="portrait content">P</div>
JavaScript:
$(document).ready(function(){
$(".menuItem").click(function(){
var id = this.id;
$('.content').removeClass('show').addClass('hid');
$('.'+id).addClass('show').removeClass('hid');
});
});
CSS:
.hid {
display:none;
}
.show {
display:block;
}
Fiddle
Have a look at this fiddle, think it's what you want
Essentially you can use .toggle() to traverse and show/hide according to whether it's the one you want to show.
$(function(){
// find all the links that you can click
$("div.clickable a").click(function(e) {
// when they're clicked, find the identifier of
// the tab/div you want shown
var clickedId = $(e.target).parent("div").attr("id");
// traverse all of the divs and show/hide according
// to whether it's the tab you want
$("div.section").each(function(index, div) {
$(div).toggle($(div).hasClass(clickedId));
});
});
});
And the HTML:
<div id="commercial" class="clickable">Commercial</div>
<div id="fashion" class="clickable">Fashion</div>
<div id="music" class="clickable">Music</div>
<div id="portrait" class="clickable">Portrait</div>
<br />
<div class="commercial section">C</div>
<div class="fashion section">F</div>
<div class="music section">M</div>
<div class="portrait section">P</div>
HTH
Edited to add an "ALL" link in this fiddle
$("div.clickable a").click(function(e) {
// when they're clicked, find the identifier of
// the tab/div you want shown
var clickedId = $(e.target).parent("div").attr("id");
// traverse all of the divs and show/hide according
// to whether it's the tab you want
$("div.section").each(function(index, div) {
$(div).toggle($(div).hasClass(clickedId) || clickedId=="ALL");
});
});
After adding this to the list of clickable divs:
<div id="ALL" class="clickable">
ALL
</div>
Your could that more easy like:
<div class="link" id="commercial">Commercial</div>
<div class="link" id="fashion">Fashion</div>
<div class="link" id="music">Music</div>
<div class="link" id="portrait">Portrait</div><br />
<div class="commercial elem">C</div>
<div class="fashion elem">F</div>
<div class="music elem">M</div>
<div class="portrait elem">P</div>
<script type="text/javascript">
$(document).ready(function(){
$(".link").click(function(){
var id = $(this).attr('id');
$('.elem').hide();
$('.' + id).show();
});
});
</script>
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/
Here is the code I have. This can not be changed, I have to work with the structure as is.
<div class="container">
<div class="contain_box">
<a href="something">
<img class="my_img" src="some_image">
</a>
<div class="variants">
<div class="var" rel="123" data="321"></div>
<div class="var" rel="1234" data="4321"></div>
</div>
</div>
<div class="contain_box">
<a href="something">
<img class="my_img" src="some_image">
</a>
<div class="variants">
<div class="var" rel="456" data="654"></div>
<div class="var" rel="4567" data="7654"></div>
</div>
</div>
<div class="contain_box">
<a href="something">
<img class="my_img" src="some_image">
</a>
<div class="variants">
<div class="var" rel="789" data="987"></div>
<div class="var" rel="7890" data="0987"></div>
</div>
</div>
</div>
What I need is when I click on one of the images it will pull the rel and the data from its first variant, add those attributes to the image tag. Right now I am trying this and I only get the undefined. I am using the undefined to clear out those variables from the current values.
$(document).on("click", '.my_img', function(e){
e.preventDefault();
data = undefined;
rel = undefined;
var new_rel = $('.var').attr('rel');
var new_data = $('.var').attr('data');
$('.my_img').attr('rel', new_rel);
$('.my_img').attr('data', new_data);
data = $(this).attr('variant');
rel = $(this).attr('rel');
}
Any insights or help would be awesome! Thanks in advance!
Find the parent container (.contain_box) relative to the clicked image, then the first variant from there:
Demo
$(document).on("click", '.my_img', function(e){
e.preventDefault();
var firstVariant = $(this).closest('.contain_box').find('.var').first();
data = firstVariant.attr('rel');
rel = firstVariant.attr('data');
$(this).attr({
data : data,
rel : rel
});
console.log(data);
console.log(rel);
});