Jag har fått hjärnsläpp!

annesophieMedlem sedan juni 20012 236 inlägg

Frågan19 aug. 2001 14:39#1

Hej,

Efter att ha konstaterat att min hjärna tydligen har gett upp (det är ju trots allt söndag) så måste jag nu be någon om hjälp!

Det hela känns lite löjligt då jag misstänker att det hela går att lösa ENKELT *suckar*..men men...jag kommer zxzxz inte på det!

Nedan finns koden till en sida som jag jobbar med. Den loopar upp ett antal bilder från en databas som då läggs snyggt och prydligt under varandra. Nu är det så att man ska kunna klicka på bilden och då få upp en större modell av samma bild i ett popupfönster, denna större bilden finns naturligtvis också i databasen.

Men vart ska jag lägga javascriptet till popupfönstret?!?!?!?!?!

Där det ligger nu tar det bara med det f ö r s t a id't i loopen och inte det individuella för varje bild. Jag testade att skriva ut det individuella id't för varje bild och det funkar...men det kommer inte med in i popupfönstret...

Vart ska jag lägga detta för att det ska funka? Jag trodde att det räckte att lägga JS i loopen...men icke!

DET HELA HANDLAR OM SQL3 och dynPage4, så ni hittar det i min djungel kod! ;^)

HELP SNÄLLA!

MvH
/A

--------

<%
option explicit
response.buffer=true

dim conn,sql,rs,sql2,rs2,x,farg,sql3,rs3

set conn = Server.CreateObject("ADODB.Connection")
conn.Open "driver={Microsoft Access Driver (*.mdb)};dbq="& server.mappath("tcf.mdb")

sql = "SELECT * FROM [portfolio] ORDER BY tcf_project_id;"
set rs = conn.execute(sql)

sql2 = "SELECT * FROM [dictionary] ORDER BY dictionary_id DESC ;"
set rs2 = conn.execute(sql2)

<HTML>

<HEAD>

#divScroller1 {position:absolute; overflow:hidden; z-index:9; left:100px; top:50px; width:400px; height:300px; clip:rect(0px, 400px, 300px, 0px); visbility:visible; border-width:0px 0px 0px 1px; border-color:#808080; border-style:dashed;}
.dynPage {position:absolute; z-index:10; left:0px; top:0px; width:300px; visibility:hidden; padding-left:15px; font-family:arial,helvetica,sans-serif; font-size:11px; color:black}
#arrows {position:absolute; z-index:11; left:74px; top:315px; width:20px;}
#links {position:absolute; z-index:11; left:10px; top:270px; width:100px;}
</style>

function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=this.agent.indexOf("Opera 5")>-1
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this
}
var bw=new lib_bwcheck()

/*** variables to configure... ***/

var numScrollPages = 4 //Set the number of pages (layers) here.
var transitionOut = 1; //The 'out' effect... 0= no effect, 1= fade
var transitionIn = 2; //The 'in' effect... 0= no effect, 1= fade, 2= slide
var slideAcceleration = 0.2; //If you use the slide animation, set this somewhere between 0 and 1.

/*** Please note that there are no effects available in ns4 and ie4, or explorers on the Mac! ***/

if(document.layers){ //NS4 resize fix...
scrX= innerWidth; scrY= innerHeight;
onresize= function(){if(scrX!= innerWidth || scrY!= innerHeight){history.go(0)} }
}

//object constructor...
function scrollerobj(obj,nest){
nest = (!nest)?"":'document.'+nest+'.'
this.elm = bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):document.getElementById(obj)
this.css = bw.ns4?this.elm:this.elm.style
this.doc = bw.ns4?this.elm.document:document
this.obj = obj+'scrollerobj'; eval(this.obj+'=this')
this.x = (bw.ns4||bw.opera5)?this.css.left:this.elm.offsetLeft
this.y = (bw.ns4||bw.opera5)?this.css.top:this.elm.offsetTop
this.w = (bw.ie4||bw.ie5||bw.ie6||bw.ns6)?this.elm.offsetWidth:bw.ns4?this.elm.clip.width:bw.opera5?this.css.pixelWidth:0
this.h = (bw.ie4||bw.ie5||bw.ie6||bw.ns6)?this.elm.offsetHeight:bw.ns4?this.elm.clip.height:bw.opera5?this.css.pixelHeight:0
}

//object methods...
scrollerobj.prototype.moveTo = function(x,y){
if(x!=null){this.x=x; this.css.left=x}
if(y!=null){this.y=y; this.css.top=y}
}
scrollerobj.prototype.moveBy = function(x,y){this.moveTo(this.x+x,this.y+y)}
scrollerobj.prototype.hideIt = function(){this.css.visibility='hidden'}
scrollerobj.prototype.showIt = function(){this.css.visibility='visible'}

/****************************************************************
scroll functions...
****************************************************************/
var scrollTimer = null;
function scroll(step){
clearTimeout(scrollTimer);
if ( !busy && (step<0&&activePage.y+activePage.h>scroller1.h || step>0&&activePage.y<0) ){
activePage.moveBy(0,step);
scrollTimer = setTimeout('scroll('+step+')',40);
}
}
function stopScroll(){
clearTimeout(scrollTimer);
}

/****************************************************************
activating the correct layers...
****************************************************************/
var activePage = null;
var busy = 0;
function activate(num){
if (activePage!=pages[num] && !busy){
busy = 1;
if (transitionOut==0 || !bw.opacity){ activePage.hideIt(); activateContinue(num); }
else if (transitionOut==1) activePage.blend('hidden', 'activateContinue('+num+')');
}
}
function activateContinue(num){
busy = 1;
activePage = pages[num];
activePage.moveTo(0,0);
if (transitionIn==0 || !bw.opacity){ activePage.showIt(); busy=0; }
else if (transitionIn==1) activePage.blend('visible', 'busy=0');
else if (transitionIn==2) activePage.slide(0, slideAcceleration, 40, 'busy=0');
}

/****************************************************************
Slide methods...
****************************************************************/
scrollerobj.prototype.slide = function(target, acceleration, time, fn){
this.slideFn= fn?fn:null;
this.moveTo(0,scroller1.h);
if (bw.ie4&&!bw.mac) this.css.filter = 'alpha(opacity=100)';
if (bw.ns6) this.css.MozOpacity = 1;
this.showIt();
this.doSlide(target, acceleration, time);
}
scrollerobj.prototype.doSlide = function(target, acceleration, time){
this.step = Math.round(this.y*acceleration);
if (this.step<1) this.step = 1;
if (this.step>this.y) this.step = this.y;
this.moveBy(0, -this.step);
if (this.y>0) this.slideTim = setTimeout(this.obj+'.doSlide('+target+','+acceleration+','+time+')', time);
else {
eval(this.slideFn);
this.slideFn = null;
}
}

/****************************************************************
Opacity methods...
****************************************************************/
scrollerobj.prototype.blend= function(vis, fn){
if (bw.ie5||bw.ie6 && !bw.mac) {
if (vis=='visible') this.css.filter= 'blendTrans(duration=0.9)';
else this.css.filter= 'blendTrans(duration=0.6)';
this.elm.onfilterchange = function(){ eval(fn); };
this.elm.filters.blendTrans.apply();
this.css.visibility= vis;
this.elm.filters.blendTrans.play();
}
else if (bw.ns6 || bw.ie&&!bw.mac){
this.css.visibility= 'visible';
vis=='visible' ? this.fadeTo(100, 7, 40, fn) : this.fadeTo(0, 9, 40, fn);
}
else {
this.css.visibility= vis;
eval(fn);
}
};

scrollerobj.prototype.op= 100;
scrollerobj.prototype.opacityTim= null;
scrollerobj.prototype.setOpacity= function(num){
this.css.filter= 'alpha(opacity='+num+')';
this.css.MozOpacity= num/100;
this.op= num;
}
scrollerobj.prototype.fadeTo= function(target, step, time, fn){
clearTimeout(this.opacityTim);
this.opacityFn= fn?fn:null;
this.op = target==100 ? 0 : 100;
this.fade(target, step, time);
}
scrollerobj.prototype.fade= function(target, step, time){
if (Math.abs(target-this.op)>step){
target>this.op? this.setOpacity(this.op+step):this.setOpacity(this.op-step);
this.opacityTim= setTimeout(this.obj+'.fade('+target+','+step+','+time+')', time);
}
else {
this.setOpacity(target);
eval(this.opacityFn);
this.opacityFn= null;
}
}

/**************************************************************
Init function...
**************************************************************/
var pageslidefadeLoaded = 0;
function initPageSlideFade(){
scroller1 = new scrollerobj('divScroller1');

pages = new Array();
pages[0] = null;
for (var i=1; i<=numScrollPages; i++){
pages = new scrollerobj('dynPage'+i, 'divScroller1');
pages.moveTo(0,0);
}
bw.opacity = ( bw.ie && !bw.ie4 && navigator.userAgent.indexOf('Windows')>-1 ) || bw.ns6
if (bw.ie5||bw.ie6 && !bw.mac) pages[1].css.filter= 'blendTrans(duration=0.6)'; // Loads the windows 9.x filters module.
activateContinue(1);

if (bw.ie) for(var i=0;i<document.links.length;i++) document.links.onfocus=document.links.blur;
pageslidefadeLoaded = 1;
}
//if the browser is ok, the script is started onload..
if(bw.bw && !pageslidefadeLoaded) onload = initPageSlideFade;

</script>

/*VARIABLES TO SET START: */
numImages=10 //How many images you have in your page
loaderWidth=300 //The width of the loadbar
/*
All other settings, like colors fonts and stuff like that you
have to change in the STYLE section.

VARIABLES TO SET END: */

currentImg=0
//Document size object ********
function lib_doc_size(){
this.x=0;this.x2=bw.ie && document.body.offsetWidth-20||innerWidth||0;
this.y=0;this.y2=bw.ie && document.body.offsetHeight-5||innerHeight||0;
if(!this.x2||!this.y2) return message('Document has no width or height')
this.x50=this.x2/2;this.y50=this.y2/2;
return this;
}

//Lib objects ********************
function lib_obj(obj,nest){
nest=(!nest) ? "":'document.'+nest+'.'
this.evnt=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj):0;
this.css=bw.dom||bw.ie4?this.evnt.style:this.evnt;
this.ref=this.css
this.w=this.evnt.offsetWidth||this.css.clip.width||
this.ref.width||this.css.pixelWidth||0;
return this
}
//Moving object to **************
lib_obj.prototype.moveIt = function(x,y){
this.x=x;this.y=y; this.css.left=x;this.css.top=y
}
//Clipping object to ******
lib_obj.prototype.clipTo = function(t,r,b,l,setwidth){
this.ct=t; this.cr=r; this.cb=b; this.cl=l
if(bw.ns4){
this.css.clip.top=t;this.css.clip.right=r
this.css.clip.bottom=b;this.css.clip.left=l
}else{
if(t<0)t=0;if(r<0)r=0;if(b<0)b=0;if(b<0)b=0
this.css.clip="rect("+t+","+r+","+b+","+l+")";
if(setwidth){this.css.pixelWidth=this.css.width=r;
this.css.pixelHeight=this.css.height=b}
}
}
var oLoad2
function startLoading(){
page=new lib_doc_size()
oLoadCont=new lib_obj('divLoadCont')
oLoad=new lib_obj('divLoad1','divLoadCont')
oLoad2=new lib_obj('divLoad2','divLoadCont.document.divLoad1')
oLoadText=new lib_obj('divLoadText','divLoadCont.document.divLoad1')
oLoad.moveIt(page.x50-loaderWidth/2,page.y50-20)
oLoadText.moveIt(loaderWidth/2 - oLoadText.w/2,10)
oLoad.clipTo(0,loaderWidth,40,0,1)
oLoad2.per = loaderWidth/numImages
}
function loadIt(ok){
currentImg++
if(oLoad2) oLoad2.clipTo(0,oLoad2.per*currentImg,40,0,1)
if(!ok){
oLoadCont.css.visibility='hidden'
oLoadCont=null; oLoad1=null; oLoad2=null;
}
}

//DISPLAY FUNCTION - DELETE START -------- DELETE THIS *************
//LEAVE THIS FUNCTION WHILE TESTING. DELETE WHEN READY
function loadIt_display(ok){
currentImg++
if(oLoad2) oLoad2.clipTo(0,oLoad2.per*currentImg,40,0,1)
if(currentImg<=numImages) setTimeout("loadIt_display(1)",200)
else{
oLoadCont.css.visibility='hidden'
}
}
//DISPLAY FUNCTION - DELETE END *************************************
</script>

</HEAD>

<div id="divLoadCont">
<div id="divLoad1">
<div id="divLoad2"></div><br>
<div id="divLoadText">Loading...</div>
</div>
</div>
<script>
startLoading()
//onload=loadIt; //- LEAVE THIS LINE WHILE TESTING. UNCOMMENT WHEN READY
loadIt_display(1) //LEAVE THIS LINE WHILE TESTING. DELETE WHEN READY
</script>

if (document.all&&document.readyState=="complete"){
document.all.tooltip2.innerHTML='<marquee style="border:1px solid #808080" font-color:black;>'+text+'</marquee>'
document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10
document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10
document.all.tooltip2.style.visibility="visible"
}

else if (document.layers){
document.tooltip2.document.nstip.document.write('<b>'+text+'</b>')
document.tooltip2.document.nstip.document.close()
document.tooltip2.document.nstip.left=0
currentscroll=setInterval("scrolltip()",100)
document.tooltip2.left=e.pageX+10
document.tooltip2.top=e.pageY+10
document.tooltip2.visibility="show"
}
}
function hidetip2(){
if (document.all)
document.all.tooltip2.style.visibility="hidden"
else if (document.layers){
clearInterval(currentscroll)
document.tooltip2.visibility="hidden"
}
}

function scrolltip(){
if (document.tooltip2.document.nstip.left>=-document.tooltip2.document.nstip.document.width)
document.tooltip2.document.nstip.left-=5
else
document.tooltip2.document.nstip.left=150
}
</script>

<%=rs("tcf_project_general")%>

</div>

<h5><%=rs("tcf_project_name")%></h5>
<a href="http://<%=rs("tcf_project_link")%>" target="_blank"><img src="<%=rs("tcf_project_image")%>" onload="loadIt(1)" border="0"></a>
<br><br>
<%=rs("tcf_project_info")%><br><br>
Go and visit <a href="http://<%=rs("tcf_project_link")%>" target="_blank"><%=rs("tcf_project_link")%></a><br>
<br><br>
<a href="#" onclick="activate(1); return false;" onfocus="if(this.blur)this.blur()"> << Back</a>

</div>

<table border="0" width="300">
<tr>
<td colspan="2" width="300"><h5>Dictionary</h5></td>
</tr>
<%
sql2 = "SELECT * FROM [dictionary] ORDER BY dictionary_word ;"
set rs2 = conn.execute(sql2)

do until rs2.EOF OR rs2.BOF
%>
<tr>
<td colspan="2" width="300">
<a href="#" onMouseover="showtip2(this,event,'<%=rs2("dictionary_explanation")%>')" onMouseout="hidetip2()"><b><%=rs2("dictionary_word")%></b></a>
</td>
</tr>

<%
rs2.MoveNext
loop
%>
</table>

</div>

<table border="0" width="300">
<tr>
<td colspan="2" width="300"><h5>Projects</h5>Click on the images to find out more.<br><br></td>
</tr>
<%
sql3 = "SELECT * FROM [portfolio] ORDER BY tcf_project_id ;"
set rs3 = conn.execute(sql3)

do until rs3.EOF OR rs3.BOF
%>
<tr>
<td valign="top" align="top">
<a href="javascript:view();"><img src="<%=rs3("tcf_project_image")%>" onload="loadIt(1)" border="0"></a><br>
<%=rs3("tcf_project_name")%><%=rs3("tcf_project_id")%>
</td>
</tr>

<%
rs3.MoveNext
loop
%>

</table>

</div>

<div id="links">
<a href="#" onclick="activate(2); return false;" onfocus="if(this.blur)this.blur()">Latest project</a><br>
<a href="#" onclick="activate(4); return false;" onfocus="if(this.blur)this.blur()">Other projects</a><br>
<a href="#" onclick="activate(3); return false;" onfocus="if(this.blur)this.blur()">Dictionary</a><br>
</div>

</td>
</tr>
<tr>
<td height="200" align="bottom" halign="bottom" valign="bottom"><a href="#" onclick="setWindows(); return false"><font color="white">reset windows</font></a></td>
</tr>
</table>

</BODY>

</HTML>

--------

------------------
Om du gör jobbet rätt första gången blir jobbet gjort. Om du gör jobbet fel fjorton gånger skapar du fler arbetstillfällen.

emissionMedlem sedan dec. 19996 721 inlägg

19 aug. 2001 15:35#2

Vänligen, korsposta inte. Tråden i ASP-forat är raderad.

mvh

emission

annesophieMedlem sedan juni 20012 236 inlägg

19 aug. 2001 16:54#3

Jo jag förstod det Emission, men jag visste inte om det var ett ASP problem eller ett JavaScript problem...SORRY!

I vilket fall så har jag löst problemet själv!

------------------
Om du gör jobbet rätt första gången blir jobbet gjort. Om du gör jobbet fel fjorton gånger skapar du fler arbetstillfällen.

LarsGMedlem sedan dec. 200012 464 inlägg

19 aug. 2001 18:45#4

<%
<script language="JavaScript">
<!--
function view (id)
{
fonster2=window.open("view_portfolio_close.asp?id="+ id, "popupfonster2","width=800,height=600,resizable=no,screenY=100,screenX=800");
}
//-->
</script>

sql3 = "SELECT * FROM [portfolio] ORDER BY tcf_project_id "
set rs3 = conn.execute(sql3)

do until rs3.EOF OR rs3.BOF
%> 
<tr>
<td valign="top" align="top">
<a href="javascript:view(<%=rs3("tcf_project_id")%>;"><img src="<%=rs3("tcf_project_image")%>" onload="loadIt(1)" border="0"></a><br>
<%=rs3("tcf_project_name")%><%=rs3("tcf_project_id")%>
</td>
</tr>

<% 
rs3.MoveNext
loop
%>

Du skriver ut samma funktion flera gånger med olika id-värden, så den kommer att omdefinieras, gång på gång, och javascript-tolken väljer att ta den sista.

------------------
essentitia preter non sans multiplicandum

annesophieMedlem sedan juni 20012 236 inlägg

20 aug. 2001 05:11#5

Hej LarsG,

tack för koden, men jag lyckades (hör och häpna) lösa det alldeles själv igår!

Ibland förvånar jag tom mig själv *ler*...men det är bra att veta att det finns dom som vet (för du var ju den enda som svarade) när det krisar...

MvH

------------------
Om du gör jobbet rätt första gången blir jobbet gjort. Om du gör jobbet fel fjorton gånger skapar du fler arbetstillfällen.