Visualizzazione dei risultati da 1 a 2 su 2
  1. #1

    barra di scorrimento verticale personalizzata

    ho la necessità di una barra di scorrimento verticale personalizzata tipo questo esempio però vorrei che si trasformasse in verticale... ho fatto diverse prove ma non ci sono riuscito, qualcuno sa aiutarmi?

    grazie

  2. #2

    nessun volontario? lo facciamo insieme... sono arrivato ad un certo punto però non so proprio come fare adesso...

    ecco qui: il problema è che se muovo la barra si muove il div verso l'alto?!?

    codice:
    <html>
    <head>
    <TITLE>Drag-and-Drop Example</TITLE>
    
    <SCRIPT LANGUAGE="JavaScript">
    
    var isNav, isIE
    var offsetX, offsetY
    var selectedObj 
    
    var posbarre_x = 510
    var posbarre_y = 50
    
    var poscurseur_y = posbarre_y + 10
    
    var scalaTop = posbarre_y + 10
    var scalaBottom = posbarre_y + 270
    
    var scalawidth = scalaBottom - scalaTop
    
    var poscurseur_x = posbarre_x
    
    if (parseInt(navigator.appVersion) >= 4) {
            if (navigator.appName == "Netscape") {
                    isNav = true
            } else {
                    isIE = true
            }
    }
    
    function setZIndex(obj, zOrder) {
            obj.zIndex = zOrder
    }
    
    function shiftTo(obj, x, y) {
    // Control of over-scrolling
    if (y<=scalaTop) {y=scalaTop}
    if (y>=scalaBottom) {y=scalaBottom}
            
    if (isNav)
      {
        // Scrolling code for Navigator
        obj.moveTo(y,poscurseur_x)
        document.layers["contenu"].top = 2 * (posbarre_y) - y + 20;
        document.layers["contenu"].clip.bottom = 293 + y - posbarre_y - 20;
        document.layers["contenu"].clip.top = -posbarre_y + y - 20;
        document.close()
      }
        else
      { 
        // Scrolling code for Internet Explorer
        obj.pixelTop = y;
        obj.pixelBottom = poscurseur_y;
    //    document.all["contenu"].style.top = 2 * (posbarre_y) - y + 20;
        document.all["contenu"].style.top = 2 * (posbarre_y) - y + 20;
    
        // Order of rect coordinates: top right bottom left
    	ev = 'rect('+eval(-posbarre_y + y - 20)+'px 460px '+eval(300)+'px 0px)';
        document.all["contenu"].style.clip = ev;
      }        
    }
    
    function setSelectedElem(evt) {
            if (isNav) {
                    var testObj
                    var clickX = evt.pageX
                    var clickY = evt.pageY
                    for (var i = document.layers.length - 1; i >= 0; i--) {
                            testObj = document.layers[i]
                            if ((clickX > testObj.left) && 
                                    (clickX < testObj.left + testObj.clip.width) && 
                                    (clickY > testObj.top) && 
                                    (clickY < testObj.top + testObj.clip.height) && (testObj.name=="curseur")) {
                                            selectedObj = testObj
                                            setZIndex(selectedObj, 100)
                                            return
                            }
                    }
            } else {
                    var imgObj = window.event.srcElement
                    if (imgObj.parentElement.id.indexOf("curseur") != -1) {
                            selectedObj = imgObj.parentElement.style
                            setZIndex(selectedObj,100)
                            return
                    }
            }
            selectedObj = null
            return
    }
    
    function dragIt(evt) {
            if (selectedObj) {
                    if (isNav) {
                            shiftTo(selectedObj, (evt.pageX - offsetX), (evt.pageY - offsetY))
                    } else {
                            shiftTo(selectedObj, (window.event.clientX - offsetX), (window.event.clientY - offsetY))
                            return false
                    }
            }
    }
    
    function engage(evt) {
            setSelectedElem(evt)
            if (selectedObj) {
                    if (isNav) {
                            offsetX = evt.pageX - selectedObj.left
                            offsetY = evt.pageY - selectedObj.top
                    } else {
                            offsetX = window.event.offsetX
                            offsetY = window.event.offsetY
                    }
            }
            return false
    }
    
    function release(evt) {
            if (selectedObj) {
                    setZIndex(selectedObj, 0)
                    selectedObj = null
            }
    }
    
    function setNavEventCapture() {
            if (isNav) {
                    document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
            }
    }
    
    function init() {
            if (isNav) {
                    document.barre.left =  posbarre_x
                    document.barre.top = posbarre_y
                    
                    document.curseur.left = poscurseur_x
                    document.curseur.top = poscurseur_y
    
                    setNavEventCapture()
            }       
            if (isIE) {
                    document.all.barre.style.posLeft = posbarre_x
                    document.all.barre.style.posTop = posbarre_y
                    
                    document.all.curseur.style.posLeft = poscurseur_x
                    document.all.curseur.style.posTop = poscurseur_y
            }
    
            document.onmousedown = engage
            document.onmousemove = dragIt
            document.onmouseup = release
    }
    
    </SCRIPT>
    
    <style type="text/css">
    	#barre   {position:absolute;left:-2000;top:50;}
     	#curseur {position:absolute;left:-2000;top:50;}
    
    .texte
    {
      font-size: 8pt;
      color: white;
      font-family: verdana,arial
    }
    		
    </STYLE>
    </HEAD> 
    
    <BODY bgcolor="#000000" onLoad="init()"> 
    
    <DIV ID="barre">[img]barra.gif[/img]</DIV>
    <DIV ID="curseur">[img]valigia.gif[/img]</DIV>
    
    <div class="texte" ID="contenu" style="position:absolute; left:50px; top:50px; width:460px; height:300px; background-color: #0088CA; layer-background-color: #0088CA; border: 1px none #000000; padding: 3px;clip:'rect(0px 460px 300px 0px)'">
    [img]dhtml-a07-im1.gif[/img]
    Internet is, first and foremost, a network. In computer science,
    
    a network is a mesh of interconnected computers.
    
    These computers and their users (you
    
    for instance!) can exchange data. The
    
    transmitted data can be text, sound,
    
    videos, etc...
    
    
     
    Internet is, first and
    foremost, a network. In computer science,
    
    a network is a mesh of interconnected computers.
    These computers and their users (you
    for instance!) can exchange data. The
    transmitted data can be text, sound,
    videos, etc...Internet is, first and
    foremost, a network. In computer science,
    a network is a mesh of interconnected computers.
    These computers and their users (you
    for instance!) can exchange data. The
    transmitted data can be text, sound,
    videos, etc...Internet is, first and
    foremost, a network. In computer science,
    a network is a mesh of interconnected computers.
    These computers and their users (you
    for instance!) can exchange data. The
    transmitted data can be text, sound,
    videos, etc...Internet is, first and
    foremost, a network. In computer science,
    
    a network is a mesh of interconnected computers. These computers and their users
    (you for instance!) can exchange data. The transmitted data can be text, sound,
    videos, etc...Internet is, first and foremost, a network. In computer science,
    a network is a mesh of interconnected computers. These computers and their users
    (you for instance!) can exchange data. The transmitted data can be text, sound,
    videos, etc...Internet is, first and foremost, a network. In computer science,
    a network is a mesh of interconnected computers. These computers and their users
    (you for instance!) can exchange data. The transmitted data can be text, sound,
    videos, etc...</div>
    
    </BODY> 
    </HTML>

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.