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.

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

Citazione:

---

Originalmente inviato da edo98

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.

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?

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.

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?

Dove vuoi, basta che poi in "src" specifichi l'indirizzo corretto:

Codice HTML:

---

<script type="text/javascript" src="/scrolling_bar.js" ></script>

---

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?