I am a bit of noob to jQuery so I got this jQuery code what I think can be way faster.
Does someone want to help me clean it up? Explaining why you did what would be real nice but not needed.
The working site is online here.
onResize = function() {
$('#spinner').delay(1000).fadeOut(500);
// blog
setTimeout(function() {
$('article .article_image').each(function(){
var articleImageHeight = $(this).find('img').height();
var articleContentHeight = $(this).parent('article').find(".article_content").height();
var articleImageWidth = $(this).find('img').height();
var articleContentWidth = $(this).parent('article').find(".article_content").height();
$(this).height(articleContentHeight);
if (articleImageHeight <= articleContentHeight) {
$(this).find('img').addClass('smallerheight');
$(this).find('img').removeClass('biggerheight');
} else {
$(this).find('img').addClass('biggerheight');
$(this).find('img').removeClass('smallerheight');
}
});
}, 500);
// banner
var bannerPos = $('.banner_image');
var menuHeight = ($(".menu_container").height());
$(window).scroll(function () {
if ($(this).scrollTop() > menuHeight + 15) {
bannerPos.addClass("banner_position");
} else {
bannerPos.removeClass("banner_position");
}
});
var bannerHeight = ($(".banner_image").height() -10 +'px');
$(".banner").css({'height': bannerHeight});
// menu
var value = $('body').width() / (11);
$('#magic-line').css('top',value - 9);
var el, leftPos, newWidth,
mainNav = $("menu.main_menu ul");
var magicLine = $("#magic-line");
magicLine
.width($("menu.main_menu ul li.active a").width())
.css("left", $("menu.main_menu ul li.active a").position().left)
.data("origLeft", magicLine.position().left)
.data("origWidth", magicLine.width());
$("menu.main_menu ul li a").hover(function() {
el = $(this);
leftPos = el.position().left;
newWidth = el.parent().width();
magicLine.stop().animate({
left: leftPos,
width: newWidth
},500);
}, function() {
magicLine.stop().animate({
left: magicLine.data("origLeft"),
width: magicLine.data("origWidth")
},500);
});
}
$(window).load('resize', onResize);
$(window).bind('resize', onResize);
And also the HTML if you don't understand my jQuery code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Made in 030</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="style.css" rel="stylesheet" media="all" type="text/css" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="js/myscript.js"></script>
</head>
<body>
<div id="spinner"></div>
<header>
<div class="menu_container">
<menu class="main_menu">
<ul>
<li class="left" ><a href="#">Home</a></li>
<li class="left" ><a href="#">Over</a></li>
<li class="left"><a href="#">Probeerlijst</a></li>
<li class="logo_container">
<div class="logo">
<img src="img/logo.png" alt=""/>
</div>
</li>
<li class="right"><a href="#">Contact</a></li>
<li class="right"><a href="#">Shop</a></li>
<li class="right active"><a href="#">Blog</a></li>
<li id='magic-line'></li>
</ul>
</menu>
</div>
<div class="banner">
<img src="img/banner.jpg" class="banner_image"/>
<img src="img/skyline.png" class="skyline_image"/>
</div>
<div class="banner_footer">
</div>
</header>
<div id="container">
<div class="sidebar left_sidebar">
<menu class="categorie_menu">
<ul>
<li><a href="#" class="active">All</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Food</a></li>
<li><a href="#">Venues</a></li>
<li><a href="#">Startups</a></li>
<li><a href="#">Evenementen</a></li>
<li><a href="#">Local heroes</a></li>
</ul>
</menu>
</div>
<div id="content">
<div class="full_article">
<h1>Made in 030</h1>
<p>Donec scelerisque commodo orci sit amet commodo. Maecenas malesuada, nibh vitae vulputate tristique, libero purus molestie orci, sed consectetur mi justo quis arcu. Duis ligula purus, pulvinar eget leo id, pellentesque ultricies urna. Maecenas id malesuada tellus. Donec tristique enim nulla, et ultrices velit placerat id. Morbi porta, lacus quis hendrerit volutpat, ipsum diam porttitor leo, sit amet consequat lectus mi quis leo. Nulla et nisi vulputate, ultrices dolor vel, ullamcorper quam. Maecenas suscipit feugiat malesuada. Maecenas id malesuada tellus. Donec tristique enim.</p>
</div>
<article>
<div class="article_image">
<img src="img/post1.jpg"/>
</div>
<div class="article_content">
<h2>Lorum ipsum</h2>
<p>Donec scelerisque commodo orci sit amet commodo. Maecenas malesuada, nibh vitae vulputate tristique, libero purus molestie orci, sed consectetur mi justo quis arcu. Duis ligula purus, pulvinar eget leo id, pellentesque ultricies urna. Maecenas id malesuada tellus. Donec tristique enim nulla, et ultrices velit placerat id. Morbi porta, lacus quis hendrerit volutpat, ipsum diam porttitor leo, sit amet consequat lectus mi quis leo. Nulla et nisi vulputate, ultrices dolor vel, ullamcorper quam. Maecenas suscipit feugiat malesuada. Maecenas id malesuada tellus. Donec tristique enim nulla, et ultrices velit placerat id. Morbi porta, lacus quis hendrerit volutpat, ipsum diam porttitor leo, sit amet consequat lectus mi quis leo. Nulla et nisi vulputate, ultrices dolor vel, ullamcorper quam. Maecenas suscipit feugiat malesuada. </p>
</div>
</article>
<article>
<div class="article_image">
<img src="img/post2.jpg"/>
</div>
<div class="article_content">
<h2>Lorum ipsum</h2>
<p>Donec scelerisque commodo orci sit amet commodo. Maecenas malesuada, nibh vitae vulputate tristique, libero purus molestie orci, sed consectetur mi justo quis arcu. Duis ligula purus, pulvinar eget leo id, pellentesque ultricies urna. Maecenas id malesuada tellus. Donec tristique enim nulla, et ultrices velit placerat id. Morbi porta, lacus quis hendrerit volutpat, ipsum diam porttitor leo, sit amet consequat lectus mi quis leo. Nulla et nisi vulputate, ultrices dolor vel, ullamcorper quam. Maecenas suscipit feugiat malesuada. Maecenas id malesuada tellus. Donec tristique enim nulla, et ultrices velit placerat id. Morbi porta, lacus quis hendrerit volutpat, ipsum diam porttitor leo, sit amet consequat lectus mi quis leo. Nulla et nisi vulputate, ultrices dolor vel, ullamcorper quam. Maecenas suscipit feugiat malesuada. </p>
</div>
</article>
</div>
<div class="sidebar right_sidebar">
<div class="social_media">
<ul>
<li><a href="https://www.facebook.com/madein030" class="facebook" target="blanc"></a></li>
<li><a href="https://www.facebook.com/madein030" class="twitter" target="blanc"></a></li>
<li><a href="https://www.facebook.com/madein030" class="pinterest" target="blanc"></a></li>
<li><a href="https://www.facebook.com/madein030" class="google" target="blanc"></a></li>
<li><a href="https://www.facebook.com/madein030" class="youtube" target="blanc"></a></li>
</ul>
<ul>
<li><a href="https://www.facebook.com/madein030" class="share" target="blanc"></a></li>
</ul>
</div>
</div>
<footer>
<p>© by Simplefly | <a href="http://www.simplefly.nl">Webdesign</a> by Simplefly | Algemene voorwaarden | Contact</p>
</footer>
</div>
</body>
</html>