Integrate fadeIn/fadeOut to a content switching script - javascript

I am creating an image collage/patchwork. I'm using masonry.js to lay out the content how I need, and a script I found on this very site to change the div contents randomly (between two images).
However, I would like a simple way to animate this image switch, but my javascript/jquery knowledge is very limited.
Below is the complete code for my site:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.masonry.min.js"></script>
<style>
#container {
width: 350px;
height: 420px;
border: solid 1px #000;
}
.item {
width: 105px;
height: 105px;
margin: 0;
float: left;
}
.item_2 {
width: 245px;
height: 105px;
margin: 0;
float: left;
}
.item_3 {
width: 245px;
height: 210px;
margin: 0;
float: left;
}
</style>
<script type="text/javascript">
var logSwitch =[
"<img src='apps/TRA-100.gif' />",
"<img src='apps/logistics.gif' />",
];
setInterval(function() {
var i = Math.round((Math.random()) * logSwitch.length);
if (i == logSwitch.length) --i;
$("#logistics").html(logSwitch[i]);
}, 5 * 1000);
</script>
</head>
<body>
<div id="container">
<div class="item_3"><img src="apps/auto.gif" /></div>
<div class="item"><div id="logistics"><img src="apps/TRA-100.gif" /></div></div>
<div class="item"><img src="apps/marine.gif" /></div>
<div class="item"><img src="apps/its.gif" /></div>
<div class="item_2"><img src="apps/Entertain.gif" /></div>
<div class="item_2"><img src="apps/meteor.gif" /></div>
<div class="item"><img src="apps/aviation.gif" /></div>
</div>
<script type="text/javascript">
var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
columnWidth : 300
);
});
</script>
</body>
</html>
Can anyone advise we what direction to head in? This fiddle: (http://jsfiddle.net/jWcLz/1/) looks quite simple, but I have no idea how to implement it.
Thanks in advance.

Right now you replace the HTML within #logistics, but nothing is done to make it fade. The way the demo jsfiddle you linked to works is by calling fadeOut() on the parent element and when that's done calling a fadeIn() function on that same element, while also giving it new content.
Here's how you can do the same thing in your code:
Replace...
$("#logistics").html(logSwitch[i]);
...with...
$('#logistics').fadeOut(500, function() {
$(this).html(logSwitch[i]).fadeIn(500);
});
Edit: if you don't want the content to be switched randomly, don't make it random! Instead, set i outside of setInterval() and then just change i within it.
var i = 0;
setInterval(function() {
i++;
if (i == logSwitch.length) {
i = 0;
}
$('#logistics').fadeOut(500, function() {
$(this).html(logSwitch[i]).fadeIn(500);
});
}, 5000);

Related

How to create a slideshow before showing the page?

I've been trying to find a way in order to create a slideshow and specify the timing between each picture. Then after the sequence, I want to display/reveal the home page.
I don't really have a lot of JavaScript experience so any help would be appreciated.
There are many ways to do it, here is one simple/basic example:
jQuery.fn.reverse = [].reverse; /* Just a helper */
var slideshowContainer = $('.slideshow');
var slideshowItems = slideshowContainer.find('.item').reverse();
var slideshowItemsTotal = slideshowItems.length;
slideshowItems.each(function(i) {
var thisItem = $(this);
setTimeout(function() {
thisItem.fadeOut(1000, function() {
thisItem.remove();
if( i+1==slideshowItemsTotal ) {
slideshowContainer.remove();
};
});
}, i*5000+4000);
});
* {
margin: 0 none;
box-sizing: border-box;
}
.slideshow {
position: fixed;
z-index: 10;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.slideshow .item {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Page header</h1>
<p>Page content.</p>
<div class="slideshow">
<img class="item" src="http://placehold.it/800x600/00ff00/333" />
<img class="item" src="http://placehold.it/800x600/ff0000/111" />
</div>
Also on JSFiddle.
You should use setTimeout function to put timing between every function. Then change the pictures with functions to make it look like it is a slideshow.
Example: calls the function after 3 seconds to make an alert.
function myFunction() {
setTimeout(function(){ alert("Hello"); }, 3000);
}
You can find millions of examples on google for timing with JS.
Good luck

Same code acts differently on website and jsfiddle

I have some code that is meant to allow a user to scroll sideways by clicking, which works perfectly on jsfiddle, but does something completely different on my actual website. On my website, you can scroll right once but no further, and when you scroll back, it apparently scrolls right past the left-hand border.
Here's a live link to the problem on my website: rouvou.com/error
And here's the fiddle.
I literally copied and pasted the code. I'm using jQuery 1.10.0 on my website and the closest jQuery version jsfiddle has is 1.10.1, but I can't imagine that could cause this different behavior. The html I posted is the only code on that entire page. On both locations, I'm using Chrome Version 42.0.2311.152 (64-bit) on Ubuntu.
Why might the code have different results on jsfiddle and my website?
$(document).ready(function() {
var $item = $('div.item'), //Cache your DOM selector
visible = 2, //Set the number of items that will be visible
index = 0, //Starting index
endIndex = ($item.length / visible) - 1; //End index
$('div#arrowR').click(function() {
if(index < endIndex) {
index++;
$item.animate({
'left': '-=300px'
});
}
});
$('div#arrowL').click(function() {
if(index > 0) {
index--;
$item.animate({
'left': '+=300px'
});
}
});
});
#container {
width: 340px;
height: 50px;
}
#list-container {
overflow: hidden;
width: 300px;
float: left;
}
.list {
background: grey;
min-width: 1400px;
float: left;
}
#arrowR {
background: yellow;
width: 20px;
height: 50px;
float: right;
cursor: pointer;
}
#arrowL {
background: yellow;
width: 20px;
height: 50px;
float: left;
cursor: pointer;
}
.item {
background: green;
width: 140px;
height: 40px;
margin: 5px;
float: left;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="container">
<div id="arrowL">
</div>
<div id="arrowR">
</div>
<div id="list-container">
<div class='list'>
<div class='item'>1
</div>
<div class='item'>2
</div>
<div class='item'>3
</div>
<div class="item">4
</div>
<div class='item'>5
</div>
<div class='item'>6
</div>
<div class='item'>7
</div>
<div class="item">8
</div>
</div>
</div>
</div>
It seems just as you said, 1.10.0 has some bug on that. I created an altered version of your jsfiddle, the only difference is that the jQuery is using version 1.10.0, you can see that it works like your site now.
See jQuery 1.10.1 Change log :
Effects
#13937: finish() only finishes last item of a set being .animate()d.
#13939: 1.10.0 breaks relative animation
and the issue ticket#13939 :
Description
Relative animation (using += or -=) is broken in 1.10.0. For example,
$('h1').animate({marginLeft: '+=100px'}); does not work.
So, you might have to switch to version 1.10.x where x is the latest version, as their change should mostly be issue fixes, not functionality changes.
The problem was that there is indeed a bug in 1.10.0, but for anyone in the future who has this problem but doesn't want to upgrade, I figured out a way to make this function work on 1.10.0.
<div id="container">
<div id="arrowL">
</div>
<div id="arrowR">
</div>
<div id="list-container">
<div class='list'>
<div class='item'>1
</div>
<div class='item'>2
</div>
<div class='item'>3
</div>
<div class="item">4
</div>
<div class='item'>5
</div>
<div class='item'>6
</div>
<div class='item'>7
</div>
<div class="item">8
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var $item = $('div.item'), //Cache your DOM selector
visible = 2, //Set the number of items that will be visible
index = 0, //Starting index
endIndex = ( $item.length / visible ) - 1; //End index
animatepixels = 0
$('div#arrowR').click(function(){
if(index < endIndex ){
index++;
animatepixels = 0 - (index * 300)
$item.animate({'left':animatepixels+'px'});
}
});
$('div#arrowL').click(function(){
if(index > 0){
index--;
animatepixels= 0 - (index * 300)
$item.animate({'left':animatepixels+'px'});
}
});
});
</script>

Add different styles (tagcloud/linkcloud) to hyperlinks at once

I need to create simple link display like below image;
What I thought is add separate styles for all of these links. but its looks not the best way to do this.
have anyone tried something like this? can I do this with JavaScript or JQuery?
This allows you to randomly position the Text. Maybe you could edit it slightly for your needs?
<html>
<head>
<style type='text/css'>
body {
border: 1px solid #000;
height: 300px;
margin: 0;
padding: 0;
width: 300px;
}
.box {
height: 30px;
position: absolute;
width: auto;
}
#div1 { background:0;color:red; }
#div2 { background:0;color:blue; }
#div3 { background:0; color:green;}
</style>
<script type='text/javascript'>
function setDivPos() {
for (i=1; i<=3; i++) {
var x = Math.floor(Math.random()*250);
var y = Math.floor(Math.random()*250);
document.getElementById('div'+i).style.left = x + 'px';
document.getElementById('div'+i).style.top = y + 'px';
}
}
</script>
</head>
<body onload='setDivPos();'>
<div id='div1' class='box'>one word</div>
<div id='div2' class='box'>another word</div>
<div id='div3' class='box'>and so on</div>
</body>
</html>
Anyone have time to help?
Alternative
An alternative to this would be: this demo
Links:
There are several links here that you might be interested in

showing text under a circle when hovering over the circle

I need to have text underneath the circle when I hover over it. I have to use html, css and javascript. I'm not that good with javascript so I know thats the problem. Any help would be appreciated and if there is a simpler way to do the javascript code that would be good too!
Here is my html code:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<p>I often scribble in the sand</p>
<p>The words I find so hard to say</p>
<p>And hope the wind will come along</p>
<p>And blow them all your way.</p>
<div data-bind="event: { mouseover: EnableDetails, mouseout: DisableDetails
}"></div>
<p data-bind="visible: DetailsViewable(), text: AuthorName"></p>
</body>
</html>
here is my css code
div {
display: inline-block;
margin-left: 5px;
height: 100px;
width: 100px;
border-radius: 100%;
border:2px solid black;
background-color: black;
}
here is my javascript code:
var ViewModel = function() {
var self = this;
self.AuthorFirstName = ko.observable("Joe");
self.AuthorLastName = ko.observable("Blow");
self.AuthorName = ko.computed(function(){
return self.AuthorFirstName() + " " + self.AuthorLastName();
});
self.DetailsViewable = ko.observable(false);
self.EnableDetails = function() {
self.DetailsViewable(true);
};
self.DisableDetails = function() {
self.DetailsViewable(false);
};
};
var viewModel = new ViewModel();
ko.applyBindings(viewModel);
You can do this all with CSS.
http://jsfiddle.net/hzpKu/
div {
display: inline-block;
margin-left: 5px;
height: 100px;
width: 100px;
border-radius: 100%;
border:2px solid black;
background-color: black;
}
div:hover + p {
display:block;
}
p {
display:none;
}
Why not try with Jquery? is more easy with it.
http://jquery.com
(just download the plug in and put in the header)
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
div {
display: inline-block;
margin-left: 5px;
height: 100px;
width: 100px;
border-radius: 100%;
border:2px solid black;
background-color: black;
}
</style>
</head>
<body>
<p>I often scribble in the sand</p>
<p>The words I find so hard to say</p>
<p>And hope the wind will come along</p>
<p>And blow them all your way.</p>
<div id="circle"></div>
<p id="circle_text"></p>
<script>
$( "#circle" ).hover(function() {
$("#circle_text").text("Joe Blow");
}, function() {
$("#circle_text").text( "" );
});
</script>
</body>
</html>
You can also try something like this with a little bit of jquery...
Live Demo
<div id="circle"></div>
<div id="text">
...
</div>
$('#circle').on('mouseenter', function () {
$('#text').show("slow");
});
$('#circle').on('mouseout', function () {
$('#text').hide("slow");
});
Updated:
or you can do it with less code by using hover and toggle
$('#circle').hover( function () {
$('#text').toggle("slow");
});
Live Demo 2

JS/jQuery code works in chrome but not IE/FF

I've only been coding a couple of months and I'm struggling to figure out why this JS/jQuery wont run on a simple website I've been trying to create. I'm using Adobe Brackets and the live preview uses Chrome. Everything runs smoothly in Chrome, but when I open the index file with IE/FF JS/jQuery doesn't run at all.
Code as follows:
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"> </script>
<script src="modernizr.custom.55043.js"></script>
<script type="text/javascript">
function testimonialcontainer() {
$(".testimonialcontainer #1").show("fade", 500);
$(".testimonialcontainer #1").delay(5500).hide("slide", {direction: 'left'}, 500);
var sc=$(".testimonialcontainer img").size();
var
count=2;
setInterval(function() {
$(".testimonialcontainer #" + count).show("slide", {direction: 'right'}, 500);
$(".testimonialcontainer #" + count).delay(5500).hide("slide", {direction:'left'}, 500);
if(count == sc) {
count = 1;
} else {
count = count + 1;
}
}, 6500);
};
</script>
HTML
<div class="testimonialcontainer">
<img src="testimonials/test1.png" id="1" />
<img src="testimonials/test2.png" id="2" />
<img src="testimonials/test3.png" id="3" />
</div>
CSS
.testimonialcontainer {
width: 795px;
height:175px;
position: absolute;
margin-top: 1000px;
margin-left: 102px;
border-top: 4px solid black;
border-bottom: 2px dotted black;
}
.testimonialcontainer img {
width: 756px;
height: 155px;
display: none;
padding: 10px;
}
Thanks in advance!
N
Numbers alone do not work as names for div's in IE/FF.

Categories

Resources