Run function when all div elements are set to display:none - javascript

In this code I want the paragraph text to change to murderer after all the div elements are display to none. In this problem the paragraph text changes to murderer only one of the div elements are display to none. I understand I can use the if statement and give the condition for display:none individually and then run the function but what if there are hundred div elements. This is just a fun experiment and I need an efficient way of doing this.
<!doctype html>
<html>
<head>
<title>Learning jQuery</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
#green {
width:200px;
height:200px;
background-color:green;
border-radius:50%;
margin-top:50px;
}
.red {
width:200px;
height:200px;
background-color:red;
margin-top:50px;
}
</style>
</head>
<body>
<div id="green"></div>
<div class="red"></div>
<div class="red"></div>
<h1 id="murder">Hello</h1>
<script>
$("murder").html("murderer!");
$("div").click(function() {
$(this).css("display", "none");
if ($("div").css("display") == "none") {
$("#murder").html("murderer!");
}
});
</script>
</body>
</html>

With jQuery's :visible selector:
if($("div:visible").length == 0) {
// Do stuff
}

Does this give you what you want? You could devise a more sophisticated/complex solution using events but that may be overkill for your requirements?
$("div").click(function() {
$(this).hide();
if ($("div:visible").length == 0) {
$("#murder").html("murderer!");
}
});

This should do it.
$("div").click(function() {
$(this).hide();
if (!$('div:visible').length) {
$("#murder").html("murderer!");
}
});

DEMO:
$("murder").html("murderer!");
$("div").click(function () {
$(this).css("display", "none").addClass("hidden");
alert($("div.hidden").length);
if ($("div.hidden").length == 3) {
$("#murder").html("murderer!");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
#green {
width: 200px;
height: 200px;
background-color: green;
border-radius: 50%;
margin-top: 50px;
}
.red {
width: 200px;
height: 200px;
background-color: red;
margin-top: 50px;
}
</style>
<div id="green"></div>
<div class="red"></div>
<div class="red"></div>
<h1 id="murder">Hello</h1>

You could also use every function:
function isInvisible(e) {
return e.style.display == "none";
}
$("div").click(function() {
$(this).css("display", "none");
if ($("div").toArray().every(isInvisible)) {
$("#murder").html("murderer!");
}
});
#green {
width:50px;
height:50px;
background-color:green;
border-radius:50%;
margin-top:10px;
}
.red {
width:50px;
height:50px;
background-color:red;
margin-top:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="green"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<h1 id="murder">Hello</h1>

Related

How can I close parent div function when I clicked child div and when I clicked parent div again, the function will activity

I want to let user go to some website when he clicked my website background picture(parent div), but the function need be closed when user clicked my website content(child div), and then when user clicked the background picture(parent div) again, the function will be activity.
I try many times, but when I clicked my website content(child div), and clicked website background picture(parent div) again, the function didn't work.
What can I do? Thank you!
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<title>Test!</title>
<style type="text/css">
.head{
background-color:#FF88C2; color:#9955FF; font-weight:bold; font-size:30px;
text-align:center; padding:10px;
}
.tt{
width:100%; height:100%;
border:1px solid red;
}
.content{
width:800px; height:1000px; margin-left:auto; margin-right:auto; background-color: aliceblue;
border:1px solid blue;
}
</style>
<script type="text/javascript">
function bgADlink(){
window.open('https://www.google.com');
}
var i = 0;
function test1(){
if(i == 0 || i == 1)
bgADlink();
return i = 0;
}
function test2(){
bgADlink=false;
return i = 1;
}
</script>
</head>
<body style="margin:0px; background-color:#eeeeee;">
<div class="head">Test</div>
<div class="tt" onclick="test1()">
<div class="content" onclick="test2()"></div>
</div>
</body>
</html>
just remove that || i == 1 condition from test1() function like below.
function test1(){
if(i == 0)
bgADlink();
return i = 0;
}
check this fiddle https://jsfiddle.net/ca7Lbsy3/
I am not sure that is what you need, but basically you need to stop event bubbling from child to parent.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<title>Test!</title>
<style type="text/css">
.head{
background-color:#FF88C2; color:#9955FF; font-weight:bold; font-size:30px;
text-align:center; padding:10px;
}
.tt{
width:100%; height:100%;
border:1px solid red;
}
.content{
width:800px; height:1000px; margin-left:auto; margin-right:auto; background-color: aliceblue;
border:1px solid blue;
}
</style>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script type="text/javascript">
function bgADlink(){
window.open('https://www.google.com');
}
$(document).ready(function(){
$(".tt").on("click",function(){
bgADlink();
});
$(".content").on("click",function(e){
e.stopPropagation();
});
});
</script>
</head>
<body style="margin:0px; background-color:#eeeeee;">
<div class="head">Test</div>
<div class="tt" onclick="test1()">
<div class="content" onclick="test2()"></div>
</div>
</body>
</html>
this snippet is not opening parent div link either..but use this on html page then try it
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<title>Test!</title>
<style type="text/css">
.head{
background-color:#FF88C2; color:#9955FF; font-weight:bold; font-size:30px;
text-align:center; padding:10px;
}
.tt{
width:100%; height:100%;
border:1px solid red;
}
.content{
width:800px; height:1000px; margin-left:auto; margin-right:auto; background-color: aliceblue;
border:1px solid blue;
}
</style>
<script type="text/javascript">
var i = 0;
function test1(){
if(i == 0 || i == 1)
bgADlink();
return i = 0;
}
function test2(varr,event){
// bgADlink=false;
event.stopPropagation();
return i = 1;
}
function bgADlink(){
console.log("bgADlink")
window.open('https://www.google.com');
}
</script>
</head>
<body style="margin:0px; background-color:#eeeeee;">
<div class="head">Test</div>
<div class="tt" onclick="test1()">
<div class="content" onclick="test2('',event)"></div>
</div>
</body>
</html>
There are different problems in your code.
Because events propagate from an inner element, to it's parent element (not only parent but all the hierarchy up), the "tt" div will always fire, so the best thing to do is to stop the propagation of the events with
onclick="event.stopPropagation();test1()"
I don't really understand what you're trying to accomplish with the "i" and why your having a function bgADlink() and then assigning it a Boolean, JavaScript lets you do that, but basically your function is now a Boolean.
I made you a small sample fiddler yo you can see the stopPropagation working, hope it helps.
https://jsfiddle.net/pimboden40/kg9wfdqj/29/

Create a popwindow on click of dropdown(There is no selection in the dropdown)

I need a popwindow on click or onfocus of the dropdown . In the popwindow I should display the checkboxes with multiselect option.I searched for this kind but I couldn't find any references.
Can anyone write code for this using jQuery.
Thank you
Try this code... hope it helps
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#pop
{
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color: rgba(0,0,0,0.5);
display: none;
}
#container
{
position: relative;
width:500px;
margin:100px auto;
background-color: white;
border-radius: 10px;
padding: 20px;
}
#ddown
{
width:100px;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js">
</script>
<title></title>
</head>
<body>
<select id="ddown" >
<option></option>
</select>
<div id="pop" >
<div id="container">
<h1>Some Check box here</h1>
</div>
</div>
</body>
<script type="text/javascript">
$("#ddown").on("click",function(event){
event.preventDefault();
$("#pop").show();
})
$("#pop").click(function(){
$("#pop").hide();
})
</script>
</html>

How to do Jquery Animation Floating Correctly

I recently have been trying to use Jquery to create and html animation and I am trying to make a bar float to the right as it is currently floated to the left. Although when I try to do this it wont work please help
Html :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<link rel="stylesheet" href="assests/css/main.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".bar").animate({float: 'right'});
});
</script>
</head>
<body>
<div id="wrapper" align="center" >
<div class="obj">
<div class="bar"></div>
<div class="body">
<h1> Welcome </h1>
</div>
</div>
</div>
</body>
</html>
Css :
#import url(https://fonts.googleapis.com/css?family=Raleway);
* {
margin:0px;
padding:0px;
font-family:Raleway;
}
#wrapper {
width:100%;
height:100vh;
}
.obj {
width:500px;
height:200px;
margin-top:14%;
}
.bar {
float:left;
height:200px;
width:5px;
background-color:#95a5a6;
transition: all .5s ease-in-out;
}
.body {
width:495px;
height:200px;
float:right;
}
.body > h1 {
font-size:70px;
color:#333;
padding-top:50px;
}
You can animate the position like this:
$(document).ready(function() {
$('.bar').animate({"left" : 700 +'px'});
});
http://codepen.io/anon/pen/eZpbaP

Jquery Loop for timed banner animation

I have been learning Jquery and i made a small banner that animates out, and back in giving information. But, i would like it to be on a timed loop; ie. It runs the animation every 5 mins.
This is the code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
do {
var i = 1
$(document).ready(function(){
$("#twitter").delay(200).animate({left:'225px'}, "slow").delay(5000).animate({left:'-225px'}, "slow");
$("#tag_line").delay(300).fadeIn(2000).delay(2500).fadeOut(1000);
$("#content").delay(1000).slideDown("slow").delay(3000).slideUp("slow");
var box=$("#box");
box.animate({width:'toggle'},"normal").delay(500);
box.animate({height:'180px'},"slow").delay(3000);
box.animate({height:'100px'},"slow").delay(750);
box.animate({width:'toggle'},"normal").delay(3000);
});
}
while (i < 2)
</script>
<style>
#twitter
{
height:100px;
width:140px;
position:absolute;
z-index:20;}
#box
{
background:lightgrey;
height:100px;
width:350px;
opacity:0.2;
display:none;
position:absolute;
z-index: 10;
border-style: outset;
border-width: large;
border-color: black;
}
#container {
width: 100px;
height: 100px;
position:absolute;
}
#tag_line {
position:absolute;
z-index:15;
display:none;
padding-left:15px;
font-size:30px;
height:60px;
line-height:24px;
font-family:"SF Slapstick Comic";
color: red;
}
#content {
position:absolute;
z-index:15;
display:none;
padding-left:15px;
padding-top:90px;
font-size:30px;
height:60px;
line-height:24px;
font-family:"SF Slapstick Comic"
}
</style>
<title>Test Jquery</title>
<meta charset="utf-8">
</head>
<body>
<div id="container">
<div id="tag_line"><h1>Twitter</h1></div>
<div id="twitter"><img src="img/logo/twitter.png" width="140" height="100"></div>
<div id="content"><h2>#Geekster_Alan</h2></div>
<div id="box"></div>
</div>
</body>
</html>
How would i get it too loop?
Also, if you see anything wrong with the general code it would be appreciated if you point it out! I am new to Jquery, JS and HTML/CSS so positive criticism will help me learn!
Thanks!
You can use the setInterval function to execute your code every X ms
See details here: http://www.w3schools.com/js/js_timing.asp

When adding divs elements to my page all the other draggable items move?

Why does this keep happening?
I add a draggable element, move it into place and then it prepends and moves everything down or make the page huge? Is there a way I can make the div appear in the same place and not move the other elements on the page? This is driving me crazy!
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>draggable demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="stylesheet.css">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="script.js"></script>
</head>
<body>
<h2></h2>
<form name="checkListForm">
<input type="text" name="checkListItem"/>
</form>
<div id="button">Add!</div>
<br/>
<table><tr><td id="place"></td></tr></table>
</body>
</html>
JavaScript:
$(document).ready(function()
{
//$( '#draggable' ).draggable();
$('#button').click(function()
{
var toAdd = $('input[name=checkListItem]').val();
var $newdiv = "<div id='draggable'>" + toAdd + "</div>";
//$("#place").html($($newdiv).draggable());
$("#place").prepend($($newdiv).draggable());
});
});
CSS:
#draggable {
z-index:1;
width: 100px;
height: 100px;
background: #ccc;
}
h2 {
font-family:arial;
}
form {
display: inline-block;
}
#button{
display:inline-block;
height:20px;
width:70px;
background-color:#cc0000;
font-family:arial;
font-weight:bold;
color:#ffffff;
border-radius: 5px;
text-align:center;
margin-top:2px;
}
#item {
font-family:garamond;
color:#000000;
width:90%;
height:800px;
background-color:#cc0000;
}
#place {
z-index:1;
font-family:garamond;
color:#000;
width:800px;
height:800px;
background-color:#f00;
}
Cheers in advance!!!!
Here is the fully working code: jsFiddle: http://jsfiddle.net/ycgmt/
Changes:
1: <div> instead of <table>
2: append() instead of prepend()
3: class instead of id
4: position:absolute
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>draggable demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
<body>
<h2></h2>
<form name="checkListForm">
<input type="text" name="checkListItem"/>
</form>
<div id="button">Add!</div>
<br/>
<div id="place"></div>
</body>
</html>
CSS
.draggable {
width: 100px;
height: 100px;
background: #ccc;
position:absolute;
}
h2 {
font-family:arial;
}
form {
display: inline-block;
}
#button{
display:inline-block;
height:20px;
width:70px;
background-color:#cc0000;
font-family:arial;
font-weight:bold;
color:#ffffff;
border-radius: 5px;
text-align:center;
margin-top:2px;
}
#item {
font-family:garamond;
color:#000000;
width:90%;
height:800px;
background-color:#cc0000;
}
#place {
z-index:1;
font-family:garamond;
color:#000;
width:800px;
height:800px;
background-color:#f00;
}
JS
$(document).ready(function()
{
$('#button').click(function()
{
var toAdd = $('input[name=checkListItem]').val();
var newdiv = $("<div class='draggable'>" + toAdd + "</div>");
$("#place").append(newdiv);
$(newdiv).draggable();
});
});

Categories