Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

How do you dynamically specify a backgroun image to a <DIV>?

Posted on 2006-06-28
16
Medium Priority
?
303 Views
Last Modified: 2007-12-19
How do you dynamically specify a backgroun image to a <DIV>? I use ASP.NET 2.0 (C#) in VS2005.
0
Comment
Question by:chuang4630
[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
  • 7
  • 6
  • 3
16 Comments
 
LVL 27

Expert Comment

by:Sammy Ageil
ID: 17004876
run the Div at server and use something like this

this.myDiv.Style.Add("background", "url(rightBorder.gif) repeat-y right");

of course change myDiv to match your Div ID and this has to be placed in page load

HTH
0
 
LVL 1

Author Comment

by:chuang4630
ID: 17004905
What does "repeat-y right" for?
0
 
LVL 1

Author Comment

by:chuang4630
ID: 17005007
I added this line but it does not work. For test purpose, I added this in the buton exception handler.
I also view the source of the page, the style has no change at all.

0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 27

Expert Comment

by:Sammy Ageil
ID: 17005187
repeat is for the image to repeat itself based on the X and Y coodinates of the browser
it has to be added in page load
If you have a div called test and add the code I provided for you, run the page and the source would show this

<div id="test" style="background:url(rightBorder.gif) repeat-y right;">
    <p>Test div</p>
    </div>
    <div>
make sure your image is stored in a proper directory in order for it to work

HTH
0
 
LVL 27

Expert Comment

by:Sammy Ageil
ID: 17005202
if you want to do another test try it with this image
this.test.Style.Add("background", "url(http://webdivisions.net/Images/banner.gif) repeat-y right");
you will see the image strech and aligned to the right

HTH
0
 
LVL 1

Author Comment

by:chuang4630
ID: 17005231
It works now. The problem is about the event handler.

Is it possible to "FEED" the image from memory rather than load from file system?
0
 
LVL 12

Expert Comment

by:deanvanrooyen
ID: 17005233
use a panel

it is the equal to div then you can set the Panel1.BackImageUrl, this is the easiest way.
0
 
LVL 27

Expert Comment

by:Sammy Ageil
ID: 17005256
You should be able to feed the image from memory if you plug in the outout to a variable and replace the url(myvar). but why create the extra work?
0
 
LVL 12

Expert Comment

by:deanvanrooyen
ID: 17005268
opps you go it working already...

from memory
http://aspalliance.com/726
0
 
LVL 1

Author Comment

by:chuang4630
ID: 17005475
panel is not desirable since it mess up the page on FireFox.
0
 
LVL 1

Author Comment

by:chuang4630
ID: 17005490
http://aspalliance.com/726: commercial product of netCharting?
0
 
LVL 1

Author Comment

by:chuang4630
ID: 17005519
This is a document review application. Each document has its own watermark in the background. It has to be created dynamically. It is done. The remaining issue is to "FEED" it to the browser as a background. The backup plan is to ssave it on the file system and let the browser to load it up. It is done, thanks to Sammy's suggestion. The drawback is the scalability and the concurrency. The best way is to feed the image from memory. The memory will be reclaimed once it is done.

Is there any sample?
0
 
LVL 27

Expert Comment

by:Sammy Ageil
ID: 17005559
try to stream the image like its done here
http://www.eggheadcafe.com/articles/20050911.asp
0
 
LVL 1

Author Comment

by:chuang4630
ID: 17005608
But how do you stream the image to Background (or background style sheet)?
0
 
LVL 27

Expert Comment

by:Sammy Ageil
ID: 17005674
how are you streaming the image?
the image should be saved in the stream so how and given a name, you can use that name in the url.
I have to leave now but if you want, post your stream code and I will take a look at it at a later time. in case I dont make it I am sure there are a lot of guys who can help once they see the stream code
0
 
LVL 12

Accepted Solution

by:
deanvanrooyen earned 1500 total points
ID: 17015081
please take a look at this for some javascript manipulations from file


aspx page
////////////////////////////////////
<%@ Page Language="C#"  AutoEventWireup="true" CodeFile="div.aspx.cs" Inherits="div" %>

<!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" >
<head runat="server">
    <title>Untitled Page</title>
<script type="text/javascript">
function getObj(name)
{
  if (document.getElementById)
  {
        this.obj = document.getElementById(name);
      this.style = document.getElementById(name).style;
  }
  else if (document.all)
  {
      this.obj = document.all[name];
      this.style = document.all[name].style;
  }
  else if (document.layers)
  {
         this.obj = document.layers[name];
         this.style = document.layers[name];
  }
}
function changeDiv(col)
{
      var x = new getObj('q');
      x.style.height = 200;
      x.style.backgroundImage = 'url(' + col +')'
}
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="q">
        <br />
        <a  href="javascript:changeDiv('IMG_0413.jpg');" title="color">html change color anchor</a>
        <br />
        <asp:HyperLink ID="HyperLink1" runat="server">HyperLink control change color anchor</asp:HyperLink>
        <br />
        <a  href="javascript:changeDiv('');" title="color">clear div</a>
        </div>
    </form>
</body>
</html>

code behind
////////////////////////////

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class div : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            string image = "IMG_0413.jpg";
            string js = "changeDiv('" + image + "')";
            this.HyperLink1.Attributes.Add("href", "javascript:" + js);
        }
    }

}

0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

One of the pain points with developing AJAX, JavaScript, JQuery, and other client-side behaviors is that JavaScript doesn’t allow for cross domain request for pulling content. For example, JavaScript code on www.johnchapman.name could not pull conte…
Today is the age of broadband.  More and more people are going this route determined to experience the web and it’s multitude of services as quickly and painlessly as possible. Coupled with the move to broadband, people are experiencing the web via …
Monitoring a network: how to monitor network services and why? Michael Kulchisky, MCSE, MCSA, MCP, VTSP, VSP, CCSP outlines the philosophy behind service monitoring and why a handshake validation is critical in network monitoring. Software utilized …
In this video you will find out how to export Office 365 mailboxes using the built in eDiscovery tool. Bear in mind that although this method might be useful in some cases, using PST files as Office 365 backup is troublesome in a long run (more on t…
Suggested Courses

715 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