Toggle needs to work only on parent div, not child div - javascript

I am simulating a pop up window that fades the background out. I do this by simply toggling a div that fills the whole screen. I would like to be able to close the pop up by clicking the outside background, but not when you click on the new content area, which is what is currently happening. My code:
JS:
function popbox() {
$('#overbox').toggle();
}
HTML:
<div class="popbox" onclick="popbox()"> Click Here </div>
<div id="overbox" onclick="popbox()">
<div id="infobox1">
<p>This is a new box</p>
<br />
<p>hello </p>
<br/><br/>
<p style="color:blue;text-align:center;cursor:pointer;" onclick="popbox()">close</p>
</div><!-- end infobox1 -->
</div> <!-- end overbox -->
CSS:
#overbox {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(64, 64, 64, 0.5);
z-index: 999999;
display: none;
}
#infobox1 {
margin: auto;
position: absolute;
left: 35%;
top: 20%;
height: 300px;
width: 400px;
background-color: white;
border: 1px solid red;
}
.popbox {
cursor: pointer;
color: black;
border: 1px solid gray;
padding: 5px; 10px;
background: ghostwhite;
display: inline-block;
}
JSFiddle link: http://jsfiddle.net/RrJsC/
Again, I want it to toggle only when you click the faded background or "close" (which isnt working in the jsfiddle but is on my site), but not when you click inside the white box that it contains.
After some research it seems like I might be looking for .stopPropagation(), but I haven't been able to get it to work at all.

I got it to work using jQuery's event handlers:
$('#container').on('click', '.popbox, #overbox', function(e){
$('#overbox').toggle();
});
$('#container').on('click', '#infobox1', function(e){
e.stopPropagation();
});
I replaced document with '#container' for better performance. You should wrap all your divs in <div id="container">...</div> so the the callback doesn't fire on the dom every time there is a click (even thought that callback is only called when the selector matches).
You'll also need to get rid of your onclick html attributes, because they will throw an error if that function is not defined.

I hope I understand well your problem.
If it is the case, you should have this:
<div id="overbox">
instead of this:
<div id="overbox" onclick="popbox()">
here is the updated jsfiddle

Related

Glitchy div attached to cursor

I am trying to attach a div to the cursor. The div only appears when it is over a specific box, and depending on the box it hovers over it is populated with an html message.
I've got the cursor attached to the mouse, but when I hover over any of the boxes (which also turn white when hovered over,) the div and the box "glitch" really hard. I assume this has to do something with the z-index, but I can't figure it out.
function mouseHandler(ev) {
document.getElementById('boxshadow').style.transform = 'translateY(' + (ev.clientY) + 'px)';
document.getElementById('boxshadow').style.transform += 'translateX(' + (ev.clientX) + 'px)';
}
document.getElementById("talk").addEventListener("mousemove", mouseHandler)
document.getElementById("time").addEventListener("mousemove", mouseHandler)
document.getElementById("chat").addEventListener("mousemove", mouseHandler)
$("#talk").mouseleave(function() {
$("#boxshadow").hide()
});
$("#talk").mouseover(function() {
$("#boxshadow").show()
$("#boxshadow").html("Message1")
});
$("#time").mouseleave(function() {
$("#boxshadow").hide()
});
$("#time").mouseover(function() {
$("#boxshadow").show()
$("#boxshadow").html("Message2")
});
$("#chat").mouseleave(function() {
$("#boxshadow").hide()
});
$("#chat").mouseover(function() {
$("#boxshadow").show()
$("#boxshadow").html("Message3")
});
.scrolltext {
position: relative;
border-bottom: 2px solid black;
letter-spacing: -15px;
white-space: nowrap;
line-height: 80%;
overflow-y: hidden;
overflow-x: scroll;
padding: 5px;
height: 160px;
width: 100%;
font-size: 200px;
z-index: 1;
}
#talk:hover {
background-color: white;
}
#time:hover {
background-color: white;
}
#chat:hover {
background-color: white;
}
#boxshadow {
width: 200px;
height: 200px;
background-color: red;
border: 1px solid black;
position: absolute;
z-index: 100000000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div id="boxshadow"></div>
<div class="scrolltext" id="talk">
<p>A TALK WITH A GOOD FRIEND</p>
</div>
<div class="scrolltext" id="time">
<p>A LOVELY TIME WITH A GOOD FRIEND </p>
</div>
<div class="scrolltext" id="chat">
<p>A CHAT WITH A GOOD FRIEND </p>
</div>
</div>
So I think what's happening here is that your cursor can't be hovering over the div if the #boxshadow element is in the way. So the cursor triggers the box because it's over the div, then immediately isn't over the div anymore because it's over the box. So it's flipping back and forth... forever.
To avoid this, add the css property pointer-events: none; to the box. The browser will basically ignore the box when it's asking whether the mouse is "over" the div, and that should stop the glitching.
NB: If you want the user to be able to click on something in the box (obviously not an option right now, but I don't know what your plans are), with pointer-events: none the click will pass through to the div below.

How do I create a fixed button which opens a contact form when clicked using HTML & CSS?

Please check the example
Example 1(a) , Fixed button
Example 1(b) , After Click form
I have created the fixed button but I’m not able to open the form on click. It will be very helpful if you can provide me with any resource or reference where I can learn how to make this.
Thanks in Advance.
This is pretty simple slideToggle function which show/hide element.
$(function() {
$('.sp').click(function() {
$('.form-wrapper').slideToggle("slow");
});
});
.sp{
position: absolute;
bottom: 0px; right: 0px;
cursor: pointer;
width: 120px;
background-color: gray;
}
.form-wrapper{
display:none;
height: 50px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sp">Slide Me Up
<div class="form-wrapper">form goes here</div>
</div>

Creating a roll over pointer animation

I am trying to create an effect that when you roll over an image a pointer will point towards it. The same as used in this website about half way down: https://thecleansekitchen.com.au/
I'm not sure where to begin or if there are any JQuery or plugins out there for this but I cant find any?
Any help appreciated.
I'm sure there are some jQuery plugins out there that do this but that's probably unnecessary. You can accomplish this pretty easily with some basic HTML, CSS and JavaScript.
I created a JSFiddle to try to help you get started. https://jsfiddle.net/x823m6ff/
Note that the above is very crude and you'll definitely need to massage it for your needs but hopefully it will help you start down the right path.
I'll lay out the code here as well to explain.
HTML:
<div class="container">
<div class="block">
<div class="arrow arrow-down"></div>
</div>
<div class="block">
<div class="arrow arrow-down"></div>
</div>
<div class="block">
<div class="arrow arrow-down"></div>
</div>
</div>
For the HTML, I created a container with three blocks (like your screenshot). Each block has a child arrow element that is hidden through CSS.
CSS:
.container {
width: 960px;
margin: 0 auto;
}
.block {
width: 100px;
height: 150px;
background-color: #000;
float: left;
margin-right: 20px;
position: relative;
}
.arrow {
display: none;
position: absolute;
top: 0;
left: 25%;
}
.arrow-down {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-top: 25px solid #FFF;
}
The CSS sets up some widths and heights for our blocks and creates the arrow elements. We're positioning these arrow elements relative to each block and putting them at the top middle of each block.
JavaScript:
$(document).ready(function() {
$('.block').hover(function() {
$(this).find('.arrow').show();
}, function() {
$(this).find('.arrow').hide();
});
});
The above JavaScript is very simple and basically just listens for a mouse hover over our block and shows / hides our arrow depending on the state of the user's mouse over the block.

How to make a div draggable even from a textarea within?

I'm trying to have a draggable div which can also be dragged from a textarea within it.
html:
<div id="divContainer">
<textarea id="text"></textarea>
</div>
css:
#divContainer {
position: absolute;
left: 10px;
top: 10px;
width: 100px;
height: 100px;
background-color: blue;
}
#text {
position: absolute;
left: 5px;
top: 5px;
width: 50px;
height: 50px;
background-color: green;
}
jquery:
$("#divContainer").draggable();
I can drag the div if I drag by clicking in the div area, but not if I click into the textarea area.
Is there a way to solve this ?
Here is the jsFiddle
Check Out this fiddle perfect for you
FIDDLE
Code:
HTML:
<div>
<textarea name="ta" id="ta" cols="30" rows="10"></textarea>
</div>
CSS:
div {
background-color:#aaa;
padding: 4px;
text-align: center;
position:relative;
}
JS:
$('div').draggable({
cancel: "ta",
start: function (){
$('#ta').focus();
} ,
stop: function (){
$('#ta').focus();
}
});
You can use the cancel option, setting it to '', similar to this:
$("#divContainer").draggable({ cancel: '' });
DEMO - Using the cancel option
Though this works for dragging, it causes other issues.
You are now unable to click into the textarea itself as draggable takes over the event.
You would have to write some custom code now to work around this.
Using an overlay is also a problem to implement as you now have to deal with when to place it over the div and when not.
I would recommend to leave the default functionality of any elements inside the draggable div as is instead of "hacking" around them.
Possible Alternative
A more user-friendly approach might be to add a frame-like border to the div or a header-like border at the top to enable to user to drag the div.
Using HTML similar to this:
<div id="divContainer">
<div class="dragger"></div>
<textarea id="text"></textarea>
</div>
Giving the dragger the following css:
.dragger {
border: none;
background-color: gray;
height: 15px;
width: 100%;
display: block;
}
and updating your textarea css to not use absolute positioning but instead use margins to specify the 5px on the left and top.
#text {
width: 50px;
height: 50px;
background-color: green;
margin-top: 5px;
margin-left: 5px;
}
You then can implement the handle option similar to this:
$("#divContainer").draggable({
handle: '.dragger'
});
DEMO - Using a header to drag
I'm not sure if this is a solution you can use or not but it would be one option.
Hope this help:
Demo
JQuery:
$(document).ready(function(){
$('#move').css('top',$("#text").css('top'));
$('#move').css('left', $("#text").css('left'));
$("#divContainer").draggable();
$("#move").draggable({drag:function(event,ui){
$('#text').css('top',$("#move").css('top'));
$('#text').css('left', $("#move").css('left'));
},grid:[1,1],stop:function(){
$('#move').css('top',$("#text").css('top'));
$('#move').css('left', $("#text").css('left'));
}});
});

Alert when div height changes

I've been searching all day for this but i can't figure it out myself..
I have a shopping cart that you can add items to. The shoppin cart is in a drop down so you have to click it in order to view it. Therefore, everytime you add an item to the cart i want to display "+1", "+2" and so on, somewhere and when u click on the drop down it would disappear so it can start over counting.
So, i thought that when the div's height changes it could display +1.
But, i don't know enough javascript to do this....
My html:
<div id="button">Button</div>
<div id="chartdropupcontainer">
<div id="chart">
<button>test</button>
<script type="text/javascript">
$("button").click(function () {
$("#testp").hide();
});
$("#chart").bind("resize", function(){
alert("test");
});
</script>
<p id="testp"></p>
</div>
</div>
</div>
My Css:
* {
padding: 0;
margin: 0;
font-family: Helvetica;
color: white;
}
#chartdropupcontainer {
width: 200px;
background-color: red;
position: fixed;
bottom: 0;
right: 0;
margin-right: 20px;
padding: 0 5px 0 5px;
margin-bottom: 47px;
z-index: 998;
}
#chartdropupcontainer h1 {
margin: 5px;
color: black;
cursor: pointer;
}
#chart {
width: 100%;
background-color: black;
height: 400px;
overflow: auto;
}
#button {
background-color: blue;
cursor: pointer;
padding: 10px;
width: 190px;
position: fixed;
bottom: 0;
right: 0;
margin-right: 20px;
z-index: 999;
}
My javascript:
$(document).ready(function() {
$("#button").click(function () {
$("#chartdropupcontainer").slideToggle("slow");
});
});
And here is a link to an online version: http://www.rutgerinc.nl/niels/
Edit: sorry, bit inpolite!
Could anyone please help me with this?
First off, the resize event is when you resize a window so that's why your event is never firing.
http://api.jquery.com/resize/
I think you need to alter the bit of code where the item gets added to the basket. Isn't there more javascript somewhere to add things to the basket in the first place?
An event-driven approach like BGerrissen suggests would be perfect because you can fire one or more independent functions when the user adds something to the cart.
As you are using jQuery, custom events are quite easy. You use trigger to fire the event and then bind to listen for it.
http://api.jquery.com/trigger/

Categories