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.
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.
So fair warning, I'm a novice when it comes to most things-JS.
I'm working on a unique project wherein I am customizing the visual appearance of a sub-section of a website for a product my company owns. I cannot alter the HTML code of the pages (for reasons above my pay-grade), so everything I'm adding/changing is being done through a combination of JS and CSS.
My issue is that I have created a series of buttons which I have organized into a group in CSS. I am placing the buttons on the page using JS, with functions for what each button is supposed to do (generally just navigating to a URL), and then further modifying the location of the button group via CSS. I was able to do this easily enough when the buttons were not grouped using CSS, but then I realized I needed the buttons organized seamlessly next to each other, while using the margin-left property to slide the group as a whole to a specific part of the page.
The JS code looks like this:
<script type="text/javascript">
$( document ).ready(function() {
$('#productToolbar').append('<button onclick="goHome()" class="toolbar-btn">Home</button>');
}
);
function goHome() {
window.location.href = 'https://www.home-page.org/';
}
$( document ).ready(function() {
$('#productToolbar').append('<button onclick="contact()" class="toolbar-btn">Contact Us</button>');
}
);
function contact() {
window.location.href = 'https://www.home-page.org/contact/';
}
The CSS looks like this:
.toolbar-btn-group .toolbar-btn {
display: inline-block;
padding: 15px 25px;
font-size: 10px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #ffffff;
background-color: #780a29;
border: none;
float: left;
}
.toolbar-btn-group .toolbar-btn:hover {background-color: #490619
}
.toolbar-btn-group {
margin-left: 25%;
}
The output result is just generic buttons with no styling, and not on the screen where I want them (they're appended correctly, they just aren't sliding to the right due to the lack of CSS stlying). They function correctly, but that's it.
If I've understood my own code correctly, what's happening is that the JS is creating the buttons, assigning them as the toolbar-btn class, and appending them to the #productToolbar div. They are not receiving the .toolbar-btn CSS styling, because they are a child of the .toolbar-btn-group class.
What I don't know how to do though, is write JS code that will create the group of buttons with the requisite number of buttons that will receive the CSS styling (assuming it's possible).
The easiest solution, assuming this doesn't mess up other layout in the page, would be to add that .toolbar-btn-group class to the container while you're at it:
$(document).ready(function() {
$('#productToolbar').append('<button onclick="goHome()" class="toolbar-btn">Home</button>');
$('#productToolbar').append('<button onclick="contact()" class="toolbar-btn">Contact Us</button>');
$('#productToolbar').addClass('toolbar-btn-group'); // <-- here
});
.toolbar-btn-group .toolbar-btn {
display: inline-block;
padding: 15px 25px;
font-size: 10px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #ffffff;
background-color: #780a29;
border: none;
float: left;
}
.toolbar-btn-group .toolbar-btn:hover {
background-color: #490619
}
.toolbar-btn-group {
margin-left: 25%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="productToolbar"></div>
If that would cause problems -- i.e. if you don't want some or all of the toolbar-btn-group styling to affect the product toolbar -- you may need to just duplicate the CSS specifically for the product toolbar element:
#productToolbar .toolbar-btn {
display: inline-block;
padding: 15px 25px;
/* ...etc... */
}
Far from ideal, of course, but so's the whole situation. (I sympathize. Been there too.)
Hi I have a div with the following styling:
#lists li {
width: 580px;
background: #FFD586;
margin-bottom: 5px;
padding: 10px;
list-style: none;
line-height: normal;
text-align: left;
margin-left: 40px;
font-size: x-large;
overflow: scroll;
}
I want to make the div draggable, however the content within the div is being pulled in from my database, and I cannot seem to get the content to be draggable.
Any suggestions?
give that list element class name or use id and make it draggable, here the jquery code:
$( ".draggableclass").draggable(); //$( "#yourid").draggable();
$( ".droppableclass" ).droppable({ //same here
accept:".draggableclass",
drop: function( event, ui ) { //function that will activate after dropping
}
});
If you don't need droppable function, just use draggable and you'll be able to drag it anywhere.
Try Jquery, it's easy to use, see more here:
http://jqueryui.com/draggable/
Like this:
$(document).ready(function() {
$('#lists').draggable();
});
Or see this in action here: http://jsfiddle.net/9axcg/
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>
===UPDATE===
If I remove the style="display: none; from the template and apply the below method as recommended below, the empty container fires when you click on any other list item. What else can be done?
I have an ul list that is dynamically created at run time using jQuery and JSON (Using inline HTML is a template). I need the background CSS style to change when a user clicks on a list item (#navItem). I've tried everything under the moon that I can think of from inline class to .appentTo(), etc. What I have below works fine for hard-coded elements but Nothing seems to work with dynamically loaded content. Whats even more confusing is that the classes in the elements within the li tag initiate...???
Any help would be appreciated. Below are my code snippets. Thnx.
HTML:
<div id="navScrollContainer" class="navContentPosition">
<ul id="navContent">
// Display as 'None' to prevent a empty containter from showing -->
<li id="navItem" class="ulFx" style="display: none;">//<-THIS NEEDS TO CHANGE ONCLICK!!
<a class="navA">
<h1 class="navH1">.</h1>
<h2 class="navH2">.</h2>
<p class="navP">.</p>
<hr class="navHR" />
</li>
</ul>
</div>
<script type="text/javascript">
$('#navScrollContainer').on('click', '.ulFx', function() {
$(this).addClass("liFx");
});
</script>
This is the Function that injects the data into the DOM as a list:
function loadNav(url, container, appendE) {
$.getJSON(url, function(data) {
$.each(data.items, function() {
var newItem = $('#' + container).clone();
// Now fill in the fields with the data
newItem.addClass('ulFx');
newItem.find("h1").text(this.label);
newItem.find("h2").text(this.title);
newItem.find("p").text(this.description);
newItem.find("a").attr("href", this.gotoURL);
newItem.children().appendTo('#' + appendE);
});
$('#navHeaderTitle').text(data.listTitle);
iniScroll('scrollNav', 'navScrollContainer');
var target = data.targetKey;
// transition("#" + pageName, "show");
});
};
The CSS that need to happen (only on that item) when the user clicks on a Item:
#-webkit-keyframes
liBG {from {
background-color: transparent
}
50% { background-color: rgba(51,102,255,0.15); }
to {
background-color: transparent
}
}
.liFx {
-webkit-animation-name: liBG;
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
}
The Class atributes given to the li items:
.navH1 {
font-size: 18px;
color: #FFA500;
text-decoration: underline;
font-weight: bold;
margin-top: 8px;
margin-bottom: 8px;
margin-left: 15px;
}
.navH2 {
font-size: 16px;
color: #999999;
font-weight: bold;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 25px;
font-weight: bold;
}
.navP {
color: #888;
font-size: 14px;
text-align: justify;
margin-top: 5px;
margin-bottom: 16px;
margin-left: 25px;
margin-right: 10px;
}
.navA {
text-decoration: none;
}
.navHR {
border: none;
background-color: #336;
height: 1px;
}
This will watch for dynamic elements:
$(".liFx").live("click", function() {
$(this).addClass("liBG");
});
Without seeing your click handler, I can only speculate. However, generally when the problem is related to dynamic content and having them respond to stimulus, the problem lies in how you are attaching the handler.
If you use .click(), or .trigger('click'), the handler will be applied directly to the elements you are calling these functions on. That means that if the elements do not currently exist, they will not receive a handler.
The way to get around this, is to attach the event listener to a parent element that will always exist and then watch for the event propagating up from the dynamic child element. You could do this manually, by looking at the event.target, but jQuery, as usual, makes this easy for us.
The modern jQuery way of doing this is using .on() (documentation):
$('#someparent').on('click', '#childselector', function() {
// my handler code
});
jQuery then attaches a handler on #someparent, and when it sees a click that was targeted at #childselector, it fires.
If you want to apply a class to a child of #navContent, and #navContent will always exist, do this:
$('#navContent').on('click', 'li', function() {
$(this).addClass("liFx");
});
If #navContent is dynamic too, simply go higher in the DOM tree.
As a side note, I notice that the li has an id of navItem. This sounds an awful lot like a class, rather than an ID. If you are going to have more than one navItem, they cannot all have the same ID. This is what classes are for:
<li class="navItem liFx" style="display: none;">
I am not sure where is the problem, but you are trying to do something as such:
$("#navlink").on('click', function() {
$("#yourselector").css("backgroundColor", "#ddd"); //change the color
});
I added another div and an addClass() method to my function along with Jeff B's answer above. If the class is hard coded into the tag, it doesnt function.
<ul id="navContent">
<li id="navItem" style="display: none;">
<div>//ADDED THIS TAG TO EXCEPT THE CLASS
<a>
<h1>.</h1>
<h2>.</h2>
<p>.</p>
<hr/>
</a>
</div>
</li>
</ul>
In my js file:
$.each(data.items, function() {
var newItem = $('#' + container).clone();
// Now fill in the fields with the data
newItem.find("div").addClass("ulFx");//ADDED THIS METHOD
newItem.find("h1").text(this.label);
newItem.find("h2").text(this.title);
newItem.find("p").text(this.description);
newItem.find("a").attr("href", this.gotoURL);
newItem.children().appendTo('#' + appendE);
});