href attribute not working - javascript

HTML:
<a id="Change">Click to change</a>
<a href="image1_big.png" class="maneA blade">
<img id="maneP" src="image1.png"/></a>
Javascript:
<script>
$(function() {
$('#Change').click(function(){
$("#maneP").attr('src',"image2.png");
$(".maneA").attr('href',"image2_big.png");
return false;
});
});
</script>
Why is the href attribute not changing? when the src one is?!

<a id="Change" href="#">Click to change</a>
<a href="image1_big.png" class="maneA blade">
<img id="maneP" src="image1.png"/></a>
This one should work. I just removed the return false statement
$(function() {
$('#Change').click(function(){
$("#maneP").attr('src',"image2.png");
$(".maneA").attr('href',"image2_big.png");
var href = $(".maneA").attr('href');
alert(href);
});
});
http://jsfiddle.net/UwVRX/

Related

catching value of href and using this to replace other href

I have two div elements:
<div class="contact-img">
<a href="https://test.de" class="evcms-open-contacts" >
<img src="https://cdn-cache.envivo-connect.com/license/Tw3sZjz8v/p/xckYV8bESwsZ/80x80c/xckYV8bESwsZ.png?v=2.4.84-z3p37YEER-1467970717-yZUA33Hxn" alt="F. Alexander Kep"/>
</a>
</div>
<div class="contact-sm">
<a href="https://www.xing.com/profile/FfAlexander">
</div>
I want to get the href from my contact-sm class and replace the href of my contact-img class with Xing link. So if I click on the contact-img, the Xing Page of this person should open in a new window.
Thanks for your help
The best way would be to change your HTML. But if you "need" to have it the way you described then check this jQuery snippet:
($(function(){
$('.contact-img > a').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
$('.contact-sm > a')[0].click();
})
}))(jQuery);
The below code snippet will help you.
$(document).ready(function(){
$('.contact-img a').click(function(){
$(this).attr('href', $('.contact-sm a').attr('href'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contact-img">
<a href="https://test.de" class="evcms-open-contacts" >
<img src="https://cdn-cache.envivo-connect.com/license/Tw3sZjz8v/p/xckYV8bESwsZ/80x80c/xckYV8bESwsZ.png?v=2.4.84-z3p37YEER-1467970717-yZUA33Hxn" alt="F. Alexander Kep"/>
</a>
</div>
<div class ="contact-sm">
<a href="https://www.xing.com/profile/FfAlexander">
</div>
$(function() {
var xingHref = $(".contact-sm > a").attr("href");
$(".contact-img > a").attr("href", xingHref);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contact-img">
<a href="https://test.de" class="evcms-open-contacts">
<img src="https://cdn-cache.envivo-connect.com/license/Tw3sZjz8v/p/xckYV8bESwsZ/80x80c/xckYV8bESwsZ.png?v=2.4.84-z3p37YEER-1467970717-yZUA33Hxn" alt="F. Alexander Kep" />
</a>
</div>
<div class="contact-sm">
<a href="https://www.xing.com/profile/FfAlexander" />
</div>
In case above this should do:
var desiredHref = $('.contact-sm a').attr('href');
$('.evcms-open-contacts').attr('href', desiredHref);
This can be written in one line, of course, but for the sake of answer.
$(document).ready(function() {
$("#main1").attr("enter code herehref" , "https://www.xing.com/profile/FfAlexander");
});

show html element onclick event

I want to change the visibility of an element based onclick event of refreshA element
<a id="refreshA">Click here</a>
<a style="display: none;" id="refreshTab"> Info</a>
here is the js code
<script>
document.getElementById("refreshA").onclick(function () {
document.getElementById("refreshTab").style.display = 'block';
})
</script>
Try this:
function showhide(){
document.getElementById("refreshTab").style.display = 'block';
}
document.getElementById('refreshA').onclick=showhide;
See the working fiddle
function myFunction() {
document.getElementById("refreshTab").style.display = 'block';
}
<a id="refreshA" onclick="myFunction()">Click here</a>
<a style="display: none;" id="refreshTab"> Info</a>

add content through javascript

I am trying to create a page where when you click on any of the three images. It inserts the content into the empty div above the image links.
Here is my javascript code:
<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('img').click (function() {
$('.deal_content').append(<img src="deal_content.fw.png" width="587" height="299" alt="Your Deals!" />);
return false;
});
});
</script>
and this is the HTML it is to effect:
<div class="deal_content">
</div>
<div id="imagelink">
<a href="#">
<img src="for_men_btn.fw.png" width="200" height="87" alt="For Men" />
</a>
<a href="#">
<img src="for_couples_btn.fw.png" width="200" height="87" alt="For Couples" />
</a>
<a href="#">
<img src="for_teens_btn.fw.png" width="200" height="87" alt="For Teens" />
</a>
</div>
I wish the new image to be put in the deal_content class div.
In your append method, if you put double quotes around the HTML and replace the current quotes with single quotes, it should work. Append takes a string or a JQuery selector, not markup.
You need to make the element a string in order to pass it through append
$(document).ready(function() {
$('img').click (function() {
$('.deal_content').append('<img src="deal_content.fw.png" width="587" height="299" alt="Your Deals!" />');
return false;
});
});
Considerting this is what you want:
I wish the new iamge to be put in the deal_content class div.
You are almost there:
In the Javascript that you have:
$(document).ready(function () {
$('img').click(function () {
$('.deal_content').append();
return false;
});
});
you need a html() instead of append(). And insert a img tag, and grab the srcfrom the image thatw as clicked on.
$('.deal_content').html("Image \"" + $(this).attr("src") +"\" here: <img src=" + $(this).attr("src") + "/>");
See http://jsfiddle.net/nivas/PA63e/
$('#imagelink').on('click', 'img', function(){
$('.deal_content').append( this );
});
or if you want to duplicate the image:
$('#imagelink').on('click', 'img', function(){
$('.deal_content').append( this.cloneNode() );
});
is that what you want? This way it will only move the images that are inside imagelink element

HTML5: how do I disable all links after any one of them are clicked?

This is what my current link looks like:
<a href="/board/take_turn?id=313&x=1&y=2" data-remote="true" class="square">
<span class="ttt_square">
</span>
</a>
I know it's not ajax because the jQuery ajax:success type events are never invoked.
This is teh site that I'm working on: http://ttt-ai.heroku.com/
If you want to disable all links on a page you can use this:
$("a").live('click', function(e) {
e.preventDefault;
return false;
});
Or you can target specific links like this:
$("a.disabledLink").live('click', function(e) {
e.preventDefault;
return false;
});
<a href="/board/take_turn?id=313&x=1&y=2" data-remote="true" class="disabledLink">
<span class="ttt_square"> </span>
</a>
Try this,
<script type="text/javascript">
$(function() {
$('a').click(function() {
$(this).attr('href', 'javascript:void(0);');
});
});
</script>
And if you will add a class to your link for being more specific; let's say
<a class="disableAfterClick" href="/board/take_turn?id=313&x=1&y=2" data-remote="true"> <span class="ttt_square"> </span> </a>
than
<script type="text/javascript">
$(function() {
$('a.disableAfterClick').click(function() {
$(this).attr('href', 'javascript:void(0);');
});
});
</script>
You can use e.preventDefault() .
var $a = $("a");
$a.click(function() {
$a.click(function(e) {
e.preventDefault();
}
});
no need to traverse twice, or if you do
$("a").live("click", function() {
$("a").click(function(e) {
e.preventDefault();
}
});

javascript change image, href onclick = looking for simpliest method

What is the simpliest method to change image src, when I click on a href -with JQuery?
img id="my_image" class="icon" src="1.png" alt="1.png" border="0" />
< a href="#" id="1">
< a href="#" id="2">
< a href="#" id="3">
1.png, 2.png, 3.png
Href is OK with # or would be better to placce here some JS?
You should .bind()help a .click()help event listener on your anchors. In that listener, you change the src attribute by invoking .attr()help
$('a').click(function(event) {
$('#my_image').attr('src', function(i, src) {
return event.target.id + '.png';
});
return false;
});
<img id="my_image" class="icon" src="1.png" alt="1.png" border="0" />
<a onclick="changeImage(this)" href="#" id="1">1</a>
<a onclick="changeImage(this)" href="#" id="2">2</a>
<a onclick="changeImage(this)" href="#" id="3">3</a>
<script>
function changeImage(thisDiv){
document.getElementById('my_image').src = thisDiv.id+".png"
}
</script>
Edit: Didn't see the jQuery requirement!
This ought to work:
<a href="javascript:$('#my_image').attr('src', '2.png');" id="1">
$('a').click(function(e) {
var id = this.id;
$('#my_image').attr('src', id + '.png');
e.preventDefault();
});

Categories