Jquery fadeIn loop (supersimpel)
Wilde net even twee blokken met tekst in elkaar laten overlopen. Leek me overkill hiervoor een cycle plugin te gebruiken dus ging even kijken wat voor leuks ik nog niet had toegepast/ontdekt in Jquery. Nu blijkt dat je met delay() functie in combi met fadeIn/out erg leuke dingen kunt doen.
HTML:
<div id="blockHolder">
<div id="block1">Tekst 1</div>
<div id="block2">Tekst 2</div>
</div>
CSS:
#blockHolder {
width: 100px;
height: 200px;
border: 1px solid red;
position: relative;
}
#block1,
#block2 {
background-color: white;
position: absolute;
left: 0;
top: 0;
}
Jquery code:
function fadeLoop(){
$('#block1').fadeIn().delay(3000).fadeOut('slow', fadeLoop).delay(3000);
}
$(document).ready(function() {
fadeLoop();
});
Op zich redelijk basic maar werkt wel leuk zo. Wat de fadeLoop() nu doet is eigenlijk #block1 transparant maken, 3 seconde wachten, weer zichtbaar maken, 3 seconde wachten en weer zichzelf aanroepen voor een herhaling. Dit werkt prima met blokken die over elkaar gepositioneerd staan via CSS en waarbij de voorste transparant/niet-transparant wordt waardoor de achterste zichtbaar wordt.
Jquery alle hyperlinks naar afbeeldingen koppelen aan Fancybox
Een tijdje terug heb ik voor een klant als service een microstukje javascript gemaakt met Jquery om alle hyperlinks in de content te hooken aan Fancybox (of welk ander script dan ook voor de weergave van foto's). Wat hij doet is alle a elementen in de dom (of een selectie daarvan) opzoeken, kijken of ze een href hebben en of die linkt naar een afbeelding en zo ja, Fancybox eraan hangen. Normaal doe je dit gewoon door een class of iets aan de afbeelding te hangen die je gebruikt als selector maar ik wilde dat alle via het CMS ingevoerde links naar afbeeldingen ook meegepakt werden. Om de klant niet te hoeven uitleggen wat hij moest doen om afbeeldingen te linken kwam ik hierop uit.
$(document).ready(function() {
$("a").filter(function(){
if($(this).attr('href').match(/\.(jpe?g|png|gif)/i)) {
$(this).fancybox();
}
});
});
ps. Als je sommige afbeeldingen eruit wilt houden kun je altijd nog iets toevoegen als een not()conditie (waarbij je in dit geval dus aan de hyperlink de class .noFancy meegeeft:
$(document).ready(function() {
$("a:not(.noFancy)").filter(function(){
if($(this).attr('href').match(/\.(jpe?g|png|gif)/i)) {
$(this).fancybox();
}
});
});
DD_roundies ronden hoeken in alle browsers
Nu CSS3 steeds meer als mogelijkheid wordt gezien en de opties voor ronde hoeken door de verschillende browsers ondersteund worden gaat dit interessant worden. Echter niet alle browsers ondersteunen ronde hoeken en de tags om ze toe te passen wijken nog af omdat ze voorafgegaan worden door "browser unieke" tags zoals -moz en -webkit.
Op zich is hier nog omheen te komen maar IE6, IE7 en IE8 doen helemaal nog niet mee. Nu zijn er flinke hoeveelheden oplossingen met o.a. Jquery (altijd een goed verkoopargument) om de ronde hoeken overal werkend te krijgen. Echter heb ik een enorm enthousiast gevoel bij de oplossing van Drew Diller.
Wij waren al bekend met zijn werk rondom één van de leukere PNG fixes voor Internet Explorer, DD belated PNG.
Nu heeft Drew Diller ook een prachtige fix gemaakt voor ronde hoeken welke je, in het kort, op twee manieren kunt toepassen;
Als aanvulling op je CSS3 code voor ronde hoeken in IE
Als enige bron van ronde hoeken in je code
Met de 3e parameter op true geef je opdracht om alle browsers van ronde hoeken te voorzien. DD roundies kijkt zelf welke syntax er nodig is voor je browser.
Download hier DD roundies en lees ook de volledige documentatie over de mogelijkheden (het is namelijk ook mogelijk met DD roundies ook gelijk DD belated te initiëren).