Develop Reference

Using jQuery or MutationObserver to change CSS of element when another CSS change is detected

I have a collapsible menu that has the following class when closed:
<div class="menu one collapse">
And the following class when opened:
<div class="menu one in collapse">
I want to use the MutationObserver or jQuery to monitor the collapsible menu class and change the following from
<div class="monitored-class three" style="display: block;">
to
<div class="monitored-class three" style="display: none!important;">
When the menu is open, and to revert the changes when the menu is closed.
I have been searching for the past hour for this and the closest I have come is JQuery Detect class changes but the suggested answer right at the bottom:
var mut = new MutationObserver(function(mutations, mut){
// if attribute changed === 'class' && 'open' has been added, add css to 'otherDiv'
});
mut.observer(document.querySelector(".slide-out-div"),{
'attributes': true
});
Does not have enough details and code for me to proceed. There is also a more comprehensive answer here:
https://stackoverflow.com/a/14570614/5619682
But it does not directly address what I need to do.
I'm thankful for any help! :)

There is acctually one way to handle this with CSS only, but it will work only if the DOM Elements are listed in a hirarchie.
You can trigger specific CSS Styles by setting up the wrapper CSS classes which will modify the Style in the Child Elements you want.
As an easy Example I will show you this Example.
It triggers the Menu Navigations though the Menu Class body.menu-open.
The Menu appears only if the class "menu-open" has been added to the body.
As the Body is the Major Element of all your Elements you can go in your CSS now and trigger your prefed "menu-open Style" with body.menu-open { .... }
I hope this will give you an Idea of CSS Animation and Triggering (or how is this called correctly?). I think something equivalent to this is your solution.
// Trigger Menus Toggle though CSS
$(document).on('click', '.magic_button', function(){
$('body').toggleClass('menu-open');
});
/* Global Hardreset */
* { padding:0px; margin:0px; }
/* Menu Wrapper */
.menu_wrapper {
display:block; height:50px; background:rgba(0,0,0,.3); position:relative; overflow:hidden;
}
/* Magic Button */
.magic_button {
display:block; width:40px; height:40px;
border-radius:50%; background: maroon;
position: absolute; top:5px; left:10px;
overflow:hidden; cursor:pointer;
}
/* Basic Setup and Styling */
.main_menu {
list-style:none; padding:0p; margin:0px;
display:block; text-align:center;
position:absolute; left:100%; top:0px; right:0px;
transition:all .3s; -moz-transition:all .3s; -webkit-transition:all .3s;
}
.main_menu li {
display:inline-block;margin:0px auto;
}
.main_menu li a {
background:darkseagreen; padding:18px 20px; color: #fff; line-height:50px;
text-decoration:none; font-family:Verdana; font-size:12px;
}
/*
* The CSS Statements for doing the Magic to Open / Close Menu.
* Notice: Acctually it would be generally better if you add thoose "check classes"
* into the Body, as the body is the major Element you can trigger from.
*/
body.menu-open .main_menu { left:0px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav class='menu_wrapper'>
<ul class='main_menu'>
<li><a href=#> First Link </a></li>
<li><a href=#> Second Link </a></li>
<li><a href=#> Magic Link </a></li>
<li><a href=#> Dungeon Entry Link </a></li>
</ul>
<div class="magic_button"></div>
</nav>

Firefox creates extra gap on slideToggle

Im having difficulties with Firefox and drop down menu.
It has of about 200 px gap under the drop down list created by slideToggle.
When inspected, that area is not taken by anything and completely blank/empty.
Chrome displays everything correctly.
Source is here http://stafter.com/demo
I have been fighting this for 2 days already playing around "display" and "margins".
Here is the main code stracture
JQuery CODE
<script type="text/javascript">
$(document).ready(function(){
$(".plus1").click(function(){
$(".open1").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".plus2").click(function(){
$(".open2").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".plus3").click(function(){
$(".open3").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
HTML CODE
<html>
<head></head>
<body>
<div id="wrapper">
<div id="container">
<div id="ul_wrap">
<div class="plus1">
<ul>
<li>one</li><li>two</li><li>three</li>
</ul>
<p class="open1"></p>
</div>
<div class="plus2">
<ul>
<li>one</li><li>two</li><li>three</li>
</ul>
<p class="open2"></p>
</div>
<div class="plus3">
<ul>
<li>one</li><li>two</li><li>three</li>
</ul>
<p class="open3"></p>
</div>
</div>
</div>
<div id="push"></div>
</div>
<div id="footer"></div>
</body>
<html>
CSS
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -77px;
padding:0;
}
.footer, .push {
height: 77px;
clear:both;
}
.footer{
width:100%;
background: url('../images/bottom_bg.jpg') repeat-x 0 0;
position:relative;
margin:auto;
}
.container {
width:800px;
min-height:400px;
margin:auto;
margin-top:20px;
margin-bottom:20px;
padding:30px;
}
#ul_wrap {
position:relative;
margin-bottom:-100px;
clear:both;
}
#ul_wrap ul{
display:inline-block;
position:relative;
left:-20px;
padding:5px 0px 0px 10px;
background-color:#FFFFFF;
border:1px solid #FFFFFF;
clear:both;
height:27px;
}
#ul_wrap li{
font-size:16px;
text-align:left;
float:left;
list-style:none;
}
.one{
width:40px;
}
.two{
width:410px;
}
.three{
width:88px;
}
.open1, .open2, .open3{
margin:-5px 0 20px 0;
position:relative;
font-size:12px;
display:none;
}
PLEASE NO COMMENTS LIKE I FORGOT TO CLOSE A TAG OR SMTH, i had to rewrite the entire html code to post it here in short version and shorter names because otherwise it would be 4 page code of css html and javascript. Problem is not in debugging errors in unclosed tags or smth. Source was html validated 1000 times.

After playing with margins, display properties and floating and clearing i finally assembled a working structure (for now).
The key was to clear all elements and parents containing all floating elements,
Then because for some odd reasons slideToggle wasn't working properly with white background (unless you specified height of the hiding element) behind .wrap_ul if it was display:block, only with inline-block.
With Display:inline-block it was getting footer floating on the right, no matter clear:both on both items;
With specified height, slideToggle wasn't pushing the rest of the sliding elements down below but was overlapping.
Well with all these problems only in Firefox, Chrome never had this flue...
So i posted working code in the last edit, not sure which property got the whole puzzle working which is -> (
the background behind expanding down slideToggle list,
footer that is pushed down as well when list is expanded
not floated footer and no extra gaps or spacing's between drop down list and footer)
Hope you find it usefull

Javascript error: 'undefined is not a function' when trying to remove and add class to li element [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I have a container with li elements nested inside a ul element. I'm trying to use Javascript to remove and add a class called active when an li element in the container is selected. However when I click on the class, the li element class is neither added or removed. When I check the web developer in my browser, I get the message 'undefined is not a function'
HTML:
<div class="about_nav">
<ul>
<li class="active">Our Story</li>
<li>International Blocks</li>
<li>How it works</li>
<li>The Perfect Gift</li>
</ul>
</div>
CSS:
.about_nav {
background: no-repeat #FFF 12px 3px;
box-shadow:0 0 10px rgba(0, 0, 0, 0.41);
width:25%;
margin:35px 20px 20px 70px;
float:left;
position:fixed;
}
.about_nav ul {
margin-top:0;
margin-bottom:0;
padding-left:0;
list-style:none;
background-color:#FFF;
}
.about_nav li {
margin-top:2px;
margin-left:0px;
position:relative;
display:block;
}
.about_nav li:hover {
background:#eee;
border-radius:4px;
}
.about_nav li>a {
color:#428bca;
text-decoration:none;
padding:10px 15px;
position:relative;
display:block;
}
.about_nav li>a:hover {
color:#2a6496;
text-decoration:none;
border-radius:4px;
}
.about_nav li.active>a,
.about_nav li.active>a:hover,
.about_nav li.active>a:focus {
color:#FFF;
background-color:#428bca;
}
Javascript:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$('.about_nav li').on('click', function(e) {
$('.about_nav li').removeClass('active');
$(this).addClass('active');
});
});
</script>
Any help is greatly appreciated!

You're using a severely outdated version of jQuery. The problem is that .on() was not added until version 1.7. You're using 1.4. Upgrade you're jQuery version and it should work fine.

<div class="about_nav">
<ul>
<li class="item">Our Story</li>
<li class="item">International Blocks</li>
<li class="item">How it works</li>
<li class="item">The Perfect Gift</li>
</ul>
</div>
$('.item').on('click', function(this){
$('.item').removeClass('active');
$(this).addClass('active');
});
actually, I added the same class for every item you click, it is called a global class, then when somebody press this item you just remove the class active from all items that has "item" class.
$('.about_nav').onclick didn't work because you was catching the clicks not from ul 'parrent' but form the ul li 'childs'

Issues altering CSS with JavaScript

I'm building a dropdown menu for a project I'm working on, and I've come across some trouble. It is built so that the width and the style.left of each submenu is set by a JavaScript function that is called when the root-level menu items are hovered. When I hover these menu items it looks like this:
The submenu is clearly off by quite some pixels to the left. If I don't alter the style.left of the submenu I get the following instead:
Here the alignment is correct. The fault has occured in both Mozilla Firefox and Google Chrome for both Windows 7 and Linux, so it's not a platform related fault.
Here is the code that produces the error:
menu.js
function show_sub_menu(cath){
var menu_item = document.getElementById(cath) //cath is an integer passed to the function
var m_width = Math.floor(window.innerWidth*0.7*0.2); //Menu is 70% of window, each item is 20% of menu
menu_item.style.left = cath*m_width; //Set the style.left dynamically depending on what menu item is to be displayed
//This last line of code produces the error
}
menu.css
#m_wrapper{
position:relative;
width:100%;
}
#menu{
position:relative;
width:70%;
}
#menu li{
width:20%;
float:left;
}
#menu div{
position:absolute;
width:20%;
top:30px;
}
#menu div a{
position:relative;
display:block;
padding:5px;
}
menu.htm
<div id=m_wrapper>
<ul id=menu>
<li onMouseOver=show_sub_menu('0')>Item 1</li>
<div id=0 onMouseOver=show_sub_menu('0')>
<a href=#>Item 1.1</a>
<a href=#>Item 1.2</a>
</div>
</li>
</ul>
</div>
I this seems very illogical, since m_width in the .js is, for my screen settings, 235px and m_width*cath is 0. I am fairly new with JavaScript, so help would be very appreciated!

First, you have your list-item closing early, and an ID that shouldn't start with a digit. So let's clean that up:
<div id="m_wrapper">
<ul id="menu">
<li onMouseOver="show_sub_menu('0');">
Item 1
<div id="s0" onMouseOver="show_sub_menu('0');">
Item 1.1
Item 1.2
</div>
</li>
</ul>
</div>
Next let's check out your CSS. Since we want to position your submenus relative to the main menu items, let's put position:relative; on the list-item itself to create a space from which we can position other stuff.
Now that we have a context where the submenu is aligned based on the top-left corner of your list-item, what we really need is for that menu to appear 30 pixels down from that corner - no left or right adjustment needed.
#m_wrapper{
position:relative;
width:100%;
}
#menu{
position:relative;
width:70%;
}
#menu li{
position:relative;
width:20%;
float:left;
}
#menu div{
position:absolute;
width:100%;
top:30px;
left:0;
}
#menu div a{
display:block;
padding:5px;
}
From here, your sub-menu should be positioned where you need it, but it's shown all the time. We'll take care of that by adding display:none; to #menu div and modifying the JavaScript to change display instead:
function show_sub_menu(cath){
var menu_item = document.getElementById("s"+cath);
menu_item.style.display = "block";
}
That should make your menu appear where and when you need it. I'll leave the disappearing act to you.

jquery fadeIn acting funny?

this is what I'm working on right now
http://www.dsi-usa.com/yazaki_port/hair-by-steph/
as you can see when you click the tabs the fade in and fade outs look extremely funny. I'm wondering if anyone can take a look at the code and tell me what I'm doing wrong. I'm extremely new to Jquery and Javascript (like yesterday new) so I apologize if the code is messy. I'm wondering if 1. there was an easier way to write this and 2. if there's a way to just have the sections fade into each other/any other cool ideas anyone has.
the html structure (pulled out all of the content for space purposes)
<div id="main">
<div id="display_canvas">
</div>
<div id="nav">
<ul>
<li><a class="btn" title="contact">CONTACT</a></li>
<li><a class="btn" title="resume">RESUME</a></li>
<li><a class="btn" title="portfolio">PORTFOLIO</a></li>
<div class="clear"></div>
</ul>
<div class="clear"></div>
</div>
<div id="resume">
//contents here
</div>
<div id="contact">
//contents here
</div>
</div>
the css
*
{
margin:0;
padding:0;
font-family:verdana, helvetica, sans-serif;
}
#main
{
width:1200px;
margin:0 auto;
}
#display_canvas
{
height:700px;
background-color:#fefea8;
box-shadow:5px 5px 5px #888888;
-moz-box-shadow:5px 5px 5px #888888;
-webkit-box-shadow:5px 5px 5px #888888;
display:none;
}
.clear
{
clear:both;
}
#resume
{
clear:both;
float:right;
width:100%;
background-color:#000000;
background-image:url("../imgs/resume_back.png");
background-position:300px 0px;
background-repeat:no-repeat;
height:200px;
text-align:left;
display:none;
}
#contact
{
clear:both;
float:right;
width:100%;
background-color:#000000;
background-image:url("../imgs/contact_back.png");
background-position:left;
background-repeat:no-repeat;
height:200px;
text-align:left;
display:none;
}
#nav
{
margin:1em 0 0 0;
text-align:right;
}
#nav ul
{
list-style-type:none;
}
#nav li
{
display:inline;
}
.btn
{
margin-right:20px;
display:block;
text-align:center;
float:right;
color:#000000;
font-size:15px;
font-weight:bold;
line-height:30px;
text-decoration:none;
cursor:pointer;
width:150px;
height:30px;
}
.over
{
background-color:#888888;
color:#ffffff;
}
.active_contact
{
background-color:#000000;
color:#00a8ff;
}
.active_resume
{
background-color:#000000;
color:#9848c2;
}
.active_portfolio
{
background-color:#000000;
color:#ffffff;
}
and finally a whole mess of javascript
$(document).ready(function(){
//handles general navigation
$(".btn").hover(
function(){
$(this).addClass("over");
},
function(){
$(this).removeClass("over");
}
)
$(".btn").click(function(){
var btn = $(this);
var newClass = "active_" + btn.attr("title"); //set the new class
var section = $("#" + btn.attr("title"));
if ($("#curSection").length)
{
alert('there is a section');
var curClass = "active_" + $("#curSection").attr("title"); //get the current class active_section name
var curSection = "active"
$("#curSection").removeClass(curClass).removeAttr("id"); //remove the current class and current section attributes
btn.addClass(newClass).attr("id", "curSection"); //designate new selection
$(".currentSection").fadeOut("slow", function(){ //fade out old section
$(".currentSection").removeClass("currentSection");
section.fadeIn("slow", function(){ //fade in new section
alert('faded in');
section.addClass("currentSection"); //designate new section
});
});
}
else
{
alert('first time');
btn.addClass(newClass).attr("id", "curSection"); //designate new selection
section.fadeIn("slow", function(){
alert('faded in');
section.addClass("currentSection");
});
}
});
//handles resume navigation
$(".res-btn").hover(
function(){
$(this).addClass("res-over")
},
function(){
$(this).removeClass("res-over")
}
)
$(".res-btn[title=experience]").click(function(){
$("#scroller").stop().animate({top: "0px"}, 1000);
});
$(".res-btn[title=expertise]").click(function(){
$("#scroller").stop().animate({top: "-180px"}, 1000);
});
$(".res-btn[title=affiliates]").click(function(){
$("#scroller").stop().animate({top: "-360px"}, 1000);
});
});
if anyone has any ideas as to why this doesn't work let me know. I thought maybe it was having problems loading the content, but the content should be loaded already as they are on the screen already, just no display. I'm stumped, I saw a few posts similar to mine, so I followed some of their thinking. When I set the fadeIn() to like 5000 instead of "slow" The first 60% or so of the fadeIn is skipped and the section appears at say 60% opacity and then fades in the rest of the way. Not sure what I'm doing so thank you in advance.

Off the top of my head, I think the problem might be that you are initiating an alert dialogue box rather than a jquery Fancybox / Thickbox type of overlay lightbox which accommodates the speed at which the it animates to open or close. And in any case, I am unable to replicate the issue you are facing despite going directly to your link.
So rather than to try and resolve that chunk of codes you have picked out from different sources and since the content that you wish to display is an inline one, you might as well consider using Thickbox or Fancybox instead.
Alternatively, you could also kinda script your own lightbox without using the alert dialogue boxes if you like. It could look something like this:
HTML:
<!--wrapper-->
<div id="wrapper">
Box 1</li>
Box 2</li>
<!--hidden-content-->
<div class="box-1">
This is box 1. close
</div>
<div class="box-2">
This is box 2. close
</div>
</div>
<!--wrapper-->
CSS:
#wrapper{
background:#ffffff;
width:100%;
height:100%;
padding:0;
}
.box-1, .box-2{
display:none;
width:300px;
height:300px;
position:fixed;
z-index:3000;
top:30%;
left:30%;
background:#aaaaaa;
color:#ffffff;
opacity:0;
}
JQUERY:
$(document).ready(function(){
$(".toggle-1").click(function(){
$(".box-1").show(900);
$(".box-1").fadeTo(900,1);
});
$(".close-1").click(function(){
$(".box-1").hide(900);
$(".box-1").fadeTo(900,0);
});
$(".toggle-2").click(function(){
$(".box-2").show(900);
$(".box-2").fadeTo(900,1);
});
$(".close-2").click(function(){
$(".box-2").hide(900);
$(".box-2").fadeTo(900,0);
});
});
Well, of course there's still quite a bit of styling to be done in order for the content to appear nicely in the center of the screen, but I'm gonna be leaving that out as this is more of a question of how to control the speed of which the overlay appears.
In any case, if you wanna change the speed of which it appears or close, simply alter the "900" value to something else - a lower number means a faster animation speed and vice versa. If you have noticed, I'm applying the .hide() and .fadeTo() functions together. This is partly because I will try and enforce for the shown divs to be hidden after the Close button is clicked. This will prevent it from stacking on top of other content and thereby disabling any buttons, links or functions. You can try to play around with their "900" values as well. For e.g. when you press the close button, you can actually make .hide() execute slower in relation to the fadeTo() simply by assigning maybe 3000 to the former and 700 to the latter. This will give the illusion that it is fading only rather than fading and swinging, the latter of which is prominent when you utilize the .hide() or .show() function.
Hope this helps some how. =)