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.

Why is the reverse animate() not firing right away?

I'm using $(window).scroll to animate the top header of my site when scrolling away from the very top of the viewport. The initial condition works fine, with all my animate() effects working. The problem is that when I scroll back to the top of the page, the header doesn't animate back to the original settings (a few times it has, but after a long pause).
jsfiddle: http://jsfiddle.net/3ocbkkyk/
jQuery:
var $headerBar = $(".header"),
$window = $(window),
offset = $headerBar.offset(),
topPadding = 0;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
//$headerBar.stop().animate({
//marginTop: $window.scrollTop() - offset.top + topPadding
//});
console.log('Left the Top');
// Add class 'fixed'
$headerBar.addClass('moved');
$('p.mainprinav_text').animate({ padding: '20px 45px 20px 0' });
$('ul.mainprinavlist li a').animate({ padding: '20px 35px' });
$('div.headerlogo').animate({ top: '6px' });
$('div.headerlogo img').animate({ width: '90px' });
$('body.site').animate({ paddingTop: '38px' });
} else if ($window.scrollTop() <= offset.top) {
//$headerBar.stop().animate({
//marginTop: 0
//});
console.log('Back to Top');
// Remove class 'fixed'
$headerBar.removeClass('fixed');
$('p.mainprinav_text').animate({ padding: '39px 45px 39px 0' });
$('ul.mainprinavlist li a').animate({ padding: '39px 35px' });
$('div.headerlogo').animate({ top: '13px' });
$('div.headerlogo img').animate({ width: '120px' });
$('body.site').animate({ paddingTop: '0' });
}
});

The Problem
is that there is nothing to prevent buildup.
if you add .stop() before each animate(...) then it will prevent the queue buildup you're experiencing that causes the delay in animations.
Like in this fiddle...
Though there are also other things that can make this better as well. You should have a switch so each part of the script only fires once, the animations can be replaced with css so you could just toggle a class, and the whole thing can be done with much less code.
If you're interested in these other changes I can make another fiddle to illustrate.

Open page from bookmarklet, but, make it like a modal window?

I am using a bookmarklet which can (obviously) be called by the user anywhere:
javascript:(function(){window.open('http://*****.com/***.html?url=
'+encodeURIComponent(window.location.href),'my_page_name',
'left=200,top=200,width=480,height=500,personalbar=0,
toolbar=0,scrollbars=1,resizable=1')})()
How can I make this like a modal window, meaning no ugly browser window borders - should I use jquery or something like in the bookmarklet URL and if so, how?

You could use the approach Firebug Lite uses.
Basically you insert an external JS file into your page when you click on the bookmark.
My bookmark
Just change BASE_URL, PATH_TO_JS and PATH_TO_ICON to what you need it to be.
Also, don't forget the "http://" in the BASE_URL, unless you want to use a relative path.
Your external JS file could contain a script which adds an element to the page which hovers over others. I recommend using the CSS in Twitter Bootstrap to figure out how to make a reliable modal window.
Edit --
To help you out I wrote a small demo. It consists of 2 files:
bookmark.html - adapted firebug code to create bookmark which adds script dynamically
bookmark.js - creates a modal with an iframe
bookmark.html
Bookmark
bookmark.js
(function() {
var script;
if(!window.jQuery) {
script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js";
document.body.appendChild(script);
}
(function check_if_loaded() {
if(!window.jQuery) {
setTimeout(check_if_loaded, 50);
} else {
(function($) {
var
$dark_bg = $('<div></div>').css({'z-index': '1000', 'background-color': '#000000', 'opacity': '0', 'position': 'absolute', 'width': '100%', 'height': '100%'}),
$iframe = $('<iframe></iframe>').css({'width': '100%', 'height': '100%', 'border': 1, 'overflow': 'hidden'}).prop({'src': 'http://bijtel.com/cv/', 'width': '100%', 'height': '100%', 'scrolling': 'no'}),
$close = $('<div></div>').css({'position': 'absolute', 'top': 0, 'right': 0, 'padding': '5px 10px', 'cursor': 'pointer', 'color': '#ffffff', 'font-size': '10pt', 'font-family': 'verdana'}).html('close ×');
$modal = $('<div></div>').css({'z-index': '1010', 'background-color': '#ffffff', 'opacity': '0', 'position': 'absolute', 'top': '10%', 'left': '10%', 'width': '80%', 'height': '80%', 'box-shadow': '7px 7px 5px #333'}).append($close, $iframe);
$('body').css({'padding': 0, 'margin': 0}).prepend($dark_bg, $modal);
$dark_bg.animate({'opacity':0.5}, 400);
$modal.animate({'opacity':1}, 400);
$close.on('click', function() {
$dark_bg.animate({'opacity': 0}, 400, function(){ $dark_bg.remove(); });
$modal.animate({'opacity': 0}, 400, function(){ $modal.remove(); });
});
}(window.jQuery));
}
}());
}());
Demo at: http://bijtel.com/stackoverflow/bookmark/

I don't know much about the subject, but looking at the delicious.com bookmarklet I noticed some parameters to limit which parts of the browser window will be shown:
(function() {
f = 'http://www.delicious.com/save?url=' + encodeURIComponent(window.location.href) + '&title=' + encodeURIComponent(document.title) + '&v=5&';
a = function() {
if (!window.open(f + 'noui=1&jump=doclose', 'deliciousuiv5', 'location=yes,links=no,scrollbars=no,toolbar=no,width=550,height=550')) location.href = f + 'jump=yes'
};
if (/Firefox/.test(navigator.userAgent)) {
setTimeout(a, 0)
} else {
a()
}
})()
The parameters I'm talking about are the location, links, scrollbars and toolbar. That does not make it modal, though, and I doubt there is a feature for that (I'm assuming browser windows are independent of each other). But they provide a "cleaner" window nonetheless...
Update: check out this link. Basically, what the bookmarklet does is to create a new script tag and append it to the body. I'm assuming you could do anything you want in that script, including create a jQuery dialog the way you wanted (in fact, this bookmarklet does use jQuery, but it's embedded in the script itself; see the source).
Here's the code. I wouldn't use this bookmarklet myself (since I'd have to provide my username/password in the clear), but it's a starting point for you to do yours:
var e = document.createElement('script');
e.setAttribute('language', 'javascript');
e.setAttribute('src', 'http://t.rc.vc/delicious/js/delicious.js?username=***&password=***');
e.setAttribute('id', 'delicious_submitter');
document.body.appendChild(e);
void(0);
Obs.: in both examples, I stripped the javascript: part and formatted the code for readability.

Jquery - Dynamic button, can I clean this up?

I created a button that will randomly appear on the screen (per my boss's request) that when clicked will open an email in order to provide feedback.
My goal is to make this script do everything, mainly so I don't have to access the ASP markup or CSS files for each website. Just throw the script in the header and place the image in the folder.
I created the script to:
Create a div that contains the button
set the CSS for the elements of that div (there will be a little image next to some text)
appear to the user at random
The script I came up with works fine, however, I was wondering if there was anyway I can clean this up at all. (I'm kind of new to writing my own Jquery scripts and I'm trying to learn how to be as organized as possible.)
Jquery:
$(function () {
var fbContainer = $('<div id="feedback"><img src="image.gif" /> Feedback</div>')
.css({
'display': 'none',
});
$('#header').append(fbContainer);
$('#feedback a').css({
'font-family': 'arial',
'float': 'left',
'text-decoration': 'none',
'color':'#000000'
});
$('#feedback img').css({
'float': 'left',
'margin': '3px 5px 0 0';
});
var randofactor = .5;
var randomizer = Math.random();
if (randomizer < randofactor) {
fbContainer.css('display', 'block');
}
});
Thanks for any assistance

You could try encapsulating your code inside a javascript object, which I would recommend placing inside a separate file. I would suggest moving the header where the button is placed to be parametrized inside a constructor function, so you can reuse it elsewhere.
Separating the various logical parts such as object creation and styling into their own functions also helps readability of your code.
<script type="text/javascript">
var randomFeedBackButton = {
getfbContainer: function (header,feedBackAddress) {
var fbContainer = $('<div id="feedback"><img src="image.gif" /> <a href=' + feedBackAddress + '>Feedback</a></div>')
.css({
'display': 'none'
});
header.append(fbContainer);
return fbContainer;
},
generateCss: function () {
$('#feedback a').css({
'font-family': 'arial',
'float': 'left',
'text-decoration': 'none',
'color': '#000000'
});
$('#feedback img').css({
'float': 'left',
'margin': '3px 5px 0 0'
});
},
initialize: function (header) {
var container = this.getfbContainer(header, "mailto:feedback#mywebaddress.com");
this.generateCss();
var randofactor = .5;
var randomizer = Math.random();
if (randomizer < randofactor) {
container.css('display', 'block');
}
}
};
$(function () {
randomFeedBackButton.initialize($('#header')); /*call your script*/
});
</script>

jquery fading border not working

I just want some simple links where if it's hovered over, instead of having a line appear under it suddenly, it should fade. I'm trying this, but to no avail:
$(document).ready(function(){
$('#footer a').mouseover(function(){
$(this).animate({
border-bottom: 'border-bottom: 1px solid #D8D8D8'
}, 1000, function() {
// Animation complete.
});
});
});
What should I be doing?
Thanks.

You need a few changes here, first you should animate only the color, like this:
$(function(){
$('#footer a').mouseover(function(){
$(this).animate({
borderBottomColor: '#D8D8D8'
}, 1000, function() {
});
});
});​
Also, give the border an initial size so it doesn't just "appear" (when changing from 0 to 1px), like this:
​​#footer a { border-bottom: solid 1px transparent; }​
You can see a working demo here, to make this work you need either the color plugin or jQuery UI so the colors can animate...core doesn't handle colors, or transitioning anything that's not a number.
Here's a more complete demo, probably what you're ultimately after:
$(function(){
$('#footer a').hover(function(){
$(this).animate({ borderBottomColor: '#D8D8D8' });
}, function() {
$(this).animate({ borderBottomColor: 'transparent' });
});
});
​