Log in

View Full Version : How can I use variables in css?



Sleeping Troll
05-20-2008, 11:41 PM
This ASP code generates css scripts, the highlighted area defines the position of my element, I need to use a variable created on the generated page here, any ideas? This code generates a css script and corresponding <div> element for each record in a database, currently 143. everything is working fine but I want to adjust the positions according to window size.

<%@LANGUAGE="JAVASCRIPT" CODEPAGE="1252"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script language="javascript" runat="server">
{
Response.Write("<he")
Response.Write("ad>\r")
Response.Write("<styl")
Response.Write("e type='text/css'>\r")
Response.Write("body {\r")
Response.Write("background-image: url(/images/Santa%20Fe%20Stucco.bmp);\r")
Response.Write("background-repeat: repeat;\r")
Response.Write("}\r")
Response.Write("</styl")
Response.Write("e>\r")
conn=Server.CreateObject("ADODB.Connection");
conn.Provider="Microsoft.Jet.OLEDB.4.0";
conn.Open ("/inetpub/wwwroot/HawksWeb/HawksWeb.mdb");
ProductData=Server.CreateObject("ADODB.RecordSet");
ProductData.CursorType = 3;
ProductData.CursorLocation = 3;
ProductData.ActiveConnection = conn;
ProductData.Open ("Select * from WebData");
ProductData.MoveFirst;
Response.Write("<scrip")
Response.Write("t type=")
Response.Write(" 'text/jav")
Response.Write("ascript'>\r")
Response.Write("var ScrW = screen.width\r")
Response.Write("var ScrH = screen.height\r")
Response.Write("for (x=1;x<=document.images.length;)\r")
Response.Write("{\r")
Response.Write("var Left=(Math.random()*ScrW);\r")
Response.Write("var Top=(Math.random()*ScrH);\r")
Response.Write("}\r")
Response.Write("</scrip")
Response.Write("t>")
Response.Write("<styl")
Response.Write("e type='text/css'>\r")
for (x=1;x<=ProductData.RecordCount;)
{
var ProdID=ProductData.Fields("ID");
Response.Write("#Layer"+x+"{\r");
Response.Write("width: 0px;\r");
Response.Write("position: absolute;\r");
Response.Write("z-index:0;\r");
Response.Write("left:[Left]\r");
Response.Write("top:[Top]\r");
Response.Write("}\r");
Response.Write("#Layer"+x+":hover{\r");
Response.Write("width: auto;\r");
Response.Write("z-index: 1;\r");
Response.Write("}\r");
Response.Write("#Pic"+x+"{\r");
Response.Write("width: 50px;\r");
Response.Write("}\r");
Response.Write("#Pic"+x+":hover {\r");
Response.Write("width: auto;\r");
Response.Write("}\r");
var x=x+1;
ProductData.MoveNext;
}
Response.Write("</st")
Response.Write("yle>\r")
Response.Write("</he")
Response.Write("ad>\r")
Response.Write("<bo")
Response.Write("dy>\r")
ProductData.MoveFirst
for (x=1;x<=ProductData.RecordCount;)
{
var ProdID=ProductData.Fields("ID");
var MenuItem = ProductData.Fields("Menu");

Response.Write("<div id= 'Layer"+x+"'><a href='/Panel.asp?MenuItem= "+MenuItem+"&ProdID="+ProdID+"&SrtStr=none&Spin=none'");
Response.Write(" target='Panel'><img id= 'Pic"+x+"' border= -1 src='/images/Products/"+ProdID+".png' /></a></div>\r");
var x=x+1;
ProductData.MoveNext;
}

ProductData.Close
}
</script>

</html>

a_design_interactive
05-21-2008, 02:52 AM
please re-post your inquiry, using the vB code key to properly divide those sections which are source-code from those which are your own commentary. for example, where you copy / paste source from your document, you might wrap it with the the bbcode tag &#91;code&#93; so it is rendered properly to others viewing it.

i recommend also that you select "disable smilies", so similar combinations of characters in your source do not render as smilie-face icons