Hjälp med JavaScript till hemsida
Hallå i stugorna!
Nu är det så här att jag och min polare håller på med ett skolprojekt inom web och design. Så vi bestämde oss för att försöka att göra en hemsida till våran Battlefield Clan. Clanen är oseriös, men vi tänkte ändå att vi kunde förska skapa en hyfsat seriös hemsida. Dock så är jag och mina kompis ganska nya inom området och detta är våran andra hemsida vi försöker göra.
Så här ser du ut just nu (Länk)
Problemet är att mallen vi har använt egentligen är till för att enbart visa bilder. Alltså så har jag inte lyckats med att lista ut hur man byter ut bilden mot en html fil eller liknade. Vet inte riktigt hur jag ska förklara, men jag vill byta ut bilden, mot en vanlig frame som jag kan fylla med vanligt html kod.
Våran första version av sida ser ut så här så jag vill liksom byta ut bilden mot "informations" delen som finns på den gamla versionen. Men vet somsagt inte var någonstans html koden ska in.
Jag hoppas att ni förstod vad jag menade och det vore jätte snällt om något kunde slå ett getöga i koden nedanför och hjälpa till. Tack på förhand
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sierra 2</title>
<meta charset="UTF-8" />
<meta name="description" content="Sliding Background Image Menuwith jQuery" />
<meta name="keywords" content="jquery, background image, image, menu, navigation, panels" />
<meta name="author" content="Codrops" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/sbimenu.css" />
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=News+Cycle&v1' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet' type='text/css'>
</head>
<body>
<center> <img src="images/header.gif" align="top"> </center>
<div class="container">
<div class="header">
</div>
<div class="content">
<div id="sbi_container" class="sbi_container">
<div class="sbi_panel" data-bg="images/menu.jpg">
<a href="#" class="sbi_label">Start</a>
<div class="sbi_content">
<ul>
<li><a href="file:///C:/Users/David/Desktop/Ny%20mapp/Home/Home.html">Information</a></li>
<li><a href="file:///C:/Users/David/Desktop/Ny%20mapp/Pictures%201/Pictures.html">Kontakt</a></li>
<li><a href="#">Forum</a></li>
</ul>
</div>
</div>
<div class="sbi_panel" data-bg="images/media.jpg">
<a href="#" class="sbi_label">Media</a>
<div class="sbi_content">
<ul>
<li><a href="#">Filmer</a></li>
<li><a href="#">Bilder</a></li>
</ul>
</div>
</div>
<div class="sbi_panel" data-bg="images/soldater.png">
<a href="#" class="sbi_label">Soldater</a>
<div class="sbi_content">
<ul>
<li><a href="#">Vaqum</a></li>
<li><a href="#">Hadock</a></li>
<li><a href="#">Viper</a></li>
<li><a href="#">Elsen</a></li>
<li><a href="#">Dahlstrm</a></li>
<br>
<li><a href="#">Översikt</a></li>
</ul>
</div>
</div>
</div>
</div>
</ul>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min...."></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.bgImageMenu.js"></script>
<script type="text/javascript">
$(function() {
$('#sbi_container').bgImageMenu({
defaultBg : 'images/default.jpg',
border : 1,
type : {
mode : 'seqFade',
speed : 250,
easing : 'jswing',
seqfactor : 100
}
});
});
</script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="js/jquery.js"></script>
(function($) {
jQuery.fn.reverse = Array.prototype.reverse;
var temp = {},
aux = {
// sets the panels bg image & position
setPanelBackground : function( bgimage, $panels, panelWidth ) {
$panels.css({
'background-image' : 'url(' + bgimage + ')'
}).each(function(i) {
$(this).css('background-position', ( - i * panelWidth ) + 'px 0px');
});
},
preloadImages : function( $panels, nmbPanels ) {
var cnt = 0;
$panels.each(function(i) {
var $panel = $(this),
bgimage = $panel.data('bg');
$('<img/>').attr( 'src', bgimage );
});
},
setup : function( $panels, nmbPanels, panelWidth, $panelBg, $el , $content, settings ) {
$content.each(function(i) {
var $el = $(this);
// save each content's height (where the menu items are)
// and hide them by setting the height to 0px
$el.data( 'height', $el.outerHeight(true) ).css( 'height', '0px' ).show();
});
// set the width for the panels;
$panels.css( 'width' , panelWidth + 'px' );
// set the width of the panelBgs
$panelBg.css( 'width' , panelWidth + 'px' );
// set the width, height and background image of the main container
$el.css({
'width' : panelWidth * nmbPanels + 'px',
'height' : settings.height + 'px'
});
// if defaultBg is passed then defaultBg is set as background,
// otherwise we set the image of the default opened panel
if( settings.defaultBg )
aux.setPanelBackground( settings.defaultBg, $panels, panelWidth );
else
aux.setPanelBackground( temp.currentBgImage, $panels, panelWidth );
// apply a margin right of settings.border pixels for all the panels except the last one
$panels.not( $panels.eq( nmbPanels - 1 ) ).css( 'margin-right', settings.border + 'px' );
var spaces = (nmbPanels - 1) * settings.border;
// adjust the sbi_container's width given the margins
$el.css( 'width', $el.width() + spaces + 'px' );
}
},
// animation types
anim = {
def : {
slide : function( $label, nmbPanels, panelWidth, $panelBg, $el , $panels, settings ) {
var $panel = $label.closest('div.sbi_panel'),
panelIdx = $panel.index(),
bgimage = $panel.data('bg'),
dir;
if( temp.current === panelIdx ) {
$el.data( 'anim', false );
return false;
}
temp.current = $panel.index();
anim[settings.type.mode].slideAux( bgimage, dir, nmbPanels, panelWidth, $panelBg, $el , $panels, settings );
},
slideAux : function( bgimage, dir, nmbPanels, panelWidth, $panelBg, $el , $panels, settings ) {
var cnt = 0;
// set the correct left to the $panelBg
// and also the bg image
$panelBg.css({
'left' : '0px',
'background-image' : 'url(' + bgimage + ')'
}).each(function(i) {
$(this).css('background-position', ( - i * panelWidth ) + 'px 0px');
});
$el.data( 'anim', false );
}
},
fade : {
slide : function( $label, nmbPanels, panelWidth, $panelBg, $el , $panels, settings ) {
// same like def mode
anim['def'].slide( $label, nmbPanels, panelWidth, $panelBg, $el , $panels, settings );
},
slideAux : function( bgimage, dir, nmbPanels, panelWidth, $panelBg, $el , $panels, settings ) {
var cnt = 0;
// set the correct left to the $panelBg
// and also the bg image
$panelBg.css({
'left' : '0px',
'background-image' : 'url(' + bgimage + ')'
}).each(function(i) {
$(this).hide()
.css('background-position', ( - i * panelWidth ) + 'px 0px')
.fadeIn(settings.type.speed, settings.type.easing, function() {
++cnt;
if( cnt === nmbPanels ) {
$el.data( 'anim', false );
// set default bg
aux.setPanelBackground( bgimage, $panels, panelWidth );
}
});
});
}
},
seqFade : {
slide : function( $label, nmbPanels, panelWidth, $panelBg, $el , $panels, settings ) {
var $panel = $label.closest('div.sbi_panel'),
panelIdx = $panel.index(),
bgimage = $panel.data('bg'),
dir;
if( temp.current < panelIdx )
dir = 1;
else if( temp.current > panelIdx )
dir = -1;
else {
$el.data( 'anim', false );
return false;
}
temp.current = $panel.index();
anim[settings.type.mode].slideAux( bgimage, dir, nmbPanels, panelWidth, $panelBg, $el , $panels, settings );
},
slideAux : function( bgimage, dir, nmbPanels, panelWidth, $panelBg, $el , $panels, settings ) {
var cnt = 0,
seq_t = settings.type.seqfactor,
$elems = $el.find('div.sbi_panel_img');
if( dir === -1 )
$elems = $elems.reverse();
// set the correct left to the $panelBg
// and also the bg image
$elems.css({
'left' : '0px',
'background-image' : 'url(' + bgimage + ')'
}).each(function(i) {
var $thePanelBg = $(this).hide();
setTimeout(function() {
var factor = - i * panelWidth;
if( dir === -1 )
factor = - (nmbPanels - 1 - i) * panelWidth;
$thePanelBg.css('background-position', factor + 'px 0px')
.fadeIn(settings.type.speed, settings.type.easing, function() {
++cnt;
if( cnt === nmbPanels ) {
$el.data( 'anim', false );
// set default bg
aux.setPanelBackground( bgimage, $panels, panelWidth );
}
});
}, i * seq_t);
});
}
},
horizontalSlide : {
slide : function( $label, nmbPanels, panelWidth, $panelBg, $el , $panels, settings ) {
// same like seqFade mode
anim['seqFade'].slide( $label, nmbPanels, panelWidth, $panelBg, $el , $panels, settings );
},
slideAux : function( bgimage, dir, nmbPanels, panelWidth, $panelBg, $el , $panels, settings ) {
var cnt = 0;
// set the correct left to the $panelBg depending on dir
// and also the bg image
$panelBg.css({
'left' : dir * panelWidth + 'px',
'background-image' : 'url(' + bgimage + ')'
}).each(function(i) {
$(this).css('background-position', ( - i * panelWidth ) + 'px 0px')
.stop()
.animate({
left : '0px'
}, settings.type.speed, settings.type.easing, function() {
++cnt;
if( cnt === nmbPanels ) {
$el.data( 'anim', false );
// set default bg
aux.setPanelBackground( bgimage, $panels, panelWidth );
}
});
});
}
},
seqHorizontalSlide : {
slide : function( $label, nmbPanels, panelWidth, $panelBg, $el , $panels, settings ) {
// same like seqFade mode
anim['seqFade'].slide( $label, nmbPanels, panelWidth, $panelBg, $el , $panels, settings );
},
slideAux : function( bgimage, dir, nmbPanels, panelWidth, $panelBg, $el , $panels, settings ) {
var cnt = 0,
seq_t = settings.type.seqfactor,
$elems = $el.find('div.sbi_panel_img');
if( dir === 1 )
$elems = $elems.reverse();
// set the correct left to the $panelBg depending on dir
// and also the bg image
$elems.css({
'left' : dir * panelWidth + 'px',
'background-image' : 'url(' + bgimage + ')'
}).each(function(i) {
var $thePanelBg = $(this);
setTimeout(function() {
var factor = - i * panelWidth;
if( dir === 1 )
factor = - (nmbPanels - 1 - i) * panelWidth;
$thePanelBg.css('background-position', factor + 'px 0px')
.stop()
.animate({
left : '0px'
}, settings.type.speed, settings.type.easing, function() {
++cnt;
if( cnt === nmbPanels ) {
$el.data( 'anim', false );
// set default bg
aux.setPanelBackground( bgimage, $panels, panelWidth );
}
});
}, i * seq_t);
});
}
},
verticalSlide : {
slide : function( $label, nmbPanels, panelWidth, $panelBg, $el , $panels, settings ) {
// same like seqFade mode
anim['seqFade'].slide( $label, nmbPanels, panelWidth, $panelBg, $el , $panels, settings );
},
slideAux : function( bgimage, dir, nmbPanels, panelWidth, $panelBg, $el , $panels, settings ) {
var cnt = 0;
// set the correct top to the $panelBg depending on dir
// and also the bg image
$panelBg.css({
'top' : dir * settings.height + 'px',
'background-image' : 'url(' + bgimage + ')'
}).each(function(i) {
$(this).css('background-position', ( - i * panelWidth ) + 'px 0px')
.stop()
.animate({
top : '0px'
}, settings.type.speed, settings.type.easing, function() {
++cnt;
if( cnt === nmbPanels ) {
$el.data( 'anim', false );
// set default bg
aux.setPanelBackground( bgimage, $panels, panelWidth );
}
});
});
}
},
seqVerticalSlide : {
slide : function( $label, nmbPanels, panelWidth, $panelBg, $el , $panels, settings ) {
// same like seqFade mode
anim['seqFade'].slide( $label, nmbPanels, panelWidth, $panelBg, $el , $panels, settings );
},
slideAux : function( bgimage, dir, nmbPanels, panelWidth, $panelBg, $el , $panels, settings ) {
var cnt = 0,
seq_t = settings.type.seqfactor,
$elems = $el.find('div.sbi_panel_img');
if( dir === 1 )
$elems = $elems.reverse();
// set the correct top to the $panelBg depending on dir
// and also the bg image
$elems.css({
'top' : dir * settings.height + 'px',
'background-image' : 'url(' + bgimage + ')'
}).each(function(i) {
var $thePanelBg = $(this);
setTimeout(function() {
var factor = - i * panelWidth;
if( dir === 1 )
factor = - (nmbPanels - 1 - i) * panelWidth;
$thePanelBg.css('background-position', factor + 'px 0px')
.stop()
.animate({
top : '0px'
}, settings.type.speed, settings.type.easing, function() {
++cnt;
if( cnt === nmbPanels ) {
$el.data( 'anim', false );
// set default bg
aux.setPanelBackground( bgimage, $panels, panelWidth );
}
});
}, i * seq_t);
});
}
},
verticalSlideAlt : {
slide : function( $label, nmbPanels, panelWidth, $panelBg, $el , $panels, settings ) {
// same like seqFade mode
anim['seqFade'].slide( $label, nmbPanels, panelWidth, $panelBg, $el , $panels, settings );
},
slideAux : function( bgimage, dir, nmbPanels, panelWidth, $panelBg, $el , $panels, settings ) {
var cnt = 0, j;
// set the correct top to the $panelBg
// and also the bg image
$panelBg.css({
'background-image' : 'url(' + bgimage + ')'
}).each(function(i) {
if( i % 2 === 0 )
j = 1;
else
j = -1;
$(this).css('top', j * settings.height + 'px')
.css('background-position', ( - i * panelWidth ) + 'px 0px')
.stop()
.animate({
top : '0px'
}, settings.type.speed, settings.type.easing, function() {
++cnt;
if( cnt === nmbPanels ) {
$el.data( 'anim', false );
// set default bg
aux.setPanelBackground( bgimage, $panels, panelWidth );
}
});
});
}
},
seqVerticalSlideAlt : {
slide : function( $label, nmbPanels, panelWidth, $panelBg, $el , $panels, settings ) {
// same like seqFade mode
anim['seqFade'].slide( $label, nmbPanels, panelWidth, $panelBg, $el , $panels, settings );
},
slideAux : function( bgimage, dir, nmbPanels, panelWidth, $panelBg, $el , $panels, settings ) {
var cnt = 0,
seq_t = settings.type.seqfactor,
$elems = $el.find('div.sbi_panel_img'),
j;
if( dir === 1 )
$elems = $elems.reverse();
// set the correct top to the $panelBg depending on dir
// and also the bg image
$elems.css({
'top' : dir * settings.height + 'px',
'background-image' : 'url(' + bgimage + ')'
}).each(function(i) {
var $thePanelBg = $(this);
setTimeout(function() {
var factor = - i * panelWidth;
if( dir === 1 )
factor = - (nmbPanels - 1 - i) * panelWidth;
if( i % 2 === 0 )
j = 1;
else
j = -1;
$thePanelBg.css('top', j * settings.height + 'px')
.css('background-position', factor + 'px 0px')
.stop()
.animate({
top : '0px'
}, settings.type.speed, settings.type.easing, function() {
++cnt;
if( cnt === nmbPanels ) {
$el.data( 'anim', false );
// set default bg
aux.setPanelBackground( bgimage, $panels, panelWidth );
}
});
}, i * seq_t);
});
}
}
},
methods = {
init : function( options ) {
if( this.length ) {
var settings = {
/*
by default the first item is opened
if defaultBg is passed, then pos will be ignored
*/
pos : 0,
// width of the sbi_container (image width)
width : '900',
// height of the sbi_container (image height)
height : '510',
// border / margin size (distance between panels)
border : 0,
// time that the menu takes to expand / collapse
menuSpeed : 450,
// animation type
type : {
// name : use def | fade | seqFade | horizontalSlide |
// seqHorizontalSlide | verticalSlide | seqVerticalSlide |
// verticalSlideAlt | seqVerticalSlideAlt
mode : 'def',
// speed of the panel animation
speed : 250,
// easing type for the animation
easing : 'jswing',
// this is the interval between each panel's animation
// used for seqFade & seqHorizontalSlide & seqVerticalSlide & seqVerticalSlideAlt
seqfactor : 100
}
};
return this.each(function() {
// if options exist, lets merge them with our default settings
if ( options ) {
$.extend( settings, options );
}
var $el = $(this),
$panels = $el.children('div.sbi_panel'),
nmbPanels = $panels.length,
$labels = $el.find('a.sbi_label'),
$content = $el.find('div.sbi_content'),
animTime,
// width for each panel
panelWidth = Math.floor( settings.width / nmbPanels );
// preload images
aux.preloadImages( $panels, nmbPanels );
// current panel
temp.current = settings.pos;
if( settings.defaultBg )
temp.current = -1;
else {
var $defaultPanel = $panels.eq( settings.pos );
temp.currentBgImage = $defaultPanel.data('bg');
}
// prepend a bg image container for each one of the panels
// this will have the right image as background
$panels.prepend('<div class="sbi_panel_img"></div>');
// have a reference to those containers - $panelBg
var $panelBg = $el.find('div.sbi_panel_img');
// set this and that...
aux.setup( $panels, nmbPanels, panelWidth, $panelBg, $el , $content, settings );
// if defaultBg is not passed we show the menu of the default panel
if( !settings.defaultBg ) {
var $defContent = $defaultPanel.children('div.sbi_content');
$defContent.css( 'height' , $content.data('height') + 'px' );
}
// mouseenter event on the labels:
$labels.bind( 'mouseenter', function(e) {
var $label = $(this),
$content = $label.next();
clearTimeout(animTime);
animTime = setTimeout(function() {
if( $el.data( 'anim' ) ) return false;
$el.data( 'anim', true );
if( temp.current != -1 ) {
$panels.eq( temp.current )
.find('div.sbi_content')
.stop()
.animate({height : '0px'}, settings.menuSpeed);
}
anim[settings.type.mode].slide( $label, nmbPanels, panelWidth, $panelBg, $el , $panels, settings );
$content.stop().animate({height : $content.data('height') + 'px'}, settings.menuSpeed);
}, 100);
})
// mouseleave event on the main container (just if we have set a default bg image for the menu)
// this will reset the menu to the original / default image
$el.bind('mouseleave', function(e) {
if( temp.current != -1 ) {
$panels.eq( temp.current )
.find('div.sbi_content')
.stop()
.animate({height : '0px'}, settings.menuSpeed);
temp.current= -1;
if( settings.defaultBg ) {
clearTimeout(animTime);
if( $el.data( 'anim' ) ) return false;
$el.data( 'anim', true );
anim[settings.type.mode].slideAux( settings.defaultBg, -1, nmbPanels, panelWidth, $panelBg, $el , $panels, settings );
}
}
return false;
});
});
}
}
};
$.fn.bgImageMenu = function(method) {
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.bgImageMenu' );
}
};
})(jQuery);
Intel i7 860 @ 2,8 Ghz - Msi P55-GD65 - Corsair XMS3 DDR3 1600MHz 8 GB - 2 St XFX Radeon HD 5770 1GB - 2 St Crucial C300 64 Gb SSD - Fractal Design XL Black - Corsair TX 650W
Hp ProBook 4530s
iMac 20 tum från 2008
iPhone 3G 16 GB - iPhone 4 32 GB - iPhone 5 32 GB
