JQuery en Drupal 7

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

 

Comments

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.