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.
Related
I have a page with buttons that show/hide divs using slideUp() and slideDown(). Previously I was just using hide() and show() to display and hide these divs, but I really want to use the slide animations because it helps the user see what's changing on the page.
Here's the problem: Some of these divs exist within other divs that are also hidden at times, and it seems that when the parent div is hidden, slideUp() will not work on the child.
Here's a rough example:
$('#Abutton').unbind('click').click(function(){
$('.A').slideToggle(500);
});
$('#Cbutton').unbind('click').click(function(){
$('.C').slideToggle(500);
});
$('#Bbutton').unbind('click').click(function(){
$('.B').slideToggle(500);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<button id="Abutton">Toggle A</button>
<button id='Bbutton'>Toggle B</button>
<button id='Cbutton'>Toggle C</button>
<div class='context1'>
<div class="A">
<p>Parent</p>
<div class='C'>
<p> and child </p>
</div>
</div>
</div>
<div class='context2'>
<div class="B">
<p> something else </p>
</div>
</div>
In this example, if the user toggles OFF "A," then toggles OFF "C," C doesn't successfully hide because it's within a hidden parent - so when the user toggles A back on, C will be displayed even though the user just turned it off. It seems that it's not hiding successfully because the animation effect can't execute when it's invisible (?).
Again, when I replace the toggle functions with show() and hide(), it works just fine, but I really need the animating effect.
The only solution I could find was to use setTimeout to do the following after slideUp finishes...
$('.C').slideUp(500);
setTimeout(function(){ $('.C').hide() }, 500);
...but I was wondering if anyone out there knew of a simpler solution. Thanks in advance for any insight you might share!
EDIT: I realize this is a bit difficult to explain and I probably didn't do a very good job explaining myself; here's what I want to happen sequentially:
The user turns off A. In this one instance, A contains C, so both are hidden, but there may be other instances where C is not the child.
The user turns off C.
When A is turned back on, C is off.
maybe this:
$('#Abutton').click(function(){
if($('.A').is(':visible')){
if($('.C').is(':visible')){
$('.C').slideUp(500,function(){
$('.A').slideUp(500);
});
}else{
$('.A').slideUp(500);
}
}else{
$('.A').slideDown(500,function(){
$('.C').slideDown(500);
});
}
});
$('#Cbutton').click(function(){
if($('.A').is(':visible')){
$('.C').slideToggle(500);
}else{
$('.A').slideDown(500,function(){
$('.C').slideDown(500);
});
}
});
$('#Bbutton').click(function(){
$('.B').slideToggle(500);
});
div{
margin: 10px;
border-style:solid;
border-width:1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="Abutton">Toggle A</button>
<button id='Bbutton'>Toggle B</button>
<button id='Cbutton'>Toggle C</button>
<div class='context1'>
<div class="A">
<p>Parent</p>
<div class='C'>
<p> and child </p>
</div>
</div>
</div>
<div class='context2'>
<div class="B">
<p> something else </p>
</div>
</div>
There is callback function, that trigger when your animation is ended
var $c = $('.C');
$c.slideUp(500, function(){
$c.hide(
});
$(document).ready(function() {
setInterval(function() {
$.get("temp.php", function(temp) {
$("deneme span").html(temp);
$("#deneme").html(temp);
});
}, 3000);
});
<div class="container">
<div class="de">
<div class="den">
<div class="dene">
<div class="denem">
<div class="deneme" id="deneme">
<span></span><strong>°</strong>
</div>
</div>
</div>
</div>
</div>
</div>
</center>
That's because .html() replaces the HTML inside your div.
So with $("deneme span").html(temp); you are trying to fill-up the span, but then with $("#deneme").html(temp); you are removing the whole content and replacing it with temp.
I suggest you use .append() to ADD something to the div.
Just a shot in the dark: (more code would help)
$("deneme span").html(temp);
I noticed your including the <span> tag above.
Remove the <span> tag ie: $("deneme") if you don't want it to be effected by .html(temp);
After you've done that, try also adding: display:inline-block; to your <span> element for more stability to prevent it's position from moving with when the above element may.
.html()
I'm developing a simple webpage using Twitter Bootstrap.
At the sidebar I have 3 buttons. Each of this buttons calls a function to show one div and hide the others.
The HTML code is something like:
<div>
<div class="row" id="general" style="display:none">
Text1
</div>
<div class="row" id="medication" style="display:none">
Text2
</div>
<div class="row" id="diet" style="display:none">
Text3
</div>
</div>
And this is one of JS functions that hide/show the DIVs:
function showGeneral(){
document.getElementById('general').style.display = 'block';
document.getElementById('medication').style.display = 'none';
document.getElementById('diet').style.display = 'none';
}
I update the code with #ChaoticNadirs answer but still does not work.
Here is my code at Bootply
The problem is that the function works properly but once it finish all DIVs became hidden again (as default).
I feel the problem could be in any transition due to Twitter Bootstrap framework.
Does anyone how to solve this?
Bootstrap provides a .hidden class. You can use this rather than the display style to hide and show elements.
Check this bootply for an example: http://www.bootply.com/uY7kHe3Nw7
HTML:
<button class="btn btn-default" id="show-general">Show General</button>
<div>
<div class="row hidden" id="general">
Text1
</div>
<div class="row" id="medication">
Text2
</div>
<div class="row" id="diet">
Text3
</div>
</div>
JS:
$("#show-general").on('click', showGeneral);
function showGeneral(){
$('#general').removeClass('hidden');
$('#medication').addClass('hidden');
$('#diet').addClass('hidden');
}
EDIT:
In your new example you are firing the event on a <div> click inside an <a> tag. You can do something like this to prevent the default action:
JS:
$('#showGeneral').on('click', showGeneral);
function showGeneral(e){
e.preventDefault();
$('#general').removeClass('hidden');
$('#medication').addClass('hidden');
$('#diet').addClass('hidden');
$('#workout').addClass('hidden');
}
Here's a new bootply: http://www.bootply.com/3RkAbPX6d0
You might want to try using the "visibility" attribute... https://developer.mozilla.org/en-US/docs/Web/CSS/visibility you can read more about it here.
Usually I apply a class to an element I would like to hide. This way it prevents using inline styles. If you don't care about inline styling you could also use jQuery's show(),hide(), or toogle() methods.
I do not think that the issue is with Bootstrap.
I'm having a little trouble here and hopefully someone can give me a hint on what I'm doing wrong. The object within the main div is hidden and I need it show when I click the button within the secondary div. I'm getting the secondary div to "close" after the button is clicked but I just can't seem to figure out how to make the "checked" object to show.
Here is the HTML:
<div class="separate">
<div class="main">
<h1>Mechanical Room</h1>
<object class="checked"></object>
</div>
<div class="secondary">
<div class="heading">
<h2>Mechanical Room</h2>
<button class="check-in">Check In</button>
<object></object>
</div>
</div>
</div>
And here is my jQuery code:
$(document).ready(function() {
$(".check-in").click(function () {
$(this).closest(".separate").children(".secondary").fadeOut(200);
$(this).closest(".separate").children(".main").find("object").show();
});
});
If your div is set to hidden by visibility then show() method won't show demo
You need to set .css('visibility','visible'); then.
$(document).ready(function() {
$(".check-in").click(function () {
$(this).closest(".separate").children(".secondary").fadeOut(200);
$(this).closest(".separate").children(".main").find("object").css('visibility','visible');
});
});
It is working just fine in my fiddle.
Did you style your object?
Did you make sure it's hidden initially?
$("object").hide();
I added [THE OBJECT] as it's content to see it.
<object class="checked">[THE OBJECT]</object>
Demo: http://jsfiddle.net/u6x84/
I am new to web design. I am making my resume now. I have navigation div like this:
<div id="nav" class="grid_12">
<div id="Home" class="grid_3">
<div class="button">
Home
</div>
</div>
<div id="Life" class="grid_3">
<div class="button">
Life
</div>
<img src="img/someimg.jpg">
</div>
<div id="Portfolio" class="grid_3">
<div class="button">
Portfolio
</div>
</div>
<div id="Contact" class="grid_3">
<div class="button">
Home
</div>
</div>
</div>
Then I have a script for the navigation:
<script type="text/javascript>
$("#nav img").hide();
$(".button").focus(function() {
$(this).next("img").fadeIn("slow");
}).blur(function() {
$(this).next("img").fadeOut("slow");
});
</script>
I want it so when someone holds the mouse over the button the image will appear under it. It is properly hiding the image, but fadeIn not working. I have no idea why it is not working.
.focus is bound to the "focus" event (I linked to a description of what it is rather than the event standard). This is most common when you tab to or click on text inputs, but it can apply to other elements as well.
The mouseenter (also mouseover, but the former is not triggered repeatedly when child elements are also hovered) event occurs when a mouse enters an element. The opposite is mouseleave (mouseout). http://api.jquery.com/mouseenter/
try putting your script inside a ready event of the document :
<script type="text/javascript>
$(document).ready(function(){
$("#nav img").hide();
$(".button").focus(function() {
$(this).next("img").fadeIn("slow");
}).blur(function() {
$(this).next("img").fadeOut("slow");
});
});
</script>
I believe you're using the 960gs, and one thing I have noticed is this: your four grid_3 divs are nested within your grid_12. The 960gs includes two classes called .alpha and .omega to fix the nested margins when a grid is inside a parent grid. You need to put the .alpha class on the first child div - which in this case is your <div id="#home"> and the .omega class on the last child div which is your <div id="Contact">. This will fix the margins you will have on the internal nested four grid_3's.