event.target jquery confuses me - javascript

Following is my code
$(document).ready(function() {
var open = $('.openButton'),
container = $('.container'),
close = $('.closeButton');
container.hide();
function init() {
eventInit();
}
function eventInit() {
$(document).on('click', openBox);
$(document).on('keyup', function(e) {
container.hide();
});
}
function openBox(event) {
if(event.target === open[0] || $(event.target).closest(container).length) {
container.show();
} else if(event.target === close[0]) {
container.hide();
} else {
container.hide();
}
}
init();
});
.container {
width:400px;
height:400px;
background-color:red;
position:relative;
//display:none;
}
.closeButton {
position:absolute;
top:0;
right:0;
height:50px;
width:50px;
background-color:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">
<form action="post">
<input type="text" class="openButton">
</form>
</div>
<div class="container">
<div class="closeButton"></div>
</div>
Here, what does not work, is when I click on the close div, the container does not close. I am very confused why it does not work. Could someone help me with this along with some insights on why it did not work with my code.
Thanks
Jeff

The close button is inside the container div so $(event.target).closest(container).length would be truthy and second else if doesn't meet. So give higher priority to the close div by updating the order of if statements.
$(document).ready(function() {
var open = $('.openButton'),
container = $('.container'),
close = $('.closeButton');
container.hide();
function init() {
eventInit();
}
function eventInit() {
$(document).on('click', openBox);
$(document).on('keyup', function(e) {
container.hide();
});
}
function openBox(event) {
if (event.target === close[0]) {
container.hide();
} else if (event.target === open[0] || $(event.target).closest(container).length) {
container.show();
} else {
container.hide();
}
}
init();
});
.container {
width: 400px;
height: 400px;
background-color: red;
position: relative;
//display:none;
}
.closeButton {
position: absolute;
top: 0;
right: 0;
height: 50px;
width: 50px;
background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">
<form action="post">
<input type="text" class="openButton">
</form>
</div>
<div class="container">
<div class="closeButton"></div>
</div>

The problem is in "|| $(event.target).closest(container).length" - that will be true for clicking on the close button. So instead of going to else if and else parts, it'll be true even for click button and it'll try to show the container. See updated snippet.
$(document).ready(function() {
var open = $('.openButton'),
container = $('.container'),
close = $('.closeButton');
container.hide();
function init() {
eventInit();
}
function eventInit() {
$(document).on('click', openBox);
$(document).on('keyup', function(e) {
container.hide();
});
}
function openBox(event) {
if(event.target === open[0]) {
container.show();
} else if(event.target === close[0]) {
container.hide();
}
}
init();
});
.container {
width:400px;
height:400px;
background-color:red;
position:relative;
//display:none;
}
.closeButton {
position:absolute;
top:0;
right:0;
height:50px;
width:50px;
background-color:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">
<form action="post">
<input type="text" class="openButton">
</form>
</div>
<div class="container">
<div class="closeButton"></div>
</div>

Related

Make a div visible on full screen of another div

I made an element take full screen by using the below method:
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else {
return;
}
It works well but I want to show another element when on the fullscreen mode.
The other element has position: fixed and z-index: 999999999 but it's not visible when on fullscreen mode.
Could anyone help me, please?
Below is the link to the example
https://stackblitz.com/edit/web-platform-z1phjd?file=index.html
So I want to show the blue element when the red element is full screen sized.
It seems it was once possible to solve this issue with z-index but its since been patched by newer browser releases - See this thread
I believe Tushar Vaghela's answer is your best chance of achieving your desired result, which is to include the elements you wish to overlay within the fullscreened element - See this thread.
Maybe a div surrounding all the fullscreen elements will work and then you can position the elements inside as you wish. See fiddle: https://jsfiddle.net/840urcsf/6/
The snippet doesn't enable the fullscreen, but here it goes:
(() => {
const btn = document.querySelector(".make-fullscreen");
btn.addEventListener("click", () => {
const element = document.querySelector(".fullscreen-container");
console.log(element);
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else {
return;
}
});
})();
body {
background: orange;
}
.fullscreen-element {
width: 400px;
height: 400px;
background: red;
}
.other-element {
width: 100px;
height: 100px;
padding: 24px;
background: blue;
position: fixed;
top: 60px;
left: 60px;
color: white;
}
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="fullscreen-container">
<div class="fullscreen-element">
<button class="make-fullscreen">Fullscreen</button>
</div>
<div class="other-element">
other element
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Here is jsfiddle demo,
You can do it through dom manipulation by listening to fullscreenchange event and following these steps:
1-add the other-element element as child of fullscreen-element in full screen mode.
2-bring other-element back to its original location in the normal mode.
(() => {
const btn = document.querySelector(".make-fullscreen");
const element = document.querySelector(".fullscreen-element");
const other = document.querySelector(".other-element");
element.addEventListener("fullscreenchange", event => {
if (document.fullscreenElement) {
element.appendChild(other);
} else {
element.parentNode.insertBefore(other,element.nextSibling)
}
});
btn.addEventListener("click", () => {
if (element.requestFullscreen) {
element.requestFullscreen().catch(err => {
console.log(err);
});
});
})();
The full screen works here: https://jsfiddle.net/trentHarlem/7861L0ph/
(() => {
const element = document.querySelector('.fullscreen-element');
const other = document.querySelector('.other-element');
const btn = document.querySelector('.make-fullscreen');
btn.addEventListener('click', (event) => {
//event.preventDefault();
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
element.requestFullscreen();
}
});
})();
body {
background: orange;
}
.fullscreen-element {
width: 400px;
height: 400px;
background: red;
}
.other-element {
width: 100px;
height: 100px;
padding: 24px;
z-index: 999999999999;
background: blue;
position: fixed;
top: 60px;
left: 60px;
color: white;
}
<div class="fullscreen-element">
<button class="make-fullscreen">TOGGLE Fullscreen</button>
<div class="other-element">other element</div>
</div>
how about simply move "other-element" to inside "fullscreen-element"? And change "fullscreen-element" position to relative.
(() => {
const btn = document.querySelector(".make-fullscreen");
btn.addEventListener("click", () => {
const element = document.querySelector(".fullscreen-element");
console.log(element);
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else {
return;
}
});
})();
body {
background: orange;
}
.fullscreen-element {
width: 400px;
height: 400px;
background: red;
position:relative;
}
.other-element {
width: 100px;
height: 100px;
padding: 24px;
z-index: 999999999999;
background: blue;
position: fixed;
top: 60px;
left: 60px;
color: white;
}
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="fullscreen-element">
<button class="make-fullscreen">Fullscreen</button>
<div class="other-element">
other element
</div>
</div>
<script src="script.js"></script>
</body>
</html>

detect click on element with a child inside

$('.parent').on('click', function(e) {
if (e.target.matches('.inside')) {
console.log('inside');
} else {
console.log('title');
}
});
.parent {
background: lightgreen;
}
.inside {
background: silver;
}
.title {
background: gold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='parent'>
<div class='inside'>
<div class='title'>lorem</div>
</div>
<br>
</div>
Click on inside and you'll get title in console.
How to get inside regardles a title is inside or not?
You need to check if the target has a parent .inside :-
$('.parent').on('click', function(e) {
if ($(e.target).parents('.inside').length) {
console.log('inside');
} else {
console.log('title');
}
});
.parent {
background: lightgreen;
}
.inside {
background: silver;
}
.title {
background: gold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='parent'>
<div class='inside'>
<div class='title'>lorem</div>
</div>
<br>
</div>
Okay take a look at this and see if it works for you?
https://codepen.io/jamie-endeavour/pen/GPjzRq?editors=1011
$('.parent').on('click', function(e) {
var $target = $(e.target);
if ($target.hasClass('inside') || $target.parent().hasClass('inside')) {
console.log('inside');
} else {
console.log('not inside');
}
});
I am checking if the user has clicked on the element with the 'inside' class or if the child element belongs to the 'inside' element.
Hope this helps?
Please note that HTML works in layer so if title is going to be inside "inside", you can just target title for click as inside is always "inside" it.
$('.title').on('click', function(e){
console.log('inside');
});
.parent{
background:lightgreen;
}
.inside{
background:silver;
}
.title{
background:gold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='parent'>
<div class='inside'>
<div class='title'>lorem</div>
</div>
<br>
</div>

Background color button same as background color div

Let me explain it in a few words.
I have a menu with different colored buttons. For example When I mouseover/click button A (=blue e.g.) I want the bgcolor of the div also turning blue.
When I mouseover/click button B (=green) I want the bgcolor of the div also turning green.
Is there a possibility to this with a simple script?
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").hover(function () {
$(this).parents("navigatie").css("background-color", $(this).css("background-color"));
},
function () {
$(this).parents("navigatie").css("background-color", "white");
});
});
</script>
</head>
<body>
<div id="container">
<?php include("header.php");?>
<div id="navigatie">
<center>
<button class="A">Button A</button>
<button class="B">Button B</button>
</center>
</div>
<div id="tekst">
BLABLABLA
</div>
</div>
</body>
</html>
/* CSS */
navigatie {
width:100%;
height:100%;
transition:all 0.4s ease;
}
button {
width:75px;
height:50px;
border-style:none;
top: 20px;
position: relative;
color:white;
border: solid 1px white;
}
.A {
background-color:blue;
}
.B {
width: 200px;
height: 100px;
background-color:limegreen;
}
Use this for start you can enhance this with your own coding logic.
$('input:button').each(function() {
var color = $(this).attr("data-color");
$(this).css("background-color", color);
});
$('input:button').click(function() {
var color = $(this).attr("data-color")
$('#wrapper').css("background-color", color);
});
#wrapper {
padding: 50px;
background-color: #d0e4fe;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<input type="button" name="color" data-color="red" value="Red">
<input type="button" name="color" data-color="green" value="Green">
<input type="button" name="color" data-color="purple" value="Purple">
<input type="button" name="color" data-color="#d0e4fe" value="Default">
</div>
This is how I would do it:
$("button").hover(function () {
$(this).parents("div").css("background-color", $(this).css("background-color"));
},
function () {
$(this).parents("div").css("background-color", "white");
});
Here is the JSFiddle demo
Full code after fix as per what you provided in your edit:
<html>
<head>
<style>
navigatie {
width:100%;
height:100%;
transition:all 0.4s ease;
}
button {
width:75px;
height:50px;
border-style:none;
top: 20px;
position: relative;
color:white;
border: solid 1px white;
}
.A {
background-color:blue;
}
.B {
width: 200px;
height: 100px;
background-color:limegreen;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("button").hover(function () {
$(this).parents("#navigatie").css("background-color", $(this).css("background-color"));
},
function () {
$(this).parents("#navigatie").css("background-color", "white");
});
});
</script>
</head>
<body>
<div id="container">
<?php include("header.php");?>
<div id="navigatie">
<center>
<button class="A">Button A</button>
<button class="B">Button B</button>
</center>
</div>
<div id="tekst">
BLABLABLA
</div>
</div>
</body>
</html>
Try using jquery:
$("#[id]").hover(function({
$("#[id]").css({"[propertyname]":"[value]","[propertyname]":"[value]",...});
/*
Fill the brackets with the correct ids / classes and property names and values.
If you want to change the background on a click then replace .hover with .click
*/
If anyone finds something I did wrong or if there is a better way to do it, please correct me or let me know! I'm always open to better ideas! :)
If you're going to use CSS, there's only two ways of changing the style of an element through the state of another:
The targeted element must either be a child of the element receiving a state change, or a direct sibling (right underneath).
Using CSS's "+" selector, you can affect the next sibling element.
In your case this could be used to achieve this effect:
https://jsfiddle.net/Lrptjoh9/
The action occurs here:
.a .button:hover + .bg {
background: red;
}
.b .button:hover + .bg {
background: blue;
}
Although this requires the button and background elements to be siblings.
Vanilla JavaScript:
var btn = document.getElementById('btnA');
btn.addEventListener('click', function(e) {
var event = e || window.event,
target = event.target,
parent = target.parentNode,
color = parent.style.backgroundColor;
if(color === 'blue') {
parent.style.backgroundColor = 'white';
} else {
parent.style.backgroundColor = 'blue';
}
});
btn.addEventListener('mouseover', function(e) {
var event = e || window.event,
target = event.target,
parent = target.parentNode;
parent.style.backgroundColor = 'blue';
});
btn.addEventListener('mouseout', function(e) {
var event = e || window.event,
target = event.target,
parent = target.parentNode;
parent.style.backgroundColor = 'white';
});
.container{
position: relative;
width: 200px;
height: 100px;
text-align: center;
}
.container button{
position: relative;
top: 50%;
transform: translateY(-50%);
}
<div class='container'>
<button id="btnA">Button A</button>
</div>

How to hide/show on toggle and hide on clicking outside the div

I have a div which when clicked shows a contact us form .
That is, on toggle it shows and hides. How can I make it to hide on clicking from other part of document.
The code is below
function showCctFrm(){
var frmWidth = '-40';
$("#quick_cct_form").toggle(function(e){
if($("#quick_cct_form").is(":visible")){ frmWidth = "200"; }
if($("#quick_cct_form").is(":hidden")){ frmWidth = "-40"; }
$("#fixed_cct_us").css("right",frmWidth+"px");
//e.stopPropagation();
});
//alert(frmWidth);
}
I tried this to hide on clicked outside:
$(document).click(function(e) {
if(e.target.id != 'fixed_cct_us') {
$("#quick_cct_form").hide();
$("#fixed_cct_us").css("right","-40px");
}
});
the HTML div for that is as below
<div id="fixed_cct_us" style="right: 240px;">
<a title="connect" href="javascript: showCctFrm();">connect </a>
</div>
$('body').on('mouseup', function (e) {
$("#quick_cct_form").hide();
$("#fixed_cct_us").css("right","-40px");
e.stopPropagation();
});
updated code below
$(document).on('mouseup', function (e) {
$("#quick_cct_form").hide();
$("#fixed_cct_us").css("right","-40px");
e.stopPropagation();
});
demo
UPDATE: Insert a quick DEMO.
$(document).mouseup(function (e)
{
var container = $("#quick_cct_form");
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.hide();
$("#fixed_cct_us").css("right","-40px");
}
});
div {
width: 500px;
height: 150px;
margin: 30px auto;
}
form {
background: red;
width: 100%;
height: 100%;
color: white;
padding: 10px;
}
input {
margin: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div>
<form id="quick_cct_form">
Edit: <input type="text" placeholder="CustomerId" />
</form>
</div>
The Snippet:
$(document).mouseup(function (e)
{
var container = $("YOUR_SELECTOR");
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.hide();
}
});

Fading the background image of the section - only background

I have this section
<section ID="Cover">
<div id="searchEngine">hello</div>
</section>
I want to fade in/out the background image of Cover. I am using the following function to do that but it fades the whole section. Is there a way I can fade the background only? Something like
$("#Cover").css("background-image").fadeOut(); ??
(I am also setting this image for the first time in the below function)
var imageID=0;
var time=0;
function changeimage(every_seconds)
{
//change the image
if(imageID==0)
{
$("#Cover").fadeOut(time, function () {
$("#Cover").css("background-image", "url(images/cover1.jpg)");
$("#Cover").fadeIn(time);});
imageID++;
time=1000;
}
else
{
if(imageID==1)
{
$("#Cover").fadeOut(time, function () {
$("#Cover").css("background-image", "url(images/cover2.jpg)");
$("#Cover").fadeIn(time);});
imageID++;
}
else
{
if(imageID==2)
{
$("#Cover").fadeOut(time, function () {
$("#Cover").css("background-image", "url(images/cover3.jpg)");
$("#Cover").fadeIn(time);});
imageID++;
}
else
{
if(imageID==3)
{
$("#Cover").fadeOut(time, function () {
$("#Cover").css("background-image", "url(images/cover4.jpg)");
$("#Cover").fadeIn(time);});
imageID++;
}
else
{
if(imageID==4)
{
$("#Cover").fadeOut(time, function () {
$("#Cover").css("background-image", "url(images/cover5.jpg)");
$("#Cover").fadeIn(time);});
imageID=0;
}
}
}
}
}
//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}
I agree with TrueBlueAussie, It will be easier, if you are using instead of CSS background-img.
Here is a working sample.
<html>
<head>
<style type="text/css">
#bgImg { position: fixed; width: 100%; height: 100%; top:0; left: 0; z-index: -1;}
#mainContent{width: 960px; margin: 20px auto; padding: 15px; background: #f2f2f2; text-align: center;}
</style>
</head>
<body>
<img src="yourImg.jpg" id="bgImg">
<section id="mainContent">
<h2>Your Heading</h2>
<p>Your content....</p>
<button id="inBtn">Background Image fade in</button>
<button id="outBtn">Background Image fade out</button>
</section>
</body>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
/*
resize function
From Dave Jay's Blog
url: http://davejay.exit42design.com/entry/Design/44/
*/
function resize(){
$("#bgImg")
.width($(window).width())
.height($(window).width() * .67);
if($("#bgImg").height() <= $(window).height()){
$("#bgImg")
.height($(window).height())
.width($(window).height() * 1.5);
}
}
$(document).ready(function(){
resize();
$("#inBtn").on("click",function(){
$("#bgImg").fadeIn();
});
$("#outBtn").on("click",function(){
$("#bgImg").fadeOut();
});
});
$(window).resize(function(){ resize(); });
</script>
</html>

Categories