Solved

How to pass variables from asp to css

Posted on 2008-10-27
11
731 Views
Last Modified: 2012-06-22
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
Comment
Question by:samiam41
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
  • +2
11 Comments
 
LVL 16

Expert Comment

by:brad2575
ID: 22814346
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
 

Expert Comment

by:Dark_Entity
ID: 22814362
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
 
LVL 9

Author Comment

by:samiam41
ID: 22814371
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
Technology Partners: 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!

 
LVL 9

Author Comment

by:samiam41
ID: 22814520
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
 
LVL 16

Accepted Solution

by:
brad2575 earned 250 total points
ID: 22814640
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
 

Expert Comment

by:Dark_Entity
ID: 22814669
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
 

Assisted Solution

by:Dark_Entity
Dark_Entity earned 250 total points
ID: 22815027
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
 
LVL 9

Author Comment

by:samiam41
ID: 22816051
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
 
LVL 7

Expert Comment

by:Garve
ID: 22817884
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
 

Expert Comment

by:prlamnguyen
ID: 22826915
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
 
LVL 9

Author Comment

by:samiam41
ID: 22833164
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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question