I have the following HTML code. How can create a link on the entire div which when people click on it would take them to a specific link? basically an "<a></a>" tag on the entire DIV
<div class="unique">
<div>
<p>Lines of text</p>
<p>Extra lines of text</p>
</div>
</div>
here is my jQuery script i have come up with, i just have no idea how to make the link in it
<script>
$( ".unique" ).mouseover(function() {
$(this).LINK_TO_A_SPECIFIC_URL;
});
</script>
I know this is not quite what you asked for. But, #undefined made a good point in his comment to your post.
So instead of just auto forwarding to another page on a mouseover why not (if it's not clear to the user) advise that clicking will take them somewhere else. That's just nicer.
Your markup:
<div class="unique">
<div>
<p>Lines of text</p>
<p>Extra lines of text</p>
</div>
</div>
jQuery:
var fetchContent = $('.unique').html();
$(document).ready(function(){
$('.unique').on('mouseenter',function(){
$(this).html('Click here and we\'ll go somewhere else!');
});
$('.unique').on('mouseleave',function(){
$(this).html(fetchContent);
});
$('.unique').on('click',function(){
location.href='go-to-your-url';
});
});
Here's a fiddle: http://jsfiddle.net/6b8ku/1/
How about this:
<script>
$( ".unique" ).click(function() {
window.location = LINK_TO_A_SPECIFIC_URL;
});
</script>
You can change the mouse icon, when mouse over the div :
<script>
$( ".unique" ).mouseover(function() {
$(this).css( 'cursor', 'pointer' );
});
</script>
here is the JSFiddle:
http://jsfiddle.net/9zyeX/
Try this, should wrap the whole lot in an anchor.
I'm not sure if its semantic but should work
$('.unique').after(
''+$('.unique').html()+''
).remove();
Demo
Related
For example,
I have about 200 divs on my website:
<div>LINK</div>
<div>LINK</div>
.....
<div>LINK</div>
I will click the links in each div in turn and I would like to hide and I would like to hide every clicked div. How to do this???
You will have to employ javascript. Arguably the most popular approach would be to use jQuery with corresponding code along the lines of:
$("#link").click(function(){
$(this).parent("div").hide();
})
You can use jquery function hide() like this.
Exp:
$("div").on('click',function(){
$(this).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="link">LINK</div>
<div id="link">LINK</div>
.....
<div id="link">LINK</div>
HTML
div>LINK</div>
<div>LINK</div>
.....
<div>LINK</div>
js
$(document).ready(function(){
$("div").on('click',function(){
$(this).hide();
});
});
Okay so I have a very limited amount of knowledge with this and I can not find my answer anywhere. What I am trying to do is create multiple buttons that toggle information. So when the first toggle is clicked div 1 is toggled, when i click the second toggle div two opens and preferably div 1 closes. My code is very basic I am very new to this. Right now no matter what values I input into the toggle area both divs close. Thank you and I hope this makes sense.
Here is my code:
<script>
$(document).ready(function(){
$("button").click(function(){
$("div.house").toggle();
});
});
</script>
<button>Toggle</button>
<div class="house">
<p>SAMPLE TEXT ETC...</p>
</div>
<button>Toggle</button>
<div class="tumble-by">
<p>SAMPLE TEXT ETC...</p>
</div>
You can select the next sibling:
$("button").click(function(){
$(this).next().toggle();
});
In the above code, JavaScript this keyword refers to the clicked element. $(this) creates a jQuery collection and .next() method selects the very next sibling of the collection's element.
I agree too, that first you need to hide all divs:
$("button").click(function () {
$('div').hide();
$(this).next().toggle();
});
<script>
$(document).ready(function () {
$(document).on("click", ".js-toggle__button", function (e) {
$(".js-toggle__text").hide();
$(this).next(".js-toggle__text").show();
});
});
</script>
<button class="toggle__button js-toggle__button">Toggle</button>
<div class="toggle__text js-toggle__text">
<p>SAMPLE TEXT 1 ETC...</p>
</div>
<button class="toggle__button js-toggle__button">Toggle</button>
<div class="toggle__text js-toggle__text">
<p>SAMPLE TEXT 2 ETC...</p>
</div>
It's better to use uniquely defined identifiers when you accessing elements from JS (and don't use them for CSS — use separate names).
Your HTML code some day can be changed dramatically and JS will work anyway because it depends on identifiers but not on structure or on tag names.
i have two div's:
<div class="component_wrapper">
</div>
<div class="component_wrapper">
</div>
Jquery code:
<script type="text/javascript">
$(document).ready(function(){
$(".component_wrapper").hide();
$(".component_expand").show();
$('.component_expand').click(function(){
$(".component_wrapper").slideToggle();
});
});
</script>
I try every time I click on "component expand" one DIV open. Now open two
I'd be happy with who they help me on
You need to make your selector specific, use next.
$(this).next().slideToggle();
Try:
$(document).ready(function(){
$(".component_wrapper").hide(); //You can do this using css rule itself
$(".component_expand").show().click(function(){
$(this).next().slideToggle();
});
});
Demo
Use an instance of this and .next
$('.component_expand').click(function(){
$(this).next(".component_wrapper").slideToggle();
});
I have a div in which I have a paragraph and a button like this:
<div id="my_div">
<p>This is a paragraph</p>
<button class="my_btn">Click here!</a>
</div>
The content inside my div is loaded via Ajax. Now let's say that I have something like this in the header of my page to test the button:
$(function(){
$(document).on('click', '.my_btn', function(){
alert('my button works!');
});
});
The problem I'm having is that everytime the content is loaded in my div with my paragraph and my button, when I click on my button I get my alert('my button works!') the same amount of time, meaning, if the content is loaded 100 times, I get my alert 100 times, any idea how I can fix this issue and why this is happening please?
Thank you
This is a bit of a hack but should work
$(function(){
$(document)
.off()
.on( 'click', '.my_btn', function(){
alert('my button works!');
});
});
can you post the ajax call and how you are loading your div for a more detailed explanation.
That said, here is some sample code that seems to work fine. fiddle here
<div id='data' style='display:none;'>
<p>This is a paragraph</p>
<button class="my_btn">Click here!</a></div>
<div id='target'></div>
<button class='load'>this load works</button>
$(document).ready(function() {
$(document).on('click', '.my_btn', function(){
alert('my button works!');
});
$('.load').click(function() {
$('#target').html($('#data').html());
});
});
I have a page that contains multiple lines like this each wrapped within <div id="result">;
<div id="result">Link Name<iframe src="http://www.domain.com/" style="width:285px;height:285px;border:0px;margin:0px" scrolling="no"></iframe></div>
I am currently using the following jQuery to display the <a> tag on hover;
$(document).ready(function(){
$('#result iframe').hover(function(){
$('#result a').fadeIn(200);
},function(){
$('#result a').fadeOut(200);
});
});
However, the hover only works on the first <div id="result"> and also shows the <a> tags for every <div id="result"> rather than just the one the user hovered on.
How can I fix this?
You can try this - Changing results to a class
$(document).ready(function(){
$('.result').hover(function(){ // <-- change to class.. and bind to wrapper div
$(this).find('a').fadeIn(200);
},function(){
$(this).find('a').fadeOut(200);
});
});
Assuming I understand your weird thing :
Html
<div class="result">
Link Name
<iframe src="http://www.domain.com/" style="width:285px;height:285px;border:0px;margin:0px;background:red;" scrolling="no"></iframe>
</div>
<div class="result">
Link Name
<iframe src="http://www.domain.com/" style="width:285px;height:285px;border:0px;margin:0px;background:red;" scrolling="no"></iframe>
</div>
jQuery
$('.result iframe').hover(function(e) {
$(this).parent().find('a').fadeIn();
}, function() {
$(this).parent().find('a').fadeOut();
});
See fiddle
Edit with hover.
Nb: e.preventDefault(); on click event if you don't want the link to submit by clicking.
Try it like this:
$(document).ready(function(){
$('#result iframe').hover(function(){
$('#result a').fadeIn(200);
$('#result a').fadeOut(200);
});
});
If you want to catch only the <a> tags not for every, but for a specific <div id="result">, you can try to specify that in your jQuery code, for example:
$(document).ready(function(){
$('#result:nth-child(1) iframe').hover(function(){
$('#result:nth-child(1) a').fadeIn(200);
},function(){
$('#result:nth-child(1) a').fadeOut(200);
});
});
So this will target only the first div with id="result". Catch the others by changing nth-child(0) - nth-child(1) - nth-child(2) ...
Another solution:
You can also set an id for every <a> tag or also, you can use a class to catch the specific element you need.