Eindelijk nog eens wat bloggen, dat was al geleden van Juni 2011 (de motivatie om te bloggen was even zoek). Vandaag wil ik het hebben over de Drupal 7 Theme die u nu aan het bekijken bent. (Ondertussen niet meer zichtbaar op deze website, maar op de Drupal 7 & JQuery Demo ) De vorige D7 template zal je binnenkort trouwens kunnen downloaden van drupal.org
HTML5 en Drupal 7
Er mag dan wel een leuk HTML5 logo op de voorpagina staan, dit is echter NOG niet helemaal van toepassing, momenteel is 98% opgebouwd met XHTML, CSS en JQuery, met hier en daar wat HTML5 elementen, je kan het beschouwen als HTML5-ready . Wie naar de bron-code gaat kijken zal merken dat de HTML5 elementen <header><section> enz.. zijn toegevoegd voor Microsoft's internet explorer. Natuurlijk heeft IE problemen met HTML5 waardoor er een extra script nodig is om HTML5 elementen te herkennen.
De Code:
<script type="text/javascript">
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>Het design heeft in elk geval al een HTML5- vibe vind ik zelf, ... wat vind u van het design?
JQuery Autoscroll en Actieve menu items
Mijn doel was een JQuery functie maken die het scrollen zou overnemen doormiddel van buttons of een muisklik. Daarbij moest in het menu de positie van het scherm gereflecteerd worden naar het menu. (active class) Na veel tijd door te brengen op de JQuery api docs is het gelukt om mijn beoogde doel te bereiken. Het was eigenlijk niet de bedoeling dat dit experiment online kwam, maar het resultaat mag gezien worden.
De JQuery code die ik gebruik:
<script type="text/javascript">
/*
check the position of the divs (sections)
1. setup some vars
*/
$(function() {
var p1 = $('#openspace').position().top-200;
var p2 = $('#portfolio').position().top-200;
var p3 = $('#diensten').position().top-200;
var p4 = $('#blog').position().top-200;
var p5 = $('#contact').position().top-200;
/*
Build the scroll active state
*/
$(window).scroll(function() {
var scroll = $(this).scrollTop();
/*home active*/
if (scroll > p1 && scroll < p2) {
$('a[href*=#openspace]').addClass('current');
} else if (scroll < p1 || scroll > p2) {
$('a[href*=#openspace]').removeClass('current');
}
/*portfolio active*/
if (scroll > p2 && scroll < p3) {
$('a[href*=#portfolio]').addClass('current');
} else if (scroll < p2 || scroll > p3) {
$('a[href*=#portfolio]').removeClass('current');
}
/*diensten active*/
if (scroll > p3 && scroll < p4) {
$('a[href*=#diensten]').addClass('current');
} else if (scroll < p3 || scroll > p4) {
$('a[href*=#diensten]').removeClass('current');
}
/*blog active*/
if (scroll > p4 && scroll < p5) {
$('a[href*=#blog]').addClass('current');
} else if (scroll < p4 || scroll > p5) {
$('a[href*=#blog]').removeClass('current');
}
/*Contact active*/
if (scroll > p5) {
$('a[href*=#contact]').addClass('current');
} else if (scroll < p5 || scroll > p5) {
$('a[href*=#contact]').removeClass('current');
}
});
});
/*
Build the animation for click
*/
$(document).ready(function(){
/*Default state = Home*/
$('a[href*=#openspace]').addClass('current');
//click function start
$('a[href*=#]').click(function() {
$("#container").stop()
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-90;
$('html,body')
.animate({scrollTop: targetOffset}, 1000);
//disable the normal url behaviour
return false;
}
}
/*att the end of this function remove the active state*/
$('a[href*=#]').not($(this)).removeClass('current');
});
});
</script>JQuery experts zijn altijd welkom om mij op eventuele fouten of verbeteringen te wijzen!
Enkele resources die ik raadpleegde voor dit project:
JQuery API docs
Learning Jquery
W3 HTML5 school
2 Comments
Ik denk dat je script kan
Door Anthony - @myli... (niet gecontroleerd) op
Ik denk dat je script kan optimaliseren door ervoor te zorgen dat niet elke keer als het scroll event fired je code uitgevoerd zal worden, meer uitleg op http://ejohn.org/blog/learning-from-twitter
Dit Autoscroll JQuery script
Door Dave op
Reactie toevoegen