I am not the greatest at jQuery so forgive me if this is a simple question. I have created a nav menu active state function Click here for the demo
It works fine in Chrome, Firefox, Safari, however I notice in IE8 the class active is not appearing when I click on the links. Is there something incorrect in my jQuery?
$(document).ready(function () {
$('.proBtn').click(function () {
$('li').removeClass('active');
$('li a').removeClass('blue');
$(this).parent().addClass('active');
$(this).parent().children('.proBtn').addClass('blue');
});
});
I don't have a working version of IE8 (the horror!).. But since your "this" is already the button you're clicking on, why not change the last line to this:
$(this).addClass('blue');
As seen here (like I said: can not test it) : http://jsfiddle.net/vXmNU/1/
EDIT
Updated the fiddle to match the parent to the li: http://jsfiddle.net/vXmNU/2/
$(this).parent("li").addClass('active');
After almost burning my head down:
Try to comment out all console.log Events. I'm running IE8 in a Virtual Machine and if i have any console.log Event triggered, the javascript will stop working. It will not run any other javascript code after the console.log.
So: Try to comment out / remove all console.log - It's a IE8 Bug, because earlier there was alert(); to debug things.
for digging deeper: What happened to console.log in IE8? (thanks to kamui)
This code snippet is based on your jsfiddle demo, but with sligtly improved CSS and JS. I dont have IE8, so try it on your own and let me know in comment.
Edit: I tested it myself. Its working in IE8. But maybe you will need click on "Allow blocked content" to run JS on your page.
// JavaScript code
$(function() {
$('.proBtn').on('click', function() {
$('.active').removeClass('active');
$(this).parent().addClass('active');
});
});
/* CSS code */
body { background: #e8e8e8; }
ul { margin: 0; padding: 0; list-style: none; }
ul:after { content: ""; display: block; clear: both; }
ul li { float: left; width: 16.66%; }
ul li a:hover, ul .active a { background: #fff; color: #1d5ea8; }
ul li a {
display: block;
text-decoration: none;
font-family: helvetica, sans-serif;
font-weight: bold;
color: #6a6f75;
font-size: 12px;
text-align: center;
padding: 10px 0;
border-radius: 4px;
transition: all 0.4s;
}
<!-- HTML code -->
<div id="wrapper">
<div class="top-block">
<ul>
<li class="active">Home</li>
<li>Edit Profile</li>
<li>Like'd</li>
<li>Lists</li>
<li>Followers</li>
<li>Following</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Related
Ok so i'm super beginner with html and css and i don't know javascript at all.I'm creating a little website as a school project, i made horizontal navigation bar from w3schools tutorial, what i want to do is when i press one of the buttons to stay colored, not just change color for 1 sec because they are 'active'. My code may be completely messy but i really need help.
Also i have 3 more subpages connected to this one, i want them to stay colored as well.
What i'm trying to achieve is exactly this: How can I add class on active li with JavaScript code
But it doesnt work for me, maybe i need to change something in javascrip because my class is named 'navbar'?
I've tried several solves from this topic on stack overflow but none of these work for me :\
HTML:
<ul class="navbar">
<li>Pocetna</li>
<li>Stranica 2</li>
<li>Stranica 3</li>
<li style="float: right;">Kontakt</li>
</ul>
CSS:
.navbar {
list-style-type: none;
position: sticky;
top: 0;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.navbar li {
float: left;
}
.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: Arial;
}
.navbar li a:hover {
background-color: #111;
}
Im expecting link to stay orange when im on that page.
you can do some things with jquery like add an event listener that changes the css of html elements
const changeColor = () => {
$('ul > li > a').css('background-color', 'inherit')
$(event.target).css("background-color", "red")
}
$('ul > li > a').on('click', changeColor)
https://jsfiddle.net/z02ndowt/
You can do this by adding a class onto your html <a> tag on the link that is active and then just style the active class within your CSS. See below:
HTML
<ul class="navbar">
<li><a class="active" href="sajt.html">Pocetna</a></li>
<li>Stranica 2</li>
<li>Stranica 3</li>
<li style="float: right;">Kontakt</li>
</ul>
CSS
.active {
color: orange;
}
Ok so i did some testing and kinda found a solution. I put identificator on instead of class. So on my main page i put id="active" on first link, on my second page on second link etc. then just added #active { background-color: orange; } and it works just how i wanted it to work.
I want to add a CSS class to a nav menu item each time it's clicked (so i can then style that menu item so people know this is the page they are on). I know I need to loop through the .menu-item class and add / remove a new CSS class using a loop, but I can't seem to get it to play ball.
I'm guessing I need to make the .menu-item the 'this' object and use a boolean to add or remove the CSS class, dependent on whether the currentItem variable is set to true or false.
I can't seem to get this to play though and I'm not 100% sure I'm using the event listener in the correct way.
Any help would be awesome.
codepen: https://codepen.io/emilychews/pen/eeKPoo?editors=1010
JS
var navlinks = document.getElementsByClassName('menu-item')
var currentItem = false;
for (i = 0; i<navlinks.length; i+=1) {
function addCurrentItemToMenu() {
if (currentItem === false) {
navlinks = this
this.classList.add('current-item')
currentItem = true
} else {
this.classList.remove('current-item')
currentItem = false
}
}
}
navlinks.addEventListener("click", function(){
addCurrentItemToMenu()
}, false)
CSS
body, ul {padding: 0; margin: 0}
#main-header {width: 100%; height: 100px;}
#mobile-menu-button {display: none;}
#main-navigation {
position: relative;
width: 100%;
height: 100px;
background: red;
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding: 10px 5% 10px 5%;
align-items: center;
}
ul#nav-menu-items {
display: flex;
margin-left: auto;
}
#main-navigation ul li {list-style-type: none;}
ul#nav-menu-items li a {
padding: 10px 15px;
margin: 0 5px;
box-sizing: border-box;
background: yellow;
text-decoration: none;
color:#000;
}
#main-navigation ul#nav-menu-items li a:hover {
color:blue;
transition: color .25s;
}
HTML
<header id="main-header">
<nav id="main-navigation">
<ul id="nav-menu-items">
<li class="menu-item">News</li>
<li class="menu-item">About</li>
<li class="menu-item">Contact</li>
</ul>
</nav>
</header>
Here is a modified codepen for your problem: https://codepen.io/anon/pen/RjJEWe?editors=1010
The code simply add current-item class to the clicked anchor, so you can style it however you want in css. You can also see event.preventDefault() in the code to prevent anchor from following your link, as it will reload the page and js won't do anything. It depends on the stack that you are using. If you have server backed website, the current link will be handled by the server and html returned will already have the class set appropriately, if you have frontend js framework (Angular, VueJS, ReactJS), you must handle it appropriately.
Just for your example you can see the code below:
var navlinks = document.querySelectorAll('li.menu-item > a');
// Loop through all the links and add event listener
navlinks.forEach(function(item) {
item.addEventListener('click', function(event) {
event.preventDefault();
// Remove the class from all elements
navlinks.forEach(function(item) {
item.classList.remove('current-item');
})
// add the class to the current one
this.classList.add('current-item');
});
});
Currently I am trying to make the selected list item STAY bold after selected and go back to normal after a different item is selected. basically I want a "currently selected tab". is there a way I can do this with css or do I need Javascript? Here is my code ->
CSS: (using SASS)
.setup-nav {
float: left;
position: relative;
width: 20%;
padding-right: 20px;
box-sizing: border-box;
font-size: 18px;
color: $base-link-color;
text-align: left;
li {
border-top: none;
border-bottom: none;
&.active {
font-weight: bold;
}
}
HTML:
<ul class="setup-nav">
<li>HTTP</li>
<li>Email</li>
<li>Ruby</li>
<li>Python</li>
</ul>
Hopefully there is an easy way to do this.
Using jQuery:
$(".setup-nav").on( "click", "li", function(){ // attach to Click event
$(".setup-nav li.active").removeClass("active"); // reset all <li> to no active class
$(this).addClass("active"); // add active class to this <li> only
});
http://api.jquery.com/on/ reference for use of .on()
http://api.jquery.com/addClass/ reference for use of .addClass()
Someone may come along with pure JavaScript answer (no jQuery library use) if you prefer that approach.
i am trying to implement accordion.
My accordion should expand on mouse hover on the "accordian head".
And also mouse click on "accordian head" should show/hide the accordion-body.
I got the show/hide working through CSS on hover.
But when i club mouse click event , the functionality is not working
here is the sample
http://jsfiddle.net/yf4W8/157/
.accordion-body{display:none;}.accordion:hover div{display:block;}
you need to change
myDivElement.style.display = none;
myDivElement.style.display = block;
to
myDivElement.style.display = "none"; //double quotes are missing
myDivElement.style.display = "block"; //double quotes are missing
Demo
I have created a working demo, please check the link below not it is working on mouse click. Replace your JavaScript code with this and remove the css properties.
function expandAccordionBody(){
var myDivElement = document.getElementById("accbody" );
var cStyle=window.getComputedStyle(myDivElement, null);
if(cStyle.display=='block'){
myDivElement.style.display='none';
}else{
myDivElement.style.display='block';
}
}
Demo
I took a liberty to change your code a bit. This code works.
Hope that this is what you meant to do....
Instead of using pure Javascript I used jQuery event click and hover.
here is the link for working code
click here for DEMO
HTML code;
<div class="accordion">
<div class="headA">
Head
</div>
<div id="accbody" class="accordion-body">
Body
</div>
</div>
CSS code;
.accordion {
border: 1px solid #444;
margin-left: 60px;
width: 30%;
}
.accordion:hover div {
display: block;
}
.accordion-body a {
background-color: green;
display: block;
color: white;
padding: 25px;
text-align: center;
}
.headA a {
text-align: center;
display: block;
background-color: yellow;
padding: 25px;
}
jQuery code;
$(document).ready(function() {
// on page load hide accordion body
var accordionBody = $('#accbody');
accordionBody.hide();
// first make on click event happening
// when user clicks on "Head" accordion "Body will show up"
$('.headA').click(function() {
if (accordionBody.is(':hidden')) {
accordionBody.slideDown(400);
} else {
accordionBody.slideUp(400);
}
});
$('.headA').hover(function() {
if (accordionBody.is(':hidden')) {
accordionBody.slideDown(400);
} else {
accordionBody.slideUp(400); // turn this off if you want only to slide down and not back up
}
});
});
This is the basic structure of my jsp page.
<div><span><span> </span</span></div>
The content of the innermost span tag is hidden by default. When I hover over the content of the outer span tag, it should display the content of the innermost span tag. When I run this in IE8, it successfully hides the inner span tag but when I hover over the outer span tag, it doesn't display the inner span content.
However when I run the same thing in Firefox, it works like a charm. What can I do to make it work in IE8?
This is the jsfiddle link that I created with the generated html link
Note: If I change the outer span to link(a) tag, it works in IE. But I have to use span tag.
jsp page
<div id="tooltip1">
<span id="<%=i %>" class="content"
onmouseover="this.style.color='#F50A16';showStopsInfoPopup('<%=stop %>', <%=i %>)"
onmouseout="this.style.color='#050505'"
onClick="search(this)" value=<%=stop %>>
<%=stop %>
<span id="stopsInfo<%=i%>">Hi</span>
</span>
</div>
css
#tooltip1 { position: relative; }
#tooltip1 span span { display: none; color: #FFFFFF; }
#tooltip1 span:HOVER span {display: block;
position: absolute;
background-color: #aaa;
color: #FFFFFF;
padding: 5px;
height: 10px}
javascript
function showStopsInfoPopup(stop, index){
jQuery(function($) {
$("#stopsInfo"+index).load("showStopsInfoPopup.do?stop="+stop);
});
}
I guess this could be done in a much easier way using jQuery as shown below:
$(".content").on("mouseover", function(){
$(this).find("span").show();
});
$(".content").on("mouseout", function(){
$(this).find("span").hide();
});
HTML:
<div>
<span class="content">
<span id="stopsInfo<%=i%>">Hi</span>
</span>
</div>
:hover just won't work in older browsers, except with the a tag. If you have to use a span tag, then you'll need to add both span and a. This is how most menus work.
In your case:
<div><a><span>default text <span>(hover text)</span></span></a></div>
And the css:
a {text-decoration:none;}
a span span {display:none;}
a:hover span {display:inline;}
Demo here: http://jsfiddle.net/cV4qp/
The alternate option is to use JavaScript instead of css.
Because that pseudo selector supported with CSS3 and before that it is only for a tag. That s why a tag is working on IE as well. To support this you should attach mouseover and mouseout event for IE browser you can do that easily with a hack and jquery.
Just added simple changes to JS and css It should do the trick.
JS and hack only for IE
$(document).ready( function () {
$("#tooltip1 span.content").hover(
function () {
$(this).toggleClass("hover");
});
});
CSS
#tooltip1 { position: relative; }
#tooltip1 span span { display: none; color: #FFFFFF; }
#tooltip1 span:HOVER span { display: block;
position: absolute;
background-color: #aaa;
color: #FFFFFF;
padding: 5px;
height: 10px}
.hover
{
color:red;
}
.hover span
{
display:inline;
color: blue !important;
}
http://jsfiddle.net/7s4Np/7/