Develop Reference

Add class to a div if another div has a class

I did a lot of searching and read dozens of questions and answers on this topic and wrote the following code but it won't work for some reason. I'm looking for help troubleshooting this.
This is what I want to happen:
When the user hovers over a menu item, a dropdown appears.
Then the entire header (currently has the ID #header) gets a new class (.header-new-class)
I found that when they hover over a menu item (li), the site automatically adds the class "open" to the menu item (the menu item already has the class .menu-item)
So my logic is, when the menu item has the class "open", it adds the class "header-new-class" to the div with the ID #header
This is a very cleaned up version of the HTML:
<div ID="header">
<div>
<div>
<div>
<div>
<div>
<nav>
<nav>
<div>
<div>
<ul>
<li class="menu-item open">
</li>
</ul>
</div>
</div>
</nav>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
This is the code I wrote:
$(document).ready(function(jQuery) {
if ($('.menu-item').hasClass('open')) {
$('#header').addClass('header-new-class');
}
});
It's not working. What am I doing wrong?
Thanks in advance.

if you want to add a class on the header when the mouse is on the menu item, do it like this,
if you also want to remove the class then use the commented code below.
if you have questions, feel free to ask
$(document).ready(function(){
$('.menu-item').on('mouseover',function(){
/*$('.menu-item').removeClass('open');
$(this).addClass("open");*/
if($(this).hasClass('open')){
$('#header').addClass('yourNewClass');
}else{
$('#header').removeClass('yourNewClass');
}
});
/*$('.menu-item').on('mouseleave',function(){
$('.menu-item').removeClass('open');
$('#header').removeClass('yourNewClass');
});*/
});
.yourNewClass .menu-item.open {color: red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ID="header">
<div>
<div>
<div>
<div>
<div>
<nav>
<nav>
<div>
<div>
<ul>
<li class="menu-item open">
item 1
</li>
<li class="menu-item">
item 2
</li>
<li class="menu-item">
item 3
</li>
</ul>
</div>
</div>
</nav>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>

You can use same event many times. So, this is achievable with normal .hover.
$(document).ready(function(){
$('.menu-item').hover(function(){
$('#header').addClass('header-new-class');
},function(){
/* function to remove class when hovering is over */
})
If you absolutely need to check if the class open is present you can do it inside the hover function.
You can also use mouseenter and mouseleave
$(document).on({
mouseenter: function () {
//stuff to do on mouse enter
},
mouseleave: function () {
//stuff to do on mouse leave
}
}, ".selector");

Why you are set class for hover via jquery. CSS have functionality of :hover which give the same effect that you want.
#header:hover{
background-color : lightBlue;
}
.menu-item:hover{
color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ID="header">
<div>
<div>
<div>
<div>
<div>
<nav>
<nav>
<div>
<div>
<ul>
<li class="menu-item">
Sample Link 1
</li>
<li class="menu-item">
Sample Link 2
</li>
<li class="menu-item">
Sample Link 3
</li>
</ul>
</div>
</div>
</nav>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>

Show first div on page load and hide others and then show the rest on click of the menu items

I am working on a menu where on click of the navigation items, the div will be shown, but by default, the first div should be shown and rest hidden. They should be seen only on click of other navigation items.
Below is my code that I have tried so far.
The HTML:
<ul id="menu">
<li class="page_item current_page_item justClick">a</li>
<li class="page_item page-item-2 justClick">b</li>
<li class="page_item page-item-2 justClick">c</li>
<li class="page_item page-item-2 justClick">d</li>
<li class="page_item page-item-2 justClick">e</li>
<li class="page_item page-item-2 justClick">f</li>
<li class="page_item page-item-2 justClick">g</li>
<li class="page_item page-item-2 justClick">h</li>
<li class="page_item page-item-2 justClick">i</li>
</ul>
<div class="content">
</div>
<div class="content1">
cccc1
</div>
<div class="content2">
cccc2
</div>
<div class="content3">
cccc3
</div>
<div class="content4">
cccc4
</div>
<div class="content5">
cccc5
</div>
<div class="content6">
cccc6
</div>
<div class="content7">
cccc7
</div>
<div class="content8">
cccc8
</div>
<div class="content9">
cccc9
</div>
The Script:
$('.justClick').bind('click', function() {
$('div.content').html($('div.content' + ($(this).index()+1)).html());
});
The CSS:
.content {
background-color: red;
}
The JSFiddle link:
http://jsfiddle.net/6uzU6/
I am getting to achieve the onclick functionality on the click of navigation items on click of them, but all the div's are visible.
What I want, is that all the div's except first div (with the class .content) should be hidden and when you click on the navigation items, it should show up.

Try this:
$('div').not(".content,.content1").hide();
$('.justClick').bind('click', function() {
$('div').not(".content").hide();
$('div.content').html($('div.content' + ($(this).index()+1)).html());
});
DEMO

It seems like there is something missing in your code because there is no relation between the links and div you want to show. you will require more attributes on to maintain a relations between them.
A better approach would be apply a common class to all div like 'content-block' and class equal to use following code.
$(".content-block:not(:first)").hide();
and show respective div on click on link
$("#menu li").click(function(e){
$(".content-block").eq($(this).index()).show();
});
you can use other parameters as well to relate them instead of index.

Give attribute to div runat="server" and Id="dv1"
using property display block and none u can show or hide it

divide header into columns in jquery using css

I want to divide header into three columns for three images. but they overlap.
How do i divide div header into three columns.
This is my code:
<div data-role="page" id="loginpage" class="loginbody">
<div data-role="header" style="background-image:url('images/Login/header_bg.PNG');">
<img id="headerselect" alt="" src="images/Login/.PNG" class="ui-btn-left"></img>
<img alt="" src="images/Login/.PNG"></img>
<img alt="" src="images/Login/.PNG" class="ui-btn-right"></img>

If the images are static (always the same 3 images) the best idea is to fuse all of them so that you have to include only one image.
If they change from time to time, you could insert 3 divs inside the header, all of them with 'float:left'
Please tell me if you need it explained a little more

Give display: block to img tags in the header, and use float: left to make columns.
[data-role="header"] img {
dispaly: block;
float: left;
}
Check the DEMO here.

Here is a great way of positioning any elements in the header:
HTML:
<div data-role="header" id="header" style="background-image:url('images/Login/header_bg.PNG');">
<ul>
<li><img id="headerselect" alt="" src="images/Login/.PNG" class="ui-btn-left" /></li>
<li><img alt="" src="images/Login/.PNG" /></li>
<li><img alt="" src="images/Login/.PNG" class="ui-btn-right" /></li>
</ul>
</div>
and the CSS:
#header ul li {
display: inline;
}
allows you to position with ease as well!
Here's a fiddle: http://jsfiddle.net/DJSrA/4H5qs/

how to set image dynamically to li tag using jquery

i have jquery slider. this slider has images and thumb nails of those images. i would like to replace images and thumbnails respectively which comes from jquery ajax call.
this is my slider code:
<ul id="thumbs" class="slides">
<li id="firstthumb" data-thumb="images/s/img8.jpg">
<img id="firstimage" src="images/s/img8.jpg" />
</li>
<li id="secondthumb" data-thumb="images/s/img10.jpg">
<img id="secondimage" src="images/s/img10.jpg" />
</li>
<li id="thirdthumb" data-thumb="images/s/img9.jpg">
<img id="thirdimage" src="images/s/img9.jpg" />
</li>
<li id="fourththumb" data-thumb="images/s/img11.jpg">
<img id="fourthimage" src="images/s/img11.jpg" />
</li>
<li id="fifththumb" data-thumb="images/s/img3.jpg">
<img id="fifthimage" src="images/s/img3.jpg" />
</li>
</ul>
I have replaced images with following code:
$('#firstimage').attr('src', message[22]);
$('#secondimage').attr('src', message[23]);
$('#thirdimage').attr('src', message[24]);
$('#fourthimage').attr('src', message[25]);
$('#fifthimage').attr('src', message[26]);
here message[22]... are urls of images. its working perfectly. but i don't know how to replace thumb nails images. give me some idea. thank you.

Can you try this,
$('#firstimage').attr('src', message[22]).data('thumb', message[22]);

Try this
$('#firstthumb').data('thumb', message[22]);
OR
$('#firstthumb').attr('data-thumb',message[22]);

simple jquery slider menu

I am trying to achieve a simple menu slider that works like this:
$(document).ready(function() {
// hide slider images on page load \\
$('.sImage1, .sImage2,.sImage3, .sImage4').hide();
// slide sImage1 on page load\\
$('.sImage1').delay(500).slideDown(1000);
// provide slider image click functionallity \\
$('.sOpen1').click(function() {
// close any already open images \\
$('.sImage2, .sImage3, .sImage4').slideUp(500);
// open/close sImage1 \\
$('.sImage1').stop().slideToggle(500);
}); //end click 1
$('.sOpen2').click(function() {
$('.sImage1, .sImage3, .sImage4').slideUp(500);
$('.sImage2').stop().slideToggle(500);
}); //end click 2
$('.sOpen3').click(function() {
$('.sImage1, .sImage2, .sImage4').slideUp(500);
$('.sImage3').stop().slideToggle(500);
}); //end click 3
$('.sOpen4').click(function() {
$('.sImage1, .sImage2, .sImage3').slideUp(500);
$('.sImage4').stop().slideToggle(500);
}); //end click 4
}); // end ready
html:
<div id="menuSlider">
<ul>
<li class="sOpen1">Course Information</li>
<li class="sImage1"><img src="#" /></li>
<li class="sOpen2">Membership</li>
<li class="sImage2"><img src="#" /></li>
<li class="sOpen3">Equipment</li>
<li class="sImage3"><img src="#" /></li>
<li class="sOpen4">Golf Lessons</li>
<li class="sImage4"><img src="#" /></li>
</ul>
</div>
At the moment I only have 4 images to display but it could become 10 or more and so im guessing there is an easier way of achieving the same without so many lines of code?
I'm still learning javascript and jquery, but if some could point me in the direction of a good tutorial on how to achieve the same using an array or similar, it would be much appreciated.

You could reduce this to :
$(document).ready(function() {
$('.sImage').hide();
$('.sImage:first').delay(500).slideDown(1000); //slide down the first image
$('.sOpen').click(function() { //register the handler for .sOpen as a common click event
$('.sImage')
.not(
$(this).next().slideToggle(500) //SlideUp other images except the one next to the clicked element which will be slideToggled
).slideUp(500);
});
});
changing your markup: (Remove the indexes on the classes for the trigger as well as the content li elements)
<div id="menuSlider">
<ul>
<li class="sOpen">Course Information</li>
<li class="sImage"><img src="#" /></li>
<li class="sOpen">Membership</li>
<li class="sImage"><img src="#" /></li>
<li class="sOpen">Equipment</li>
<li class="sImage"><img src="#" /></li>
<li class="sOpen">Golf Lessons</li>
<li class="sImage"><img src="#" /></li>
</ul>
</div>
With this you can add as many number of new items without changing/adding new classnames, handlers etc.
Demo
See
.next()
.not()

try looking here:
www.w3schools.com/jquery/jquery_animate.asp
www.w3schools.com/css3/css3_animations.asp

Perhaps even easier would be, if you simply use jQuery's UI Accordion.
Then you could have simply:
$(function () {
$("#menuSlider").accordion();
});
and then (using h and div tags):
<div id="menuSlider">
<h3>Course Information</h3>
<div>
<img src="#" />
</div>
<h3>Membership</h3>
<div>
<img src="#" />
</div>
<h3>Equipment</h3>
<div>
<img src="#" />
</div>
<h3>Golf Lessons</h3>
<div>
<img src="#" />
</div>
</div>