In the top left corner of this page, I have a "Light/Dark mode" toggle. When 'Light mode' is clicked, it fades into dark mode nicely no problem. But once it's in Dark mode, and you click 'light mode', it doesn't fade in nicely and I can't seem to get it to work.
What would I need to add to my code to get it to fade nicely in to light mode?
<!DOCTYPE html>
<html id= "mode" lang="en-au">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title> Test </title>
<head>
<link rel = "icon" type = "image/png" href = "https://ibb.co/bRc1Qqq">
<link rel = "apple-touch-icon" type = "image/png" href = "https://ibb.co/bRc1Qqq"/>
<!-- Square Windows tiles -->
<meta name="msapplication-square70x70logo" content="https://ibb.co/bRc1Qqq"></meta>
<meta name="msapplication-square150x150logo" content="https://ibb.co/bRc1Qqq"></meta>
<meta name="msapplication-square310x310logo" content="https://ibb.co/bRc1Qqq"></meta>
<!-- Rectangular Windows tile -->
<meta name="msapplication-wide310x150logo" content="https://ibb.co/bRc1Qqq"></meta>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Gugi|Raleway|Abril+Fatface|Unica+One|Press+Start+2P|Bungee">
<!-- Makes stuff fadein on pageload-->
<script>
window.onload = function()
{document.body.className += " loaded";
document.querySelector("body").style.opacity = 1;
}
</script>
<style>
html {
height: 100%;
background-color:#b8b8b8;
}
body {
text-decoration: none;
font-family: "Raleway";
border-radius: 7px;
/* color-scheme: light dark; */
}
h1, ul {
padding-top: 5%;
}
body, .fadein {
opacity: 0;
-moz-transition: opacity 3s;
-webkit-transition: opacity 3s;
-o-transition: opacity 3s;
transition: opacity 3;
}
body.loaded .fadein {
opacity: 1;
}
.container {
max-width: 800px;
margin: 0 auto;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
}
.header h1 {
margin: 0;
}
.tabs {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.tabs li {
flex-grow: 1;
text-align: center;
padding: 0.5%;
}
.tabs a {
display: block;
padding: 10px;
color: #333;
text-decoration: none;
border-radius: 7px;
}
.tabs a:hover,
.tabs a.active {
background-color: #ddd;
}
.main {
padding: 20px;
}
/* Hides all sections by default
.section {
display: none;
}
*/
.section.active {
display: block;
}
.dark-mode {
background-color: #020C17;
color: #ffffff;
transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
}
.dark-mode ul a{
background-color: #020C17;
color: #ffffff;
}
.dark-mode ul a:hover,
.dark-mode ul a.active {
background-color: #081334;
color: #ddd;
}
#dark-mode-button {
color: #ddd;
padding: 10px;
border-radius: 7px;
cursor: pointer;
transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
position: fixed;
}
</style>
<!-- makes scrolling smooth when using anchor -->
<script>
document.querySelector('a').addEventListener('click', function(e) {
e.preventDefault();
var target = document.querySelector(this.getAttribute('href'));
var offset = target.offsetTop;
window.scrollTo({
top: offset,
behavior: 'smooth'
});
});
</script>
<!-- The HTML for the website -->
<body>
<div id="dark-mode-button"><p id="mango" class="btn-toggle">Dark mode</p></div>
<div class="fadein">
<div class="container">
<!-- The header with the title and tabs -->
<div class="header">
<h1>Testing</h1>
<ul class="tabs">
<li><a href="#section1" >About</a></li>
<li>Projects</li>
<li>Test</li>
</ul>
</div>
<!-- The main content of the website, with the sections -->
<div class="main">
<div id="section1">
<h2>About</h2>
<p>This is the content of section 1.</p>
</div>
<div class="section" id="section2">
<h2>Projects</h2>
<p>This is the content of section 2.</p>
</div>
<div class="section" id="section3">
<h2>Test</h2>
<p>This is the content of section 3.</p>
</div>
</div>
</div>
</div>
</body>
<script>
// Get the elements for the tabs and sections
const tabs = document.querySelectorAll('.tabs a');
const sections = document.querySelectorAll('.section');
// Add a click event listener to each tab
tabs.forEach(tab => {
tab.addEventListener('click', event => {
event.preventDefault(); // prevent the default link behavior
// Remove the active class from all tabs and sections
tabs.forEach(tab => tab.classList.remove('active'));
sections.forEach(section => section.classList.remove('active'));
// Add the active class to the clicked tab and corresponding section
tab.classList.add('active');
document.querySelector(tab.getAttribute('href')).classList.add('active');
});
});
</script>
<!-- JavaScript code to handle the button click and switch between modes. also uses button id and the body element -->
<script>
// Get the button and add a click event listener to it
const button = document.getElementById('dark-mode-button');
button.addEventListener('click', () => {
// Get the current body element and toggle the "dark-mode" class
const body = document.getElementById("mode");
body.classList.toggle('dark-mode');
});
</script>
<script>
/* Fetch the buttom element */
const mode = document.getElementById('mango');
/* Add click event listener where we will provide logic that updates the button text */
mode.addEventListener('click', function() {
/* Update the text of the button to toggle beween "More" and "Less" when clicked */
if(mode.innerText.toLowerCase() === 'dark mode') {
mode.innerText = 'Light mode';
}
else {
mode.innerText = 'Dark mode';
}
});
</script>
You need to apply the tranition effect to the elements affected by your dark theme, not the dark-mode class itself. You did it right for the #dark-mode-button though.
Solution for your code: add a transition (transition: all 0.5s ease-in-out) on html{} and .tabs a {}, and you can remove the transition effect on the dark-mode class. Fiddle: https://jsfiddle.net/40y5axcd/
Note: you applied a white text color to the whole html for dark mode, hence your main content text isn't visible on a white background. I left it as is, since it wasn't a part of your question.
Going forward you're better off using an utility class with the transition effect and apply it to all elements affected by the dark mode, especially if you continue to add elements to your page and want to change the transition duration. You rather only have to change one class, then having to go through every element and change the duration.
Related
I'm trying to apply the same effect on the social network logo: https://www.pierrejacobson.com/
Instead of using CSS awesome, I would like to do it with an image but it doesn't work as expected.
Regarding CSS, there is no need to put the code here. I just have the three social network logo on display: none;.
Could you please help me?
<div id="social_bar">
<div class="width_size">
<img alt="image enveloppe" class="email" src="email.png" />
<p>CONTACT#PIERREJACOBSON.COM</p>
<div id="network_logo">
<img alt="logo_facebook" id="fixed_facebook" src="facebook.png" />
<img alt="logo_youtube" id="fixed_youtube" src="youtube.png" />
<img alt="logo_instagram" id="fixed_instagram" src="instagram.png" />
<img alt="logo_facebook" id="facebook" src="facebook_blue.png" />
<img alt="logo_youtube" id="youtube" src="youtube_blue.png" />
<img alt="logo_instagram" id="instagram" src="instagram_blue.png" />
</div>
<!--network_logo-->
</div>
<!--width_size-->
</div>
<!--social_bar-->
<div id="logo_bar">
<div class="width_size">
<img alt="logo" src="logo-pierre-jacobson2.png" />
<input type="text" id="name" name="name" required minlength="4" maxlength="8" size="30" value="RECHERCHER..." />
<img alt="search" src="search-solid.svg" />
</div>
</div>
JS
const get_img = function(name){ return document.getElementById(name); };
const img_one = get_img("fixed_facebook");
const img_two = get_img("fixed_youtube");
const img_three = get_img("fixed_instagram");
const img_facebook = get_img("facebook");
const img_youtube = get_img("youtube");
const img_instagram = get_img("instagram");
img_one.addEventListener("mouseover", function (event) {
img_one.style.display = "none";
img_facebook.style.display = "inline";
});
img_two.addEventListener("mouseover", function (event) {
img_two.style.display = "none";
img_youtube.style.display = "inline";
});
img_three.addEventListener("mouseover", function (event) {
img_three.style.display = "none";
img_instagram.style.display = "inline";
});
img_one.addEventListener("mouseout", function (event) {
img_one.style.display = "inline";
img_facebook.style.display = "none";
});
img_two.addEventListener("mouseout", function (event) {
img_two.style.display = "inline";
img_youtube.style.display = "none";
});
img_three.addEventListener("mouseout", function (event) {
img_three.style.display = "inline";
img_instagram.style.display = "none";
});
from display "none" to "inline" there is no transition. Instead try to use "opacity: 0" and "opacity: 1" and set the "transition: all 0.2s ease";
The Display Property:
In your initial question you say that you want to use the display property to hide and show your images, however, you also state that you would like to have the screens transition from one to another.
Transitioning is definitely possible through the aptly named CSS transition property
The problem is that the display property is not able to be animated. If an element is configured to display: none; the page is immediately repainted with that element removed.
This means that you need to use a different property, and we typically would use opacity or visibility. Here are the differences between these three:
display: none;
immediately collapses the element
removes the element from view.
There's no transition allowed.
visibility: hidden;
Does not collapse the element
The space it occupied is blank.
removes the element from view
Transitions are allowed
The element will still pop out of sight.
opacity: 0;
Does not collapse the element
The space it occupied is blank.
removes the element from view
Transitions are allowed.
The element will fade until it is not visible.
Here is an example of the different way these properties affect the layout of the page:
const context = document.querySelector("#examples");
const ele = context.querySelector.bind(context),
hide = section => section.classList.toggle("hide"),
onClickHide = (btn, section) => btn.addEventListener("click", () => hide(section));
opacity = ele(".opacity"),
opacity_button = ele("#oBtn"),
visibility = ele(".visibility"),
visibility_button = ele("#vBtn"),
display = ele(".display"),
display_button = ele("#dBtn"),
toggle_button = ele("#tBtn");
onClickHide(opacity_button, opacity);
onClickHide(visibility_button, visibility);
onClickHide(display_button, display);
toggle_button
.addEventListener("click", function() {
hide(opacity);
hide(visibility);
hide(display);
});
html,
body,
#examples {
width: 100%;
height: 100%;
box-sizing: content-box;
margin: 0px;
padding: 0px;
}
#examples section {
display: flex;
flex-direction: column;
width: 100px;
height: 100px;
border: 5px solid black;
margin: 5px;
transition: all .5s ease-in-out;
}
#examples section.hide {
border-radius: 100px;
}
#examples section.opacity {
background-color: blue;
color: white;
}
#examples section.opacity.hide {
opacity: 0;
}
#examples section.visibility {
background-color: purple;
color: white;
}
#examples section.visibility.hide {
visibility: hidden;
}
#examples section.display {
display: block;
background-color: red;
color: white;
}
#examples section.display.hide {
color: black;
display: none;
}
<main id="examples">
<section class="opacity">opacity <button id="oBtn">hide</button></section>
<hr />
<section class="visibility">visibility <button id="vBtn">hide</button></section>
<hr />
<section class="display">display <button id="dBtn">hide</button></section>
<hr/>
<button id="tBtn">Toggle All</button>
</main>
Note: In the above there are actually two properties transitioning - opacity, visibility, or display - and border-radius. You should notice firstly how in the display example the border-radius change isn't seen at all, and secondly how the display example is the only one that collapses the element so that it no longer takes up space.
Applying Transitions:
By combining opacity: 0; with height: 0px; width: 0px; we can remove the element visually from the page while also removing any impact it has on other elements - meaning that it won't take up space and is transitionable.
However, in your particular case ( wanting to change the image to a different color ), all of that isn't necessary. You can swap out your img tags for div tags, then apply the background-url property to get an image (a.e. background-url: url("facebook.png"); ) and a hover effect that adds whatever background-color you're looking for.
#facebook {
width: 50px;
height: 50px;
background-image: url("http://via.placeholder.com/50x50");
cursor: pointer;
transition: all .3s ease-in-out;
}
#facebook:hover {
background-color: darkblue;
background-blend-mode: color-dodge;
}
Note: You can also adjust background-blend-mode to other options to change how the image and the color are put together. a.e. background-blend-mode: luminosity; will make the color lighter background-blend-mode: color-dodge; will make it darker and add "dodge" effect. Feel free to play around!
#facebook {
width: 50px;
height: 50px;
background-image: url("http://via.placeholder.com/50x50");
cursor: pointer;
transition: all .3s ease-in-out;
}
#facebook:hover {
background-color: darkblue;
background-blend-mode: color-dodge;
}
<div id="social_bar">
<div class="width_size">
<p>CONTACT#PIERREJACOBSON.COM</p>
<div id="network_logo">
<div alt="logo_facebook" id="facebook"></div>
</div>
<!--network_logo-->
</div>
<!--width_size-->
</div>
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.
So I've got a page with a ton of accordions and when the first initially loads every single accordion by default is opened until I click on one. Then all of them close but that one and it then works fine from there.
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="ss_menu">
<a class="ss_button">Accordion 1</a>
<div class="ss_content">
Content 1
</div>
</div>
<div id="ss_menu">
<a class="ss_button">Accordion 2</a>
<div class="ss_content">
Content 2
</div>
</div>
<div id="ss_menu">
<a class="ss_button">Accordion 3</a>
<div class="ss_content">
Content 3
</div>
</div>
CSS
/* Accordion controls */
#ss_menu {
border: 1px solid #ccc;
}
.ss_button {
cursor: pointer;
color: black;
}
.ss_content {
padding: 5px 10px;
text-decoration: none;
color: #666;
font-family: arial, verdana, tahoma;
font-size: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
JS
jQuery(function() {
jQuery('.ss_button').on('click',function() {
jQuery('.ss_content').slideUp('fast');
jQuery(this).next('.ss_content').slideDown('fast');
});
});
And the related Codepen: http://codepen.io/jacob_johnson/pen/zvdQGO
So my questions are:
1. How can I set them all closed by default on page load?
2. How can I toggle the one active one off by clicking the activate button again?
Any help would be appreciated.
Solution to question 1
Add display: none to my content element.
Set display:none in the CSS to start and change the code to be smarter on what it is hiding.
jQuery('.ss_button').on('click',function() {
var content = jQuery(this).next('.ss_content');
jQuery('.ss_content').not(content).slideUp('fast');
content.toggleSlide('fast');
});
To do it using the code you have, you need a document.ready function which will close the content:
$(document).ready(function() {
$('.ss_content').hide();
$('.ss_button').on('click',function() {
$('.ss_content').slideUp('fast');
$(this).next('.ss_content').slideDown('fast');
});
});
However, this will lead to your content being visible for a second while the page loads. The better way of doing this is with a CSS class:
$(document).ready(function() {
$('.ss_button').on('click',function() {
var menu = $(this).closest('.ss_menu');
if (menu.hasClass('open')) {
$('.ss_menu.open').removeClass('open');
menu.addClass('open');
}
else {
menu.removeClass('open');
}
});
});
Then in your CSS, you set everything to a default state of closed, but animate it to open when its parent has an open class:
.ss_menu {
overflow:hidden;
}
.ss_menu.open .ss_content {
opacity:1;
max-height:1000px; /*set this to a height much bigger than you expect*/
}
.ss_content {
max-height:0;
opacity:0;
transition:all 0.2s ease-out; /*or whatever transition you want*/
}
P.S. you can't have more than one item in a page with the same id - I have assumed this was a mistake, and used ss_menu as a class instead of an ID selector.
I have the following js script which (on its own it works fine really):
<style>
<!--
.hide { display: none; }
.unhide {
display: block;
text-decoration: none;
color: black;
}
-->
</style>
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hide')?'unhide':'hide';
}
}
</script>
</head>
<body>
<div id="col2">
<a href="javascript:unhide('content1');">
Title of Content</a>
</div>
<div id="col2">
<div id="content1" class="hide">
Body of content
</div>
</div>
Left alone, this produces output, at least. But I want to format this according to this css code:
a.unhide li {
background: #fff;
font: 20px century schoolbook, serif;
}
a.unhide li:hover {
background: #ddd;
text-decoration:underline;
padding: 3px 8px;
display: table-row;
line-height: 500%;
transition: background .25s ease-in-out;
-moz-transition: background .25s ease-in-out;
-webkit-transition: background .25s ease-in-out;
}
.hide {
font: 20 px century schoolbook, serif;
color: black;
text-decoration: none;
}
So how can I possibly "pair" all this? I've posted elsewhere and people have been stumped. Please help. I can induce changes into just about every aspect BUT the "unhide" portion of the js script. It does not cooperate with me ;( Basically I want a #ddd hover effect over the "unhide" link and all content to be in century schoolbook. Please help. Thank you.
Your problem might be that you have double IDs. IDs cannot be duplicate, they have to be unique. You can give them a class instead.
Try this instead:
HTML
<div>
<a href="javascript:unhide('content1');">
Title of Content
</a>
</div>
<div>
<div class="content1 hide">Body of content</div>
</div>
Javascript
function unhide(divID) {
var item = document.getElementsByClassName(divID)[0];
console.log(item);
console.log(item.className == divID + ' hide');
if (item) {
item.className = (item.className == divID + ' hide') ? divID + ' unhide' : divID + ' hide';
}
}
Demo here
In your CSS you are applying the hover to a a.unhide li:hover {. Is that what you want? I see no li in your code and the content1 in your code is a div not a a.
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.