Swap image when hover with fade effect - javascript

I have a image in my .img-area div and my img tag has data-list-1and data-list-2attribute.When I hover on my .img-area img div my image must swap with attribute data-list-1and data-list-2with fade effect and when I hoverout it must swap with default img.
I get attribute and src but I couldn't change each image with fade efect
You can see my works on demo
$(function(){
$(".img-area img").hover(function(){
var elem = $(this);
var defaultImg = elem.attr("src");
var data_1 = elem.attr("data-list-1");
var data_2 = elem.attr("data-list-2");
$(".show").html("Default image: "+defaultImg+"<br>Data 1 img:"+data_1 +"<br/>Data 2 img:"+ data_2);
});
});
.img-area{
float:left;
margin:20px;
}
.img-area img{
width:150px;
height:150px;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div class="img-area">
<img src="http://themewich.com/struck/wp-content/uploads/2015/02/logs-2-426x351.jpg" data-list-1="http://themewich.com/struck/wp-content/uploads/2015/02/06.jpg" data-list-2="http://themewich.com/struck/wp-content/uploads/2015/02/05.jpg">
</div>
<div class="img-area">
<img src="http://themewich.com/struck/wp-content/uploads/2015/02/logs-2-426x351.jpg" data-list-1="http://themewich.com/struck/wp-content/uploads/2015/02/06.jpg" data-list-2="http://themewich.com/struck/wp-content/uploads/2015/02/05.jpg">
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</body>
</html>

You can try with JQuery animate.
$(function(){
$(".img-area img").hover(function(){
var elem = $(this);
var parentDiv = $(this).parent();
var defaultImg = elem.attr("src");
var data_1 = elem.attr("data-list-1");
var data_2 = elem.attr("data-list-2");
parentDiv.animate({ opacity: 0 }, 3000, function(){ elem.attr("src",data_1)}).animate({ opacity: 1 }, 3000).animate({ opacity: 0 }, 3000, function(){ elem.attr("src",data_2)}).animate({ opacity: 1 },3000);
elem.animate({"src":data_1},"slow");
});
});
.img-area{
float:left;
margin:20px;
}
.img-area img{
width:150px;
height:150px;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div class="img-area">
<img src="http://themewich.com/struck/wp-content/uploads/2015/02/logs-2-426x351.jpg" data-list-1="http://themewich.com/struck/wp-content/uploads/2015/02/06.jpg" data-list-2="http://themewich.com/struck/wp-content/uploads/2015/02/05.jpg">
</div>
<div class="img-area">
<img src="http://themewich.com/struck/wp-content/uploads/2015/02/logs-2-426x351.jpg" data-list-1="http://themewich.com/struck/wp-content/uploads/2015/02/06.jpg" data-list-2="http://themewich.com/struck/wp-content/uploads/2015/02/05.jpg">
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</body>
</html>
Edited
var i =0;
var timer;
$(function(){
$(".img-area img").on("mouseover",function(){
var elem = $(this);
var parentDiv = $(this).parent();
var defaultImg = elem.attr("src");
var data_1 = elem.attr("data-list-1");
var data_2 = elem.attr("data-list-2");
var imageList = [data_1,data_2,data_1]
myanimation(parentDiv,elem,imageList,defaultImg);
});
});
var myanimation = function(parentElem,elem,imageList,defaultimage)
{
if(i <imageList.length)
{
clearInterval(timer);
parentElem.animate({ opacity: 0 }, 3000, function(){ elem.attr("src",imageList[i])}).animate({ opacity: 1 }, 3000);
timer = setInterval(function(){ i++;
myanimation(parentElem,elem,imageList,defaultimage) }, 6000);
}
else
{
clearInterval(timer);
parentElem.animate({ opacity: 0 }, 3000, function(){ elem.attr("src",defaultimage)}).animate({ opacity: 1 }, 3000);
}
}
.img-area{
float:left;
margin:20px;
}
.img-area img{
width:150px;
height:150px;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<div class="img-area">
<img src="http://themewich.com/struck/wp-content/uploads/2015/02/logs-2-426x351.jpg" data-list-1="http://themewich.com/struck/wp-content/uploads/2015/02/06.jpg" data-list-2="http://themewich.com/struck/wp-content/uploads/2015/02/05.jpg">
</div>
<div class="img-area">
<img src="http://themewich.com/struck/wp-content/uploads/2015/02/logs-2-426x351.jpg" data-list-1="http://themewich.com/struck/wp-content/uploads/2015/02/06.jpg" data-list-2="http://themewich.com/struck/wp-content/uploads/2015/02/05.jpg">
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</body>
</html>

window.onload=function(){
imgs=document.getElementsByTagName("img");
for(i=0;i<imgs.length;i++){
img=imgs[i];
container=document.createElement("div");
img.parentNode.appendChild(container);
container.appendChild(img);
img2=document.createElement("img");
img2.src=img.getProperty("secondsrc");
container.appendChild(img2);
img2.id="secondimg";
img.id="firstimage";
container.style.width=img.width;
container.style.height=img.height;
}};
css:
#firstimage{
z-index:3;
position:absolute;
opacity:1;
transition: all ease 2s;
}
#firstimage:hover{
opacity:0;
}
html:
<img src="url" secondsrc="url2">

Related

Javascript, make random_generated image as background

What I have
I have a HTML & javascript code : The javascript generate a random_number and use it as indexing on the array of images.Then,the script add the selected picture to the <img> tag of html code.
It's works very well.
What I need
I want to make the tags as background_image(display texts in it,buttons and more). Is there any way to do it? /searched lot of in google and there's no excellent result/.
Thank you for help. :(
window.onload = function() {
var cGamePic = new Array("http://advsys.net/ken/voxlap/voxlap_lib.jpg","http://advsys.net/ken/voxlap/cave.png");
var cGameName = new Array("Voxlap1", "Voxlap2");
var randomItemContainer1 = Math.floor(Math.random() * cGamePic.length); //container1
var randomItemContainer2 = Math.floor(Math.random() * cGamePic.length); //container2
var comp1GameTitle = document.querySelector("#container1 h1"); //Heading from main container
var comp1GameImage = document.querySelector("#container1 img"); //Image from main container
var comp2GameTitle = document.querySelector("#container2 h1"); //Heading from main container
var comp2GameImage = document.querySelector("#container2 img"); //Image from main container
comp1GameTitle.innerHTML = cGameName[randomItemContainer1]; //Random Title
comp1GameImage.src = cGamePic[randomItemContainer1]; //Random image
comp2GameTitle.innerHTML = cGameName[randomItemContainer2]; //Random Title
comp2GameImage.src = cGamePic[randomItemContainer2]; //Random image
};
<!doctype html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Random_page</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="rnd.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--width:45%; margin: 10px;-->
<div id="container1" style="float:left; width:45%; margin: 10px;">
<h1>Title</h1>
<img src="" width='100%' height='100%' />
</div>
<div id="container2" style="float:left; width:45%; margin: 10px;">
<h1>Title</h1>
<img src="" width='100%' height='100%' />
</div>
</body>
</html>
If you need to apply those random images as a background, it will be set as a background image of a div and not an img, so replace your img with a div and instead of writing:
comp1GameImage.src = cGamePic[randomItemContainer1];
You will need to write:
comp1GameImage.style.backgroundImage = "url('"+ cGamePic[randomItemContainer1]+"')";
Where comp1GameÎmage is your div.
Here's your updated Snippet:
window.onload = function() {
var cGamePic = new Array("http://advsys.net/ken/voxlap/voxlap_lib.jpg", "http://advsys.net/ken/voxlap/cave.png");
var cGameName = new Array("Voxlap1", "Voxlap2");
var randomItemContainer1 = Math.floor(Math.random() * cGamePic.length); //container1
var randomItemContainer2 = Math.floor(Math.random() * cGamePic.length); //container2
var comp1GameTitle = document.querySelector("#container1 h1"); //Heading from main container
var comp1GameImage = document.querySelector("#container1"); //Image from main container
var comp2GameTitle = document.querySelector("#container2 h1"); //Heading from main container
var comp2GameImage = document.querySelector("#container2"); //Image from main container
comp1GameTitle.innerHTML = cGameName[randomItemContainer1]; //Random Title
comp1GameImage.style.backgroundImage = "url('" + cGamePic[randomItemContainer1] + "')";
//cGamePic[randomItemContainer1]; //Random image
comp2GameTitle.innerHTML = cGameName[randomItemContainer2]; //Random Title
comp2GameImage.style.backgroundImage = "url('" + cGamePic[randomItemContainer2] + "')";
//cGamePic[randomItemContainer2]; //Random image
};
#container1,
#container2 {
display: inline-block;
width: 45%;
height: 100%;
float: left;
margin: 10px;
}
<!doctype html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>Random_page</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="rnd.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--width:45%; margin: 10px;-->
<div id="container1">
<h1>Title</h1>
</div>
<div id="container2">
<h1>Title</h1>
</div>
</body>
</html>
EDIT:
To make the two divs split the page into two frames, give them these styles:
#container1, #container2{
display:inline-block;
width:45%;
height:100%;
}
You could make images look like background (NOT in background) by overlapping H1 on IMG using CSS :
[id*=container] {
position:relative; /*--container is relative*/
}
h1 {
position:absolute; /*Image title is absolute*/
top:30px;
left:30px;
}
DEMO :
window.onload = function() {
var cGamePic = new Array("http://advsys.net/ken/voxlap/voxlap_lib.jpg","http://advsys.net/ken/voxlap/cave.png");
var cGameName = new Array("Voxlap1", "Voxlap2");
var randomItemContainer1 = Math.floor(Math.random() * cGamePic.length); //container1
var randomItemContainer2 = Math.floor(Math.random() * cGamePic.length); //container2
var comp1GameTitle = document.querySelector("#container1 h1"); //Heading from main container
var comp1GameImage = document.querySelector("#container1 img"); //Image from main container
var comp2GameTitle = document.querySelector("#container2 h1"); //Heading from main container
var comp2GameImage = document.querySelector("#container2 img"); //Image from main container
comp1GameTitle.innerHTML = cGameName[randomItemContainer1]; //Random Title
comp1GameImage.src = cGamePic[randomItemContainer1]; //Random image
comp2GameTitle.innerHTML = cGameName[randomItemContainer2]; //Random Title
comp2GameImage.src = cGamePic[randomItemContainer2]; //Random image
};
[id*=container] {
position:relative;
}
h1 {
position:absolute;
top:30px;
left:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--width:45%; margin: 10px;-->
<div id="container1" style="float:left; width:45%; margin: 10px;">
<h1>Title</h1>
<img src="" width='100%' height='100%' />
</div>
<div id="container2" style="float:left; width:45%; margin: 10px;">
<h1>Title</h1>
<img src="" width='100%' height='100%' />
</div>

Javascript element collapsing not working [duplicate]

This question already has answers here:
Uncaught ReferenceError: $ is not defined?
(40 answers)
Closed 6 years ago.
here is my problem. I have the code that you see below. Why it doesn't work like it does here: http://jsfiddle.net/e6kaV/33/ ?
There is the error that is shown to me:
{
"message": "Uncaught ReferenceError: $ is not defined",
"filename": "http://stacksnippets.net/js",
"lineno": 54,
"colno": 13
}
Every help is appreciated, because I don't know how JS or jQuery works.
.pane-launcher{
position:absolute;
top: 0;
width:80px;
height:80px;
display:block;
}
#rules {
left:0px;
}
#scenarios {
left:90px;
}
.pane{
position:absolute;
left: 0;
height:50px;
display:none;
opacity:1;
}
#rules-pane {
top:80px;
width:170px;
background-color:yellow;
}
#scenarios-pane {
top:80px;
width:170px;
background-color:blue;
}
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TEST</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div id="rules" class="pane-launcher"><img src="http://placehold.it/80x80"></div>
<div id="rules-pane" class="pane">Model1</div>
<div id="scenarios" class="pane-launcher"><img src="http://placehold.it/80x80"></div>
<div id="scenarios-pane" class="pane">Model2<br><img src="http://placehold.it/170x20"></div>
<script>
$(".pane-launcher").click(function () {
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: 'up' };
// Set the duration (default: 400 milliseconds)
var duration = 700;
$('.pane.active, #'+this.id+'-pane').toggle(effect, options, duration).toggleClass('active');
});</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
Load jQuery before using it:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TEST</title>
<link rel="stylesheet" href="css.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="rules" class="pane-launcher"><img src="http://placehold.it/80x80"></div>
<div id="rules-pane" class="pane">Model1</div>
<div id="scenarios" class="pane-launcher"><img src="http://placehold.it/80x80"></div>
<div id="scenarios-pane" class="pane">Model2<br><img src="http://placehold.it/170x20"></div>
<script>
$(".pane-launcher").click(function () {
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: 'up' };
// Set the duration (default: 400 milliseconds)
var duration = 700;
$('.pane.active, #'+this.id+'-pane').toggle(effect, options, duration).toggleClass('active');
});
</script>
</body>
</html>
I put it in the <head> but you can put it anywhere, as long as it's before the code that uses $ ($ is jQuery).
You should add jquery before you can use it. Here is the working example. I have just removed the script tag of jquery from bottom and placed it before other scripts.
Here is the pen http://codepen.io/anon/pen/xOzjWg
$(".pane-launcher").click(function () {
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: 'up' };
// Set the duration (default: 400 milliseconds)
var duration = 700;
$('.pane.active, #'+this.id+'-pane').toggle(effect, options, duration).toggleClass('active');
});
.pane-launcher{
position:absolute;
top: 0;
width:80px;
height:80px;
display:block;
}
#rules {
left:0px;
}
#scenarios {
left:90px;
}
.pane{
position:absolute;
left: 0;
height:50px;
display:none;
opacity:1;
}
#rules-pane {
top:80px;
width:170px;
background-color:yellow;
}
#scenarios-pane {
top:80px;
width:170px;
background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="rules" class="pane-launcher"><img src="http://placehold.it/80x80"></div>
<div id="rules-pane" class="pane">Model1</div>
<div id="scenarios" class="pane-launcher"><img src="http://placehold.it/80x80"></div>
<div id="scenarios-pane" class="pane">Model2<br><img src="http://placehold.it/170x20"></div>
Thanks for help everybody, got it working after i included these 3 scripts link (which was an answer in suggested related question).
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

How to fadeIn and fadeOut elements in one div after defined time?

How to display queued messages one after another with delay in the same div? Current solution is bad because is showing instantly new divs.
HTML:
<div id="alert-bar-container"></div>
<button id="show">First message</button>
<button id="next">Next message</button>
JavaScript:
var timeout;
$("#show").click(function () {
alertBar("this appears first");
});
$("#next").click(function () {
alertBar("this should wait and show after first disappeared");
});
function alertBar(msg) {
var message_span = $('<span />').html(msg);
var wrap_bar = $('<div />').addClass('alert_bar');
$('#alert-bar-container').html(wrap_bar.append(message_span).hide());
clearTimeout(wrap_bar.data("timer"));
wrap_bar.clearQueue();
if (wrap_bar.filter(":hidden").length == 1) wrap_bar.fadeIn('fast');
wrap_bar.data("timer", setTimeout(function () {
wrap_bar.fadeOut("slow");
wrap_bar.remove();
}, 2500));
}
Example: http://jsfiddle.net/LsRK8/
Try:
HTML:
<div id="container">
<div class="msg active">first</div>
<div class="msg">second</div>
<div class="msg">third</div>
<div class="msg">fourth</div>
</div>
JS:
setInterval(function(){
var active = $("#container").find(".active");
var i = $(active).index();
var len = $("#container").find(".msg").length;
var next;
if(i == (len-1)){
next = $("#container").find(".msg:first");
}
else{
next = $("#container").find(".msg:eq("+(i+1)+")");
}
$(active).removeClass("active").hide();
$(next).addClass("active").fadeIn();
},3000);
Fiddle here.
Hope this helps...edited with no button...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>delay demo</title>
<style>
div {
position: absolute;
width: 60px;
height: 60px;
float: left;
}
.first {
background-color: #3f3;
left: 0;
}
.second {
background-color: #33f;
left: 80px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div class="first"></div>
<div class="second"></div>
<script>
$( document ).ready(function() {
$( "div.first" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );
$( "div.second" ).slideUp( 300 ).fadeIn( 400 );
});
</script>
</body>
</html>

JQuery image slider not working... What have I done wrong?

It should be simple image slider...
Why, o why doesn't this work? I followed some tutorial "to the letter", but it's video tutorial on youtube so I don't have their working code on some site to compare, but nevertheless, by their instruction and my week knowledge, I can't find mistake...
<html>
<head>
<title>JQuery test</title>
<style type="text/css">
.slider {
width:500px;
height:250px;
overflow:hidden;
margin:30px auto;
background-image:url(img/loading.gif);
background-repeat:no-repeat;
background-position:center;
}
.slider img {
width:800px;
height:350px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">
function Slider(){
$(".slider#img1").show("fade",500);
$(".slider#img1").delay(5500).hide("slide",{direction:'left'},500);
var sc=$(".slider img").size();
var count=2;
setInterval(function(){
$(".slider #img"+count).show("slide",{direction:"right"}, 500);
$(".slider #img"+count).delay(5500).hide("slide", {direction:"left"}, 500);
if(count==sc){
count=1;
} else {
count=count+1;
}, 6500);
}
}
</script>
</head>
<body onload="Slider()">
<div class="slider">
<img id="img1" src="img/1.jpg" />
<img id="img2" src="img/2.jpg" />
<img id="img3" src="img/3.jpg" />
</div>
</body>
</html>
you have misplaced your } bracket for else and setInterval
function Slider(){
$(".slider#img1").show("fade",500);
$(".slider#img1").delay(5500).hide("slide",{direction:'left'},500);
var sc=$(".slider img").size();
var count=2;
setInterval(function(){
$(".slider #img"+count).show("slide",{direction:"right"}, 500);
$(".slider #img"+count).delay(5500).hide("slide", {direction:"left"}, 500);
if(count==sc){
count=1;
} else {
count=count+1;
}
}, 6500); //<---here
}

change alert message text color using javascript

Am using the below script to change the color of the script but showing 'font color="red">Hello world /font> like this.Is any possible way to change the alert text color..
<html>
<head>
<title>JavaScript String fontcolor() Method</title>
</head>
<body>
<script type="text/javascript">
var str = new String("Hello world");
alert(str.fontcolor( "red" ));
</script>
</body>
</html>
No. alert() accepts a string and renders it using a native widget. There is no provision to style it.
The closest you could get would be to modify the HTML document via the DOM to display the message instead of using an alert().
You can use JQuery to resolve your Problem
<html>
<head>
<meta charset="utf-8" />
<title>JavaScript String fontcolor() Method</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery- ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}});
});
</script>
</head>
<body>
<div id="dialog-message" title="My Dialog Alternative">
<p style='color:red'> Hello world </p>
</div>
</body>
</html>
Hope this help :
<!doctype html>
<html>
<head>
<title>JavaScript String fontcolor() Method</title>
<style>
#alertoverlay{display: none;
opacity: .8;
position: fixed;
top: 0px;
left: 0px;
background: #FFF;
width: 100%;}
#alertbox{display: none;
position: fixed;
background: #000;
border:7px dotted #12f200;
border-radius:10px;
font-size:20px;}
#alertbox > div > #alertboxhead{background:#222; padding:10px;color:#FFF;}
#alertbox > div > #alertboxbody{ background:#111; padding:40px;color:red; }
#alertbox > div > #alertboxfoot{ background: #111; padding:10px; text-align:right; }
</style><!-- remove padding for normal text alert -->
<script>
function CustomAlert(){
this.on = function(alert){
var winW = window.innerWidth;
var winH = window.innerHeight;
alertoverlay.style.display = "block";
alertoverlay.style.height = window.innerHeight+"px";
alertbox.style.left = (window.innerWidth/3.5)+"pt";
alertbox.style.right = (window.innerWidth/3.5)+"pt"; // remove this if you don't want to have your alertbox to have a standard size but after you remove modify this line : alertbox.style.left=(window.inner.Width/4);
alertbox.style.top = (window.innerHeight/10)+"pt";
alertbox.style.display = "block";
document.getElementById('alertboxhead').innerHTML = "JavaScript String fontcolor() Method :";
document.getElementById('alertboxbody').innerHTML = alert;
document.getElementById('alertboxfoot').innerHTML = '<button onclick="Alert.off()">OK</button>';
}
this.off = function(){
document.getElementById('alertbox').style.display = "none";
document.getElementById('alertoverlay').style.display = "none";
}
}
var Alert = new CustomAlert();
</script>
</head>
<body bgcolor="black">
<div id="alertoverlay"></div>
<div id="alertbox">
<div>
<div id="alertboxhead"></div>
<div id="alertboxbody"></div>
<div id="alertboxfoot"></div>
</div>
</div>
<script>Alert.on("Hello World!");</script>
</body>
</html>
The concept is taken from this : http://www.developphp.com/video/JavaScript/Custom-Alert-Box-Programming-Tutorial

Categories