Select/edit all children elements inside a div - javascript

How can I use jquery or css to assign a .class to all elements inside a div?
i.e this is what I have
<div class="nav">
one
two
</div>
But this is what I want
<div class="nav">
one
two
</div>
Using as little code as possible, so that when the page loads, the elements in .nav have the class "test" assigned to them and I don't have to assign it in every single

You can achieve this by following code
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div>
one
two
</div>
</body>
<script type="text/javascript">
$(document).ready(function () {
$('div > a').addClass('test')
})
</script>
</html>

Pretty simple in jQuery: $('div a').addClass('class');
Or in JavaScript something like this:
let links = document.querySelectorAll("div a");
for(let link of links) {
link.classList.add("class");
}
.class {
text-decoration: none;
color: orange;
font-size: 50px;
margin-right: 100px;
}
<div class="nav">
one
two
</div>

$(document).ready(function() { $('.nav a').each(function(){ $(this).addClass("Test"); }) });
.Test{
color:red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
one
two
</div>

Related

Javascritpt change class to a div near to his grand-father

I want to dynamically change the class of the element #sidePanel from .compact to .expanded, in this code:
<div id="sidePanel" class="compact"></div>
<div id="topbar">
<div id="buttonContainer">
<div id="button"></div>
</div>
</div>
I'm stuck here, I can't apply the class to the correct <div>, I can just add the class to the topbar:
$(document).ready(function(){
$("#button").mouseover(function(){
$("this").parent().eq(2).addClass(".expanded").removeClass(".compact");
});
});
I also tried this:
$(document).ready(function(){
$("#button").mouseover(function(){
$("#sidepanel").addClass(".expanded").removeClass(".compact");
});
});
Your second example was pretty close. When you $.addClass() and $.removeClass(), or are referring to classnames outside of using a selector to target something, just reference the class name (no need for the leading .). Also JS (and CSS) are case-sensitive, so $('#sidepanel') won't target #sidePanel - the cases need to match.
$("#button").mouseover(function() {
$("#sidePanel").addClass("expanded").removeClass("compact");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>.expanded {color: red;}</style>
<div id="sidePanel" class="compact">sidepanel</div>
<div id="topbar">
<div id="buttonContainer">
<div id="button">button</div>
</div>
</div>
In your first example, $(this) is how you reference this in jQuery. If you put this in quotes, the word this is treated as a string literal instead. And since to use $.parent() you would need to go up 2 levels, you should use $.parents() with the ID of the parent you want to target, then use $.prev() to select the previous element, which is #sidePanel. So to traverse the DOM like that, this is how I would do it.
$("#button").mouseover(function() {
$(this).parents('#topbar').prev().removeClass('compact').addClass('expanded');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>.expanded {color: red;}</style>
<div id="sidePanel" class="compact">sidepanel</div>
<div id="topbar">
<div id="buttonContainer">
<div id="button">button</div>
</div>
</div>
Your problem is you used $("#sidepanel") instead of $("#sidePanel")
Here's a working example after the change is made:
$(document).ready(function(){
$("#button").on('mouseover', function(){
$("#sidePanel").addClass("expanded").removeClass("compact");
});
});
#topbar > div {
width: 100px;
height: 30px;
background: #ccc;
margin-top: 20px;
}
#sidePanel {
width: 100%;
height: 40px;
background: #ccc;
}
#sidePanel.expanded {
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidePanel" class="compact"></div>
<div id="topbar">
<div id="buttonContainer"></div>
<div id="button"></div>
</div>
first: the solution
$(document).ready(function()
{
$("#button").mouseover(function()
{
// class names - without the dot
$("#sidepanel").addClass("expanded").removeClass("compact");
});
});
then: why you were really close on your first attempt
$(document).ready(function()
{
$("#button").mouseover(function()
{
// $(this) selector uses the `this` keyword (not as a string)
$(this).parent().eq(2).addClass(".expanded").removeClass(".compact");
});
});

How can I style links I loaded from a txt file with the jQuery load() method into my HTML?

I'm trying to load some links from a text file into a navigation menu using the jQuery AJAX load() method. It's working fine when it loads the links but it won't let me apply an active class for the current link. It applies all the other CSS for the links but not the active class. Am I missing anything?
My HTML/jQuery:
<!DOCTYPE html>
<html>
<head>
$(document).ready(function(){
$('#cat-1-button').click(function(){
$('#sec-nav-container').show();
$('#sec-nav-items').load('textfile.txt #cat-1-items');
return false;
});
$('.subCat').click(function() {
$('.subCat').removeClass('active');
$(this).addClass('active');
return false;
});
});
</head>
<body>
<div id="sec-nav-container>
<div id="sec-nav-items> </div>
</div>
<button type="button" id="cat-1-button"> Click Here </button>
</body>
</html>
Textfile:
<div id="cat-1-items">
cat1-sub1
cat1-sub2
cat1-sub3
cat1-sub4
cat1-sub5
cat1-sub6
cat1-sub7
</div>
CSS:
.active {
padding-bottom: 2px;
border-bottom: 10px solid #6b00b3;
}
You may need to add rule for pseudo-element :visited
.active,.active:visited {
padding-bottom: 2px;
border-bottom: 10px solid #6b00b3;
}
DEMO
__
Check also your html , for example, you have here some issues :
<div id="sec-nav-container"> instead of <div id="sec-nav-container>
<div id="sec-nav-items"> instead of <div id="sec-nav-items>
try this replace instead $('.subCat').click(function()...
$('#sec-nav-items').on( 'click', 'a.subCat', function(){
$('.subCat').removeClass('active');
$(this).addClass('active');
return false;
})

Hold parent height after child element is toggled with pure CSS

I need to hold parent height after a child element is toggled.
The parent is a bootstrap panel. #big-menu is the child element.
div.content is the element which can modify its height.
I already have a javascript 'solution' (see resizeContent function).
I would to know if there is a CSS solution.
Plunker: http://plnkr.co/edit/tDYZ5YeppCtOgShw97Em
JSFiddle: https://jsfiddle.net/pedrobad/p2b3uufd/
<!doctype html>
</html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script type="text/javascript">
var opened = false;
function action() {
var hBefore = $('.panel').height();
if (opened){
$('#big-menu').hide()
} else {
$('#big-menu').show();
}
opened = !opened;
resizeContent(); // comment this line to see my issue
var hAfter = $('.panel').height();
$('#big-menu').html('BIG MENU <br/>hBefore: ' + hBefore + ' hAfter: ' + hAfter);
}
function resizeContent() {
if (opened){
$('.content').height(250); // 300 - 50
} else {
$('.content').height(300);
}
}
</script>
</head>
<body>
<div class='panel'>
<div class='panel-heading'><h2>Heading</h2></div>
<div class='panel-body'>
<div class='content' style="overflow-y: scroll; height: 300px; background-color: grey;">
<ul>
<li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li>
<li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li>
<li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li>
<li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li>
<li>foo</li><li>foo</li><li>foo</li><li>foo</li><li>foo</li>
<li>LAST ITEM</li>
</ul>
</div>
</div>
<div class='panel-footer'>
<div id='big-menu' style="height: 50px; display: none">MENU</div>
<button onclick='action()'>Show</button>
</div>
</div>
</body>
</html>
I don't totally understand what you're trying to achieve, but if you want a hidden element to still take up space inside its parent you can use visibility: hidden instead of display: none.
In JS you would need to add a class, for example 'visuallyhidden', to the element you want hide. Then apply styles to that class in CSS like:
.visuallyhidden {
visibility: hidden;
}

Toggle div using javascript

I'm trying to use this jsfiddle but it's not working offline. Can you please point out the error: http://jsfiddle.net/2ofkr7ph/
This is my code but it's not working on local.
<html>
<head>
<title>BUILD</title>
<style>
.menu > li {
display:inline-block;
font-weight:bold;
padding:6px 10px;
cursor:pointer;
border:2px solid tomato;
margin:5px;
}
.container {
border:2px solid black;
margin:5px;
}
.container > div {
display:none;
}
.container > div:first-child {
display:block;
}
</style>
<script>
var menu_elements = document.querySelectorAll('.menu>li'),
menu_length = menu_elements.length;
for (var i = 0; i < menu_length; i++) {
menu_elements[i].addEventListener('click', function (e) {
var target = document.querySelector('.container>.' + e.target.classList[0]); // clicked element
Array.prototype.filter.call(target.parentNode.children, function (siblings) {
siblings.style.display = 'none'; // hide sibling elements
});
target.style.display = 'block'; // show clicked element
});
}
</script>
</head>
<body>
<ul class="menu">
<li class="toggle1">One</li>
<li class="toggle2">Two</li>
<li class="toggle3">Three</li>
<li class="toggle4">Four</li>
<li class="toggle5">Five</li>
</ul>
<div class="container">
<div class="toggle1">Here are the contents of 1.</div>
<div class="toggle2">Here are the contents of 2..</div>
<div class="toggle3">Here are the contents of 3...</div>
<div class="toggle4">Here are the contents of 4....</div>
<div class="toggle5">Here are the contents of 5.....</div>
</div>
</body>
</html>
It's working fine on JSFiddle website, but not working on local machine.
The script is loaded and executed BEFORE the HTML elements are encountered. You can move the script to below the BODY tag and it works offline.
Good Luck!
Just add the script at the end of your , and then it'll work fine.
The contents inside the script tag need to be placed in some kind of function and the function needs to be called when the body loads, or else they won't run properly. Place all your Javascript code inside a load function like this:
<script>
function load() {
// rest of the code..
}
</script>
and then set the function to be called when the document loads:
<body onload="load()"> ...
Everything should then work properly.
The problem is not with your java script it is with the fact that you are writing your java script before your html.
This does not give JS enough time to load your html
An easy fix for this is to move your JS to the bottom or use something like document.ready()
I've changed Your code part with jQuery and it's sugar. It's more cross-browser solution and saves You time.
Use this:
<html>
<head>
<title>BUILD</title>
<style>
.menu > li {
display:inline-block;
font-weight:bold;
padding:6px 10px;
cursor:pointer;
border:2px solid tomato;
margin:5px;
}
.container {
border:2px solid black;
margin:5px;
}
.container > div {
display:none;
}
.container > div:first-child {
display:block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){
$('.menu>li.toggle').click(function(){
$('.togglable').hide();
$('.togglable[data-id="'+$(this).data('id')+'"]').show();
});
});
</script>
</head>
<body>
<ul class="menu">
<li class="toggle" data-id="1">One</li>
<li class="toggle" data-id="2">Two</li>
<li class="toggle" data-id="3">Three</li>
<li class="toggle" data-id="4">Four</li>
<li class="toggle" data-id="5">Five</li>
</ul>
<div class="container">
<div class="togglable" data-id="1">Here are the contents of 1.</div>
<div class="togglable" data-id="2">Here are the contents of 2..</div>
<div class="togglable" data-id="3">Here are the contents of 3...</div>
<div class="togglable" data-id="4">Here are the contents of 4....</div>
<div class="togglable" data-id="5">Here are the contents of 5.....</div>
</div>
</body>
</html>

JQuery - Changing active link color

I've got a small page with two links that load content into a div dependant upon which link is pressed.
Question is fairly obvious, i'd like to highlight the current content link with a different color and toggle the color according to which link is pressed.
I'm attempting to do this with my current function using the following however it isn't working:
Pretty simply question so i'm obviously being dumb. Any help would be much appreciated.
Thanks!
<script type="text/javascript">
function loadContent(id) {
$("#video").load("streams.php?o="+id+"");
$('active').removeClass('active');
$(this).addClass('active');
}
</script>
Full code:
<html>
<head>
<title>beam</title>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");
</script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function loadContent(id) {
$("#video").load("streams.php?o="+id+"");
$('active').removeClass('active');
$(this).addClass('active');
}
</script>
<style>
* { margin:0; padding:0; }
img{ border-style:none; }
html { height: 100%; }
body { height: 100%; font-family: "Tahoma", "Arial", sans-serif; font-size:15px; font-weight: bold;}
a {
color:#fff;
text-decoration: none;
}
.active {
color:#00d2ff;
}
.container {
position:absolute;
background:url("images/video-bg.jpg") no-repeat;
width:520px;
height:576px;
}
#video {
position:relative;
background:#000;
top:275px;
left:55px;
width:400px;
height:222px;
}
#stream-controller {
position:relative;
left:55px;
top:285px;
width:200px;
}
</style>
</head>
<body onLoad="loadContent(1);">
<div id="fb-root"></div>
<div class="container">
<div id="video">
</div>
<div id="stream-controller">
<p>STREAM 1 | STREAM 2</p>
</div>
</div>
</body>
</html>
One issue is your selector for the active link:
$('active').removeClass('active');
should be:
$('.active').removeClass('active');
The other issue, though I haven't tested this yet, is that I don't believe using href="javascript:loadContent(1);" will set the value of this in the function to the appropriate a element. If you're working with jQuery, you'd be better off setting the handler with jQuery, and passing the variable through the tag, something like:
<a class="stream active" href="streams.php?o=1">STREAM 1</a>
with the jQuery code:
$(function() {
$('a.stream').click(function(e) {
var $this = $(this);
$("#video").load($this.attr('href'));
$('.active').removeClass('active');
$this.addClass('active');
// prevent default link click
e.preventDefault();
})
});
Why don't you just do it in CSS?
a {
color:#fff;
text-decoration: none;
}
a:active {
color:#00d2ff;
}
editing out a part of my solution : ninja'd and a much better one from nrabinowitz
To toggle the "active" class to the link pressed, I would do this:
var $a = $("a");
$a.click(function() {
$a.removeClass("active");
$(this).addClass("active");
});

Categories