Avatar billede agg-zeus Nybegynder
07. april 2002 - 21:05 Der er 1 kommentar og
1 løsning

JavaScript sammen med ASP !!!

Jeg har fundet et JavaScript der viser et lille popup vindue når man kører musen hen over et link. Jeg har en tilmeldlingsliste med 100 pladser med et link til hver plads. Når man holder musen over et af linkne skal der i det lille popup vindue stå om pladsen er optaget og hvem der har reserveret pladsen! Alle oplysningerne bliver trukker ud af en Access database. Den besked der vises er jo afhængig af om pladsen er optaget eller ej, men kan man tjekke for det i JavaScript?
Jeg har lige siddet og tjekket nogle gamle spm. Og der står at der skal bruges noget Serverside script (ASP,PHP) Jeg kan ASP, men hvordan gør man ?!

JavaScriptet ser således ud:

<script language="JavaScript" type="text/javascript">
/********************************************************************************** 
Dynamic Tooltips
*  Copyright (C) 2001 <a href="/dhtmlcentral/michael_van_ouwerkerk.asp">Michael van Ouwerkerk</a>
*  This script was released at DHTMLCentral.com
*  Visit for more great scripts!
*  This may be used and changed freely as long as this msg is intact!
*  We will also appreciate any links you could give us.
*
*  Made by <a href="/dhtmlcentral/michael_van_ouwerkerk.asp">Michael van Ouwerkerk</a>
*********************************************************************************/

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

messages= new Array()
// Write your descriptions in here.
messages[0]="Toggle fade effect"
messages[1]="Switch animation on and off"
messages[2]="Toggle the window detection between 'smooth' and 'flip'"
// To have more descriptions just add to the array.

fromX= -1          // How much from the actual mouse X should the description box appear?
fromY= 21          // How much from the actual mouse Y should the description box appear?
ns4center= 1        // Centering the text in ns4 doesn't work with css, use this variable instead... the value is 1 or 0
useFading= 0        // 1 for a fading effect in windows explorer 5+ and all platforms ns6, 0 for no fading effect.
animation= 1        // 1 if you want animation, 0 for no animation.
detectiontype= 0    // 1 for 'smooth' window size detection, 0 for 'flip' window size detection.
delay= 300          // The time before showing the popup, in milliseconds.


/*** There should be no need to change anything beyond this. ***/

// A unit of measure that will be added when setting the position of a layer.
var px = bw.ns4||window.opera?"":"px";

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

// object constructor...
function makeTooltip(obj){                               
      this.elm= document.getElementById? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?document.layers[obj]:0;
      this.css= bw.ns4?this.elm:this.elm.style;
      this.wref= bw.ns4?this.elm.document:this.elm;
    this.obj= obj+'makeTooltip'; eval(this.obj+'=this');
    this.w= bw.ns4? this.elm.clip.width: this.elm.offsetWidth;
    this.h= bw.ns4? this.elm.clip.height: this.elm.offsetHeight;
};
makeTooltip.prototype.measureIt= function(){
    this.w= bw.ns4? this.elm.clip.width: this.elm.offsetWidth;
    this.h= bw.ns4? this.elm.clip.height: this.elm.offsetHeight;
};
makeTooltip.prototype.writeIt= function(text){
    if (bw.ns4) {this.wref.write(text); this.wref.close()}
    else this.wref.innerHTML= text;
};

// Mousemove detection
var mouseX=0,mouseY=0,setX=0,setY=0;
function getMousemove(e){
    mouseX= (bw.ns4||bw.ns6)? e.pageX: bw.ie&&bw.win&&!bw.ie4? (event.clientX-2)+document.body.scrollLeft : event.clientX+document.body.scrollLeft;
    mouseY= (bw.ns4||bw.ns6)? e.pageY: bw.ie&&bw.win&&!bw.ie4? (event.clientY-2)+document.body.scrollTop : event.clientY+document.body.scrollTop;
    if (isLoaded && hovering && animation) placeIt();
};
function placeIt(){
    if (detectiontype==1) setX= mouseX+fromX+tooltip.w > screenWscrolled ? screenWscrolled-tooltip.w: mouseX+fromX;
    if (detectiontype==1) setY= mouseY+fromY+tooltip.h > screenHscrolled ? screenHscrolled-tooltip.h: mouseY+fromY;
    if (detectiontype==0) setX= mouseX+fromX+tooltip.w > screenWscrolled ? mouseX-fromX-tooltip.w: mouseX+fromX;
    if (detectiontype==0) setY= mouseY+fromY+tooltip.h > screenHscrolled ? mouseY-fromY-tooltip.h: mouseY+fromY;
    if (setX<0) setX= 0;
    if (setY<0) setY= 0;
    tooltip.css.left= setX+px;
    tooltip.css.top= setY+px;
};

// Main popUp function.
var hovering=false, screenWscrolled=0, screenHscrolled=0;
makeTooltip.prototype.showTimer= null;
function popUp(num){
    if(isLoaded){
        clearTimeout(tooltip.popTimer);
        dopopOut();
        if (bw.ns4){
            var text= '<span class="netscape4Style">' + (ns4center?'<center>':"") + messages[num] + (ns4center?'</center>':"") + '</span>';
            tooltip.writeIt(text);
        }
        if (!bw.ns4) tooltip.writeIt(messages[num]);
        screenWscrolled= screenW + (bw.ie?document.body.scrollLeft:pageXOffset);
        screenHscrolled= screenH + (bw.ie?document.body.scrollTop:pageYOffset);
        hovering= true;
       
        /* I'm using a timeout for ie4 here, because it doesn't store the measurements quickly enough. Does anybody know why this happens? */
        if (bw.ie4) setTimeout('tooltip.measureIt(); placeIt();', delay/2);
        else { tooltip.measureIt(); placeIt(); }
        if (useFading) tooltip.showTimer= setTimeout('tooltip.blendIn()', delay);
        if (!useFading) tooltip.showTimer= setTimeout('tooltip.css.visibility="visible"', delay);
    }
};

// Hiding routines
makeTooltip.prototype.popTimer= null;
function popOut(){
    if (isLoaded) tooltip.popTimer= setTimeout('dopopOut()', 30)
};
function dopopOut(){
    hovering= false;
    clearTimeout(tooltip.showTimer);
    tooltip.css.visibility= 'hidden';
    clearTimeout(tooltip.fadeTimer);
    tooltip.i= 0;
};

// Measure screensize.
var scrollbarWidth= bw.ns6&&bw.win?14:bw.ns6&&!bw.win?16:bw.ns4?16:0;
function measureScreen() {
    tooltip.css.top= 0+px;
    tooltip.css.left= 0+px;
    screenW= (bw.ie?document.body.clientWidth:innerWidth) - scrollbarWidth;
    screenH= (bw.ie?document.body.clientHeight:innerHeight);
};

// Opacity methods.
makeTooltip.prototype.blendIn= function(){
    if (bw.ie && bw.win && !bw.ie4) {
        this.css.filter= 'blendTrans(duration=0.5)';
        this.elm.filters.blendTrans.apply();
        this.css.visibility= 'visible';
        this.elm.filters.blendTrans.play();
    }
    else {
        this.css.visibility= 'visible';
        if (!bw.ns4) this.fadeIt();
    }
};
makeTooltip.prototype.step= 8;
makeTooltip.prototype.i= 0;
makeTooltip.prototype.fadeTimer= null;
makeTooltip.prototype.fadeIt= function(){
    this.i+= this.step;
    //this.css.filter= 'alpha(opacity='+this.i+')';
    this.css.MozOpacity= this.i/100;
    if (this.i<100) this.fadeTimer= setTimeout(this.obj+'.fadeIt()', 40);
    else this.i= 0;
};

// Init function...
var isLoaded= false;
function popupInit(){
    //Fixing the browsercheck for opera... this can be removed if the browsercheck has been updated!!
    bw.opera5 = (navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?true:false
    if (bw.opera5) bw.ns6 = 0
   
    //Extending the browsercheck to add windows platform detection.
    bw.win= (navigator.userAgent.indexOf('Windows')>-1)

    tooltip= new makeTooltip('divTooltip');
    tooltip.elm.onmouseover= function(){ clearTimeout(tooltip.popTimer); if(bw.ns4){setTimeout('clearTimeout(tooltip.popTimer)',20)}; };
    tooltip.elm.onmouseout= dopopOut;
    if (bw.ns4) document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove= getMousemove;
    measureScreen();
    if (!bw.ns4) onresize= measureScreen;
    if (!bw.ns4) tooltip.elm.className= 'normalStyle';
    if (bw.ie && bw.win && !bw.ie4) tooltip.css.filter= 'alpha(opacity=100)'; //Preloads the windows filters.
    isLoaded= true;
};

// Initiates page on pageload if the browser is ok.
if(bw.bw && !isLoaded) onload= popupInit;
</script>


ASP-koden ser således ud:

<table>
<%

dbcon()
Dim antalpladser
set rs = server.createobject("adodb.recordset")
sql = "select count(*) as antalpladser from pladser"
rs.open sql, cn
antalpladser = rs.fields("antalpladser")
rs.close
sql = "Select * from pladser Order by pladsnr;"
rs.open sql, cn

Dim intmaxcolumn, intpladser, intcount, x, intmaxraekker, intmaxraekkercount

intMaxColumn = 9 'maximum antal pladser i hver række
intmaxraekker = 1
intpladser = antalpladser 'antallet af pladser
intCount = 0 'Tæller
Response.Write "<tr>"
For x = 1 to intpladser
intCount = intCount+1
If intCount > intMaxColumn Then
intCount = 0
intmaxraekkercount = intmaxraekkercount+1
Response.Write "</tr>"
If intmaxraekkercount = intmaxraekker Then
intmaxraekkercount = 0
    Response.Write "<tr><td><br></td></tr>"
End If
Response.Write "<tr>"
   
End If


Select Case rs.fields("optaget")
    Case "ja"
        Response.Write "<td bgcolor=""#FF9933"" width=""15"" style=""border:1 solid #000000;""><p><a href=""tilmeld1.asp?pladsnr="&rs.fields("pladsnr")&""" onmouseover=""popUp("&x&")"" onmouseout=""popOut()"" onfocus=""if(this.blur)this.blur()"">"&rs.fields("pladsnr")&"</a></p></td>"
    Case "nej"
        Response.Write "<td bgcolor=""#ffffff"" width=""15"" style=""border:1 solid #000000;""><p><a href=""tilmeld1.asp?pladsnr="&rs.fields("pladsnr")&""">"&rs.fields("pladsnr")&"</a></p></td>"
End Select
rs.movenext
Next

rs.close
%>
</table>
Avatar billede hmm10 Nybegynder
07. april 2002 - 21:24 #1
??? OK!???
Avatar billede agg-zeus Nybegynder
18. april 2002 - 17:35 #2
//
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester