Utilisation d'un script javascript pour remplacer les frames

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par hanlin, 27 Août 2007.

  1. hanlin
    hanlin WRInaute occasionnel
    Inscrit:
    23 Mars 2006
    Messages:
    263
    J'aime reçus:
    0
    Salut,
    Je desire utiliser un code javascript en l associant avec des css mais je n'y connais pas grand chose. Il y a une explication pour l'utilisation du script sur la page suivante : http://www.jools.net/projects/javascript/splitpanes/
    Je pense que pour un habitue c'est une histoire de 5 minutes a tout casse mais kan on y comprend pas grand chose ce n'est pas pareil.
    Je serait vraiment reonnaissant si quelqu'un pouvait m aider m'en sortir
    Bien a vous
    Hanlin
     
  2. hanlin
    hanlin WRInaute occasionnel
    Inscrit:
    23 Mars 2006
    Messages:
    263
    J'aime reçus:
    0
    apparemment le site en question a quelques problemes pour se charger correctement, voici donc les codes qi sont senser servir a cela :
    1- le javascript :
    Code:
    /*
    Class: SplitPane
        Separates two divs with a draggable divider that you can use to resize the divs, kind of like
        a frame but without using frames! The two divs should be siblings, that is they should both
        have the same parent. You can have an arbitrary number of such siblings separated using different
        instances of this class, i.e. you can have any number of columns separated by a draggable divider
        that alows you to resize them at will.
        
        You can ask to be notified when the following events occur
        
        - A drag starts.
        - A drag occurs.
        - A drag ends.
        
        This allows you to perform any housekeepng not already performed for you.
        
        You can disable the resizing.
        
        You can ask an instance to serialize itself as an HTTP POST argument list, this is useful in
        combination with onEnd hooking to save the current div sizes on the server.
        
    NOTE:
        In IE all parent divs must have a height other than 'auto'.
        div1 and div2 should probably have overflow=hidden set.
    */
    var SplitPane = Class.create();
    
    /*
    property: SplitPane.cache
        Holds all instances of SplitPane. Used to delay intialization until Window.onLoad().
    */
    SplitPane.cache = new Array();
    SplitPane.cacheIndex = 0;
    SplitPane.handleWidth = 10; // Width of the handle
    
    SplitPane.prototype = {
        /*
        Constructor: intialize
        
        parameters:
            div1_id - a div, or the ID of a div notionally on the 'left' of the divider.
            div1_width - the initial width of div1 as a percentage of its parent's width
            div2_id - a div, or the ID of a div notionally on the 'right' of the divider.
            div2_left - the coordinate of the left edge of div2 relative to the parent div as a percentage.
            div2_width - the initial width of div2 as a percentage of its parent's width.
            options - an associative array of optional arguments which include
            
        options:
            onStart - a function to be called when a drag of the divider starts.
            onDrag - a function to be called when a drag occurs.
            onEnd - a function to call when a drag ends.
            active - if true then resizing can occur. If false then the two divs are set to
                the specified widths and that is that. Defaults to false.
        */
        initialize: function("lhs", 30, "rhs", 30, 30, .options) {
            this.options = { 
                onStart:    Prototype.emptyFunction,
                onDrag:     Prototype.emptyFunction,
                onEnd:      Prototype.emptyFunction,
                active:     true
            }
            
            Object.extend(this.options, options || {});
            
            this.div1 = $("lhs");
            this.div2 = $("rhs");
            this.container = this.parent;  // This had better be the same for both divs
            this.div1_width = 30;   // as a percentage
            this.div2_left = 30;     // as a percentage
            this.div2_width = 30;   // as a percentage
            
            SplitPane.cache[SplitPane.cacheIndex] = this;
            SplitPane.cacheIndex = SplitPane.cacheIndex+1;
        },
    
        /*
            function: set
                create a divider. If its marked as 'active' then wire it up for events.
        */
        set: function() {
            Element.makePositioned(this.container); // Fix IE
            
            // Change widths to percents so that window resizing works
            this.div1.style.width = this.div1_width + "%";
            this.div2.style.width = this.div2_width + "%";
            this.div2.style.left  = this.div2_left + "%";
            
            // Create a divider and make it a child of container
            this.divider = document.createElement("DIV");
            this.container.appendChild(this.divider);
            this.divider.className="splitpane-divider";
            this.divider.style.position="absolute";
            this.divider.style.width=SplitPane.handleWidth + "px";
            this.divider.style.top="0px";
            this.divider.style.zIndex=1000;
    
            this.containerWidth = this.getWidth(this.container);
            
            this.setDividerX();
            this.setDividerHeight();
    
            if (this.options.active) {
                this.eventMouseDown = this.startDrag.bindAsEventListener(this);
                this.eventMouseUp   = this.endDrag.bindAsEventListener(this);
                this.eventChangeCursor = this.cursor.bindAsEventListener(this);
                this.eventMouseMove = this.update.bindAsEventListener(this);
        
                Event.observe(this.divider, "mousedown", this.eventMouseDown);
                Event.observe(document, "mouseup", this.eventMouseUp);
                Event.observe(this.divider, "mousemove", this.eventChangeCursor);
                Event.observe(document, "mousemove", this.eventMouseMove);
            }
        },
        
        /*
            function: serialize
                serialize the splitpane in a form suitable to be used in an HTTP request.
            
            serialized values:
                div1 - the id of div1
                div1_left - the left edge of div1 expressed as a percentage of the parent width
                div1_width - the width of div1 expressed as a percentage of the parent width
                div2 - the id of div2
                div1_left - the left edge of div2 expressed as a percentage of the parent width
                div1_width - the width of div2 expressed as a percentage of the parent width
        */
        serialize: function() {
            return "div1=" + this.div1.id
            + "&div1_left=" + this.getXPercent(this.div1)
            + "&div1_width=" + this.getWidthPercent(this.div1)
            + "&div2=" + this.div2.id
            + "&div2_left=" + this.getXPercent(this.div2)
            + "&div2_width=" + this.getWidthPercent(this.div2);
        },
        
        /*
            function: dispose
                unhook from events
        */
        dispose: function() {
            Event.stopObserving(this.divider, "mousedown", this.eventMouseDown);
            Event.stopObserving(document, "mouseup", this.eventMouseUp);
            Event.stopObserving(this.divider, "mousemove", this.eventChangeCursor);
            Event.stopObserving(document, "mousemove", this.eventMouseMove);
        },
        
        cursor: function(event) {
            this.divider.style.cursor = "e-resize";     
        },
    
        startDrag: function(event) {
            if(Event.isLeftClick(event)) {
                this.active = true;
                var offsets = Position.cumulativeOffset(this.divider); 
                
                this.start_pointer  = [Event.pointerX(event), Event.pointerY(event)];
                this.inset = this.start_pointer[0] - offsets[0];
                this.containerWidth = this.getWidth(this.container);
                this.start_div1_width = this.getWidth(this.div1);
                this.start_div2_left = this.getX(this.div2);
                this.start_div2_width = this.getWidth(this.div2);
                this.start_divider_x = this.getX(this.divider);
                
                Event.stop(event);
                
                this.options.onStart(this, event);
            }
        },
    
        endDrag: function(event) {
            if (this.active) {
                this.active = false;
                Event.stop(event);
                this.setDividerX();
                this.setDividerHeight();
                this.options.onEnd(this, event);
            }
        },
    
        update: function(event) {
            if (this.active) {
                var pointer  = [Event.pointerX(event), Event.pointerY(event)];
                var delta = pointer[0] - this.start_pointer[0];
                var delta_percent = delta * 100.0 / this.containerWidth;
                
                // Calculate new div1 width
                var new_div1_width = this.start_div1_width + delta;
                
                // Limit width of div1
                if (new_div1_width < 0.0) {
                    new_div1_width = 0.0;
                    delta = -this.start_div1_width;
                }
                            
                // Calculate new div2 width (in %)
                var new_div2_width = this.start_div2_width - delta;
                
                // Limit width of div2
                if (new_div2_width < 0.0) {
                    new_div2_width = 0.0;
                    delta = this.start_div2_width;
                    new_div1_width = this.start_div1_width + delta;
                }
    
                // resize/position the divs
                this.div1.style.width = (new_div1_width * 100.0 / this.containerWidth) + "%";           
                this.div2.style.left  = ((this.start_div2_left + delta) * 100.0 / this.containerWidth) + "%";
                this.div2.style.width = (new_div2_width * 100.0 / this.containerWidth) + "%";
                
                // Set absolute position of divider - fix it up to be a % in endDrag().
                this.divider.style.left = (this.start_divider_x + delta) + "px";
                
                Event.stop(event);
                
                this.options.onDrag(this, event);
            }
        },
    
        setDividerX: function() {
            // Place the center of 'divider' half way between div1 and div2
            var div1_right = this.getX(this.div1) + this.getWidth(this.div1);
            var l = (((this.getX(this.div2)- div1_right - SplitPane.handleWidth)/2 + div1_right) * 100.0 / this.containerWidth) + "%";
            this.divider.style.left = l;
        },
    
        setDividerHeight: function() {
            // Set the divider height to the greater of the heights of the two divs
            var h = Math.max(this.getHeight(this.div1), this.getHeight(this.div2));
            this.divider.style.height = h + "px";
        },
    
        getX: function(el) {
            return el.x ? el.x : el.offsetLeft;
        },
      
        getXPercent: function(el) {
            var x = "0";
            x = Element.getStyle(el,"left");
            if (x) {
                x = x.replace("%","");  //moz
            }
            
            return x ? parseFloat(x) : 0.0;
        },
      
        getWidthPercent: function(el) {
            var w = "0";
            w = Element.getStyle(el,"width");
            if (w) {
                w = w.replace("%","");  //moz
            }
            
            return w ? parseFloat(w) : 0.0;
        },
      
        getWidth: function(el) {
            return el.offsetWidth;
        },
      
        getHeight: function(el) {
            if (el.currentStyle){
                return el.offsetHeight;                                 //ie
            } else {
                return Element.getStyle(el,"height").replace("px","");  //moz
            }
        }
    }
    
    SplitPane.setAll = function () {
        for(i=0; i<SplitPane.cache.length; i++){
            SplitPane.cache[i].set();
        }
    }
    
    Event.observe(window, "load", SplitPane.setAll);
    
    
    le code css :
    Code:
    /* Elements with this class are generated by the JavaScript code */
    /* Make the dividers visible for this demo */
    .splitpane-divider {
        border: 1px solid black;
        background:#5B207B;
        opacity: .5;
        filter: alpha(opacity=50);
    }
    
    /* The classes/ids below are just used in this example. You can use whatever you like */
    #parent {
        width: 100%;
        background: #eeeeee;
    }
    
    .column {
        float: left; /* This is forces the page content to adjust to changes in height of the columns */
        overflow: hidden; /* As a precaution, all content is clipped to the column width */
        margin: 0; /* This and padding need to be zero */
        padding: 0;
        z-index: 1;
        background:#E7FECD;
        color: #666666;
        width: 33%; /* Default value, overridden by class */
    }
    
    /* Any spacing must be on a child of the column, not the column itself */
    .content {
        border: 1px solid black;
        margin: 5px;
        padding: 5px;
    }
    
    le code html :
    Code:
    <div id="parent">
    <div id="lhs" class="column"><p class="content">
    <span style="display: block; white-space: nowrap; overflow: hidden">This is some clipped text that will be in the left column.</span>
    <span style="display: block">This is some wrapped text that will be in the left column.</span>
    </p></div>
    <div id="mid" class="column"><p class="content">This is some text that will be in the middle column.</p></div>
    <div id="rhs" class="column"><p class="content">This is some text that will be in the right column.</p></div>
    </div>
    et enfin l'exemple de classe javascript utilise pour le code en question :
    Code:
    <script  type="text/JavaScript" language="JavaScript"><!--
    new SplitPane("lhs", 33.3, "mid", 33.33, 33.3, { active: true });
    new SplitPane("mid", 33.3, "rhs", 66.66, 33.3, { active: true }); //-->
    </script>
     
  3. biscuit
    biscuit WRInaute occasionnel
    Inscrit:
    5 Juin 2006
    Messages:
    425
    J'aime reçus:
    0
    et ??? c'est quoi la question ???

    PS: c'est pas très sympa pour l'auteur du script de le copier/coller entièrement ici
     
  4. e-kiwi
    e-kiwi WRInaute accro
    Inscrit:
    23 Décembre 2003
    Messages:
    13 198
    J'aime reçus:
    1
    quel interet de remplacer des frames (pas aimées par google) pr du javascript (pas aimé par google) ?
     
  5. hanlin
    hanlin WRInaute occasionnel
    Inscrit:
    23 Mars 2006
    Messages:
    263
    J'aime reçus:
    0
    ok,
    Le javascript en fichier externe, ca ne surcharge pas le code non ?
    hanlin
     
Chargement...
Similar Threads - Utilisation script javascript Forum Date
Utilisation du javascript ? Débuter en référencement 16 Décembre 2006
Bonne utilisation de la balise noscript (menu javascript) Débuter en référencement 15 Septembre 2005
utilisation des scripts sous licences MIT, BSD, et GPL. Débuter en référencement 2 Août 2013
Problème d'utilisation du script Lightbox ! Développement d'un site Web ou d'une appli mobile 14 Février 2010
Script d'hébergement d'images simple d'utilisation Développement d'un site Web ou d'une appli mobile 18 Octobre 2008
Script de backup - Problème à l'utilisation SSH Administration d'un site Web 3 Juillet 2008
[Résolu] Utilisation d'un script sur plusieurs pages Développement d'un site Web ou d'une appli mobile 11 Octobre 2007
Balise noscript et mauvaise utilisation Référencement Google 19 Septembre 2007
:?: récupération de l'url et utilisation de script URL Rewriting et .htaccess 15 Mars 2007
JS : Utilisation d´un script détecteur de langue Référencement Google 24 Octobre 2006
Utilisation de noembed et de noscript Débuter en référencement 10 Août 2005
Questionnaire : limites de l'utilisation de l'IA en SEO Rédaction web et référencement 31 Mai 2022
Utilisations du signe + dans les noms composés de villes Référencement Google 29 Juillet 2021
Utilisation de sous domaines au lieu de noms de domaine propres Techniques avancées de référencement 18 Juin 2021
Aide utilisation twitter : gérer les commentaires Twitter 3 Mars 2021
Utilisation d'un nom de domaine alternatif Débuter en référencement 17 Février 2021
Utilisation d'une CMP pour les nuls Monétisation d'un site web 23 Janvier 2021
Utilisation des URL canoniques d'un sous domaine à un autre Référencement Google 10 Novembre 2020
Utilisation de AMP sur un petit site vitrine Référencement Google 3 Mars 2020
WordPress Optimisation et utilisation d'une page Auteur avec Bio Rédaction web et référencement 29 Octobre 2019