Change color of navbar using javascript - javascript

HTML
<nav>
<ul>
<li><a class="notDrop" href="#home">HOME</a></li>
<li><a class="notDrop" href="guides.html">GUIDES</a></li>
<li class="dropdown">
<a class="dropbtn">BRANDS</a>
<div class="dropdown-content">
NVIDIA
INTEL
CORSAIR
SAMSUNG
<li class="dropdown">
<a class="dropbtn">BUILDS</a>
<div class="dropdown-content">
GAMING
OFFICE
SERVER
MEDIACENTER
</div>
</li>
</ul>
</nav>
CSS
nav {
background-color: white;
overflow: hidden;
display: flex;
justify-content: center;
}
Javascript
window.onload = function mobile(){
if( isMobile.any() ) {
document.getElementById('nav').style.backgroundColor = "blue";
alert('Mobile');
}
}
But I can't get it to change color, what am I doing wrong? I managed
to change the color of the body but I cant of the nav.

You used the wrong javascript function. nav is a tag, not an id.
It should be getElementsByTagName("nav")[0] instead of getElementById("nav")
javascript will always return an array regardless of number of matching element using getElementsByTagName() method. So use [0] to return the first one.

You used document.getElementById but you have only nav tag from HTML5. Add id = "nav" to your nav tag.
Best regards!

Your problem here is that you are using getElementById, but have not given your nav an id.
The best way to solve this would be to add an id to your nav, as follows:
<nav id="top-nav">
And your js becomes:
document.getElementById('top-nav').style.backgroundColor = "blue";
The answer given by Super Cool Handsome Gel Boy, while it will work is impractical because it looks for any <nav> tag, so if you add more <nav> tags, or move them around, you will have to recode your javascript.
By using an id, the javascript will always target the right <nav>.

Related

Navbar multiple selection

So I'm fiddling around with this design I found on http://cssmenumaker.com/menu/responsive-flat-menu but I'm having a bit of an issue when the navbar is scaled down in the browser. So full width of the browser it looks like img 1 below....and when scaled down it turns into a hamburger menu with a dropdown as depicted in img 2. The problem is it repeats since I added an extra li tag to add in 'Super Awesome Menu'. So, my question is how to remove that extra repetition in img 2(it should retain in in full width like img 1).
I tried some of the simple removeclasses but they did not work. I'm sure it's super simple and I'm just failing to see it.
I stuck the code up here (since for whatever reason it's a huge pain to indent jquery on here)
http://codepen.io/anon/pen/NxZLKo
<body>
<div id="wrapper">
<header>
<nav>
<div id='cssmenu'>
<ul>
<li>Super Awesome Menu</li>
<li><a href='#'>Home</a></li>
<li class='active'><a href='#'>About</a></li>
<li><a href='#'>Activities</a></li>
<li><a href='#'>Resources</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Join</a></li>
</ul>
</div> <!--end cssmenu-->
</nav> <!--end nav-->
</header> <!--end header-->
</div> <!--end wrapper-->
You can do that using media queries. Put this line of code in you css and you are good to go.
#media screen and (max-width: 926px) { #cssmenu ul.open li:nth-child(1){ display:none !important; } }
It will hide the first child in this case super mega awesome if you do li:nth-child(2) it will hide Home etc.
I think there's no extra link "Super Awesome Menu"
It's just the name of your menu as you configured it on lines 5 & 73 in Javascript Section of your code snippet. It's your title parameter
$("#cssmenu").menumaker({
title: "Super Awesome Menu",
format: "multitoggle"
});
Just let it empty or find another name !
Try this css
#media screen and (max-width: 680px) { #cssmenu ul.open
li:first-child{
display:none !important; } }

Styling Bootstrap tabbable nav

I'd like the functionality of the Bootstrap tabbable nav but I want to style each tab with a background image and text underneath. In fact, what I'd really like is to just put my photoshop images right in each tab and set the active state to my selected image.
I'm having a very difficult time doing this. Is it going to take a lot of custom work to get this working with this component?
I thought I could just try with some CSS but it's not giving me the correct formatting I want:
ul.nav.nav-tabs li {
display:inline-block;
background:url(../images/skypeIcon.png) no-repeat left center;
background-size:20px auto;
font-size:15px;
padding:2px 0 2px 28px
}
By the way, I'm using Bootstrap 2.3 so I can't use Bootstrap 3 Navbar Generator.
I can use a div tag inside my a tag and put whatever content I want in there.
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab1" data-toggle="tab">
<div>
<img src="<%=context%>/images/defaultAvatar.png"/>
<br/>
Computer
</div>
</a>
</li></ul>

Why is the jQuery function showHide() undefined?

I'm really new at trying to use jQuery, so please forgive me for asking what is likely a simple question. Perhaps it isn't even related to jQuery, but anyway, here's the scenario. I'm trying to put in a hidden div which I only want to show up when the user hovers their mouse over the Learner's anchor tag on the page. I've started with only one anchor tag, to get it working first before implementing the rest of them. I've downloaded a jQuery library and included a reference to it, so here's some of what I've got in my page's head section:
<script src="js/jquery-1.11.1.js" type="text/javascript" ></script>
<style type="text/css">
#navcontainer ul { list-style-type: none; }
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
text-decoration:none;
padding: .2em 1em;
}
</style>
Next I've defined an unordered list, using the styling above to make it horizontal, and I've got a hidden div after it, which I want to show when the user moves their mouse over the first anchor in the unordered list. Here's the relevant HTML from within the body tag:
<body>
<div id="navcontainer">
<ul>
<li>Home</li>
<li>Learners</li>
<li>Teachers</li>
<li>Businesses</li>
<li>Contact Us</li>
</ul>
<div id="dropdown1" style="visibility:hidden;">
<ul>
<li>Description A</li>
<li>Description B</li>
<li>Description C</li>
</ul>
</div>
<!-- other HTML code -->
</body>
However, when I run this from within the browser (IE11) nothing happens. Using the F12 web developers tools built into IE11 I learn that it giving an error of "showHide is undefined". Why is it doing that? The showHide() function is most certainly in the jquery-1-11.1.js file, which most certainly is in my js folder. What have I done wrong, or failed to take into account?
jQuery works kinda different than that. You have to make it look like this:
$("#dropdown1").toggle()
You better make a javascript file and separate the JS from the HTML:
HTML:
<body>
<div id="navcontainer">
<ul>
<li>Home</li>
<li>Learners</li>
<li>Teachers</li>
<li>Businesses</li>
<li>Contact Us</li>
</ul>
<div id="dropdown1" style="visibility:hidden;">
<ul>
<li>Description A</li>
<li>Description B</li>
<li>Description C</li>
</ul>
</div>
<!-- other HTML code -->
</body>
The JS
$(function(){
$("#navcontainer li a").click(function(){
if( this.href.indexOf("#") != -1 ) {
$( $(this).attr("href") ).toggle(); // $( "#container1" )
}
});
});
What this does is on the navcontainer li click, we make a handler, which does something if it contains a #. Then we select that element #container1 which is in the href, also is the selector for the element which we want to show. And we toggle that element.
There is no such function as showHide you could use toggle() or show() or hide()
in you current scenario uou would couple them with $(this). or your chosen selector.
As an example of targetting a particular element with jQuery we have added the class hover-learners and target it with the selector below.
HTML:
<div id="navcontainer">
<ul>
<li>Home
</li>
<li>Learners
</li>
<li>Teachers
</li>
<li>Businesses
</li>
<li>Contact Us
</li>
</ul>
<div id="dropdown1">
<ul>
<li>Description A
</li>
<li>Description B
</li>
<li>Description C
</li>
</ul>
</div>
Add the below javascript as a file or within <script type="text/javascript"> code here</script> after including your jQuery library file.
Javascript:
// wrap everything in jQuery's ready function to make sure the page has fully loaded before executing the javascript
$(document).ready(function () {
//select learners and apply mouseover event
$('.hover-learners').on('mouseover', function () {
$('#dropdown1').show();
});
//select learners and apply mouseout event
$('.hover-learners').on('mouseout', function () {
$('#dropdown1').hide();
});
});
Also since the show and hide methods manipulate the display CSS property I have added
CSS:
#dropdown1 {
display:none;
}
and remove the inline style="visibility:hidden" from the #dropdown1
Working demo here: http://jsfiddle.net/robschmuecker/J6U7d/

jQuery hide an element if another element contains text

I have a div that I wish to hide using jQuery, only if I'm in a certain category, so I want to base the hiding of the div based on my breadcrumbs. I think I have the jQuery right, but it isn't hiding the div?
<div class="breadcrumbs">
<ul class="nav">
<li>Home</li>
<li>Tshirts</li>
<li>Mens</li>
</ul>
</div>
<div class="hide-me">I want to hide</div>
<script type="text/javascript">
jQuery(window).ready(function(){
if(jQuery('.breadcrumbs ul.nav li:nth-child(2)').text() == "Tshirts"){
jQuery('.hide-me').hide();
}
});
</script>
jQuery('.breadcrumbs ul.nav li:nth-child(2)').text()
Is strange, why are you hardcoding this so much? You're specifically asking for that list, and only if it is within a very specific tree.
It would be easier if you just changed your HTML
<div class="breadcrumbs">
<ul class="nav">
<li>Home</li>
<li id="secondlist">Tshirts</li>
<li>Mens</li>
</ul>
</div>
and then
$("#secondlist").text() == "Tshirts";
Check if
$('.breadcrumbs ul.nav li:nth-child(2)').text()
is really getting the value, I think that is the principal problem.

Using Javascript to do magical stuff with HTML or CSS?

I'm in the process of creating a Chrome extension that overrides a sites CSS. I want to try to add an icons next to each menu item using Typicons. Below is the code they use for their menu.
<ul class="standAloneNavItems">
<li class="selected">
Home
</li>
<li class="unselected">
Mailbox
</li>
<li class="unselected">
My Account
</li>
</ul>
The link changes every time so CSS selectors weren't an option.
a[href$="/cgi-bin/account"] { content: '\e080'; !important; }
I'm not much of a Javascript guy but I'm wondering if it's possible to use them in some way to target the names and add HTML or CSS through there.
Since you mention jQuery, you can use the jQuery contains selector to:
Select all elements that contain the specified text.
For instance you can select all anchor elements containing "Home" and color them red like this:
$('a:contains("Home")').css({
'color': 'red',
'background-color':'gray'
});
demo fiddle
You can use filter and regex to match your requirement
$('.standAloneNavItems li a').filter(function() {
return $(this).attr('href').match(/\/cgi-bin\/account/);
}).css({'background-color': 'red'});
DEMO
Since you want an icon for every menu, you can try this
<ul class="standAloneNavItems">
<li id="image1" class="selected">
Home
</li>
<li id="image2" class="unselected">
Mailbox
</li>
<li id="image3" class="unselected">
My Account
</li>
</ul>
And in the CSS:
#image1 { content: '\e080'; !important; }
#image3 { content: '\e080'; !important; }
#image3 { content: '\e080'; !important; }
Hope this helps.

Categories

Resources