I have a question. I’m making a one page design website at the moment, and in one div there’s a loader where you can see what my skills are. It's an animated circle. The problem is that the loader already loads when you're on the website. But I want it to load when you click on the list item 'Skills'. So that's the third list item called #blok3.
<div id="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
Below is the script of the skills loader. Als you can see in the Javascript part there are 5 id's but below I putted one because the other 5 are all te same, except the name #myStat...
<div class="statistic">
<div id="myStat1" data-dimension="150" data-text="Ai" data-info="" data-width="15" data-fontsize="38" data-percent="85" data-fgcolor="#FFF" data-bgcolor="#A7E3E7"></div>
<div class="statistic-text">Illustrator</div>
</div>
<script>
$( document ).ready(function() {
$('#myStat1').circliful();
$('#myStat2').circliful();
$('#myStat3').circliful();
$('#myStat4').circliful();
$('#myStat5').circliful();
$('#myStat6').circliful();
});
</script>
I tried some things with the knowledge that I have, but it didn't work. I hope someone can help me. Thank you :)
When I don't use any code the loader looks like this:
http://nl.tinypic.com/view.php?pic=rh1ydc&s=8#.U2T5OK00SjU
When I use the code from Krish R the loader looks like this (look at the picture below). There appear more circles, but it starts loading when you click on Skills, so that's the good part. But I don't need the double circles of course ;)
http://nl.tinypic.com/view.php?pic=1690txz&s=8#.U2T5Va00SjU
You should put the code to animate the circle in a function that is called on (executed), when the list item is clicked... As $( document ).ready(function() means that your code should execute at the instant the page loads! :D
Example:
Code:
<!doctype html>
<html lang="en">
<head>
<title>Circle</title>
<script>
function skill()
{
// the code to animate circle
alert('animated circle!');
}
</script>
</head>
<body>
<div id="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>
<a onclick = "skill()" href="#blok3">
Skills
</a>
</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</body>
</html>
Tested in: Firefox 24, Google Chrome 34
Update:
Since we don't have access to the circle animation code, we could completely remove it, and when Skills is clicked, we dynamically put it in using JavaScript's innerHTML .
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<title>Circle</title>
<script>
function skill()
{
var anim = document.getElementById('anim');
anim.innerHTML = '<div id="myStat1" data-dimension="150" data-text="Ai" data-info="" `data-width="15" data-fontsize="38" data-percent="85" data-fgcolor="#FFF" data-bgcolor="#A7E3E7"></div><div class="statistic-text">Illustrator</div> ';`
$('#myStat1').circliful();
$('#myStat2').circliful();
$('#myStat3').circliful();
$('#myStat4').circliful();
$('#myStat5').circliful();
$('#myStat6').circliful();
}
</script>
</head>
<body>
<div id="menu">
<ul>
<li>Home</li>
<li>About</li>
<li onclick = "skill()">
<a onclick = "skill()" href="#blok3">
Skills
</a>
</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div class="statistic" id = "anim">
</div>
</body>
</html>
Can you try this,
Javascript:
$( document ).ready(function() {
Loadcircliful();
$("#myskills").click(function(){
Loadcircliful();
return false;
});
});
function Loadcircliful(){
$('#myStat1, #myStat2, #myStat3, #myStat4, #myStat5, #myStat6').circliful();
}
in html,
<li>Skills</li>
may be this works for you...
in your html
<li id="blok3">Skills</li>
in your javascript
$('#blok3').click(function () { $('#myStat3').circliful(); });
Related
Here is my HTML code:
<li class="list-promotions">
<ul class="list-promotions-item">
<li>
offers
</li>
</ul>
</li>
I try to use this javascript code: (This Thread)
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementsByClassName("classname")[0].innerHTML = "qwerty";
});
It works, but it changes my HTML to:
<li class="list-promotions">
<ul class="list-promotions-item">qwerty</ul>
</li>
So I lost <a> tag and the href .
How I can solve this issue? I just want to change the offers to another text and keep the <a> tag
Note: I do not have access to the HTML code to set a class name for <a> tag and use the above javascript code.
document.querySelector(".list-promotions-item > li > a").textContent = "qwerty";
The innerHTML property sets or returns the HTML content (inner HTML)
of an element.
You had not added the classname class in HTML to anchor tag.
<li class="list-promotions">
<ul class="list-promotions-item">
<li>
offers
</li>
</ul>
</li>
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementsByClassName("classname")[0].innerHTML = "qwerty";
});
You can learn more at: https://www.w3schools.com/jsref/prop_html_innerhtml.asp
Using Jquery
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.list-promotions-item li a').html('qwerty');
});
</script>
</head>
<body>
<li class="list-promotions">
<ul class="list-promotions-item">
<li>
offers
</li>
</ul>
</li>
</body>
</html>
I'm a beginner when it comes to javascript and I'm trying to write a script to hide a class when I hover over another class. I've written this piece of code however it isn't working as I'd like it to.Could someone give me some pointers as to why this code isn't working and some advice on how to get it to achieve the results I'm looking for.
$(document).ready( function () {
"use strict";
document.getElementsByClassName('nav-bar').onmouseover = function(){
document.getElementsByClassName('site-title').style.display="none";
};
document.getElementsByClassName('nav-bar').onmouseout = function(){
document.getElementsByClassName('site-title').style.display="inline";
};
});
edit
#Jonas
$(document).ready( function () {
"use strict";
document.getElementsByClassName('nav-bar').forEach(function(el){el.onmouseover = function(){
document.getElementsByClassName('site-title').forEach(function(el){el.style.display="none";}
);
};
}
);
document.getElementsByClassName('nav-bar').forEach(function(el){el.onmouseout = function(){
document.getElementsByClassName('site-title').forEach(function(el){el.style.display="inline";});
};});
});
this is your adapted code. I'm not sure why it isn't working have i done it correctly?
edit 2
<body>
<Header>
<div class="navigation-wrap">
<div class="logo"><img src="../images/logo2.jpg" alt="Lewis Banks Logo" title="Lewis Banks & Sons Ltd"></div>
<div class="navigation">
<nav class="nav-menu">
<ul class="clearfix" >
<li class="nav-button"><a class="nav-bar" href="../index.html">Home</a></li>
<li class="nav-button">
<a id="product-button">Products</a>
<ul id="product-list">
<li class="menu-dropdown2"> AC
<ul id="AC-sublist">
<li class="dropdown-content"><a href="../CSW1-Switch.html">CSW1 Switch (15mm)<a>
</li>
<li class="dropdown-content"><a href="../CSW2-Switch.html">CSW2 Switch (20mm)<a>
</li>
<li class="dropdown-content"><a href="../CSW10-Switch.html">CSW10 Switch (30mm)<a>
</li>
</ul>
</li>
<li class="menu-dropdown2"><a href="../DC-Products.html" >DC</a>
<ul id="DC-sublist">
<li class="dropdown-content"><a href="../Cartridge-Brush-Holders.html">Cartridge Brush Holders<a>
</li>
<li class="dropdown-content">Brush Holder Caps
</li>
<li class="dropdown-content">Extruded Brush Holders
</li>
<li class="dropdown-content">Pressed Brass Brush Holders</li>
<li class="dropdown-content">Aluminium Brush Rockers
</li>
<li class="dropdown-content">Pressed Brass Brush Rockers</li>
<li class="dropdown-content">Tachometer Brush Rocker
</li>
<li class="dropdown-content">Carbon Brushes
</li>
<li class="dropdown-content">Constant Force Springs
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-button"><a class="nav-bar" href="../Applications.html">Applications</a></li>
<li class="nav-button"><a class="nav-bar" href="../Old-and-New.html">Old & New</a></li>
<li class="nav-button"><a class="nav-bar" href="../About-Us.html">About Us</a></li>
</ul>
</nav>
</div>
</div>
</Header>
<div class="site-title">
<h1>Lewis Banks & Sons</h1>
<h3><q>Labor Omnibus Unus</q></h3>
<h4><i>Company motto since 1916</i></h4>
</div>
</body>
This is my html code, I apologize in advanced for the confusing state it is in this is the first website i've ever tried to to make and I've had to do a lot of trial and error and other acts of desperation when i came unstuck.
I have a top menu bar which has submenu's. I managed to do that using CSS.
The problem i have is as i hover over the sub-menus they overlap with the site title which makes the page look ugly. I don't want to move the site titel down so instead i'd like to remove it whenever you hover over the initial menu buttons. I want to to do this whilst maintaining the page structre (ie there's whitespace where the tite was).
It seems you are using jQuery. Why not use jQuery selectors and methods to achieve your goal. It is easier to read and understand. Take a look at the following pages for more information:
http://api.jquery.com/on/
https://api.jquery.com/mouseover/
https://api.jquery.com/mouseout/
Try this for example:
$(document).ready( function () {
$(document).on('mouseover', '.nav-bar', function() {
jQuery('.site-title').css('display', 'none');
});
$(document).on('mouseout', '.nav-bar', function() {
jQuery('.site-title').css('display', 'inline-block');
});
});
GetElementsByClassName returns a HTMLCollection. You need to loopover, and add to each:
document.getElementsByClassName('nav-bar').forEach(function(el){el.onmouseover = function(){
document.getElementsByClassName('site-title').forEach(function(el){el.style.display="none";});
};});
Like Dais mentioned in his answer, it looks like you are using jQuery so why not use the built in jQuery mouse events. Either that or you copied your code from somewhere and didn't realize that $ is a shortcut for jQuery and for your javascript to work you need to include jQuery. To include jQuery you need a statment similar to below in your html. This will include jQuery from google's content delivery network (CDN). There are other CDN's available including ones directly from jQuery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
https://api.jquery.com/category/events/mouse-events/
Below is a working example using jQuery events and selectors.
$(document).ready(function() {
"use strict";
$('#site-title').mouseover( function() {
$('#site-title').hide(500);
});
$('#nav-bar').mouseleave( function() {
$('#site-title').show(500);
});
});
#site-title {
position:absolute;
background:red;
width:100%;
height:50px;
}
#nav-bar {
position:absolute;
background:green;
width:100%;
height:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="nav-bar">I am the nav bar
<button>Nav1</button>
<button>Nav2</button>
<button>Nav3</button>
</nav>
<header id="site-title">I am the site title</header>
I displayed 3 li elements with HTML and 3 using JavaScript code. If I change my JavaScript div tag to last it displays both the ul elements, else it's not displaying the HTML ul tags. Can you tell me why?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>my javascript eg </title>
<script type="text/javascript" >
function process()
{
var sval="<ul> <li> orange</li> <li>blue</li> <li>green</li> </ul> ";
var divid=document.getElementById("mydiv");
divid.innerHTML=sval;
}
</script>
</head>
<body onload="process()">
Hi Dude !!!
<div id="mydiv"/>
<ul id="u2" onclick="fn1()">
<li>orange</li>
<li>blue</li>
<li>yellow</li>
</ul>
<!-- If I place the same div element at last line it doesn't work. -->
</body>
</html>
use class instead of id, class is used for multiple elements
JS
function process()
{
var sval="<ul> <li> orange</li> <li>blue</li> <li>green</li> </ul> ";
var divclass=document.getElementsByClassName("mydiv");
for (var i = 0;i<divclass.length;i++){
var item = divclass[i];
item.innerHTML=sval;
}
}
HTML
<body onload="process()">
Hi Dude !!!
<div class="mydiv"></div>
<ul id="u2" onclick="fn1()">
<li>orange</li>
<li>blue</li>
<li>yellow</li>
</ul>
<div class="mydiv"></div>
</body>
Demo: http://jsfiddle.net/5avtsqnz/6/
It is because you cannot have more than one element in the DOM with the same id. If you do so you will always get only the first element with the id.
See the code, its getElementById and not getElementsById. So it it always return a single element.
Try this<------------HTML Code--------->SEE THIS YOUR CODE: http://jsfiddle.net/fbwyyrcL/
<body onload="process()">
Hi Dude !!!
<div id="mydiv"></div>
<ul id="u2" onclick="fn1()">
<li>orange</li>
<li>blue</li>
<li>yellow</li>
</ul>
</body>
<------------Script code is------->
function process()
{
var sval="<ul> <li> orange</li> <li>blue</li> <li>green</li> </ul> ";
var divid=document.getElementById("mydiv");
divid.innerHTML=sval;
}
You just have just to close your div tag properly, or to create another div around your primary ul definition. If you leave the inital ul inside the "mydiv" div, it is overwritten (deleted) after your function run.
Following code has worked for me in IE9:
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>my javascript eg</title>
<script type="text/javascript" >
function prozess(){
var sval="<ul> <li> orange</li> <li>blue</li> <li>green</li> </ul>";
var divid=document.getElementById("mydiv");
divid.innerHTML=sval;
};
</script>
</head>
<body onload = "prozess()">
Hi Dude !!!
<div id="mydiv"> </div>
<ul id="u2" onclick="fn1()">
<li>orange</li><li>blue</li><li>yellow</li>
</ul>
</body>
</html>
I am currently working on building a small menu that will change divs based upon which one it clicked. So if one is clicked it will show the div associated with it and hide the others, ect. But I cannot get it to work, nor can I figure out why. Any help would be appreciated. Thanks.
Below is my code. I've clipped out the content as there was a lot of it.
<script type="text/javascript">
$('.mopHeader').click(function() {
$('#raid-progress-mop').show();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').hide();
});
$('.cataHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').show();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').hide();
});
$('.wotlkHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').show();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').hide();
});
$('.tbcHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').show();
$('#raid-progress-vanilla').hide();
});
$('.vanillaHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').show();
});
</script>
<span class="h4">Raid Progress <span class="mopHeader">MoP</span> <span class="cataHeader">Cata</span> <span class="wotlkHeader">WotLK</span> <span class="tbcHeader">TBC</span> <span class="vanillaHeader">WoW</span></span>
<div id="raid-progress-mop">
<ul id="raid-mop">
<li>Content A</li>
</ul>
</div>
<div id="raid-progress-cata">
<ul id="raid-cata">
<li>Content B</li>
</ul>
</div>
<div id="raid-progress-wotlk">
<ul id="raid-wotlk">
<li>Content C</li>
</ul>
</div>
<div id="raid-progress-tbc">
<ul id="raid-tbc">
<li>Content D</li>
</ul>
</div>
<div id="raid-progress-vanilla">
<ul id="raid-vanilla">
<li>Content E</li>
</ul>
</div>
Wrap your code in:
$(function(){ ... });
...which is the short form of:
$(document).ready(function(){ ... });
Cheers
You need to put the script underneath your markup. Either that, or put it inside document.ready callback:
$(document).ready(function() {
// code here
});
The problem is that when the script appears above the markup, it will execute before the HTML is loaded, and so the browser won't yet know about raid-progress-mop, etc.
How about doing that a little more dynamically inside a ready() function :
<script type="text/javascript">
$(function() {
$('[class$="Header"]').on('click', function() {
var myClass = $(this).attr('class').replace('Header', '');
$('[id^="raid-progress"]').hide();
$('#raid-progress-' + myClass).show();
});
});
</script>
jsBin demo
Wrap your code into a ready finction and this code I wrote is all you need:
$(function(){
$('span[class$="Header"]').click(function(){
var classNameSpecific = $(this).attr('class').split('Header')[0];
$('div[id^="raid-progress-"]').hide();
$('#raid-progress-'+classNameSpecific).show();
});
});
Explanation:
$('span[class$="Header"]') = target any span element which class ends with Header
Now just attach a click handler to all that spans.
Than, to hide all your div elements do:
$('div[id^="raid-progress-"]').hide(); = will hide any div which id starts with raid-progress-
and than you just need to target the div that contains the magic word:
$('#raid-progress-'+classNameSpecific).show();
$('.mopHeader') isn't defined yet. wrap your script with $(function(){...})
I have to make a dynamic menu in javascript, so I use onMouseOver and onMouseOut, but the problem is when I focus my mouse on line space, the menu dissapear because it think I'm no more in the div!
<script type="text/javascript">
function cacherSousMenu(menu)
{
if(menu == "ajout")
{
document.getElementById('sousMenuAjout').style.display = document.getElementById('sousMenuAjout').style.display=='none'?'block':'none';
document.getElementById('imgPlusMoinsAjout').src = document.getElementById('sousMenuAjout').style.display=='none'?'images/plus.gif':'images/moins.gif';
}
else if(menu == "inscrire")
{
document.getElementById('sousMenuInscrire').style.display = document.getElementById('sousMenuInscrire').style.display=='none'?'block':'none';
document.getElementById('imgPlusMoinsInscrire').src = document.getElementById('sousMenuInscrire').style.display=='none'?'images/plus.gif':'images/moins.gif';
}
}
<nav>
<ul>
<div id="ajouter" onmouseover="cacherSousMenu('ajout');">
<li class="titre">Ajouter <img src="images/plus.gif" id="imgPlusMoinsAjout" alt="Image Plus Moins"></li>
</div>
<div id="sousMenuAjout" onmouseout="cacherSousMenu('ajout');">
<ul>
<li>Un établissement</li>
<li>Une filière</li>
<li>Une UE</li>
</ul>
</div>
<div id="inscrire" onmouseover="cacherSousMenu('inscrire');">
<li class="titre">Inscrire <img src="images/plus.gif" id="imgPlusMoinsInscrire" alt="Image Plus Moins"></li>
</div>
<div id="sousMenuInscrire" onmouseout="cacherSousMenu('inscrire');">
<ul>
<li>Un nouvel étudiant</li>
<li>Un étudiant à une UE</li>
</ul>
</div>
<li class="titre">Afficher tous les étudiants</li>
<li class="titre">Aide</li>
<ul>
</nav>
So, how to correct that, maybe with CSS?
Thank!
I can't help but wonder if you should post a question (or look for one) on https://ux.stackexchange.com/ about menu behaviour, and in particular, hover states (which don't exist on pads and phones which are becoming more prolific). But to solve your technical issue...
It takes a lot more than just mouse over and mouse out to make a menu behave nicely. Most good menus allow a grace period for user error, meaning the mouse can leave the menu briefly. Again, to simply solve your technical issue of the menu flashing when you move your mouse:
You have DIVs and list items mixed up a little. I've added some bright colours to help clarify the elements, and converted the DIVs to list items for simplicity. I also refactored your JavaScript method to make it slightly less tightly coupled with your markup. I hope you find it useful.
<!doctype HTML>
<html>
<head>
<style>
.titre {background-color:red;}
.menuItemWrapper {background-color:green;}
</style>
</head>
<body>
<nav>
<ul id="ajouter" onmouseover="showMenu('sousMenuAjout','imgPlusMoinsAjout',true);" onMouseOut="showMenu('sousMenuAjout','imgPlusMoinsAjout',false);">
<li class="titre">Ajouter <img src="images/plus.gif" id="imgPlusMoinsAjout" alt="Image Plus Moins"></li>
<ul id="sousMenuAjout" class="menuItemWrapper" onMouseOut="hideMenu('sousMenuAjout');">
<li>Un établissement</li>
<li>Une filière</li>
<li>Une UE</li>
</ul>
</ul>
<ul id="inscrire" onmouseover="showMenu('sousMenuInscrire','imgPlusMoinsInscrire',true);" onMouseOut="showMenu('sousMenuInscrire','imgPlusMoinsInscrire',false);">
<li class="titre">Inscrire <img src="images/plus.gif" id="imgPlusMoinsInscrire" alt="Image Plus Moins"></li>
<ul id="sousMenuInscrire" onmouseout="cacherSousMenu('inscrire');" class="menuItemWrapper">
<ul>
<li>Un nouvel étudiant</li>
<li>Un étudiant à une UE</li>
</ul>
</ul>
<li class="titre">Afficher tous les étudiants</li>
<li class="titre">Aide</li>
</ul>
</nav>
<script type="text/javascript">
function showMenu(menuId, menuIconId, visible) {
var displayStyle, imageName;
if (visible) {
displayStyle = 'block';
imageName = 'images/moins.gif';
} else {
displayStyle = 'none';
imageName = 'images/plus.gif';
}
document.getElementById(menuId).style.display = displayStyle;
document.getElementById(menuIconId).src = imageName;
}
showMenu('sousMenuAjout', 'imgPlusMoinsAjout', false);
showMenu('sousMenuInscrire', 'imgPlusMoinsInscrire', false);
</script>
</body>
</html>
You can see this live on jsbin (doesn't work in jsFiddle for some reason):
http://jsbin.com/exakiz/2
PS. Sorry I switched some names to English; I don't speak or understand French. :(
It's hard to implement such menu using pure JS, because onmouseover/onmouseout events are fired when mouse move to the child element (in menu when your mouse moves from main element to submenu mouseout will fire). You should look for some implementation of mouseenter/mouseleave events.
But there is easier way - by using css only. Here is example: http://jsfiddle.net/ZjVGN/