Home ›
ASP.NET Forums » General ASP.NET » Client Side Web Development » Change div Background Using Focus

Change div Background Using Focus

Last post 12-13-2007 9:46 AM by Suprotim Agarwal. 2 replies.

Sort Posts:

  • Change div Background Using Focus

    12-13-2007, 7:10 AM
    • Loading...
    • adamargyle
    • Joined on 12-13-2007, 11:45 AM
    • Posts 42

    I have an input text box this is contained within a 'search' div used to
    hold the background image. I want to use the onfocus property of that input
    box to change the background property of the 'search' div when the user clicks into the search box. 

    How would I do this, I can get the background/color of the actual input box to change but cannot work out how to change the div which it is contained within?

    #container form div.search {
        background-image: url(searchbg.png);
        width: 148px;
    }


                <form class="searchform" method="get" action="">
                    <div class="search">
                            <input name="find" maxlength="100" size="12" class="search" value="Search" type="text" id="search-form" />
                    </div>
                </form>   

     

  • Re: Change div Background Using Focus

    12-13-2007, 9:32 AM
    Answer
    • Loading...
    • A1ien51
    • Joined on 05-06-2005, 6:46 PM
    • MD USA
    • Posts 2,852

    #container form div.search {
        background-image: url(searchbg.png);
        width: 148px;
    }

    #container form div.search2 {
        background-color: #123123;
        width: 148px;
    }
                <form class="searchform" method="get" action="">
                    <div class="search" id="search">
                            <input name="find" maxlength="100" size="12" class="search" value="Search" type="text" id="search_form" onfocus="document.getElementBtId('search').className='search2';"/>
                    </div>
                </form>   
     

    FYI: a dash (-) is not leagal in an id 

    Eric 

    Coauthor of Ajax In Action [#1 Computer and Internet book on Amazon for 2006]

    If you get an answer to your question, please mark it solved so people don't waste time reading already answered questions!

  • Re: Change div Background Using Focus

    12-13-2007, 9:46 AM
    Answer

    Hi,

    A sample containing both ASP.NET as well as HTML text box

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

    <!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" language="javascript">

    function ChngColor()

    {

    document.getElementById(    'original').className = 'bckg';

    }

    </script>

     

    <style type="text/css">

    .bckg

    {

    background-color:gray;

    }

    </style>

    </head>

    <body>

    <form id="form1" runat="server">

    <div id="original">

    <asp:TextBox ID="TextBox1" onclick="ChngColor();" runat="server"></asp:TextBox>

    <input name="find" onfocus="ChngColor();" maxlength="100" size="12" class="search" value="Search" type="text" id="search-form" /></div>

    </form>

    </body>

    </html>

    You can use an image instead of the background color :)

    HTH,
    Suprotim Agarwal

    -----
    http://www.dotnetcurry.com
    -----

    27 GridView Tips & Tricks | Generate 10000 lines of .NET Code in minutes | MSDN Moderator MVP
Page 1 of 1 (3 items)
RSS Available

Advertise on ASP.NET

About this Site

Microsoft Communities
Page view counter