This question already has answers here:
jQuery remove() callback?
(3 answers)
jQuery callback within the remove() function
(2 answers)
Closed 5 years ago.
I would like to remove div first, then show my popup. But while showing the alert I am able to see the div.
Once closing the popup the div will be removed.
$("#btnRemoveDiv").on("click",function(){$("#divRemove").remove();
alert("Removed");});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="divRemove">Remove this div first then show the popup. Dont show this while the popup is opened!</div>
<input type="button" id="btnRemoveDiv" value="Remove">
#quirimmo Please see this:
Use when to manage it as a promise and it should work:
$("#btnRemoveDiv").on("click",function(){
$.when($('#divRemove').remove()).then(function() {alert('removed');});
});
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<div id="divRemove">Remove this div first then show the popup. Dont show this while the popup is opened!</div>
<input type="button" id="btnRemoveDiv" value="Remove">
JSfiddle:
https://jsfiddle.net/91x9ta3n/12/
Use a timeout so the alert and the remove doesn't execute at the same time.
$("#btnRemoveDiv").on("click", function () {
$("#divRemove").remove();
setTimeout(function () {
alert("Removed");
}, 500);
});
jsfiddle: https://jsfiddle.net/91x9ta3n/7/
Related
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
I have main.aspx and second.aspx.The code in main.aspx:
<form id="form1">
<div id="main">
</div>
</form>
And in second.aspx:
<div id="second">
<asp:Textbox runat="server" id="txt1"></asp:Textbox>
<input type="button" id="bttn" value="send"></input>
</div>
At the run time I'm loading second.aspx page into main.aspx div id="main".
$("#main").load("second.aspx #second");
I'm trying to get the textbox value from main.aspx.But when I tried
$("#bttn").click(function(){
var t=$("txt1").val();
alert(t);
});
It gives nothing.It seems to be never going into the function.How can get the value from the textbox.
That is because element do not exist when you are defining the event. You need to either use
1) Event Delegation
$("#main").on('click','#bttn',function(){
var t = $("#txt1").val();
alert(t);
});
or
2) Bind the event on success function of load event
Try this:
$("#bttn").click(function(){
var t=$("#txt1").val();
alert(t);
});
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
jQuery does not seem to be able to select a loaded HTML element. Here is my HTML:
<div class="class name" style="display: none;">
<div id="submenuID" class="submenuID" />
<script>
loadHtmlUsingJavascript('parameter1', 'parameter2');
</script>
</div>
The loaded HTML is a list of links. This is my JavaScript:
$("#submenuID li").addClass("active");
But it would not add the class. After some snooping around. I learn to use
$("#submenuID li").live('click', function() {
$("#submenuID li").addClass("active");
});
However, it does not work until I click on the link a second time.
You have to do the following:
$("#submenuID").on('click', 'li', function() {
$(this).addClass("active");
});
First, the jQuery .live function is deprecated since jQuery 1.7 (http://api.jquery.com/live/)
Also, you should be listening for li methods inside the #subMenuID element.
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 8 years ago.
i use jquery.show() to display a div, but I cannot see the display effect, unless invoke alert after show method like this:
JavaScript:
$("#screenAsLayer").show();
$("#screenAsLayer_content").show();
alert("aa");
HTML:
<div id="screenAsLayer" class="screenAsLayer"></div>
<div id="screenAsLayer_content" class="screenAsLayer_content">
<img src="..../img/....gif">
</div>
CSS:
.screenAsLayer{
display:none;
z-index:9;
position:abosolute;
}
.screenAsLayer_content{
display:none;
z-index:10;
position:abosolute;
}
JSFiddle Demo
Try this out:
$(document).ready(function() {
$("#screenAsLayer").show();
$("#screenAsLayer_content").show();
});
Working Fiddle
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Can i add like a slide to the hidden divs when they disappear ?
I want the div to slide when it disappears
Like this:
Button press
The hidden div slides in
Button press again
the div disappears with a slide to the side
How can i do that ?
I recommend you use jQuery
Here is a good tutorial for sliding things in jQuery.
Here is a very simple example using jQuery:
Check the JSFiddle:
HTML:
<!DOCTYPE html>
<html>
<head>
<!-- Include the jQuery Library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<!-- Our DOM Structure for the javascript using jQuery -->
<div id="theDiv">This is a div!</div>
<button id="myButton">Click Me!</button>
</body>
</html>
Javascript:
<script type="text/javascript">
// When the page is ready and loaded
$(function(){
// On click of "myButton"
$('#myButton').click(function(){
// "slideToggle" the div
// ie: If hidden show it, else hide it
$('#theDiv').slideToggle();
});
})
</script>
View the jQuery slideToggle docs here
If you've never used jQuery before, check out:
http://learn.jquery.com/
http://thenewboston.org/list.php?cat=32 (Video tutorials)
You can do it with jQuery or another library. You can also write your own function but it would take a while.
The jQuery functions slideUp(), slideDown() and slideToggle() should help you.
well if wanting to do this with pure javascript it would take a bit of coding or you can use jquery and use the baked in animations.
http://api.jquery.com/animate/
button : assuming this to be your button id
data : div which is to be played
//include jquery
$(document).ready(function(){
$('#button').click(function(){
$('#data').toggle('slow',function(){ });
)};
});
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Jquery css show div?
Ok this is my problem that no one can seem to answer. I have two javascripts in use. Once is for the popup I have and tells it to stay closed for 24hrs when closed. The other is to put a link some where on the page to display this popup until refreshed and kept hidden till the cookie expires. Now the div popup is set to display:none. The cookie tells it to be shown until the close button is pressed. No matter what I seem to rework in my javascript to tempoarly show the popup from a link, it will not show. Some how the cookie javascript is going to have to be modified and thus having to remove css:display:none on the popup div. I have no idea what to do.
This is the current code:
http://jsfiddle.net/Dv7DR/-
http://pastebin.com/fHvv5spn
<script type="text/javascript">
$("#linkshow").click(function {
$("#window").show()
});
</script>
Submit a comment
<div id="window">
...
<div>
<script type="text/javascript">
...cookie popup hide for 24hr on close
</script>
Note: I have already tried:
$(document).ready(function() {
$("#linkshow").click(function(e) {
e.preventDefault();
$("#window").show();
});
});
and...
$(document).ready(function() {
$("#window").hide();
$("#linkshow").live('click', function(e) {
e.preventDefault();
$("#window").show();
});
});
and...
$(function() {
$("#linkshow").click(function() {
$("#window").show()
});
});
and...
<div id="window" style="display:none;">
to
<div id="window">
Then the other 24hr cookie javascript doesn't keep the popup hidden. I am assuming I need to take out the id="window" style="display:none; and some how advanced the javascript cookie at the bottom the code so it will hide when asked to be hidden for 24hr and show when needed to be shown on the current page until refresh but I am at blank on what to do.
$(document).ready(function() {
$("#window").hide();
$("#linkshow").live('click', function(e) {
e.preventDefault();
$("#window").show();
});
});
for live demo see this link: http://jsfiddle.net/nanoquantumtech/wTmCL/
you should load jquery library first :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
if you want to do the popup, you may look into jquery dialog. The code above will only show the div but not poping it up.
Jquery dialog will do the popup and make sure you referent jquery ui. http://jqueryui.com/demos/dialog/
also your html is incorrect and also , hiding a element using css is better than hiding by jquery when page loading
use
<div id="window" style="display:none;">
...
</div>
instead of
<div id="window">
...
<div>