What I am trying to do is when you click on a button that has the class ".option" it will show the div that has the id "#dialog" and then it will add the class .active to the button clicked (there maybe more than one button that shows different dialogues later one) as well as adding the class ".noScroll" to the body. When the dialogue is shown it can be closed by clicking anywhere on the "#dialog" but NOT the ".dialogPage" which is the div that is inside the "#dialog" div. If the dialogue has been closed, the class that has been added to the body and to the button shall be removed.
Here is the button that need to be clicked to show the dialog:
<a class="option" href="edit_account.php">Your Account</a>
The following HTML represents the structure of my Dialog:
<div id="dialog">
<div id="dialogPage" class="dialogPage">
<p>Edit your account here</p>
</div>
</div>
Here is the related CSS:
body {
color: #4A4A4A;
background-color: #F7F7F7;
font-family: 'arial', sans-serif;
font-size: 0.95em;
line-height: 150%;
text-align: center;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
-webkit-overflow-scrolling: touch;
overflow-y: auto;
overflow-x: hidden;
}
#dialog {
display: none;
background-color: rgba(25,30,37,0.95);
width: 100%;
position: fixed;
bottom:0; top: 0; left: 0; right: 0;
margin-top: 70px;
z-index: 900;
overflow-y: auto;
overflow-x: hidden;
}
.dialogPage {
background-color: #F7F7F7;
border: 2px solid #ffffff;
width: 900px; min-width: 900px;
padding: 20px;
margin: 50px auto;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.4);
box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.4);
}
.noScroll {
overflow-y: hidden;
overflow-x: hidden;
}
Here is the JavaScript I am currently using, but please do not built on it as it is wrong I am sure:
$(".option, #dialog").on('click', function() {
$("#dialog").toggle(29);
$("body").toggleClass("noScroll");
if (e.target.id != 'dialogPage' && !$('#dialogPage').find(e.target).length) {
$("#dialog").hide();
}
});
Try the following:
$('.option').click(function(e) {
e.preventDefault();
$('#dialog').show();
$('body').addClass('noScroll');
$(this).addClass('active');
return false;
});
$('#dialog').click(function(e) {
$(this).hide();
$('body').removeClass('noScroll');
$('.option').removeClass('active');
});
$('#dialogPage').click(function(e) {
e.stopPropagation();
});
I didn't see any use of the .active class in your current code, so that is just a guess.
Demo: http://jsfiddle.net/verashn/2Xh7d/
Related
I have a simple emoji picker and the ballon remains open as default when the page is refreshed, I can't find a way how to keep it close and only open the ballon when pressing a button.
HTML
<div class="container">
<div class="emoji-btn open"><img src='images/smileys.png' title='Smileys'>
<!--this is the div I want to keep hidden till I click the button > --> <div class="emoji-popup">
<div class="emoji-wrapper"></div>
</div>
</div>
</div>
JS
emojibtn.addEventListener("click", function (e) {
e.stopPropagation();
this.classList.toggle("open");
});
document.body.addEventListener("click", function () {
emojibtn.classList.remove("open");
});
CSS
.emoji-popup {
position: absolute;
top: -140px;
left: 10px;
height: 130px;
width: 194px;
background: #999;
border-radius: 2px;
text-align: left;
overflow-y: auto;
opacity: 0;
pointer-events: none;
transition: all 0.25s;
box-sizing: border-box;
}
.emoji-wrapper {
overflow: hidden;
padding: 10px;
box-sizing: border-box;
}
.emoji-popup .emoji-img {
margin: auto;
width: 30px;
height: 30px;
text-align: center;
border-radius: 5px;
}
.emoji-popup .emoji-img:hover {
background: rgba(0, 0, 0, 0.25);
}
You can add the property display: none; ( https://developer.mozilla.org/en-US/docs/Web/CSS/display), visibility: hidden(https://developer.mozilla.org/en-US/docs/Web/CSS/visibility) or opacity: 0; (https://developer.mozilla.org/en-US/docs/Web/CSS/opacity). Then onClick you can add the class open with the properties display: block (if it's a div), visibility: visible or opacity: 1.
I have a toggle button that has been coded up, but I dont think its good to use in my form, since its a pretty bad hacky code to select either option.
Is there a better/efficient way to code this toggle button instead? I am not good with jQuery, so any help with provided functionality would be helpful.
If there is also a way of programming it to slide the toggle left/right instead of clicking left/right would be great also.
I have also attached these images to show the behaviour of how it should function:
toggle behaviour diagram
current html file(below) button look for left/right toggle buttons
Any questions, please ask...
<html>
<head>
<style>
#toggle-slide {
border: 4px #303F9F solid;
border-radius: 5px;
display: flex;
width:300px;
color: white;
font-weight: 700;
text-align: center;
cursor: pointer;
}
#toggle-slide div {
flex:1;
padding: 10px 20px;
}
#toggle-option-0 {
background-color:#3F51B5;
}
#toggle-option-1 {
background-color:white;
}
</style>
<script>
function toggle() {
realToggle = document.getElementById('real-toggle');
if (realToggle.value == 0) {
realToggle.value=1;
document.getElementById('toggle-option-0').style.backgroundColor='#3F51B5';
document.getElementById('toggle-option-1').style.backgroundColor='#FFF';
} else {
realToggle.value=0;
document.getElementById('toggle-option-0').style.backgroundColor='#FFF';
document.getElementById('toggle-option-1').style.backgroundColor='#3F51B5';
}
}
</script>
</head>
<body>
<div id='toggle-slide' onclick='toggle()'>
<div id='toggle-option-0' class='active'>Private</div>
<div id='toggle-option-1'>Public</div>
<input id='real-toggle' type=hidden name=private value=1 />
</div>
</body>
</html>
A pure CSS version:
On the following snippet there's a hidden checkbox that becomes checked/unchecked when the content in label is clicked. Using the CSS :checked selector, the #background position is changed from 0% to 50% and it's color changes from red to blue.
The background is separated from the text and set with position:absolute (to be easily moved) plus z-index:-1 (which brings it to behind the subtitles). A CSS transition added on the #background animates the changes on it's position/color.
.toggle-slide {
border: 4px #555 solid;
border-radius: 5px;
display: flex;
width: 300px;
color: white;
font-weight: 700;
text-align: center;
cursor: pointer;
position: relative;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none;
}
.toggle-slide .subtitle {
flex: 1;
padding: 10px 20px;
}
#background {
width: 50%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: -1;
background-color: tomato;
-webkit-transition: all 0.6s; /* Safari */
transition: all 0.6s;
-webkit-transition-timing-function: cubic-bezier(0.2,1,0.2,1);
transition-timing-function: cubic-bezier(0.2,1,0.2,1);
}
input[type=checkbox] {
display: none;
}
#real:checked ~ label #background {
background-color: skyblue;
left: 50%;
}
<input id=real type=checkbox name=real />
<label class=toggle-slide for=real>
<div id=background></div>
<div class=subtitle>Private</div>
<div class=subtitle>Public</div>
</label>
You can do this completely in pure css, but since you were asking for jQuery...
$(document).ready(function() {
$('.input-button').click(function() {
if ($('.public').hasClass('selected')) {
$('.public').removeClass('selected');
$('.private').addClass('selected');
$('.slider').stop().animate({
left: '48%'
}, 200);
} else {
$('.private').removeClass('selected');
$('.public').addClass('selected');
$('.slider').stop().animate({
left: '2%'
}, 200);
}
});
});
html,
body {
padding: 0;
margin: 0;
}
.input-button {
width: 200px;
height: 40px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -20px;
position: absolute;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #FFF;
background-color: #2E86AB;
border-radius: 4px;
line-height: 40px;
font-family: sans-serif;
-webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
span {
width: 50%;
height: 100%;
float: left;
text-align: center;
cursor: pointer;
-webkit-user-select: none;
}
.input-button div {
width: 100px;
height: 85%;
top: 50%;
left: 2%;
transform: translateY(-50%);
position: absolute;
background-color: #FFF;
border-radius: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='input-button'>
<div class='slider'></div>
<span class='private'>Private</span>
<span class='public selected'>Public</span>
</div>
Here is a good example of what you were trying to create
jQuery on-off-switch.js Plugin
It also implemented with jQuery and supports the sliding on drag functionality.
How to use the plugin
The issue here is, the div that has a class of filter_sub (the custom menu dropdown) is sliding up (hide thing when click anywhere other than this element and its descendants) when I interact into the jquery ui date picker.
Any ideas, clues, help, suggestions, recommendations to fix my issue?
I want the custom menu dropdown (the one that has a class of filter_sub) to not slide up when I interact into the jquery ui date picker or to be sharpen other that jquery ui datepicker and the custom dropdown menu, when click anywhere then the jquery ui date picker will be hidden as well as the custom dropdown menu will slide up (hide).
$(document).ready(function(){
$(".thehide").hide();
$( ".datepicker" ).datepicker({
dateFormat: "yy-mm-dd"
});
//when authorized person clicks on the attendance menu
$(".filter_pages").unbind().click(function(e){
$(this).next(".filter_sub").slideToggle();
e.preventDefault();
});
$(document).mouseup(function(e)
{
var container = $(".filter_sub");
var calendar = $(".ui-datepicker");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.slideUp();
}
});
});
.filter .filter_has_sub{
padding: 0px;
margin: 0px;
float: left;
margin-left: 7px;
}
.filter_pages{
display: table;
font: normal 12px 'mpregular', san-serif;
padding: 7px;
color: #7e7e7e;
margin-top: 4px;
}
.filter_pages span, .filter_sub a span{
float: left;
display: block;
}
.filter_pages span:first-child, .filter_sub a span:first-child{
margin-right: 6px;
}
.filter_pages span:last-child{
font-size: 8px;
padding-top: 3px;
}
.filter_has_sub:first-child .filter_sub{
margin-left: -100px;
width: 170px;
}
.filter_has_sub:first-child .filter_sub .filter_datepicker{
border: 1px solid #ccc;
display: table;
margin: 5px auto;
}
.filter_has_sub:first-child .filter_sub .filter_datepicker span{
display: block;
margin: 0px 5px 0px 0px;
float: left;
font-size: 20px;
padding: 5px 0px 0px 5px;
color: #7e7e7e;
}
.filter_has_sub:first-child .filter_sub .datepicker{
padding: 5px;
border: none;
margin: 0px;
display: block;
float: left;
width: 120px;
}
.filter_sub{
background: #fff;
position: absolute;
z-index: 99999999;
width: 100px;
margin-left: -30px;
padding: 10px 5px;
margin-top: 5px;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
}
.filter_sub a{
clear: both;
float: none;
display: block;
padding: 5px 10px;
font: normal 14px 'mplight', sans-serif;
color: #555;
text-transform: uppercase;
}
.filter_sub a:hover{
color: #555;
}
.thehide{dsiplay: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="filter_has_sub extend data_filter" style="display: table; margin: 0px auto;">
<span>Filter Data</span><span class="ion-chevron-down"></span>
<div class="filter_sub thehide" id="pagesfilter">
<div class="extend clear" style="height: 5px;"></div>
<div class="filter_datepicker extend clear">
<span class="ion-calendar"></span><input class="form-control datepicker extend" name="from_what_date" placeholder="From what date" required/>
</div>
<div class="filter_datepicker extend clear">
<span class="ion-calendar"></span><input class="form-control datepicker extend" name="to_what_date" placeholder="To what date" required/>
</div>
<button class="btn btn-default center display_table" id="date_filter_button">Go</button>
</div>
</div>
I think you are almost there. Here is what you can do:
In your if clause inside mouseup function, add another
condition: calendar.has(e.target).length===0. Which does the
same thing as the other similar condition i.e. to make sure that the
current target is not a descendant of the ui-datepicker
element.
Also, I noticed that your slideToggle inside click event and your slideUp inside your mouseup event were executing one after another if you clicked on filter_has_sub element to hide the inner elements. Easy fix is to add a stop(true) right before sliding to both slideToggle and slideUp calls.
JS:
$(document).ready(function () {
$(".thehide").hide();
$(".datepicker").datepicker({dateFormat: "yy-mm-dd"});
$(".filter_pages").unbind().click(function (e) {
$(this).next(".filter_sub").stop(true).slideToggle();
e.preventDefault();
});
$(document).mouseup(function (e) {
var container = $(".filter_sub");
var calendar = $(".ui-datepicker");
if (!container.is(e.target) && calendar.has(e.target).length === 0 && container.has(e.target).length === 0) {
container.stop(true).slideUp();
}
});
});
Hope this helps.
The Menu already has toggle enabled, so no problem. So if All you have to do to is to check is if nodeName is HTML if the user clicks outside the target let it be UI calender or the input box of the slide
So, You dont have to check for container.is(e.target)
This is how you can do it ==> (event.target.nodeName === 'HTML')
check out the UPDATED FIDDLE
For more info Look into the jQuery Docs- event.target
In my project, I have this <div> which receives, via jquery function, the content read from several pages and display them as a popup window:
<div id="popup">
<div id="header"> <span id="title"></span> <span id="button">X</span> </div>
<div id="text"> </div>
</div>
The css associated to this is the following:
#popup {
border-style: solid;
border-color: #E0E0E0;
box-shadow: 2px 2px 2px black;
width: 1000px;
height: 900px;
max-width: 1500px;
max-height: 1000px;
}
#header {
background-color: #66B2FF;
}
#title {
text-decoration-color: #E0E0E0;
font: 28px arial;
}
#button {
background-color: #99CCFF;
min-width: 32px;
max-width: 5%;
min-height: 32px;
max-height: 100%;
position:absolute;
right:0px;
text-align:center;
padding-left:10px;
padding-right:10px;
}
#text {
background-color: #FFFFFF;
border-style: solid;
border-color: #E0E0E0;
text-decoration-color: #E0E0E0;
font: 24px sans-serif;
overflow: auto;
}
.ui-resizable-handle {
width: 5px;
height: 5px;
background-color: red;
}
and the content is appended in this <div> through this jquery code:
<script>
$('document').ready(function(){
$('#popup').draggable({
cointainment: "#container"
});
$('#popup').resizable({
cointainment: "#container"
});
$('#popup').hide();
$('#button').click(function(){
$('#popup').hide();
});
$('a').click(function(e){
if($(this).attr('href') != '<c:out value="${pageContext.request.contextPath}/acesso/logout.html"/>') {
e.preventDefault();
$.get($(this).attr('href'), function(data){
var $temp = $('<div/>', {html:data});
$('#title').text($temp.find('title').text());
$('#text').html($temp.remove('head').html());
$('#popup').show();
});
}
});
});
</script>
My problem is the content attached to <div> being displayed ou of the boundaries of the popup, like this:
Someone knows how to solve this?
UPDATE
new code for the css file:
#popup {
border-style: solid;
border-color: #E0E0E0;
box-shadow: 2px 2px 2px black;
max-width: 85%;
max-height: 85%;
}
.ui-resizable-handle {
width: 5px;
height: 5px;
background-color: red;
}
#header {
background-color: #66B2FF;
}
#title {
text-decoration-color: #E0E0E0;
font: 28px arial;
}
#button {
background-color: #99CCFF;
min-width: 32px;
max-width: 5%;
min-height: 32px;
max-height: 100%;
position:absolute;
right:0px;
text-align:center;
padding-left:10px;
padding-right:10px;
}
#text {
overflow: scroll-y;
}
It depends on how you want to solve it:
Make the popup scroll:
#popup {
overflow:scroll-y;
}
The ideal thing is to make the popup fit the content. But the problem is, that size depends on what is generated inside the popup. If it is predictable, maybe you can define some styles to force the geerated stuff to use relative (%) sizes, in this case your problem is solved. I mean, kind of:
#popup {
position:relative;
display:block;
}
#popup > div {
width: 100% !important;
height: 100% !important;
}
This will work if inside #popup there's one div with the rest of the contents. Find out what's inside to make this fit your needs. You can overwrite styles with the !important tag.
If, on the other hand, you really have no idea what will be inside the popup, or everytime is different, you can detect the size of what's inside via javascript, and adjust #popup accordingly. Take a look at clientHeight and clientWidth properties of DOM elements.
Can some please, PLEASE! help me with this problem. Okay so I have a code that at first I thought worked well but I forgot that when the default <img src="test-img-1.jpg" class="actual-img"> content is loaded the first of the three buttons below the image should take the active css state that I've specified for the active buttons to take. Now what I want is for this little code to behave like a normal slider by loading in the css hidden contents into the ".image-area" div and it works when I click on the buttons. Problems only surface when I am I trying to give the first loaded content an active state. One way I believe can fix this (I can't implement it) is to let the first immediate default content be this inline hidden div: (
<div id="image-area2">
<div class="img-area-wrapper">
<img src="test-img-2.jpg" class="actual-img">
</div>
</div>) while somehow letting the first button be set to active. I should also mention that I'm not the best with jquery. Please help me fix this someone!
Here is a fiddle to get a better understanding: http://jsfiddle.net/pyrot/84sU4/
If my way of going about this is totally absurd please let me know.
this is my code:
<script type="text/javascript">
$(document).ready(function() {
//loads default content
//$('#image-area').load($('.menu_top a:first-child').attr('href'));
$('.o-links').click(function() {
// href has to be the id of the hidden content element
var href = $(this).attr('href');
$('#image-area').fadeOut(1000, function() {
$(this).html($('#' + href).html()).fadeIn(1000);
});
return false;
});
});
$(function() {
$('.o-links').click(function(e) {
//e.preventDefault();
$('.o-links').not(this).removeClass('O_Nav_Current');
$(this).addClass('O_Nav_Current');
});
});
</script>
this is my html:
<section id="image-slider-container">
<div class="image-slider-inner">
<div id="image-area">
<div class="img-area-wrapper">
<!--currently this is the default I want to change-->
<img src="test-img-1.jpg" class="actual-img">
</div>
</div>
<div id="image-area2">
<div class="img-area-wrapper">
<!--I would like this to be the default content that when
seen the first button is set to active-->
<img src="test-img-2.jpg" class="actual-img">
</div>
</div>
<div id="image-area3">
<div class="img-area-wrapper">
<img src="test-img-3.jpg" class="actual-img">
</div>
</div>
<div class="slider-buttons">
<div class="slider-buttons-container">
</div>
</div>
</div>
</section>
and this is my css:
#image-slider-container {
width: 100%;
height: auto;
background-color: #ffffff;
padding: 5% 0px 0% 0px;
}
.image-slider-inner {
width: 100%;
height: auto;
max-width: 1040px;
margin: 0px auto;
padding: 0px 20px 0px 20px;
}
#image-area2,
#image-area3 {
width: 100%;
height: auto;
display: none;
}
#image-area {
width: 100%;
height: auto;
}
#image-area .img-area-wrapper {
width: 80%;
height: auto;
max-width: 1140px;
margin: 0px auto;
}
.actual-img {
width: 100%;
height: 100%;
}
.slider-buttons {
width: 100%;
height: auto;
max-width: 1140px;
margin-top: 0px;
}
.slider-buttons-container {
width: 100%;
height: auto;
max-width: 1140px;
margin: 10px auto 0px auto;
text-align: center;
}
.slider-buttons-container a {
border-radius: 360px;
border: 1px #C5C5C5 solid;
padding: 0px 5px 0px 5px;
margin: 0px 5px 0px 5px;
background-color: #efefef;
outline: 0px;
text-decoration: none;
font-size: 12px;
box-shadow: -2px 1px 2px 0px #ADADAD;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
.slider-buttons-container a:hover {
border: 1px #C5C5C5 solid;
padding: 0px 5px 0px 5px;
background-color: #DAD8D8
}
.slider-buttons-container a:active {
position: relative;
top: 2px;
}
.O_Nav_Current {
border: 1px #999999 solid !important;
background-color: #DAD8D8 !important;
}
Problems only surface when I am I trying to give the first loaded content an active state
Does this mean that you want to add a class to the first button?
$('.o-links').click(function(e) {
// ...
}).first().addClass('O_Nav_Current');
instead of using IDs for the slider's items and resetting html contents you can use classes and indexes:
CSS:
.image-area {
width: 100%;
height: auto;
display: none;
}
.image-area:first-of-type {
display: block;
}
JavaScript:
var $slides = $('.image-area'),
$btns = $('a.o-links');
$btns.on('click', function (e) {
var i = $btns.removeClass('O_Nav_Current').index(this);
$(this).addClass('O_Nav_Current');
$slides.filter(':visible').fadeOut(1000, function () {
$slides.eq(i).fadeIn(1000);
});
e.preventDefault();
}).first().addClass('O_Nav_Current');
http://jsfiddle.net/RmF57/