My generated portion of page source is
<a target="_blank" href="/img/image001.png">
<img width="286" height="171" alt="" src="/img/image001.png">
</a>
and I need on page load to replace this a target with a rel so above link should be
<a rel="lightbox" href="/img/image001.png">
<img width="286" height="171" alt="" src="/img/image001.png">
</a>
I trid with after </body>
<script>
$(function() {
$('a[_blank]').removeAttr('_blank').attr("rel=","lightbox");
});
</script>
You need to use the attribute equals selector - you need to use the attribute name along with attribute value, also to remove you need to use the attribute name not value.
$('a[target="_blank"]').removeAttr('target').attr("rel","lightbox");
Your code looks for an anchor element with attribute _blank and then removes it, a anchor element like <a _blank href="/img/image001.png">
Also as #PaulDraper suggested move the script inside the body element
$(document).ready({
$('a[target=_blank]').attr('rel', 'lightbox');
})
Related
is it possible with jquery to use DOM to find an a link inside a div, such as
<div id="something">
<a href="somewhere" title="something">
<img>
</a>
</div>
and append a datum to the link - in my case a google events tag:
onClick="_gaq.push(['_trackEvent', ' PDF Downloads', ‘Click', 'SEO For Beginners');"
dynamically to the a link so that the end result would be:
<div id="something">
<a href="somewhere" title="something" onClick="_gaq.push(['_trackEvent', ' PDF Downloads', ‘Click', 'SEO For Beginners');">
<img>
</a>
</div>
thank you for your time; any help would be greatly appreciated
let tag = $('#something').find('a');
tag[0].onClick = "_gaq.push(['_trackEvent', ' PDF Downloads', ‘Click', 'SEO For Beginners')";
you find the div you need by id, and by using function find() you serach your a tag.
After that you just refer to the DOM object of your tag by tag[0] and set onClick whatever you like.
It would be better if you just catch desired element with selector and bind a function to it, instead of binding a function directly in DOM.
$('#something a').click(function() {
_gaq.push(['_trackEvent', ' PDF Downloads', 'Click', 'SEO For Beginners']);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="something">
<a href="somewhere" title="something">
<img>
</a>
</div>
I'm just learning Javascript after starting out in PHP.
I'm trying some basic stuff, but for some reason the below code doesn't act as I expect. I have researched it, and from what I can tell it should work.
<script type="text/javascript">
showIndex=4;
function test(){
showIndex++;
alert(showIndex);
}
</script>
I am calling the script with an image:
<div style="display:inline-block;margin-left:25px;">';
<a href="" onclick="test()" ><img src="_images/next.png" width="100" /> </a>
</div>
It runs fine the first time, but when I hit the button again, it still has the initial variable plus one. (which makes me think it's acting as a local variable...)
It seem so straight forward... what am I doing wrong?
Remove the <a> and have the event on the image, it's refreshing the page. You don't need to have it wrapped in an <a> tag for a onclick event:
<img src="_images/next.png" onclick="test()" width="100" />
The empty link just reloads the page. You can insert # in it:
<div style="display:inline-block;margin-left:25px;">
<a href="#" onclick="test()" >www </a>
</div>
Then everything works as intended.
The empty href attribute on the <a> tag is messing you up. Either remove the href attribute, or change it to # or javascript:void(0)
Alternatively, you can call your method from the href attribute like this
<div style="display:inline-block;margin-left:25px;">';
<a href="javascript:test()" ><img src="_images/next.png" width="100" /> </a>
</div>
I know this is super simple, but I can't work it out (I'm a designer).
I want to simply populate the href attribute value of the <a> tag, with the value of the src attribute of the <img> tag. So the image links to itself basically.
the image src will be updated through a super simple CMS and I want the link to dynamically update, instead of the user having to update the URL also.
I tried something like this, but it didn't work.
<a rel="lightbox[job1]" href="()document.getElementById("gal1_img1").src">
<img id="gal1_img1" src="images/gallery/job1/image-1.jpg">`enter code here`
</a>
You cannot inline JavaScript inside attributes the way you have currently. You can add a script to the page to do this:
<a id="link" rel="lightbox[job1]" href="#">
<img id="gal1_img1" src="images/gallery/job1/image-1.jpg">`enter code here`
</a>
<script>
document.getElementById("link").href = document.getElementById("gal1_img1").src;
</script>
try this as your <a>'s href:
href="javascript:window.location=this.getElementsByTagName('img')[0].src;"
Assuming there's only ever one image inside these <a> tags, this should work for anyone who's NOT running with javascript disabled.
try this.
var att = $('#gal1_img1').attr('src');
$("a[rel*='lightbox[job1]']").attr('href',att);
there is html structure:
<a onclick="setString()">
<img alt="no" />
</a>
I need to get attribute of a,that had been clicked,e.g. alt.
How to know with setString() js function ,
image with what alt attribute is clicked?
I assume,that somehow with this,but don't know how.
onclick="setString(this)
///Javascript Code:
function setString(element){
var value = element.children[0].alt;
}
I would change my HTML to remove the bits that aren't needed...
<img alt="no" onclick="setString(this.alt);" />
Rather than wrapping the image in an anchor tag, style it with CSS if you want...
cursor: pointer;
What is the best way to set the href attribute of the <a> tag at run time using jQuery?
Also, how do you get the value of the href attribute of the <a> tag using jQuery?
To get or set an attribute of an HTML element, you can use the element.attr() function in jQuery.
To get the href attribute, use the following code:
var a_href = $('selector').attr('href');
To set the href attribute, use the following code:
$('selector').attr('href','http://example.com');
In both cases, please use the appropriate selector. If you have set the class for the anchor element, use '.class-name' and if you have set the id for the anchor element, use '#element-id'.
In jQuery 1.6+ it's better to use:
$(selector).prop('href',"http://www...") to set the value, and
$(selector).prop('href') to get the value
In short, .prop gets and sets values on the DOM object, and .attr gets and sets values in the HTML. This makes .prop a little faster and possibly more reliable in some contexts.
Set the href attribute with
$(selector).attr('href', 'url_goes_here');
and read it using
$(selector).attr('href');
Where "selector" is any valid jQuery selector for your <a> element (".myClass" or "#myId" to name the most simple ones).
Hope this helps !
Small performance test comparision for three solutions:
$(".link").prop('href',"https://example.com")
$(".link").attr('href',"https://example.com")
document.querySelector(".link").href="https://example.com";
Here you can perform test by yourself https://jsperf.com/a-href-js-change
We can read href values in following ways
let href = $(selector).prop('href');
let href = $(selector).attr('href');
let href = document.querySelector(".link").href;
Here you can perform test by yourself https://jsperf.com/a-href-js-read
<style>
a:hover {
cursor:pointer;
}
</style>
<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".link").click(function(){
var href = $(this).attr("href").split("#");
$(".results").text(href[1]);
})
})
</script>
<a class="link" href="#one">one</a><br />
<a class="link" href="#two">two</a><br />
<a class="link" href="#three">three</a><br />
<a class="link" href="#four">four</a><br />
<a class="link" href="#five">five</a>
<br /><br />
<div class="results"></div>