Archief - Responsive laden van scripts / script uitschalen naar gelang window width

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
b

bramds

Legacy Member
Hey

Ik zit met een vraagje waar ik blijkbaar zelf niet het antwoord op kan vinden.
Ik heb een ontwerp van website die werkt met supersized als background slideshow. Nu zou deze slideshow niet mogen werken onder de 900px window width voor responsive redenen. Bij het herschalen zou hij dus moeten checken welke grote het window heeft en dan eventueel de supersized toepassen of niet. Ook zou een fancybox boven de 900px moeten worden gekoppeld aan een a element en onder de 900px niet.

Als ik na het herschalen de page refresh lukt het wel?

Ik heb al geruime tijd zitten zoeken op window.resize etc. maar dit lijkt niet te werken?

Iemand die me een handje kan helpen?

demo op: demo ( hier is ook nog wat ander frontend, design werk aan )
S

Scissor

Legacy Member
Probeer eens stap voor stap te werken.

1. Je wil weten als je website opent wat je schermgrootte is. Op deze manier steek je die even in een variabele en alert je'm.

var width = $( window ).width();
alert(width);

2. Controle implementeren met een if-statement en naargelang het resultaat je slideshow aanpassen
3. bij width > 899 gebruik je .wrap() om je link rond je slider te plaatsen

De reden waarom je huidige oplossing niet werkt is omdat je variabele met je breedte (width) niet geupdate wordt of er gebeurd in principe niks meer mee. Koppel aan je resize een functie die de controle opnieuw uitvoert hoe breed je scherm is. Voor je probleem van boven de 900, doe je gewoon .wrap().
b

bramds

Legacy Member
Scissor:

Je bent mee een beetje kwijt met je uitleg.
Wat ik voorlopig heb staan is : ( maar dit gaat blijkbaar ook niet de juist kant op )

terug te vinden op de splash page : splash

Code: 
var windowSize = $(window).width();
var flip = 899;

if(windowSize > flip){
	
	jQuery(function($){
												
			var slides=[];
			slides.push({image : 'images/foto2.jpg', title : "", thumb : '', url : ''})
			slides.push({image : 'images/foto1.jpg', title : "", thumb : '', url : ''})
			slides.push({image : 'images/foto3.jpg', title : "", thumb : '', url : ''})
											
			$.supersized({
											
				slide_interval      :   7000, // Length between transitions
											
				transition          :   1, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
				transition_speed	:	900, // Speed of transition
											// Components							
				slide_links			:	false,	// Individual links for each slide (Options: false, 'num', 'name', 'blank')
				slides              :   slides
											
			});
	});
	
}



$(window).resize(function() {
  width = $(window).width();
  
	if(width > flip){
	
		jQuery(function($){
													
				var slides=[];
				slides.push({image : 'images/foto2.jpg', title : "", thumb : '', url : ''})
				slides.push({image : 'images/foto1.jpg', title : "", thumb : '', url : ''})
				slides.push({image : 'images/foto3.jpg', title : "", thumb : '', url : ''})
												
				$.supersized({
												
					slide_interval      :   7000, // Length between transitions
												
					transition          :   1, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
					transition_speed	:	900, // Speed of transition
												// Components							
					slide_links			:	false,	// Individual links for each slide (Options: false, 'num', 'name', 'blank')
					slides              :   slides
												
				});
		});
	
	}

  
});
S

Scissor

Legacy Member
Simpel gezegd doe jij het volgende:

1. De website wordt geladen en je voert een controle uit : groter dan 900, steek de slider er in.

Na resize doe je dan:

2. Als hij groter is dan 900, voer de slider nog's opnieuw uit

En daar stop je. In principe zou je als je bij je width > flip, niks meer moeten doen. De slideshow zit er nl. al in.
Je zou er nog een else statement in moeten steken: Stel dat hij kleiner is dan 900, wat moet ik dan doen. Want op dit ogenblik doe je niks als hij kleiner is dan 900, je laat enkele de slider die er in zit van bij je eerste pagina load gewoon verderdraaien.

Wil je't nog wat beter maken, dan zorg je er voor dat je resize event enkel kan getriggered worden als je niet mobiel werkt. Je voert dan eerst een check uit, is de scherm grootte groter dan 480. Ja? > Ok, je ziet niet op een smartphone en je kan resizen. Neen? geen probleem, moet je je niks aantrekken van mogelijke resizes (bij vb. andere oriëntering van je smartphone).
b

bramds

Legacy Member
De gedachtengang volgend van Scissor ben ik er uit geraakt denk ik.
Ik ben overgestapt naar backstretch omdat dit kleiner is van kb en omdat dit een een destroy heeft. De mobile detect die Profound voorstelde kende ik ook, maar ik wou de slideshow wel nog kunnen tonen op landscape tablet. Dit was dus geen optie. Onderstaande code lijkt te lukken :

Code: 
	$( document ).ready(function() {
			var windowSize = $(window).width();
			var flip = 899;
			
			if(windowSize > flip){
			
					$.backstretch([
						"images/foto1.jpg",
						"images/foto2.jpg",
						"images/foto3.jpg"    
					], {duration: 3000, fade: 750});
					
					$('.fotos a').addClass('lightbox');
					$('.lightbox').fancybox();
			
			}else{
				$.backstretch("destroy");
				$('.lightbox').removeClass('lightbox');
			}
			
			$(window).resize(function(){	
			
			var newSize = $(window).width();
			
			if(newSize < flip){
				
				$.backstretch("destroy");
				$('.lightbox').removeClass('lightbox');
				
			}else{
					$.backstretch([
						"images/foto1.jpg",
						"images/foto2.jpg",
						"images/foto3.jpg"    
					], {duration: 3000, fade: 750});
					$('.fotos a').addClass('lightbox');
					$('.lightbox').fancybox();
					
			}
			
			});
			
	$('.lightbox').fancybox();
	
	});

Werking te zien op nieuwe demo : Preview
W

W0utR

Legacy Member
Waarom zou je er eigenlijk een resize event insteken?
Een gewone gebruiker gaat echt zijn browser window niet liggen resizen hoor.

Beter wou zijn:
- Gebruiker laad website -> check screenresize en als die groter is dan 899 initialiseer je de slider, if not, doe je niks

Een resize event is gewoon onnodig en heeft totaal geen toegevoegde waarde.
b

bramds

Legacy Member
@wouter : dat leek me het handigste om het tilten van landscape naar portrait op een tablet aan te pakken. Slider wordt wel getoond in landscape, maar niet in portrait.
W

W0utR

Legacy Member
Ah ok, goed punt!

In je resize event zou ik wel wat opletten, want wat er nu gaat gebeuren is dat je elke keer ofwel je $.backstretch destroyed, of er een nieuwe aanmaakt, misschien dat je daar beter een if/else insteekt om te kijken of er effectief wel iets veranderd is.

Want als de width van 900 naar 920 gaat moet er niks uitgevoerd worden, dus enkel bij de overgang van 899 naar 900, of van 900 naar 899.
F

Fransz

Legacy Member
Via css gaat dat ook, toch? Ik heb een aparte ipad.css en iphone.css waarmee ik bepaalde divs verberg voor kleine schermen
W

W0utR

Legacy Member
@Frans, maar in dit geval word de slideshow nog altijd geladen, zeker als er redelijk wat images zijn wil je dit liever niet doen als het niet nodig is.
b

bramds

Legacy Member
@Wouter Zou je eens kunnen weergeven hoe jij het zou doen? (in code) Jquery is niet echt mijn sterkste punt als dit nog kan geoptimaliseerd worden, graag! :)
S

Scissor

Legacy Member
Hier even snel in een Fiddle gegoten: http://jsfiddle.net/Et6dW/2/

kort samengevat:
1. je maakt een variabele aan die gaat bijhouden of je al dan niet een slider al in je site hebt
2. je neemt je width bij de start en afhankelijk hoe groot die is ga je je slider er in steken. Steek je de slider er in dan zet je hasSlider op true

bij een resize doe je het volgende:
1. je haalt de nieuwe width op in een andere variabele (newWidth)
2. je controleert of je al een slider hebt

Heb je al een slider ?
=> controleer je of de nieuwe width kleiner is dan 480 (mobiel). Als dat zo is dan verwijder je de slider en zet je hasSlider op false
=> is de nieuwe width nog steeds groter dan 480 dan mag de huidige slider er gewoon lekker in blijven en doe je niks

Heb je nog geen slider? (maw is hasSlider = false of leeg);
=> controleer of je nieuwe grootte groter is dan 480 (stel dat je een mobiel in landscape houdt vb.) dan zet je de slider er in en zet je hasSlider op true
=> als de nieuwe grootte nog steeds kleiner is dan 480, zit je nog steeds mobiel en hoeft er geen slider in (maw, je doet niks)

Hoop dat 't beetje duidelijk is
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan