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.

JS image resize compatible with fullPage.js

I am trying to integrate this code : http://codepen.io/babybackart/pen/GZPjJd on a section of a website using fullpage.js.
This code is based on a previous question brilliantly answered by #Seika85 : Make a .div act like an image.
The aim was to "contain" and resize the image on its container ".plancheBox" without cuting it.
In this example, the cat picture's dimensions are driven by the container using this first javascript code:
var calculateImageDimension = function() {
$('.plancheBox img').each(function() {
var $img = $(this),
$plancheBox = $img.closest('.plancheBox');
$img.css({
'max-height': $plancheBox.height() + 2,
/* (+2px) prevent thin margins due to rendering */
'max-width': $plancheBox.width()
});
$img.closest('.container').css({
'position': 'relative'
});
});
}
calculateImageDimension();
In order to set these dimensions instantaneously (without a page refresh), I am using this second javascript code:
var resizeEnd;
$(window).on('resize', function() {
clearTimeout(resizeEnd);
resizeEnd = setTimeout(function() {
$(window).trigger('resize-end');
}, 200);
});
$(window).on('resize-end', function() {
$('.plancheBox img').css({
'max-height': 'none',
'max-width': 'none'
})
$('.plancheBox .container').css({
'position': ''
});
calculateImageDimension();
});
As you can see in the first example, it works without fullpage.js.
I managed to insert the first JS code in a fullpage.js website : http://codepen.io/babybackart/pen/ONrbEN but I don't really manage to insert the second one.
I'm not actually a JS coder so I wanted to know what I needed to do to insert this code, if it was possible to do this with fullpage.js and if there were any conflict between both codes.
Thank you for your answer !

The second JS code must be inserted in a fullPage event like this:
$(document).ready(function() {
$('#fullpage').fullpage({
//events
afterResize: function(){
$('.plancheBox img').css({
'max-height' : 'none',
'max-width' : 'none'
})
$('.plancheBox .conteneur').css({'position' : ''});
calculateImageDimension();
}
});
});

jQuery Button Only Works Once

My goal was to create a simple button which once clicked would hide/show a navigational menu, and change the footer's padding alternatively, I'd have used toggle() if not for the latter condition. How do I make the button serve both purposes, that is first hide the menu and decrease footer padding, and then upon another click show the menu and increase the padding, and so forth, so that upon clicking the button one effect would occur and upon another click the other? Any help, suggestions, or alternatives, will be much appreciated.
function collapseOrCondense(event) {
if ($('#block-panels-mini-footer-nice-menu:visible')) {
$('#footer').css({
'padding-bottom': '2.5%'
});
$('#block-panels-mini-footer-nice-menu').hide();
} else {
$('#footer').css({
'padding-bottom': '5.5%'
});
$('#block-panels-mini-footer-nice-menu').show();
}
};
$('#footer').append('<button type=button class=cbutton>*</button>');
$('#footer .cbutton').css({
'position': 'absolute',
'left': '1%',
'top': '1%',
'width': '2%',
'height': '1.5%'
});
$('#footer .cbutton').on('click', collapseOrCondense);

I have made an example here. http://jsfiddle.net/wdakLfcc/2/
var visible = true;
function collapseOrCondense(event) {
if (visible) {
$('#footer').css({
'padding-bottom': '2.5%'
});
$('#block-panels-mini-footer-nice-menu').hide();
visible = false;
} else {
$('#footer').css({
'padding-bottom': '5.5%'
});
$('#block-panels-mini-footer-nice-menu').show();
visible = true;
}
};
$('#footer').append('<button type=button class=cbutton>*</button>');
$('#footer .cbutton').css({
'position': 'absolute',
'left': '1%',
'top': '1%',
'width': '2%',
'height': '1.5%'
});
$('#footer ').on('click', '.cbutton', collapseOrCondense);
On button click different effect will be played - Collapse Or Condense.

It looks like from my analysis that your conditional is always evaluating to true. I propose you add some other form of indicator to better distinguish the toggle.
I jury rigged a simple implementation: http://plnkr.co/edit/y8BugzI89s0i5kxM95H9?p=preview
function collapseOrCondense(event){
if($('#block-panels-mini-footer-nice-menu').css('display') === 'block'){
$('#footer').css({'padding-bottom':'2.5%'});
$('#block-panels-mini-footer-nice-menu').hide();
}
else{
$('#footer').css({'padding-bottom':'5.5%'});
$('#block-panels-mini-footer-nice-menu').show();
}
}
The aforementioned snippet is one way of handling this case given my demo environment -- I am sure there are many ways but the underlying problem is your condition (at least in my scenario with the data provided) is always evaluating to true.

The problem is in this line you have:
if ($('#block-panels-mini-footer-nice-menu:visible')) {
Because that will return a jQuery object with one or zero elements inside. You could fix that by adding .length. But I think using the is function is more clear.
Here I fixed that, and applied some changes that may help you to do the same in a more concise manner:
function collapseOrCondense(event) {
var menu = $('#block-panels-mini-footer-nice-menu');
$('#footer').css({
'padding-bottom': menu.is(':visible') ? '2.5%' : '5.5%'
});
menu.toggle();
}
$('<button type=button class=cbutton>*</button>').css({
'position': 'absolute',
'left': '1%',
'top': '1%',
'width': '2%',
'height': '1.5%'
}).on('click', collapseOrCondense).appendTo('#footer');
Working fiddle: http://jsfiddle.net/yj5evps2/

jQuery to change hover state of a link using background image position

I have an existing site, and like most of my cases I have to use a jQuery override to change some css. I can resize the element and give it a background image, but I can't get the hover state to work.
You can see my working JSfiddle here: http://jsfiddle.net/wdNF6/
The big that seems to not work is
$('.slideshow-screen .slide-item-current .play-button').hover( function(){
$(this).css('background-position', 'something something');
}
I used the .hover() from examples I found throughout stackoverflow. When you go to the example, the button should be blue with an image in it. Hovering over it should reposition the bg image. But when you go to the example, the default css pre-jQuery shows. If you remove the second bit of jquery, the first part works.
Any suggestions?

Missing the closing brace for the function
$('.slideshow-screen .slide-item-current .play-button').hover( function(){
$(this).css('background-position', 'bottom center');
}​); <--- Missing this
Also this can be simply be written as
$('.play-button').css({
width: '90px',
height: '90px',
'background-color': '#0000ff',
'background-position': 'top center',
'background-image': 'url(http://www.lessardstephens.com/layout/images/slideshow_big.png)'
});
$('.play-button').hover(function() {
$(this).css('background-position', 'bottom center');
});​
Check Fiddle

Did you check? Your code had a typo.
You missed an ending ); at the end.
$(document).ready(function () {
$('.slideshow-screen .slide-item-current .play-button').css({
width: '90px',
height: '90px',
'background-color': '#0000ff',
'background-image': 'url(http://www.lessardstephens.com/layout/images/slideshow_big.png)',
'background-position': 'top center'
});
$('.slideshow-screen .slide-item-current .play-button').hover(function () {
$(this).css('background-position', 'bottom center');
},
// Also you need to reset
function () {
$(this).css('background-position', 'top center');
});
});​
Fixed: http://jsfiddle.net/Vc84h/

Sticking Div to Top After Scrolling Past it

Right now, I'm able to stick the div to the top after it scrolls down 320px but I wanted to know if there is another way of achieving this. Below I have my code:
jQuery(function($) {
function fixDiv() {
if ($(window).scrollTop() > 320) {
$('#navwrap').css({ 'position': 'fixed', 'top': '0', 'width': '100%' });
}
else {
$('#navwrap').css({ 'position': 'static', 'top': 'auto', 'width': '100%' });
}
}
$(window).scroll(fixDiv);
fix5iv();
});
it works, but some divs above it will not always be the same height so I can't rely on the 320px. How do I get this to work without using if ($(window).scrollTop() > 320) so I can get it to fade in at the top after the user scrolls past the div #navwrap?

Try using the offset().top of the #navwrap element. That way the element will be fixed from it's starting position in the document, regardless of where that is. For example:
function fixDiv() {
var $div = $("#navwrap");
if ($(window).scrollTop() > $div.data("top")) {
$div.css({'position': 'fixed', 'top': '0', 'width': '100%'});
}
else {
$div.css({'position': 'static', 'top': 'auto', 'width': '100%'});
}
}
$("#navwrap").data("top", $("#navwrap").offset().top); // set original position on load
$(window).scroll(fixDiv);
Example fiddle