Change li a style using javascript - javascript

I have a menu which i need to change li a style of this:
document.getElementById(li).style.background ="red";
CSS of this is:
.menu, .menu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 191px;
background ="blue"
}
.menu li{
position: relative;
}
.menu li a{
border-radius: 5px;
background: white url(../graphics/glossyback.gif) repeat-x bottom left;
font: 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
It is changing background but only in .menu li ul.
I want to change background in .menu li a.
Appreciate your help.

You are missing quotes. document.getElementById('li'); will return the first element with the id li
You can change its background like:
document.getElementById('li').style.background ="red";
For selecting multiple elements with a class name li you can use
document.getElementsByClassName('li')
For more accurate selections you can use:
document.querySelectorAll('.menu li a')
which returns a list of matching nodes on which you can iterate and set the background as follows:
var elements = document.querySelectorAll('.menu li a');
elements.forEach(el => el.style.background = 'red')

I recommend using something like jQuery because it will do a lot of the heavy lifting for you. Also it will make it compatible with other browsers, which you will find overtime is going to be one of the most time consuming things of web development.
But to answer your question to do it in javascript you can do the following:
document.querySelectorAll('#li a').style.background = "red";

Your CSS here .menu li{ suggests that the li is an element and not an id assigned to another element. So you should use
var li = document.getElementsByTagName("li");
for(var i = 0; li[i]; i++){
li[i].style.background = "red"; //works for multiple `<li>` elements on the page
}
Or to get specifically the exact results, use:
var els = document.querySelectorAll(".menu li ul, .menu li a"); // and the same for loop follows
Demo

Related

Big Commerce - Custom Field Java Script Effecting Navigation Menu

I'm creating a custom form using EmailMeForm and using the full code option that uses CSS, JavaScript, and HTML. I embedded the code into the page content box and found that part of the JS code from EmailMeForm (https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js) was causing my navigation menu's CSS styles to become hidden. The JS isn't very descriptive of what is what each section is controlling.
I was wondering if anyone had an idea of how to contain the scope of my Javascript to just the section of HTML added to the page content section
This is what I could find with the inspector for CSS code for the section.
I have no means of editing it myself. What ever is in the JS is making all of the style attributes in the CSS class to display as "none".
.Left #SideCategoryList .BlockContent, .Left .slist .BlockContent {
padding: 0 0 0 0;
overflow: hidden;
}
.Left #SideCategoryList li a, .Left .slist li a, .Left .afterSideShopByBrand a, .Left #GiftCertificatesMenu li a, .Left #SideAccountMenu li a {
font-weight: bold;
padding: 0;
margin: 0 0 10px 0;
font-size: 14px;
}
.Left #SideCategoryList li li a, .Left .slist li li a {
font-weight: 400;
font-size:13px;
background:#f3f3f3;
padding:7px 14px 7px 35px;
}
.Left #SideCategoryList li li li a, .Left .slist li li li a {
background:#ececec;
padding-left:50px;
All I want to know is how to isolate what goes in the page content section from the code embedded in the Big Commerce software.

jQuery css-editing method doesn't apply to nav ul li with ul in them

On my page, I have a menu with currently six links. Two of them open a sub-menu (an ul-tag within the li-tag). Using jQuery, I'm trying to calculate the number of links (6) and then give each link a width of 1/6 of the page. Using this code, I can accomplish my goal, but only with normal links (with no submenu):
$( document ).ready(function()
{
// Gets the number of elements with class yourClass
var amount = $('.menulink').length;
alert(amount) //EDIT: This outputs "6"
// Calculates the width each element should get
var width = 100/amount;
width += "%";
// Set the width on each element
$( "nav ul li " ).css('width', width);
});
And my HTML looks like this:
<nav>
<ul>
<li class="menulink">Link1 (with submenu)
<ul>
<li>Submenuitem1</li>
<li>Submenuitem2</li>
<li>Submenuitem3</li>
<li>Submenuitem4</li>
</ul>
</li>
<li class="menulink">Link2</li>
<li class="menulink">Link3</li>
<li class="menulink">Link4</li>
<li class="menulink">Libk5</li>
<li class="menulink">Link6 (with submenu)
<ul>
<li>Submenuitem1</li>
<li>Submenuitem2</li>
<li>Submenuitem3</li>
</ul>
</li>
</ul>
</nav>
I am aware that this is not necessary and that I could just set the width to 16.7% with 6 menulinks, but I want to understand why my code doesn't work. Can anyone please explain why it doesn't?
EDIT: This is how my CSS looks:
body
{
padding: 0;
margin: 0;
overflow-y: scroll;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
}
nav
{
background-color:#222;
}
nav ul
{
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
nav ul li
{
display:inline-block;
}
nav ul li:hover
{
background-color: #333;
}
nav ul li a
{
color: #CCC;
display: block;
padding: 15px;
text-decoration:none;
}
nav ul li a:hover
{
color: #CCC;
text-decoration:none;
}
nav ul ul
{
display:none;
position:absolute;
background-color: #333;
border: 5px solid #222;
border-top: 0;
margin-left: -5px;
width: 300px;
}
nav ul ul li
{
display:block;
width: 300px;
}
According to what you've said in the comments, it's not applying the width to the items with sub-menus.
Try this:
$( document ).ready(function() {
// Gets the number of elements with class yourClass
var amount = $('.menulink').length;
// Calculates the width each element should get
var width = 100/amount;
width += "%";
// Set the width on each element
$("nav > ul > li").css('width', width);
});

Entire drop-down menu quickly flashes upon page load

I have a standard drop-down menu that uses jQuery to hide the children li elements. However, upon loading the site, the child elements quickly appear and subsequently disappear (sort of like a quick flash). I don't think this is at all related to the flash-of-unstyled-content known issue.
The site is in Hebrew, but that shouldn't affect anything. The site is located here
If you'd like a sample HTML + CSS and the Javascript code, I would gladly post it here.
I was just wondering if anyone has encountered this issue before. I'm seeing it in Chrome, and I haven't really checked if it also happens in IE and Firefox.
Thanks!
EDIT: HTML/CSS/JS shown below:
HTML:
<ul class="menu">
<li>blah
<ul class="sub-menu">
<li>blah</li>
</ul>
</li>
</ul>
CSS:
/* NAVIGATION -- level 1 */
ul.menu { float: right; list-style-type: none; font-size: 15px; margin-top: 50px; }
ul.menu > li{ float: right; display: inline; position: relative; margin-left: 30px; }
ul.menu li > a { display: block; color: #5c5d5f; text-decoration: none; border-bottom: solid 1px #9b9a95; }
ul.menu li:hover > a, ul.menu li a:hover , ul.menu li.current_page_item > a { color: black; }
body.home .current_page_item > a { }
body.home .current_page_item > a:hover { }
/* NAVIGATION -- level 2 */
ul.menu li > div { display: none; width: 157px; height: 171px; margin-right: -10px; position: absolute; opacity:0; background: url(images/subNav_bg.png) no-repeat top right; }
ul.menu li > div span { height: 15px; background: transparent; display: block; } /* used to push down the menu */
JS:
// navigation menu //
// add hasSubMenu to each li that has one //
$('.menu > li').has('ul').addClass('hasSubMenu');
// wrap with <div> //
$('li.hasSubMenu > ul').wrap('<div />');
$('ul.menu li > div').css('display', 'none');
$('ul.menu li > div').prepend('<span></span>');
$('li.hasSubMenu > a').click(function () {
return false;
});
// add class to <div> for extendedBg //
$('li.extendedBg').find('div').addClass('subBg2');
$('li.hasSubMenu').hover(function () {
// hover on
$(this).addClass('hover').find('div').stop().fadeTo("medium", 1, /* when done fading */
function () {
$(this).find('div').css('display', 'block');
//$(this).find('ul').css('display','block');
}
);
}, function () {
// hover off
$(this).removeClass('hover').find('div').stop().fadeOut();
});
Set the dropdown menu as display: none in the page's CSS or directly in the element itself using style="display:none". This will hide it as the page loads.
I have the same issue :( except when i used the css to hide it on load, i now have the problem that it never displays! even when hovering over the parent...
Even before i posted my reply i thought id try one more thing
#navigation ul ul{
display:none;
}
instead of
#navigation ul ul li{
display:none;
}
and now it works perfectly
I recommend setting the style to display:none the the li elements in a style sheet, so that the browser knows to render them initially as not displayed. Then, when jQuery loads, the inline style that jQuery adds will override the display style.
ul li {
display:none;
}
Try:
.mobile-menu:not( .mm-menu ) {
display: none;
}
where '.mobile-menu' is whatever class or ID you have given to the containing element of your menu.
e.g
<div class="mobile-menu">
<ul>
<li>about</li>
<li>Food</li>
</ul>
</div>

HTML/ CSS/ DropDown onClick alteration

I am a student worker, I'm working off an idea, I have found an open source drop down menu that I would like to alter.
I would like to alter it so that instead of showing its children when it is hovered over, it shows them when clicked. Is this possible? Or does anyone know of a similar solution that is open source?
Here is the code:
Too many lines to post the HTML so here is the URL
http://notimefortime.com/index.txt
#menuh-container
{
position: absolute;
top: 1em;
left: 1em;
}
#menuh
{
font-size: 10px;
font-family: arial, helvetica, sans-serif;
width:100%;
float:left;
margin:2em;
margin-top: 1em;
}
#menuh a
{
text-align: center;
display:block;
border: 1px solid #0040FF;
white-space:nowrap;
margin:0;
padding: 0.3em;
}
#menuh a:link, #menuh a:visited, #menuh a:active
{
color: white;
background-color: #0040FF;
text-decoration:none;
}
#menuh a:hover
{
color: white;
background-color: #668CFF;
text-decoration:none;
}
#menuh a.top_parent, #menuh a.top_parent:hover /* attaches down-arrow to all top-parents */
{
background-image: url(navdown_white.gif);
background-position: right center;
background-repeat: no-repeat;
}
#menuh a.parent, #menuh a.parent:hover /* attaches side-arrow to all parents */
{
background-image: url(nav_white.gif);
background-position: right center;
background-repeat: no-repeat;
}
#menuh ul
{
list-style:none;
margin:0;
padding:0;
float:left;
width:20em;
}
#menuh li
{
position:relative;
min-height: 1px;
vertical-align: bottom;
}
#menuh ul ul
{
position:absolute;
z-index:500;
top:auto;
display:none;
padding: 1em;
margin:-1em 0 0 -1em;
}
#menuh ul ul ul
{
top:0;
left:100%;
}
div#menuh li:hover
{
cursor:pointer;
z-index:100;
}
div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{
display:none;
}
div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{
display:block;
}
No.
You're currently using the CSS :hover pseudo selector which displays the child when the parent is hovered over. There's a pseudo selector :active which is only triggered if you're holding down the mouse button on an element, but that's obviously not what you want.
For the menu to appear on click, you'll need JavaScript. However, in case a user is browsing with Javascript off, you'll want to revert to the CSS hover technique. So, start with some basic HTML/CSS, similar to what you have:
HTML:
<ul id="menu">
<li>
Some Link
<ul>
<li>A</li>
<li>B</li>
</ul>
</li>
<li>
Some Link 2
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
</ul>
CSS:
#menu li ul {
display:none;
}
#menu li:hover ul {
display:block;
}
Then, in JavaScript, override the hover event and keep the children hidden. Also, attach a click event and show the child on that:
Javascript:
window.onload = function() {
var menu = document.getElementById("menu"), //get the menu
i = 0;
//get the <li>s
var parents = menu.children;
for(i=0;i<parents.length;i++) {
//override the hover event
parents[i].onmouseover = function() {
//hide the first child (which, in this specific case,
//is the <ul> that we're looking for)
//if you want to hide more children, you could
//loop through and hide them all, etc.
this.children[0].style.display = "none";
};
//on click,
parents[i].onclick = function() {
//show the first child if it's hidden
//hide if it's visible
var c = this.children[0];
c.style.display = c.style.display === "none" ? "block" : "none";
};
}
};
You can see an example here: http://jsbin.com/ifuvuw/2/edit
Please note:
This does not handle the nested menus you have. It's a simple example. You can take the basic principle and apply it to your case. If you have any questions on how it works, please ask, but if you're having trouble applying it, consider asking a new question.
TL;DR: You can't do it with CSS, but you can with Javascript
Pros: please tweak my (probably crappy) JS and improve it
Noobs: please ask if you don't understand how it works
The best way to accomplish this would be to use JavaScript. I'd recommend using the jQuery framework, it makes it a lot easier. Here is a good starting point:
http://api.jquery.com/click/

How to get dropdown menu to open/close on click rather than hover?

I am very new to javascript and ajax/jquery and have been working on trying to get a script to open and close the drop menu on click rather that hover.
The menu in question is found on http://www.gamefriction.com/Coded/ and is the dark menu on the right side under the header. I would like it to open and close like the other menu that is further below it (it is light gray and is in the "Select Division" module).
The gray menu is part of a menu and the language menu is not.
I have a jquery import as well which can be found in the view source of the above link.
My Javascript Code:
<script type="text/javascript">
/* Language Selector */
$(function() {
$("#lang-selector li").hover(function() {
$('ul:first',this).css('display', 'block');
}, function() {
$('ul:first',this).css('display', 'none');
});
});
$(document).ready(function(){
/* Navigation */
$('.subnav-game').hide();
$('.subnav-game:eq(0)').show();
$('.preorder-type').hide();
$('.preorder-type:eq(3)').show();
});
</script>
My CSS:
#lang-selector
{
font-size: 11px;
height: 21px;
margin: 7px auto 17px auto;
width: 186px;
}
#lang-selector span
{
color: #999;
float: left;
margin: 4px 0 0 87px;
padding-right: 4px;
text-align: right;
}
#lang-selector ul
{
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#lang-selector ul li a
{
padding: 3px 10px 1px 10px;
}
#lang-selector ul, #lang-selector a
{
width: 186px;
}
#lang-selector ul ul
{
display: none;
position: absolute;
}
#lang-selector ul ul li
{
border-top: 1px solid #666;
float: left;
position: relative;
}
#lang-selector a
{
background: url("http://www.gamefriction.com/Coded/images/language_bg.png") no-repeat;
color: #666;
display: block;
font-size: 10px;
height: 17px;
padding: 4px 10px 0 10px;
text-align: left;
text-decoration: none;
width: 166px;
}
#lang-selector ul ul li a
{
background: #333;
color: #999;
}
#lang-selector ul ul li a:hover
{
background: #c4262c;
color: #fff;
}
My HTML:
<div id="lang-selector">
<ul>
<li>
Choose a Language
<ul>
<li>English</li>
<li>Deutsch</li>
<li>Español</li>
<li>Français</li>
<li>Italiano</li>
</ul>
</li>
</ul>
</div>
Thanks!
$(function() {
$("#lang-selector li:first").click(function(){
$('ul:first',this).toggle();
})
});
Using toggle will require you to click to open then reclick to close
I would do something like this...
$(function() {
$("#lang-selector > li").click(function() {
$('ul:first',this).toggleClass('active');
});
});
And, then, in the CSS add this:
.active { display: block; }
<< EDIT: Removed "ul" from ".active" class for CSS rendering efficiency >>
Also make sure that the sub-nav <ul> has "display: none;" on it by default in your CSS.
This will make it so that clicking an <li> tag in #lang-selector, but not in any sub-nav <ul> tags will either open or close the sub-nav, depending on it's current state.
If you're worried about the accessibility of having "display: none" on the sub-nav by default, you can do something like this...
$(function() {
$("#lang-selector li ul").addClass("hidden");
$("#lang-selector li").click(function(e) {
e.preventDefault();
$('ul:first',$(this)).toggleClass('hidden active');
});
});
<< EDIT: Altered selectors to match example provided, turned "this" into jQuery object. >>
And then also add this to the CSS
.hidden { display: none; }
In this scenario, you have the <ul> showing by default, then when the document loads, jQuery adds the "hidden" class to all of them to hide them, then on the click of the <li> it will toggle the hidden and active classes, displaying them or hiding them.
You'll also need to remove your current "display: none" from your #lang-selector ul ul in CSS, otherwise it takes priority over the hidden / active classes.
search this $("#lang-selector li").hover and replace with
$("#lang-selector li").click
.hover, .click, .something, are all triggers, view this link:
Jquery Events
to learn more about events in Jquery!
Ps: sushil bharwani (vote it), is right, just change your .hover by the .click
if you need two functions for a click event, try .toggle
i'm using this:
$('.triggerlist').toggle(function(e) {
e.preventDefault();
$(this).find('ul').fadeIn();
},function() {
$(this).find('ul').fadeOut();
});
Which allows me to do more stuff on the 2 functions than just the .click with its 1 function.

Categories