Problema scorrimento DIV

saverio_web

Utente Attivo
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.
 

littelme

Nuovo Utente
1 Set 2015
13
0
0
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.

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

littelme

Nuovo Utente
1 Set 2015
13
0
0
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...

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!
 

saverio_web

Utente Attivo
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>


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!
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:

saverio_web

Utente Attivo
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)
 
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
P Problema acquisizione clienti Webdesign e Grafica 0
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 7
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
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
Z Problema con INT MySQL PHP 1
Z Problema database MySQL con XAMPP PHP 0
M Problema con controllo form in real time jQuery 6
D problema php mysql PHP 1
D problema php mysql PHP 1
M Problema Wi-Fi Linux Linux e Software 1
Z Problema di sincronizzazione PAYPAL con PHP PHP 1
Daniele_Carrara Problema Aperture Mailup Email Marketing 5
F PROBLEMA ACCESSO INSTAGRAM Discussioni Varie 2
R Problema connessione db PHP 7
M problema if PHP 2
G Problema con Get page PHP 4
N Problema passaggio variabili tra pagine PHP 4
P Problema con require once PHP 6
P Problema con i package Java 1
A Problema login con Safari PHP 14
F INDESIGN: problema esportazione esecutivo per la stampa con foto B/N Webdesign e Grafica 1
H problema carrello woocommerce PHP 2
S problema con css bootstrap3 HTML e CSS 4
M .load() problema con caricamenti dinamici di js Javascript 0
M Problema su query JOIN in tre tabelle PHP 0
S Problema esportazione tabelle Mysql in Excel PHP 0
G Problema ------- con Query PHP 1
G Problema con Query PHP 1
M Problema su update di 3 tabelle PHP 1

Discussioni simili