Changing css on span click - javascript

I have a 3 spans I use to navigate to 3 different pages, they basically act like buttons for me, only a plugin I use require them to be spans (why I cant use buttons, so dont tell me to use buttons instead).
What I want to do is change background color on the clicked span, so if I am on page 3, span 3 is green for instance, and when I click on another span, that one changes and the previous green span goes back to normal.
Any idea on how to do this either in js,html or css?

This is easily achieved with jQuery.
jQuery
$('span').on('click', function() {
$('span').removeClass('active');
$(this).addClass('active');
});
CSS
span {
background: #c1c1c1;
display: block;
width: 100px;
height: 25px;
float: left;
}
span.active {
background: green;
}
html
<span class="active">one</span>
<span>two</span>
<span>three</span>
<span>four</span>
This just adds the class active to the clicked element while removing any active before.
JSFIDDLE

Related

How do I remove the class from the navbar button when a new link is selected [Javascript]

I am trying to make an active state on my link when clicked, which remains until another link is clicked. I'd like to have the class removed and transferred to the next link when clicked.
Currently it can be toggled on and off on each link.
// navbar toggle for active state
document.getElementById('navbar__list').addEventListener("click", function(event){
event.target.classList.toggle('funcElemStyle');
});
.funcElemStyle {
background: #333;
}
Instead of using javascript to achive this functionality, you can use CSS to achieve the same effect by using :active.
for example:
/* Selects the link element. */
a:active {
color: #4444AA;
}
you can also use :hover if you want effects when hovered. CSS also allows chaining so if you want an effect to apply when it is hovered over and active, you can use :active:hover
Instead of toggle use .add() and .remove() functions. Run snippet for an example.
document.querySelector("div").addEventListener("click", event=>{
event.target.classList.remove("red")
})
div{
width: 100px;
height: 100px;
background: green;
}
.red{
background: red;
}
<div class="red"></div>

CSS/JavaScript - Adding the :focus state when an element is hovered

So I have a navigation bar using standard Bootstrap 3 classes and structure, recently I wanted to see if you could open the drop down menus on hover.
I did some searching and found this snippet:
.dropdown:hover .dropdown-menu{
display: block;
}
This opens the menu on hover, which is great (without having to toggle .dropdown-toggle
My issue is that my .dropdown-toggle has a focus state, which only happens when focus is given to the element, so when I hover and the menu opens my hover state is never applied, as I do not have to click on the top menu item anymore.
So the question is: is there a way to force the :focus state when :hover is active?
I tried to do this:
.dropdown:hover #home .dropdown-toggle:focus{
background: #00aaff;
border: #00aaff 1px solid;
}
So basically on hover add styles to the focus, but I think what I actually need to do is add the :focus class on :hover so is this more a JavaScript thing?
$(".dropdown").hover(function(){
$('#home .dropdown-toggle').focus();
});
And in css
#home .dropdown-toggle:focus{
background: #00aaff;
border: #00aaff 1px solid;
}
when the focus is on, the css gets apply.
I see it as 'a JavaScript thing'. You can attach a 'mouseover' event to the menu, which, when triggered, will change the menu's CSS and the CSS of the .dropdown-toggle element.
I do not think it makes a lot of sense to trigger "focus" state for CSS modification if you are using JavaScript (in this particular example, I will use JQuery library).
A simple example: https://jsfiddle.net/matu2vd6/5/
HTML:
<div class='dropdown'>My dropdown element.</div>
<div class='dropdown-toggle'>My dropdown-toggle element.</div>
JS/JQUERY:
let dropDownEl = $(".dropdown");
let dropDownToggleEl = $(".dropdown-toggle");
dropDownEl.on("mouseover", function() {
dropDownToggleEl.css({"background": "#00aaff",
"border": "#00aaff 1px solid"});
});
dropDownEl.on("mouseout", function() {
dropDownToggleEl.css({"background": "transparent",
"border": "none"});
});

Changing the color of a text in a link on hover

I have the following html and css:
http://jsfiddle.net/5hX6S/
The idea is to have a list of items which are links and then when the user scrolls over the list item it lights up in a different color and the color of the text inside changes to white.
You can see how it all looks in the jsfiddle above, my problem is that the whole item's background does change into orange but the text does not. The text only changes if you scroll directly above it, which is not enough. I'd also like to make the whole list a link, not just the text inside of it.
I tried putting a div, span, nothing inside of the list and moving that class that you see around using the following css:
.side_menu_link:hover {
background: #ff7200;
color: #fff !important;
}
But nothing works. The only thing that succeeded so far was moving the 'a' tags outside of the 'li' tags but as far as I'm concerned that's not the right way to do it syntax wise. So any suggestions?
Here you are
http://jsfiddle.net/iamnotsam/5hX6S/4/
You needed to replace this
a:hover {
text-decoration: none;
color: #fff;
}
with this
#left_menu ul li:hover a {
text-decoration: none;
color: #fff;
}
Are you trying to have the hover effect on the link? Or the list itself? If you want the link to change color on hover then in your CSS have
.side_menu_link a:hover {
color: color;
}
etc.
You want
.side_menu_link:hover a { ... }
^^^--- note this
instead, so that the new background color applies ONLY to the <a> tag, not the entire <div class="side_menu_link">.
a:hover{color:red;background:green}
Home

Send to back functionality in HTML5

I'm having the following use case that I want to achieve in HTML
I've two div element with background red and blue. The blue div is added later of which a part overlaped with red div.
I have the option of "send to back" which sends the selected div to back of other div.
If I apply this to blue div and select blue div it should look like below image
Basically I'm trying to minic the functionality of Arrange --> Order --> Send to back of Google Presentation
I did try z-index with no success. I can use background-gradient with the overlaped part of blue div transparent but that will invole some calculations which I want to avoid.
How to acheive this in HTML?
Any help is appreciated.
Note: All div elements are placed with position: absolute
Update: The red div lies above the blue div as its z-index is higher than blue div. When red div is selected it should look like below (with border highlighted).
Now if I select the blue div a part of it that overlapes with red div does not appear (obviously since its z-index is lesser) but I want its border to appear when I select.it.
As you've commented, I guess what you need is this, also, just call a class on a div which you want to stack up.
Final Demo
I am not getting your question quiet well, but I assume you want to bring an element above another when it is clicked, than you can do it this way
Demo
Explanation:
What am doing here is, am simply applying z-index on the div you click using jQuery.
Demo 3 (As you updated your question)
Using border to mark the current selected div
$(".wrap div").click(function(){
$('.wrap div').removeAttr('style');
$(this).css({"z-index":"1", "border":"1px solid #000"});
});
Demo 2
Code Reference :
$(".wrap div").click(function(){
$(this).css("z-index","1");
});
.wrap {
position: relative;
}
.wrap div {
position: absolute;
height: 100px;
width: 100px;
}
.wrap div:nth-of-type(1) {
background: #f00;
left: 10px;
}
.wrap div:nth-of-type(2) {
background: #0f0;
left: 80px;
}
<div class="wrap">
<div></div>
<div></div>
</div>

Icon to move when hovering over a menu button

Before you read this please get up this website to see what I am trying to do:
https://www.kris-willis.com
As you can see there is a RED arrow located below the menu and what it is that I'm trying to achieve is... when I hover over a menu button the arrow moves to the same button I'm hovering over without reloading the page.
Ideally I'd like the arrow to move back to a default button.. and also for the default button to change if clicked on a different menu button.
If you know any links to examples etc... I would really appreciate it!
Thank you for your time,
Kerry x
The first thing is that you have a wrong DOCTYPE.
<!DOCTYPE html PUBLIC "">
This causes you page to load in quirk mode. Change it to
<!DOCTYPE html>
for HTML5 or use the complete one including the FSI & FPI.
Second is you are using a <table> for navigation. Nothing seriously wrong with it but people tend to use ul
For the :hover, you can simply use
#MenuPosition table tbody tr td:hover
{
background-image: url("/images/Arrow.jpg");
}
You might have to play with paddings and margins or maybe use display: block or display: inline-block to position the arrow correctly.
Make the "buttons" anchors. Using css set create a rule for :hover to set a background image that contains the arrow.
There are plenty of CSS tutorials out there, Nettuts and Webdesigntuts have a lot of navigation articles. Or if you are comfortable with emulating others, find a site you like and pick apart the source until you figure out how they did it.
Keep in mind that javascript is not at all necessary to accomplish what you are doing. Unless you want some animations, and even then CSS can handle most of that work, pure CSS in my opinion is the better approach.
PURE CSS SOLUTION
Check this answer.
Is there any way to hover over one element and affect a different element?
So it might be:
#thething {
margin: 0;
}
.classone:hover + #thething {
margin-top: 10px;
margin-left: 10px;
}
If they're adjacent siblings in a parent div.
Just move the arrow bymargin-left with respect to left of the td DEMO
$("#Arrow").css({"margin-left":$(this).position().left+($(this).width()/2)-2});
Tp do this Add jQuery libirary to the head section of your page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Add this code in a external js file and add it to head section of your page
$(function(){
$("#MenuPosition").on("hover","td",function(){
$("#Arrow").css({"margin-left":$(this).position().left+($(this).width()/2)-2});
});
});
EDIT : For restoring the arrow orignal position use
$(function(){
currentPos = $("#Arrow").css("margin-left");
$("#MenuPosition").on("hover","td",function(){
$("#Arrow").css({"margin-left":$(this).position().left});
});
$("#MenuPosition").on("mouseout","td",function(){
$("#Arrow").css({"margin-left":currentPos});
});
});
NOTE : PLEASE SEE THE CALCULATION PART AND CORRECT IT.
PS: cant correct is because its my log out time from office ;) . but i thing you got the logic to do it
You can do something like this:
Using a span to add the bg arrow below the nav/menu lis in the HTML:
<ul class="nav">
<li>
Menu 1
<span class="arrow"> </span>
</li>
<li>
Menu 2
<span class="arrow"> </span>
</li>
</ul>
The CSS:
.nav {
font-size: anypx;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
}
.nav li {
background: #whatev;
display: block;
float: left;
height: anypx;
line-height: anypx;
padding: 0;
text-align: center;
}
.nav li a {
color: #any;
display: block;
padding: any;
position: relative;
text-decoration: none;
width: auto;
}
.arrow {
background: url("images/arrow.png") no-repeat scroll 0 9px transparent;
display: none;
height: anypx;
text-indent: -9999px;
width: whatevs;
z-index: 9999;
}
And Finally the JS/Jquery that makes it work:
$(document).ready(function(){
Your_menu();
});
function Your_menu(){
$(".nav li").hover(function(){
$(this).find('.arrow').css({visibility: "visible",display: "none"}).show();
},function(){
$(this).find('.arrow').css({visibility: "hidden"});
});
}
Here is a site that is showing this :)
http://www.drexelmedicine.org/

Categories

Resources