We Keep Coding

Sticky sidebar 20px top size

TEST PAGE
Im trying to have the top of the vertical line of the sidebar to stop at the top nav (example image attached), I tried to add 'top': '20' in the js code and it didnt work. I also tried margin-top: 20px in CSS and that didnt do the trick. Im not sure where I can add 20px height above the sidebar.
JavaScript
$(document).ready(function () {
var length = $('#community-sidebar').height() - $('#community-section-col1').height() + $('#community-sidebar').offset().top;
$(window).scroll(function () {
var scroll = $(this).scrollTop();
var height = $('#community-section-col1').height() + 'px';
if (scroll < $('#community-sidebar').offset().top) {
$('#community-section-col1').css({
'position': 'absolute',
'top': '0'
});
} else if (scroll > length) {
$('#community-section-col1').css({
'position': 'absolute',
'bottom': '0',
'top': 'auto'
});
} else {
$('#community-section-col1').css({
'position': 'fixed',
'top': '0',
'height': height
});
}
});
});
CSS
#community-sidebar {left: -45px; position: absolute; top: -40px; height: 1500px;}
.h-line { border-left: solid black 1px; height: 550px; border-width: thin; width: 1px; left: 189px; position: absolute; top: 0;}

Wrapping the header with a div having height 20px followed with position:fixed for the header.
<div style="height:20px">
<div style="position:fixed">
//your header content
</div>
</div>

why I can't set the same height and width by using jQuery?

I wish to build a sketchpad by using jQuery to dynamically set width and height for each div grid.
However the result shows a different size of height and width. From the JQuery code, I understand that I have successfully created 16*16 div blocks. I then assign it with height and width by using selector.css(width:function(){}).
As a result, I am expecting to see a 16 * 16 grid of blocks with the same size. However, it displays different sizes of blocks. I have no clue why this happens, can anyone enlighten me?
var input = 16;
$(document).ready(function(){
for(var i = 0; i<input*input;i++){
$('.wrapper').append("<div></div>");
}
$('.wrapper').find('div').css({
width: function(input) {
return 200/input;
},
height: function(input) {
return 200/input;
}
});
$('.wrapper').find('div').addClass('grid');
$('.wrapper').find('div').on('mouseenter',function(){
$(this).addClass('highlight');
});
});
.wrapper{
width: 900px;
height: 900px;
margin: 0 auto;
}
.grid{
border: 1px solid black;
display: inline-block;
margin: 2px 2px;
}
.highlight{
background-color: blue;
}
#button{
width: 900px;
margin: 0 auto;
}
button{
display: block;
margin: auto;
}
body{
background-color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src = "sketchpad.js"></script>
<div class="wrapper"></div>

$('.wrapper').find('div').width(200/input);
$('.wrapper').find('div').height(200/input);
/*$('.wrapper').find('div').css({
width: function(input) {
return 200/input;
},
height: function(input) {
return 200/input;
}
});*/
reomve commented code section and add above code section.

$('.wrapper').find('div').css({
width: function(input) {
return 200/input;
},
height: function(input) {
return 200/input;
}
});
I think you just forgot to put width and height unit.
$('.wrapper').find('div').css({
width: function(input) {
return 200/input + 'px';
},
height: function(input) {
return 200/input + 'px';
}
});
Should work

The problem is with the width function you specified:
width: function(input) { return 200/input; },
According to the documentation this function:
Receives the index position of the element in the set and the old
width as arguments.
Thus the parameter input contains the index position of div, e.g. 0, 1, 2, etc. That is why you see blocks which are invisible (position 0), have a height/width of 200 (position 1), etc.
The solution is to use a variable instead of a function to set the width:
var block_width = 200 / input;
$('.wrapper').find('div').css({
width: block_width,
height: block_width
});

JS and CSS Centering Slideshow Images

I have a slideshow that pulls its first image from a div, then pulls the rest of the images from an array of list items. I am following a tutorial exactly from The JavaScript Pocket Guide by Burdette (2010 printing), and while everything else works I cannot get any of the pictures after the first to center or align differently. They float left and to the top of the div.
HMTL:
<!DOCTYPE html>
<hmtl class="no-js">
<head>
<title>Slideshow</title>
<link rel="stylesheet" href="slideshow.css" type="text/css" />
<script type="text/javascript">
(function(d, c) { d[c] = d[c].replace(/\bno-js\b/,"js";})(document.documentElement, "className");
</script>
</head>
<body>
<div id="slideshow">
<div class="slides">
<img src="picture01.jpg" width="450" height="336" alt="stuff" />
</div>
<ul>
<li><a href="picture02.jpg" data-size="350x263"</li>
<li><a href="picture03.jpg" data-size="350x263"</li>
<li><a href="picture04.jpg" data-size="350x263"</li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript">
</script>
<script src="slideshow.js" type="text/javascript">
</script>
</body>
</hmtl>
CSS:
#slideshow {
background-color: #103f1c;
width:500px;
height:450px;
margin-left: auto;
margin-right: auto;
top:0px;
position: relative;
}
#slideshow .slides {
position: relative;
margin-left: auto;
margin-right: auto;
width: 450px;
}
#html.js #slideshow .slides img{
position: absolute;
margin-left: auto;
margin-right: auto;
}
#slideshow .next,
#slideshow .prev {
position: absolute;
top: 50%;
margin-top: -0.5em;
width: 40px;
font-size: 32px;
text-decoration: none;
}
#slideshow .next{
right: -50px;
padding-left:10px;
}
#slideshow .prev {
left:-50px;
padding-right: 10px;
text-align: right;
}
JS:
(function($) {
// Include utility jQuery plug-ins
$.fn.tallest = function(outer, margins) {
var fn = outer ? "height" : "outerHeight";
return Math.max.apply(Math, $.map(this, function(el) {
return $(el)[fn](margins);
}));
};
$.fn.widest = function(outer, margins) {
var fn = outer ? "width" : "outerWidth";
return Math.max.apply(Math, $.map(this, function(el) {
return $(el)[fn](margins);
}));
};
// Declare initial variables
var slideshow = $("#slideshow");
var slides = slideshow.find(".slides");
var currentImageIndex = 0;
// Create images from the link list
slideshow.find("ul a").each(function() {
var link = $(this);
var size = link.attr("data-size").split("x");
$("<img />").attr({
src : link.attr("href"),
width : size[0],
height : size[1],
alt : link.text()
}).hide().appendTo(slides);
});
// Collect all images in one node set and hide the list
var images = slides.find("img");
slideshow.find("ul").hide();
// Resize slides <div> to hold the largest images
var slidesWidth = images.widest();
var slidesHeight = images.tallest();
slides.css({
width : slidesWidth,
height : slidesHeight
});
// Center each image
images.each(function() {
var image = $(this);
image.css({
left: slidesHeight / 2 - image.width() / 2,
top: slidesHeight / 2 - image.height() / 2,
});
});
// Save a reference to the first image
var activeImage = images.eq(currentImageIndex);
// The function to show the next or previous image
function showImage(newIndex) {
currentImageIndex = newIndex >= images.length ? 0 : newIndex;
currentImageIndex = currentImageIndex < 0 ? images.length - 1 : currentImageIndex;
activeImage.fadeOut(0);
activeImage = images.eq(currentImageIndex).fadeIn(150);
}
// Start timer to cycle through images
var interval = setInterval(function() {
showImage(currentImageIndex + 1);
}, 5000);
// Create next and previous controls
$('\u232A').appendTo(slides).bind("click", +1, onClick);
$('\u2329').appendTo(slides).bind("click", -1, onClick);
// The event handler for the controls
function onClick(event) {
event.preventDefault();
clearInterval(interval);
showImage(currentImageIndex + event.data);
}
})(jQuery); // Self-invoking function executes automatically

The main problem here is in your CSS:
#html.js #slideshow .slides img{
position: absolute;
margin-left: auto;
margin-right: auto;
}
Margin: auto; will only work on objects that have a defined width. Since an image is a replaced inline-block, no real width exists. This is made worse by the fact that you've positioned it absolutely, which changes the way margins will work - the item will always pick up its position relative to the determined parent, and apply margins after that outside of the flow, so auto will not be relevant.
first step is to remove the absolute positioning on the image, it's not useful here.
By default, images are a type of inline-block, so simply adding "text-align:center;" to the "#slideshow .slides" selector will center the images.
Alternately, if we just want to edit the images and force them to center themselves, change the above block to:
#html.js #slideshow .slides img{
display:block;
margin-left: auto;
margin-right: auto;
}
and everything should line up like you wanted.

Count back percentage using JQuery

I have the code below where I'd like to the numbers count back to 0% once hover the object out. Also I can't figure our how to make the value disappear again as it was on load. Could you please help me solve this.
Thanks in advance.
HTML
<div class="container">
<div class="fill" data-width="80%"></div>
</div>
<div class="container">
<div class="fill" data-width="50%"></div>
</div>
CSS
.container {
position: relative;
width: 300px;
height: 30px;
background-color: blue;
margin: 10px auto;
}
.fill {
height: 100%;
width: 0;
background-color: red;
line-height: 30px;
text-align: left;
z-index: 1;
text-align: right;
}
JQuery
$(function() {
$('.container').hover( function(){
var width=$(this).find(".fill").data('width');
$(this).find(".fill").animate({ width: width }, {
duration:800,
step: function(now, fx) {
$(this).html(Math.round(now) + '%');
}
});
},
function(){
$(this).find(".fill").animate({ "width": "0px" }, 800);
});
});
jsFiddle http://jsfiddle.net/zp8pe069/

jsBin demo
CSS: set overflow: hidden to .fill to prevent the text being visible after the animation ends.
HTML: remove % from the data attribute
JS and here you go. all you need:
$('.container').hover(function( e ){
var $fill = $(this).find(".fill");
var width = $fill.data('width');
$fill.stop().animate({width: e.type=="mouseenter" ? width+"%" : "0%" }, {
duration : 800,
step : function(now) {
$(this).html(Math.round(now) + '%') ;
}
});
});
Note also the use of the .stop() method, if you hover multiple time hysterically :) it'll prevent endless animations.

jQuery: Div elements are not showing up

I am adapting the Coverflow technique to work with a div. Following is the html:
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body,html {
margin: 0;
padding: 0;
background: #000;
height: 100%;
color: #eee;
font-family: Arial;
font-size: 10px;
}
div.magnifyme {
height: 80px;
padding: 80px;
position: absolute;
top: 0px;
left: 0px;
width: 2000px;
}
div.wrapper {
margin: 0px;
height: 470px;
/*border: 2px solid #999;*/
overflow: hidden;
padding-left: 40px;
right: 1px;
width: 824px;
position: relative;
}
div.container {position: relative; width: 854px; height: 480px; background: #000; margin: auto;}
div.nav {position: absolute; top: 10px; width: 20%; height: 10%; right: 1px; }
div.magnifyme div {
position: absolute;
width: 300px;
height: 280px;
float: left;
margin: 5px;
position: relative;
border: 2px solid #999;
background: #500;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="ui.coverflow.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript">
$(function() {
$("div.magnifyme").coverflow();
$("#add").click(function() {
$(".magnifyme").append("<div id=\"div5\">hello world</div>");
$("div.magnifyme").coverflow();
});
});
</script>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="magnifyme">
<div id="div0">This is div 0</div>
<div id="div1">This is div 1</div>
<div id="div2">This is div 2</div>
<div id="div3">This is div 3</div>
<div id="div4">This is div 4</div>
</div>
</div>
<div class="nav">
<button type="button" id="add">Add to Deck</button>
</div>
</div>
</body>
</html>
The coverflow function (included as a js file in the head section) is here. When I click the button, I was expecting it to add a DIV to the already present deck. For some reason, it doesn't show the newly added DIV. I tried calling the coverflow() function after I added the new element but that didn't work either. The modified coverflow function is given here:
;(function($){
$.widget("ui.coverflow", {
init: function() {
var self = this;
this.items = $(this.options.items, this.element).bind("click", function() {
self.moveTo(this);
//$("div.slider").slider("moveTo", self.current, null, true);
});
this.itemWidth = this.items.outerWidth(true);
this.current = 0; //Start item
this.refresh(1, 0, this.current);
this.element.css("left",
(-this.current * this.itemWidth/2)
+ (this.element.parent()[0].offsetWidth/2 - this.itemWidth/2) //Center the items container
- (parseInt(this.element.css("paddingLeft")) || 0) //Subtract the padding of the items container
);
},
moveTo: function(item) {
this.previous = this.current;
this.current = !isNaN(parseInt(item)) ? parseInt(item) : this.items.index(item);
if(this.previous == this.current) return false; //Don't animate when clicking on the same item
var self = this, to = Math.abs(self.previous-self.current) <=1 ? self.previous : self.current+(self.previous < self.current ? -1 : 1);
$.fx.step.coverflow = function(fx) {
self.refresh(fx.now, to, self.current);
};
this.element.stop().animate({
coverflow: 1,
left: (
(-this.current * this.itemWidth/2)
+ (this.element.parent()[0].offsetWidth/2 - this.itemWidth/2) //Center the items container
- (parseInt(this.element.css("paddingLeft")) || 0) //Subtract the padding of the items container
)
}, {
duration: 1000,
easing: "easeOutQuint"
});
/*current = this.current;
$("[id^=div]").each(function() {
if(this.id != "div"+current) {
console.info(this.id + " Current: " + current);
$(this).fadeTo( 'slow', 0.1);
}
});*/
},
refresh: function(state,from,to) {
var self = this, offset = null;
this.items.each(function(i) {
var side = (i == to && from-to < 0 ) || i-to > 0 ? "left" : "right";
var mod = i == to ? (1-state) : ( i == from ? state : 1 );
var before = (i > from && i != to);
$(this).css({
webkitTransform: "matrix(1,"+(mod * (side == "right" ? -0.5 : 0.5))+",0,1,0,0) scale("+(1+((1-mod)*0.5))+")",
left: (
(-i * (self.itemWidth/2))
+ (side == "right"? -self.itemWidth/2 : self.itemWidth/2) * mod //For the space in the middle
),
zIndex: self.items.length + (side == "left" ? to-i : i-to)
});
if(!$.browser.msie)
$(this).css("opacity", 1 - Math.abs((side == "left" ? to-i : i-to))/2);
});
}
});
$.extend($.ui.coverflow, {
defaults: {
items: "> *"
}
});
})(jQuery);
One thing I did notice is that after clicking the button for about 5-10 times, the elements show up but not along with the already present divs but rather below them. I am guessing that this has something to do with the CSS of the magnifyme class (2000px), but I am not sure what it is. Is there any way I can make this work?

You need to write an additional function for the coverflow widget:
add: function(el) {
var self = this;
this.element.append(el)
this.options.items = $('> *', this.element);
this.items = $(this.options.items, this.element).bind("click", function() {
self.moveTo(this);
});
this.itemWidth = this.items.outerWidth(true);
this.moveTo(this.items.length-1);
},
and then call it like so:
$("#add").click(function() {
$("div.magnifyme").coverflow('add', "<div></div>");
});

First, you need to add a references to the jQuery UI core, and it also appears that it requires the jQuery slider plugin.
Second, in your click event you're doing a location.reload, which is refreshing the page from the server, resetting any changes you had made to the page. (if you make the DIVs much smaller you can see one flash in before the page is reloaded).

You are getting a js error on the page -- "$.widget is not a function" because you didn't include the jqueryUI library. http://jqueryui.com/
Also if you remove the location.reload line, your code will work, however, I would rewrite that script block like this, so that everything clearly runs when the document is ready:
<script type="text/javascript">
$(document).ready(function() {
$("div.magnifyme").coverflow();
$("#add").click(function() {
$(".magnifyme").append("<div id=\"div5\">hello world</div>");
$("div.magnifyme").coverflow();
});
});
</script>