We Keep Coding

How can I close layer popup when I click background or button?

The scenario is as follows.
Default Status (no layer popup)
When I click the button, layer popup shows.
Click the button or outside, layer popup will be hide.
I want to close the layer popup when I click background(outside) or button.
How can I do with Vanilla JS or jquery? (based on HTML)
I would appreciate it if you could answer.

When you open the popup attach a click listener to body that closes it and removes the listener.

You can use this code
//use by id
document.getElementById(#id).style.display = 'block';
document.getElementById(#id).style.display = 'none';
//use by className
document.getElementById(.className).style.display = 'none';
document.getElementById(.className).style.display = 'block';
or use jQuery
$(document).ready(function(){
$("#id").click(function(event){
// $("#id").toggle();
// $("#id").hide();
// $("#id").show();
});
});

Set id for your layer in HTML part like id="layerPopup"
Then on your JS code create event for your button
$(document).on('click', '#btnId', function(){
$("#layerPopup").hide();
});

You should appear a overlay which will cover the whole body, and give it css property z-index to lower from the button, and when apply click function on it same as my code
HTML
<div class="overlay"></div>
CSS
.overlay{
background-color: transparent;
inset: 0;
position: fixed;
z-index: 100;
display: none;
}
button{
z-index: 101;
}
JQuery
$('button').click(function(){
$('.overlay, popup').toggle();
});
$('.overlay').click(function(){
$('.overlay, popup').hide();
});

One standard way to handle such scenario is to have a backdrop div behind the popup and then add an event listener to it. You may choose to change backdrop's background color to increase pop up aesthetics visibly.
.backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 10;
background: rgba(0, 0, 0, 0.75);
}
.modal {
position: fixed;
top: 30vh;
left: 10%;
width: 80%;
z-index: 100;
overflow: hidden;
}
<div class="backdrop" />
<div class="modal" />
And then you can add an event listener on backdrop:
$(document).on('click', '.backdrop', function(){
$(".modal").hide();
});
PS: There may be some syntax issues!

boostrap fix full width element with content aligned

I have a div which becomes fixed when it is scrolled to. I would like this div to go full width when it is in it's fixed state. I have done this by setting width: 100% to the div in question. The problem is I would like the content of the div to still line up with the content of the page, instead of going to the left. I would like to be able to do this without changing the current html markup.
Example: Full width when scrolled to and in fixed state.
Fiddle: https://jsfiddle.net/DTcHh/19335/
Example: If I add padding left to bring the content inwards this works. The problem is the padding left could be any number -is there a way of reliably working this out?
Fiddle: https://jsfiddle.net/DTcHh/19337/
CSS:
#myDiv.fixed {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
Jquery:
$(window).scroll(function() {
if (isScrolledIntoView($('#myDivWrapper'))) {
if (!initSet) {
initSet = true;
}
$("#myDiv").removeClass('fixed');
} else if (initSet) {
$("#myDiv").addClass('fixed');
}
});

Add an extra .container div inside the #myDiv and adjust the padding as and when the fixing takes place.
<div id="myDivWrapper">
<div id="myDiv">
<div class="container">
<p>
This should be fixed once it comes into view and then goes out of view.
</p>
</div>
</div>
</div>
#myDiv .container {
padding: 0;
}
#myDiv.fixed {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
#myDiv.fixed .container {
padding: 0 15px;
}
This can probably be tidied up a little but I think you get the idea.
JSfiddle

Don't write left:0
enter link description here
#myDiv.fixed {
position: fixed;
bottom: 0;
width: 100%;
}

You simply need to calculate the measurement between the content and the window edge and then apply this as left padding when required.
var measure = ($(window).width() - ($('#myDiv').offset().left + $('#myDiv').width()));
$(window).scroll(function() {
if (isScrolledIntoView($('#myDivWrapper'))) {
if (!initSet) {
initSet = true;
}
$("#myDiv").removeClass('fixed').css('padding-left', 0);
} else if (initSet) {
$("#myDiv").addClass('fixed').css('padding-left', measure+'px');
}
});
DEmo Fiddle https://jsfiddle.net/DTcHh/19338/
EDIT: If editing the markup is an option i'd recommend #Paulie_D 's approach. You don't need to add another container though - simply add a class to your existing markup.
Demo Fiddle https://jsfiddle.net/DTcHh/19340/
<div id="myDivWrapper">
<div id="myDiv">
<p class="container">
This should be fixed once it comes into view and then goes out of view.
</p>
</div>
</div>

Since all your paragraphs are inside a container class, you can also add this class to your fixed paragraph as well.
$("#myDiv").removeClass('fixed');
$("#myDiv p").removeClass('container');
...
$("#myDiv").addClass('fixed');
$("#myDiv p").addClass('container');
Further more, you will need to tell #myDivto go full width:
#myDiv.fixed {
position: fixed;
bottom: 0;
left:0;
right:0;
}
See working example here.

javascript fade in/out only works with div but not its children

I made a js script that hides/shows elements on a page but it only shows div with the id and won't show the other divs inside that div.
My css :
.content {
position: relative;
}
.content div {
display: none;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
My js:
$(".link").click(function(e) {
e.preventDefault();
$('.content div').fadeOut('slow');
$('#' + $(this).data('rel')).fadeIn('slow');
});

You must hide only the box div:
$(".link").click(function(e) {
e.preventDefault();
$('.content div.box').fadeOut('slow');
$('#' + $(this).data('rel')).fadeIn('slow');
});
and as the others said you must use the css as:
.content > div {}

You should use .content > div instead of .content div in your CSS.
It will select only the div directly under the .content, and not every div inside the .content

Confusing question, but I got it.
Use this CSS-selector for nested divs:
.content > div {

To prevent this behaviour better to use some classes or id's instead of tags as div
Simplest solution i think will be change css
From
.content div {
display: none;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
To
.content .box{
display: none;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
And js will be next :
$(".link").click(function(e) {
e.preventDefault();
$('.content .box').fadeOut('slow');
$('#' + $(this).data('rel')).fadeIn('slow');
});
If you look into dev console, you will see that script didn't apply fadeOut to div's inside div with class box. So that why you didn't see content.

Dragged items and jquery animate

I use this code to move the item while scrolling the page
$(document).scroll(function() {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
$("#profile").offset({top:scrollTop+34});
});
And this code to show and hide it.
$(document).ready(function() {
$(".various[type=profile]").click(function() {
if($("#profile").attr("clicked") == "yes") {
$("#profile").stop().animate({opacity: 0}, 1000);
setTimeout(function(){$("#profile").css("visibility", "hidden")}, 1000);
$("#profile").attr("clicked", "");
}
else {
$("#profile").css("visibility", "visible");
$("#profile").stop().animate({opacity: 1}, 1000);
$("#profile").attr("clicked", "yes");
}
});
});
This is css
#profile {
position: absolute;
top: 34px;
right: 0;
width: 200px;
visibility: hidden;
z-index: 1000;
opacity: 0;
}
The problem is that the item returns to it's initial position (top: 34px, right: 0px) with every click. With using fadeIn/fadeOut I have the same problem.

I think you should just look into jQuery UI. They have code that can already make tags draggable and droppable. They are easy to define too.
$("#profile").draggable();
http://jqueryui.com

There are a couple of things you need to do here.
1: Rather than positioning the element with jQuery, you can just use the CSS property position:fixed to stick it in the upright corner.
#profile {
position: fixed;
top: 34px;
right: 0;
width: 200px;
z-index: 1000;
}
2: There are a some issues with your jQuery code for showing and hiding. First, clicked is not a valid HTML attribute. You should consider using $(element).data('clicked') instead of $(element).attr('clicked') to store its visibility. Next, when you set visibility:hidden, the click event no longer registers on it, so clicking on it won't show it again.
Maybe this is the effect you're looking for?

Expand textarea (and bring it to front) while it has the focus

I want to expand a textarea (increase the height) as long as it has the focus. When expanded, the textarea should not move the content down, instead it should be displayed above the other content.
This is the code I'm using so far (see here for an example):
$(document).ready(function () {
$('#txt1').focus(function () {
$(this).height(90).css('zIndex', 30000);
$('#txt2').val('focus');
});
$('#txt1').blur(function () {
$(this).css('height', 'auto');
});
});
The expanding of the textarea works fine, but I can't get it to display above the other elements on the page (it is displayed behind the elements which follow).
Are there any tricks to show the expanded textarea above/in front of all other elements?
Update: this is the (minmal) HTML code used to reproduce the problem:
<div style="height:20px;">first:<br/>
<textarea id="txt1" rows="1" cols="20"
style="width: 400px; height: 12px; font-size: 10px;">
</textarea>
</div>
<br/>
second:
<br/>
<input type="text" id="txt2"/>

Setting position on the textarea works. You can also get rid of the z-index.
Working demo

Adding a z-index does nothing without the element having a position other than static. Personally, I would add a class with all of the css changes and include an overlay, like this (demo):
CSS
.focused {
position: relative;
height: 90px !important;
z-index: 1000;
}
.overlay {
display: block;
position: absolute;
height: auto;
bottom: 0;
top: 0;
left: 0;
right: 0;
margin: 0;
background: #000;
opacity: .75;
filter: alpha(opacity=75);
z-index: 999;
}
Script
$(document).ready(function () {
$('#txt1').focus(function () {
$('<div class="overlay"/>').appendTo('body');
$(this).addClass('focused');
$('#txt2').val('focus');
});
$('#txt1').blur(function () {
$(this).removeClass('focused');
$('.overlay').remove();
$('#txt2').val('blur');
});
});

Try setting the style 'position:absolute;' on the first textarea (txt1) and that should do the trick.

Try this plug-in. Should be quick and simple: http://unwrongest.com/projects/elastic/

working fiddle with input and textarea, mostly css with a little jquery for positioning
http://jsfiddle.net/Ap5Xc/