Develop Reference

Reset position after .animate() method

I'm trying to combine the .toggle() method with an animation. I've followed the methods laid out in this fiddle as well as in this SO post, but the second click isn't returning my div to the original position.
The behavior should be:
Click the title
Content expands
Slide up over the headline
Click again
Content contracts
Slide back down to the original position <-- This isn't happening
HTML
<div id="headline">
<h1>This is the headline</h1>
</div>
<div id="page-wrap"> <!-- contains more than one article, need the whole thing to slide -->
<article class="post">
<div class="title"><h1>Feedback</h1></div>
<div class="content">
<p>Videos can be more than direct instruction. Currently, how do you give feedback on assignments?</p>
<p>It takes a lot of time, right?</p>
<p>Video can be used to give direct feedback to the student because it communicates areas of improvement more effectively than written feedback alone.</p>
</div>
</article>
</div>
CSS
#headline {
position:fixed;
top:10px;
left:10px;
width:380px;
}
#page-wrap {
position:relative;
top:200px;
}
.post {
width:300px;
}
.post .title {
cursor: pointer;
}
.post .content {
display:none;
}
Script
$(".title").click(function() {
$title = $(this);
$content = $title.next();
$content.toggle(
function() {
$("#page-wrap").animate({"margin-top":"200px"}, 'fast')
},
function () {
$("#page-wrap").animate({"margin-top":"-200px"}, 'fast')
}
)
});
CodePen Demo
Here's a live page for more context.

JavaScript - Make an image turn white on click

I've got a bunch of images, on click I want the images to turn white emulating some kind of fade effect. So you click it and for 1 second it fades from the original image to just white. I also need it to turn back to the original image when the user clicks something else.
Is this possible with JavaScript? - If so what should I be looking at (I'm really bad with graphics).
I've had a go at trying this with opacity but I don't want the background to be visible behind the image

Psuedo-element Solution
You could use a wrapper with a pseudo-element to overlay what you're looking for -- and the animations are handled by a toggled CSS class (which is ideal for performance).
CodePen Demonstration
HTML
<div class="whiteclicker">
<img src="http://lorempixel.com/400/200" alt=""/>
</div>
SCSS
#import "compass/css3/transition";
body { background: gainsboro; text-align: center; }
.whiteclicker {
display: inline-block;
position: relative;
&::after {
content: "";
display: block;
position: absolute;
top:0; left:0; right:0; bottom:0;
background: white;
opacity: 0;
#include transition(opacity 1s ease);
}
&.active::after {
opacity: 1;
}
}
JS
$('.whiteclicker').click(function(){
$(this).toggleClass('active');
});

To ameliorate the Spencer Wieczorek solution (the way two seems to be the best solution on my opinion) :
What about creating the white div on the fly (and fade it in and out) instead of put it in the html code ?
See the fiddle.
$("#myImage").click(function(){
$(this)
.parent().css({position:'relative'}).end()
.after($('<div>')
.hide()
.css({position:'absolute'
, top: $(this).position().top
, left: $(this).position().left
, width: $(this).width()
, height: $(this).height()
, background: '#FFF'
})
.fadeIn('fast')
.on({
click : function(e){
$(this).fadeOut('fast', function(){ $(this).remove();});
}
})
);
});
Then, you don't have anything to add to the html code or in the css styles, Jquery does everything.
#Spencer Wieczorek : I did my own answer, because I did not agree with your way of designing the css style (the fixed position is really not good, especially if the page is scrolled for example...). Mine is more ... standalone-y ;)

You might want to try having two images stacked on each other.
See this:
<script type="text/javascript">
var image1 = '<img class="images" src="Image 1" onClick="switch();" />';
var image2 = '<img class="images" src="Image 2" onClick="switch();" />';
var currentImage = 1;
function switch(){
if(currentImage==1){
currentImage++;
document.getElementById("image").innerHTML = image2;
}
if(currentImage==2){
currentImage--;
document.getElementById("image").innerHTML = image1;
}
}
</script>
<style>
.images{ position:fixed; top: 0; left: 0; }
</style>
<img class="images" src="Black image" />
<div id="image"><img class="images" src="Image 1" onClick="switch();" /></div>
For the fade I'm just gonna see how you could do it.
EDIT:
<script type="text/javascript">
var fadecount = 100;
function fade() {
document.getElementById("imageToFade").style.opacity = fadecount;
fadecount--;
if(fadecount==0){
clearTimeout(fade);
}
}
function start_fade(){
var fade = setTimeout(fade(), 10);
}
</script>

With Base 64 you can just have the binary version of the picture and then an all white picture and based on the .click you reassign the src to the white base64...
document.getElementById("img").src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg=="
just change to the all white version after the click, technically js driven from click event, and doesn't involve two different elements existing just at different layers...

How can I center a group of objects together in HTML with CSS?

I have a group of objects (divs) that are small squares that I can move anywhere (there's a JavaScript function to move then). Those squares are all together and form a figure. So I have that figure centered by the CSS: "left: 600px" but now I'm trying to make a more responsive design for my page and I started to percents but I encountered 2 problems.
If I add the percentage to all the objects individually, when I zoom in or zoom out or when i resize my page they become more closer of far away from each other.
If I create a div including all the objects and then add "left:50%" when I click to move them they go instantanially another 50% to left.
So my mouse is this -> () [spacespacescpace] / \ <- and this the object, but I'm still selecting that object. So that's weird...
This is the HTML:
<div id="container">
<div class="VEPart" id="me2"></div>
<script type="text/javascript">
jcl.LoadBehaviour("me2", MoverBehaviour);
</script>
<div class="VEPart" id="me3"></div>
<script type="text/javascript">
jcl.LoadBehaviour("me3", MoverBehaviour);
</script>
<div class="VEPart" id="me4"></div>
<script type="text/javascript">
jcl.LoadBehaviour("me4", MoverBehaviour);
</script>
<div class="VEPart" id="me5"></div>
<script type="text/javascript">
jcl.LoadBehaviour("me5", MoverBehaviour);
</script></div>
Here's the CSS:
#me2
{
content:url("some image");
top:401px;
left:0px;
z-index:5;
}
#me3
{
content:url("some image");
top:400px;
left:-58px;
z-index:5;
}
#me4
{
content:url("some image");
top:400px;
left:58px;
z-index:5;
}
#me5
{
content:url("some image");
top:500px;
left:-57px;
z-index:5;
}

Try setting the position property to absolute and using the percentage. It sounds like you are having a problem with relative positioning.
#me2
{
content:url("some image");
position:absolute;
top:401px;
left:50%;
z-index:5;
}
http://www.w3schools.com/cssref/pr_class_position.asp

provide a style for all div..
Just put this in your css
div {
margin-left: 20%
}

moving an image in javascript

Even though it seems very easy I am unable to do it.
I have an image inside div and I should move the image up and down not the entire div.
HTML
<div>
<img src="Image/Scope.png" id="indImage" style="height:auto; max-height:80%; width:auto; max-width:90%;" />
</div>
Javascript
$("#moveUp").on('click',function() {
alert($('#indImage').offset());
if(wind_moveup_click != 7){
$('#indImage').animate({
marginTop : "-=2px"
});
});
But the image is not moving up
Whats the mistake i am doing?
Thanks:)

Here's the FIDDLE
HTML
<div>
<img src="Image/Scope.png" id="indImage" style="height:auto; max-height:80%; width:auto; max-width:90%; position:absolute;" />
</div>
<input type="button" id="moveUp" value="Click Me!" style="margin-top:25px;" />
Javascript
$("#moveUp").on('click', function () {
//alert($('#indImage').offset());
var wind_moveup_click = 0;
if (wind_moveup_click != 7) {
$('#indImage').animate({
marginTop: "-=2px"
});
}
});

You had forgoten a } on your if statement.
You also need to define the wind_moveup_click variable before using it in the if statement, but maybe you did that, just not in the sample you posted to us.
FIDDLE
and this
if (wind_moveup_click != 7) {
$('#indImage').animate({
});
}

Add position:absolute to your img CSS.
#indImage {
position: absolute;
height:auto;
max-height:80%;
width:auto;
max-width:90%;
}
JSFIDDLE
Like #Ohgodwhy correctly said:
the position can be anything other than static
That means that you can choose between absolute, relative, fixed and so on.
But another big problem is that you didn't close the opened { in if. So you have a syntax error.

Try adding the css style position: relative to the <div> tag, e.g.:
<div style="position: relative;">

Edit as,
$('#indImage').animate({
marginTop : "-2px",
});

Rotate images, if last image then hide

I have 3 images that I want to rotate when a button is clicked.
image1, image2, image3.
If the image is at image1, then when clicked it should show image2 (and so on, in order of image1, .., image3).
When I am at image3, it should then hide the image, i.e. don't display it.
I need some help with the javascript function to do this, I already have the code for the button click event.
I am passing the toggle() function the jquery object $('myImageID');
$(document).ready(
function()
{
$('#button1').click( function() { toggleSector( $('#sector1') ) } ;
}
);
function toggleSector(o)
{
// help!
}
<div id="sector1"></div>
<input type="button" id="button1" value="Sector 1" />
Update
I have to somehow find the name of the current background image set to the
<div> where my image is.
Is there a background property to get the image name currently being displayed?

You can get a background-image by accessing it from the .css(name) method:
$("#sector1").css("background-image");
Without managing your list of images in an array or some other fashion, you're going to have to check each background-image to know when it's time to hide your element. This isn't a great way of working, as it doesn't allow you to easily add a new image in the future if you like.
Perhaps something like the following:
function toggle(el) {
var whenToHide = "background3.jpg";
var currBackground = $(el).css("background-image");
/* ...code... */
if (currBackground == whenToHide) {
$(el).remove();
}
}

Do you have to use the background image?
If not, here's a little code sample for what I would do.
<html>
<head>
<style type="text/css">
#imageRotater { list-style-type:none; }
#imageRotater, .imageRotater li { margin:0px auto; padding: 0px; }
#imageRotater img { display:none; }
</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
(function($) {
$.fn.rotate = function() {
return this.each(function() {
var list = $(this).is('ul') ? $(this) : $('ul', this);
list.find('img:eq(0)').show();
$('img', list).click(function() {
$(this).hide().closest('li').next().find('img').show();
});
});
};
})(jQuery);
$(document).ready(function() {
$("#imageRotater").rotate();
});
</script>
</head>
<body>
<div id="sector1">
<ul id="imageRotater">
<li><img src="image1.png" alt="" /></li>
<li><img src="image2.png" alt="" /></li>
<li><img src="image3.png" alt="" /></li>
</ul>
</div>
</body>
</html>

Here's a thing that works.
Each overlay is initially hidden with CSS. Each time your button is clicked, all the overlays are hidden, then one is revealed based on some data stored on the button. If the data reaches the max number overlays + 1, none are shown and the data is reset to 0.
Markup
<div id="container" style="background: yellow">
<div class="overlay" style="background: red"></div>
<div class="overlay" style="background: green"></div>
<div class="overlay" style="background: blue"></div>
</div>
Style
div{
width: 100px;
height: 100px;
}
.overlay{
position: absolute;
top: 0;
left: 0;
display: none;
}
#container{
position: relative;
}
Script
$(function() {
var b = $('#button1');
b.data('next', 0);
b.data('max', $('.overlay').size()+1 );
b.click( function( e ) {
var next = $(this).data('next');
var o = $('.overlay');
o.hide();
o.eq(next).show();
next = (next+1) % $(this).data('max');
$(this).data('next', next);
});
});

In response to Bendeway's answer above, you'll need to insert before
list.find('img:eq(0)').show();
the following line:
list.find('img').hide();
This will hide all the images before it starts rotating through them.