asked on

How to pass variables from asp to css

Hello Experts
I have a background image and I am using a css sheet to position a red border on a paticular area. The area represents an office location. What I need to be able to do is have a user click on the office number from a different asp page and it should open up the background image and display the red border at the coordinates based on the office number the user choose. The css sheet will hold the neccessary info on where to place the red border. I need to be able to pass the users selection of the office number to the css sheet. And based on the selection it pulls up the correct place to display the border. If this is possible. I have attached my background image and the css sheet.

<html> 
 
<head> 
<link href="FloorPlanStyleSheet.css" rel="stylesheet" type="text/css"> 
<title>Floor Plan 1st Floor</title> 
 
 
</head> 
 
<body background="file:///j:/1st_floor.gif">
<p class=Office1></p> 
<p class=Office2></p> 
</body> 
 
</html> 
 
FloorPlanStyleSheet.css
 
myNewStyle {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FF0000;
}
 
 
.office1 {
background: transparent;
border: 5px solid #FF0000;
position: absolute;
z-index: 15;
padding: 0 0 75px 60px; /*top right bottom left*/
margin-top: 183px;
margin-left: 0px;
} 
 
.office2 {
background: transparent;
border: 5px solid #FF0000;
position: absolute;
z-index: 15;
padding: 0 0 75px 60px; /*top right bottom left*/
margin-top: 283px;
margin-left: 0px;
} 
 
.office4 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 32;
color: #FF0000;
} 
 
.office5 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12pt;
color: #FF0000;
}

Open in new window

1st-floor.gif

brad2575

you can create the .CSS as an ASP page and then instead of including they style sheet as you would a css file you can use it as an INCLUDE file.

The only difference would be to include the "<style>" tags at the header/footer of the previously .css file and wherever you want the dynamic code to appear use <%=VariableHere%>

Of cource have a default value set for that.

If you need more details let me know.

Dark_Entity

I don't think you can pass variables into a .css file directly, you best bet is to place the css code inline on the asp page and then create a if statement to active the right css style. Something like this

<html> 
 
<head> 
<style>
<% if request("officenumber") = "1" then %>
.office1 {
background: transparent;
border: 5px solid #FF0000;
position: absolute;
z-index: 15;
padding: 0 0 75px 60px; /*top right bottom left*/
margin-top: 183px;
margin-left: 0px;
} 
<%else%> 
.office1 {
background: transparent;
border: 5px solid #FF0000;
position: absolute;
z-index: 15;
padding: 0 0 75px 60px; /*top right bottom left*/
margin-top: 283px;
margin-left: 0px;
} 
% end if %>
</style> 
<title>Floor Plan 1st Floor</title> 
 
 
</head> 
 
<body background="file:///j:/1st_floor.gif">
<p class=Office1></p> 
</body> 
 
</html>

Open in new window

samiam41

ASKER

thanks brad2575
That is sort of the way I was looking but again not very formiluar with asp and css. Can you demonstrate how that would work with my setup.

samiam41

ASKER

Thanks Dark Entity
Not sure if this will work for me I have about 200 office locations using 6 different images. I think if possible maybe a case statement would work but not sure how to do in asp.

ASKER CERTIFIED SOLUTION

brad2575

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Dark_Entity

In that case pass 3 variables to the page,
1) Cords of margin-top location
2) Cords of margin-left location
3) the background image.

<html> 
 
<head> 
<style>
.office {
background: transparent;
border: 5px solid #FF0000;
position: absolute;
z-index: 15;
padding: 0 0 75px 60px; /*top right bottom left*/
margin-top: <%=mytopcords%>px;
margin-left: <%=myleftcords%>px;
} 
 
</style> 
<title>Floor Plan 1st Floor</title> 
 
 
</head> 
 
<body background="<%=background%>">
<p class=Office1></p> 
</body> 
 
</html>

Open in new window

SOLUTION

Dark_Entity

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

samiam41

ASKER

Thanks guys I think we are on the right track now what is the best way to pass from calling page. I see several but not sure which will work best.

Garve

You can pass variables to CSS files through the querystring or a session variable for instance, but you'll need to name them .asp files and add

<% Response.ContentType = "text/css" %>

at the top.

So you might call the stylesheet in the head of your page like this

<link href="/stylesheets/main.asp?mytopcords=100&myleftcords=200" rel="stylesheet" type="text/css">

and in the stylesheet you could add

<% Response.ContentType = "text/css" %>
#box {margin-top:<%=request.querystring("mytopcords")%>px;margin-left:<%=request.querystring("myleftcords")%>px;}

prlamnguyen

You should do different css file to do that.

<%
if (Request.Url.AbsoluteUri.ToLower().IndexOf("style")>-1)
{
string style= Request.QueryString["style"];
Response.Write("<link rel='stylesheet' type='text/css' href='"+ style + "'/>");
}
%>

Or do
<span id="box"
<%
if.... {
%>
style="margin-top: 100px; margin-left: 200px;"><a href="your box url">BOX</a></div>
<%
}
%>
</span>

samiam41

ASKER

Dark Entity I think I am going to go with your idea one other thing though. If I can put all the coordinates into a file and use the office number as the key how could I use that to request mytopcoords and my leftcoords.