Thread: Pause bij mouseover / JS script
-
19-01-2010, 22:43 #1Member
- 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:
Maar nu zou ik daar graag de functie in krijgen dat de 'show' pauzeert wanneer ik hover over de bijhorende ul.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(this, options);
});
};
$.innerfade = function(container, options) {
var settings = {
'animationtype': 'fade',
'speed': 'normal',
'type': 'sequence',
'timeout': 2000,
'containerheight': 'auto',
'runningclass': 'innerfade',
'children': null
};
if (options)
$.extend(settings, options);
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 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 (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');
}
}
Heb al zitten googlen, maar nog niets bruikbaars (voor mij) tegen gekomen.
De gene die mij kan helpen krijgt er wel iets voor
thx,
Lorenzono votes
-
-
19-01-2010, 23:17 #2
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
-
19-01-2010, 23:57 #3Member
- Registered
- 06/06/04
- Location
- Bilzen
- Posts
- 8,805
- iTrader
- 18 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 42/128
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.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'); } }no votes
-
20-01-2010, 00:04 #4Member
- 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
-
20-01-2010, 00:54 #5Member
- Registered
- 06/06/04
- Location
- Bilzen
- Posts
- 8,805
- iTrader
- 18 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 42/128
Zeker 100 euro!
no votes
-
20-01-2010, 01:20 #6
Hebt ge dit ergens online staan?
Weeral een slecht zicht precies
no votes
-
20-01-2010, 01:20 #7Member
- Registered
- 21/04/09
- Location
- zwevegem
- Posts
- 367
- iTrader
- 7 (89%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/2
no votes
-
20-01-2010, 01:26 #8Member
- 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 geprutsLast edited by lorenzo; 20-01-2010 at 18:48.
no votes
-
20-01-2010, 15:41 #9Member
- 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
-
20-01-2010, 18:51 #10Member
- Registered
- 21/04/09
- Location
- zwevegem
- Posts
- 367
- iTrader
- 7 (89%)
- Mentioned
- 0 Post(s)
- Reputation
- 0/2
no votes
-
20-01-2010, 19:29 #11Approved 9-lifer
- 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
-
20-01-2010, 19:31 #12Member
- 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


