We Keep Coding

Trying to make different text appear below 3 aligned images on hover

First things first, here is my example :
https://jsfiddle.net/y532ouzj/33/
HTML:
<div id="image" class="item">
<a ><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
</div>
<div id="text" class="show">Text 1</div>
<div id="image" class="item">
<a ><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
</div>
<div id="text" class="show">Text 2</div>
<div id="image" class="item">
<a ><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
</div>
<div id="text" class="show">Text 3</div>
CSS:
.item {
/* To correctly align image, regardless of content height: */
vertical-align: top;
display: inline-block;
/* To horizontally center images and caption */
text-align: center;
/* The width of the container also implies margin around the images. */
width: 190px;
}
.show {
display: none;
}
.item:hover + .show {
display: block;
}
JAVASCRIPT :
$('#image').hover(function() {
$('#text').show();
}, function() {
$('#text').hide();
});
It almost works but I must be forgetting a little something since my 3 pictures aren't staying where I want them to once I start hovering that mouse. So if you don't hover over the pictures, everything is good, 3 pics aligned. Hover over pic #1 or 2, text goes exactly where I want it, but why does my pic 3 and pic 2 also move down ? Hover over pic #3, everything works the way it should.

You have multiple problems with this. First of all, ids can only be used once. Change them to classes, and you should be fine. Second, move the divs inside of the image div, and it will only show the one that you would like to. Updated javascript and html follows:
fiddle: https://jsfiddle.net/y532ouzj/34/
HTML
<div class="image item">
<a><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
<div class="text show">Text 1</div>
</div>
<div class="image item">
<a><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
<div class="text show">Text 2</div>
</div>
<div class=" image item">
<a><img src="http://www.topring.com/images/carre_download_cat_ENG.jpg"></a>
<div class="text show">Text 3</div>
</div>
Javascript
$('.image').hover(function () {
var that = $(this);
that.find('.text').show();
}, function () {
var that = $(this);
that.find('.text').hide();
});

First of all, java and javascript aren't the same thing; they're two separate languages.
Second, in HTML, it's bad form (and possibly dead wrong) to use the same id for multiple elements on a page. the value of each id attribute should be unique.
Finally, the answer in HTML and jQuery:
https://jsfiddle.net/y532ouzj/36/
The HTML now contains just one text. It will be modified for each case
<div id="image_1" class="item">
<a >
<img src="http://www.topring.com/images/carre_download_cat_ENG.jpg" /> </a>
</div>
<div id="image_2" class="item">
<a >
<img src="http://www.topring.com/images/carre_download_cat_ENG.jpg" />
</a>
</div>
<div id="image_3" class="item">
<a >
<img src="http://www.topring.com/images/carre_download_cat_ENG.jpg" />
</a>
</div>
<div id="text" class="show">
Text
</div>
The javascript now modifies and reveals the text based on whichever image triggers the event.
$('#image_1').hover(function() {
$('#text').html("Text 1");
$('#text').show();
}, function() {
$('#text').hide();
});
$('#image_2').hover(function() {
$('#text').html("Text 2");
$('#text').show();
}, function() {
$('#text').hide();
});
$('#image_3').hover(function() {
$('#text').html("Text 3");
$('#text').show();
}, function() {
$('#text').hide();
});

I'm going to make a suggestion instead of answering the direct question. Instead of overcomplicating this, I suggest you used the Title attribute.
<div class="image"><a><img src="" title="Text 1" /></a></div>
Most browsers will know what to do with this. Some older browsers may give varying quality of interpreting the attribute, but this is the easiest way to do what you are trying to accomplish.

Getting a link from another div

I have
<div class="box box1">
<div class="content">
<img a href="http://www.example.com" />
<img src="https://www.google.ie/images/srpr/logo11w.png"</a>
</div>
</div>
What I want to do is make the entire div of box clickable.
I have looked around here in StackOverFlow and seen some great examples but I have tried them and I could not get them to work.
For Example:
$div.next('div.box2').find('a').attr('href', $div.find('a').attr('href'));
Any help would be great on how to do this in jquery

$(".box").click(function(){
window.location=$(".whereeveryourelookingfor").find("a").attr("href");
return false;
});
you can make the mouse pointer also look like the one on href , use the following css
.box{ cursor:pointer; }
http://jsfiddle.net/r9Xhf/

<div class="box box1" style="cursor: pointer">
<div class="content">
<a href="example">
<img a href="http://www.example.com" />
<img src="https://www.google.ie/images/srpr/logo11w.png"</a>
</div></div>
JS
$('.box').click(function(){
window.location.href = "http://www.example.com";
});

jQuery Div inside Div

I'm trying to display a photo gallery with jQuery. This is my code:
<script>
$("#vsetky").click(function(){
$("#obrazky").show();
});
$("#c").click(function(){
$("#cervene").show();
});
</script>
<div id="obrazky">
<div id="cervene">
<img src="1.png">
<img src="1.png">
</div>
<div id="zlte">
<img src="2.png">
<img src="2.png">
</div>
<div id="zelene">
<img src="3.png">
<img src="3.png">
</div>
</div>
When the #vsetky element is clicked... It works, every picture is displayed.
When the #c element is clicked, there aren't any pictures.
I tried to use
$("#obrazky > #cervene").show();
I've tried other methods but nothing is working. Help me please - what am I doing wrong?

What does your css look like? If both #obrazky and #cervene have display:none, then when you click on #c you're only removing the display:none rule from #cervene, but not it's parent wrapping div#obrazky.
Edit:
You'll want to change the css to be hiding #cervene, #zlte, and #zelene, and then show and hide those individually with the javascript. If an element's parent is has display:none, then 'show()'ing it with javascript doesn't to anything because you're not removing the display:none from the parent.
<script>
$("#vsetky").click(function(){
$("#cervene, #zlte, #zelene").show();
});
$("#c").click(function(){
$("#cervene").show();
});
</script>
<style>
#obrazky {display:inline-block;}
#cervene, #zlte, #zelene {display:none;}
</style>
<div id="obrazky">
<div id="cervene">
<img src="1.png">
<img src="1.png">
</div>
<div id="zlte">
<img src="2.png">
<img src="2.png">
</div>
<div id="zelene">
<img src="3.png">
<img src="3.png">
</div>
</div>

How i can select specific div from multiple divs in jquery

I have something like this, and i need to show every div called "plink" just in the main div of each parent, so i tried to fadeIn ".plink" but its doing the same function for all the divs of "plink"
<script>
$(document).ready(function(){
$('.plink').hide();
$('.project').mouseover(function(){
$(this).next('.plink').fadeIn(400);
});
$('.project').mouseleave(function(){
$(this).next('.plink').fadeOut(200);
});
});
</script>
<div class="project">
<div class="plink">
<div class="go"></div>
<div class="goplus"><img src="images/more.png" border="0"/></div>
</div>
<div class="pic"><img src="images/portfolio_pic2.png" border="0" alt="projectname"/></div>
<div class="title">Test1</div>
</div>
<div class="spacer_project"></div>
<div class="project">
<div class="plink">
<div class="go"></div>
<div class="goplus"><img src="images/more.png" border="0"/></div>
</div>
<div class="pic"><img src="images/portfolio_pic.png" border="0" alt="projectname"/></div>
<div class="title">test2</div>
</div>

You can use find() instead of next()...
$(this).find('.plink').fadeIn(400);
because this is your .project div then you need to "find" the child elements that you are looking for. Using next() means you will get the very next element if it matches the selector (i.e. it is check to see if the next .project div matches the .plink selector)

I would go the FIND route like musefan suggested. Here is the solution code:
http://jsfiddle.net/bx7YC/
<div class="project">
<div class="plink">
<div class="go">go</div>
<div class="goplus">goplus</div>
</div>
<div class="pic">pic</div>
<div class="title">Test1</div>
</div>
<div class="spacer_project"></div>
<div class="project">
<div class="plink">
<div class="go">go</div>
<div class="goplus">goplus</div>
</div>
<div class="pic">pic</div>
<div class="title">Test2</div>
</div>​
$('.plink').hide();
$('.project').mouseover(function(){
$(this).find('.plink').fadeIn(400);
});
$('.project').mouseleave(function(){
$(this).find('.plink').fadeOut(200);
});​
I replaced the broken img links with simple text for the jsfiddle.

Image effect in website

Please can anyone tell me the coding in terms of Js, css for displaying image effect like one in http://dalailama.com/ ie changing of images one after another. If possible let me know about adding video link in the sidebar with the minor screen.

This should do the trick:
HTML:
<div id="testers">
<div class="tester">
<img src="http://regmedia.co.uk/2008/03/18/google_adwords_machine.png" alt="" />
</div>
</div>
<div id="morework">
<div class="holderdiv">
<div class="tester">
<img src="http://www.swwebs.co.uk/images/google-pagerank.jpg" alt="" />
</div>
</div>
<div class="holderdiv">
<div class="tester">
<img src="http://regmedia.co.uk/2008/03/18/google_adwords_machine.png" alt="" />
</div>
</div>
</div>
CSS:
#morework{display:none;}
jQuery:
$(document).ready(function(){
function runIt(){
$('#morework').find('.holderdiv').each(function(i, elem) {
$("#testers").delay(5000).fadeOut(1000, function() {
$(this).html($(elem).html());
}).fadeIn(1000, runIt);
});
};
runIt()
});
Check it out in action here - http://jsfiddle.net/sfsPx/