We Keep Coding

jQuery: Create link on mouseover/hover

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

Show/Hide two Divs with Jquery

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();
});

Use the same JavaScript code for different divs

This is my JavaScript code:
Javascript
<script> $(document).ready(function(){
$("#showButton").click(function(){ $("#showContent").toggle("slow");
}); }); </script>
The question is how I can use same code for different <div>
Like using this code to open <div id=#showContent></div> and using same code but separately open <div id=#showContentSecond></div>
I have a lot of div elements and I don't want to code something everytime I want to manipulate an element.

The button will need to be related to the div in some way, if it isn't a child of the div, example:
<button class="mybutton" data-something="1">One</button>
<button class="mybutton" data-something="2">Two</button>
<div data-something="1">first</div>
<div data-something="2">second</div>
Javascript:
$(document).ready(function(){
$('button.mybutton').click(function(){
$('div[data-something=' + $(this).data('something') + ']').toggle();
});
});
Fiddle demo: http://jsfiddle.net/vcAtb/

You can use the document.getElementsByTagName element to get all divs.
document.getElementsByTagName("div")

Apply a CSS class to each element you want to have the same behavior
HTML
<div id="div1" class="toggleDiv"></div>
<div id="div2" class="toggleDiv"></div>
<div id="div3" class="toggleDiv"></div>
JavaScript
$(document).ready(function(){
$(".toggleDiv").click(function()
{
$(this).toggle("slow");
});
});
http://jsfiddle.net/gDG6n/

jQuery on hover show for multiple elements

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.

How to use jQuery slideDown() to display _almost_ all contents?

I have a div within a div. On page load, they should both be hidden, then when I trigger the slideDown() function on the outer div, I want the inner div to remain hidden. How can I achieve this?
<script>
$(function(){
$('.body').hide();
$('.display').click(function(){
$(this).closest('.wrapper').find('.body').slideDown();
});
});
</script>
<div class="wrapper">
<a class="display" href="#">Display Outer</a>
<div class="body">
Now displaying outer div
<div class="wrapper">
<a class="display" href="#">Display Inner</a>
<div class="body">
Now displaying inner div
</div>
</div>
</div>
</div>
Here is an example of it not working: http://jsfiddle.net/b7Tpt/

The reason it doesn't work is the use of find. find would traverse all levels to find the matches while the children would travel single level. So use find('.body:first') or children('.body')
$(function(){
$('.body').hide();
$('.display').click(function(){
$(this).closest('.wrapper').find('.body:first').slideDown();
});
});
Updated Example
OR
$(function(){
$('.body').hide();
$('.display').click(function(){
$(this).closest('.wrapper').children('.body').slideDown();
});
});
Updated Example

Try -
$('.display').click(function(){
$(this).siblings('.body').slideDown();
});
I think $(this).closest('.wrapper') was moving up the DOM tree and finding the top most wrapper div then opening all the body classes it found underneath. Using siblings should get the element with a body class that is directly beneath the clicked link.
Demo - http://jsfiddle.net/pMgVj/1/

try this: http://jsfiddle.net/Kf6gk/