PDA

View Full Version : Assigning seperate links to a slide of products



ArtW
04-29-2011, 11:32 AM
Hi there,

I really have no knowledge of javascript what so ever, I will try and be as helpful as I can with any information you need but I am in real need of help! My friend designed me a webpage and it so you know the jist of things, it's for server hosting of the game Minecraft.

Now the webpage as a slider on it where the customer can choose what "package" they want to buy. So theres a starter, advanced, expert package and so on. Then whatever one they are on theres an "Order Now" button.

yet the only link is the order now button so theres surely no point of the customer choosing what package they want.

I have the javascript code here if it makes any sense to anyone that would be awesome.



function log(data)
{
if(window.console != undefined)
console.log(data);
}

(function($) {

var packagesData = Array();
packagesData.push({
name: 'Starter',
maxSlots: 6,
ram: '192 MB',
bukkit: true,
panel: true,
web: true,
price: '$5.95 USD',
});
packagesData.push({
name: 'Public',
maxSlots: 12,
ram: '384 MB',
bukkit: true,
panel: true,
web: true,
price: '$11.95 USD',
});
packagesData.push({
name: 'Pro',
maxSlots: 18,
ram: '576 MB',
bukkit: true,
panel: true,
web: true,
price: '$17.95 USD'
});
packagesData.push({
name: 'Expert',
maxSlots: 24,
ram: '768 MB',
bukkit: true,
panel: true,
web: true,
price: '$23.95 USD'
});
packagesData.push({
name: 'Diamond',
maxSlots: 32,
ram: '1024 MB',
bukkit: true,
panel: true,
web: true,
price: '$30.95 USD'
});
packagesData.push({
name: 'Prestige',
maxSlots: 64,
ram: '2048 MB',
bukkit: true,
panel: true,
web: true,
price: '$62.95 USD'
});

$.slotSlider = function(settings)
{
$.slotSlider.init(settings);
}
$.extend($.slotSlider,{

settings:{
defaultBocks:6,
planHeight:34,
cubeXstep:30,
cubeYstep:15,
sliderDelay:20
},
selectors:{
container:'#slotSlider',
slider:'.slider',
cubes:'#slotCubes',
packagesTable:'.package',
packageName:'.arrows span b',
arrows:'.arrows a',
slotsNumber:'.slots span'
},
cubesMatrix:Array(
{x:3, y:0},{x:2, y:1},{x:4, y:1},{x:3, y:2},
{x:1, y:2},{x:5, y:2},{x:2, y:3},{x:4, y:3},
{x:3, y:4},{x:0, y:3},{x:6, y:3},{x:1, y:4},
{x:5, y:4},{x:2, y:5},{x:4, y:5},{x:3, y:6}
),

init:function(opts)
{
$.extend(this.settings, opts || {});

var settings = this.settings;
var selectors = this.selectors;
var $container = $(this.selectors.container);
var $table = $container.find(this.selectors.packagesTable);

var $slider = $container.find(this.selectors.slider).slider
({
min:1,
max:64,
slide:slide,
stop:stop
});
function slide(event, ui)
{
ui.handle.blur();
setCubes(ui.value);

var i = 0;
for(i in packagesData)
{
var data = packagesData[i];
if(data.maxSlots >= ui.value)
break;
}
setPackageData(i);
}
function stop(event, ui)
{
ui.handle.blur();
}

var $cubesContainer = $(this.selectors.cubes);
var cubesMatrix = this.cubesMatrix;
var plans = Array;
for(var i = 0; i < 4; i ++)
{
var $plan = $('<div/>').appendTo($cubesContainer);
$plan.css({top:(3 - i) * this.settings.planHeight});
plans[i] = $plan;
createPlan($plan);
}
function createPlan($plan)
{
for(var i in cubesMatrix)
{
var $cube = $('<div/>').appendTo($plan);
var cubeCoords = cubesMatrix[i];
var xPos = cubeCoords.x * settings.cubeXstep;
var yPos = cubeCoords.y * settings.cubeYstep;
$cube.css({left:xPos,top:yPos});
}
}

//setCubes(1);
setPackageData(0, true);

function setCubes(cubes)
{
$table.find(selectors.slotsNumber).text(cubes);

var completePlans = Math.floor(cubes / 16);

var lastCube = false;
for(var i in plans)
{
var $plan = plans[i];
var $cubes = $plan.find('div');

if(i < completePlans)
$cubes.show();
else
{
if(lastCube)
{
$cubes.hide();
continue;
}
var rest = cubes % 16;
$cubes.each(function(i, cube)
{
var $cube = $(cube);
if(i < rest)
$cube.show();
else
$cube.hide();
});
lastCube = true;
}
}
}

var currentPackage = 0;
$container.find(selectors.arrows).click(selectPackage);
function selectPackage(event)
{
event.preventDefault();

var $arrow = $(this);
if($arrow.hasClass('left'))
{
if(currentPackage > 0)
setPackageData(parseInt(currentPackage) - 1, true);
}
else if($arrow.hasClass('right'))
{
if(currentPackage < packagesData.length - 1)
setPackageData(parseInt(currentPackage) + 1, true);
}
}

var sliderDest;
/*
* name: 'Wood',
maxSlots: 6,
ram: '192 MB',
bukkit: true,
panel: true,
web: true,
price: '$5.95 USD'
*/
function setPackageData(index, snapToMax)
{
currentPackage = index;
var data = packagesData[index];
for(var i in data)
{
var value = data[i];
var $li = $table.find('.' + i);
if($li.size() > 0)
{
var $span = $li.find('span');
if($li.hasClass('bool'))
{
var $img = $span.find('img');
if(value)
$img.attr('src','../images/check.png');
else
$img.attr('src','../images/check.png');
}
else
$span.text(value);
}
}
var $packageName = $container.find(selectors.packageName);
$packageName.text(data.name);

if(snapToMax)
{
sliderDest = data.maxSlots;
moveSlider();
}
}

function moveSlider()
{
var currValue = $slider.slider('value');
var dir = 0;
if(sliderDest > currValue)
dir = 1;
else if(sliderDest < currValue)
dir = -1;

if(dir != 0)
{
setTimeout(function()
{
$slider.slider('value', currValue + dir);
setCubes(currValue + dir);
moveSlider();
},
settings.sliderDelay);
}
}
}
});

})(jQuery);


This is where I can change the values of the products I know that would be awesome if it could work so it could go to seperate destinations.

If any more information is needed just ask, I'll be as helpful as I can just in such a pickle!

Thank you so much!
Art