Develop Reference

Drop down: Swap icon on click

DROP MENU LINK
jsfiddle.net/a3MKG/83/
Refer to link above. Does anyone know how to get the navicon image to change upon click? I want it to become a different image (a picture of an X) once I click it.
Note: When you click the navicon, the drop menu comes down, and you can click anywhere OUTSIDE the drop menu to bring the drop menu back up, so you don't have to click the X image to remove the drop down and bring back the initial image. So I need the new navicon image only to be an X when the dropdown menu is actively displayed.
Any help will be much appreciated! Thank you all.

Ok so I saw your comment re. 'how do I close it just on closing the image' before i made my fiddle.
I changed your div dropTitle to an a and added another class to it menu-open
.menu-open{ background:url('http://webservices.lib.harvard.edu/hlportal/images/threeline.png');
background-size:100% 100%;
}
and added a function that toggled it with 'close'
$('a').click(function(){
$(this).toggleClass('close')
});
.close{background:url('https://cdn0.iconfinder.com/data/icons/basic-ui-elements-plain/385/010_x-128.png');
background-size:100% 100%;
}
I tweaked your dropTitle class slightly to
.dropTitle{
display:block;
width:50px;
height:50px;
cursor:pointer;
}
but the functionality remains the same

Do not use javascript where you can use css!
input, input:before, input:after {
display: block;
content:'';
appearance: none;
-webkit-appearance: none;
position: relative;
width:20px;
background:black;
height:4px;
border-radius:2px;
transition: all linear 0.1s;
}
input:after{
top:3px;
}
input:before{
top:-7px;
}
input:focus:after{
transform: rotate(45deg);
top:-4px;
}
input:focus{
background:transparent;
}
input:focus:before{
transform: rotate(-45deg);
top:0px;
}
input:not(:focus) + div{
display:none;
}
<input type="checkbox" />
<div>
<img class="dropPillow" src="https://image.freepik.com/free-icon/square-outlined-shape_318-75498.png">
</div>

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>

CSS TABS on HOVER

Is there any way that i can manipulate this code so that once you hover over the tab it will be made the active/ default/ current tab selection?
So that even if you scroll down the page and come back up it won't go back to Tab1?
http://jsfiddle.net/QA5Zp/
Ideally I need Pure CSS only :)
See Code:
Most Recent Posts
<li><a href='http://www.kamikazemusic.com/quick-tips/key-metrics-google-analytics/' title='5 key metrics you should know from Google Analytics'>
5 key metrics you should know from Google Analytics</a></li>
<li><a href='http://www.kamikazemusic.com/general-stuff/ie6/' title='We all dislike IE6 but lets not be childish'>
We all dislike IE6 but lets not be childish</a></li>
<li><a href='http://www.kamikazemusic.com/general-stuff/smiling-appliance/' title='Smiling Appliance'>
Smiling Appliance</a></li>
<li><a href='http://www.kamikazemusic.com/quick-tips/trading-eye-search-fixes/' title='Trading Eye Search Fixes (v5)'>
Trading Eye Search Fixes (v5)</a></li>
<li><a href='http://www.kamikazemusic.com/web-design/beautiful-email-newsletters/' title='Check me out on Beautiful Email Newsletters (BEN)'>
Check me out on Beautiful Email Newsletters (BEN)</a></li>
<li><a href='http://www.kamikazemusic.com/portfolio/mopay-flash-and-gif-banners/' title='Mopay Flash and GIF Banners'>
Mopay Flash and GIF Banners</a></li>
<li><a href='http://www.kamikazemusic.com/portfolio/stamford-clothiers/' title='Stamford Clothiers'>
Stamford Clothiers</a></li>
<li><a href='http://www.kamikazemusic.com/web-development/tradingeye-query-string-search/' title='TradingEye show search query string in URL'>
TradingEye show search query string in URL</a></li>
<li><a href='http://www.kamikazemusic.com/quick-tips/basics-html-email-newsletters/' title='The 10 Basics of HTML Email Newsletters'>
The 10 Basics of HTML Email Newsletters</a></li>
</ul>
Most Popular Posts
Why we should all be forward thinking
Mopay Flash and GIF Banners
Stamford Clothiers
TradingEye show search query string in URL
The 10 Basics of HTML Email Newsletters
5 key metrics you should know from Google Analytics
We all dislike IE6 but lets not be childish
Smiling Appliance
Trading Eye Search Fixes (v5)
Check me out on Beautiful Email Newsletters (BEN)
CSS Stylesheet:
body{
font : 12px/1.5 Helvetica, Arial serif;
}
.clearboth{
clear:both;
}
#csstabs li{ padding:2px;}
#csstabs{ position:relative; width:500px; height:290px; }
#csstabs h3{ padding:5px; height:30px; text-align:center; cursor:hand; display:block; font-size:16px; font-weight:bold; margin:0;
border-top:1px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
}
.tabcontent{
padding:10px 0 0 40px;
width:100%;
background:#fff;
border:1px solid #000;
position:absolute;
left:0;
top:40px;
height:230px;
display:block;
margin:0;
}
#tab1 .tabcontent{
z-index:2;
background:#fff;
}
#tab1 h3{
z-index:3;
width:150px;
position:absolute;
left:0;
top:0;
cursor:hand;
background:#fff;
}
#tab2 .tabcontent{
z-index:1;
opacity:0;
}
#tab2 h3{
width:150px;
position:absolute;
left:180px;
top:0;
cursor:hand;
}
#csstabs:hover h3, #tabs:focus h3, #tabs:active h3{
background:none;
z-index:0;
}
#csstabs:hover .tabcontent, #tabs:focus .tabcontent, #tabs:active .tabcontent{
z-index:0;
opacity:0;
-webkit-transition : opacity .75s ease-in;
}
#tab1:hover h3,#tab1:focus h3,#tab1:active h3{z-index:4;background:#fff;}
#tab1:hover .tabcontent,#tab1:focus .tabcontent,#tab1:active .tabcontent{ z-index:3; background:#fff; opacity:1; -webkit-transition : opacity 2s ease-in;}
#tab2:hover h3,#tab2:focus h3,#tab2:active h3{z-index:4;background:#fff;}
#tab2:hover .tabcontent,#tab2:focus .tabcontent,#tab2:active .tabcontent{ z-index:3; background:#fff; opacity:1; -webkit-transition : opacity 2s ease-in;}

From the fiddle you posted (with jquery), replacing click with mouseenter should give what you want fiddle with mouseenter
$('.tabbox').on('mouseenter', function(){
$('.tabbox').removeClass('active');
$(this).addClass('active');
});
Since you are new to jquery, let me explain what this does as well.
$('.tabbox').on('mouseenter', function(){
This selects all elements with class 'tabbox', and adds a 'mouseenter' event handler, which is the function that follows. So every time the 'mouseenter' event happens, the function does it's thing.
$('.tabbox').removeClass('active');
$(this).addClass('active');
The first thing it does when the function is called, is it selects all elements with class 'tabbox' and removes the class 'active' from them. Then it adds the class 'active' to 'this', 'this' is a reference to the object which was 'mouseentered'.

changing content of modal and resizing window with animation

I have a modal in which I am showing a form, on submitting the form i want to hide the content of form and instead want to show some ajax indicator of fixed size 100px x 100px. The issue is how to reduce the width/height of the modal to 100x100 with some animation and remaining that modal within center of screen?
<div class="modal">
<form>
....
</form>
<div class="ajax-indicator hidden"></div>
</div>
after click of submit button
<div class="modal">
<form class="hidden">
....
</form>
<div class="ajax-indicator"></div>
</div>

Create multiple stages (CSS classes) & activate them with js events.
You can achieve your animation with just some eventhandlers such as:
click,transitionend,submit...
and then just change the correspondent class.
Css
#box{
position:fixed;
width:0px;
height:0px;
top:0%;
left:0%;
background-color:black;
margin-left:0px;
margin-top:0px;
-webkit-transition:all 700ms ease;
overflow:hidden;
border-radius:0px;
}
#box.active{
width:300px;
height:300px;
top:50%;
left:50%;
margin-top:-150px;
margin-left:-150px;
border-radius:0px;
}
#box.loading{
width:100px;
height:100px;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
border-radius:100px;
}
js
in this example i'm using a fake loading time with setTimeout that lasts 2sec after clicking the submit btn
function clk(e){
box.classList.add('active');
}
function frm(e){
e.preventDefault();
box.classList.remove('active');
box.classList.add('loading');
setTimeout(function(){box.classList.remove('loading')},2000);
}
var btn=document.getElementById('btn'),
box=document.getElementById('box');
btn.addEventListener('click',clk,false);
box.firstChild.addEventListener('submit',frm,false);
//box.addEventListener('webkittransitionend',dosomethingelse,false);
Demo
http://jsfiddle.net/hHD87/
this example uses modern technologies .. that work on all up to date browsers... chrom,firefox ie10 opera ios android...
maybe you need to add custom prefixexs like -webkit -moz -o ...
here is another example that uses also the delay witch is very important to completely hide the window at the end.
http://jsfiddle.net/RAu8Q/

After click submit button change the css of the model box.
var myElement = document.getElementByClass("model");
myElement.style.width = "100px";
myElement.style.height = "100px";
and set the ajax-indicator div position to center to get the model at center.
var modeElement = document.getElementByClass("ajax-indicator");
modelElement.style.align="center";

Create a css class that you can add to your modal which sets its size to 100x100. If you're centering your modal with margin: 0 auto it should automatically adjust itself. Then remove the class when the loading is done.
Regarding animation you can add transition: all .5s to your .modal-class
Example: http://jsfiddle.net/eSsM5/1/
css:
.modal {
margin: 0 auto;
width: 200px;
height: 200px;
transition: all .3s;
background-color: red;
text-align: center;
padding-top: 30px;
}
.loading {
width: 100px;
height: 100px;
}
.loading > form {
display: none;
}
.loading > .spinner {
display: block;
}
.spinner {
display: none;
}
html
<div class="modal">
<form>
your form
</form>
<div class="spinner">
Now loading!
</div>
</div>
<button type="button">toggle loading</button>
js
document.querySelector("button").addEventListener("click", function() {
var modal = document.querySelector(".modal")
modal.classList.toggle("loading")
})

Changing link style onclick

I am currently experimenting with JavaScript and I'm having trouble changing the style of the links on my landing page. What I have is four boxes in the top right of the page that when clicked change the theme of the landing page. I was able to get the background and text to change when the boxes are clicked, but hyperlinks remain unchanged. I have read several other posts asking similar questions but I was unable to adapt the code to my situation.
I have tried using getElementById, and getElementByclassName but neither produced the result I was looking for. The getElementById was able to change one of the links but the rest remained unchanged. I'm guessing it only works on one link because the id can only be used once per page?
The current JavaScript code is written as four separate functions, but I was thinking perhaps it would be better to use one case statement?
I have left a link to jsfiddle, but for some reason the onclick function does not work at jsfiddle. Any help would be greatly appreciated.
Thank you!
http://jsfiddle.net/F4vte/
HTML
<body>
<div id="container">
<form>
<input type="button" id="color-box1"
onclick="colorText1();">
<input type="button" id="color-box2"
onclick="colorText2();">
<input type="button" id="color-box3"
onclick="colorText3();">
<input type="button" id="color-box4"
onclick="colorText4();">
</form>
<div id="centerText">
<h1 id="name">Donald Price</h1>
<div id="underline"></div>
<div id="nav">
Blog
Projects
Contact
Resume</p>
</div>
</div>
</div>
</body>
JavaScript
function colorText1(){
document.getElementById("name").style.color="#A32DCA";
document.getElementById("underline").style.color="#A32DCA";
document.getElementById("nav").style.color="#A32DCA";
document.bgColor = '#96CA2D';
}
function colorText2(){
document.getElementById("name").style.color="#8FB299";
document.getElementById("underline").style.color="#8FB299";
document.bgColor = '#FFFFFF';
}
function colorText3(){
document.getElementById("name").style.color="#484F5B";
document.getElementById("underline").style.color="#484F5B";
document.bgColor = '#4BB5C1';
}
function colorText4(){
document.getElementById("name").style.color="#FFFFFF";
document.getElementById("underline").style.color="#FFFFFF";
document.bgColor = '#00191C';
}
CSS
body {
font-family:Helvetica,Arial,Verdana,sans-serif;
font-size:62.5%;
width:960px;
padding-left:3px;
margin:auto;
}
#underline {
border-bottom:3px solid;
}
#container {
width:50em;
margin-left:auto;
margin-right:auto;
margin-top:30%;
z-index:2;
}
/*color box settings*/
#color-box1,#color-box2,#color-box3,#color-box4 {
position:absolute;
top:0;
width:50px;
height:50px;
float:left;
-webkit-transition:margin .5s ease-out;
-moz-transition:margin .5s ease-out;
-o-transition:margin .5s ease-out;
border-color:#B5E655;
border-style:solid;
margin:15px;
}
#color-box1:hover, #color-box2:hover, #color-box3:hover, #color-box4:hover {
margin-top: 4px;
}
#color-box1 {
background-color:#96CA2D;
right:0;
}
#color-box2 {
right:50px;
background-color:#FFFFFF;
}
#color-box3 {
right:100px;
background-color:#4BB5C1;
}
#color-box4 {
right:150px;
background-color:#00191C;
}
#centerText {
width:50em;
text-align:center;
}
#nav {
padding:20px;
}
#nav a {
padding-left:2px;
font-size:20px;
text-align:center;
}
a:link {
color:#000;
text-decoration:none;
}
a:visited {
text-decoration:none;
color:#999;
}
a:hover {
text-decoration:none;
color:red;
}
a:active {
text-decoration:none;
}

Aside from what #j08691 said about needing to run your existing script in the header,
just add color:inherit; to your #nav a selector in your css.
#nav a {
padding-left:2px;
font-size:20px;
text-align:center;
color:inherit;
}
This way when you change the color of #nav that color will be inherited by your links (a).
Live Demo

You can't just set the color of the div to change the color of the links. You need to get the a elements and change their style. There are probably better ways to do this, but just to illustrate, you can iterate through the child nodes of the div:
function colorText1() {
document.getElementById("name").style.color = "#A32DCA";
document.getElementById("underline").style.color = "#A32DCA";
var children = document.getElementById("nav").childNodes;
for (var i=0; i < children.length; i++) {
if (children[i].tagName == 'A') {
children[i].style.color = "#A32DCA";
}
}
document.bgColor = '#96CA2D';
}
See it working on the updated jsFiddle.