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>
Related
For an image gallery i use lightbox for opening the images. The way i call it is trough an < a > tag with a data-rel as below.
<a href="../catalog-reseller/wall/abstract/w10197169324.jpg" data-rel="lightcase:gallery" title="w10197169324">
Is it possible to call the exact same thing onclick without using < a >?
My complete code is:
<div class="justified">
<a href="../catalog-reseller/wall/abstract/w10197169324.jpg" data-rel="lightcase:gallery" title="w10197169324">
<img src="../catalog-reseller/wall/abstract/w10197169324.jpg" alt="w10197169324">
</a>
</div>
I want to add some buttons that appear on image hover like add to cart or add to favourite. The problem is that the < a > affects everything that is in the image area so the buttons are useless because anywhere i click it openes the image.
I thought that making the link inactive and calling lightbox onclick of a separate button would be a solution.
The simplest solution would be to move buttons over the link. For example, create the structure like this:
<div class="justified">
<a href="../catalog-reseller/wall/abstract/w10197169324.jpg" data-rel="lightcase:gallery" title="w10197169324">
<img src="../catalog-reseller/wall/abstract/w10197169324.jpg" alt="w10197169324">
</a>
<button>Add to cart</button>
</div>
and then use CSS to make your button absolute positioned.
A decent, yet maybe not so eloquent solution would be to use a jQuery mouseenter method (for the element you want to create the hover effect for) - and use jquery to disable that anchor tag during the hover and then a mouseleave to reactivate the anchor... You should add an id to the anchor and image to make it easier.
//HTML:
<a id="removeOnHover" ...>
<img id="hoverHere"...>
//jQuery:
$( '#hoverHere' )
.mouseenter(function() {
$( '#removeOnHover').attr( 'disabled', 'true' );
//any other code you need...
})
.mouseleave(function() {
$( '#removeOnHover').attr( 'disabled', 'false' );
//any other code you need...
});
Something like this should help.
I have a button, and what I have is when you click on it, and new element "drops" in. So what I want to do is when you press it again it goes back. As essentially fades out. Here's what I have so far \
$(".icon-search").click(function(){
$(".search").css('height', '100px')
});
When you click on the icon, the black shape goes to 100px. And what I want to do, is get rid of it, by clicking on it again. I've seen other stuff online, but none seemed to work.
Here's a demo http://jsfiddle.net/PHX3A/
JSFiddle
.toggleClass() will do the trick for you.
.toggleClass() :
Add or remove one or more classes from each element in the set of
matched elements, depending on either the class's presence or the
value of the switch argument.
JavaScript :
$(".icon-search").click(function(){
$(".search").toggleClass("doHeight");
});
CSS :
.doHeight{
height:100px;
}
for further information in using .toggleClass() click here
2nd Option :
JSFiddle
using .toggle() reference : toggle
JS :
$( "div" ).click(function() {
$( ".search" ).toggle( "slow" );
});
Use toggleClass function to set the CSS. In this example, I added CSS to the toggle class
Try this:
JQuery:
$(".icon-search").click(function(){
$(".search").toggleClass('toggle')
});
CSS:
.toggle{
height:100px;
}
JSFiddle Demo
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/
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);
});
});