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>

Fixed position div in middel

Created a div popup with position fixed. This div includes form element. If screen size is small then popup gets cut form bottom and we can scroll through browser stroller.
I added solution to keep it up from bottom
.popup {
bottom: 15%;
position: fixed;
}
But it comes in bottom and doesn't look in center if screen size is big.
I am looking for solution like popup should be always in center of page and if screen size is small then it should be up from bottom. Should not cut from bottom.

To center div you have use following code
.popup {
width:200px;
height:200px;
position: fixed;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}
Setting left,right,top,bottom to 0 with margin auto will center div having position fixed or absolute.

div {
background:#333;
width:200px;
height:200px;
position:fixed;
top:50%;
left:50%;
margin-left:-100px;
margin-top:-100px;
}

.popup{
width:80%;
height:200px;
position:fixed;
top:10%;
left:0;
margin:0 auto;
}

This is my custom Responsive popup that i use most frequently. To get the div centered i use JQuery height and my script calculates the device window height and adjust popup accordingly.
As per me this is the most easiest and awesome way to create popups
I hope it might help you.
JSFiddle : Demo
HTML
<div class="popup">
<span class="p_box">
<span class="close">X</span>
<h2 id="popup_head"> Popup Alert !</h2>
<p> This is popup content. The dummy text is here.</p>
Some more dummy text.
</span>
</div>
<div class="content">
<h1>Hello There...</h1>
<p>This is just a dummy text.</p>
<p>This is just a dummy text.</p>
<p>This is just a dummy text.</p>
</br>
<h2>Content</h2>
<p>
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then
</p>
<button id="popup_bt">Popup</button>
</div>
CSS
body {
margin:0px;
width:100%;
}
.content {
padding:55px;
text-align:justify;
}
.popup {
display:block;
visibility:hidden;
position:fixed;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
background:rgba(0, 0, 0, 0.7);
z-index:9999;
overflow:hidden;
text-align:center;
}
#media(max-width: 1020px) {
.p_box {
width:30%;
}
}
#media(max-width: 800px) {
.p_box {
width:40%;
}
}
#media(max-width: 640px) {
.p_box {
width:60%;
}
}
#media(max-width: 420px) {
.p_box {
width:80%;
}
}
.p_box {
position:relative;
margin:0px auto;
display:block;
height:auto;
width:25%;
padding:20px;
background:white;
text-align:left;
}
.close {
display:inline;
position:absolute;
right:0px;
top:5px;
margin-right:5px;
background:#E32222;
color:white;
height:20px;
width:20px;
border-radius:5px;
z-index:9999;
cursor:pointer;
text-align:center;
}
#popup_head {
color:#E32222;
text-align:center;
}
JQuery/JavaScript
$(document).ready(function(){
var dh = window.innerHeight;
var pbox_h = $(".p_box").innerHeight();
var mid_scr = dh/2;
var mid_box = pbox_h/2;
var topPos = mid_scr - mid_box;
$(".p_box").css("top","" + topPos + "px");
$("#popup_bt").click(function(e){
$(".popup").fadeIn();
$(".popup").css("visibility","visible");
});
$(".close").click(function(event){
$(".popup").fadeOut();
});
});
Note : You could custom your popup box i had added some dummy content.

Centering things is a piece of cake:
.centereddiv {position:absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
Hope this helps!

How to make text appear under div without moving other items in list?

I have a slight issue with my design. I currently only know how to use CSS/HTML and I would like to add a bit of "pzazz" into a design of mine. This being said , I have been looking at jQuery snippets from others who have tried to do something similar. The text appears under when the other item is hovered on however , the other items in the list move down , even if they all have the same text but since the display:none until it's hovered on , it's as if it isn't there.
These pictures should explain far better than I can.
The two different states :
http://gyazo.com/6f736e7ef79409dbd3398facb03dcf5c.png
Just to clarify ; it is the other boxes that move down. The box with the acorn stays in the same location.
In case you wish to see the code which I used , you can do so here :
http://codepen.io/redhotfusion/pen/ipocE
Here is the CSS bit :
.t_s_ul {
list-style-type:none;
width:90%;
padding-left:5px;
margin-left:-10px;
margin:0 auto;
}
.t_s_li {
width:70px;
height:70px;
border:4px white solid;
display:inline-block;
border-radius:5px;
margin:5px;
position:relative;
}
.t_s_li:hover{
transition:1s;
background-color:white;
}
.type_icon {
background:url("http://i.imgur.com/xix8EC9.png");
width:100%;
height:100%;
background-size:100%;
margin-left:-2px;
}
.type_icon:hover{
transition:1s;
cursor:pointer;
background:url("http://i.imgur.com/e1IONg2.png");
}
.course_type_text {
width:75px;
color:white;
font-size:0.85em;
margin:0 auto;
margin-top:0.5em;
margin-left:-0.15em;
font-family:"Open Sans" , arial;
font-weight:400;
The HTML :
<ul class="t_s_ul">
<li class="t_s_li">
<div class="type_icon"></div>
<DIV class="course_type_text">Course One</DIV>
</li>
<li class="t_s_li"></li>
<li class="t_s_li"></li>
<li class="t_s_li"></li>
</ul>
THE JS/JQUERY
$(function(){
$(".spire-menu").hover(function(){
$(this).find(".menu-item").fadeIn();
}
,function(){
$(this).find(".menu-item").fadeOut();
}
);
});
$(".spire-menu").on('mouseenter mouseleave', function () {
$(this).find('.box').fadeToggle(100);
});
Very sorry if this is a real noob question but we all have to start somewhere!
Any advice or help is great!
Thank you ,
-Valdis

Add position: absolute; to your .course_type_text in the css
This prevents the div from altering the layout.
You could then even remove the fixed with you are adding to that class, because it will just overlap all other html elements
Also change your hover function to this:
$(".t_s_li").hover(function(){
$(this).find(".course_type_text").stop(true, true);
$(this).find(".course_type_text").fadeIn();
}
,function(){
$(this).find(".course_type_text").stop(true, true);
$(this).find(".course_type_text").fadeOut();
}
);
This will prevent queuing the animations when you move fast over it with the mouse several times.
See here for demo:
http://codepen.io/anon/pen/fICiD

Since you are using display:inline-block to get side by side the li elements you can use this on your class t_s_li:
.t_s_li {
vertical-align:top;
}
The demo http://codepen.io/anon/pen/jHbBq
For default the vertical-align for inline-block elements is baseline.

Try adding:
float: left;
to your .t_s_li class
http://codepen.io/anon/pen/oLIbz
Or what Dank and RononDex suggested... this is just another way to do it. :D

Apply float:left to .t_s_li
like this,
.t_s_li {
float:left;
}

Here's your css:
.course_type_text {
float: left; /*<-----added here*/
width:75px;
color:white;
font-size:0.85em;
margin:0 auto;
margin-top:0.5em;
margin-left:-0.15em;
font-family:"Open Sans" , arial;
font-weight:400;
display:block;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Demo JSFIDDLE

CSS transition & animation to active at same time

http://jsfiddle.net/bryank/YPxb5/
#spacer{
position:fixed;
top:11px;
left:200px;
height:79px;
width:155px;
background-color:#fff;
}
#spacer:active{
-webkit-animation: click .1s 1;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes click{
0%{-webkit-transform:scale(1,1);}
100%{-webkit-transform:scale(0.9,0.9);}
}
/*------begin nav------*/
#toggler { display: none; }
#nav{
padding:0;
position:fixed;
top:11px;
left:26px;
font-family:helvetica;
font-size:14px;
background-image:url(logo_back.png);
/*-- background-color:red; --*/
width:11.1em;
height:5.7em;
overflow:hidden;
transition: height .4s;
-webkit-transition: height .4s;
}
input:checked + #nav{
height:33em;
}
/*-- #nav a.bg:hover{
background-color: rgba(0,0,0,0.0);
} --*/
#nav a{
text-decoration:none;
color:#000;
}
#nav a:hover{
background-color:#858585;
}
#nav div{
text-indent:0.5em;
line-height: 1.2em;
}
<!--img button-->
<div id="spacer"><img src="http://liveoilfree.com/wtrclrr/b&w_logo_m.jpeg" height="79" width="155" /></div>
<!--drop down nav-->
<label for="toggler">
<input id="toggler" type="checkbox">
<div id="nav">
<!--logo_image-->
<img src="http://liveoilfree.com/wtrclrr/b&w_logo_m.jpeg" height="79" width="155" />
<!---->
<div style="height:1em;"></div>
<div style="font-size:1.1em;"><b>Artists</b></div>
<div style="height:1em;"></div>
<div>Ahnnu</div>
<div>Cex</div>
<div>Co La</div>
<div>Delicate Steve</div>
<div>Dope Body</div>
<div>Dustin Wong</div>
<div>Eachothers</div>
<div>En Passant</div>
<div>Gem Vision</div>
<div>Holy Ghost Party</div>
<div>Jimmy Joe Roche</div>
<div>Jason Urick</div>
<div>Ken Seeno</div>
<div>Kid Krusher</div>
<div>Lil Jabba</div>
<div>Rick Rab</div>
<div>Teeth Mountain</div>
<div>Teenage Souls</div>
<div style="height:1em;"></div>
<div style="font-size:1.1em;">INFO</div>
</div>
</label>
In my fiddle here: http://jsfiddle.net/bryank/YPxb5/ I have two buttons,
button on the left is a drop down menu using a transition (thanks to user:'squint' for showing me the hidden checkbox solution in a previous question.) the button itself does nothing but trigger the menu.
and next to that on the right I have a button that appears to click down using scale in an animation
I want the button on the right to drop the menu directly underneath of the button.
I am certain the only way to do this is with javascript (though I am constantly surprised by the CSS cleverness out there) I have recently bitten the bullet and decided to learn javascript from the ground up...love the eloquent javascript hyperbook so far
any ideas?
thx

Finally got this to work how I wanted.(not without help from stackoverflow users, thanks again.) Im sure the jQuery is a little dirty but...it works.
http://jsfiddle.net/bryank/YPxb5/1/
$(document).ready(function(){
$('#spacer').mousedown(function(){
var val=.9
$(this).css({'-webkit-transform':'scale('+val+')','-moz- transform':'scale('+val+')'})
.mouseup(function(){
var val2=1
$(this).css({'-webkit-transform':'scale('+val2+')','-moz-transform':'scale('+val2+')'})
});
});
});
$(document).ready(function(){
$('#spacer').mouseup(dropDown2)
});
function dropDown2(){
$('#nav').toggleClass('navDrop');
}

simple onclick applied on <a> not working IE and FF

I have a simple list as follows:
<div class="settingButton">
<div class="subManu">
<ul>
<li><a onclick="alert('clicked!!')" href="#">Default Categories</a></li>
<li><a onclick="alert('clicked!!')" href="#">Wizard</a></li>
<div class="clear"></div>
</ul>
<div class="clear"></div>
</div>
</div>
I do not see the alerts on clicking the links! It works fine in Chrome, but not in IE and FF. I used this same structure without assigning class and it works as expected. Maybe the problem is with the CSS, but I am not sure what. Here is the CSS for the dropdown,
.settingButton {
background:url(/mobiledoc/jsp/dashboard/images/settings.png) 0 0 no-repeat;
width:25px;
height:37px;
float:left;
position:absolute;
right:13px;
top:-30px;
}
.settingButton a {
display:block;
width:25px;
height:37px;
}
.settingButton:hover {
background:url(/mobiledoc/jsp/dashboard/images/settingsHover.png) 0 0 no-repeat;
}
.settingButton:active {
background:url(/mobiledoc/jsp/dashboard/images/settingsActive.png) 0 0 no-repeat;
}
.settingButton div.subManu {
display:none;
height:100px;
}
.settingButton:hover div.subManu {
background:url(/mobiledoc/jsp/dashboard/images/subNavArrow.png) no-repeat right 3px;
position:absolute;
top:20px;
z-index:99;
right:0;
width:250px;
height:50px;
display:block;
padding:13px 0 0 0;
}
div.subManu ul {
display:block;
background:url(/mobiledoc/jsp/dashboard/images/dropDownMidBg.png) repeat-x;
border-left:#547b9a 1px solid;
border-right:#547b9a 1px solid;
height:29px;
padding:0 0 0 7px;
}
div.subManu ul li {
width:110px;
float:left;
margin:0 5px;
display:block;
height:29px;
}
div.subManu ul li a {
display:inline;
color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:normal;
line-height:28px;
}
div.subManu ul li a:hover {
color:#b7f630;
}
div.subManu ul li.active-manu a {
color:#b7f630;
}
I have gone through different question but didn't find any relevant answers. Let me know if you need any more info.
Thanks!

If you don't want a link, don't use an A element, use a button or styled span instead, e.g.
<style type="text/css">
.clickable:hover {
text-decoration: underline;
cursor: pointer;
}
</style>
...
<span class="clickable">thing to click</span>
Anyhow, the preferred method for links is:
<a href="http://link for script-disabled browsers"
onclick="myFunction(); return false;">...</a>

Reference: jsFiddle
You will notice I only made two changes to your code.
The first change is to include background color for the hover div.
The second change is to make the font words viewable on the white background since the font's are white themselves.
To see both click events working, hover over the black rectangle in the top right corner and you will see the two links that will pop up and allow the alert to invoke when clicked.
The bottom line is there is nothing wrong with your code, it's just you need to hover to access the clickable links.
Disclaimer: It's for the Question only and doesn't cover other things like the preferred method for anchor links. ;-)

You might want to try something like this instead:
Default Categories