I want to remove and add a overlay as often as I want but I cant seem to get js to remove a by js created element, any ideas?
JS Fiddle Example
html
<div id="background"></div>
<button id="open">Open</button>
<div id="overlay">
<button id="close">Close</button>
</div>
js/jQuery
$(function() {
$('#open').click(function() {
$('body').append('<div id="overlay"><button id="Close">Close</button></div>');
});
$('#close').click(function(){
$('#overlay').remove();
});
});
css:
#overlay{
padding: 8px;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.1);
}
You need to attach handler to click event of $('#close') once again after you add it to document.
$(function() {
$('#open').click(function() {
$('body').append('<div id="overlay"><button id="close">Close</button></div>');
$('#close').click(function(){
$('#overlay').remove();
});
});
$('#close').click(function(){
$('#overlay').remove();
});
});
After click on close you no longer have close button with your handler attached. It deleted by $('#overlay').remove() code. After you click open button brand new #overlay element added. It isn't contains handlers for old element.
You can archive your goal with even less code:
https://jsfiddle.net/IAfanasov/msro2hoq/6/
$(function() {
$('#open').click(function() {
$('#overlay').show();
});
$('#close').click(function(){
$('#overlay').hide();
});
});
Why not just show and hide it?
$(function() {
$('#open').click(function() {
$('#overlay').show();
});
$('#close').click(function(){
$('#overlay').hide();
});
});
Related
I have about 40 button on the project but my example shows only four. My code is very repetitive and wondering if there's a lighter approach or language? I'd like to hide or change style of the clicked button/s.
$("[data-id='1']").on('click', function() {
$("[data-id='1']").css('visibility', 'hidden');
});
$("[data-id='2']").on('click', function() {
$("[data-id='2']").css('visibility', 'hidden');
});
$("[data-id='3']").on('click', function() {
$("[data-id='3']").css('visibility', 'hidden');
});
$("[data-id='4']").on('click', function() {
$("[data-id='4']").css('visibility', 'hidden');
});
button {
margin: 20px 0 0 20px;
padding: 5px 30px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-id='1' class="hope">1</button>
<button data-id='2' class="hope">2</button>
<button data-id='3' class="hope">3</button>
<button data-id='4' class="hope">4</button>
Thanks
http://jsfiddle.net/05cempj7/
This function operates on all elements having the .hope class.
$(".hope").on('click', function() {
$(this).css('visibility', 'hidden');
});
If clicked on any hope class $(".hope") then $(this) reefers to the element that is clicked on.
HI i have face to one issue in my code
$(document).ready(function() {
$(document).on('click', '.rohit', function() {
alert('rohit');
})
$(document).on('click', '.azad', function() {
alert('azad');
})
});
.rohit {
width: 200px;
height: 100px;
background: green;
}
.azad {
width: 100px;
height: 50px;
background: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="rohit">
hello
<div class="azad">
hello azad
</div>
</div>
if i click to azad div than rohit div also trigger alert how to stop to this
i m using to this seriousness in angular js
You can use stopPropagation to avoid triggering the listener of the parent element:
$(document).ready(function(){
$(document).on('click','.rohit', function(){
alert('rohit');
})
$(document).on('click', '.azad',function(e){
e.stopPropagation();
alert('azad');
})
});
.rohit{width:200px;height:100px;background:green;}
.azad{width:100px;height:50px; background:gray;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="rohit">
hello <div class="azad">
hello azad
</div>
</div>
You can use event stopPropagation() method. This method prevents the event propagation to the parents.
$(document).ready(function(){
$(document).on('click','.rohit', function(e){
alert('rohit');
})
$(document).on('click', '.azad',function(e){
e.stopPropagation()
alert('azad');
})
});
Here is the fiddle link https://jsfiddle.net/9c54tow6/
I am using java script to display a div as a pop up. I am loading this popup after 5seconds the page is loaded. But when i close the pop up , the div is closed but i am not able to scroll up and down after closing the popup div.
please find the code below:
<div id="outer-popup"
style="position: absolute; left: 0; top: -10px; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.75); display: none; z-index: 10000">
<div class="popup" id="popUpWrapper">
<div class="popupContainer" style="padding:0 0 0 10px;">
<div class="popupClose" id="popupclose" style="float:right;width:auto;">
<a href="#" class="pClose"><img
src="/img/src/ex.jpg"></a>
</div>
<form:form modelAttribute="dataForm" id="data_form" name="dataForm"
method="post" action="/dataAction" >
FORM DATA TO SUBMIT
</form:form>
</div>
</div>
<script>
jQuery(document).ready(function () {
setTimeout(showPopup(), 5000);
});
function showPopup() {
$('#outer-popup').show(0, function () {
$('body').css('overflow', 'hidden');
$('.popup').center();
});
}
$("#popupclose").click(function () {
$("#outer-popup").css("display", "none");
});
</script>
Please correct me and provide suggestions on how to correct this. Thanks.
take a look at this:
$('body').css('overflow', 'hidden');
Its just the thing that blocks your scroll on body.
On close do this:
$("#popupclose").click(function () {
$("#outer-popup").css("display", "none");
('body').css('overflow', 'scroll');
});
A textbox is created on runtime in Javascript. It gets open when user clicks a button.
<input type="text" id="documentTitle" name="documentTitle" value="<spring:message code="document.Title"/>"
On click I want to display textbox text highlighted.
How to fire onload element using JQuery?
Tried following JQuery, but not successful:
$(document).on("load", "#documentTitle" , function() {
myquery.highlightText(this);
});
i don't what you exactly want but here some code that may help you ?
$(document).ready(function() {
alert("on load event fire");
$("button").click(function() {
$("textarea").show();
})
});
textarea {
display: block;
width: 400px;
color: black;
padding: 10px;
text-shadow: 0px 0px 2px rgba(255, 0, 0, 1);
height: 120px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea style="display:none">asdasdasd</textarea>
<button>
show
</button>
You dont have the choice there is no event fired when an arbitrary DOM element such as a <div> becomes ready.
$(document).ready(function(e) {
$(document).on("click", "#test", function() {
$("#content").append('<input type="text" id="documentTitle" name="documentTitle" value=""/>');
//do your highlight here
$("#content #documentTitle").val("test");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="test" value="test" />
<div id="content"></div>
If you really want an event you should create a custom one
$(document).ready(function(e) {
$(document).on("click", "#test", function() {
$("#content").append('<input type="text" id="documentTitle" name="documentTitle" value=""/>');
$("#content #documentTitle").trigger("myLoadedevent");
});
$(document).on("myLoadedevent", "#documentTitle", function() {
//do your highlight here
alert('event');
});
});
I want to do an overlay for my post content, like a 'full-screen modal dialog'. I've stuck at hiding and showing my content and items. I want when the content is shown, the items will become invisible.
http://jsfiddle.net/vjdwLzx8/
$(function(){
$('.item').on('click',function(){
$(this).next('.content').css('display','block');
});
});
I also tried
var item= $(this).next('.content').detach();
$('body').html('').append(item.css('display','block');
but I have to reload the page to get back to the item page which is something bad.
use
DEMO FIDDLE
$('.item').on('click',function(){
$('.content').hide(); // hide
$(this).next('.content').show(); // show
});
WITH ANIMATION
DEMO FIDDLE(Animation)
$('.item').on('click', function () {
$('.content').hide("slow", function () {
// Animation complete.
}); // hide
$(this).next('.content').show("slow", function () {
// Animation complete.
}); // show
});
Create an overlay div
<div class="overlay"></div>
css:
.overlay {
display:none;
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
opacity: 0.5;
z-index: 100;
background: black;
}
onClick of items activate overlay and show content.
$(function () {
$('.item').on('click', function () {
$('.item, .content').hide();
$('.overlay').show();
$(this).next('.content').css('display', 'block');
});
$('.close-content').on('click', function () {
$('.content, .overlay').hide();
$('.item').show();
});
});
Also added provision for a close button.
Fiddle