Develop Reference

Incrementing in JavaScript

I'm trying to create a sliding sidebar and was wondering if there was a better way then what I am doing already.
<img id = "MenuIcon" src = "MenuIcon.png" alt = "Menu Icon" onclick = "slideSideBar()" />
At the moment I simply check if the sideSlideCount is even - if it is the sidebar must not be out, so when the function is called it slides out; if sideSlideCount is odd (i.e. % 2 != 0) then the sidebar should slide out of view.
var sideSlideCount = 0; // variable used with the side bar
var bodyHeight = $(window).height();
var bodyWidth = $(window).width();
console.log(bodyWidth);
function slideSideBar() {
if (sideSlideCount % 2 == 0) { // if sideSlideCount is even, i.e. the side bar is hidden
$("#SideBar").animate({width: bodyWidth / 6}, 600); // slide the bar out to 300 width, 0.6 seconds
$("#SideLinks").fadeTo(1000, 0.8); // fade the links into view, 1 second, to 100% opacity
}
else { // else, if the side bar is in view
$("#SideBar").fadeIn(300).animate({width: 0}, 600); // slide the bar back out of view (0 width), 0.6 seconds
$("#SideLinks").fadeTo(200, 0); // fade the links out of view, 0.2 seconds, to 0% opacity
}
sideSlideCount++; // increment the variable
}

You could simply make your code modular to avoid global variables. You should be looking into AMD modules, however to keep it simple you can create yourself a namespace where your code will live.
DEMO: http://jsfiddle.net/BzYuQ/
//Define a SlidingSidebar reusable component
!function (ns, $) {
function SlidingSidebar(el, animateDuration) {
this.$el = $(el);
this.animateDuration = animateDuration;
}
SlidingSidebar.prototype = {
constructor: SlidingSidebar,
toggle: function () {
this.$el.stop().animate({ width: 'toggle' }, this.animateDuration);
}
};
ns.SlidingSidebar = SlidingSidebar;
}(slideExampleSite = window.slideExampleSite || {}, jQuery);
$(function () {
//The following behavior could also be in a configurable "SlidebarFeature" module
//or you could integrate the button directly into the SlidingSidebar.
//I'm just showing how code can be modularized here.
var sideBar = new slideExampleSite.SlidingSidebar('#sidebar', 600);
$('#toggle-btn').click(function () {
sideBar.toggle();
});
});
Obviously in this case the SlidingSidebar component doesn't do much, but as your application grows, modularizing your code to get away from the $(function () {/*tons of code*/}); anti-pattern will pay off in many ways.

You didn't say what "better" is, but if the intention is just to avoid globals, you can use a closure:
var slideSideBar = (function() {
var sideSlideCount = false; // variable used with the side bar
var bodyHeight = $(window).height();
var bodyWidth = $(window).width();
console.log(bodyWidth);
// This function has access to all the above variables, but no other
// function does.
function slideSideBar() {
if (sideSlideCount) {
$("#SideBar").animate({width: bodyWidth / 6}, 600);
$("#SideLinks").fadeTo(1000, 0.8);
} else {
$("#SideBar").fadeIn(300).animate({width: 0}, 600);
$("#SideLinks").fadeTo(200, 0);
}
sideSlideCount = !sideSlideCount;
}
// Return a reference to the slideSideBar function so it's available
// globally, but access to variables is "private"
return slideSideBar;
}());
The only difference is that slideSideBar won't exist until the above has been executed, so don't try to call it until afterward.

Not sure on your definition of "better", but I see your using jQuery which has a nice $toggle feature which can help here.
function slidesideBar(){
$("#SideBar").toggle(function() {
$(this).animate({width: bodyWidth / 6}, 600); // slide the bar out to 300 width, 0.6 seconds
$("#SideLinks").fadeTo(1000, 0.8); // fade the links into view, 1 second, to 100% opacity
}, function() {
$(this).fadeIn(300).animate({width: 0}, 600); // slide the bar back out of view (0 width), 0.6 seconds
$("#SideLinks").fadeTo(200, 0); // fade the links out of view, 0.2 seconds, to 0% opacity
});​
}
Credit: jQuery Animation Toggle. Copy and paste:
When given a list of functions as arguments, the .toggle(fn1, fn2) method will alternate between the functions given starting with the first one. This automatically keeps track of the toggle state for you - you don't have to do that.
jQuery doc is here. There are multiple forms of .toggle() depending upon the arguments used so you don't always find the right one when searching the jQuery doc.

Fixing the animation properties

I am doing some research at the moment into creating a new maths game for primary school children where divs from 0-9 appear at random inside a container.
A question is given at the beginning. Something like, multiples of 20. The user will then have to click on the correct ones, and they will then be counted at the end and a score will be given.
I have just changed the speed in which the divs appear so that they appear for longer and more than one at a time to make the game easier for younger children.
I used "fadeIn" like so..
$('#' + id).animate({
top: newY,
left: newX
}, 'slow', function() {}).fadeIn(2000);
}
My problem is that now when I shoot the correct or incorrect number the animation is very glitchy and I cannot figure out why.
Fiddle: http://jsfiddle.net/cFKHq/6/ (See version 5 to see what it was like before)

Inside startplay(), control the concurrency when calling scramble() , I do it with a global var named window.cont, so I replaced your following call:
play = setInterval(scramble, 1800);
for this one:
play = setInterval(function() {
if (window.cont){
window.cont = false;
scramble();
}
}, 1000);
The var window.cont needs to be set globally at the start of your code, like so:
var miss = 0;
var hit = 0;
var target = $("#target");
window.cont = true;
So with window.cont you now can control that animations are executed one after another, without overlapping, like so:
$('#'+id).css({
top: newY,
left: newX
}).fadeIn(2000, function() {
setTimeout(function() {
$('#' + id).slideUp('fast');
window.cont = true;
}, 1500);
});
See working demo

What is missing from the status indicator for my content slider, JavaScript/Jquery?

I'm coding this content slider using JavaScript/Jquery.
Please have a look at my code on JSFiddle: http://jsfiddle.net/46JfZ/7/
cn = {
hero:function(r,lx,rx,fx,fs,ss,a){
rc=$(r).children(), rcw=rc.width(), rca=rc.size(), rw=rcw*rca, p='px'; $(r).css({'width':rw})
$(lx).click(function(){
n=$(r).position().left-rcw;
switch(fx){
case 'slide':$(r).stop(true,true).animate({left:(n<-rw+rcw?0:n)+p},ss,'easeOutExpo'); break;
case 'fade':$(r).stop(true,true).fadeOut(fs).animate({left:(n<-rw+rcw?0:n)+p},1).fadeIn(fs); break;
}
})
$(rx).click(function(){
n=$(r).position().left+rcw;
switch(fx){
case 'slide':$(r).stop(true,true).animate({left:(n>0?-rw+rcw:n)+p},ss,'easeOutExpo'); break;
case 'fade':$(r).stop(true,true).fadeOut(fs).animate({left:(n>0?-rw+rcw:n)+p},1).fadeIn(fs); break;
}
})
if(a.match('yes')){
$('#hero').append('<div id="indicate"></div>');
$.each(rc, function(){$('#indicate').append('<span></span>');})
function indicate(){
$('#indicate span').removeClass('active');
for(i=1;i<=rca; i++){
o=i-1,
newReelpos = - rcw*o,
q=$(r).position().left;
if(q == newReelpos ){
$('#indicate span:nth-child('+ i +')').addClass('active');
}
}
$(lx).click();
}
setInterval(indicate,3000);
$(lx).parent().hide();
}
}
}
$(function(){
cn.hero('#reel', '#next', '#prev', 'slide', 300, 600, 'yes');
});
I've missed something because the status dots(blue & green dots on the right) aren't working properly?
Any help would be appreciated greatly, Thank you

There are some things you're doing that aren't great or are wrong. For instance:
function(r,lx,rx,fx,fs,ss,a)
This is not a good way to name your arguments (or variables). What does all that mean? You might be asking yourself this in a few months as you try to fix something that has broken. Use descriptive argument, variable and function names.
You (inadvertently?) use global variables. For instance:
rc=$(r).children(), rcw=rc.width(), rca=rc.size(), // etc.
These are all essentially global. Since you have a closure, you can prepend a var on each of those and they will stay in scope for your handlers and interval calls.
Your code formatting is problematic, almost (in my opinion) guaranteeing you'll have code that's hard to visually inspect for problems and inefficiencies (especially combined with the above and the below other observations). Space your code out. For instance:
rc=$(r).children(), rcw=rc.width(), rca=rc.size(), rw=rcw*rca, p='px'; $(r).css({'width':rw})
Could be:
var $r = $(r),
rc = $r.children(),
rcw = rc.width(),
rca = rc.size(),
rw = rcw * rca,
p = 'px';
Now I ask you, which do you think is easier to read?
Note, you also have several spots like this where a statement has no ending ;. Do not get in the habit of doing this, as it's poor practice and can lead to problems later on that can be hard to spot. Yes, I know Javascript allows you to do this, but don't take the bug bait.
You also should be caching jQuery calls. So all of your $(r), which occur within the same closure, could (I argue in the case of animation, should) be:
var $r = $(r); // First, cache
...
$r.stop(true,true).animate() // Then use
This will speed up your code, since jQuery is doing less DOM traversals to find the element(s) you're working on.
Taking all that into consideration, your actual problem is that you're not calculating the dot selection very effectively (which appears to be, find the current left value and then iterate over the width of each cell, testing if the width matches the left value). Note, math is not my strong suit, so I imagine there's a more efficient/direct way of handling the underlying math, but doing a loop to find the "active" dot is not necessary.
My approach:
cn = {
hero: function(r,lx,rx,fx,fs,ss,a){
var $r = $(r),
rc = $r.children(),
rcw = rc.width(),
rca = rc.size(),
rw = rcw * rca,
p = 'px';
$r.css({width: rw});
$(lx).click(function(){
var n = $r.position().left - rcw;
switch(fx){
case 'slide':
$r.stop(true,true)
.animate({
left: (n<-rw+rcw?0:n)+p
}, ss);
break;
case 'fade':
$r.stop(true,true)
.fadeOut(fs)
.animate({
left: (n<-rw+rcw?0:n)+p
}, 1)
.fadeIn(fs);
break;
}
});
$(rx).click(function(){
var n = $r.position().left + rcw;
switch(fx){
case 'slide':
$(r).stop(true,true)
.animate({
left: (n>0?-rw+rcw:n)+p
}, ss);
break;
case 'fade':
$r.stop(true,true)
.fadeOut(fs)
.animate({
left: (n>0?-rw+rcw:n)+p
}, 1)
.fadeIn(fs);
break;
}
});
// I have no idea why you're using match; wouldn't a boolean true work?
if (a.match('yes')) {
$('#hero').append('<div id="indicate"></div>');
$.each(rc, function(){
$('#indicate').append('<span></span>');
});
function indicate(fire){
var $indicates = $('#indicate span'),
left = parseInt($r.position().left),
count = $indicates.length;
var i = (left / -rcw) + 2;
if (i > count || fire !== true) {
i = 1;
}
$indicates
.removeClass('active')
.parent()
.find('span:nth-child('+ i +')')
.addClass('active');
if (fire) {
$(lx).click();
}
setTimeout(function(){
indicate(true);
}, 3000);
}
indicate(false);
$(lx).parent().hide();
}
}
}
$(function(){
cn.hero('#reel', '#next', '#prev', 'slide', 300, 600, 'yes');
});
http://jsfiddle.net/kEG2p/

position not changing

I'm trying to move a div to one side or the other depending on it's position, BUT! no matter what method I use to chance its position, it doesn't really change.
var $ancho = $(document).width();
var $posP = $("#portafolio").offset().left;
var $porP = Math.floor($posP * 100 / $ancho);
the var porP saves the percentage of the div's (portafolio) position
Now, the initial position of portafolio is 13(%)
if($porP == '13')
{
$("#portafolio").mouseenter(function(){
$("#imge").stop().fadeTo('500', 0.3, function() {});});
$("#portafolio").mouseleave(function(){
$("#imge").stop().fadeOut('500', function() {});
});
$("#portafolio").click(function(){
$("#portafolio").animate({
left: "+=87%",},
{ queue: false, duration: 900, easing:'swing' });
$("#imge").fadeTo('500', 0.3, function() {
});
$(iframe).attr('src','portafolio.html');
$("#marco").fadeTo('500', 1 , function() {});
$(iframe).open();
});
}
but even when I move portafolio to the right, in the animation function, the porP var still shows 13, therefore it never reaches the else
else
{ move to the other side }
I already tried to assign a new value to the porP var inside the click function but to no avail. It just always executes the IF statement.
Does someone know why the value (porP) doesn't change? and how can I actually change it to make the else finally work?
I searched everywhere and tried everything that came to my mind with my very limited knowledge of jquery and got to nowhere. Please!!
edit// #portafolio is a relative positioned div to its parent #contenido which is absolute positioned and is left 20px . #portafolio is left 15% . I don't know if that has something to do.

Alice, I'm not sure exactly what you're trying to do, but the if and else statements probably should be inside the 'click()' handler. Something like,
$("#portafolio").click(function(){
var $ancho = $(document).width();
var $posP = $("#portafolio").offset().left;
var $porP = Math.floor($posP * 100 / $ancho);
if($porP == '13')
{
$("#portafolio").animate({
left: "+=87%",},
{ queue: false, duration: 900, easing:'swing' });
$("#imge").fadeTo('500', 0.3, function() {
});
$(iframe).attr('src','portafolio.html');
$("#marco").fadeTo('500', 1 , function() {});
$(iframe).open();
}
else
{ move to the other side }
});

How can I get a fixed-position menu like slashdot's comment filtration menu

Slashdot has a little widget that allows you to tweak your comment threshold to filter out down-modded comments. It will be in one place if you scroll to the top of the page, and as you scroll down, at some point, where its original home is about to scroll off the page, it will switch to fixed position, and stay on your screen. (To see an example, click here.)
My question is, how can I accomplish the same effect of having a menu be in one place when scrolled up, and switch to fixed position as the user scrolls down? I know this will involve a combination of CSS and javascript. I'm not necessarily looking for a full example of working code, but what steps will my code need to go through?

Okay, I figured it out. I will post it here in case it help anyone else. This solution uses prototype, and an internal library that gives me the registerEvent, getElementX and getElementY functions, which do what you would think.
var MenuManager = Class.create({
initialize: function initialize(menuElt) {
this.menu = $(menuElt);
this.homePosn = { x: getElementX(this.menu), y: getElementY(this.menu) };
registerEvent(document, 'scroll', this.handleScroll.bind(this));
this.handleScroll();
},
handleScroll: function handleScroll() {
this.scrollOffset = document.viewport.getScrollOffsets().top;
if (this.scrollOffset > this.homePosn.y) {
this.menu.style.position = 'fixed';
this.menu.style.top = 0;
this.menu.style.left = this.homePosn.x;
} else {
this.menu.style.position = 'absolute';
this.menu.style.top = null;
this.menu.style.left = null;
}
}
});
Just call the constructor with the id of your menu, and the class will take it from there.

Thanks for the effort of sharing this code.
I made some small changes to make it work with the current release of Prototype.
var TableHeaderManager = Class.create({
initialize: function initialize(headerElt) {
this.tableHeader = $(headerElt);
this.homePosn = { x: this.tableHeader.cumulativeOffset()[0], y: this.tableHeader.cumulativeOffset()[1] };
Event.observe(window, 'scroll', this.handleScroll.bind(this));
this.handleScroll();
},
handleScroll: function handleScroll() {
this.scrollOffset = document.viewport.getScrollOffsets().top;
if (this.scrollOffset > this.homePosn.y) {
this.tableHeader.style.position = 'fixed';
this.tableHeader.style.top = 0;
this.tableHeader.style.left = this.homePosn.x;
} else {
this.tableHeader.style.position = 'absolute';
this.tableHeader.style.top = null;
this.tableHeader.style.left = null;
}
}
});

For a demo but not based on the code above checkout:
fixed-floating-elements