A place to play with other people’s javascript

I am not a natural coder.  Or at least, I don’t know how to code from scratch.  Well, html and css but those don’t count, do they?  There’s so much to learn, so many rules to remember and computer languages have an annoying habit of only doing what you tell them to do and only if you ask properly.  Luckily, I don’t need to be.  I am a natural adapter-of-things.

So when I needed a content slider for my site, I found one close enough with lovely clear code, nice documentation and started in on Moving Boxes.  Googling around for how to change various features, I came across this jsfiddle.  I’d never seen the site before – basically, you upload some javascript, css and html then fiddle with it on the fly.  You can fiddle with other people’s, fiddle with your own, fiddle away to your heart’s content.  Genius idea.  My fork is here – it’ll be slightly prettier on my site, I will wait to put in custom arrows, can’t be bothered now.

What I did is pretty obvious.  My goal is a slider that goes across the browser window with translucent non-current panels.  The two small problems I had that I should mention are:

  1. the current panel was not centered on the page
  2. the slider didn’t re-center after the window is resized.

For the first, adding :

#slider{margin-left: -6px !important;}

worked.  Not sure about the -6px.  Might be more on that as I actually get it all live.  It might all fall apart, in which case I’ll edit this.  (And I’ve got to do that thing that makes the code look nice – I have how to do it bookmarked somewhere.)

For the second, I had to force a page reload.  Not ideal but not disastrous.  This is how I did it – copying this (gotta love Stack Overflow):

// resizeStuff() via http://stackoverflow.com/questions/667426/javascript-resize-event-firing-multiple-times-while-dragging-the-resize-handle
function resizeStuff() {
location.reload();}
var TO = false;
$(window).resize(function(){
if(TO !== false)
clearTimeout(TO);
TO = setTimeout(resizeStuff, 200); //200 is time in milliseconds
});

All good stuff.  If you’d like a go, you can play with mine.  (It’s more fun on their site because the layout is better…)

Leave a Reply

Your email address will not be published. Required fields are marked *