Webprofis is een Forum waarin je vragen kunt stellen die webgerelateerd zijn. Heb je vragen over of problemen met je Webpagina, HTML, CSS, Javascript, PHP of andere client of serverside scriptingtalen? Stel ze dan gerust op dit forum. Op dit forum zijn een aantal vrijwilligers actief die u graag met uw vragen willen helpen en u waar mogelijk een passend antwoord aanbieden. Hebt u zelf veel ervaring en kennis met betrekking tot het bovenstaande? U bent van harte welkom om uw kennis met anderen te delen!

We hopen dat eenieder op dit Forum een leerzame ervaring mag opdoen.

Team Webprofis

Current

Ik wordt er gek van, ik zie iets over het hoofd en kan het niet vinden grrr...

Zodra je op de site het menu gebruikt en je klikt bijvoorbeeld (About) en hij scrollt naar dit gedeelte dan wordt about in menu active, ga je naar de rest dan wertk het ook.
Maar ga je bijvoorbeeld naar (Contact) en vanuit daar naar (Service) dan gaat het mis.

Wat zie ik over het hoofd ?

Website www.rvdesigns.nl
If it's not fun, you're not doing it right!

Reacties

  • bewerkt do 12 mrt 2015
    PMPosts: 879
    in je css:

    .container-fluid.big {
    border: medium none;
    font-weight: 400;
    padding-top: 350px;
    min-height: 700px;
    margin-top: -65px; /* DIT IS DE BOOSDOENER */
    }
  • PMPosts: 732
    Helaas, dat dacht ik eerst ook maar die heeft totaal geen invloed.

    Als je van boven per selectie naar onder gaat werkt het, maar ga je van onder per selectie naar boven dan gaat het mis.
    If it's not fun, you're not doing it right!
  • bewerkt vr 13 mrt 2015
    PMPosts: 879
    Ik heb dit getest met FF browser en dit zie ik als ik terugnavigeer in het menu:

    [edit]
    video verwijderd omdat topic is opgelost
  • PMPosts: 732
    Ik heb het zover als opgelost met beetje script.
    Hij geeft nu de juiste sectie (link active) aan, maar je wordt gek van het geflikker als je bijvoorbeeld vanuit home naar contact gaat.

    Aangezien ik een held ben in javascript, is mijn volgende vraag.

    If het mogelijk om er een soort van pauze in te zetten, bijvoorbeeld de animatie duurt 800 en dat hij dan een pauze en dan pas de active link weergeeft ?

    Denk in het stukje // Toggle class


    $('.navbar-nav a').click(function(event) {
    // Mobile close navbar
    var toggle = $(".navbar-toggle").is(":visible");
    if (toggle) {
    $(".navbar-collapse").collapse('hide');
    }
    // Toggle class
    $(".active").removeClass("active");
    $(this).closest('li').addClass("active");
    var theClass = $(this).attr("class");
    $('.'+theClass).parent('li').addClass('active');
    // Animate
    $('html, body').stop().animate({
    scrollTop: $( $(this).attr('href') ).offset().top - 0
    }, 800);
    return false;
    });
    If it's not fun, you're not doing it right!
  • bewerkt do 12 mrt 2015
    PMPosts: 879
    pauze kun je doen met delay()
    Dan zou dit moeten werken; 2 sec pauze na stoppen animatie
    regel 15 wordt dan:

    }, 800).delay(2000); /* 2 sec */

    Maar ik snap het niet goed; ik heb het in de console met FF getest en met die margin-top verwijderen gaat het goed...(op filmpje te zien)
  • PMPosts: 732
    Ik heb hem ook op diverse manieren getest margin 0 padding **px en steeds was hij onverschillend.

    Dat met die delay na animate geeft alleen een vertraging in de animatie scroll.
    Zoek meer iets van zodra men klikt wordt de active verwijdert, en dan voor dat er weer de active wordt geplaatst daar moet een delay (pauze) in zitten en dat krijg ik niet spits.
    If it's not fun, you're not doing it right!
  • PMPosts: 732
    Zo, volgens mij is probleem opgelost.
    Nu tijd voor een pint ;)
    nuet
    If it's not fun, you're not doing it right!
  • PMPosts: 879
    Hoe heb je het nu opgelost Rene? Aanpassing nog gedaan in het javascript?
  • PMPosts: 732
    Al sla je mij dood :)

    Zoals ik al aangaf is Javascripting niet mijn sterkste punt, maar denk dat er een conflict was tussen bootstrap en het stukje script.

    Wat heb ik verandert:
    In de body tag heb ik de data-offset="0" verwijdert.
    En het stukje script verandert:

    Voorheen:


    $('.navbar-nav a').click(function(event) {
    // Mobile close navbar
    var toggle = $(".navbar-toggle").is(":visible");
    if (toggle) {
    $(".navbar-collapse").collapse('hide');
    }
    // Toggle class
    $(".active").removeClass("active");
    $(this).closest('li').addClass("active");
    var theClass = $(this).attr("class");
    $('.'+theClass).parent('li').addClass('active');
    // Animate
    $('html, body').stop().animate({
    scrollTop: $( $(this).attr('href') ).offset().top - 0
    }, 800);
    return false;
    });

    Nieuw:


    $(function() {
    $('.navbar-nav a').bind('click', function(event) {
    // Mobile close navbar
    var toggle = $(".navbar-toggle").is(":visible");
    if (toggle) {
    $(".navbar-collapse").collapse('hide');
    }
    // Togel class
    var $anchor = $(this);
    $('html, body').stop().animate({
    scrollTop: $($anchor.attr('href')).offset().top
    }, 800);
    event.preventDefault();
    });
    });

    Wat is het verschil nu ?
    If it's not fun, you're not doing it right!
Login of Registreer om te reageren.