Visualizzazione risultati 1 fino 8 di 8

Discussione: Immagine o banner che segue lo scrolling della pagina

  1. #1
    Guest

    Predefinito Immagine o banner che segue lo scrolling della pagina

    Buona sera a tutti.

    Vorrei inserire un banner pubblicitario nella sidebar di destra del mio blog. Questo banner, però, deve seguire verticalmente lo scorrimento della pagina.

    Esattamente come avviene in questo sito.

    Ho provato diversi script, però, questi, mi chiedono di inserire un valore (top e left) preciso in cui posizionare il banner.
    Il problema è che se mettessi, ad esempio, top=200px e left=600px, quando cambio risoluzione, il banner ovviamente si posiziona a 600 px dal bordo di sinistra, e non è più posizionato all'interno della sidebar.
    Quindi mi servirebbe uno script in cui basterebbe inserire lo script dentro la sidebar senza dare posizioni.
    Ultima modifica di musicanapoli : 07-09-2009 alle ore 01.28.50

  2. #2
    Guest

    Predefinito

    a me viene una pagina bianca... comunque... se intendi il float in questo link trovi degli esempi:

    http://www.javascript-fx.com/submits...oat/demo1.html

  3. #3
    Guest

    Predefinito

    Citazione Originalmente inviato da edo98 Visualizza messaggio
    a me viene una pagina bianca... comunque... se intendi il float in questo link trovi degli esempi:

    http://www.javascript-fx.com/submits...oat/demo1.html
    Già provato. Buono se lo devi mettere a sinistra, ma se lo vuoi rinchiudere all'interno di una sidebar di destra il cui intero template ha una larghezza fissa di un tot di pixel, quando cambi risoluzione, il banner non rimane dentro la sidebar.

  4. #4
    Guest

    Predefinito

    ho lo stesso problema di musicanapoli, però io non lo devo mettere in una sidebar perciò mi basta sapere il codice di questo script, potete postarlo?

  5. #5
    Guest

    Predefinito

    Io alla fine ho trovato questo script, vedi se ti può interessare:

    Questo lo metti dentro un file con estensione .js (lasciando anche i crediti):
    Codice:
    // Scrolling bar - version 1.4
    
    // 
    // This program is free software: you can redistribute it and/or modify
    // it under the terms of the GNU General Public License as published by
    // the Free Software Foundation, either version 3 of the License, or
    // (at your option) any later version.
    // 
    // This program is distributed in the hope that it will be useful,
    // but WITHOUT ANY WARRANTY; without even the implied warranty of
    // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    // GNU General Public License for more details.
    // 
    // You should have received a copy of the GNU General Public License
    // along with this program.  If not, see <http://www.gnu.org/licenses/>
    // 	
    
    // --------------------------------------------------------------------
    // Set values to adjust effects for your layout
    // --------------------------------------------------------------------
    
    // The ID of div to move 
    myObjectToMove = "simuove";
    
    // Stickyness of the movement (in pixels)
    myStickyPixels = 300;
    
    // Scrolling bar may contain a button to stop the sliding effect:
    // <a href="#" onclick="javascript:switchRecursion()">Stop/Restart</a>
    //
    // User choice will be stored in a cookie, and will be remembered by the script
    // while that user browses your website
    //
    // Moreover you can set a Javascript variable to make the menu fade in
    //
    // <script type="text/javascript">
    //   isFront = true;
    // </script>
    //
    // <style type="text/css">
    //   #scrollingmenu { visibility:hidden }
    // </style>
    
    // --------------------------------------------------------------------
    // YOU DO NOT NEED  TO MODIFY ANYTHING  BELOW THIS LINE UNLESS YOU KNOW 
    // WHAT YOU ARE DOING. IF YOU NEED MORE INFORMATIONS, SEND ME A MESSAGE
    // --------------------------------------------------------------------
    
    // Initialization for scrolling menu
    var myCurrentScrollTop = 0;
    var myDeltaScrollTop = 0;
    var myDx = 0;
    var myDy = 0;
    myInterval = 50;
    
    // Function: createCookie
    // Input parameters: name of the cookie, value to store, expiration days
    // Output parameters: none
    // Side effects: create a new cookie for storing values
    //
    function createCookie(name, value, days) {
      if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
      }
      else expires = "";
      document.cookie = name+"="+value+expires+"; path=/";
    }
    
    // Function: readCookie
    // Input parameters: name of the cookie to read
    // Output parameters: value stored
    // Side effects: none
    //
    function readCookie(name) {
      var nameEQ = name + "=";
      var cookieValues = document.cookie.split(';');
      for(var i=0; i < cookieValues.length; i++) {
        var aValue = cookieValues[i];
        while (aValue.charAt(0)==' ') aValue = aValue.substring(1, aValue.length);
        if (aValue.indexOf(nameEQ) == 0) return aValue.substring(nameEQ.length, aValue.length);
      }
      return null;
    }
    
    // Function: setOpacity
    // Input parameters: object, opacity to set
    // Output parameters: none
    // Side effects: changes visibility property of the object
    //
    function setOpacity(obj, opacity) {
      opacity = (opacity >= 99)?99.999:opacity;
     
      // IE/Win
      obj.style.filter = "alpha(opacity:"+opacity+")";
    
      // Safari<1.2, Konqueror
      obj.style.KHTMLOpacity = opacity/100;
    	
      // Older Mozilla and Firefox
      obj.style.MozOpacity = opacity/100;
    	
      // Safari 1.2, newer Firefox and Mozilla, CSS3
      obj.style.opacity = opacity/100;
    }
    
    // Function: fadeIn
    // Input parameters: object to show, name of variable, opacity to set, increasing opacity step, opacity upper limit
    // Output parameters: none
    // Side effects: changes visibility property of the object
    //
    function fadeIn(objectToFade, objectName, opacity, step, limit) {
      if (opacity < limit) {
    	setOpacity(objectToFade, opacity);
    	opacity += step * ( 1 - (opacity/100.0));
    	window.setTimeout("fadeIn("+objectName+", '"+objectName+"', "+opacity+", "+step+", "+limit+")", 200);
      }
    }
    
    // Function checkLocation
    // Input parameters: object to move, previous position
    // Output parameters: none
    // Side effects: updates position of given object on scrolling up/down the page
    //
    function checkLocation(obj,offs) {
      if (navigator.appName.indexOf("Netscape")!= -1) {
        myCurrentYPos = window.pageYOffset;
      }
      else {
        if (document.documentElement && document.documentElement.scrollTop) {
          myCurrentYPos = document.documentElement.scrollTop;
        }
        else {
          myCurrentYPos = document.body.scrollTop;
        }
      }
      
      // Menu will start moving after a scrolling of at least myStickyPixels pixels
      if ( myCurrentYPos > myStickyPixels || myCurrentYPos < myPreviousYPos ) {
       
        myDeltaY = Math.max(myCurrentYPos - myStickyPixels, 0) - myYPos ;
    
        // Check if is too close to its target
        if ( (myDeltaY >= 6) || (myDeltaY <= -6) ) {
        
    	  // If abs(delta) < 6, round = 0, so it is useless to execute the following code
          myStepY = Math.round( myDeltaY / 12);
    	  
    	  // The new position needs to be positive or zero
    	  if ( myYPos >= -myStepY ) {
            myYPos += myStepY;
            obj.style.top = myYPos + "px";
          }
        }
      }
    
      // We want to check if user has scrolled current page or not  
      if (offs != myCurrentYPos) myPreviousYPos = offs;
      
      // If the slider hasn't been blocked, reschedule all the checks
      if (isRecursive == "true") {
        setTimeout("checkLocation(obj,"+myCurrentYPos+")", myInterval);
      }
    }
    
    
    // Function switchRecursion
    // Input parameters: none
    // Output parameters: none
    // Side effects: set to true/false isRecursive variable, to start/stop checkLocation execution, 
    //               and writes new value into the cookie
    //
    function switchRecursion() {
    
      if (isRecursive == "false") {
        isRecursive = "true";
    	createCookie("isRecursive", isRecursive, 365);
    	checkLocation(obj,myYPos);
      }
      else {
        isRecursive = "false";
    	createCookie("isRecursive", isRecursive, 365);
      }
    }
    
    window.onload = function(e) {
      
      // Get the objects with given ID
      if (document.getElementById(myObjectToMove)) {
        obj = document.getElementById(myObjectToMove);
      }
      else if (eval("document."+myObjectToMove)) {
        obj = eval("document."+myObjectToMove);
      }
      else {
        obj = eval(myObjectToMove);
      }
    
      // Another cookie tells us if the menu is sticky or not
      isCookieRecursive = readCookie("isRecursive");
      isRecursive = (isCookieRecursive != null && isCookieRecursive != undefined && isCookieRecursive != "") ? isCookieRecursive : "true";
      isFrontPage = (isFront != null && isFront != undefined && isFront != "") ? isFront : false; 
      
      // Netscape and compatible browsers use the WINDOW object for
      // storing window's properties
      //
      if (navigator.appName.indexOf("Netscape")!= -1) {
        myYPos = window.pageYOffset;
      }
      else {
        // Internet Explorer 6 changed implementation of its DOM, renaming
        // document.body into document.documentElement
        //
        if (document.documentElement && document.documentElement.scrollTop) {
          myYPos = document.documentElement.scrollTop;
        }
        else {
          // This applies to older IE browsers
          myYPos = document.body.scrollTop;
        }
      }
      myPreviousYPos = myYPos;
      
      // Let the menu fade in (only in front page)
      if (isFrontPage) {
        setOpacity(obj, 0);
        obj.style.visibility = "visible";
        fadeIn(obj, "obj", 0, 25, 99);
      }
      else {
    	obj.style.visibility = "visible";
      }
      
      // And now move it up and down, depending on cookie value
      if (isRecursive == "true") {
        checkLocation(obj, myYPos);
      }
    }
    Questo lo metti nel css:
    Codice:
    #simuove  {
    position : relative;
    top : 0;
    left : 0;
    }
    E questo lo metti nell'HTML dentro <head>:
    Codice HTML:
    <script type="text/javascript" src="/scrolling_bar.js" ></script> 
    
    <script type="text/javascript">isFront = true;</script>
    scrolling_bar.js sarebbe il file in cui dovrai mettere lo script che ti ho postato prima.

    E poi mi sembra che devi creare un div ad esempio:
    Codice HTML:
    <div id="simuove">qui il contenuto</div>
    questo ultimo passaggio dovrebbe essere così, non ricordo precisamente in quanto ho cancellato questa parte dal template in cui l'anno scorso avevo inserito la scrolling bar.
    Ultima modifica di musicanapoli : 21-08-2010 alle ore 15.34.00

  6. #6
    Guest

    Predefinito

    grazie mille adesso provo e ti faccio sapere...

    P.S: ma il file scrolling_bar.js lo devo mettere nella root oppure in una cartella specifica?

  7. #7
    Guest

    Predefinito

    Dove vuoi, basta che poi in "src" specifichi l'indirizzo corretto:
    Codice HTML:
    <script type="text/javascript" src="/scrolling_bar.js" ></script> 

  8. #8
    Guest

    Predefinito

    ok grazie mille

    edit: non mi funziona lo scrolling, ho fatto tutto quello che mi hai detto ma non mi funziona: allora ho messo il collegamento scr=http://downloadtohost.altervista.org/scrolling_bar.js, ho messo lo script type nel head e il div l'ho chiamato scrollingbar...ma niente se metto lo script type subito dopo <head> non compare se l'ho metto subito prima </head> mi compare ma non fa lo scroll...cosa posso fare?
    Ultima modifica di downloadtohost : 22-08-2010 alle ore 18.02.38

Tags for this Thread

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •