• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 742
  • Last Modified:

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
0
samiam41
Asked:
samiam41
  • 4
  • 3
  • 2
  • +2
2 Solutions
 
brad2575Commented:
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.
0
 
Dark_EntityCommented:
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

0
 
samiam41Author Commented:
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.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
samiam41Author Commented:
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.
0
 
brad2575Commented:
first save your .css page as .asp

Then add to the begining/end of the page
<style>
  -- existing .css code from page here
</style>

Then have whatever variables you wanted to change in the CSS file declared either just under the <style> or somewhere else, using a session variable or a database query.  You would just want to make sure that you set some default so if none is selected it would set the values to 0 or whatever you want the default/unselected to be.

An example you could do (not sure the actual values you need to change but this is just an example of how to use ASP/CSS the values of each particular style would change depending on what you want changed) is to change it to this:

.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 <%=ASPPadding4ForOffice%>px; /*top right bottom left*/
margin-top: <%=ASPMarginTopForOffice%>px;
margin-left: 0px;
}


Since the ASP code is run first (on the server) the browser will just see the values that are put in for the variables and not the variables themselves.
0
 
Dark_EntityCommented:
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

0
 
Dark_EntityCommented:
I see brad is also going the same way, the full code would look like below, example URL being send would be. http://www.mysite.com/office.asp?mytopcords=230&myleftcords=0&background=1st_floor.gif
<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: <%=request("mytopcords")%>px;
margin-left: <%=request("myleftcords")%>px;
} 
 
</style> 
<title>Floor Plan 1st Floor</title> 
</head> 
 
<body background="<%=request("background")%>">
<p class="Office"></p> 
</body> 
 
</html> 

Open in new window

0
 
samiam41Author Commented:
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.
0
 
GarveCommented:
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;}

0
 
prlamnguyenCommented:
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>
0
 
samiam41Author Commented:
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.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 3
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now