I have a list of elements (divs) which all have the same background color (white). Now, I want to make the background color change (to blue) once they are clicked. Thing is this, only one can be highlighted at a time.
So, let's say you click div1, and it turns blue. If you click div2, it needs to make div1 turn white and then div2 turn blue.
Sort of a selecting method, no?
Is there a stand-alone method of doing this?
Try This:
Jquery Code:
$('div').bind('click',function(){
$('div').removeClass('selected');//remove selected class from previously added div
$(this).addClass('selected');//add class to current div
})
CSS:
.selected{
background-color:blue;
}
Try this ...
<style type="text/css"><!--
#menu_top {
list-style:none;
width:100%;
float:left;
margin:8px 0;
border-bottom:8px solid #60CBFF;
font:normal 11px/22px arial,helvetica,sans-serif;
}
#menu_top li, #menu_top a {
float:left;
height:22px;
}
#menu_top li {
margin-left:4px;
}
#menu_top a {
background: none repeat scroll 0 0 white;
color: #000000;
padding: 0 8px;
position: relative;
text-decoration: none;
}
#menu_top a:active,
#menu_top a:focus,
#menu_top a:hover {
background: none repeat scroll 0 0 blue;
}
</style>
and HTML code is ..
<ul id="menu_top">
<li>HOME</li>
<li>Services</li>
<li>Portfolio</li>
<li>Download</li>
<li>About Us</li>
<li>Career</li>
<li>Contact Us</li>
</ul>
You can check my JSFIDDLE also.
For a library agnostic solution, you could use something like this:
<style>
.clickable {
background-color: #eee;
height: 30px;
margin: 10px;
}
</style>
<div>
<div class="clickable"></div>
<div class="clickable"></div>
<div class="clickable"></div>
</div>
<script>
var clickables = document.getElementsByClassName('clickable');
var resetSiblings = function () {
for (var i = clickables.length - 1; i >= 0 ; i--)
clickables[i].style.backgroundColor = '#eee';
};
var clickHandler = function (ev) {
resetSiblings();
ev.target.style.backgroundColor = '#00f'
};
for (var i = clickables.length - 1; i >= 0 ; i--)
clickables[i].addEventListener("click", clickHandler, false);
</script>
Related
I can't seem to get this to work. I don't wanna put jQuery in yet. Just doing plain javascript. When I click on the image nothing happens. I need it to dropdown the navigation when I click the image. Edited my Javascript code. I added alert to show the current status of what class the toggle is using. But still I cant get to change it from header_navigation_mobile to header_navigation_mobile.is_open
This is my HTML CODE for the Clickable Image
<a href="#" onclick="toggleMenu()">
<img class="mobile_navigation_button" src="{{site.baseurl}}/assets/img/menu.svg"/>
</a>
This is the HTML for the drop down navigation
<div class="header_navigation_mobile">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li> </li>
<li> </li>
</ul>
</div>
Then my CSS For the Clickable Image to show the navigation
.header_navigation_mobile.is_open{
display: block;
transform: translateY(0%);
}
This is the CSS for the Clickable Image first state which is to Hide it
.header_navigation_mobile{
display: none;
position: absolute;
width: 290px;
background: #484547;
transform: translateY(-100%);
transition: all 0.3s ease-in-out;
}
Then finally my Javascript
function toggleMenu(){
var mobileNav = document.getElementById('mobile_Nav');
var mobileNav_toggle = mobileNav.getAttribute("class");
if(mobileNav_toggle == "header_navigation_mobile") {
mobileNav_toggle == "header_navigation_mobile.is_open";
}
else {
mobileNav_toggle == "header_navigation_mobile";
}
alert(mobileNav_toggle);
}
I would give the menu an ID so it's easier to target, then just toggle a class that you use to hide/show the menu.
.header_navigation_mobile {
display: none;
}
.open {
display: block;
}
toggle
<div class="header_navigation_mobile" id="mobilenav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<script>
function toggleMenu(){
var nav = document.getElementById('mobilenav');
nav.classList.toggle('open');
}
</script>
In your JS try like this.use querySelector for selecting elements.And for setting and getting css properties use selector.style.property_name.
function toggleMenu(){
var mobileNav_Hide = document.querySelector('.header_navigation_mobile');
var mobileNav_Show = document.querySelector('.header_navigation_mobile.is_open')
if(mobileNav_Hide.style.display == "none"){
mobileNav_Show.stylr.display == "block";
}
else{
mobileNav.style.display = "none";
}
}
I know this is not a specific answer to your question but may be a handy solution as well. I put together a jsfiddle of a hidden menu you can easily edit to your needs. Here is the link.
#Btn{
position: fixed;
right: 20px;
width: 20px;
height: 24px;
background: linear-gradient(#FFF,#DDD);
border: #AAA 1px solid;
border-radius: 2px;
padding: 2px 5px;
cursor: pointer;
transition: border 0.3s linear 0s;
}
#Btn:hover{
border: #06F 1px solid;
}
#Btn:hover div{
background: #06F;
}
#Btn > div{
width: 20px;
height: 4px;
background: #333;
margin: 3px 0px;
border-radius: 4px;
transition: background 0.3s linear 0s;
}
#hidden{
position: fixed;
right: -300px;
top: 60px;
width: 260px;
height: 0px;
background: #333;
color:#ededed;
padding:15px;
transition: right 0.3s linear 0s;
}
<script>
function toggleBTN(){
var hidden = document.getElementById("hidden");
hidden.style.height = window.innerHeight - 60+"px";
if(hidden.style.right == "0px"){
hidden.style.right = "-300px";
} else {
hidden.style.right = "0px";
}
}
</script>
<div id="Btn" onclick="toggleBTN()">
<div></div>
<div></div>
<div></div>
</div>
<div id="hidden">
<ul>
<li>MENU ITEM 1</li>
<li>MENU ITEM 2</li>
<li>MENU ITEM 3</li>
</ul>
</div>
<div id="page_content">
<script>
for(var i = 0; i < 10; i++){ document.write("<h2>"+(i+1)+". Dummy page content ... </h2>"); }
</script>
</div>
Hope this helps :)
There are a few things in the else statement where is mobileNav coming from there is no instance of that anywhere in your code. Taking a step back a minute from your solution does the adding and removal of the classname is_open define the entire show hide behaviour you desire?
Your process of getting the same element with the subclass present/not present and then trying to set the display property is confusing.
You have an equality comparer when setting the display property when it should be just a single equals which along with my first statement i think is your main problem.
Instead of the way you are doing it i would just look at toggling the is_open class this link Toggle class on HTML element without jQuery shows how to do that and also demonstrates a few other ways of toggling styles including without javascript
Finally just check because im being lazy that display is valid as a property and that it shouldnt instead be style.display as others have indicated
js
let c = document.getElementById("dropdownlist");
let e = document.getElementById("dropdownicon");
let d = e.classList.toggle('fa-angle-down');
if(d===true) {
if(c.style.display==='none'){
c.style.display = 'block';
}
else{
c.style.display ='block';
}
}
else{
c.style.display = 'none';
}
So there's one web design project I'm working on, and I've run into a bit of a problem I've been trying to resolve. I've been working on highlighting different nav links based on url of current page. It works on every page I've been working on except for the index page when you land to that page through root link. Even knowing the issue may seems minor if everything else works, but it does bother me a little, hey, I like a good challenge though. I've been trying to set it up in jquery so the index link get highlighted whenever someone is at the root links but I've had no success. I'm also out of ideas on what to try. If anyone can give me help that would be great.
Here's all the relevant pieces of code
HTML:
<nav class="main">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
CSS:
nav.main ul li a
{
color: #000000;
font-size: 1.57em;
padding: 0.1em 1.5em;
padding-top: 0.3em;
border-bottom: 5px solid transparent
}
nav.main ul li a.pink:hover
{
border-bottom: 5px solid #d9618f;
transition: 295ms ease;
}
nav.main ul li a.apink
{
border-bottom: 5px solid #d9618f;
}
nav.main ul li a.orange:hover
{
border-bottom: 5px solid #5ee9ef;;
transition: 295ms ease;
}
nav.main ul li a.aorange
{
border-bottom: 5px solid #5ee9ef;
}
nav.main ul li a.purple:hover
{
border-bottom: 5px solid #9648a5;
transition: 295ms ease;
}
nav.main ul li a.apurple
{
border-bottom: 5px solid #9648a5;
}
jQuery:
$(function () {
$('nav.main ul li a[href="index.html' + location.pathname.split("index.html")[1] + '"]').addClass('apink');
$('nav.main ul li a[href="about.html' + location.pathname.split("about.html")[3] + '"]').addClass('aorange');
$('nav.main ul li a[href="contact.html' + location.pathname.split("contact.html")[4] + '"]').addClass('apurple');
$('nav.main ul li a[href="index.html' + location.pathname.split("schedule.html")[5] + '"]').addClass('apink');
$('nav.main ul li a[href="contact.html' + location.pathname.split("thanks.html")[6] + '"]').addClass('apurple');
});
Inside your root page, add class to index.html anchor element
$("nav.main ul li a:first-child").addClass('apink');
try this code by Jonathan Snook
/*
CLCP v2.1 Clear Links to Current Page
Jonathan Snook
This code is offered unto the public domain
http://www.snook.ca/jonathan/
*/
window.onload = clearCurrentLink;
function clearCurrentLink(){
var a = document.getElementsByTagName("A");
for(var i=0;i<a.length;i++) if(a[i].href="=" window.location.href.split("#")[0])="" removenode(a[i]);="" }="" function="" removenode(n){="" if(n.haschildnodes())="" gets="" the="" text="" from="" link="" and="" moves="" it="" to="" previous="" node.="" for(var="" i="0;i<n.childNodes.length;i++)" {="" var="" strong="document.createElement('strong');" label="n.childNodes[i].cloneNode(true);" strong.appendchild(label);="" n.parentnode.appendchild(strong);="" n.parentnode.removechild(n);="" <="" pre="">
</a.length;i++)>
Can someone explain me what I'm doing wrong, if you click on the first link(link 1) it opens a menu, if you click on one of the 'li' inside the menu it closes the menu.
If I click on the second link(link 2) it opens a different menu but when I click on one of the 'li' inside the menu nothing happens, and what I am trying to do is to close the menu.
jsfiddle (http://jsfiddle.net/BdhxL/)
The HTML code:
Link 1
<div id="dropMenu">
<ul>
<li>Portfolio</li>
</ul>
</div>
<br><br>
Link 2
<div id="dropMenu">
<ul>
<li>Contact us </li>
</ul>
</div>
The JS code:
$(document).ready(function() {
$("li").click(function()
{
$("#dropMenu").hide("slow");
});
$("a").click(function()
{
$(this).toggleClass("active");
$(this).next("div").stop('true','true').slideToggle("slow");
});
});
#dropMenu {
display: none;
position: relative;
right: 5px;
background: #000;
color: black;
margin:50px -5% 0% -142%;
padding: 0px 0px 0px 10px;
}
#dropMenu a {
display: block;
color: #fff;
text-decoration: none;
padding:10px 6px;
font-weight:400;
border-bottom: solid 1px #fff;
}
The CSS code:
#dropMenu ul {
margin:0;
}
#dropMenu a:hover {
background: #57585A;
}
#dropMenu ul {
list-style:none;
padding:0;
}
You have duplicate ids.$("#dropMenu").hide("slow"); is always targetting first dropMenu. Use $(this) to target current and hide the closest div.Try this:
$(document).ready(function() {
$("li").click(function()
{
$(this).closest("div").hide("slow");
});
$("a").click(function()
{
$(this).toggleClass("active");
$(this).next("div").stop('true','true').slideToggle("slow");
});});
Working Demo
Currently, you're having duplicated id for parent div of your list which is <div id="dropMenu"> , you need to use class instead:
<div class="dropMenu">
then you can use .closest() to target closest matching .dropMenu of clicked li:
$(document).ready(function () {
$("li").click(function () {
$(this).closest(".dropMenu").hide("slow");
});
$("a").click(function () {
$(this).toggleClass("active");
$(this).next("div").stop('true', 'true').slideToggle("slow");
});
});
You also need to change all #dropMenu to .dropMenu in your CSS.
Updated Fiddle
I'm unable to make the popups 'redItem', 'blueItem' and 'greenItem' below visible again after setting their display to 'none'. I'm using a CSS selector to get them visible again when the mouse hovers over a node higher up in the nested list to no avail.
Here's the code:
<ul class="popups" style="vertical-align: bottom; padding: 0px; margin: 0px;">
<li style="width: 165px"><a id="topmostBox" href="#">One_high-up_item</a>
<ul class="popups">
<li>First-lower-item
<ul class="popups">
<li name="redItem" >Red</li>
<li name="blueItem">Blue</li>
<li name="greenItem">Green</li>
</ul>
</li>
</ul>
</li>
</ul>
.popups:hover > li {
display: block;
}
.popups {
background-color: white;
font-family: sans-serif;
font-size: 13.5px;
list-style: none;
position: relative;
border: 1px solid lightgray;
border-width: .05em;
border-top-color: rgb(165,165,165);
line-height: 1.2em;
display: inline-table;
}
function setTopColorAndVis(theNestedPopupAnchor)
{
var theColorName = theNestedPopupAnchor.innerHTML;
var topMenuBox = document.getElementById('topmostBox');
topMenuBox.innerHTML = theColorName ;
theNestedPopupAnchor.parentNode.style.display = "none";
}
What happens is this:
1) I select the color 'Red' (the 1st list item)
2) my call to setTopColorAndVis(this) makes the popup disappear (because the user selected an item, the color "Red", and now the popup is not needed for now)
3) but when I later hover the mouse over the "First-lower-item" list item, the child li that has the ul containing 'redItem', 'greenItem', 'blueItem' does not appear.
So my experience here is that I'm successfully able to hide the list items named 'redItem', 'blueItem' and 'greenItem' -- but when I hover over the "First-lower-item", despite my CSS code:
.popups:hover > li {
display: block;
}
The 'redItem', 'greenItem' and 'blueItem' do NOT reappear.
What am I missing here?
The inline style overrides you style in your css code. you should use onmouseover event and onmouseout instead.
Try
<li name="redItem" >Red</li>
function show(elem){
elem.parentNode.style.display = "block";
}
function hide(elem){
elem.parentNode.style.display = "none";
}
You cannot :hover over an element with display:none as it has no size...
instead of working with display, you can work with visibility - which will leave an area to hover over.
like so:
theNestedPopupAnchor.parentNode.style.visibility = 'hidden'
.popups:hover > li {
visibility: visible;
}
http://www.w3schools.com/cssref/pr_class_visibility.asp
I try to create a menu that streches its items to the window width. Could someone please tell me what I'm doing wrong? I know that this question has been asked before but I just don't know what's wrong with my code.
This is what I"m trying to achieve. The red is the window
http://jsfiddle.net/JdGeQ/5/
Javascript
$(function(){
$(window).resize(function (e) {
setTimeout(function () {
resizeButtons();
}, 200);
});
resizeButtons();
});
function resizeButtons() {
var count = $("#menu").length;
var itemwidth = $(window).width / count;
$(".item").css("background", "blue");
$(".item").css("width", itemwidth);
}
css
.elementtop {
position: fixed;
top: 0;
}
.elementfooter {
position: fixed;
bottom: 0;
}
.elementright {
right: 0;
}
ul {
min-width:100%;
padding:0;
margin:0;
float:left;
list-style-type:none;
background: #000000;
}
li {
display:inline;
}
a {
overflow: hidden;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
html
<div>
<ul id="menu">
<li> <a href="#" class="item">
<span>Text text</span>
</a>
</li>
<li> <a href="#" class="item">
<span>Text2</span>
</a>
</li>
<li> <a href="#" class="item">
<span>Text3</span>
</a>
</li>
</ul>
</div>
Thanks in advance.
You have a couple errors in your jQuery code. You need to use width() instead of width, as it is a function call. Also, you are not selecting menu items when you assign count, you are only selecting the #menu.
function resizeButtons() {
var count = $("#menu .item").length;
var itemwidth = $(window).width();
itemwidth = itemwidth / count;
$(".item").css(
"width", itemwidth
);
}
You also need to set display:inline-block or display:block on your anchors, so that you can affect the width.
a { display:inline-block; }
Updated Fiddle
Note: You will also need to account for the padding, etc. on your menu items to get the proper result.
This can be done with pure CSS:
http://cssdeck.com/labs/hgmvgwqc
ul {
min-width:100%;
padding:0;
margin:0;
display: table;
list-style-type:none;
background: #000000;
}
li {
display: table-cell;
width: 33%;
}
a {
overflow: hidden;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
display: block;
}
This method requires knowing how many list items there are.
With $("#menu").length you're getting the number of occurrences of the #menu element -- 1. You should use the following to get the number of menu items
var count = $("#menu li").length;