We Keep Coding

Signature_pad doesn't work when hidden div is shown

I'm trying to implement this signaturePad https://github.com/szimek/signature_pad, and when I tried in a single page it works fine, but the problem comes when I try to put inside a div, which is hidden at the begining, then the pad doesn't work. I think is a canvas problem with the resizing, but I don't know how to solve it.
This is my code:
<div class="col-sm-9 col-md-10 message-list">
This is the first div, which I hidde when click on a row
</div>
<div class="col-sm-9 col-md-10 view-message" style="display:none" >
<div id="signature-pad" class="m-signature-pad">
<div class="m-signature-pad--body">
<canvas></canvas>
</div>
<div class="m-signature-pad--footer">
<div class="description">Sign above</div>
<button type="button" class="button clear sign_btn" data-action="clear">Clear</button>
<button type="button" class="button save sign_btn" data-action="save">Save</button>
</div>
</div>
and this is the js part:
$(document).ready(function() {
$(".list-group-item").each(function() {
$(this).click(function() {
$(".message-list").fadeOut('slow').css('display','none');
$(".view-message").fadeIn('slow').css('display','block');
});
});
I loaded all the js and css required and it is working in the main view, but not when I go through a button and change the div to block. I tried to read the documentation, but is not very clear.

Use: height: 0; overflow: hidden;
instead of: display:none
It works for me.

Can you try setting visiblity hidden instead of display:none ?
$(".list-group-item").each(function() {
$(this).click(function() {
$(".message-list").fadeOut('slow').css('visibility','hidden');
$(".view-message").fadeIn('slow').css('visibility','visible');
});
});

CSS manipulations didn't work for me. Instead of playing with CSS, I didn't render the signature pad until the user was ready to sign. I.e. wrap the signature pad component with the condition that listens to some event.

fadeIn of an element after fading out another one isn't really working

I've created a website called "Pumpn Records" and it's almost finished. On the website there is a section called "Releases". It is divided in two sections, but only one is visible.
So this is the website: http://s448350928.online.de/pumpn/records/index3
The Releases Section there has this html code (simplified):
<div class="container1" id="releases">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script>
function hide2014and2016show2015()
{
$("#2014").fadeOut(4000);
}
</script>
<script>
$(document).ready(function(){
$("#2015").hide();// hide it initially
$('#forward2014').click(function(){
$("#2015").delay(4000).fadeIn(4000); });
});
</script>
<h2>Releases</h2>
<div id="yearcontainer">
<div id="back2014" style="display:inline-block">
<img id="back2014img" src="..."/>
</div>
<h2 id="year">2014</h2>
<div id="forward2014" onclick="hide2014and2016show2015();" style="display:inline-block">
<img id="forward2014img" src="..."/>
</div>
</div>
<div id="2014">
<div class='container3' style="overflow:visible;">
<h2>EPs</h2>
<div class='row2'>
<a href="...">
<img width="300px" src="..."/>
<h2>Nano Miratus</h2>
<h3>Ganz Okay EP (Instrumental)</h3>
</a>
</div>
<div class='row2'>
<a href="...">
<img width="300px" src="..."/>
<h2>Nano Miratus</h2>
<h3>Ganz Okay EP</h3>
</a>
</div>
<div class='row2'>
<a href="...">
<img width="300px" src="..."/>
<h2>Nano Miratus</h2>
<h3>Viernacheins EP</h3>
</a>
</div>
</div>
</div>
<div id="2015">
<div class='container3' style="overflow:visible;">
<h2>Alben</h2>
<div class='row2'>
<a href="...">
<img width="300px" src="..."/>
<h2>Nano Miratus</h2>
<h3>Larmoyanz</h3>
</a>
</div>
</div>
<div class='container3' style="overflow:visible;">
<h2>EPs</h2>
<div class='row2'>
<a href="...">
<img width="300px" src="..."/>
<h2>Nano Miratus</h2>
<h3>Mrs. EP</h3>
</a>
</div>
</div>
</div>
</div>
If you look at the Releases Section, you will see there is this title ("2014"). Left and right to this titles are arrows, or carets I think they are called. :D
What I wanted to code is:
When someone clicks on the right arrow, the div with the id "2014" should fade out in 4000 milliseconds, then the div with the id "2015" should fade in in 4000 milliseconds. I put a delay before the fade in of that "2015" div. It's also 4000 milliseconds, so the fade in of "2015" should start right after the fade out of "2014" has finished.
What really happens is: http://i.stack.imgur.com/hxLVB.gif
So why isn't it working? I googled and stackoverflowed so much in the last hours and changed that code so often, but it still doesn't work. :(
UPDATE:
Now I know what the problem is, but I can't solve it. This website is a single page website, so I have a javascript plugin. It's called fullpage.js and I know how it works. When you scroll with your mouse, it adds an "transform: translate3d(x, y, z);" property to the "page-container fullpage-wrapper", and changes the y-value, so the page goes down. So I made two fiddles for a demonstration of the problem:
NOT WORKING FIDDLE (with the transform property in it):
jsfiddle.net/ktf9onjo/ (sorry, I'm not allowed to post more then two clickable links...)
WORKING FIDDLE:
jsfiddle.net/rant5af9/
You see that the problem is the transform property.
WHY???
I need an alternative. I cannot just remove it, the script will
be readd it every time I scroll.
Yeah, I could just change the translate3d(x, y, z) to a translateY(y), but nooo, that isn't working, I tried it. :D
INFO: You can find the fullpage.js in the javascript box in both fiddles.
PS: The website isn't finished yet. A lot of links and other things aren't working at the moment.
Please help, fanx! :)

Why the problem happens
As explained by #kosmos in comment:
Because the queue for animations is for every element animation itself. a won't wait for b to make its animation, but if you try to animate a two times, the second animation will wait for the end of the first one.
Solution
jQuery fadeOut function accepts a complete callback function (source).
This callback function is executed once the fade-out is complete. You don't need to use delay anymore this way, and your animations chaining will keep in sync.
html:
<div id="forward2014" style="display:inline-block">
javascript:
$('#forward2014').click(function(){
$("#2014").fadeOut(4000, function(){
// this starts when the fadeOut is finished
$("#2015").fadeIn(4000);
})
});
demo in this snippet
(click the >> as forward button)
$(document).ready(function(){
$("#2015").hide();
$('#forward2014').click(function(){
$("#2014").fadeOut(4000, function(){
// this starts when the fadeOut is finished
$("#2015").fadeIn(4000);
})
});
});
<div id="2014"style="display:inline-block">
2014
</div>
<div id="2015"style="display:inline-block">
2015
</div>
<div id="forward2014">
>>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Further remarks:
You may want to use jQuery's .on function for event listeners (reference). You can replace the onclick= and the .click by it. This should make your code easier to manage and more performant.
The ids in your html are supposed to contain at least a letter (source). Replace id="2014" by id="year-2014" or something like that.

i didn't got what you need exactly but to make to jquery actions going sequences you must call the second action with call back like this
$('#whatever').fadeOut('slow', function() {
$('#whatever').delay(4000).fadeIn('slow');
});
See This

Removing an image and showing this removed image in the deleted section

I have one div "upload" where various images are displayed and each image has an remove option which if clicked on hides the image.
I need to show the particular hidden images in below deleted section.
HTML
<div id="upload">
<a href="javascript:void(0);" onclick= remove()> Remove </a>
<img src="pic1.jpg">
</div>
<div id="deleted">
</div>
JS
function remove(){
$("upload").hide();
}
If I click on remove option in div "upload" then I need to hide that image and simultaneously show that image in div "deleted".

I've done some changes your original code.
HTML
<div id="upload">
<a>Remove</a> <img src="pic1.jpg" />
<a>Remove</a> <img src="pic2.jpg" />
<!-- etc. -->
</div>
<div id="deleted"></div>
JS (with jQuery)
$(function() {
$("#upload a").click(function(e) {
$(this).next("img").appendTo($("#deleted"));
$(this).remove();
});
});
By using jQuery, you can dynamically bind the click event to every a inside #upload. Then, relatively to the clicked a, find the next img, append it to #deleted (with appendTo), and finally delete the clicked a.

Here I have a sample JSFiddle http://jsfiddle.net/x3f6L9re/ with a demonstration how the problem can be solved.
Since you're intending to use jQuery, please don't add the function call in the HTML.
This line:
<a href="javascript:void(0);" onclick= remove()> Remove </a>
is thus obsolete. I used the tag button instead of a, which fits better here.
My code would be:
HTML
<div id="upload">
<figure>
<button type="button" role="button">Remove</button>
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9e/JQuery_logo.svg/524px-JQuery_logo.svg.png" alt="Image">
</figure>
<figure>
<button type="button" role="button">Remove</button>
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d3/Crystal_source.png" alt="Image">
</figure>
<figure>
<button type="button" role="button">Remove</button>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/AngularJS_logo.svg/695px-AngularJS_logo.svg.png" alt="Image">
</figure>
</div>
<div id="deleted">
</div>
I enclosed every image in a tag figure for better demarcation.
CSS
#upload, #deleted, figure {
border: thin solid black;
}
Adding border for visualisation of the effects.
And here is the jQuery:
JavaScript
$('button').click(function () {
$('#deleted').append($(this).next());
$(this).next().hide();
$(this).hide();
$(this).parent().css('border', 'none');
});
When a button is clicked its next sibling, which is the image, is appended to the div with id="deleted". Then the next sibling of the button, the image, is hidden, together with the button itself. For cosmetical purposes the border of the parent element - figure - is removed.
You can further enhance the code.

follow the below steps
<div id="upload">
Remove
<img src="pic1.png"/>
</div>
<div id="deleted">
</div>
Javascript part
$(document).ready(function() {
$("#removebutton").click(function() {
$("#deleted").html($("#upload").find("img"));
});
});
Check this working fiddle http://jsfiddle.net/zzpgn6zr/
Let me know if it is helpful

Orbit Slider: Captions Not Displaying

I am trying to implement the Foundation 3 slideshow Orbit into my Foundation mobile responsive design. When I try to place captions on the slides, none show but the caption bar does. This is based on the included homepage template, so the CSS for the slider components has not been altered from what was provided, but an override CSS file was included but shouldn't effect anything. (style.css) I have tried two methods, neither works. You can see the issue here. Thanks for any help you can give me, I'm new to responsive design.
<div id="slider">
<img data-caption="#slide1" src="http://placehold.it/1000x400&text=[img 1]" />
<img data-caption="#slide2" src="http://placehold.it/1000x400&text=[img 2]" />
<img data-caption="#slide3" src="http://placehold.it/1000x400&text=[img 3]" />
</div>
<span class="orbit-caption" id="slide1">Caption for Slide 1</span>
<span class="orbit-caption" id="slide2">Caption for slide 2</span>
<span class="orbit-caption" id="slide3">Caption for slide 3</span>
</div>
I have also tried:
<div id="slider">
<div data-caption="#slide1"> <img src="http://placehold.it/1000x400&text=[img 1]" /></div>
<div data-caption="#slide2"><img src="http://placehold.it/1000x400&text=[img 2]" /></div>
<div data-caption="#slide3"><img src="http://placehold.it/1000x400&text=[img 3]" /></div>
</div>
<span class="orbit-caption" id="slide1">Caption for Slide 1</span>
<span class="orbit-caption" id="slide2">Caption for slide 2</span>
<span class="orbit-caption" id="slide3">Caption for slide 3</span>
</div>
My initiation JS:
<script type="text/javascript">
$(window).load(function() {
$('#slider').orbit({
bullets: false,
timer: true,
captions: true,
animation: 'fade' });
});
</script>

I just encountered this issue as well. I managed to fix this issue by moving line 394 before line 391 in "jquery.foundation.orbit.js". The issue is that the current version orbit removes the # from the value of data-caption before it parses the text in the .orbit-caption span.
So I don't see anything wrong with your code examples. You just have to fix "jquery.foundation.orbit.js" yourself, or wait for the next release that fixes it.
Current Version:
390. // if location selector starts with '#', remove it so we don't see id="#selector"
391. if (captionLocation.charAt(0) == '#') {
392. captionLocation = captionLocation.substring(1, captionLocation.length);
393. }
394. captionHTML = $(captionLocation).html(); //get HTML from the matching HTML entity
Fixed Version:
390. captionHTML = $(captionLocation).html(); //get HTML from the matching HTML entity
391. // if location selector starts with '#', remove it so we don't see id="#selector"
392. if (captionLocation.charAt(0) == '#') {
393. captionLocation = captionLocation.substring(1, captionLocation.length);
394. }
If you're using "foundation.min.js," you'll want to edit line 46. Look for this:
t.charAt(0)=="#"&&(t=t.substring(1,t.length)),n=e(t).html()
and just reverse the two parts to look like this:
n=e(t).html(),t.charAt(0)=="#"&&(t=t.substring(1,t.length))
I haven't tested to see if this breaks anything else, but it does fix the caption issue that you encountered.

The framework obviously has predefined classes and ids so you have to use that, if you use others that aren't defined, it will not work. Your code is almost ok, but wherever you used "slide1", "slide2", "slide3" you should use "#captionOne", "#captionTwo", "#captionThree".
From the website: http://foundation.zurb.com/docs/orbit.php
Adding Captions
Another awesome feature in Orbit is the ability to add captions for each slide. The process is simple, just add data-caption="#captionId" to the content div or img. Then, below your div id="featured", add span class="orbit-caption" id="captionId" that will hold your caption content. You can add as many as slides you have available, just make sure the data-caption and the id of the span are the same and that you add # to the data-caption like in the code below.
<div id="featuredContent">
<div data-caption="#captionOne">
<h4>This is a content slider.</h4>
<p>Each slide holds arbitrary content, like text or actions.</p>
</div>
<div data-caption="#captionTwo">
<h4>We can include text and buttons, like this!</h4>
<p>We take no responsibility for what happens if you click this button.</p>
<p>Rock My World!</p>
</div>
<div data-caption="#captionThree">
<h4>What? You did not click it?</h4>
<p>We gave you the benefit of the doubt. Maybe you did, and now you are back!</p>
</div>
</div>
<span class="orbit-caption" id="captionOne">Here is a caption...</span>
<span class="orbit-caption" id="captionTwo">Here is a caption2...</span>
<span class="orbit-caption" id="captionThree">Here is a caption3...</span>
If you follow what i wrote it should work. Hope it helps.

JQuery .fadeIn() levels off when hiding and reshowing an element

So I'm designing a website (using WordPress), and I want to use JQuery to hide/show a certain element when another element is moused over. The HTML looks roughly like this
<div class="post" style="clear:both;">
<a href="...">
<img src="..." />
</a>
<div class="autohide">
<h3>
...
</h3>
<p>....</p>
</div>
</div>
...
<div class="spacer" />
and the JQuery looks like this:
jQuery(document).ready(function(){
jQuery(".post .autohide").hide();`
jQuery(".post").hover(function() {
jQuery(this).nextAll(".spacer").first().stop().html(jQuery(this).children(".autohide")
.html()).fadeIn();
},function() {
jQuery(this).nextAll(".spacer").stop().show().fadeOut().html("").hide();
});
});
What's supposed to happen is, when the user mouses over the image, the contents of the associated autohide <div> get transplanted into the next spacer <div> and then faded in; when they mouse out, the autohide <div> fades out and clears.
However, if the pointer is not over the image for the full fade-in time, then the max opacity of the spacer div seems to decrease until a mouse-over creates no effect at all.
I would be much obliged if anyone who knows more JQuery than I could shed some light on this subject; I assume it's a basic problem (I've never used JQuery before this project).
Thanks in advance.

I took the .stop() calls out, and it seems to work fine, but I am still trying to parse everything that is going on.
http://jsfiddle.net/f3EJ3/