Hej!
Jag är i behov av en slider i Jquery.
Funktionen är väldigt enkel men jag får det inte att fungera tyvärr.
Jag har en enda sida med massa innehåll, och när man klickar på en länk ska man antingen scrollas upp eller ner till just det innehållet man valt. Hela sidan ska alltså scrollas till en speciell div. Adressen till sidan jag gör är www.everydaymedia.se/test2
Såhär ser javascriptet ut:
$(function(){
$('a[href*=#]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 2800);
return false;
}
}
});
});
Och html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name='Language' content='Swedish' />
<meta name='copyright' content='2009 Teddy Sundin' />
<title>Everydaymedia | Wedbesign | Webbutveckling</title>
<meta name='description' content='Everydaymedia är en webbstudio i norrland som erbjuder hemsidor till rimliga priser.'/>
<meta name='keywords' content'Webbyrå, webbdesign, hemsidor, webbutveckling, professionell webbdesign, it, billig hemsida, logo, logotype, flyers, print, grafik, xhtml, css' />
<script type="text/javascript" src="js/jquery.lib.min.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" media="all" href="css/master.css"/>
<!--[if lte IE 6]>
<link href="css/ie/ie6fix.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lte IE 7]>
<link href="css/ie/ie7fix.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body><a name="top"></a>
<div id="page">
<div id="wrapper"><!--wrapper-->
<div id="header"><!--header-->
<div id="logo"><a href="index.php"><img src="images/logo.png" /></a></div>
<div id="welcome"><img src="images/middletext.png" /></div>
<div id="navigation"><!--navigation-->
<ul id="navlist">
<li><a class="currentpage" href="#top">Hem</a></li>
<li><a href="#webwork">Webb</a></li>
<li><a href="#">Print</a></li>
<li class="last"><a href="#">Kontakta mig</a></li>
</ul>
</div><!--/navigation-->
</div><!--/header-->
<div id="spacer"><hr color="#c3c3c3" width="960px"/></div>
<div id="bottomtext">
<div class="box1">
<img src="images/ref.png" />
</div>
<div class="box2"><h1>Webbutveckling och design</h1>
<p>Du får en hemsida som håller i längden och som signalerar det budskap du vill få
ut till dina kunder. Jag försöker sätta mig in i ditt företag och arbetar fram en webbplats baserat
på dina önskemål.</p>
<h1>Grafisk profilering</h1>
<p>Dina kunder ska komma ihåg dig! Och genom att ta fram visuellt tilltalande ideèr och profiler
i form av logotypes, broschyrer och flyers har du ett effektivt sätt att kommunicera med
dina kunder.</p>
</div>
<div class="box3">
<p>Jag har flerårig kunskap inom <b>xhtml</b> och <b>css</b> och gör mina sidor efter den senaste
webbstandarden. <br />Jag har goda kunskaper inom:<br /><br />
<i><img src="images/icons/Photoshop_32.png" />Adobe Photoshop<br />
<img src="images/icons/Illustrator_32.png" />Adobe Illustrator<br />
<img src="images/icons/Dreamweaver_32.png" />Adobe Dreamveawer</i>
</p>
</div>
</div>
<!-- WEB AREA -->
<div id="webwork"><a name="webwork"></a>Här är innehållet för webb
</div>
</div><!--/wrapper-->
</div>
</body>
</html>
Jag är inte alls haj på javascript så om någon vänlig själ kunde hjälpa mig vore det grymt! :)