[resolu] Javascript nourri par feuille de style

Salut à tous !

Voilà, je n'y connais rien en Javascript, je suis honnête.

Sur mon site j'utilise un slider Javascript et je voudrais savoir comment faire récupérer par le script une valeur de taille définie dans mon fichier CSS.

Ce doit être faisable j'imagine, mais pour moi qui n'y connais rien…

Pourriez-vous m'aider à faire ceci svp ?

Le code du script :

(function($){$.fn.craftyslide=function(options){var defaults={"width":1919,"height":611,"pagination":false,"fadetime":4000,"delay":8000};var options=$.extend(defaults,options);return this.each(function(){var $this=$(this);var $slides=$this.find("ul li");$slides.not(':first').hide();function paginate(){$this.append("<ol id='pagination' />");var i=1;$slides.each(function(){$(this).attr("id","slide"+i);$("#pagination").append("<li><a href='#slide"+i+"'>"+i+"</a></li>");i++;});$("#pagination li a:first").addClass("active");}function captions(){$slides.each(function(){$caption=$(this).find("img").attr("title");if($caption!==undefined){$(this).prepend("<p class='caption'>"+$caption+"</p>");}$slides.filter(":first").find(".caption").css("bottom",0);});}function manual(){var $pagination=$("#pagination li a");$pagination.click(function(e){e.preventDefault();var $current=$(this.hash);if($current.is(":hidden")){$slides.fadeOut(options.fadetime);$current.fadeIn(options.fadetime);$pagination.removeClass("active");$(this).addClass("active");$(".caption").css("bottom","-37px");$current.find(".caption").delay(300).animate({bottom:0},300);}});}function auto(){setInterval(function(){$slides.filter(":first-child").fadeOut(options.fadetime).next("li").fadeIn(options.fadetime).end().appendTo("#slideshow ul");$slides.each(function(){if($slides.is(":visible")){$(".caption").css("bottom","-37px");$(this).find(".caption").delay(300).animate({bottom:0},300);}});},options.delay);}$this.width(options.width);$this.find("ul, li img").width(options.width);$this.height(options.height);$this.find("ul, li").height(options.height);if(options.pagination===true){paginate();}else{auto();}captions();manual();});};})(jQuery);

Moi je ne souhaite faire récupérer que les deux valeurs : "width":1919,"height":611,

de manière automatique par le script dans mon fichier css.

Merci à vous pour votre aide.
Modifié par Aessian (13 Jul 2013 - 14:46)

Je te file une piste. Avec un script tu peux recuperer les.propriétés d un élément...
Si ton élément a une id c est document.getElememtById('id_de_lélément').lapropriété
Si ton élément est une class cest getElementsByTagName('laclasse')
Voila pr plus.de precision regarde selection d un noeud en javasvript

Salut Taerg et merci de me répondre.

J'ai effectivement regardé la sélection des éléments en Javascript, avec "getElementsBy".

Je n'ai pas de problème de compréhension logique.

Ce que je ne sais pas faire c'est où ajouter ce script dans le script existant, sachant que je ne maitrise pas ce langage.

Comment je transforme cette ligne ?

{var defaults={"width":1919,"height":611,"pagination":false,"fadetime":4000,"delay":8000}

Pour ajouter le "getElementsBy" pour les dimensions… ?

Merci beaucoup.

Salut ! Ton script c est du jQuery, en gos c est du javascript qui s ecrit autrement...
Mais perso je ne n utilises pas jQuery donc ma reponse est une hypothese.
Essaie quelquechose du genre
var defaults = {"witdh":document.getElement.width, "height":document.getElement.height }
Avec le getElement correct pour recuperer l element dont tu souhaite connaitre la largeur et la hauteur. Si il a une id utilise getElementById('id') c est direct par rapport a getElementsByTagName.Sinon regarde l equivalent jQuery des selecteurs de noeuds
Modifié par taerg (11 Jul 2013 - 20:00)

salut
c'est un plugin jquery, vaut mieux ne pas toucher à la ligne que tu as cité car elle contient les valeurs par défault du plugin. quand tu l'installe,il vérifie si tu as définit de nouvelles valeurs 'options', sinon, il utilise celles par défaut.
pour définir les nouvelles valeurs il faut les passer en paramètre.
quand tu as installé le slider, tu as du mettre quelque chose comme:

$("#slide").craftyslide();

c'est là que tu peux intervenir
soit tu met directement les nouvelles dimensions
exemple:

//300 et 200 c'est juste à titre d'exemple
$("#slide").craftyslide({"width":300,"height":250});

soit tu demande les dimensions de ton slide en utilisant l'équivalent de

getElememtById('id_de_lélément').width

qui est

$("#id_de_lélément").width()

ce qui donne

$("#slide").craftyslide({"width":$("#slide").width(),"height":$("#slide").height()});

sur leur site web il y a la liste de ce que tu peux modifier
Edit: j'arrive pas a mettre le lien
http://www.megaptery.com/2011/07/craftyslide-un-slideshow-jquery-simple-et-leger.html
Modifié par eyos (14 Jul 2013 - 01:01)

ok, je prends note de tout ça.

Merci à tous pour votre temps et vos réponses.
J'apprends toujours autant en venant ici.

A la prochaine question !