1. #1

    Registered
    21/04/09
    Location
    zwevegem
    Posts
    367
    iTrader
    7 (89%)
    Mentioned
    0 Post(s)
    Reputation
    0/2

    Pause bij mouseover / JS script

    goeienavond,

    Ik zit met het volgend 'probleem'.

    Ik ben bezig aan een website, maar van JS heb ik totaal geen verstand.
    Implementeren cava, maar zelf coderen niet echt

    Ik heb dus het volgende script runnen:
    PHP Code:
    /* =========================================================

    // jquery.innerfade.js

    // Datum: 2008-02-14
    // Firma: Medienfreunde Hofmann & Baldes GbR
    // Author: Torsten Baldes
    // Mail: t.baldes@medienfreunde.com
    // Web: http://medienfreunde.com

    // based on the work of Matt Oakes http://portfolio.gizone.co.uk/applications/slideshow/
    // and Ralf S. Engelschall http://trainofthoughts.org/

     *
     *  <ul id="news"> 
     *      <li>content 1</li>
     *      <li>content 2</li>
     *      <li>content 3</li>
     *  </ul>
     *  
     *  $('#news').innerfade({ 
     *      animationtype: Type of animation 'fade' or 'slide' (Default: 'fade'), 
     *      speed: Fading-/Sliding-Speed in milliseconds or keywords (slow, normal or fast) (Default: 'normal'), 
     *      timeout: Time between the fades in milliseconds (Default: '2000'), 
     *      type: Type of slideshow: 'sequence', 'random' or 'random_start' (Default: 'sequence'), 
     *         containerheight: Height of the containing element in any css-height-value (Default: 'auto'),
     *      runningclass: CSS-Class which the container get’s applied (Default: 'innerfade'),
     *      children: optional children selector (Default: null)
     *  }); 
     *

    // ========================================================= */


    (function($) {

        $.
    fn.innerfade = function(options) {
            return 
    this.each(function() {   
                $.
    innerfade(thisoptions);
            });
        };

        $.
    innerfade = function(containeroptions) {
            var 
    settings = {
                    
    'animationtype':    'fade',
                
    'speed':            'normal',
                
    'type':             'sequence',
                
    'timeout':          2000,
                
    'containerheight':  'auto',
                
    'runningclass':     'innerfade',
                
    'children':         null
            
    };
            if (
    options)
                $.
    extend(settingsoptions);
            if (
    settings.children === null)
                var 
    elements = $(container).children();
            else
                var 
    elements = $(container).children(settings.children);
            if (
    elements.length 1) {
                $(
    container).css('position''relative').css('height'settings.containerheight).addClass(settings.runningclass);
                for (var 
    0elements.lengthi++) {
                    $(
    elements[i]).css('z-index'String(elements.length-i)).css('position''absolute').hide();
                };
                if (
    settings.type == "sequence") {
                    
    setTimeout(function() {
                        $.
    innerfade.next(elementssettings10);
                    }, 
    settings.timeout);
                    $(
    elements[0]).show();
                } else if (
    settings.type == "random") {
                        var 
    last Math.floor Math.random () * ( elements.length ) );
                    
    setTimeout(function() {
                        do { 
                                                    
    current Math.floor Math.random ( ) * ( elements.length ) );
                                            } while (
    last == current );             
                                            $.
    innerfade.next(elementssettingscurrentlast);
                    }, 
    settings.timeout);
                    $(
    elements[last]).show();
                            } else if ( 
    settings.type == 'random_start' ) {
                                    
    settings.type 'sequence';
                                    var 
    current Math.floor Math.random () * ( elements.length ) );
                                    
    setTimeout(function(){
                                        $.
    innerfade.next(elementssettings, (current 1) %  elements.lengthcurrent);
                                    }, 
    settings.timeout);
                                    $(
    elements[current]).show();
                            }    else {
                                
    alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\'');
                            }
                    }
        };
        
        
        $.
    innerfade.next = function(elementssettingscurrentlast) {
            if (
    settings.animationtype == 'slide') {
                $(
    elements[last]).slideUp(settings.speed);
                $(
    elements[current]).slideDown(settings.speed);
            } else if (
    settings.animationtype == 'fade') {
                $(
    elements[last]).fadeOut(settings.speed);
                $(
    elements[current]).fadeIn(settings.speed, function() {
                                
    removeFilter($(this)[0]);
                            });
            } else
                
    alert('Innerfade-animationtype must either be \'slide\' or \'fade\'');
            if (
    settings.type == "sequence") {
                if ((
    current 1) < elements.length) {
                    
    current current 1;
                    
    last current 1;
                } else {
                    
    current 0;
                    
    last elements.length 1;
                }
            } else if (
    settings.type == "random") {
                
    last current;
                while (
    current == last)
                    
    current Math.floor(Math.random() * elements.length);
            } else
                
    alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\'');
            
    setTimeout((function() {
                $.
    innerfade.next(elementssettingscurrentlast);
            }), 
    settings.timeout);
        };

    })(
    jQuery);

    // **** remove Opacity-Filter in ie ****
    function removeFilter(element) {
        if(
    element.style.removeAttribute){
            
    element.style.removeAttribute('filter');
        }

    Maar nu zou ik daar graag de functie in krijgen dat de 'show' pauzeert wanneer ik hover over de bijhorende ul.

    Heb al zitten googlen, maar nog niets bruikbaars (voor mij) tegen gekomen.

    De gene die mij kan helpen krijgt er wel iets voor

    thx,
    Lorenzo
    no votes  

  2. #2
    adrianhates's Avatar
    Registered
    23/01/06
    Posts
    2,115
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    23/23
    diegene dat dit oplost verdient er ook iets voor..
    Op het eerste zicht is het niet zo makkelijk om dit te doen.

    Maar ik heb geen tijd om het uitvoerig te bekijken ,anders had ik het gedaan
    no votes  

  3. #3
    Zero Grav's Avatar
    Registered
    06/06/04
    Location
    Bilzen
    Posts
    8,805
    iTrader
    18 (100%)
    Mentioned
    0 Post(s)
    Reputation
    42/128
    Code:
    /* ========================================================= 
    
    // jquery.innerfade.js 
    
    // Datum: 2008-02-14 
    // Firma: Medienfreunde Hofmann & Baldes GbR 
    // Author: Torsten Baldes 
    // Mail: t.baldes@medienfreunde.com 
    // Web: http://medienfreunde.com 
    
    // based on the work of Matt Oakes http://portfolio.gizone.co.uk/applications/slideshow/ 
    // and Ralf S. Engelschall http://trainofthoughts.org/ 
    
     * 
     *  <ul id="news">  
     *      <li>content 1</li> 
     *      <li>content 2</li> 
     *      <li>content 3</li> 
     *  </ul> 
     *   
     *  $('#news').innerfade({  
     *      animationtype: Type of animation 'fade' or 'slide' (Default: 'fade'),  
     *      speed: Fading-/Sliding-Speed in milliseconds or keywords (slow, normal or fast) (Default: 'normal'),  
     *      timeout: Time between the fades in milliseconds (Default: '2000'),  
     *      type: Type of slideshow: 'sequence', 'random' or 'random_start' (Default: 'sequence'),  
     *         containerheight: Height of the containing element in any css-height-value (Default: 'auto'), 
     *      runningclass: CSS-Class which the container get’s applied (Default: 'innerfade'), 
     *      children: optional children selector (Default: null) 
     *  });  
     * 
    
    // ========================================================= */ 
    
    
    (function($) { 
    
        $.fn.innerfade = function(options) { 
            return this.each(function() {    
                $.innerfade(this, options); 
            }); 
        }; 
    
        $.innerfade = function(container, options) { 
            var settings = { 
                'animationtype':    'fade', 
                'speed':            'normal', 
                'type':             'sequence', 
                'timeout':          2000, 
                'containerheight':  'auto', 
                'runningclass':     'innerfade', 
                'children':         null 
            };
            
            paused = false;
            
            if (options) 
                $.extend(settings, options); 
            if (settings.children === null) 
                var elements = $(container).children(); 
            else 
                var elements = $(container).children(settings.children); 
            
            $(container).bind('mouseenter', function() { paused = true; })
            			.bind('mouseleave', function() { paused = false; });    
            
            if (elements.length > 1) { 
                $(container).css('position', 'relative').css('height', settings.containerheight).addClass(settings.runningclass); 
                for (var i = 0; i < elements.length; i++) { 
                    $(elements[i]).css('z-index', String(elements.length-i)).css('position', 'absolute').hide();
                }; 
                if (settings.type == "sequence") { 
                    setTimeout(function() { 
                    	$.innerfade.next(elements, settings, 1, 0); 
                    }, settings.timeout); 
                    $(elements[0]).show(); 
                } else if (settings.type == "random") { 
                        var last = Math.floor ( Math.random () * ( elements.length ) ); 
                    setTimeout(function() { 
                        do {  
                                                    current = Math.floor ( Math.random ( ) * ( elements.length ) ); 
                                            } while (last == current );     
                                            $.innerfade.next(elements, settings, current, last); 
                    }, settings.timeout); 
                    $(elements[last]).show(); 
                            } else if ( settings.type == 'random_start' ) { 
                                    settings.type = 'sequence'; 
                                    var current = Math.floor ( Math.random () * ( elements.length ) ); 
                                    setTimeout(function(){
                                    	$.innerfade.next(elements, settings, (current + 1) %  elements.length, current); 
                                    }, settings.timeout); 
                                    $(elements[current]).show(); 
                            }    else { 
                                alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\''); 
                            } 
                    } 
        }; 
         
         
    $.innerfade.next = function(elements, settings, current, last) {
    	    if(paused === false) {
    	        if (settings.animationtype == 'slide') { 
    	            $(elements[last]).slideUp(settings.speed); 
    	            $(elements[current]).slideDown(settings.speed); 
    	        } else if (settings.animationtype == 'fade') { 
    	            $(elements[last]).fadeOut(settings.speed); 
    	            $(elements[current]).fadeIn(settings.speed, function() { 
    	                            removeFilter($(this)[0]); 
    	                        }); 
    	        } else 
    	            alert('Innerfade-animationtype must either be \'slide\' or \'fade\''); 
    	    }        
            
            if (settings.type == "sequence") { 
                if ((current + 1) < elements.length) { 
                    current = current + 1; 
                    last = current - 1; 
                } else { 
                    current = 0; 
                    last = elements.length - 1; 
                } 
            } else if (settings.type == "random") { 
                last = current; 
                while (current == last) 
                    current = Math.floor(Math.random() * elements.length); 
            } else 
                alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\''); 
            setTimeout((function() { 
                $.innerfade.next(elements, settings, current, last); 
            }), settings.timeout);
    
       }; 
    })(jQuery); 
    
    // **** remove Opacity-Filter in ie **** 
    function removeFilter(element) { 
        if(element.style.removeAttribute){ 
            element.style.removeAttribute('filter'); 
        } 
    }
    Echt een quick and dirty oplossing. Gewoon een boolean toegevoegd die op true gezet wordt bij mouseenter en terug false bij mouseleave. Bij het aanroepen van de animatie (blijft em dus ook doen bij het pauzeren nu!) kijkt em gewoon of paused false of true is. Als em true is dan slaat em de animatie gewoon over en voert em de timer opnieuw uit.
    no votes  

  4. #4

    Registered
    21/04/09
    Location
    zwevegem
    Posts
    367
    iTrader
    7 (89%)
    Mentioned
    0 Post(s)
    Reputation
    0/2
    thx thx zero grav!

    Hoeveel moet ge voor uw moeite?
    Last edited by lorenzo; 20-01-2010 at 00:13.
    no votes  

  5. #5
    Zero Grav's Avatar
    Registered
    06/06/04
    Location
    Bilzen
    Posts
    8,805
    iTrader
    18 (100%)
    Mentioned
    0 Post(s)
    Reputation
    42/128
    Zeker 100 euro!
    no votes  

  6. #6
    adrianhates's Avatar
    Registered
    23/01/06
    Posts
    2,115
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    23/23
    Hebt ge dit ergens online staan?
    Weeral een slecht zicht precies
    no votes  

  7. #7

    Registered
    21/04/09
    Location
    zwevegem
    Posts
    367
    iTrader
    7 (89%)
    Mentioned
    0 Post(s)
    Reputation
    0/2
    Quote Originally Posted by Zero Grav View Post
    This quote is hidden because you are ignoring this member. Show
    Zeker 100 euro!
    damn, kheb nog maar just €99 staan
    Als ik mijnen volgenden euro verdiend hebt laat ik het u weten!

    thx
    no votes  

  8. #8

    Registered
    21/04/09
    Location
    zwevegem
    Posts
    367
    iTrader
    7 (89%)
    Mentioned
    0 Post(s)
    Reputation
    0/2
    staat online op laptop - desktop - verkoop - herstellingen - camerabeveiliging - server.
    ja het is een (gekochte) template, want ik ben nooit content met mijn eigen gepruts
    Last edited by lorenzo; 20-01-2010 at 18:48.
    no votes  

  9. #9
    Zero Grav's Avatar
    Registered
    06/06/04
    Location
    Bilzen
    Posts
    8,805
    iTrader
    18 (100%)
    Mentioned
    0 Post(s)
    Reputation
    42/128
    En dan hebt ge een kans op goeie SEO en maakt ge er 'dit' van. ^^
    no votes  

  10. #10

    Registered
    21/04/09
    Location
    zwevegem
    Posts
    367
    iTrader
    7 (89%)
    Mentioned
    0 Post(s)
    Reputation
    0/2
    Quote Originally Posted by Zero Grav View Post
    This quote is hidden because you are ignoring this member. Show
    En dan hebt ge een kans op goeie SEO en maakt ge er 'dit' van. ^^
    dit? waar
    no votes  

  11. #11
    janlaureys9's Avatar
    Registered
    30/11/03
    Location
    Antwerpen
    Posts
    1,647
    iTrader
    0
    Mentioned
    0 Post(s)
    Reputation
    0/9
    Ik denk dat hij wilt zeggen dat je met zo'n domeinnaam echt nog veel meer kan doen.
    En dan maakt het ook helemaal niet meer uit dat die ene nou "elmer" heet...
    ALT + 84; ALT + 104; ALT + 101; ALT + 32; ALT + 71; ALT + 97; ALT + 109; ALT + 101
    no votes  

  12. #12
    Zero Grav's Avatar
    Registered
    06/06/04
    Location
    Bilzen
    Posts
    8,805
    iTrader
    18 (100%)
    Mentioned
    0 Post(s)
    Reputation
    42/128
    Neen, 't was omdat em een nietszeggende link had gezet.
    no votes  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in