We Keep Coding

Javascript Affecting the Wrong Element

I am setting up a webpage so that it has multiple images on it, and each image has a 50% opacity mask over it. When the mask is moused over, it is supposed to disappear, and then when the mouse leaves the image (below the mask), the mask is supposed to reappear. This worked well when I tested it for one img inside my div, but when I added a second img, the disappear function affected the image with no id, which is confusing me greatly.
HTML:
<div id="images">
<img id="testimage1" src="url" onmouseover="appear1()"/>
<img src="url"/>
</div>
<div id="masks">
<img id="testmask1" src="url" onmouseover="disappear1()"/>
<img src="url"/> <!-- This is the one that disappears -->
</div>
CSS:
#images{
position:absolute;
top:0px;
}
#masks{
position:absolute;
top:0px;
}
JS:
function disappear1(){
//Makes the first test mask disappear. This is a test function.
document.getElementById("testmask1").style.display = 'none';
}
function appear1(){
//Makes the first test mask appear. This is a test function.
document.getElementById("testmask1").style.display = 'block';
}
EDIT: Roko asked why I didn't do this in pure CSS. Aside from the fact that I didn't think about how to configure the images correctly, when I eventually finish this page, I will want to have masks 'linked', where I mouse over one mask and both disappear. I'm not sure that's possible in pure CSS.
EDIT #2: As it turns out, the function was working as written. It was just that because I had a single div for each row of images, when the first image in the row appeared, everything else slid over, thus poor coding on my part.

Don't duplicate your ID. ID should be unique-per-page.
Also, why not do it in pure CSS? (no JS required)
jsBin demo
<div class="imgBox">
<img src="cat.jpg">
<img src="mask.png">
</div>
<div class="imgBox">
<img src="bear.jpg">
<img src="mask.png">
</div>
<div class="imgBox">
<img src="elephant.jpg">
<img src="mask.png">
</div>
CSS:
.imgBox{
position:relative;
/*width, height etc... */
}
.imgBox img{
position:absolute;
top: 0;
transition: opacity 0.5s; /* yey! */
}
.imgBox:hover img + img{ /* on hover target the second image */
opacity: 0;
}

div position argument breaks slider

I am trying to integrate a simple slider within my website and found this example on jsfiddle
I do want to place the slider "relative" within my website, but if I change the css to
position: relative; the slider does not work properly anymore, as it now displays the fading images above one another like this
Why is this happening and how can I position the slider-div "relative" within my website?
I tried wrapping it with another div-layer but without success.

Try a wrapper div as you say.
You should put your slider inside another div and then position this wrapper div relative.
HTML:
<div id="wrap">//<--Add here tha wrapper div
<div id="banner_area">
<img class="active" src="http://viewallpapers.com/wp-content/uploads/2013/06/Uluru-Australia.jpg" />
<img src="http://www.wallpaperhi.com/thumbnails/detail/20130309/ocean%20beach%20rocks%20australia%201920x1200%20wallpaper_www.wallpaperhi.com_71.jpg" />
<img src="http://www.star.com.au/star-event-centre/PublishingImages/about-sydney-800x500.jpg" />
<img src="http://www.ytravelblog.com/wp-content/uploads/2013/06/Whitsunday-Islands-Queensland-Australia-6.jpg" />
</div>
</div>
CSS:
#wrap{
position:relative;
top:100px;
left:100px;
}
DEMO
UPDATE
To float within the website add a height to the #wrap
#wrap{
position:relative;
top:0px;
left:100px;
height:250px;
}
DEMO2

You don't need a wrapper. You are setting position: relative on the wrong element. Set it on #banner_area, not #banner_area img. DEMO

absolute div in div with overflow

I'm trying to make a tab menu that sits on the bottom of a div and when a tab link is clicked it slideup with it's content.
Here is what I've got so far. I really can't see why it's behaving they way it is
http://jsfiddle.net/5mVt8/11/
The key bits:
#content {
position: relative;
width:500px;
height:400px;
overflow:hidden;
}
.page {
position: absolute;
left:0;
top:380px;
width:500px;
height:400px;
}
<div id="content">
<div class="page" id="one">ClickPage 1</div>
<div class="page" id="two">ClickPage 2</div>
<div class="page" id="three">ClickPage 3</div>
</div>
Full code here: http://jsfiddle.net/5mVt8/11/
Is these a bug with having a absolute positioned div inside a relative div with overflow? Can anyone tell me why this doesn't work or how I should approval this?

Remove the #one #two #three from your html.
<div id="content">
<div class="page" id="one">ClickPage 1</div>
<div class="page" id="two">ClickPage 2</div>
<div class="page" id="three">ClickPage 3</div>
</div>
Now simply write your animate correctly.
$('.page a').click(function(){
$(this).parent('.page').animate({top:0}).addClass('open');
});
http://jsfiddle.net/5mVt8/18/
EDIT: I am sure you could find a cleaner way to write your CSS. All those absolutes and positioning and z-indexes. I would find a better way to accomplish what you want, but that's me.

You have #content fixed height with overflow:hidden and pages on the bottom partially hidden with this overflow. Now on link click anchor works and #content scrolls down to the hidden block top. You should add return false at the end of click event function to prevent default behavior.
Also you have missed the animate method syntax. It should be like this
$(this).parent().animate({'top': '0px'}, 300, "swing");
http://jsfiddle.net/5mVt8/27/

change multiple images on click

I have 6 images.
When they are rolled over the images change using css hover.
When the images are clicked the original image appears (again using css) but I want the rest of the images to dim when one is selected.
I've been looking into various JS option but just cant seem to get it to work. Does anyone have any suggestions?

Another solution is adding a class to the selected image and the images parent.
This makes it easier to maintain as the styling is all done in css.
Quick example here:
css
.img{
display:inline-block;
height:40px;
width:40px;
border:1px solid black;
}
.clicked .img{
opacity:0.3;
}
.clicked .img.selected{
opacity:1;
background:red;
}
js
​
$('.img').on('click', function() {
$('.img').removeClass('selected');
$(this).addClass('selected');
$('.container').addClass('clicked');
})​
html
<div class="container">
<div class="img">img</div>
<div class="img">img</div>
<div class="img">img</div>
<div class="img">img</div>
<div class="img">img</div>
<div class="img">img</div>
</div>​
http://jsfiddle.net/renekoch/y6YCc/

Increase size of image of click

Its pretty simple to see what I mean if you look at the image, which I also need to shrink back if you click it again, it needs to be animated as well:
The image link http://www.keironlowecreative.x10hosting.com/Help.png

jquery
$(document).ready(function(){
$("#what > img").click(function () {
$("img").toggle("slow");
});
});
html
<div id="what">
<img src="small_img" />
<img src="big_img" style="display: none" />
</div>
toggle

You could use one of the horizontal accordion plugins for this.

Excuse the inline styles... Pixels aren't exact. Use the same image twice, one div on top of the other:
<div id="wrapper" style="position:relative; height:20px;">
<div id="top" style="background:url(...) top left no-repeat; position:absolute; height: 20px; width:18px; top:0; left:0; z-index:2;"></div>
<div id="under" style="background:url(...) top right no-repeat; position:absolute; height:20px; width:20px; top:0; left:2px; z-index:1;"></div>
</div>
So the top div is showing the plus and the left corner. The bottom div is showing the right corner - over two pixels so it's not showing under the corners of the top element. If the image is opaque, this doesn't matter...
Animate the width of the under div to get the effect. No fading, only one image. Should be small and quick to animate.