I am trying to build a simple web page for my website using HTML, CSS, JavaScript and JQuery. What I want is to display a slideshow of a few of my images at the top of the page. I just want the pictures to fade out and fade in after one another forever until the user closes the browser. I want each picture to be displayed for a certain amount of time, after which it will fade out and another picture would fade in.
I referred to this as well as this post on SO but couldn't find a solution. I got some idea from this page and tried to develop some code.
The overall layout of the website is as follows:
For this, my index.html page looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" href="css/style.css" />
<script language="javascript" src="js/jquery-1.10.2.min.js"></script>
<script language="javascript" src="js/common.js"></script>
<script language="javascript" src="js/banner_rotator.js"></script>
</head>
<body onload="loadBody();">
<div id="wrapper">
<img id="headerlogo" />
<div id="nav">
Home
About
Weddings
Portraiture
Landscapes
Products
Miscellaneous
Services
Contact
</div>
<div id="container">
<div id="content">
<!-- Main content starts here -->
<p>
Welcome to the world of The Siblings' photography.
</p>
imgpos = <span id="imgposspan"></span>
<!-- Main content ends here -->
</div>
</div>
</div>
</body>
</html>
The CSS is like this:
body {
background-color: transparent; color: #d0d0d0;
font: normal normal 11px verdana; margin: 0 auto;
}
#wrapper {
background-color: transparent; width: 960px; margin: 0 auto;
}
#headerlogo {
border-radius: 0px 0px 5px 5px; display: block;
width: 960px; height: 350px;
background-color: #d0d0d0;
}
#container {
width: 100%; margin-top: -35px;
}
#nav {
background-color: transparent;
color: #888888; border-radius: 5px; padding: 10px;
width: 100%; position: relative; top: -40px;
}
#nav>a {
border-radius: 5px; display: inline-block; padding: 5px 19px;
font-weight: bold; border: 1px solid transparent;
color: #888888; background: none none transparent no-repeat;
}
#nav>a:link {
text-decoration: none; border-color: transparent; background-image: none;
}
#nav>a:visited {
text-decoration: none; border-color: transparent; background-image: none;
}
#nav>a:hover{
text-decoration: none; border-color: #ffa500; background-image: url("/img/1x30_ffa500.gif");
background-repeat: repeat-x; box-shadow: 0px 0px 5px #ffd700;
}
#nav>a:active {
text-decoration: underline; border-color: transparent;
background-image: none;
}
#content {
background-color: #f0f0f0; color: #202020;
padding: 5px; border-radius: 5px;
}
The common.js file is like this:
$(document).ready(function (){
var images = new Array();
images[0] = new Image();
images[0].src = "img/coverpics/sea_link.jpg";
images[1] = new Image();
images[1].src = "img/coverpics/marine_drive.jpg";
images[2] = new Image();
images[2].src = "img/coverpics/backbay.jpg"
banner_rotator("headerlogo", images, 0);
});
And, the banner_rotator.js file is like this:
function banner_rotator(imgid, imgarray, imgpos) {
setInterval(function() {
if (imgpos >= imgarray.length || imgpos == undefined)
imgpos = 0;
$("#"+imgid).attr({ "src" : imgarray[imgpos].src });
$("#"+imgid).fadeIn(1000, "linear");
$("#"+imgid).delay(6500);
$("#"+imgid).fadeOut(500);
// $("#imgposspan").html(imgpos);
imgpos++;
}, 8000);
}
Now, my problem description is as follows:
For the first few seconds the top portion is blank. The image is not showed, even though I am developing and having all the files on my local machine itself.
This first image directly pops up on the screen, instead of fading in.
After this image fades out, the image block vanishes, as if it is set to display: none; for a second. The entire page that follows the image shifts up. Then, the next image fades in and so forth everything runs normal.
Hence, in short, I have problems with the starting of this slideshow. Can anybody please help?
Also please tell me where can I put my code so everybody here can access and see for themselves how it runs?
JSFIDDLE
<img id="headerlogo" />
Don't do that (an image tag with no src attribute)
Put a div that will hold the space (set position:relative with width & height in css)
Then the problem is that you are changing your src attribute in your time loop, this ain't smooth
In your CSS, suppose you name your slider wrapper headerlogo_wrapper
div.headerlogo_wrapper > img {position:absolute;display:none;left:0;top:0}
Then you append your images to the space holder you have created (they will not show obviously)
Then you fadeIn your first image then you launch your setInterval :
//after having appended the images to the slider wrapper :
var $img = $("div.headerlogo_wrapper > img");
$img.eq(0).fadeIn(1000, "linear");
var ivisible = 0;
setInterval( function() {
$img.eq(ivisible).fadeOut(500);
++ivisible;
if (ivisible>$img.length-1) ivisible = 0;
$img.eq(ivisible).stop().fadeIn(1000, "linear");
}, 8000);
(If you want an image to be shown during load, some simple changes shall do; also if the first interval start immediately you obviously don't need to fadeIn "manually" the first image)
Try this: http://jsfiddle.net/3XV5M/
Your problem is the first time you run the timer function it won't run straight away. It will be run after 8000ms. The way this fiddle works is it will execute the function immediately and the run itself again after 8 seconds. Note I'm using setTimeout instead of setInterval.
function banner_rotator(imgid, imgarray, imgpos) {
if (imgpos >= imgarray.length || imgpos == undefined) imgpos = 0;
$("#"+imgid).attr({ "src" : imgarray[imgpos].src })
.fadeIn(1000, "linear")
.delay(6500)
.fadeOut(500);
imgpos++;
setTimeout(function() {banner_rotator(imgid, imgarray, imgpos) }, 8000);
}
The other problem is you need to hide the images first, so they can fade in. They wont fade in if they are already visible.
#headerlogo {
border-radius: 0px 0px 5px 5px;
width: 960px; height: 350px;
background-color: #d0d0d0;
display: none; /* Add this */
}
Then to prevent the other elements jumping up when you fade the images out, wrap the image element inside a div and set it's height. I used a div with a class of banner and added this style:
.banner {
height: 350px;
}
Hope that helps.
The problem is that you are fading out at the end of your interval. So replace this:
$("#"+imgid).attr({ "src" : imgarray[imgpos].src });
$("#"+imgid).fadeIn(1000, "linear");
$("#"+imgid).delay(6500);
$("#"+imgid).fadeOut(500);
with this:
$("#"+imgid).fadeOut(500)
$("#"+imgid).queue(function(){
$("#"+imgid).attr({ "src" : imgarray[imgpos].src });
$("#"+imgid).fadeIn(1000);
$("#imgposspan").html(imgpos);
imgpos++;
$(this).dequeue();
});
JSFIDDLE demo
Related
My HTML Code is :
<!DOCTYPE html>
<html>
<head>
<title>Furry Friends Campaign</title>
<link rel="stylesheet" type="text/css" href="styles/my_style.css">
</head>
<body>
<div id="clickMe">Show me the the Furry Friend of the Day</div>
<div id="picframe">
<img src="images/furry_friend.jpg" alt="Our Furry Friend">
</div>
<script type="text/javascript" src="scripts/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#clickMe").click(function()
{
$("img").fadeIn(1000);
$("#picframe").slideToggle("slow");
});
});
</script>
</body>
</html>
The accompanying CSS looks like:
#clickMe {
background: #D8B36E;
padding: 20px;
text-align: center;
width: 205px;
display: block;
border: 2px solid #000;
}
#picframe {
background: #D8B36E;
padding: 20px;
width: 205px;
display: none;
border: 2px solid #000;
}
The slideToggle works perfectly, but for some reason, the image doesn't fade in. I've tried setting the duration to longer periods, but that yields the same results. Can someone point out what's wrong with this code? I'm using the latest version of Chrome.
UPDATE: I tried running the example code of the book I was using, which uses jquery-1.6.2.min.js and using that version of jQuery, the code works perfectly. Is this some error on jQuery's part? Or is the new way that things will be done now?
Since jQuery 1.8, fadeIn no longer initially hides the image, so trying to fade in an image which is visible or doesn't have display set to none won't lead to anything.
To fade in, you should hide it first. Initially it's not hidden, since children don't inherit display CSS property, and you have set it to none only on #picframe, the parent of img. Just add $("img").hide(); on ready. This will make it work.
Since it looks like you need to fade it in / out with each click, you could do the following instead of $("img").fadeIn(1000):
if($("img").is(":hidden")) $("img").fadeIn(1000);
else $("img").fadeOut(1000);
Demo below.
#clickMe {
background: #D8B36E;
padding: 20px;
text-align: center;
width: 205px;
display: block;
border: 2px solid #000;
}
#picframe {
background: #D8B36E;
padding: 20px;
width: 205px;
display: none;
border: 2px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div id="clickMe">Show me the the Furry Friend of the Day</div>
<div id="picframe">
<img src="images/furry_friend.jpg" alt="Our Furry Friend">
</div>
<script type="text/javascript" src="scripts/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//$("img").hide();
$("#clickMe").click(function() {
$("img").fadeIn(1000);
$("#picframe").slideToggle("slow");
});
});
</script>
Somehow, img didn't inherit the display:none in #picframe div. Here's the fix: https://jsfiddle.net/69rLha7e/1/
There is a "timing" consideration while playing with multiple animations a time.
In this CodePen, I used diferent timing for fadeIn, fadeOut and toggleSlide.
And you have to check the display state in order to decide to fade in or out.
$(document).ready(function(){
$("#clickMe").click(function(){
console.log( $("img").css("display") ) ;
if( $("img").css("display")=="inline" ){
$("img").fadeOut(400);
}else{
$("img").fadeIn(800);
}
$("#picframe").slideToggle(400);
});
});
I am writing a plugin for showing ajax content.It is wrapped in a ajax-content-wrap.I have applied jquery animate() but not smooth with auto height.And fade() function is also animating.But when i use a specific height animate() works and fadeIn() does not works.
my html codes are below
<div class="ajax-content-wrap">
<div class="ajax-content-show">
//here to show contents from external files
</div>
</div>
My jquery
$('.ajax-content-show').animate({height:'200px'}, function(){
$(this).fadeIn('slow', function(){
$(this).fadeIn('slow').load(url);
})
});
My css
.ajax-content-show{
padding: 20px 20px;
display: block;
border: 1px solid #eee;
margin: 10px 0;
}
If I understand what you are trying to acheive here is a solution:
$('.ajax-content-show').animate({
height: '200'
}, 500, "linear",
function () {
$('.ajax-content-show').hide(0, function () {
$('.ajax-content-show').load(url, function () {
$('.ajax-content-show').fadeIn('slow')
});
});
});
If not, can you explain (in steps) what you require, first make "div" 200px then fade in "loaded page" or do them both simultaneously?
Note: Don't need to include the 'px' when setting the height property, JQuery assumes pixels as a default.
May this you want ?
See snippet.
$(".ajax-content-show").load("https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js", function(){
$(this).slideDown(10000); // change the time, or just remove it if you think too slow.
$(this).addClass("loaded");
});
.ajax-content-show{
padding: 20px 20px;
display: none;
border: 1px solid #eee;
margin: 10px 0;
height: auto;
opacity: 0;
transition: opacity 5s ease;
max-height: 500px; /* This just for show that sliding is working */
}
.ajax-content-show.loaded {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ajax-content-wrap">
<div class="ajax-content-show">
//here to show contents from external files
</div>
</div>
I am trying to create a drop-down menu for a site that i am working on, and I am having problems with hiding and showing the drop down with the code that I have been using.
Basically, I need this:
The Collections
to read in the browser like:
The Collections
or display
The Collections
Code:
<html>
<head>
<title>Menu Test</title>
<!-- Begin css library -->
<style type="text/css">
html {
overflow-y: scroll;
margin: 0;
padding: 0;
font-family: sans-serif;
}
body {
background-color: #fff;
color: #444;
margin: 0px;
padding: 0px;
}
/* Begin top bar
*************************/
#top-bar {
-webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);
-moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);
box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);
font-family: GillSansMTStd-Book;
}
#top-bar-content {
position: relative;
height: 94px;
margin: 0 auto;
width: 1025px;
text-align: "right";
}
#top-bar .wrap {
padding-left: 33px;
padding-right: 33px;
}
#top-bar .links {
float: right;
line-height: 94px;
}
#top-bar a {
outline:0;
}
#top-bar .links a {
display: inline-block;
color: #b9afa3;
font-size: 14px;
font-weight: normal;
letter-spacing: .8px;
text-decoration: none;
margin-left: 30px;
text-transform: uppercase;
}
#top-bar .links a:hover,
#top-bar .links a.active {
color: #746758;
background: url(/HalstedDesigns/catalog/view/theme/margaretha/image/nav-rule.gif) top center no-repeat;
}
#top-bar .collections {
display: none;
background-color: #695d4f;
color: #fff;
position: absolute;
top: 94px;
width: 340px;
text-align: center;
margin-left: 80px;
padding-top: 10px;
-webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);
-moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);
box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);
z-index: 5;
}
#top-bar .collections a{
color:#fff;
display:block;
line-height:26px;
padding:10px 20px;
margin:0;
background-image:none;
text-transform:capitalize;
font-size:16px;
}
#top-bar .collections a.the-ardmore-collection {
font-size:14px;
}
#top-bar .collections a:hover,
#top-bar .collections a.active {
background-color:#fff;
color:#695d4f;
background-image:none;
}
</style>
<!-- End css library -->
<!-- Begin jquery library -->
<script language="javascript" type="text/javascript">
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'block';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'none';
}
}
}
</script>
<!-- End jquery library -->
</head>
<body>
<div id="top-bar">
<div id="top-bar-content">
<div class="wrap">
<img src="image/halsted-logo.png"; alt="Halsted Logo">
<div class="links">
<div class="collections">
THE ARDMORE COLLECTION
Qalakabusha Sofa
Qalakabusha Fabric Collection
Hand bags
Scatter Cushions
Batonka Stools
Tablecloths
Place Mats
Napkins
Table Runners
</div>
Art Into Design
The Collections
Contact Us
Newsletter
</div>
</div>
</div>
<div>
</body>
</html>
I personally think it is better to use the :hover CSS property for menus. It is a lot easier to implement but you might have problems on mobile devices. https://developer.mozilla.org/fr/docs/Web/CSS/:hover
However, if you really want it on the onclick event, you will need to add or bind your event. Here is the jQuery documentation for it: http://api.jquery.com/bind/
once you will have bind the event, you will have to use your function's "event" parameter to get which element you clicked on and then show the right menu.
The problem:
You have no handle on the element you are trying to change inside your function. This is because you are using getElementById(), but the collections div has no id attribute defined.
You are referencing the element whose display you wish to toggle inconsistently. Sometimes you are using document.getElementById(shID+"-show"), and other times you are simply using document.getElementById(shID).
There is a logic error in your if statement; the condition in if (document.getElementById(shID+'-show').style.display != 'none') should check whether the style IS set to none, if so we want to change the style to block, and vice versa.
The Solution
Add an id attribute to the collections div like so:
<div id = "collections" class = "collections">
Inside your showID function replace all instances of document.getElementById(shID+"-show") with document.getElementById(shID). In fact, an even cleaner way to do this would be to only call the function once and assign the result to a variable.
Change the condition in your second if statement to check if the display IS equal to none.
With all the changes mentioned, your final function will look something like this:
function showHide(shID) {
var el = document.getElementById(shID);
if (el) {
if (el.style.display === 'none' || el.style.display =='') {
el.style.display = 'block';
}
else {
el.style.display = 'none';
}
}
}
You may notice I added an or in the if statement. This is because for some reason the initial value of el.style.display (before it is set using javascript in the function) is ''. Without this or condition it would take two clicks to display the menu the first time around.
The Multiple menu solution:
Multiple menus expands the showHide from one to two lines of code.
Note: The basics are documented in another Answer to this post that was posted prior to this one.
This time vs. the previous single method we save the divs to an array of variables. It is important this array is defined globally outside of any function.
This code is test and works well.
The initialization code:
Create the arrays
var toggle = new Array;
toggle['none'] = 'block';
toggle['block'] = 'none';
var div = new Array;
The initialization in now in an init function. Not required but is more reliable. This way it will never execute before page load.
window.onload = init;
The init just get the showHide divs for the first time.
Then hides them all.
function init(){
div[1] = document.getElementById('d1');
div[2] = document.getElementById('d2');
div[3] = document.getElementById('d3');
div[4] = document.getElementById('d4');
hideAll();
}
I have added a hide all function. It is easier and quicker to hide all menus when another is displayed. You do not want two menus open at the same time. You could track the open menu and specifically close that one, but why bother?
function hideAll(){
div[1].style.display='none';
div[2].style.display='none';
div[3].style.display='none';
div[4].style.display='none';
}
Wrapping it up:
I altered some of your HTML for test and demo purposes.
HTML
Art Into Design
The Collections
Contact Us
Newsletter
<div id="d2"class="collections" >
THE ARDMORE COLLECTION
Qalakabusha Sofa
Qalakabusha Fabric Collection
</div>
<div id="d3"class="collections">
Hand bags
Scatter Cushions
Batonka Stools
</div>
<div id="d4"class="collections">
Tablecloths
Place Mats
Napkins
Table Runners
</div>
</div>
</div>
</div><div>
JavaScript
<script language="javascript" type="text/javascript">
function showHide(id) {
hideAll();
div[id].style.display=toggle[div[id].style.display];
}
var toggle = new Array;
toggle['none'] = 'block';
toggle['block'] = 'none';
var div = new Array;
function hideAll(){
div[1].style.display='none';
div[2].style.display='none';
div[3].style.display='none';
div[4].style.display='none';
}
function init(){
div[1] = document.getElementById('d1');
div[2] = document.getElementById('d2');
div[3] = document.getElementById('d3');
div[4] = document.getElementById('d4');
hideAll();
}
window.onload = init;
</script></body></html>
Very simple one line of code to execute to show hide. Just a few lines to set up.
This code is tested and works well. This is for just one menu but can easily to expand to multiple. See my other Answer for multiple menus (added after this one)
Setup code is run one time when the page loads.
The setup:
Create an array to do the toggle. This eliminates the if else.
var toggle = new Array;
toggle['none'] = 'block';
toggle['block'] = 'none';
Read the "collections div into a variable. Read once, never again.
var div = document.getElementById('d1');
The initialize the div so the DOM holds the display:none. Otherwise the first read will be null.
div.style.display='none';
Then the showHide function
function showHide(id) {div.style.display=toggle[div.style.display];}
The div.style.display within the toggle array toggle[div.style.display] wil either be block or none. Which ever, toggle will return the opposite. The sames as if it were toggle['block'] which returns 'none' which get assigned to the collections div.
Note:
The JS code should be located just before the closing body tag </body>. This way it will not be parsed until the HTML is all loaded.
Also it is very important to use a valid DOC Type. If not the Browser has to guess and may guess wrong. Slows own page load time.
<!DOCTYPE html>
<html lang="en">
The JavaScript code:
</div><div>
<script language="javascript" type="text/javascript">//<![CDATA[
function showHide(id) {div.style.display=toggle[div.style.display];}
var toggle = new Array;
toggle['none'] = 'block';
toggle['block'] = 'none';
var div = document.getElementById('d1');
div.style.display='none';
//]]>
</script></body></html>
Also way too much white space. This could significantly increase your transmission time. Most should be compressed as your pages should be gzipped.
<!DOCTYPE html>
<html lang="en"><head><title>Menu Test</title><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
html {overflow-y: scroll;margin: 0; : 0;font-family: sans-serif;}
body {background-color: #fff;color: #444;margin: 0px; : 0px;}
/* Begin top bar *************************/
#top-bar {-webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);-moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);font-family: GillSansMTStd-Book;}
#top-bar-content {position: relative;height: 94px;margin: 0 auto;width: 1025px;text-align: "right";}
#top-bar .wrap { -left: 33px; -right: 33px;}
#top-bar .links {float: right;line-height: 94px;}
#top-bar a {outline:0; }
#top-bar .links a {display: inline-block;color: #b9afa3;font-size: 14px;font-weight: normal;letter-spacing: .8px;text-decoration: none;margin-left: 30px;text-transform: uppercase;}
#top-bar .links a:hover,#top-bar .links a.active {color: #746758;background: url(/HalstedDesigns/catalog/view/theme/margaretha/image/nav-rule.gif) top center no-repeat;}
#top-bar .collections {display: none;background-color: #695d4f;color: #fff;position: absolute;top: 94px;width: 340px;text-align: center;margin-left: 80px; -top: 10px;-webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);-moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.99);z-index: 5;}
#top-bar .collections a{ color:#fff; display:block; line-height:26px; :10px 20px; margin:0; background-image:none; text-transform:capitalize; font-size:16px;}
#top-bar .collections a.the-ardmore-collection { font-size:14px;}
#top-bar .collections a:hover,#top-bar .collections a.active { background-color:#fff; color:#695d4f; background-image:none;}
</style></head><body>
<div id="top-bar">
<div id="top-bar-content"><div class="wrap">
<img src="image/halsted-logo.png"; alt="Halsted Logo">
<div class="links">
<div id="d1"class="collections">
THE ARDMORE COLLECTION
Qalakabusha Sofa
Qalakabusha Fabric Collection
Hand bags
Scatter Cushions
Batonka Stools
Tablecloths
Place Mats
Napkins
Table Runners
</div>
Art Into Design
The Collections
Contact Us
Newsletter
</div>
</div>
</div><div>
<script language="javascript" type="text/javascript">//<![CDATA[
function showHide(id) {div.style.display=toggle[div.style.display];}
var toggle = new Array;
toggle['none'] = 'block';
toggle['block'] = 'none';
var div = document.getElementById('d1');
div.style.display='none';
//]]>
</script></body></html>
Note: The CDATA is to isolate the JS from HTML. Without the CDATA the JS will sometimes cause HTML errors when running the W3C HTML Markup Validator. It is a recommended best practice.
The CDATA tells the Browser it is not HTML. The format is
<![CDATA[ data goes here ]]>
The reason it has the two slashes is comment out the CDATA tags from the JS parser but still recognized by the HTML parser.
I'm struggling on my website with members selecting in Firefox/Chrome etc to disable popup boxes / javascript alerts.
I use alert boxes to confirm things like, for example, if someone wants to delete a message.
However, if they delete a few messages too fast one after the other then Firefox etc gives the option to block further javascript alerts. Then my members can no longer delete their messages.
I'm sure they can fix it client-side, but what can I do server-side to stop members being given the option to block javascript alerts?
Thanks
Matt
I'm not sure that default browser alerts/popups are a great way to go from a UX perspective. Browsers typically block them for a very good reason - ads.
You might be interested in a library called alertify.js (http://fabien-d.github.io/alertify.js/).
Creating alerts with this library is pretty simple, and browsers will not block them:
alertify.alert("Hello World");
Confirm dialogs like what you mentioned in your question are pretty simple too:
alertify.confirm("Are you sure you want to delete the message?", function (e) {
if (e) {
// user clicked "ok"
} else {
// user clicked "cancel"
}
});
I whipped this together quickly if you do not want a heavy footprint (Not really styled either). But you can put raw html into your confirm boxes with this code.
HTML
<div id="confirm">
<div class="message"></div>
<button onclick="$('#confirm').hide()[0].success();">Ok</button>
<button onclick="$('#confirm').hide()[0].failure();">Cancel</button>
</div>
JS
var $confirm = $("#confirm");
function confirm(msg, success, failure) {
$confirm.find(".message").html(msg);
$confirm.show();
$confirm[0].success = success;
$confirm[0].failure = failure;
}
CSS
#confirm {
display : none;
width : 100px;
height : 100px;
position : fixed;
border : 1px solid black;
top : 5px;
right : 5px;
}
http://jsfiddle.net/hVC5A/4/
you can use a custom confirm/alert/prompt box here is an example i have made just note the css animations was some experimenting i was doing you dont need to include these
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link type="text/css" rel="stylesheet" href="customAlert.css" />
<title>Custom Alert</title>
</head>
<body>
<div id="customAlertOverlay"></div>
<div id="customAlertBox">
<div>
<div id="customAlertHead"></div>
<div id="customAlertBody"></div>
<div id="customAlertFoot"></div>
</div>
</div>
<p>other content</p>
<button onclick="cAlert('Error', 'Message')">click me</button>
<script src="customAlert.js" type="text/javascript"></script>
</body>
</html>
css:
#customAlertOverlay{
display: none;
opacity: 0;
position: fixed;
top: 0px;
left: 0px;
background: #FFF;
width: 100%;
z-index: 9;
animation : cAlertFlash linear 1s infinite;
}
#customAlertBox{
display: none;
position: fixed;
background:#FFF;
border-radius:7px;
width:550px;
z-index: 10;
top:30%;
}
#customAlertBox > div{
background:black;
margin:8px;
border-radius: 10px;
border:5px solid black;
}
#customAlertBox > div > #customAlertHead{
border-radius:10px 10px 0 0;
background: #FF6600; /*FF7112*/
font-size:19px;
padding:10px;
color:black;
text-align: center;
}
#customAlertBox > div > #customAlertBody{
background:#FF6600;
padding:20px;
color:black;
}
#customAlertBox > div > #customAlertFoot{
background: #FF7112;
padding:10px;
text-align:center;
border-radius: 0 0 10px 10px;
}
#customAlertBox > div > #customAlertFoot:hover{
background: #FF5E5E;
border-top: black 1px solid;
}
#keyframes cAlertFlash {
0% {opacity: 0.1;}
25% {opacity: 0.75;}
50%{opacity: .75;}
100%{opacity: .1;}
}
javascript:
function cAlert(headMSG, bodyMSG){
var customAlertOverlay = document.getElementById("customAlertOverlay");
var customAlertBox = document.getElementById("customAlertBox");
var winH = window.innerHeight;
var winW = window.innerWidth;
var customAlertHead = document.getElementById("customAlertHead");
var customAlertBody = document.getElementById("customAlertBody");
var customAlertFoot = document.getElementById("customAlertFoot");
customAlertOverlay.style.height = winH+"px";
customAlertBox.style.left = ((winW/2) - (550/2)) +"px";
customAlertHead.innerHTML = headMSG;
customAlertBody.innerHTML = bodyMSG;
$("#customAlertOverlay").slideDown("fast");
$("#customAlertBox").slideDown("fast");
customAlertFoot.innerHTML = "Ok";
}
$(document).ready(function(){
$("#customAlertBox").draggable();
$(document).on("click", "#customAlertFoot", function(){
$("#customAlertOverlay").slideUp("fast");
$("#customAlertBox").slideUp("fast");
});
});
FIDDLE - working with exception of dialog close
I have 5 diffrent backgrounds which change from one to another when mouseover menu links like that:
3 different screenshots out of 5
I want that the web site works properly in all browsers, but I get very different results. In firefox, background image dissapears and reappears on each menu link, but only first time when I go over a link with a cursor, other times works fine. In chrome backgrounds disappear and reappear on every onmouseover. And in IE onmouseover doesn't work at all nor the menu.
So I'm asking you to help me fix this, both things, dissapearing and the menu in IE. I found out that this disappearing and reappearing happens because of slow image loading, but I have no idea how to repair my code to fix this.
I just wrote my code in jsFiddle and menu doesn't work in it as well. And I noticed that when I downscale windows into the size smaller than div, the whole thing starts to deform. I thought I already fixed it, but it seems that I don't know how to that as well. You can see my code here:
My Code in jsFiddle
CSS
body
{
background-image:url(Slike/Ozadja/Osnova.png);
background-repeat:no-repeat;
background-position:center;
background-attachment:local;
background-color: #FFFAF0;
background-size:794px;
}
#layoutWidth div
{
width:628px;
margin:auto;
display:table;
overflow:hidden;
}
div .header
{
height:85px;
text-align:center;
display:table-row;
}
div .menu
{
height:173px;
display:table-row;
}
#ddm
{ margin-top: 30px;
padding: 0;
z-index: 30}
#ddm li
{ margin-left:12px;
margin-top:10px;
padding: 0;
list-style: none;
float: left;
font: bold 100% arial}
#ddm li a
{ display: block;
margin: 0 6px 0 0;
padding: 4px 4px;
width: 130px;
background: transperent;
color: #FFF;
text-align: center;
text-decoration: none}
#ddm li a:hover
{ background: transparent;
color: #C0C0C0;
}
#ddm div
{ position: absolute;
visibility: hidden;
margin-top:10px;
padding: 0;
background: transparent;
}
#ddm div a
{ position: static;
display: block;
margin-left: -16px;
padding: 5px 10px;
width: 150px;
white-space: normal;
text-align: center;
text-decoration: none;
background: transperent;
color: #000;
font: bold 11px arial;
}
#ddm div a:hover
{ background: transparent;
color: #696969}
div .body
{
height:650px;
text-align: left;
display:table-row;
}
div .footer
{
display:table-row;
}
HTML
<html>
<head>
<title>Drop-Down Menu</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="Content-Type"
content="text/html;charset=UTF-16">
<link rel="stylesheet" type="text/css" href="Stil.css">
<!-- dd menu -->
<script type="text/javascript">
<!--
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
var myImage = {};
myImage.m1 = 'Prvi_predal.png';
myImage.m2 = 'Drugi_predal.png';
myImage.m3 = 'Tretji_predal.png';
myImage.m4 = 'Cetrti_predal.png';
function mopen(id)
{
mcancelclosetime();
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
document.body.style.backgroundImage = 'url(Slike/Ozadja/'+myImage[id]+')';
}
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
document.body.style.backgroundImage = 'url(Slike/Ozadja/Osnova.png)'
}
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
document.onclick = mclose;
// -->
</script>
</head>
<body>
<div id="layoutWidth">
<div class="header">
<a href="Domov.html">
<img src="Slike/Logo/Logo.png" alt="Mankajoč logotip" width="279" height="80"></a>
</div>
<div class="menu">
<ul id="ddm">
<li>Obdelava lesa
<div id="m1" class="prvi" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
Izdelki iz iverala
Izdelki iz masive
Obnova pohištva
</div>
</li>
<li>Talne obloge
<div id="m2" class="drugi" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
Laminat
Parket
</div>
</li>
<li>Ostale storitve
<div id="m3" class="tretji" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
Uporaba mavčnih plošč
Lažja zidarska dela
Fotografiranje dogodkov
Video zajem dogodkov
</div>
</li>
<li>Informacije
<div id="m4" class="cetrti" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
O podjetju
Kontakt
Kje se nahajamo
Galerija
</div>
</li>
</ul>
<div style="clear:both"></div>
<div style="clear:both"></div>
</div>
<div class="body">
<p>Brez pomena.</p>
<br />
<p> Tole tudi! </p>
</div>
<div class="footer">
Brez pomena.
</div>
</div>
</body>
</html>
For blinking background images, and other images which you want to use from JS, you need to preload, or it will be blinking. How to preload an image? Click here
(It's blinking, because when the page was loaded, the image wasn't. So, that image which you want to use, isn't at the user. The browser download it, but until that time, theres no image what it can show for him/her. This is the reason.)
IE is blocking JS in default (like IE 10). You need to enable it. I've got a warning bubble an the bottom, which say, I've blocking everything... or something like that. You can't enable this from script. Only you can create a warning message for the user, which you remove if JS is enabled.
An extra thing, in jsFiddle it will work the page if you select the "no warp - in <head>" option from the second drop down list at top left. After that you need to click run at top.