I have a link with image. And I want to get Link Title on a click.
<div class="summary">
<form class="variations_form " method="post" enctype="multipart/form-data"">
<div class="ql-visual-attributes">
<div class="va-pickers">
<a class="va-picker-image" data-attribute="pa_material-and-color" title="Link Title">
<img class="va-image" src="img.jpg">
</a>
</div>
</div>
</form>
</div>
Also I want to use link "data-attribute". So I try
$(document).ready(function(){
$(".summary .variations_form .ql-visual-attributes .va-pickers a[data-attribute='pa_Attribute']").click(function(){
var link_title=$(this).attr("title");
});
});
But it doesn't work
Thanks
your jquery selector looks way too complicated, but it's nog a big deal.
Your link has data-attribute with value "pa_material-and-color", but in selector you made a mistake "a[data-attribute='pa_Attribute']"
so just change selector to $(".summary .variations_form .ql-visual-attributes .va-pickers a[data-attribute='pa_material-and-color']")
I think your are selecting wrong data-attribute. You can do it like following using link class.
$(".va-picker-image").click(function(){
var link_title=$(this).attr("title");
});
Related
I have lots of pages with lots of links. I want to replace some specific links with another link.
what I wish to do here is find the href attribute of <a> and replace it with desired link
Here is the HTML code
<div class="one">
<div class="item">
click
</div>
</div>
and I want to change HTML to
<div class="one">
<div class="item">
click
</div>
</div>
One way could be is to use the href value to find the anchor
var a = document.querySelector('a[href="somelink.com"]');
if (a) {
a.setAttribute('href', 'replacedlink.com')
}
<a href="somelink.com" title="this link">
</a>
Try this
$('.item a').attr('href').replace('somelink.com', "replacedlink.com");
OR
$(".item a[href='somelink.com']").attr("href", "replacedlink.com");
With jQuery 1.6 and above you should use:
$(".item a[href='somelink.com']").prop("href", "replacedlink.com");
Try This:
$(".item a[href='somelink.com']").attr('href','replacedlink.com');
Use .attr attribute to do this. Please follow below code::
$('.item a[href="somelink.com"]').attr('href', 'replacedlink.com');
For more information related to .attr attribute please go through this link.
Here try this:
https://jsfiddle.net/2sqxaxqs/
$('a.btn').click(function(e){
e.preventDefault;
var newHref = 'http://www.google.com';
$('a.theLink').attr('href', newHref);
})
You can target the href using jQuery's attr.
$('a[href="somelink.com"]').attr('href', 'replacedlink.com');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">
<div class="item">
click
</div>
</div>
I have what is probably an incredibly simple question, but I don't know how to resolve it and any help would certainly be appreciated.
Here's my code;
<div id='div2'>
<div class="DoYouHaveADirtBikeForSaleBox" id="DoYouHaveADirtBikeForSaleBox">
<h2>Got A Bike to Sell?</h2>
<p class="BikeForSaleButton">
Yes
</p>
<p class="BikeForSaleButtonNo">
<a onclick="javascript:var div = document.getElementById('div2');div.parentNode.removeChild(div);">No</a></p>
</div>
</div>
For a reason unbeknownst to me, the "No" link is not changing the cursor to a hand when hovered over but I haven't a clue how to address this.
I would suspect the problem is arising because the NO link doesn't have a href but being that I'm very novice I don't know how to remedy the situation so I ask that someone could please show me how to resolve this and I thank you in advance.
because you have no href attribute on the link. Add one and the cursor will change.
NITPICk: drop the javascript: it is not needed.
Add href ="#" to make it look like a link and not to navigate to a different page
<div id='div2'>
<div class="DoYouHaveADirtBikeForSaleBox" id="DoYouHaveADirtBikeForSaleBox">
<h2>Got A Bike to Sell?</h2>
<p class="BikeForSaleButton">
Yes
</p>
<p class="BikeForSaleButtonNo">
<a onclick="javascript:var div = document.getElementById('div2');div.parentNode.removeChild(div);" href ="">No</a></p>
</div>
</div>
The onclick event handler needs to supress the links default behavior to navigate to what's specified in the href attribute.
so you need href="#" also you dont need that javascript:
It should be like this:
<p class="BikeForSaleButtonNo">
No</p>
Here is a link to show the working code:
http://jsfiddle.net/dkU7B/1/
Edit: Forgot to mention another thing you can do is get rid of the onclick entirely and just use the href with javascript like so, but now you will need to use the javascript: just a neat trick.
No
You need an href="#", and I would separate your HTML and JS, it's just cleaner IMO:
<script>
var div = document.getElementById('div2');
function rmv() {
div.parentNode.removeChild(div);
}
</script>
<div id='div2'>
<div class="DoYouHaveADirtBikeForSaleBox" id="DoYouHaveADirtBikeForSaleBox">
<h2>Got A Bike to Sell?</h2>
<p class="BikeForSaleButton">
Yes
</p>
<p class="BikeForSaleButtonNo">
No</p>
</div>
</div>
I have a div as follows:
<div class="slide_items">
<div class="slide_item"><img src="image"/></div>
<div class="slide_title">title</div>
</div>
What i want to do is, instead of having URL in each item in slide_items div. I want user to click on <div class="slide_items">. I want the slide_items to be clickable as the div itself, rather than putting a href in every inner div.
How can i do this?
The proper way would be to use a single link (but change the inner elements to span for validness)
<a href="/url" class="slide_items">
<span class="slide_item"><img src="image"/></span>
<span class="slide_title">title</span>
</a>
And make sure that they are treated as block elements from the css
a.slide_items, a.slide_items span{
display:block;
}
If you have to go the div way, then use
<div class="slide_items" data-href="/url">
<div class="slide_item"><img src="image"/></div>
<div class="slide_title">title</div>
</div>
and add a script (since you use jquery)
$(function(){
$('.slide_items').click(function(){
var href = $(this).data('href');
window.location = href;
});
});
You can add onclick="window.open('google.com')" event to simulate a link to your div.
In the case where you want the entire div to appear to a be a link, you will want to change your cursor. Add style="cursor: hand; cursor: pointer;" to your div as well.
You can add an onclick property to the div:
<div class="slide_items" onclick="location.href='/url';" >
<div class="slide_item"><img src="image"/></div>
<div class="slide_title">title</div>
</div>
you can use some simple javascript to get this done
use the onclick() event
so your HTML code looks something like
<div class="slide_items">
<div class="slide_item" onclick="function1()"><img src="image"/></div>
<div class="slide_title" onclick="function2()">title</div>
</div>
your javascript code will look like
function function1(){
// insert your code here
}
function function2()
{
// insert your code here
}
the code can be done in many ways depending on what you want , if you just want to redirect to another div , use the display attributes alternating between none and block , more reference here documentation .
if you want to redirect to another site you can use
window.open("your url")
<div class="slide_items">
<div class="slide_item"><img src="image" alt="my image" /></div>
<divclass="slide_title">title</div>
</div>
js:
$(function() {
$('.slide_items').click(function() {
window.location = 'http://www.google.com';
});
});
css:
.slide_items:hover {
cursor: pointer;
}
http://jsfiddle.net/68Smw/6/
The redirect isn't working in jsfiddle, but it should work for you.
if you want it to likley say: Click here to enter site:
<div>
Click here to enter my site!
</div>
I have tried this several different ways but can't seem to figure out how to toggle the span's class from "die2" to "die3" along with the toggle of the div's display style from 'block' to 'none'. Anybody have any solutions? (Basically when the page loads, this ad will be displayed and when you click the red x (die2) the add disappears and the red x should change to a green check box (die3). Here's the code that does work for the div toggle that I'm using.
<div id="mydiv" style="display:block">
<img src='http://www.test.com/mypopad.png' alt='' />
</div>
<span id="myspan" class="die2"><!-- --></span>
Thanks guys, I think I got it going now ... I added another class to the stylsheet and then just reused what JKing answered. I could get the divHide to work but it would just add the class and remove the class. So I decided to just add a divShow and use the same code for the span. Thanks guys!
<div id="mydiv" class="divShow">
<img src='http://www.northpointemobilehomesales.com/wp-content/gallery/support-images/big-daves-sidebar-ad_03.png' alt='' />
</div>
<a href="javascript:;" onmousedown="document.getElementById('mydiv').classList.toggle('divHide');document.getElementById('mydiv').classList.toggle('divShow');document.getElementById('myspan').classList.toggle('die2');document.getElementById('myspan').classList.toggle('die3');">
<span id="myspan" class="die2"><!-- --></span>
</a>
Since the above did not work in IE I Used Sven's code and got it to work, we were missing the # when we called the #mydiv...
<script type="text/javascript">
$("document").ready(function(){
$("#myspan").click(function(){
$(this).toggleClass("die2").toggleClass("die3");
$("#mydiv").toggle();
});
});
</script>
<div id="mydiv" class="">
<img src='http://www.northpointemobilehomesales.com/wp-content/gallery/support-images/big-daves-sidebar-ad_03.png' alt='' />
</div>
<a href="#">
<span id="myspan" class="die2"><!-- --></span>
</a>
I'll work with this code for a bit and see if it will suite my needs. :) Thanks guys!
<script type="text/javascript">
$("document").ready(function(){
$("#myspan").click(function(){
$(this).toggleClass("die2").toggleClass("die3");
$("#mydiv").toggle();
});
});
</script>
That's it
You don't need jQuery, though you might like it. All you need to do is use an element's classList object.
You can do a lot of cool things with classList:
el.classList.add("myClassName") //adds class (does nothing if el already has that class)
el.classList.remove("myClassName") //removes class (does nothing if el doesn't have that class)
el.classList.toggle("myClassName") //toggles class
el.classList.contains("myClassName") //returns true if el has that class, false if not.
Here's a modified version of your code, as an example of what you could do - though I'm not sure it's exactly what you want to do, but it should point you in the right direction.
<div id="mydiv" class="divHide">
<img src='http://www.test.com/mypopad.png' alt='' />
</div>
<a href="javascript:;" onmousedown="document.getElementById('mydiv').classList.toggle('divHide');document.getElementById('myspan').classList.toggle('die2');document.getElementById('myspan').classList.toggle('die3');">
<span id="myspan" class="die2"><!-- --></span>
</a>
(I'm toggling a class on the div as well to show/hide it, instead of your if/else checking of the style attribute.)
I sugest jQuery:
mydiv.toggle() or mydiv.removeClass("die2").addClass("die3")
I'm trying to use next() to toggle a div. The problem is that the "trigger" is in a different div than the one I want to toggle. An example that works:
$("span.trigger").click(function(){
$(this).next("div.task_description").slideToggle("fast");
});
<span class="trigger">The trigger</span>
<div class="task_description ">
some content
</div>
But the way I need the html setup is:
<div>
<span class="trigger">The trigger</span>
</div>
<div class="task_description ">
some content
</div>
That doesn't work... any suggestions?
In this case you need a .parent() as well, like this:
$("span.trigger").click(function(){
$(this).parent().next("div.task_description").slideToggle("fast");
});
Alternatively, if your nesting may change, you can go up to the <div> you're in, like this:
$(this).closest("div").next("div.task_description").slideToggle("fast");