I am pretty new to HTML, Java, and CSS and have been working on getting hovering elements to appear in different regions in a webpage. I have created this jfiddle which shows what I have thus far:
startList = function() {
var sfEls = document.getElementById("over").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
//first remove all existing classes of .over
for (var j=0; j<sfEls.length; j++){
sfEls[j].className=sfEls[j].className.replace(new RegExp(" over\\b"), "");
}
this.className+=" over";// now add class
}
}
}
// addLoadEvent
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(startList);
<head>
* {
margin:0;
padding:0
}/* for demo only - use a proper reset of your own*/
body { padding:20px 10px }
a img {
display:block;
border:none;
}
.outer {
width:760px;
margin:auto;
border:1px solid #000;
padding:10px 10px 20px;
position:relative;/* stacking context*/
overflow:auto;
}
.outer2{
width:1000px;
margin:auto;
border:1px solid #000000;
position:relative;
}
.image-holder {
float:right;
margin:86px 10px 10px 0;
width:500px;
height:400px;
background:#fffccc;
border:1px solid #000;
padding:3px;
position:relative;
z-index:1;
display:inline;
}
ul.links {
list-style:none;
margin:0 20px;
padding:0;
border:1px solid #000;
border-bottom:none;
width:100px;
}
.links li {
width:100px;
background:blue;
color:#fff;
border-bottom:1px solid #000;
}
.links li a {
display:block;
width:90px;
padding:5px;
background:blue;
color:#fff;
text-decoration:none;
}
.links li a span, .links li a b {
position:absolute;
right:24px;
top:-999em;
width:500px;
height:400px;
z-index:2;
}
.links li a span img {
display:block;
margin:0 0 5px
}
.links li a:hover, .links li.over a {
background:teal;
color:#000;
visibility:visible;
}
.links li a:hover span, .links li.over a span { top:100px; }
.links li a:hover b, .links li.over a b {
top:200px;
left:50px;
height:auto;
}
h1 {
text-align:center;
margin:1em 0;
}
</style>
</head>
<div class="outer2">
<b>list moves here</b>
<div class="outer">
<p class="image-holder"><img src="https://lol.html" width="500" height="400" alt="Image Goes Here" /></p>
<ul id="all" class="links">
<li><input type="checkbox" id="list_all" class="list_all" onClick="toggle_show('all')"> List all</li>
</ul>
<ul id="over" class="links">
<li>Google<span><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width="500" height="400" alt="NWS" /></span></li>
<li>Yahoo<span><img src="https://s.yimg.com/rz/p/yahoo_homepage_en-US_s_f_p_bestfit_homepage.png" width="500" height="400" alt="SPC" /></span></li>
</ul>
</div>
</div>
https://jsfiddle.net/qbrnuwe6/6/
One can hover over 'Google', and an image appears in the box in the bottom-right. Similarly, if one hovers over 'Yahoo', a different image appears in the box in the bottom-right.
However, now, I want to create a checkbox that, when checked, the list of 'Google' and 'Yahoo' will appear outside of the 'inner box' and populate the area where it says 'list moves here'. I was hoping this could be achieved by some function such as:
<input type="checkbox" id="list_all" class="list_all" onClick="toggle_show('all')"> List all
One should be able to still hover over 'Google' and 'Yahoo' to make the image appear in the bottom-right For some reason I am stuck on how to move the list properly. I am not sure if this would work better with HTML, Java, or CSS, so any sort of help would be appreciated.
If I understood you correctly this should do it:
function toggle_show(type)
{
const menu = document.getElementById("over");
if (document.getElementById("list_all").checked)
{
document.querySelector("div.outer2").appendChild(menu);
}
else
{
document.querySelector("div.outer").appendChild(menu);
}
}
startList = function() {
var sfEls = document.getElementById("over").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
//first remove all existing classes of .over
for (var j=0; j<sfEls.length; j++){
sfEls[j].className=sfEls[j].className.replace(new RegExp(" over\\b"), "");
}
this.className+=" over";// now add class
}
}
}
// addLoadEvent
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(startList);
function toggle_show(type)
{
const menu = document.getElementById("over");
if (document.getElementById("list_all").checked)
{
document.querySelector("div.outer2").appendChild(menu);
}
else
{
document.querySelector("div.outer").appendChild(menu);
}
}
<head>
* {
margin:0;
padding:0
}/* for demo only - use a proper reset of your own*/
body { padding:20px 10px }
a img {
display:block;
border:none;
}
.outer {
width:760px;
margin:auto;
border:1px solid #000;
padding:10px 10px 20px;
position:relative;/* stacking context*/
overflow:auto;
}
.outer2{
width:1000px;
margin:auto;
border:1px solid #000000;
position:relative;
}
.image-holder {
float:right;
margin:86px 10px 10px 0;
width:500px;
height:400px;
background:#fffccc;
border:1px solid #000;
padding:3px;
position:relative;
z-index:1;
display:inline;
}
ul.links {
list-style:none;
margin:0 20px;
padding:0;
border:1px solid #000;
border-bottom:none;
width:100px;
}
.links li {
width:100px;
background:blue;
color:#fff;
border-bottom:1px solid #000;
}
.links li a {
display:block;
width:90px;
padding:5px;
background:blue;
color:#fff;
text-decoration:none;
}
.links li a span, .links li a b {
position:absolute;
right:24px;
top:-999em;
width:500px;
height:400px;
z-index:2;
}
.links li a span img {
display:block;
margin:0 0 5px
}
.links li a:hover, .links li.over a {
background:teal;
color:#000;
visibility:visible;
}
.links li a:hover span, .links li.over a span { top:100px; }
.links li a:hover b, .links li.over a b {
top:200px;
left:50px;
height:auto;
}
h1 {
text-align:center;
margin:1em 0;
}
</style>
</head>
<div class="outer2">
<b>list moves here</b>
<div class="outer">
<p class="image-holder"><img src="https://lol.html" width="500" height="400" alt="Image Goes Here" /></p>
<ul id="all" class="links">
<li><input type="checkbox" id="list_all" class="list_all" onClick="toggle_show('all')"> List all</li>
</ul>
<ul id="over" class="links">
<li>Google<span><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width="500" height="400" alt="NWS" /></span></li>
<li>Yahoo<span><img src="https://s.yimg.com/rz/p/yahoo_homepage_en-US_s_f_p_bestfit_homepage.png" width="500" height="400" alt="SPC" /></span></li>
</ul>
</div>
</div>
I would like to create a range slider along with a text box. I while using the range slider, I want the ranger value automatically update in the text box and vice versa. Also, I need to change the color of slider lower part (left side of slider thumb). I am using below code to for this
!function(a){"use strict";"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):a(jQuery)}(function(a){"use strict";function b(){var a=document.createElement("input");return a.setAttribute("type","range"),"text"!==a.type}function c(a,b){var c=Array.prototype.slice.call(arguments,2);return setTimeout(function(){return a.apply(null,c)},b)}function d(a,b){return b=b||100,function(){if(!a.debouncing){var c=Array.prototype.slice.apply(arguments);a.lastReturnVal=a.apply(window,c),a.debouncing=!0}return clearTimeout(a.debounceTimeout),a.debounceTimeout=setTimeout(function(){a.debouncing=!1},b),a.lastReturnVal}}function e(a){return a&&(0===a.offsetWidth||0===a.offsetHeight||a.open===!1)}function f(a){for(var b=[],c=a.parentNode;e(c);)b.push(c),c=c.parentNode;return b}function g(a,b){function c(a){"undefined"!=typeof a.open&&(a.open=a.open?!1:!0)}var d=f(a),e=d.length,g=[],h=a[b];if(e){for(var i=0;e>i;i++)g[i]=d[i].style.cssText,d[i].style.setProperty?d[i].style.setProperty("display","block","important"):d[i].style.cssText+=";display: block !important",d[i].style.height="0",d[i].style.overflow="hidden",d[i].style.visibility="hidden",c(d[i]);h=a[b];for(var j=0;e>j;j++)d[j].style.cssText=g[j],c(d[j])}return h}function h(a,b){var c=parseFloat(a);return Number.isNaN(c)?b:c}function i(a){return a.charAt(0).toUpperCase()+a.substr(1)}function j(b,e){if(this.$window=a(window),this.$document=a(document),this.$element=a(b),this.options=a.extend({},n,e),this.polyfill=this.options.polyfill,this.orientation=this.$element[0].getAttribute("data-orientation")||this.options.orientation,this.onInit=this.options.onInit,this.onSlide=this.options.onSlide,this.onSlideEnd=this.options.onSlideEnd,this.DIMENSION=o.orientation[this.orientation].dimension,this.DIRECTION=o.orientation[this.orientation].direction,this.DIRECTION_STYLE=o.orientation[this.orientation].directionStyle,this.COORDINATE=o.orientation[this.orientation].coordinate,this.polyfill&&m)return!1;this.identifier="js-"+k+"-"+l++,this.startEvent=this.options.startEvent.join("."+this.identifier+" ")+"."+this.identifier,this.moveEvent=this.options.moveEvent.join("."+this.identifier+" ")+"."+this.identifier,this.endEvent=this.options.endEvent.join("."+this.identifier+" ")+"."+this.identifier,this.toFixed=(this.step+"").replace(".","").length-1,this.$fill=a('<div class="'+this.options.fillClass+'" />'),this.$handle=a('<div class="'+this.options.handleClass+'" />'),this.$range=a('<div class="'+this.options.rangeClass+" "+this.options[this.orientation+"Class"]+'" id="'+this.identifier+'" />').insertAfter(this.$element).prepend(this.$fill,this.$handle),this.$element.css({position:"absolute",width:"1px",height:"1px",overflow:"hidden",opacity:"0"}),this.handleDown=a.proxy(this.handleDown,this),this.handleMove=a.proxy(this.handleMove,this),this.handleEnd=a.proxy(this.handleEnd,this),this.init();var f=this;this.$window.on("resize."+this.identifier,d(function(){c(function(){f.update(!1,!1)},300)},20)),this.$document.on(this.startEvent,"#"+this.identifier+":not(."+this.options.disabledClass+")",this.handleDown),this.$element.on("change."+this.identifier,function(a,b){if(!b||b.origin!==f.identifier){var c=a.target.value,d=f.getPositionFromValue(c);f.setPosition(d)}})}Number.isNaN=Number.isNaN||function(a){return"number"==typeof a&&a!==a};var k="rangeslider",l=0,m=b(),n={polyfill:!0,orientation:"horizontal",rangeClass:"rangeslider",disabledClass:"rangeslider--disabled",horizontalClass:"rangeslider--horizontal",verticalClass:"rangeslider--vertical",fillClass:"rangeslider__fill",handleClass:"rangeslider__handle",startEvent:["mousedown","touchstart","pointerdown"],moveEvent:["mousemove","touchmove","pointermove"],endEvent:["mouseup","touchend","pointerup"]},o={orientation:{horizontal:{dimension:"width",direction:"left",directionStyle:"left",coordinate:"x"},vertical:{dimension:"height",direction:"top",directionStyle:"bottom",coordinate:"y"}}};return j.prototype.init=function(){this.update(!0,!1),this.onInit&&"function"==typeof this.onInit&&this.onInit()},j.prototype.update=function(a,b){a=a||!1,a&&(this.min=h(this.$element[0].getAttribute("min"),0),this.max=h(this.$element[0].getAttribute("max"),100),this.value=h(this.$element[0].value,Math.round(this.min+(this.max-this.min)/2)),this.step=h(this.$element[0].getAttribute("step"),1)),this.handleDimension=g(this.$handle[0],"offset"+i(this.DIMENSION)),this.rangeDimension=g(this.$range[0],"offset"+i(this.DIMENSION)),this.maxHandlePos=this.rangeDimension-this.handleDimension,this.grabPos=this.handleDimension/2,this.position=this.getPositionFromValue(this.value),this.$element[0].disabled?this.$range.addClass(this.options.disabledClass):this.$range.removeClass(this.options.disabledClass),this.setPosition(this.position,b)},j.prototype.handleDown=function(a){if(this.$document.on(this.moveEvent,this.handleMove),this.$document.on(this.endEvent,this.handleEnd),!((" "+a.target.className+" ").replace(/[\n\t]/g," ").indexOf(this.options.handleClass)>-1)){var b=this.getRelativePosition(a),c=this.$range[0].getBoundingClientRect()[this.DIRECTION],d=this.getPositionFromNode(this.$handle[0])-c,e="vertical"===this.orientation?this.maxHandlePos-(b-this.grabPos):b-this.grabPos;this.setPosition(e),b>=d&&b<d+this.handleDimension&&(this.grabPos=b-d)}},j.prototype.handleMove=function(a){a.preventDefault();var b=this.getRelativePosition(a),c="vertical"===this.orientation?this.maxHandlePos-(b-this.grabPos):b-this.grabPos;this.setPosition(c)},j.prototype.handleEnd=function(a){a.preventDefault(),this.$document.off(this.moveEvent,this.handleMove),this.$document.off(this.endEvent,this.handleEnd),this.$element.trigger("change",{origin:this.identifier}),this.onSlideEnd&&"function"==typeof this.onSlideEnd&&this.onSlideEnd(this.position,this.value)},j.prototype.cap=function(a,b,c){return b>a?b:a>c?c:a},j.prototype.setPosition=function(a,b){var c,d;void 0===b&&(b=!0),c=this.getValueFromPosition(this.cap(a,0,this.maxHandlePos)),d=this.getPositionFromValue(c),this.$fill[0].style[this.DIMENSION]=d+this.grabPos+"px",this.$handle[0].style[this.DIRECTION_STYLE]=d+"px",this.setValue(c),this.position=d,this.value=c,b&&this.onSlide&&"function"==typeof this.onSlide&&this.onSlide(d,c)},j.prototype.getPositionFromNode=function(a){for(var b=0;null!==a;)b+=a.offsetLeft,a=a.offsetParent;return b},j.prototype.getRelativePosition=function(a){var b=i(this.COORDINATE),c=this.$range[0].getBoundingClientRect()[this.DIRECTION],d=0;return"undefined"!=typeof a["page"+b]?d=a["client"+b]:"undefined"!=typeof a.originalEvent["client"+b]?d=a.originalEvent["client"+b]:a.originalEvent.touches&&a.originalEvent.touches[0]&&"undefined"!=typeof a.originalEvent.touches[0]["client"+b]?d=a.originalEvent.touches[0]["client"+b]:a.currentPoint&&"undefined"!=typeof a.currentPoint[this.COORDINATE]&&(d=a.currentPoint[this.COORDINATE]),d-c},j.prototype.getPositionFromValue=function(a){var b,c;return b=(a-this.min)/(this.max-this.min),c=Number.isNaN(b)?0:b*this.maxHandlePos},j.prototype.getValueFromPosition=function(a){var b,c;return b=a/(this.maxHandlePos||1),c=this.step*Math.round(b*(this.max-this.min)/this.step)+this.min,Number(c.toFixed(this.toFixed))},j.prototype.setValue=function(a){(a!==this.value||""===this.$element[0].value)&&this.$element.val(a).trigger("input",{origin:this.identifier})},j.prototype.destroy=function(){this.$document.off("."+this.identifier),this.$window.off("."+this.identifier),this.$element.off("."+this.identifier).removeAttr("style").removeData("plugin_"+k),this.$range&&this.$range.length&&this.$range[0].parentNode.removeChild(this.$range[0])},a.fn[k]=function(b){var c=Array.prototype.slice.call(arguments,1);return this.each(function(){var d=a(this),e=d.data("plugin_"+k);e||d.data("plugin_"+k,e=new j(this,b)),"string"==typeof b&&e[b].apply(e,c)})},"rangeslider.js is available in jQuery context e.g $(selector).rangeslider(options);"});
$(function(){
$('input[type="range"]').rangeslider({
polyfill:false,
onInit:function(){
},
onSlideEnd:function(position, value){
//console.log('onSlideEnd');
//console.log('position: ' + position, 'value: ' + value);
}
});
});
var $range = $(".js-range-slider"),
$input = $(".js-input"),
instance,
min = 1,
max = 1000;
$range.ionRangeSlider({
type: "single",
min: min,
max: max,
from: 500,
onStart: function (data) {
$input.prop("value", data.from);
},
onChange: function (data) {
$input.prop("value", data.from);
}
});
instance = $range.data("ionRangeSlider");
$input.on("change keyup", function () {
var val = $(this).prop("value");
// validate
if (val < min) {
val = min;
} else if (val > max) {
val = max;
}
instance.update({
from: val
});
});
html{
height:100%;
background:#42426b;
background:radial-gradient(#31314a,#42426b);
background-repeat:no-repeat;
}
body{
margin:0;
color:#444;
padding:50px;
font:300 18px/18px Roboto, sans-serif;
}
*,:after,:before{box-sizing:border-box}
.pull-left{float:left}
.pull-right{float:right}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
.rangeslider,
.rangeslider__fill {
display:block;
border-radius:10px;
}
.rangeslider {
position:relative;
}
.rangeslider:after{
top:50%;
left:0;
right:0;
content:'';
width:100%;
height:5px;
margin-top:-2.5px;
border-radius:5px;
position:absolute;
background:#212131;
}
.rangeslider--horizontal{
width:100%;
height:28px;
}
.rangeslider--vertical{
width:5px;
min-height:150px;
max-height:100%;
}
.rangeslider--disabled{
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
opacity:0.4;
}
.rangeslider__fill{
position:absolute;
background:#ff637b;
}
.rangeslider--horizontal .rangeslider__fill{
top:0;
height:100%;
}
.rangeslider--vertical .rangeslider__fill{
bottom:0;
width:100%;
}
.rangeslider__handle{
top:50%;
width:28px;
height:28px;
cursor:pointer;
margin-top:-14px;
background:white;
position:absolute;
background:#ff637b;
border-radius:50%;
display:inline-block;
}
.rangeslider__handle:active{
background:#ff5a7b;
}
.rangeslider__fill,
.rangeslider__handle{
z-index:1;
}
.rangeslider--horizontal .rangeslider__fill{
top:50%;
height:5px;
margin-top:-2.5px;
}
/* Budget */
.budget-wrap{
padding:40px;
background:#292942;
box-shadow:0 25px 55px 0 rgba(0,0,0,.21),0 16px 28px 0 rgba(0,0,0,.22);
}
.budget-wrap .header .title{
color:#fff;
font-size:18px;
margin-bottom:30px;
}
.budget-wrap .header .title .pull-right{
color:#ff5a84;
font-size:24px;
font-weight:400;
}
.budget-wrap .footer{
margin-top:30px;
}
.budget-wrap .footer .btn{
color:inherit;
padding:12px 24px;
border-radius:50px;
display:inline-block;
text-decoration:none;
}
.budget-wrap .footer .btn.btn-def{
color:#525263;
}
.budget-wrap .footer .btn.btn-pri{
color:#eee;
background:#ff5a84;
}
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/wordpress/wp-content/themes/insido/insido/style_sbi_mg.css" />
</head>
<body>
<div class="budget-wrap">
<div class="budget">
<div class="header">
<div class="title clearfix">Enter Your Amount <span class="pull-right"></span></div>
</div>
<div class="content">
<input type="text" class="js-input" name="LoanAmntVal" id="LoanAmntVal" class="text" value="100">
<input type="range" class="js-range-slider" min="1" max="1000" value="20" data-rangeslider>
</div>
</div>
</div>
</body>
</html>
Fiddle:
https://jsfiddle.net/anoopcr/ojLxhfp7/18/
The issue I am facing is here is the text box and range slider are not respnding each other.
You could give the slider its own ID as well as the textbox.
Then using jQuery, it is simple to attach events to each one of them.
$('#slider').on('input change',function(){
$('#textbox').val($(this).val());
});
$('#textbox').keyup(function(e){
if (e.keyCode==13) { //only activates after pressing Enter key
var val = $(this).val().replace(/\D/g,''); // check only for digits
$('#slider').val(val);
}
});
html{
height:100%;
background:#42426b;
background:radial-gradient(#31314a,#42426b);
background-repeat:no-repeat;
}
body{
margin:0;
color:#444;
padding:50px;
font:300 18px/18px Roboto, sans-serif;
}
*,:after,:before{box-sizing:border-box}
.pull-left{float:left}
.pull-right{float:right}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
.rangeslider,
.rangeslider__fill {
display:block;
border-radius:10px;
}
.rangeslider {
position:relative;
}
.rangeslider:after{
top:50%;
left:0;
right:0;
content:'';
width:100%;
height:5px;
margin-top:-2.5px;
border-radius:5px;
position:absolute;
background:#212131;
}
.rangeslider--horizontal{
width:100%;
height:28px;
}
.rangeslider--vertical{
width:5px;
min-height:150px;
max-height:100%;
}
.rangeslider--disabled{
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
opacity:0.4;
}
.rangeslider__fill{
position:absolute;
background:#ff637b;
}
.rangeslider--horizontal .rangeslider__fill{
top:0;
height:100%;
}
.rangeslider--vertical .rangeslider__fill{
bottom:0;
width:100%;
}
.rangeslider__handle{
top:50%;
width:28px;
height:28px;
cursor:pointer;
margin-top:-14px;
background:white;
position:absolute;
background:#ff637b;
border-radius:50%;
display:inline-block;
}
.rangeslider__handle:active{
background:#ff5a7b;
}
.rangeslider__fill,
.rangeslider__handle{
z-index:1;
}
.rangeslider--horizontal .rangeslider__fill{
top:50%;
height:5px;
margin-top:-2.5px;
}
/* Budget */
.budget-wrap{
padding:40px;
background:#292942;
box-shadow:0 25px 55px 0 rgba(0,0,0,.21),0 16px 28px 0 rgba(0,0,0,.22);
}
.budget-wrap .header .title{
color:#fff;
font-size:18px;
margin-bottom:30px;
}
.budget-wrap .header .title .pull-right{
color:#ff5a84;
font-size:24px;
font-weight:400;
}
.budget-wrap .footer{
margin-top:30px;
}
.budget-wrap .footer .btn{
color:inherit;
padding:12px 24px;
border-radius:50px;
display:inline-block;
text-decoration:none;
}
.budget-wrap .footer .btn.btn-def{
color:#525263;
}
.budget-wrap .footer .btn.btn-pri{
color:#eee;
background:#ff5a84;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<div class="budget-wrap">
<div class="budget">
<div class="header">
<div class="title clearfix">Enter Your Amount <span class="pull-right"></span></div>
</div>
<div class="content">
<input id="textbox" type="text" class="js-input" name="LoanAmntVal" id="LoanAmntVal" class="text" value="100">
<input id="slider" type="range" class="js-range-slider" min="1" max="1000" value="20" data-rangeslider>
</div>
</div>
</div>
I have two drop menus that I need to close when a user clicks outside of them, or on the other drop menu. I have tried several methods without success and only one works slightly. Currently, the "state" menu will open and close properly (the first time) and then not work correctly the second time. but will work properly the 3rd time, and so on. Not sure what's going on here. Any help would be great!
Here's my fiddle: http://jsfiddle.net/SteveSerrano/rc7fhhhu/6/
HTML:
<div class="state_box">
<input type="checkbox" id="state-tgl" onblur="myFunction()">
<label id="state-tgl-label" for="state-tgl"> <span class="collapse_tiny">Choose a state</span>
<img src="/images/template2014/dropdown-black.svg" style="vertical-align:middle; width:10px;">
</label>
<ul class="state-menu" id="state_drop-menu">
<li class="option"><span class="collapse_tiny">Connecticut</span>
</li>
<li><span class="collapse_tiny">New Hampshire</span>
</li>
<li><span class="collapse_tiny">New Jersey</span>
</li>
<li><span class="collapse_tiny">New York</span>
</li>
</ul>
</div>
<br>
<br>
<br>
<div class="carrier_box">
<input type="checkbox" id="carrier-tgl">
<label id="carrier-tgl-label" for="carrier-tgl"> <span class="collapse_tiny">Select a carrier</span>
<img src="/images/template2014/dropdown-black.svg" style="vertical-align:middle; width:10px;">
</label>
<ul id="carrier_drop-menu">
<li><span class="collapse_tiny">Carrier 1</span><span class="collapse expand_tiny inline">Conn.</span>
</li>
<li><span class="collapse_tiny">Carrier 2</span><span class="collapse expand_tiny inline">N.H.</span>
</li>
<li><span class="collapse_tiny">Carrier 3</span><span class="collapse expand_tiny inline">N.J.</span>
</li>
<li><span class="collapse_tiny">Carrier 4</span><span class="collapse expand_tiny inline">N.Y</span>
</li>
</ul>
</div>
<br>
<br>
CSS:
.state_box {
margin-bottom:-9px;
width:320px;
}
#state-tgl-label {
padding-left:10px;
padding-right:10px;
padding-bottom:7px;
padding-top:15px;
background-color:rgba(6, 0, 0, 0.09);
}
.state_box ul {
margin:0;
padding:0;
list-style-type: none;
}
.state_box ul li {
display:inline;
}
.state_box ul ul {
display:inline;
}
.state_box ul li a {
text-decoration:none;
padding-left:16px;
color:#000;
font-family:'Raleway', Arial, Helvetica, sans-serif;
font-weight:500;
font-size:23px;
font-size:2.3rem;
text-transform:uppercase;
vertical-align:-8px;
color:#939598;
}
.state_box ul li a.first_state {
padding-left:0px;
}
.state_box ul li .third_level {
color:#a7a9ac;
font-size:18px;
font-size:1.8rem;
vertical-align:-5px;
}
.state_box ul li .fourth_level {
color:#BCBEC0;
font-size:14px;
font-size:1.4rem;
vertical-align:-3px;
}
.state_box ul li a:hover {
color:#808285;
}
.state_box ul li .selected_state {
font-size:36px;
font-size:3.6rem color:#000000;
text-transform:uppercase;
vertical-align:text-top;
color:#000;
font-family:'Raleway', Arial, Helvetica, sans-serif;
}
#state-tgl {
position:absolute;
/* IE 8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* Real Browsers */
opacity:0;
}
#state-tgl-label {
font-size:28px;
font-size:1.8rem;
color:#000000;
font-family:'Raleway', Arial, Helvetica, sans-serif;
/*font-weight:500;*/
display:block;
}
#state-tgl-label img {
float:right;
margin-top:5px;
}
#state_drop-menu {
position:relative;
z-index:9999;
background-color:rgba(6, 0, 0, 0.09);
/*border:solid 2px black;*/
width:320px;
padding-top:8px;
padding-bottom:8px;
display:none;
max-height:0px;
transition: max-height 0.25s ease;
margin-top:10px;
}
#state_drop-menu li {
display:block;
padding:0px;
margin:0px;
width:100%;
}
#state_drop-menu li a {
font-size:36px;
font-size:1.8rem;
color:black;
padding:0px;
margin:0px;
display:block;
padding-left:8px;
padding-right:8px;
}
#state_drop-menu li a:hover {
color:white;
background-color:black;
}
#state-tgl:checked ~ #state_drop-menu {
display:block;
max-height:1000px;
}
/*########### Carrier Drop Menu ############*/
.carrier_box {
margin-bottom:-9px;
width:320px;
}
.carrier_box ul {
margin:0;
padding:0;
list-style-type: none;
}
.carrier_box ul li {
display:inline;
}
.carrier_box ul ul {
display:inline;
}
.carrier_box ul li a {
text-decoration:none;
padding-left:16px;
color:#000;
font-family:'Raleway', Arial, Helvetica, sans-serif;
font-weight:500;
font-size:23px;
font-size:2.3rem;
text-transform:uppercase;
vertical-align:-8px;
color:#939598;
}
.carrier_box ul li a.first_carrier {
padding-left:0px;
}
.carrier_box ul li .third_level {
color:#a7a9ac;
font-size:18px;
font-size:1.8rem;
vertical-align:-5px;
}
.carrier_box ul li .fourth_level {
color:#BCBEC0;
font-size:14px;
font-size:1.4rem;
vertical-align:-3px;
}
.carrier_box ul li a:hover {
color:#808285;
}
.carrier_box ul li .selected_carrier {
font-size:36px;
font-size:3.6rem color:#000000;
text-transform:uppercase;
vertical-align:text-top;
color:#000;
font-family:'Raleway', Arial, Helvetica, sans-serif;
}
#carrier-tgl {
position:absolute;
/* IE 8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* Real Browsers */
opacity:0;
}
#carrier-tgl-label {
padding-left:10px;
padding-right:10px;
padding-bottom:7px;
padding-top:15px;
background-color:rgba(6, 0, 0, 0.09);
font-size:28px;
font-size:1.8rem;
color:#000000;
font-family:'Raleway', Arial, Helvetica, sans-serif;
/*font-weight:500;*/
display:block;
}
#carrier-tgl-label img {
float:right;
margin-top:5px;
}
#carrier_drop-menu {
position:relative;
z-index:9999;
background-color:rgba(6, 0, 0, 0.09);
/*border:solid 2px black;*/
width:320px;
padding-top:8px;
padding-bottom:8px;
display:none;
max-height:0px;
transition: max-height 0.25s ease;
margin-top:10px;
}
#carrier_drop-menu li {
display:block;
padding:0px;
margin:0px;
width:100%;
}
#carrier_drop-menu li a {
font-size:36px;
font-size:1.8rem;
color:black;
padding:0px;
margin:0px;
display:block;
padding-left:8px;
padding-right:8px;
}
#carrier_drop-menu li a:hover {
color:white;
background-color:black;
}
#carrier-tgl:checked ~ #carrier_drop-menu {
display:block;
max-height:1000px;
}
#charts {
margin-top:50px;
}
JQuery:
/*
$(document).click(function(){
$(".state-menu").hide();
});
$(".state_box").click(function(e){
e.stopPropagation();
});*/
$(".state_box").click(function(){
$(".state-menu").show(1);
$(document).click(function(){
$(".state-menu").hide();
});
});
/*function myFunction() {
$(document).click(function () {
$(".state-menu").hide(1);
});
}*/
Edited answer based on OPs comments below:
Working example here: http://jsfiddle.net/am83oczu/
Add a specific ID to each dropdown menu (example below uses id="state-dropdown" and id="carrier-dropdown").
You also need to remove the <input type="checkbox"> you have in place as its onblur attribute messes with everything.
$(document).on('click', function (event) {
// Show the states dropdown if this was clicked...
if (document.getElementById('state-tgl-label') === event.target ||
$.contains(document.getElementById('state-tgl-label'), event.target)) {
$('#carrier-dropdown').hide();
if ($('#state-dropdown').is(':visible')) {
$('#state-dropdown').hide();
} else {
$('#state-dropdown').show(1);
}
}
// ... or show the carrier dropdown if this was clicked
if (document.getElementById('carrier-tgl-label') === event.target ||
$.contains(document.getElementById('carrier-tgl-label'), event.target)) {
$('#state-dropdown').hide();
if ($('#carrier-dropdown').is(':visible')) {
$('#carrier-dropdown').hide();
} else {
$('#carrier-dropdown').show(1);
}
}
});
Following is not a very good solution - but this is based on the current structure of your html (as in jsFiddle) and my understanding of what you are trying to do...
$(".state_box").click(function (e) {
e.stopPropagation();
e.preventDefault();
$("#carrier_drop-menu").hide();
$('#state-tgl').prop('checked', true);
$(".state-menu").show();
});
$(".carrier_box").click(function (e) {
e.stopPropagation();
e.preventDefault();
$(".state-menu").hide();
$('#carrier-tgl').prop('checked', true);
$("#carrier_drop-menu").show();
});
$(document).click(function () {
$(".state-menu").hide();
$("#carrier_drop-menu").hide();
$('#state-tgl').prop('checked', false);
$('#carrier-tgl').prop('checked', false);
});
See jsFiddle here
Edit Based on comments - the code is updated to:
/*As initially the menus are hidden using css class
So toggle won't work for the first time.
So we need to add these two lines*/
$("#carrier_drop-menu").hide();
$(".state-menu").hide();
$(".state_box").click(function (e) {
e.stopPropagation();
e.preventDefault();
$("#carrier_drop-menu").hide();
$('#state-tgl').prop('checked', true);
$(".state-menu").toggle();
});
$(".carrier_box").click(function (e) {
e.stopPropagation();
e.preventDefault();
$(".state-menu").hide();
$('#carrier-tgl').prop('checked', true);
$("#carrier_drop-menu").toggle();
});
$(document).click(function () {
$(".state-menu").hide();
$("#carrier_drop-menu").hide();
$('#state-tgl').prop('checked', false);
$('#carrier-tgl').prop('checked', false);
});
Updated JsFiddle here.
Let's try by using this method here http://www.designchemical.com/blog/index.php/jquery/jquery-simple-vertical-accordion-menu/
You should manage to do what you want by following accordion menu tuto.
I want to hide the div "loginArea" and then fade in the div "newAccArea". Whenever I try to activate it, it shows the div "newAccArea" for only a moment and then hides it too. I know it sounds like an obvious solution, that I have an extra div or forgot a closing div tag, but I couldn't find any. Please help me out, thank you. Summarized Code HTML:
<div class="backarea">
<div class="loginArea">
<!--Random Stuff-->
</div>
<div class="newAccArea">
<!--More Random Stuff-->
</div>
</div>
JQuery:
$(document).ready(function(){
$('.createone').click(function(){ //".createone" is nothing you have to //worry about
$('.loginArea').hide('slow');
$('.newAccArea').fadeTo('fast',1);
});
});
**FULL CODE JUST INCASE**
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Log in box</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Ramabhadra' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Khand:700' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Merriweather:700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div class="successLog">
<div class="header">
<ul class="cats">
<li class="listItems" id="home">Home</li>
<li class="listItems" id="dashboard">Dashboard</li>
<li class="listItems" id="contactUs">Contact Us</li>
</ul>
</div>
<div class='dropdownHome'>
<ul class="catLists">
<li class="catListItem">Event Calender</li><br>
<li class="catListItem">Bookings</li><br>
<li class="catListItem">Picture Gallery</li><br>
<li class="catListItem">Login</li><br>
<li class="catListItem">Sign Up</li>
</ul>
</div>
<div class="dropdownDashboard">
<ul class="catLists">
<li class="catListItem">Saved Info</li><br>
<li class="catListItem">Friends</li><br>
<li class="catListItem">Document</li><br>
<li class="catListItem">Profile</li><br>
<li class="catListItem">Account</li>
</ul>
</div>
<div class="dropdownContactUs">
<ul class="catLists">
<li class="catListItem">Email</li><br>
<li class="catListItem">Forum</li><br>
<li class="catListItem">Phone-numbers</li><br>
<li class="catListItem">Facebook</li><br>
<li class="catListItem">Twitter</li>
</ul>
</div><Br><Br><Br>
<h1 class="welcomeBack">Hello! Welcome back to Code Acedamy</h1>
<!--<button class="logOut">Log Out</button>-->
</div>
<div class="backarea">
<div class="loginArea">
<input type="text" placeholder="Username" class="userInput" name="userInput"><h2 class="username">Username:</h2></input>
<input type="password" class="passInput" placeholder="Password" name="passInput"<h2 class="password">Password:</h2></input>
<button class="login">Log In</button>
<p class="createacc">Don't have an account? <span class="createone">Create one.</span></p>
<p class="error">Sorry but that username or password is incorrect.</p>
</div>
<div class="newAccArea">
<h1 class="newAccText">Create New Account</h1>
<h2 class="newUsername" id="position">Username:</h2>
<input class="newUser" type="text" name="newUser" placeholder="Username" id="position"></input>
<h2 class="newPassword" id="position">Password:</h2>
<input class="newPass" type="password" name="newPass" placeholder="Password" id="position"></input>
<h2 class="newPassword" id="position">Password:</h2>
<h2 class="confNewPassword" id="position">Confirm Password:</h2>
<input class="confNewPass" type="password" name="confNewPass" placeholder="Confirm Password" id="position"></input>
<button class="createAccButt">Create Account</button>
</div>
</div>
</body>
</html>
CSS:
body {
background-color:#F0F0F0;
}
.successLog {
background-color:#8A8A8A;
height:450px;
width:700px;
z-index:1;
opacity:0;
}
/*CREATE NEW ACCOUNT AREA*/
.newAccArea {
position:relative;
bottom:500px;
opacity:0;
z-index:-5;
}
.newUsername {
position:relative;
top:80px;
text-align:center;
color:black;
font-family: 'Oswald', sans-serif;
}
.newUser {
position:relative;
top:60px;
left:45px;
padding:5px;
font-family: 'Lato', sans-serif;
}
.newPassword {
position:relative;
top:42px;
text-align:center;
color:black;
font-family: 'Oswald', sans-serif;
}
.newPass {
position:relative;
top:23px;
left:45px;
padding:5px;
font-family: 'Lato', sans-serif;
}
.confNewPassword {
position:relative;
bottom:50px;
text-align:center;
color:black;
font-family: 'Oswald', sans-serif;
}
.confNewPass {
position:relative;
bottom:70px;
left:45px;
padding:5px;
font-family: 'Lato', sans-serif;
}
.createAccButt {
color:white;
background-color:#E60716;
padding:5px;
font-family: 'Oswald', sans-serif;
border:none;
margin:10px;
position:relative;
bottom:77;
left:78;
height:40;
width:80;
font-size:20px;
border-radius:4px;
}
.createAccButt:hover {
background-color:#A81919;
}
.newAccText {
position:relative;
top:100px;
font-family: 'Oswald', sans-serif;
font-size:30px;
text-align:center;
color:red;
}
/*LOG IN AREA*/
.backarea {
background-color:#6DE3E3;
width:255px;
height:300px;
border:1px solid black;
border-radius:9px;
position:relative;
top:67px;
left:230px;
position:fixed;
}
.loginArea {
background-color:#6DE3E3;
width:255px;
height:300px;
border:1px solid black;
border-radius:9px;
}
.userInput {
padding:5px;
margin:7px;
font-family: 'Lato', sans-serif;
position:relative;
top:50px;
left:35px;
border:1px solid white;
}
.userInput:hover {
border:2px solid #60BF68;
}
.username {
color:#E60716;
font-family: 'Oswald', sans-serif;
position:relative;
bottom:50px;
left:75px;
}
.passInput {
padding:5px;
margin:7px;
font-family: 'Lato', sans-serif;
position:relative;
top:20px;
left:35px;
border:1px solid white;
}
.passInput:hover {
border:2px solid #60BF68;
}
.password {
color:#E60716;
font-family: 'Oswald', sans-serif;
position:relative;
bottom:80px;
left:75px;
}
.login {
color:white;
background-color:#E60716;
padding:5px;
font-family: 'Oswald', sans-serif;
border:none;
margin:10px;
position:relative;
bottom:60;
left:71;
height:40;
width:80;
font-size:20px;
border-radius:4px;
}
.login:hover {
background-color:#B81414;
border:1px solid black;
}
.createacc {
position:relative;
bottom:73px;
font-family: 'Roboto Condensed', sans-serif;
padding:8
}
.createone {
text-decoration:none;
color:#4548E6;
font-size:13px;
}
.createone:hover {
color:purple;
}
.error {
color:red;
font-family: 'Merriweather', serif;
font-size:10;
position:relative;
bottom:93px;
text-align:center;
opacity:0
}
/*DROP DOWN MENU
/*DEFUALT CLASSES*/
.clicked {
color:#fff;
}
.invis {
opacity:0;
}
/*HTML CLASSES*/
.header {
background-color:black;
height:50px;
border-radius:10px;
z-index:10;
}
li {
color:white;
display:inline;
width:100%
}
.cats {
padding:6px;
width:100%;
font-size:27px;
font-family: 'Khand', sans-serif;
}
.cats .listItems:hover {
width:100px;
font-size:27px;
font-family: 'Khand', sans-serif;
color:#96F29C;
display:inline;
position:relative;
padding-left:70px;
}
.cats .listItems:active {
width:100px;
font-size:27px;
font-family: 'Khand', sans-serif;
color:#318A29;
display:inline;
position:relative;
padding-left:70px;
}
.listItems {
padding:70px;
}
.dropdownHome {
height:200px;
width:180px;
background-color:#9E9E9E;
position:absolute;
left:14px;
bottom:210px;
border:2px solid black;
z-index:1;
border-radius:13px;
opacity:0;
}
.dropdownDashboard {
height:200px;
width:180px;
background-color:#9E9E9E;
position:absolute;
left:255px;
bottom:210px;
border:2px solid black;
z-index:1;
border-radius:13px;
opacity:0;
}
.dropdownContactUs {
height:200px;
width:180px;
background-color:#9E9E9E;
position:absolute;
left:507px;
bottom:210px;
border:2px solid black;
z-index:1;
border-radius:13px;
opacity:0;
}
.catLists {
font-size:18px;
text-align:center;
position:relative;
right:20;
font-family: 'Ramabhadra', sans-serif;
}
.catListItem {
color:black;
}
.welcomeBack {
font-family: 'Oswald', sans-serif;
color:blue;
text-align:center;
}
.logOut {
position:relative;
top:130px;
left:312px;
padding:5px;
border:none;
background-color:red;
color:white;
width:100px;
height:40px;
font-size:20px;
font-family: 'Oswald', sans-serif;
}
.logOut:hover {
background-color:#B51919;
border-top:1px solid #F7A3A3;
border-left:1px solid #F7A3A3;
}
JavaScript:
$(document).ready(function(){
$('.createone').click(function(){
$('.loginArea').hide('slow');
$('.newAccArea').fadeTo('fast',1);
});
});
$(document).ready(function(){
$('.login').click(function(){
var userResult = $('input[name=userInput]').val();
var passResult = $('input[name=passInput]').val();
if(userResult === "CodeAcademy" && passResult === "fun-coding" || userResult === "User_Example" && passResult === "Pass_Example") {
$('.backarea').fadeOut('fast');
$('.successLog').fadeTo('fast',1);
}
else {
$('.passInput').css('border-color','red');
$('.userInput').css('border-color','red');
$('.error').fadeTo('fast',1);
$('.error').effect( "bounce",{ times: 3 },"slow" );
};
});
});
$(document).ready(function(){
$('#home').click(function(){
$('.dropdownHome').slideToggle('slow');
$('.dropdownHome').fadeTo('fast',1);
});
});
$(document).ready(function(){
$('#dashboard').click(function(){
$('.dropdownDashboard').slideToggle('slow');
$('.dropdownDashboard').fadeTo('fast',1);
});
});
$(document).ready(function(){
$('#contactUs').click(function(){
$('.dropdownContactUs').slideToggle('slow');
$('.dropdownContactUs').fadeTo('fast',1);
});
});
The reason you don't see the newAccArea is because you have it relatively positioned 500 pixels from the bottom, which ends up putting all of the content off screen, above the top of the viewport. The reason you're able to see it while the loginArea is fading out is because as long as the loginArea is still visible, the starting point of the newAccArea is lower (300 pixels lower, since the height of loginArea is 300px), so the 500 pixels from the bottom of that starting point is low enough to still see it.
You just need to set the position to what it needs to be, when loginArea isn't displayed, and you should see it fine.
You said I want to hide the div "loginArea" and then fade in the div "newAccArea". In this case, you may use a callback function to show the newAccArea div after the hiding has finished:
$(document).ready(function() {
$('.createone').click(function() {
$('.loginArea').hide('slow', function() {
// It'll fade in after hiding the .loginArea
$('.newAccArea').fadeTo('fast', 1);
});
});
});
Regarding the problem you mentioned, it should not happen according to your code. The newAccArea div should not be hidden because it's out side of the loginArea div.