We Keep Coding

Slide Element Off Screen -- Wait --- Slide Back in place

I want to slide an image (of a boomerang) off screen and then 5 seconds later slide it back into place. I want the image to right next to some text to begin with and end.
Ideally I'd like the animation to be smooth. I can find many examples doing things like this, but none that seem to do this very simple thing. Any pointers in the right direction would be greatly appreciated.
$(document).ready(function()
{
var my_div = $("#target");
var div_top = my_div.offset().top;
$(document).scroll(function()
{
if (div_top <= $(document).scrollTop()+($(window).height() /2))
{
// EVENT TO SEND IMAGE OFF SCREEN TO THE RIGHT
// EVENT TO WAIT 5 SECONDS
// EVENT TO SEND THE IMAGE BACK
}
});
});
<div id="target;">
<p style="font-size:32px; display: inline;">TEXT</p>
<img id="foo" style="height:35px;" src="https://upload.wikimedia.org/wikipedia/commons/4/46/Ic_account_box_48px.svgg">

You've tagged the question with javascript and provide code that's an incomplete javascript solution, but you also mention you want it to be smooth.
Perhaps declaring a CSS animation using transforms would be better?
Check out https://daneden.github.io/animate.css/ for some examples of what a CSS animation can do. And they can be quite complex, as you can define as many steps as needed.
Now if in some of your animation steps you need to perform calculations, you're stuck with JS, but you can still use a library that uses CSS transitions under the hood get get a smooth frame-rate.
I've used move.js for such a task in the past, and worked pretty well.
https://visionmedia.github.io/move.js/

Div height to animate smoothly to its new height after portfolio is sorted

I am in the midst of making my portfolio template but I am completely not familiar with JS, jquery and CSS transitions. Got this ( http://pixellytrain.com/sortportfolio/index.html) up and running through different tutorials. I would like to make the .blue div slide/ease nicely to the new height of the .red div after the portfolio is sorted (e.g. from "all" to "cat a").
Something like how the footer of this portfolio: http://hogash-demo.com/kallyas_wp/features/portfolio/sortable-layout/ slide in nicely when the portfolio become shorter.
Due to the portfolio tutorial on Queness, I already have got jquery, mixitup.js and easing.js linked to the page.
I tried this randomly but it was doing nothing so I am not sure how to get going or whether I am even on the right track. Thank you to all you kind-hearted pros in advance!!
$('.filter').click(function () {
$('.red').slideToggle('8000', "easeOutBounce", function () {
});
});

http://jsfiddle.net/XY2Ju/
Here is a working implementation. Enjoy!
0) Create something that wraps everything inside .red.
<div class="red">
<div class="wrapper">
<all the stuff that makes your portfolio>
</div>
</div>
Notice that the wrapper needs overflow: hidden; in it's css.
1) When the filter is clicked, get .red's current height and set red's height to it, then it won't jump around.
$('.red').height($('.wrapper').height());
// The portfolio moves around
2) After the animation of the items is complete, set .red to animate() to the same height as the wrapper.
$('.red').animate({'height': $('.wrapper').height()}, 250);

JavaScript How to make an image to change color onmouseover?

I have a button and an image and want them to change color onmouseover.
The button changes color fine:
<script>
function secondColor(x) {
x.style.color="#000000";
}
function firstColor(x) {
x.style.color="#ffaacc";
}
</script>
<input onmouseover="secondColor(this)" onmouseout="firstColor(this)" type="submit"><br>
How can I do the same thing with the image? Is there any way:
<img src="..." ......
Or do I have to have a second image to replace the first one onmouseover and this is the only way?

If you don't care that much about supporting older browsers, you could use the new CSS3 filter brightness. In chrome, you could write something like this:
var image = document.getElementById('img');
image.addEventListener('mouseover', function() {
image.setAttribute('style','-webkit-filter: brightness(1.5)');
}, false);
image.addEventListener('mouseout', function() {
image.setAttribute('style','-webkit-filter: brightness(1.0)');
}, false);
I don't recommend this approach, though. Using another picture while hovering would be a better solution.

I know that this is old, but you don't need two images. Checkout my example using one image.
You can simply change the position of the background image.
<div class="changeColor"> </div>
JavaScript
var dvChange = document.getElementsByClassName('changeColor');
dvChange[0].onmouseover = function(){
this.style.backgroundPosition = '-400px 0px';
}
dvChange[0].onmouseout = function(){
this.style.backgroundPosition = '0px 0px';
}
CSS
.changeColor{
background-image:url('http://www.upsequence.com/images/multibg.png');
width:400px;
height:400px;
background-position: 0px 0px;
}
.changeColor:hover{
background-image:url('http://www.upsequence.com/images/multibg.png');
width:400px;
height:400px;
background-position: -400px 0px;
}
You can also try changing the opacity of the images onmouseover and onmouseout.
I don't have an example for that, but its super easy to find and I am sure it has be answered already on stack exchange somewhere.
In the JSFiddle below there is Javascript and non-Javascript examples.
http://jsfiddle.net/hallmanbilly/gtf2s8ts/
Enjoy!!

I think you have to use a second image. I recently cam across the following article describing how to do image crossfading on hover using css. Crossfading Image Hover Effect

You can change image SRC on mouse over, you can load two images and use fade effects to "change" them. But better, you can use image as DIV background, make sprite and just move BG on mouse over.
Loading of two different images bring you to disappearing when hover and second image loading. Better do not use JS at all. Make sprite from two images, put it as BG of DIV and write two CSS for DIV, normal and when hover.

If you have access to JQuery use hover function. If you want to change image
$('#imageid').hover(function(){
//change image or color or opacity
$(this).attr('src', newImageSrc);
});
add this function in document ready function.

Is it possible to change multiple images along with their respective mouseover commands?

Thanks for looking, I have this plan, I want to create a gallery where I have the main image which is changed by mouse-ing over a bunch of 8 thumbnails, easy.
What I would like to add is separate small bunch of 3 thumbnails and when these are moused over they change the 8 thumbnail images and make them call up 8 new main images. Sorry I hope that’s understandable?
So it’s a little like a tiered or a nested arrangement almost like a small folder tree where the new 3 thumbs hold different libraries of 8 thumbs… no that’s probably just made it even more confusing!!!..
I was keen that it was all done with mouse over the thumbs so it’s smooth and there’s no clicking or reloading the page.
I’ve had a good look around but probably just need telling what terms/phrases/commands to pop in my search engine.
Getting the 3 thumbs to change the 8 thumbs and the main image should be straightforward enough I’m currently using this:
<img src = "images/nicepic5thumb.png" onmouseover =”document.main.src = 'images/nicepic5.jpg';">
Where the main big image is:
<img src = "images/nicepic1.jpg" name= "main">
And I guess it could be expanded to multiple images. Doesn’t have to be done like this however, just whatever would work best, it’s making one mousover change multiple mouseover commands thats currently beyond me.
Ultimately I aim to get all the transitions to fade.
Very grateful for a pointer in the right direction.

I would sent the 3 panels (or more) of 8 thumbs with the respective commands to change main images and make the 3 index thumbs switch the visibility of the 8 images panel

This is actually something that would be very easy to do in jQuery
All you need to do is add a common class to the images in the gallery or more efficiently add an ID to the element that contains the image and use that to select the images such as.
<img src = "images/nicepic1.jpg" name= "main" id="main_img">
<div id="gallery"><img src="nicepic1thumb.png"><img src="nicepic2thumb.png"><img src="nicepic3thumb.png"></div>
<script>
$(document).ready(function(){
$("#gallery img").onmouseover(function(){
$("#main_img").attr('src',$(this).attr('src').replace("thumb.png",".jpg"));
}
}
</script>
Here is a full working gallery without animations that does exactly what you wanted.
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type="text/javascript" ></script>
<script>
$(document).ready(function(){
gallery.init();
});
var gallery = {
main_img: null,
init:function(){
gallery.main_img = $("#main_img img");
$("#images img").click(function(){
gallery.change($(this).attr('src'));
});
},
change: function(image){
gallery.main_img.attr('src', image.replace("thumb.png",".jpg"));
}
}
</script>
</head>
<body>
<div id="gallery">
<div id="main_img"><img src="images/image1.jpg"/></div>
<div id="images">
<img src="images/image1thumb.png"/><img src="images/image2thumb.png"/><img src="images/image3thumb.png"/><img src="images/image4thumb.png"/><img src="images/image5thumb.png"/>
</div>
</div>
<body>
</html>
If you need animations such as fading and stuff just ask.

Rotating Div using javascript

Here is a link: http://www.avineon.com/
Open this link see on the top. Four images are rotating.
I need something similiar using Javascript.
Is it possible by using Javascript.

I don't think you'll have much luck if you try to do that in pure javascript. It might be possible using the emerging canvas and SVG libraries such as Raphael, but you'll still have cross-browser issues. That site used Flash, and I'd recommend using that if you wanted such an effect.
...why you'd want that on your website is another story though...

You could so something similar, but not exact.
Transparency = Supported in FF, Safari, IE7+
Changing image width = Place image in div with this Css
.class img {
display: block;
width: 100%;
height: 100%
}
This will make the image stretch to fill the .class div. You can then use JS to make this div narrower like the carousel does, and the image contained will animate within the div.
You would then need to track the mouse locations to determine how fast it spins.
You can use an equation using cosine for smooth acceleration from the far ends (IIRC)
You will not however be able to get the images in reverse, unless you create a copy in a server side language or use canvas.

Your best bet would not be to attempt to render something in actual 3D, but rather to use visual tricks to approximate a 3D effect. That is, use perspective / image deformation to make it look like a cube is rotating, similar to what is implemented at this page, which has a better explanation of the math involved.
Really, though, you're probably better off just using Flash.

That effect is possible in JavaScript simply by modifying each of the images width, height, and left styles over time. It's an involved script, but only needs to interpolate those three styles on the each of the image elements.
To get the rotation effect, decrement the width style of the image in a setInterval function while moving the left style property. There is a slight decrement on the height also.
You'll need two images for each side, a front and reverse. When the width decrements to zero, swap the image with it's flipped version and start incrementing the width.
Alternatively use Webkit's, and Firefox's transform css properties.
Or try one of these coverflow components that look similar:
Protoflow,
ImageFlow

<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
if (document.all || document.getElementById){ //if IE4 or NS6+
document.write('<style type="text/css">\n');
document.write('.dyncontent{display: none; width: 728px; height: 90px;}\n');
document.write('</style>');
}
var curcontentindex=0;
var messages=new Array();
function getElementByClass(classname){
var inc=0;
var alltags=document.all? document.all : document.getElementsByTagName("*");
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
messages[inc++]=alltags[i];
}
}
function rotatecontent(){
//get current message index (to show it):
curcontentindex=(curcontentindex<messages.length-1)? curcontentindex+1 : 0;
//get previous message index (to hide it):
prevcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex-1;
messages[prevcontentindex].style.display="none"; //hide previous message
messages[curcontentindex].style.display="block"; //show current message
}
window.onload=function(){
if (document.all || document.getElementById){
getElementByClass("dyncontent");
setInterval("rotatecontent()", 5000);
}
}
</script>
<table width="100%">
<tr align="center">
<td>
<div class="dyncontent" style="display: block">
first
</div>
<div class="dyncontent">
second
</div>
<div class="dyncontent">
Third
</div>
</td>
</tr>
</table>
</body>
</html>