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.
Related
I'm using script editor web part in SharePoint to create a Full screen overlay navigation feature.
I got the code from https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp.
I modified it some because I want to have multiple menus to click that use this feature. I tried to upload a pic, but I don't have 10 reputation points:/ Below is a textual representation. I have a Doctrine menu link and a TTP menu link.
Doctrine
TTP
They work; however, no matter which one I click on, they both show the links associated with TTP. I want to click on Doctrine and see the Doctrine links, and click on TTP to see the TTP links. Two separate nav menus that perform the full screen overlay feature (separately).
I know this subject has been beat to death, but I cannot find anything that satisfies my requirement. Below is how I am referencing getElementById.
Note: I replaced my actual links with dummy links.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: 'Lato', sans-serif;
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(28,65,104, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #eccb13;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #800000;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay {overflow-y: auto;}
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
</style>
</head>
<body>
<div id="doctrineNav" class="overlay">
×
<div class="overlay-content">
Car
Bicycle
Boat
Airplane
</div>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☞ Doctrine</span>
<p></p>
<div id="ttpNav" class="overlay">
×
<div class="overlay-content">
Apple
Orange
Dog
Cat
</div>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☞ TTP</span>
<script>
function openNav() {
document.getElementById("doctrineNav").style.height = "100%";
}
function closeNav() {
document.getElementById("doctrineNav").style.height = "0%";
}
function openNav() {
document.getElementById("ttpNav").style.height = "100%";
}
function closeNav() {
document.getElementById("ttpNav").style.height = "0%";
}
</script>
</body>
</html>
If I change the script around like below, then no matter which one I click on, they both overlay on top of each other. In other words, I can see the TTP links, but also see the Doctrine links behind it.
<script>
function openNav() {
document.getElementById("doctrineNav").style.height = "100%";
document.getElementById("ttpNav").style.height = "100%";
}
function closeNav() {
document.getElementById("doctrineNav").style.height = "0%";
document.getElementById("ttpNav").style.height = "0%";
}
</script>
The problem is that you've named both sets of functions the same thing. When you declare openNav the second time to show TTP, it replaces the first instance. An easy solution is to just declare two separate sets of functions, e.g.:
function openDoctrine() {
document.getElementById("doctrineNav").style.height = "100%";
}
function closeDoctrine() {
document.getElementById("doctrineNav").style.height = "0%";
}
function openTTP() {
document.getElementById("ttpNav").style.height = "100%";
}
function closeTTP() {
document.getElementById("ttpNav").style.height = "0%";
}
and reference them as appropriate, e.g.:
<div id="doctrineNav" class="overlay">
×
...
</div>
...
<span style="font-size:30px;cursor:pointer" onclick="openDoctrine()">☞ Doctrine</span>
In short, you can't reuse names in JavaScript (how should the engine know which function you're referring to?), so use different names more specific to the different task.
#Ken Bellows has a great answer. One additional thing I find useful is adding an extra class to the elements you want to select. This class should have no extra CSS, the sole purpose will be to allow you to select multiple divs with one line. Then, use the code from here.
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 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
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.
I've got this simple mobile webpage I'm trying to build, with a Facebook like side menu button. I'm trying to disable horizontal scrolling with the CSS overflow-x:hidden, but it's not working. Here's my code, any help will be greatly appreciated:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var win = $("#right-side");
var position = win.position();
//alert( "left: " + position.left + ", top: " + position.top );
if(position.left < 100)
{
$("#right-side").animate({left:'250px'});
}else{
$("#right-side").animate({left:'0px'});
}
});
});
</script>
<style>
body{overflow-x: hidden;font-family: sans-serif;}
#right-side{
background:#BFC7D8;;
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
#left-menu
{
background:#323949;
left:0;
top:0;
height:100%;
width:250px;
position:absolute;
}
#navigation { font-size:20px; width:250px; padding-top:100px; }
#navigation ul { margin:0px; padding:0px; }
#navigation li { list-style: none; }
ul.top-level li > a {
display: block;
border-bottom: 1px solid rgba(0,0,0, 0.1);
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 15px;
text-shadow: 0 1px 0 #000;
text-decoration: none;
color: #ccc;
text-indent: 20px;
}
#toolbar
{
width:100%;
height:50px;
background:#00F;
}
</style>
<div id="left-menu">
<div id="navigation">
<ul class="top-level">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>FAQ</li>
<li>News</li>
</ul>
</div>
</div>
<div id="right-side">
<div id="toolbar">
<button>Menu</button>
</div>
<h1>This is a test</h1>
</div>
I have put your code in a fiddle but I couldn't add the 'zoom' meta tag to the head, so it is hard to test on my phone. http://jsfiddle.net/Pevara/Ku5nY/1/show/
Seems to work fine on desktop though, no scrollbars.
I did add the following to your css:
body{
overflow-x:hidden;
font-family: sans-serif;
/* added: */
max-width: 100%;
height: 100%;
}
Not sure if it will make a difference, but it is worth a try...
David.
Have you tried using this: http://mmenu.frebsite.nl/
Alternatively, Take a look at this and see if you can use it to adjust to your code:
http://jsfiddle.net/tzDjA/
You will notice there are 3 functions:
$('#trigger').click( function() {
if ($('#popout').hasClass('hidden')) {
$('#popout').removeClass('hidden');
showPopout();
}
else {
$('#popout').addClass('hidden');
hidePopout();
}
});
function showPopout() {
$('#popout').animate({
left: 0
}, 'slow', function () {
$('#trigger span').html('Close'); //change the trigger text at end of animation
});
}
function hidePopout() {
$('#popout').animate({
left: -40
}, 'slow', function () {
$('#trigger span').html('Show'); //change the trigger text at end of animation
});
}
I had a similar issue where I had the menu behind my content and was pushing my content to the left to reveal the facebook style menu hidden behind.
I was applying 'absolute' positioning to mimic the slide across and taking the content out of the document flow. With overflow hidden it seemed you could pull the content layer over with touch (which sounds like the same issue as you encountered). Even with overflow std, x & y set on almost everything this still occurred. This was also with width:100% on body etc.
Changing the content layer to 'relative' when I slid this across and then reducing the height of the content (while the menu was open) to the windows height seemed to work for me and seemed fairly robust over devices.
Good luck, that should help for anyone experiencing a similar issue.
Thanks,
Dave
Here's a quicky. The thing is it ONLY works if you define your modal's height. Without the height defined it won't work. Set the dialog to height 100% & overflow hidden. Then set the content to position: absolute, top: 0, bottom: 0, left: 0, right: 0, margin: auto and define the height (in below example 250px for a login modal). I know it sounds irrational - it probably is a CSS glitch, but: it works - cross browser & cross platform (haven't checked iPhone).
<div class="modal-dialog" style="height:100%;overflow:hidden"><div class="modal-content" style="position:absolute;margin:auto;top:0;bottom:0;left:0;right:0;height:250px;">