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>
Related
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">
<!doctype html>
<html>
<head><title>This is my first jquery page!</title>
<meta charset="utf-8">
<style type="text/css">
#change_me {
position: absolute;
top: 100px;
left: 400px;
font: 24px arial;
}
#move_up #move_down #color #disappear {
padding: 5px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body lang="en">
<button id="move_up">Move Up</button>
<button id="move_down">Move Down</button>
<button id="move_left">Move Left</button>
<button id="move_right">Move Right</button>
<br>
<button id="color">Change Color</button>
<button id="disappear">Disappear/Re-appear</button>
<button id="propchangeme" onclick="alert('The value is: ' + prop1)">Get the Font Value of #change_me</button>
<div id="change_me">Make Me Do Stuff</div>
<script type="text/javascript">
//custom made variables :)
var prop1 = $("#change_me").css("font");
$(document).ready(function() {
$("#move_up").click(function() {
$("#change_me").animate({top:30}, 200);
}); //end move_up
$("#move_down").click(function() {
$("#change_me").animate({top:500}, 2000);
}); //end move_down
$("#move_left").click(function() {
$("#change_me").animate({left:30}, "fast");
}); //end move left
$("#move_right").click(function() {
$("#change_me").animate({left:500}, "slow");
});
$("#color").click(function() {
$("#change_me").css("color", "purple");
}); //end color
$("#disappear").click(function(){
$("#change_me").toggle("slow");
}); //end disappear
});//end script
</script>
</body>
</html>
On the line where is says var prop1 = $("#change_me").css("font");
The value returned by the alert is blank, yet if I change it to .css("postion"); the alert will return a visible value (which is absolute in this case). Why won't JavaScript alert display a value for my request? How can I make this work?
I'm making instagram API that should retrieve user accounts that contain a given keyword, the code worked well at first, but when i inserted the part of the loading gif it didn't work, the gif just kept appearing without any result
here is my code
<!DOCTYPE html>
<html>
<head charset="utf-8">
<style type="text/css">
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).on("mouseover", "#instaUser img", function() {
$(this).css('opacity', '0.5');
});
$(document).on("mouseout", "#instaUser img", function() {
$(this).css('opacity', '1');
});
var keyword;
var arr=new Array();
var time;
function getUsers() {
keyword=document.getElementById("search").value;
document.getElementById("name").innerHTML = keyword;
//retrieve user accs
$.ajax({
type: "POST",
url: "get_info.php?keyword='+keyword+"&"count=20",
beforeSend: function()
{
$('#images').html("<img src='ajax-loader.gif'/>");
},
success: function(data)
{
$.getJSON('get_info.php?keyword='+keyword,function(data){
$("#instaUser").empty();
$( "#images" ).fadeOut( "fast" );
$("#instaUser").empty();
// this is where we can loop through the results in the json object
for (var i = 0; i <20; i++){
if(i%4==0)
$("#instaUser").append("<br>");
$("#instaUser").append("<figure style='display:inline-block'><img id='"+i+"' src='"+data.data[i].profile_picture+"' alt='pic number "+i+"' height='"+200+"' width='"+200+"'> <figcaption>#"+data.data[i].username+"</figcaption></figure>");
// $("#instaUser").append("");
}//end for
$( "#images" ).fadeIn( "slow" );
});//end getJSON
}
});
}
</script>
</head>
<body>
<header>
Instagram User Search
<span style=" margin-left: 400px; margin-right: auto;font-family:Times New Roman, Times, serif;">Search
<input id="search" type="text" onchange="getUsers()" >
</div>
</header>
<article>
<section>
<h1 id="name" style="text-align: center; font-family:cashC; color:#95B9C7; text-shadow: 1px 2px #000000;">
</h1>
<div id="images" style="text-align: center ;">
<div id="instaUser" style="font-family:Times New Roman, Times, serif">
</div>
</div>
</section>
</article>
</body>
</html>
it's like the gif is going through an infinite loop but i don't know where is the problem exactly in my code
I am experiencing an issue with my scripts to which I cannot find a proper fix. I have this code, which uses glassbox.js and all its extras, which uses to work (it displayed the glassbox appropriately) but since I added JQuery to the file it has stopped working. I am not sure how to rearrange or call the scripts so that it functions again. The commented out lines myBox.whatever are the lines causing the issue specifically:
#model OneEightyWebApp.Models.Centres
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" media="screen" />
<head>
<title></title>
<script src="../../Content/javascripts/prototype.js" type="text/javascript"> </script>
<script src="../../Content/javascripts/scriptaculous/effects.js" type="text/javascript"></script>
<script src="../../Content/javascripts/glassbox/glassbox.js" type="text/javascript"></script>
<script type="text/javascript">
var spaces = #Html.Raw(Json.Encode(ViewData["spaces"]))
function glassLoad() {
path_to_root_dir = "../../Content/";
var myBox = new GlassBox();
myBox.init('myBox', '600px', '400px', 'hidden', '', true, true);
// myBox.apos('300', '300px');
// myBox.appear();
alert("clicked");
}
</script>
<script src="../../Content/javascripts/prototype.js"> </script>
<script type="text/javascript">
document.observe('dom:loaded', function () {
$$("body")[0].on('click', ".class1", function () {
var myBox = document.getElementById("myBox");
myBox.style.display = "block";
glassLoad();
});
});
</script>
<script src="../../Content/jquery.js"></script>
<script type="text/javascript">
jQuery(function () {
var array = [];
jQuery("#centres").change(function () {
var selectedCentre = $("#centres option:selected").text();
$.getJSON("/Centres/output?centreName=" + selectedCentre, function (results) {
var data = results;
document.getElementById("container2").innerHTML = "";
var div;
for (var i = 0; i < document.getElementById("centres").value; i++) {
div = document.createElement("div");
div.className = "class1";
div.innerHTML = "Shop " + data[i];
div.innerHTML += "<br>";
div.innerHTML += "Floor Space: <b>" + spaces[i] + " m2 </b>";
div.style.width = "100px";
div.style.height = "100px";
div.style.padding = "0px";
div.style.float = "left";
document.getElementById("container2").appendChild(div);
}
});
});
});
</script>
</head>
<body>
<div id="container1" style="width: auto; height: 50px;">
<button style="margin: auto; vertical-align: top; float: left; font-size: 16px;" type="button" onclick="glassLoad();">Generate</button>
#Html.DropDownList("centres", (List<SelectListItem>)ViewData["centres"])
<select id="mySelect"></select>
</div>
<div id="container2" style="margin: 10px; float: left;"></div>
<div id="myBox" style="display: none; width: 600px; height: 400px;">
<div id="exitButton" style="position: absolute; left: 564px; bottom: 173px; z-index: 1001;" title="close">
<a href="javascript:THIS.fade();">
<img id="exitImage" style="border: none;" src="../../Content/javascripts/glassbox/skins/exitButton.png"></a>
</div>
</div>
</body>
You have to put jQuery in noConflict and pass $ into the ready event here:
$.noConflict();
jQuery(function ($) {
var array = [];
... // use $ from now on instead of jQuery
That's one way of doing it, check the docs there are other patterns.
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