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

Scroll + maximerat fönster + centrering

Rekommendera Poster

Hejsan!

 

Jag gör en sida som ska kunna scrolla uppskattningsvis 50 bilder horisontellt. Detta vill jag göra med hjälp av ett javascript som ska starta onmouseover och stanna onmouseout - eller vad det nu heter. Jag vill helst inte att både vänster och högerpil ska vara synliga då man går in på bildsidan utan vänsterpil ska bli synlig då scroll åt vänster är möjligt. Det jag vill ha hjälp med är först och främst ett scroll-javascript där funktionen aktiveras med hjälp av onmouseover en gif. Det andra är hur jag ska bygga upp bildsidan, bör jag använda mig av layers eller tabeller? Och hur/vart lägger jag scrollscriptet?

 

OCH, en annan fråga, det första fönstret som öppnas vid klick på länken nedan leder till ett popupfönster. Min fråga är: Hur får jag det första fönstret att alltid maximeras och därmed lägga sig som en hel bakgrund som sträcker sig över hela skärmen. Går det dessutom att centrera popupförnstret oavsett vilken upplösning användaren har?

 

För att lättare förstå mitt problem har jag gjort en testsida som finns här: http://test.camatz.com

 

Många Soliga Sommarhälsningar! /Case

 

 

[inlägget ändrat 2004-07-10 14:58:22 av / Case]

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Jag får bara upp en helt vit sida?

 

Fullskärm skulle vara mycket irriterande, fönstret skulle ta upp 2 st 21"-skärmar med tillsammans 3200x1200 pixlar...

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Naturligtvis, glömde bort det...

 

Så, klickningen på preview-bilderna funkar men det kanske är allt som ska funka nu?

 

Personligen skulle jag föredra att kunna ändra storleken på fönstret själv...

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Popup-fönstret ska ha en fastställd storlek annars faller hela idén.

 

Jag tror du, lizardKing, är i minoritet med din skärmstorlek.

 

Frågan gällde ett horisontellt scroll-javascript för ett 50-tal bilder där funktionen aktiveras med hjälp av onmouseover en gif=höger och vänsterpil.

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Hej Case, här får du ett script av mig för att jag är så snäll =)

När du anropar InitScroll anger du scrollhastighet och stegstorlek som parametrar (i exemplet nedan har jag satt de till 1000ms och 5px

 

Sätt bredden på den inre div:en till tillräcklig bredd för att rymma alla bilderna och sätt clip på den yttre div:en till den storlek du vill att din viewport ska ha.

 

[log]

<html>
<head>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
   <!--
   	var oDiv,oTimer,x,nSpeed,nStep;

	function InitScroll(speed_,step_) {
		oDiv=document.getElementById("pics");
		x=0;
		nSpeed=speed_
		nStep=step_;
	}
	function StartScroll(dx) {
		oTimer=setInterval("ScrollIt("+dx+")",nSpeed);
	}
	function ScrollIt(dx) {
		x+=dx*nStep;
		oDiv.style.left=x+"px";
	}
	function EndScroll() {
		clearInterval(oTimer);
	}

   //-->
   </SCRIPT>
</head>

<body onload="InitScroll(100,5);">
<div style="position:absolute;left:0px;right:800px;clip:Rect(0,500,50,100);">
<div id="pics" style="position:absolute;left:0px;top:0px;width:5000px">
<img src="img/logo1.gif"><img src="img/logo1.gif"><img src="img/logo1.gif"><img src="img/logo1.gif">
</div></div><br><br><br>
<img onmouseover="StartScroll(-1);" onmouseout="EndScroll();" src="img/scrollLeft.gif">
<img onmouseover="StartScroll(1);" onmouseout="EndScroll();" src="img/scrollRight.gif">
</body>
</html>

[/log]

 

AnjunaMoon

____________________________________________________________

/* There is nothing more permanent than a temporary solution... */

Stoppa mjukvarupatenten nu! http://www.ffii.se/

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
Jag tror du, lizardKing, är i minoritet med din skärmstorlek.

 

Ett inte helt orimligt antagande.

 

Poängen var dock att det blir irriterande med fullskärmsfönster. Kör man vanligtvis alla program maximerade (vilket många gör) lär det ju inte spela nån roll. För de som vanligtvis arrangerar fönster bredvid varandra kommer ett fullskärmsfönster att förstöra _deras_ arrangemang. :)

 

Och popups löper ju stor risk att inte bli sedda överhuvudtaget.

 

Nej, nu är jag kanske lite väl gnällig...

[inlägget ändrat 2004-07-12 14:02:44 av lizardKng (pa9876)]

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Det finns alltid en risk med popup fönster, vi får se hur det blir med det, sidan är inte klar ännu. Men just i det här sammanhanget så kan den lösningen vara eminent. :)

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser
Tack för det snälla AnjunaMoon

Ingen orsak. Säg till om du behöver det modifierat på något sätt (eller tydligare förklarat)

 

AnjunaMoon

____________________________________________________________

/* There is nothing more permanent than a temporary solution... */

Stoppa mjukvarupatenten nu! http://www.ffii.se/

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Man kan ju alltid förklara nånstans att det SKA komma ett popupfönster. Då har man ju chans att ändra inställningar.

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Det var nog tankeöverföring för jag kom på samma sak själv för en stund sen. Eller så är vi maximalt genomtänkta båda två ;)

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Nu har tillfället kommit för modifiering :)

Jag har lagt in scriptet på min testsida, hoppas att jag gjort rätt, det funkar iaf. för mig på PC, XP, IE 6.0, 1280x1024.

 

Det jag behöver hjälp med nu finns i menyn förklarat på sidan i form av en skärmdump. http://test.camatz.com

 

/Enormt-tacksam-Case :)

 

 

 

 

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Hej, jag har ändrat efter dina kommentarer. Lägger in koden här igen:

 

[log]

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
var oDiv,oTimer,x,nSpeed,nStep,sx;

function InitScroll(speed_,step_) {
oDiv=document.getElementById("pics");
sx=100;x=100;
nSpeed=speed_
nStep=step_;
}
function StartScroll(dx) {
oTimer=setInterval("ScrollIt("+dx+")",nSpeed);
}
function ScrollIt(dx) {
x+=dx*nStep;
if (x>=sx) {
x=sx;
EndScroll();
}
oDiv.style.left=x+"px";
}
function EndScroll() {
clearInterval(oTimer);
}

//-->
</SCRIPT>

</head>
<body onload="InitScroll(100,5);" "topmargin="0" rightmargin="0" leftmargin="0" bottommargin="0">
<div id="scroll" style="position:absolute; left:-35px; right:500px; clip:Rect(0,730,100,100); visibility: visible;">
 <div id="pics" style="position:absolute; left:100px; top:0px; width:5000px; visibility: visible;"> 
   <img src="grafik/a.gif" width="80" height="100" hspace="5"> <img src="grafik/b.gif" width="80" height="100" hspace="5"><img src="grafik/c.gif" width="80" height="100" hspace="5"><img src="grafik/d.gif" width="80" height="100" hspace="5"><img src="grafik/e.gif" width="80" height="100" hspace="5"><img src="grafik/f.gif" width="80" height="100" hspace="5"><img src="grafik/g.gif" width="80" height="100" hspace="5"><img src="grafik/h.gif" width="80" height="100" hspace="5"><img src="grafik/i.gif" width="80" height="100" hspace="5"><img src="grafik/j.gif" width="80" height="100" hspace="5"><img src="grafik/k.gif" width="80" height="100" hspace="5"><img src="grafik/l.gif" width="80" height="100" hspace="5"><img src="grafik/m.gif" width="80" height="100" hspace="5"><img src="grafik/n.gif" width="80" height="100" hspace="5"><img src="grafik/o.gif" width="80" height="100" hspace="5"></div>
</div>
<div id="left" style="position:absolute; width:30px; height:20px; z-index:1; top: 60; left: 25;"><img src="grafik/scrollRight.gif" hspace="0" vspace="0" onmouseover="StartScroll(1);" onmouseout="EndScroll();"></div>
<div id="right" style="position:absolute; width:30px; height:20px; z-index:1; top: 60; left: 700;"><img src="grafik/scrollLeft.gif" hspace="0" vspace="0" align="right" onmouseover="StartScroll(-1);" onmouseout="EndScroll();"></div>
</body>
</html>

[/log]

 

AnjunaMoon

____________________________________________________________

/* There is nothing more permanent than a temporary solution... */

Stoppa mjukvarupatenten nu! http://www.ffii.se/

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Ah. Helt perfekt!!!

DU får en

prick i himlen,

en poäng för inlägget

och

en plats i mitt hjärta!

um..det där sista kanske var lite överdrivet ;)

 

Tusen Tack.

@-->->--

/Case

 

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Det var det trevligaste tacket jag fått härinne tror jag, tack för det =) Lycka till med resten av sajten!

 

AnjunaMoon

____________________________________________________________

/* There is nothing more permanent than a temporary solution... */

Stoppa mjukvarupatenten nu! http://www.ffii.se/

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Jag testade bara lokalt först och blev så glad att det funkade att jag inte kunde sitta still utan var tvungen gå ut i solen och berätta det för min sambo! Nu har jag lagt ut det på nätet. http://test.camatz.com

 

Tack för lyckönsknigen, tekniskt har du gjort sidan komplett!

Jag slänger in den här sedan när den är helt klar så får du se

vad du "ställt till med" ;) Det dröjer nog lite innan den är klar..

men den som väntar på ngt gott..

Skickar en solstråle till dig Anjuna Moon!

/Case

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Vill inte vara en glädjedödare men om kör gärna sidan i en HTML-validator så ser du inte bara att det saknas ALT-atribut utan i det här fallet även ett rent syntaxfel:

 

http://validator.w3.org/check?verbose=1&uri=http%3A//test.camatz.com/test_bilder.htm

 

Det är nästan alltid bäst att köra sina sidor genom en validator, även om den kan tyckas klaga så hittar den nästan alltid sådant som man annars kan leta ihjäl sig efter när nåt inte fungerar.

 

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Jamen äsch då. Måste man verkligen specify'a alt för att inte validatorn ska påpeka brister. Kanske man bara kan skriva alt="" för jag vill ju inte ha nån text till bilderna. Men felet i bodyn och i endscroll vet jag inte hur jag blir av med. Med nöd och näppe kan jag tolka javascript än mindre skriva. Hur petig ska man vara? Innebär det att vissa webbläsare inte kan tolka scriptet?

 

Jag bjuder på pite-palt, välkomna! /Case

 

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Bilder som inte visar nåt som har nån mening (hmmm) ska ha just alt="". Varför då? Jo, då vet webläsare som inte visar bilder om att den bilden kan man bortse ifrån.

 

Bilder som har nåt med innehållet att göra, t ex om du visar ett fotografi, ska ha alt="nån meningsfull text". Då kommer webläsare att visa en ruta där istället med din alt-text.

[inlägget ändrat 2004-07-13 17:15:57 av lizardKng (pa9876)]

Dela detta inlägg


Länk till inlägg
Dela på andra webbplatser

Skapa ett konto eller logga in för att kommentera

Du måste vara medlem för att kunna kommentera

Skapa ett konto

Skapa ett nytt konto på vårt forum. Det är lätt!

Registrera ett nytt konto

Logga in

Redan medlem? Logga in här.

Logga in nu



×
×
  • Skapa nytt...