I am using this code:
function check_remember(event) {
if (document.getElementById('rem_email').value == "") {
alert("Harap isi email !");
} else {
document.getElementById('popup_remember').style.display = "none";
event.preventDefault();
}
};
function remember_show() {
document.getElementById('popup_remember').style.display = "block";
};
and this my html :
<button type="button" class="btn-custom remember" onclick="remember_show()">Ingatkan Saya</button>
<!-- PopUp -->
<div id="popup_remember">
<div id="REM">
<form id="form_remember">
<input id="rem_email" name="email" placeholder="Input Email" type="text" class="form-control" required>
<input type="submit" id="sub_rem" value="Agree" onclick="check_remember(event)">
</form>
</div>
</div>
The problem is, i do not know how to when click body modal will hide..
I think this is what you looking for:
WORKING : DEMO
UPDATED DEMO
HTML
<h1> Just Random Header </h1>
<div class="div1"> Hello i am div :) <br /> <br />If you click anywhere then me i will disappear !</div>
CSS
.div1
{
width:310px;
height:100px;
background:#ddd;
}
JS
$(document).mouseup(function (e)
{
var container = $(".div1");
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.hide();
}
});
First get clicked target. Then check if the click event is out of popup div and if it is hidden already. Something like this should work:
$(function(){
$('body').on('click', function(){
var $this = $(arguments[0].target);
var $target = $('#popup_remember');
if( !$this.parents('#popup_remember').length && $this.attr('id') != "REM" && $target.is(':visible') ) $target.hide();
});
});
Check jsFiddle
You could try using jQuery instead of just Javascript.
$(document).ready(function(){
$('body').on('click', function(){
if($('#rem_email').val() === ''){
alert('Harap isi email !');
} else {
$('#popup_remember').hide()
}
}
//Let's add your remember_show function too! It's also an OnClick (As seen in the HTML).
$('btn-custom remember').on('click',function(){
$('popup_remember').show();
});
});
That's your javascript code converted to jQuery. :)
Instead of hide() and show(), you can also use fadeOut() and fadeIn() to animate the opacity of the object you are hiding and showing.
If your trying to make custom modal this may helps you. But this is only for the modal effect and your problem about clicking the body and it will close the modal. JS Fiddle Link
Hope it helps. Happy Coding.
you can use javascript too:
<button type="button" class="btn-custom remember" onclick="remember_show(event)">Ingatkan Saya</button>
Pass the event in the arguments of the calling function. Then you need to add event.stopPropagation(); to stop the event to bubble up in the DOM tree.
function check_remember(event) {
if (document.getElementById('rem_email').value == "") {
alert("Harap isi email !");
} else {
document.getElementById('popup_remember').style.display = "none";
event.preventDefault();
}
event.stopPropagation(); //<----add this to stop the event to bubble up.
};
function remember_show(event) {
document.getElementById('popup_remember').style.display = "block";
event.stopPropagation(); //<----add this to stop the event to bubble up.
};
Now add a event listener on the body like:
function hideModal(e){
document.getElementById('popup_remember').style.display = "none";
event.stopPropagation();
}
document.addEventListener('click', hideModal, false);
Sample Demo:
function check_remember(event) {
if (document.getElementById('rem_email').value == "") {
alert("Harap isi email !");
} else {
document.getElementById('popup_remember').style.display = "none";
event.preventDefault();
}
event.stopPropagation();
};
function remember_show(event) {
document.getElementById('popup_remember').style.display = "block";
event.stopPropagation();
};
function hideModal(e) {
document.getElementById('popup_remember').style.display = "none";
event.stopPropagation();
}
var body = document;
body.addEventListener('click', hideModal, false);
#popup_remember {
display: none;
}
<button type="button" class="btn-custom remember" onclick="remember_show(event)">Ingatkan Saya</button>
<!-- PopUp -->
<div id="popup_remember">
<div id="REM">
<form id="form_remember">
<input id="rem_email" name="email" placeholder="Input Email" type="text" class="form-control" required>
<input type="submit" id="sub_rem" value="Agree" onclick="check_remember(event)">
</form>
</div>
</div>
Related
I am using jQuery 1.7.2. Originally, my HTML was rendered on page load:
<div class="my_div_class">
<button class="my_button_class" >
</button>
<div>
Then I was registering below JavaScript function:
$(".my_div_class").on('click', function(event){ //function_1
}
It was working fine.
Because of some reason I need to change it to below
$(document).on('click','.my_div_class', function(event){}
Then its not working ? But If change above functiion to use my_button_class it works. Why it is not working with div ?
$(document).ready(function() {
$(document).on("click",".my_div_class",function(event) {
alert("Heyy! clicked me!");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="my_div_class">
<button class="my_button_class" >
</button>
<div>
You can use $(event.target).closest(".my_div_class").length == 1 to see if you clicked on my_div_class or any element inside it.
$(document).on('click', function(event) {
if ($(event.target).closest(".my_div_class").length == 1) {
console.log("clicked on button or div")
} else {
console.log("clicked outside")
}
})
demo
$(document).on('click', function(event) {
if ($(event.target).closest(".my_div_class").length == 1) {
console.log("clicked on button or div")
} else {
console.log("clicked outside")
}
})
.my_div_class {
width:200px;
background-color:yellow}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my_div_class">
<button class="my_button_class">click
</button>
<div>
I am stuck with the following simple code.
$(function() {
'use strict';
function header() {
var openButton = $('.search_button'),
box = $('.box'),
closeButton = $('.close');
box.hide();
function init() {
initEvents();
}
function initEvents() {
openButton.on('click', openBox);
$(document).on('keyup', function(event) {
if(event.keyCode === 27) {
box.slideUp('normal');
}
});
}
function openBox(event) {
if(event.target === closeButton[0]) {
box.hide();
} else if(event.target === openButton[0] || $(event.target).closest(box).length) {
box.show();
}
else {
box.hide();
}
}
init();
}
header();
});
.box {
width:500px;
height:500px;
background-color:red;
position:relative;
}
.close {
width:80px;
height:80px;
background-color:orange;
position:absolute;
top:0;
right:0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header_search">
<form action="search.php" method="post">
<input type="text" placeholder="" id="main_search" class="search_button">
</form>
</div>
<div class='box'>
<div class='close'></div>
</div>
My intension is that, when I click outside the DIV, it closes and the 'close' DIV on click closes the red main div.
The code, slidesDown the box div and escape key slideup as well.
But close and clicking outside to close the red div does not work.
Could someone assist me with the code with some explanation
Thanks and regards
Jeff
You are using the event handler click only in the .search_button, you have to use it in your body.
function initEvents() {
$(body:not('#header_search')).on('click', openBox);
$(document).on('keyup', function(event) {
if(event.keyCode === 27) {
box.slideUp('normal');
}
});
}
I have done for showing a div on click i want to remove on another click. I want the div to be removed on another click.
Here is the HTML code
<div id="welcomeDiv" style="display:none;" class="answer_list" > WELCOME</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />
Javascript
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
}
You have to check the visibility of the div and do a toggle based on that.
function showDiv() {
if( document.getElementById('welcomeDiv').style.display == "none") {
document.getElementById('welcomeDiv').style.display = "block";
}
else {
document.getElementById('welcomeDiv').style.display = "none"
}
}
function showDiv() {
var element = document.getElementById('welcomeDiv');
if(!element.classList.contains('show')){
element.classList.add('show');
} else {
element.classList.remove('show');
}
}
.show {
display: block !important;
}
<div id="welcomeDiv" style="display:none;" class="answer_list" > WELCOME</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />
Get rid of the inline styling and use a class to toggle the display type. This is cleaner and you can easily reuse it for other elements.
function showDiv(element) {
document.querySelector(element).classList.toggle("invisible");
}
.invisible {
display: none;
}
<div id="welcomeDiv" class="answer_list invisible"> WELCOME</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv('#welcomeDiv')" />
Check for the current visibility of the DIV and let the javascript function do accordingly.
function showDiv() {
if( document.getElementById('welcomeDiv').style.display == "none") {
//If it is not visible, make it visible
document.getElementById('welcomeDiv').style.display = "block";
}
else {
//Else, make it invisible.
document.getElementById('welcomeDiv').style.display = "none"
}
}
I am trying to hide a button (not inside form tags) after it has been clicked.
Once the form is shown, there is no use for the button. So i would like to hide it after clicked
Here's the existing code.
<script type="text/javascript">
$(function(){
var button = document.getElementById("info");
var myDiv = document.getElementById("myDiv");
function show() {
myDiv.style.visibility = "visible";
}
function hide() {
myDiv.style.visibility = "hidden";
}
function toggle() {
if (myDiv.style.visibility === "hidden") {
show();
} else {
hide();
}
}
hide();
button.addEventListener("click", toggle, false);
});
</script>
<input id="info" type="button" value="Имате Въпрос?" class="switchbuton">
You can use jQuery hide
$("#myDiv").hide() // to hide the div
and show like
$("#myDiv").show() // to show the div
Or toggle to toggle the visibility of dom elements
$("#myDiv").toggle() // to toggle the visibility
You can check the result here:
http://jsfiddle.net/jsfiddleCem/33axo20f/2/
Code is:
<style>
.showButon{
background:url('http://spacetelescope.github.io/understanding-json-schema/_static/pass.png');
background-repeat:repeat-y;
height:30px;
text-indent:20px;
}
</style>
<div id="myDiv">
<input id="info" type="button" value="Имате Въпрос?" class="showButon" />
</div>
(function(){
var button = document.getElementById("info");
var myDiv = document.getElementById("myDiv");
function toggle() {
if (myDiv.style.visibility === "hidden") {
myDiv.style.visibility = "visible";
} else {
myDiv.style.visibility = "hidden";
}
}
button.addEventListener("click", toggle, false);
})()
Why don't you use:
<script type="text/javascript">
$(function(){
$('#info').click(function() {
$(this).hide();
});
});
</script>
<input id="info" type="button" value="Имате Въпрос?" class="switchbuton">
The below code snippet shows the invite code when I click "Invite Code". But how do I re-hide the invite code if the same link is clicked again? And can it be done where it cycles back and forth with subsequent clicks? I didn't write this code but merely modified it to my use. I am still very new to this type of thing. Thanks!
<style>
div.hide { display:none; }
div.show { text-align:center; }
</style>
<script type='text/javascript'>
function showText(show, hide) {
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
</script>
<br>
<font color="red">-</font>Home<font color="red"> / </font><a onclick="showText('text1')" href="javascript:void(0);">Invite Code</a>-</font>
<div id="text1" class="hide"><font color="red">abc123</font></div>
</center></h3>
Simply use this function:
function showText(id)
{
var elem = document.getElementById(id);
if(elem.style.display == 'none')
{
elem.style.display = 'inline';
}
else
{
elem.style.display = 'none';
}
}
<a onClick="showText('text1');" href="#">Show or Hide</a><br/>
<div style="height: 30px;"><div id="text1" style="display: none;">Text to hide or show... WTF?!</div></div>
<div>This text should not move.</div>
PS: This also works for 2 Elements...
Greetings
I really don't see the use for the show class. You could just toggle the hide class on the elements that you want to toggle.
Assume you dont need the show class, then use the classList.toggle function like this
function toggle(target){
document.getElementById(target).classList.toggle('hide');
}
.hide{ display:none }
<button onclick="toggle('test')">Show / Hide</button>
<div id="test" class="hide">Hello world!</div>
save the state with a boolean
var hided = true;
function showText(show,hide){
if (hided){
document.getElementById(show).className = "show";
document.getElementById(hide).className = "hide";
}
else{
document.getElementById(show).className = "hide";
document.getElementById(hide).className = "show";
}
hided = !hided;
}
fiddle with this code and some of your html : fiddle,
isn't it the expected behavior ?
<html>
<div ID="content" style="display:block;">This is content.</div>
<script type="text/javascript">
function toggleContent() {
// Get the DOM reference
var contentId = document.getElementById("content");
// Toggle
contentId.style.display == "block" ? contentId.style.display = "none" :
contentId.style.display = "block";
}
</script>
<button onclick="toggleContent()">Toggle</button>
</html>
//Code is pretty self explanatory.