SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru
    Join Date
    Oct 2011
    Posts
    658
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    function with css code for active button

    Hi..

    I don't know if my idea is possible and if how can I do that.

    I have functions for button onclick.

    I have 3 buttons and I want to change the color of my button if it is active

    here is my code
    Code:
    <script type="text/javascript">
    //=========display parameter settings==========//
    function display_PS(){
        document.loading_kanban.action="ParameterSettings.php";
        document.loading_kanban.submit();
    }
    //=======display kanban=========//
    function display_Kanban(){
        document.loading_kanban.action="kanban_report.php";
        document.loading_kanban.submit();
    }
    //=========display SR==========//
    function display_SR){
        document.loading_kanban.action="StockRequisition.php";
        document.loading_kanban.submit();
    }
    </script>
    <div id="main_button">
    <input type="button" name="parameter_settings" value="Parameter Settings" onclick="display_PS()">
    <input type="button" name="parameter_settings" value="Stock Requisition" onclick="display_SR()"> 
    <input type="button" name="parameter_settings" value="Kanban Report" onclick="display_Kanban()">
    </div>
    Is it possible to add code in my function for css active button..If no what should I do to change the color of my button for the client to know what page she is.

    Thank you

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newphpcoder View Post
    Is it possible to add code in my function for css active button..If no what should I do to change the color of my button for the client to know what page she is.
    Here's how: ID Your Body For Greater CSS Control and Specificity
    With a video tutorial too: Current Nav Highlighting: Using PHP to Set the Body ID
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Guru
    Join Date
    Oct 2011
    Posts
    658
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried this code:

    Code:
    <script type="text/javascript">
    function resetButtonColor() {
        var info=document.getElementById('main_button').getElementsByTagName('input');
        for (var i=0; i<info.length; i++) { info[i].style.backgroundColor = 'white'; }
    }
    //=========display parameter settings==========//
    function display_PS(pick){
        resetButtonColor();
        pick.style.backgroundColor = 'lime';
        document.loading_kanban.action="ParameterSettings.php";
        document.loading_kanban.submit();
    }
    //=======display kanban=========//
    function display_Kanban(pick){
        resetButtonColor();
        pick.style.backgroundColor = 'lime';
        document.loading_kanban.action="kanban_report.php";
        document.loading_kanban.submit();
    }
    //=========display SR==========//
    function display_SR(pick){
        resetButtonColor();
        pick.style.backgroundColor = 'lime';
        document.loading_kanban.action="StockRequisition.php";
        document.loading_kanban.submit();
    }
    </script>
    <div id="main_button">
    <input type="button" name="parameter_settings" value="Parameter Settings" onclick="display_PS(this)">
    <input type="button" name="parameter_settings" value="Stock Requisition" onclick="display_SR(this)"> 
    <input type="button" name="parameter_settings" value="Kanban Report" onclick="display_Kanban(this)">
    </div>
    and the result is when I click the button the lime color diplay but it disappear.. I want to stay the color because it is active.

    Thank you

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newphpcoder View Post
    and the result is when I click the button the lime color diplay but it disappear
    Go back to the article on how to ID Your Body For Greater CSS Control and Specificity and study it more closely. Significant parts of that article it seems you have not noticed yet, and applied to what you are doing.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •