Javascript/CSS Help with "Panes"

  • 1
  • Question
  • Updated 9 years ago
  • Answered
Hello staff and anyone else who can help. I was recently looking into javascript that will allow me to add "panes" into my homepage of my site and I was actually unable to achieve what I wanted. I am real good at javascript/html/web design and even have a degree, but I just cannot get this to work properly. If you go to www.ign.com, they have a table with "panes" inside that glides to each story/picture heading. The biggest set of pictures is what I am talking about with no heading. Just sliding panes. Can anyone help me get something at least similar to this. I have some code that I thought would work, but I can seem to name the "button" elements to work.

var SlidingTabs = new SlidingTabs(buttons, panes, options);
options: {
startingSlide: false, // sets the slide to start on, either an element or an id
activeButtonClass: 'active', // class to add to selected button
activationEvent: 'click', // you can set this to ‘mouseover’ or whatever you like
wrap: true, // calls to previous() and next() should wrap around?
slideEffect: { // options for effect used to animate the sliding, see Fx.Base in mootools docs
duration: 400 // 0.4 of a second
},
animateHeight: true, // animate height of container
rightOversized: 0 // how much of the next pane to show to the right of the current pane
},
current: null, // zero based current pane number, read only
buttons: false,
outerSlidesBox: null,
innerSlidesBox: null,
panes: null,
fx: null, // this one animates the scrolling inside
heightFx: null, // this one animates the height

initialize: function(buttonContainer, slideContainer, options) {
if (buttonContainer) { this.buttons = $(buttonContainer).getChildren(); }
this.outerSlidesBox = $(slideContainer);
this.innerSlidesBox = this.outerSlidesBox.getFirst();
this.panes = this.innerSlidesBox.getChildren();

this.setOptions(options);

this.fx = new Fx.Scroll(this.outerSlidesBox, this.options.slideEffect);
this.heightFx = this.outerSlidesBox.effect('height', this.options.slideEffect);

// set up button highlight
this.current = this.options.startingSlide ? this.panes.indexOf($(this.options.startingSlide)) : 0;
if (this.buttons) { this.buttons[this.current].addClass(this.options.activeButtonClass); }

// add needed stylings
this.outerSlidesBox.setStyle('overflow', 'hidden');
this.panes.each(function(pane, index) {
pane.setStyles({
'float': 'left',
'overflow': 'hidden'
});
}.bind(this));

// stupidness to make IE work - it boggles the mind why this has any effect
// maybe it's something to do with giving it layout?
this.innerSlidesBox.setStyle('float', 'left');

if (this.options.startingSlide) this.fx.toElement(this.options.startingSlide);

// add events to the buttons
if (this.buttons) this.buttons.each( function(button) {
button.addEvent(this.options.activationEvent, this.buttonEventHandler.bindWithEvent(this, button));
}.bind(this));

if (this.options.animateHeight)
this.heightFx.set(this.panes[this.current].offsetHeight);

// set up all the right widths inside the panes
this.recalcWidths();
},

// to change to a specific tab, call this, argument is the pane element you want to switch to.
changeTo: function(element, animate) {
if ($type(element) == 'number') element = this.panes[element - 1];
if (!$defined(animate)) animate = true;
var event = { cancel: false, target: $(element), animateChange: animate };
this.fireEvent('change', event);
if (event.cancel == true) { return; };

if (this.buttons) { this.buttons[this.current].removeClass(this.options.activeButtonClass); };
this.current = this.panes.indexOf($(event.target));
if (this.buttons) { this.buttons[this.current].addClass(this.options.activeButtonClass); };

this.fx.stop();
if (event.animateChange) {
this.fx.toElement(event.target);
} else {
this.outerSlidesBox.scrollTo(this.current * this.outerSlidesBox.offsetWidth.toInt(), 0);
}

if (this.options.animateHeight)
this.heightFx.start(this.panes[this.current].offsetHeight);
},

// Handles a click
buttonEventHandler: function(event, button) {
if (event.target == this.buttons[this.current]) return;
this.changeTo(this.panes[this.buttons.indexOf($(button))]);
},

// call this to go to the next tab
next: function() {
var next = this.current + 1;
if (next == this.panes.length) {
if (this.options.wrap == true) { next = 0 } else { return } } this.changeTo(this.panes[next]); }, // to go to the previous tab previous: function() { var prev = this.current - 1 if (prev < 0) { if (this.options.wrap == true) { prev = this.panes.length - 1 } else { return } } this.changeTo(this.panes[prev]); }, // call this if the width of the sliding tabs container changes to get everything in line again recalcWidths: function() { this.panes.each(function(pane, index) { pane.setStyle('width', this.outerSlidesBox.offsetWidth.toInt() - this.options.rightOversized + 'px'); }.bind(this)); this.innerSlidesBox.setStyle( 'width', (this.outerSlidesBox.offsetWidth.toInt() * this.panes.length) + 'px' ); // fix positioning if (this.current > 0) { this.fx.stop(); this.outerSlidesBox.scrollTo(this.current * this.outerSlidesBox.offsetWidth.toInt(), 0); } } }); SlidingTabs.implement(new Options, new Events);

Sorry for all the code, but it would help answer my question. I happened to get this myself and from a website and have checked it all on other sites to make sure I was correct so far. What needs to be done is the 'buttons' and 'panes' elements and children need to be set, but how? The options are all okay and just need to be changed to my needs. I also realize that the html, body and scrpit tags all need applied, but I left them out for length and posting purposes. Can anyone help at least a little?

I would be much appreciative. Thanks.
Photo of Greg

Greg

  • 14 Posts
  • 0 Reply Likes

Posted 9 years ago

  • 1
Photo of the_pete

the_pete

  • 65 Posts
  • 16 Reply Likes
Hey Greg

I noticed on the first line of the code you pasted that you instantiate an instance of SlidingTabs() but I don't see the actually SlidingTabs Class anywhere.

I assume that this is in some external file, could you provide me a link to this? (Otherwise you're missing the code library that defines the SlidingTabs Class - which is causing your problem).

I can't debug this without that code, so get back to me and I'll give it another look :)
Photo of Connor McCarra

Connor McCarra, Champion

  • 944 Posts
  • 47 Reply Likes
close match!..lol
Photo of Greg

Greg

  • 14 Posts
  • 0 Reply Likes
There isn't any external file. The SlidingTabs will be defined in the buttons, panes and options elements. That's what I need help on. There needs to be more code input into the beginning right after 'new SlidingTabs(buttons, panes, options)' and right before where the options elements begin.
Photo of the_pete

the_pete

  • 65 Posts
  • 16 Reply Likes
Hey Greg

I'm not sure I understand exactly what you mean. I think the library you're using might source it's content from buttons, panes and options elements in the html of your page, but it can't work without a defined SlidingTabs class.

I can't make any sense of the first line of code - "var SlidingTabs = new SlidingTabs(buttons, panes, options)". You're creating a variable which is an instance of the SlidingTabs class, but calling the variable SlidingTabs, which would be problematic if done in global scope - and since this code isn't written in a closure - I have to assume this is the case. Further, the arguments this your passing into this constructor aren't defined anywhere. Judging from their names it might be that the first line is supposed to be the start of a class definition - but then the code should look like...

var SlidingTabs = function(){

this.exampleProperty = 5

}

// and maybe this too
SlidingTabs.prototype = {

exampleMethod : function(){

}

}

I see that you say you stripped some of the code from the file you tested this in, could you post everything for me - maybe it'll help clarify things.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
I'd love to know what your talking about!! maybe 1 day :)
Photo of Greg

Greg

  • 14 Posts
  • 0 Reply Likes
Okay I will post t when I get a chance, but maybe an actual example to look at would be even easier. go to ign.com and on their homepage you will see a box with "sliding panes"...aka a picture with multiple sliding pictures that allow it to change to the pic you click on. That is what I am trying to accomplish. Or at least something similar
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
could you not just get a pre made one from a image hoster?
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Hey Greg,

I would love to acheive that effect as well.
If you get it right give me a shout, Ok!

In the mean time, here is a poor mans version of what you are trying to do: http://www.picturetrail.com/samples/f...
Photo of the_pete

the_pete

  • 65 Posts
  • 16 Reply Likes
Hey Greg

Looks like you're trying to extract functionality from ign.com. Reverse engineering this kind of thing is really quite difficult and beyond the scope of what I can really help with.

I can recommending Googling for things like 'javascript scroll panel' - I found quite a good article here...

http://www.devarticles.com/c/a/JavaSc...

You've given me a really cool idea for a widget - hopefully we can have something a little easier to deal with for you and everyone else to use soon :)
Photo of Greg

Greg

  • 14 Posts
  • 0 Reply Likes
A widget would be awesome as well, but I still would like to do this on my own too since I probably should learn something like this by the time I am done with school and looking for a job in web design.... by the way, I got this code to work somewhat... I just need the sliding part of the panes to work. Right now the panes change as if it's a ge loading into another page. I'm real close.