So I have the code for the the div. All I need is for the div to fade out and then have the parent child removed after fade.
JSFiddle Link
HTML
<div onclick="fadeOut(this)" id="fadeOut">
<div id="divText">
This is a simple div with some text in it. This is another line of text.
All I am doing is continuing adding text to my div container. If I keep adding text guess what will happen. You have to scroll to see the rest!
</div>
</div>
The CSS is located in the JSFiddle link.
I know solution for this at jQuery
$("#fadeout").ckick(function(){
$(this).find("div").fadeOut().parent().remove();
});
You indicate jQuery via the tags, so here is a jQuery solution. It passes a callback function to the fadeOut function which removes the #divText.
function fadeOut(i) {
$(i).fadeOut(3000, function(){
$("#divText").remove();
});
}
One improvement I would recommend is to attach the event handler via javascript instead of inline.
Javascript
$("#fadeOut").click(function(){
$(this).fadeOut(3000, function(){
$("#divText").remove();
});
});
HTML
<div id="fadeOut">
<!--Content Here -->
</div>
JS Fiddle: http://jsfiddle.net/ZGp62/1/
You can easily do this with the fadeOut jquery function.
Example:
$( "#buttonID" ).click(function() {
$( "#thedivID" ).fadeOut( "slow", function() {
//this removes the div from the DOM
$( "#thedivID" ).remove();
});
});
See more examples and documentation here: http://api.jquery.com/fadeOut/
Related
How can I make a figure element collapsible, without adding an extra button?
<figure><img src="abc.png"></figure>
By default, I would like to place a button to open the image at this point. Can this button be generated automatically?
You can use the slideToggle() function assuming you have jQuery included (HIGHLY RECOMMEND).
Then you can simply do:
$( "#myButton" ).click(function() {
$( "figure" ).slideToggle( "slow" );
});
You will need to of course add a button. You could append one with jQUery (automatically) or you can edit the HTML to get it there.
Here is the HTML way
<button id="myButton">Click Me</button>
Here is the jQuery way (untested)
$('figure').append("<button id='myButton'>Click Me</button>");
Best of Luck to You! (again this is all untested)
Come to think of it you probably want after() instead of append()
because your button will disappear after you toggle once.
Use this
$('figure').after("<button id='myButton'>Click Me</button>");
Link to jQuery slideToggle: http://api.jquery.com/slidetoggle/
Check out this simple code snippet to toggle image using figure element itself
$('#accordian_img').click(function () {
$('.img-toggle').toggleClass("show"); // toggle show class to image element
});
/* Image style to show and hide */
.img-toggle.show {
display:block;
}
.img-toggle {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure id="accordian_img" style="width:400px;cursor:pointer">
Click To Toggle Image
<img class="img-toggle" src="http://placehold.it/400x150">
</figure>
I have an element with a a script for a mouseover to show an image. I can't change the HTML, so is it possible to disable the javascript in the link, but still keep the link for the href intact? I cant use the id of the a element since it isn't unique.
HTML:
<div class="container">
<a id="a211094" onmouseout="etim();" onmouseover="stim('/imgs/7c24b548-4f4c-418e-ad4f-53c73cf52ace/250/250',event,this.id);" href="/products/Computers/Desktops/Acer/Acer-Aspire-TC-705W-Towermodel-1-x-Core-i3-41?prodid=211094"><img src="" alt="">
</a>
</div>
if you want to make all ancher tag or you can give class for those anchor tags on which you want to perform this and instead of $( "a" ) write $( ".myClass" )
$( "a" ).each(function( index ) {
$( this ).removeAttr("onmouseout");
$( this ).removeAttr("onmouseover");
});
use can use attr("disabled", "disable"); to disable it
Overwriting the JavaScript:
document.getElementById("a211094").onmouseover = null
document.getElementById("a211094").onmouseout = null
document.getElementById("a211094").removeAttribute("onmouseout");
document.getElementById("a211094").removeAttribute("onmouseover");
If you can consistently access and control the containing element you could try a slightly left-field approach using an onmouseover event on the container.
There's a function called setCapture() which you can call during a mouse event to "capture" all mouse events of that kind for the element it's called against, until a mouseup event or releaseCapture() is called. So you could do something like the following:
jQuery(document).ready(function() {
$container = jQuery("#<yourcontainerid>");
$container.on("mouseover", function(e) {
if (e.target.setCapture) e.target.setCapture(true);
});
$container.on("mouseout", function() {
document.releaseCapture();
});
});
The (true) argument is important (I think, without testing) as it prevents any descendent events firing, which is what you want here.
The mouseout function will then release the capture when it leaves the area of the container.
Will this work? can't say for sure, I haven't tested it in your exact case, but in theory it should!
UPDATE: you can use ".container" rather than "#yourcontainerid" in the JQuery if you so wish to enable this for everything of class container.
In my HTML code I have a div. This div includes some warnings to the users. Warnings are wrapped inside div elements with no ID. If user clicks on close button, it should remove the warning div.
<div id="alarmbox" align="center">
<div>this is warning 1<button onclick="remove_div_of_this_button(this);">x</button></div>
<div>this is warning 2<button onclick="remove_div_of_this_button(this);">x</button></div>
</div>
and this is my JS code:
function remove_div_of_this_button(thisbutton)
{
thisbutton.parentNode.parentNode.removeChild(thisbutton.parentNode);
}
It works fine. However, removing an element is better to be animated instead of sudden remove. If I want to manipulate JS only, how to remove the div with jquery? Is it possible to identify thisbutton in jquery since $(thisbutton) should not work here?
Separate out js from your html and use click event with jquery.
With fadeOut
$(function(){
$('#alarmbox button').click(function () {
$(this).closest('div').fadeOut(1000,function(){
$(this).remove();
});
});
});
Demo
Or try slideUp
Demo2
Like this maybe?
function remove_div_of_this_button(thisbutton)
{
$(thisbutton).parent().fadeOut(function() {
$(this).remove();
});
}
This is a question that is related to a previous question of another member which can be found here.
This is the Javascript function to hide a div (which is an answer to the other member's question):
function hide(obj) {
var el = document.getElementById(obj);
el.style.display = 'none';
}
The HTML is:
<div id='hideme'>
Warning: These are new products
<a href='#' class='close_notification' title='Click to Close'>
<img src="images/close_icon.gif" width="6" height="6" alt="Close" onClick="hide('hideme')" />
</a>
</div>
My followup question to this is: how can I add a cool effect of transition? The result will be the div 'hideme' would close slowly. Is there a work around for this?
Thanks so much everyone! It would be highly appreciated!
Note: I'm a noob with Javascript. 0-0
$("#"+el).fadeOut(500);//el must be the id of the element
If you're using jQuery
function hide() {
$(this).parent().fadeOut();
}
As this is triggered by an event the 'this' variable will be set to the element from which it came, as you want the parent element to vanish when it's clicked this will do the trick
EDIT: For this to work you may have to play with your HTML and how many $(this).parent().parent()... you need but this would be the best way to go about it, then you don't need to pass the ID around
EDIT 2: So .parent() selects the element containing the selected element, so in this case $(this) refers to the button that was clicked as that's where the click event came from.
So $(this).parent() refers to the container element, in this case the a element and therefore the $(this).parent().parent() refers to the div element which you want to hide.
So you could give the image a class of 'closable' then do the following
$('.closable').click(function() {
$(this).parent().parent().fadeOut();
}
This means whenever you click something with the class closable it will go up the DOM tree two elements to (with .parent().parent()) and then fade it out.
This will allow you to remove the on click event from the image, you just need to put the handler above in the jQuery document.ready function which looks like:
$(document).ready(function() {
//Click function here
});
A popular choice for this would be JQuery UI's effect method.
With this, you can write some very simple Javascript to hide your div in a stylish manner, for example:
function hide(obj) {
$(obj).effect("scale");
}
EDIT:
Here's an example jsFiddle
Use jQuery to do transition effects:
$(function(){
$("a.close_notification").click(function(e){
e.preventDefault();
// stop other animations and hide, 500 milliseconds
// you can use the function fadeOut for that too
$("#hideme").stop().hide(500);
});
});
I have a div like this:
<div>
<font class='slideclick'>Click here to slidedown dynamic content</font>
<div class='slidedownonclick'> This is the content that slides down </div>
</div>
Jquery triggers the 'slidedownonclick' to slidedown when 'slideclick' is clicked. This works great but i have and indefinite amount on these div's reccuring in the same webpage, from a mysql database. Giving them unique id's is impossible. Is there any way that i could get only the 'slidedownonclick' in the same div as its respective 'slideclick' to slidedown when it is clicked.
Any help would be much appreciated,
thanks,
This will slide down the next .slidedownonclick div when .slideclick is clicked:
$('.slideclick').click(function() {
$(this).next('.slidedownonclick').slideDown();
});
On a .slideclick handler you will find that sibling with:
$(this).find('+ .slidedownonclick');
or:
$(this).next('.slidedownonclick');
$('.slideclick').click(function() {
$(this).next('.slidedownonclick').animate({
height: '+=50'
}, 1000);
});
Check about jQuery.next(), it's what do you want.
Using it you can get the next sibbling which class/id is the selector.
EDITED:
until jQuery 1.6.4
jQuery(document).delegate('font.slideclick', 'click', function() {
jQuery(this).next('slidedownonclick').slideToggle();
});
jQuery 1.7 +
jQuery(document).on('click', 'font.slideclick', function() {
jQuery(this).next('slidedownonclick').slideToggle();
});