We Keep Coding

My background Image won't show up on the div

I am trying to create a div and add a background image to it in jQuery. For some reason, I cannot do it. If I instead make my background color white, I get a white background. Here is my code:
function appendToDom(poster) {
var aPoster = $('<div>');
aPoster.css({
display: 'inline block',
float: 'left',
margin: '10px',
marginLeft: '37px',
marginTop: '20px',
width: '200px',
height: '300px',
fontSize: '36px',
color: 'black',
//backgroundColor: 'white',
backgroundSize: '200px 300px',
backgroundImage: './../images/question.png'
})
/*
$(aPoster).attr("css","background-image: url(~/desktop/MyMovies/public/js/images/question.jpeg)");
$(aPoster).attr("css","background-size: 200px 300px");*/
$(main).append(aPoster);
}
Thanks for all the advice! So I took the suggestions given to me, but it still doesn't work for me.Here is a screenshot of what I have:
my improved code
NVM I got it! Thanks!

Try making your method look like this...
aPoster.css({
'display': 'inline block',
'float': 'left',
'margin': 10,
'margin-left': 37,
'margin-top': 20,
'width': 200,
'height': 300,
'font-size': 36,
'color': 'black',
'background-color': 'white',
'background-size': '200px 300px',
'background-image': 'url("./../images/question.png")'
Try something like this and see what you get. You also notice that I got rid of the values with pixel. Because JavaScript's default values for CSS properties like that have their units in pixels. Just try it and see if it works. Hope this helped. Oh and one last thing, if you used an external script, don't forget to use the URL and make it relative to the script itself and not your main page...but in your case, the styles would be added inline to the div element so you should probably make it relative to your main page, the page where the div would be created...

If the style is inline like in your case, the path has to be relative to the html document. Please check it.

Increase the height of JSignature input area

I am using JSignature to accept the signature. How can i increase the default height? I tried giving height to the signature div but not working as expected.
Code:
<div id="signature" style="background-color:#fff9cb;border:0px;height:200px"></div>
How to fix this?

replace this line in jSignature Sample
var $sigdiv = $("#signature").jSignature({ 'UndoButton': true })
to
var $sigdiv = $("#signature").jSignature({ 'UndoButton': true, 'width': 400, 'height': 400 })

I've had trouble altering the size or the line width of the signature box in <div> (capture) and <img> (display) tags. Try modifying the size with jQuery (and make sure you have jSignature.js added to your project):
<div id="mySignatureBox" style="background:#000000; color:#ffffff"></div>
$('#mySignatureBox').jSignature({ lineWidth: 1, width: 700, height: 200 });

It seems you can also use percentage values, this did the job for me:
$('#signature').jSignature({
width: '100%',
height: 250
});

jquery scrollTo offsetTop

I'm using jquery ScrollTo wonderfully but want to use the "offset top" add-on, has anyone set it up? I'm unsure of how to properly use it
$('#aAbout').click(function about() {
$.scrollTo('#dAbout', 500, offsetTop: 10px);
});

That isn't valid JavaScript syntax. Perhaps you meant:
$('#aAbout').click(function() {
$('#dAbout').scrollTo({
duration: 500,
offsetTop: '10px'
});
});

Achieving a bounce effect on text using jquery animate()?

I am trying to use Jquery to create a bounce effect, this is what i have so far:
Html:
<div id ="animation">bounce</div>
Jquery:
$("#animation").animate({ marginTop: "80px" }, 1500 )
.animate({ marginBottom: "40px" }, 800 );
Its goes downwards but not upwards, i tried searching the documentation, but it doesn't
working example here: http://jsfiddle.net/zLw8F/

To go upwards again, you'd need to reduce the margin-top instead of animating margin-bottom:
$("#animation").animate({ marginTop: "80px" }, 1500 )
.animate({ marginTop: "40px" }, 800 );
Demo at jsfiddle.net
Yet, to animate the element decoupled from the rest of the page, I recommend relative positioning instead of playing with margins.

Why not just use the jQuery UI effects? Ex:
$("#animation").effect("bounce", { times:3 }, 300);​
jsFiddle example

Try that:
$("#animation").animate({ marginTop: "80px" }, 1500, function() {
$(this).animate({ marginTop: "40px" }, 800 );
});

How can i slide a div content in a particular angle using jquery

i am trying to slide a div content to top right side. i am trying but i can't get it, here is my html code
<html><body>
<button id="animatenow">animate now!</button>
<div id="container">
<div>hi</div>
<div>there</div>
</body>
</html>
here is script
$(document).ready(function(){
$('#animatenow').click(function(){ $('#container').animate({width: "-=300px",marginTop: "-=1250px", height: "+=50px"},1500);}); });`
my css is
#container{width:600px;color:#fff;background:#f00;height:400px}
my jsfiddle code

Well, a somewhat overly-complex means to do this:
$('#animatenow').click(function(){
var that = $('#container');
var h = that.height();
var w = that.width();
$('#container')
.wrap('<div id="placeholder"></div>')
.parent()
.css({
'width' : w,
'height' : h
})
.find('#container')
.css({
'position' : 'absolute',
'top' : 0,
'left' : 0,
'right' : 0,
'bottom' : 0
})
.animate(
{
'top' : '-' + h,
'left' : w,
'right' : '-' + w,
'bottom' : h
},2000,
function(){
$(this).parent().remove();
});
});
JS Fiddle.
The above assumes you want to avoid the sliding element's text wrapping and re-flowing as it slides out of view. If you're okay with re-flowing text, then it's a lot easier and avoids adding a new wrapping element and the (hideous) call to animate().
References:
animate().
click().
css().
find().
height().
parent().
remove().
width().
wrap().

you forgot position:absolute on the #container css

$(document).ready(function(){
$('#animatenow').click(function(){
$('#container').animate({
marginLeft: "700px",
marginTop: "-=1250px",
}
,1500);
});
});
Are you trying to get an effect like this? I am unsure of what you mean, hope this helps a little.

I have updated your code here .Basicall you need to animate the left ,top and width properties after seting the position:absolute property to #container
$(document).ready(function() {
$('#animatenow').click(function() {
$('#container').animate({
right: '0',
top: '0',
width: '120',
height: '120'
}, 'slow');
});
});
If you want to move the div out of visible area or hide it make the width and height 0px