Solved

How to pass variables from asp to css

Posted on 2008-10-27
11
719 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
  • 4
  • 3
  • 2
  • +2
11 Comments
 
LVL 16

Expert Comment

by:brad2575
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 9

Author Comment

by:samiam41
Comment Utility
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
Comment Utility
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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 

Expert Comment

by:Dark_Entity
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
jQuery value within div undefined 3 17
SVG Star 4 16
Bootstap Icons 3 18
modify h2 4 8
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

772 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now