Problema scorrimento DIV

S

saverio_web

Utente Attivo
1 Nov 2011
52
0
0
32
La Spezia
www.saverioweb.altervista.org
Buonasera ragazzi ho un problema (sciocco) che non riesco proprio a risolvere...
Praticamente ho un DIV con un contenuto che risulta più grosso di esso e vorrei poterlo visualizzare muovendomi dentro di esso tramite il tasto sinistro del mouse, come su Google Maps insomma...come faccio?

Vi posto il codice su cui sto facendo le prove anche se per ora è praticamente solo HTML:
PHP: 
<div style="width: 120px; height: 120px; overflow: hidden;"><img src="http://www.planwallpaper.com/static/images/6944150-abstract-colors-wallpaper.jpg"></div>

PS: scusate se la discussione può risultare doppia, ma l'ho ri-creata in questa sezione perché mi è stato detto essere più appropriata.
 
L

littelme

Nuovo Utente
1 Set 2015
13
0
0
saverio_web ha scritto:
Buonasera ragazzi ho un problema (sciocco) che non riesco proprio a risolvere...
Praticamente ho un DIV con un contenuto che risulta più grosso di esso e vorrei poterlo visualizzare muovendomi dentro di esso tramite il tasto sinistro del mouse, come su Google Maps insomma...come faccio?

Vi posto il codice su cui sto facendo le prove anche se per ora è praticamente solo HTML:
PHP: 
<div style="width: 120px; height: 120px; overflow: hidden;"><img src="http://www.planwallpaper.com/static/images/6944150-abstract-colors-wallpaper.jpg"></div>

PS: scusate se la discussione può risultare doppia, ma l'ho ri-creata in questa sezione perché mi è stato detto essere più appropriata.
Clicca per allargare...

devi modificare overflow: hidden; con overflow: scroll; :)
 
L

littelme

Nuovo Utente
1 Set 2015
13
0
0
saverio_web ha scritto:
Ma non voglio vedere la scrollbar...voglio fare in modo che questa venga sostituita dal pulsante sinistro del mouse, che tenendolo premuto all'interno del div mi permetta di spostarmi dentro di esso, come se fossi in Google Maps...
Clicca per allargare...

Ah scusa, avevo capito male! Non saprei come aiutarti perchè non ho mai provato a fare quello che vorresti fare tu. Prova a vedere gli esampi che ci sono qui http://www.html.it/pag/18695/draggable-trascinare-oggetti/ e cerca di riadattarli un attimino :) buon divertimento!
 
S

saverio_web

Utente Attivo
1 Nov 2011
52
0
0
32
La Spezia
www.saverioweb.altervista.org
Risolto :mavieni:
Per chiunque avesse il mio stesso problema:
PHP: 
<html>
<head>
    <meta charset="UTF-8">
    <title>Pagina di prova</title>
<style>
body {
    margin: 0px;
}
 
.free {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: crosshair;
}
 
.free:active {
    cursor: move;
}
</style>
 
<script type="text/javascript">
    !function(e,n){"function"==typeof define&&define.amd?define(["exports"],n):n("undefined"!=typeof exports?exports:e.dragscroll={})}(this,function(e){var n=window,o=document,t="mousemove",l="mouseup",i="mousedown",r="EventListener",c="add"+r,f="remove"+r,m=[],s=function(e,r){for(e=0;e<m.length;)r=m[e++],r[f](i,r.md,0),n[f](l,r.mu,0),n[f](t,r.mm,0);for(m=o.getElementsByClassName("dragscroll"),e=0;e<m.length;)!function(e,o,r,f){e[c](i,e.md=function(e){f=1,o=e.clientX,r=e.clientY,e.preventDefault(),e.stopPropagation()},0),n[c](l,e.mu=function(){f=0},0),n[c](t,e.mm=function(n,t){t=e.scroller||e,f&&(t.scrollLeft-=-o+(o=n.clientX),t.scrollTop-=-r+(r=n.clientY))},0)}(m[e++])};"complete"==o.readyState?s():n[c]("load",s,0),e.reset=s});
</script>
</head>
 
<body>
 
<div class="free dragscroll">
    <img src="http://www.planwallpaper.com/static/images/6944150-abstract-colors-wallpaper.jpg">
</div>
 
</body>
</html>


littelme ha scritto:
Ah scusa, avevo capito male! Non saprei come aiutarti perchè non ho mai provato a fare quello che vorresti fare tu. Prova a vedere gli esampi che ci sono qui http://www.html.it/pag/18695/draggable-trascinare-oggetti/ e cerca di riadattarli un attimino :) buon divertimento!
Clicca per allargare...
PS: Grazie littelme, ho smanecchiato un bel po' con i codici che ho trovato in quella pagina ed ho elaborato anche una soluzione con il draggable di jQuery :fonzie:
 
Ultima modifica:
S

saverio_web

Utente Attivo
1 Nov 2011
52
0
0
32
La Spezia
www.saverioweb.altervista.org
Questa è la soluzione con jQuery :p
PHP: 
<!doctype html>
<html>
<head>
<title></title>
<style>
body {
    margin: 0px;
}

.div_ {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: crosshair;
}

.div_:active {
    cursor: move;
}

#draggable {
    width: 2560px;
    height: 1600px;
    background: url('http://www.planwallpaper.com/static/images/6944150-abstract-colors-wallpaper.jpg');
}

</style>

<script type="text/javascript" src="http://www.html.it/guide/esempi/jqueryui/esempi/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://www.html.it/guide/esempi/jqueryui/esempi/js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
	$(function() {
		$("#draggable").draggable({ containment: [-1100, 0, 0, -800] });
		$(".ui-draggable").disableSelection();
	});
</script>

</head>

<body>
    <div class="div_" role="main">
        <div id="draggable" class="ui-widget-content ui-draggable" unselectable="on" style="position: relative;"></div>
    </div>
</body>
</html>

PS: nel codice sono riportati dei collegamenti ad il sito di HTML, necessari se si vuole far funzionare lo script (sono file jQuey modificati, con quegli originali a me non funziona)
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
S Problema scorrimento DIV senza scrollbar HTML e CSS 4
P problema di scorrimento PHP 10
coteaz problema con iframe e con barre di scorrimento Javascript 3
R HELP...problema con le barre di scorrimento! HTML e CSS 15
R Problema con FP 2003: bloccare scorrimento menu HTML e CSS 4
I Sto progettando nuovi siti utilizzando bootstrap e devo dire funziona bene, l'unico problema e la maschera -moz- HTML e CSS 0
K Problema form update PHP 2
O problema con dvr dahua xvr5116 IP Cam e Videosorveglianza 0
S Problema nel ciclare un json Javascript 0
G Problema con Xampp Web Server 1
andrea barletta Problema con miniature comandi Photoshop 0
I problema con alice Posta Elettronica 0
K Problema Inner join PHP 1
F firefox problema http Linux e Software 0
N Problema con position absolute e overflow HTML e CSS 4
E Problema jquery Success jQuery 2
L Problema con inner join PHP 11
K [php] Problema con inner join PHP 4
E problema selezione sfumata Photoshop 2
K [PHP] Problema con variabili concatenate. PHP 1
A Problema filtro fluidifica Photoshop Photoshop 1
H Problema Bordi Scontorno Photoshop 1
O problema con query PHP 4
R Problema installazione Realtek WiFi USB rtl8821 Reti LAN e Wireless 1
I problema con 2 account Posta Elettronica 1
L problema collegamento file css con html HTML e CSS 1
Y Problema percorso file in rete PHP 1
N Problema SEO "L'URL non si trova su Google" SEO e Posizionamento 4
E Problema accesso a file con app sviluppata con MIT APP INVENTOR 2 Sviluppo app per Android 0
P Problema acquisizione clienti Webdesign e Grafica 1
F NetBeans problema creazione progetto Java Windows e Software 0
M Problema con Try Catch PHP 0
C problema seo + cerco esperto SEO e Posizionamento 11
Sergio Unia Problema con gli eventi del mouse su una data table: Javascript 2
T PROBLEMA CON SESSIONI PHP 3
A Problema, non so, di scale() o transform, oppure altro? HTML e CSS 0
T ALTRO PROBLEMA CON ARRAY PHP PHP 1
R problema con else PHP 0
T PROBLEMA CON ARRAY PHP 8
L problema con query select PHP 2
R Problema query con ricerca id numerico PHP 2
F Problema con risposta PHP 0
S problema con recupero dati tabella mysql PHP 2
Z Problema con il mio tp-l i nk Reti LAN e Wireless 1
I PROBLEMA: Sostituzione sito XAMPP E-Commerce 0
T problema data 30/11/-1 PHP 0
L Problema RAM con Tomcat 8 Apache 0
napuleone problema con sort e asort PHP 4
Y Problema incolonnamento tabella PHP 7
S problema salvataggio immagini Photoshop 0

Discussioni simili

Alto Basso