Just nu i M3-nätverket
Gå till innehåll

Zoom funktion av sida (preview fönster)


SweZoo

Rekommendera Poster

Halloj!

Detta blir kanske lite svårt att förklara... Utvecklar en sida för touch skärmar så det är därför rullningslister inte blir så bra. Skulle vilja ha ett litet "fönster/ruta" i hörnet av sidan med hela sidans innehåll (i miniformat). Så t.ex. det som är utanför marginalerna (skroll listerna) syns på den bilden och trycker man där så scrollas man dit. Oj oj, hör hur dumt det låter. Vet att t.ex. Acrobat reader har denna funktion. Om man öppnar en pdf fil och ser till att fliken "sidor" är öppen så kan man se en förhandsgranskning av dokumentet. Är det så att en del av dokumentet faller utanför (vad man kan se i sitt fönster t.ex på grund av att den är in zoomad) markeras detta med en röd rektangel på previw bilden med vad man ser och vad som är utanför. Klickar man då på preview bilden utanför rektangeln flyttar sig huvudsidan dit.

 

Går detta att göra med java programering eller något annat?

Mycket tacksam för exempel eller sidor som behandlar detta.

 

Trevlig sommar!

 

Länk till kommentar
Dela på andra webbplatser

Det svåra blir nog att generera miniatyrbilderna. Det finns olika varianter för att generera bilder av webbsidor, t ex: http://www.hackdiary.com/archives/000055.html och http://www.babysimon.co.uk/khtml2png/index.html , men det beror ju på vad du kör för server och om du kan installera egna program. Det kan dessutom bli tungt om du har många dynamiska sidor (så att du inte kan generera miniatyrerna i förväg). Om du har kontroll över vad som körs på klienten kanske det här är intressant: http://weblogs.mozillazine.org/roc/archives/2005/05/rendering_web_p.html

 

I värsta fall kanske du väl använda nån mer stiliserad bild som får representera sidan.

 

Sen är problemet att använda Javascript för att känna av musklick i bilden och skrolla i fönstret. Skrollningen görs lätt med window.scrollTo(), men att känna av musklickets position (och översätta de till koordinater att skrolla till) är inte helt trivialt. Det här är en början: http://www.quirksmode.org/js/events_properties.html#link8

 

Men iaf, allt beror ju på vad du tänkt köra på servern och exakt vilka typer av klienter du ska hantera.

 

Länk till kommentar
Dela på andra webbplatser

Tack zerblat!

Mycket bra hjälp. Ska sitta och fundera lite över hur det ska lösas. Sidorna var kanon iaf. Funderade på om man skulle på något sätt kunna skapa en bild med de funktionerna du hänvisade till (eller göra en egen). Och sedan använda någon form av window.scrollTo() funktion. T.ex. använda ett flytande lager längst upp på sidan med bilden. Ta musens Y och X position på bilden och multiplicera med detta med antalet gånger bilden förmiskats för att få Y och X position i det verkliga fönstret. Kan detta vara möjligt?

 

Hör av dig om du kommer på något mer. Lovar själv skicka upp lösningen om jag kommer på någon. Det finns ju en del bra dhtml script där man kan skapa en ruta (i bestämnd storlek) över en bild där musen befinner sig som man då skulle kunna använda på preview bilden för att visa vad som kommer att visas vid ett klick. Se http://www.javascript.nu/dhtml/exempel/ex13.shtml för ett exempel men dock ej som ruta utan cirkel.

 

Länk till kommentar
Dela på andra webbplatser

Sådär ja... Då tror jag jag lyckats... Detta är koden som jag klippt ihop lite snabbt. Ska ordna den lite snyggare sedan men bara för att beskriva. Nu återstår bara att göra lagret flytande (alltid längst upp på sidan) och göra en rektangel på något sätt där musen pekar för att beskriva vad som kommer att visas efter klick.

 

Så här funkar scriptet. Förminska fönster så pass att det bildas scrolllister (annars funkar det inte) och klicka sedan på den grå rutan för att scrollas till motsvarande position på sidan. (Bilden är förminskad 10 ggr och Y X från rutan/bilden multipliceras 10 gånger för att få Y X till fönstet) Rutan ska självklart senare ersättas med en verklig bild över sidan... t.ex. som föreslagits ovan i tråden.

 

Kom gärna med förslag på hur man skulle kunna göra lagret flytande och hur man skulle kunna göra en rektangel över bilden som visar vad som kommer att visas i fönstet efter ett klick.

 

<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>Preview test</title>

<style type="text/css">
#area
{
position: relative;
right: 0;
top: 0;
width: 128px;
height: 102px;
background-color:#666666;
}
</style>

<script type="text/javascript">
window.onload = getOffset;
document.onmousemove = getMouse;

var ie = document.all;

var m_x = 0;
var m_y = 0;
var offX = 0;
var offY = 0;
var a_x = 0;
var a_y = 0;

function getMouse(e)
{
m_x = ie? window.event.clientX: e.pageX;
m_y = ie? window.event.clientY: e.pageY;

showMouse();
}

function showMouse()
{
document.getElementById('mX').innerHTML = m_x;
document.getElementById('mY').innerHTML = m_y;
}

function getOffset()
{
var el = document.getElementById('area');
offX = el.offsetLeft;
offY = el.offsetTop;

while (el.offsetParent)
{
	ie ? offX += 0 : offX += el.offsetParent.offsetLeft;
	offY += el.offsetParent.offsetTop;
	el = el.offsetParent.id;
}

showOffset();
}

function showOffset()
{
document.getElementById('oX').innerHTML = offX;
document.getElementById('oY').innerHTML = offY;
}

function getArea()
{
var el = document.getElementById('area');

a_x = m_x - offX;
a_y = m_y - offY;

showArea();
}

function showArea()
{
document.getElementById('aX').innerHTML = a_x;
document.getElementById('aY').innerHTML = a_y;
}

function scrollTo() 
{
window.scroll((a_x*10),(a_y*10))
}

</script>

</head>
<body>

<div class="area" id="area" onmousemove="getArea();" onClick="scrollTo()">
</div>

<h2><span>Mouse Co-ordinates</span></h2>

<div>
<p><strong>Mouse X: </strong><span id="mX"></span></p>
<p><strong>Mouse Y: </strong><span id="mY"></span></p>
</div>

<div>
<p><strong>Offset X: </strong><span id="oX"></span></p>
<p><strong>Offset Y: </strong><span id="oY"></span></p>
</div>

<div>
<p><strong>Area X: </strong><span id="aX"></span></p>
<p><strong>Area Y: </strong><span id="aY"></span></p>
</div>

</body>
</html>

 

Länk till kommentar
Dela på andra webbplatser

Anjuna Moon
Kom gärna med förslag på hur man skulle kunna göra lagret flytande

Mozilla har rätt dåligt stöd för scrollevents (triggas ex. inte när man använder scrollhjulet, men pröva med att dra i scrollisten).

På Opera är triggern lite långsam tycker jag, men det fungerar.

 

function floatArea() {
var el = document.getElementById('area');
el.style.top=document.body.scrollTop+"px";
}
function Init() {
if (isMozilla) {
	document.body.addEventListener('scroll',floatArea,false);
}
}
....
<body onload="Init();" onscroll="floatArea();">

 

[inlägget ändrat 2005-07-02 19:33:22 av Anjuna Moon]

Länk till kommentar
Dela på andra webbplatser

Scriptet funkar kanon! Tack för hjälpen! Tänkte posta det ifall någon annan skulle få någon liknande ide. Skriptet är gjort för en frame med måtten 760x560px och med en sida som visas i denna frame på 1200x1200px. Detta kan ju ändras i scriptet. Återigen tack för alla idéer och hjälp!

 

<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>Preview test</title>

<style type="text/css">
#area
{
position: relative;
right: 0;
top: 0;
width: 120px;
height: 120px;
background-color:#666666;
}
</style>

<script type="text/javascript">
window.onload = getOffset;
document.onmousemove = getMouse;

var ie = document.all;

var m_x = 0;
var m_y = 0;
var offX = 0;
var offY = 0;
var a_x = 0;
var a_y = 0;

function getMouse(e)
{
m_x = ie? window.event.clientX: e.pageX;
m_y = ie? window.event.clientY: e.pageY;

showMouse();
}

function showMouse()
{
document.getElementById('mX').innerHTML = m_x;
document.getElementById('mY').innerHTML = m_y;
}

function getOffset()
{
var el = document.getElementById('area');
offX = el.offsetLeft;
offY = el.offsetTop;

while (el.offsetParent)
{
	ie ? offX += 0 : offX += el.offsetParent.offsetLeft;
	offY += el.offsetParent.offsetTop;
	el = el.offsetParent.id;
}

showOffset();
startAt();
}

function showOffset()
{
document.getElementById('oX').innerHTML = offX;
document.getElementById('oY').innerHTML = offY;
}

function getArea()
{
var el = document.getElementById('area');

a_x = m_x - offX;
a_y = m_y - offY;

showArea();
}

function showArea()
{
document.getElementById('aX').innerHTML = a_x;
document.getElementById('aY').innerHTML = a_y;
}

function scrollTo() 
{
window.scroll((a_x*10-380),(a_y*10-280))
flytta_lager("ruta",a_x+offX-38,a_y+offY-28);
}

function floatArea() {
var el = document.getElementById('area');
el.style.top=document.body.scrollTop+"px";
el.style.left=document.body.scrollLeft+"px";
}

function flytta_lager(lagernamn,x,y)
{
if ((x-offX) < 0) {
x = offX;
}
if ((x-offX+76) > 120) {
x = offX+120-76;
}
else {
x = x;
}
if ((y-offY) < 0) {
y = offY;
}
if ((y-offY+56) > 120) {
y = offY+120-56;
}
else {
y = y;
}
	document.all[lagernamn].style.left = x+document.body.scrollLeft;
	document.all[lagernamn].style.top = y+document.body.scrollTop;
}

function startAt() 
{
window.scroll((600-380),(600-280))
flytta_lager("ruta",60+offX-38,60+offY-28);
}
//-->
</SCRIPT>
</head>
<body onscroll="floatArea();">

<div class="area" id="area" onmousemove="getArea();" onClick="scrollTo()">
</div>

<h2><span>Mouse Co-ordinates</span></h2>

<div>
<p><strong>Mouse X: </strong><span id="mX"></span></p>
<p><strong>Mouse Y: </strong><span id="mY"></span></p>
</div>

<div>
<p><strong>Offset X: </strong><span id="oX"></span></p>
<p><strong>Offset Y: </strong><span id="oY"></span></p>
</div>

<div>
<p><strong>Area X: </strong><span id="aX"></span></p>
<p><strong>Area Y: </strong><span id="aY"></span></p>
</div>
<table width="1200" height="300" border="0" cellspacing="0" cellpadding="0">
 <tr>
   <td> </td>
 </tr>
</table>

<DIV ID="ruta" STYLE="position:absolute; top:0; left:0;">
<img src="file:///E|/BIOGRAF/images/ruta.gif" width="76" height="56" border="0" onclick="scrollTo()" onmousemove="getArea();">
</DIV>

</body>
</html>

[inlägget ändrat 2005-07-04 16:12:42 av SweZoo]

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

×
×
  • Skapa nytt...