RWD avec un slider Javascript

bonjour,

globalement, comment peut on raisonner dans le cas suivant:

on fait un design avec 3 'tailles': smartphone, tablette et desktop, tout ça avec un code html global et des media queries pour dispatcher le css, du classique...

maintenant admettons que l'on utilise un slider javascript que pour la version desktop, comment doit on procéder pour que ce slider soit interrompu et soit par exemple remplacé par une image fixe (qui peut être la première du slider) dès qu'on atteint la taille de la tablette et bien sur aussi dans le cas du smartphone?

J'ai commencé à expérimenter, avec un code html qui ne contient qu'un seul <li> dans le <ul>généralement réservé au slider. Si l'écran fait la taille du desktop, je rajoute les autres <li> et je lance le slider, le tout avec javascript, ça marche.
par contre, si je réduis la taille de ma fenêtre, le slider continue à s'exécuter en deçà de la taille Desktop.
Bien sur, si je rafraichis la page à ce moment là, mon slider ne s’exécute pas et je n'ai qu'une ligne de <li> dans mon <ul>.
problème identique si je le regarde avec ma tablette 10" en passant de l'orientation paysage à portrait sans raffraichir.

comment se gère ce genre problématique?
on pourrait enlever les <li> qui ont été rajoutées avec du javascript, mais comment arreter le slider et/ou forcer le rechargement de la page pour bien faire appliquer aussi les changements du css?
Modifié par lionel_css3 (25 Apr 2013 - 00:39)

erreur , ce message est vide
Modifié par lionel_css3 (25 Apr 2013 - 00:39)

Une solution consisterai a créer un fichier html ( php etc ... ) pour chacune des tailles que tu veux gérer avec à l’intérieur de celui ci le contenu à charger dans ton <ul>.

Une fois le fichier crée il te faudra créer une fonction jquery qui détecte la largeur de ta fenêtre et passe ensuite par une fonction .load() qui chargera la page html correspondante à la taille de la fenêtre ainsi que le js associé si il y a lieu.

Dans un deuxième temps il te faudra répéter ces actions dans une fonction .resize() en rajoutant .empty() avant le .load() et voila ton slider est devenu interactif !!
Modifié par tazzkiller (25 Apr 2013 - 01:27)

je vais essayer

juste une question, par exemple avec un slider, contenu dans un <ul>, qui fonctionne avec du javascript..

si on fait un empty() de l'<ul>, que devient le javascript chargé en mémoire il continue à s’exécuter dans le vide?
Modifié par lionel_css3 (25 Apr 2013 - 08:32)

non il ne le sera plus d'ou le fait d'utiliser si tu dois le recharger le .load de cette facon :

$('ul').load( 'page.html', function () { 
//le javascript de ton slider 
}; );