www.webdeveloper.com
Results 1 to 6 of 6

Thread: javascript styling doesn't work

  1. #1
    Join Date
    Mar 2011
    Posts
    3

    javascript styling doesn't work

    [b]this is not completed, i'm posting it before i click wrong and it is lost

    I am new to javascript, and i am making a webaplication in php. Some of the divisions have to be resized, and i use javascript to do this. It doesn't work, and I can't find my fault. Here is a piece of the code:

    Code:
    <script type=\"text/javascript\"><!--
    
    function wreg()
    { var pageh = document.getElementById('page').Height; var hsmlh = document.getElementById('hsml').Height; var hlrgw = document.getElementById('hlrg').Width; var wrknw = document.getElementById('wrkn').Width; var hlrgh = var pageh - var hsmlh; var tiliw = var hlrgw - var wrknw; document.getElementById('hlrg').Height = var hlrgh; document.getElementById('tili').Width = var tiliw; }
    function expand()
    { document.getElementsByName("cols").colSpan="9"; document.getElementsByName("expand").style.display=table-cell; var expand=true; }
    function despand()
    { document.getElementsByName("cols").colSpan="5"; document.getElementsByName("expand").style.display=none; var expand=false; }
    (some more javascript code...)
    //--></script> <div class="nob page" id="page" >
    <div class="heightsmall" id="knop">
    <table class="collapse stretchw">
    <form method="post" action="<?php echo $_SERVER["PHP_SELF"]; ?>">
    (a lot of table rows) <tr>
    <td class="buttonback padeen"><button class="pointer input stretchw" type="button" accesskey="a" onclick="expand(); wreg()">toon <u>a</u></button></td> <td class="buttonback padeen"><button class="pointer input stretchw" type="button" accesskey="s" onclick="despand(); wreg()">verberg <u>s</u></button></td>
    </tr>
    </form>
    </table>
    </div>
    <div class="heightlarge scroll y nob" id="hlrg">
    <div class="tijdlijn scroll x inline" id="tili">
    <table class="table nob">
    (a whole lot of table rows)
    </table>
    </div>
    <div class="werken" id="wrkn">
    <table class="table">
    (a whole lot of table rows, eatch with his own <form> exept the <th>'s)
    </table>
    </div>
    </div>
    </div>


    and this is a part of the css stylesheet:

    [CODE]
    //the deleted but used classes; i'll change that:
    //heightsmall
    .page
    {
    height:100%;
    width:100%;
    margin:5px;
    padding:0px;
    }
    .nob, .nob:hover
    {
    border:0px solid #1975FF;
    }
    .stretchw
    {
    width:100%;
    }
    .collapse
    {
    border-collapse:collapse;
    }
    .buttonback
    {
    background-color:#1975FF;
    border:1px solid #9FDFFF;
    }
    .buttonback:hover, .buttonback:active, .buttonback:focus
    {
    background-color:#1975FF;
    border:1px solid #9FDFFF;
    }
    .padeen
    {
    padding:0px 3px 0px 3px;
    }
    .input
    [INDENT{
    color:#9FDFFF;
    background-color:#1975FF;
    border:0px solid #9FDFFF;
    margin:0px;
    }
    .input:hover
    [INDENT{
    color:#CFFFFF;
    background-color:#2285FF;
    border:0px solid #9FDFFF;
    margin:0px;
    }
    .input:active, .input:focus
    [INDENT{
    color:#AFEFFF;
    background-color:#1265DF;
    border:0px solid #9FDFFF;
    margin:0px;
    }[/INDENT].pointer
    {
    cursorointer;
    }

  2. #2
    Join Date
    Mar 2011
    Posts
    3
    i just found out i can't edit my posts, so i'll go on here.

    Code:
    //another class deleted: .heightlarge, .werken
    
    .scroll
    	{
    	scrollbar-arrow-color:#1975FF;
    	scrollbar-face-color:#8888FF;
    	scrollbar-highlight-color:#80C0E0;
    	scrollbar-3dlight-color:#9FDFFF;
    	scrollbar-shadow-color:#1975FF;
    	scrollbar-darkshadow-color:#0060E0;
    	scrollbar-track-color:#8888AA;
    	}
    .y
    	{
    	overflow-y:scroll;
    	}
    .x
    	{
    	overflow-x:scroll;
    	}
    .tijdlijn
    	{
    	overflow:scroll;
    	float:right;
    	}
    i think that was it. I appologize for my posting. I really hope anyone can help me.

  3. #3
    Join Date
    Mar 2011
    Posts
    16

    Misplacing 'var'

    First off, you need to remove the 'var' for the pageh and hsmlh variables when you are setting the hlrgh variable. Thisin itself will create an error, so change all of those variable definitions, and next is the actual styling statements. You must set what's on the right of the equals sign in quotes, unlike in CSS where you don't need them. Try it out and see how it goes.

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Better post a link to test document.

  5. #5
    Join Date
    Mar 2011
    Posts
    3
    @Qazino: I did what you said, but it doesn't work. I doubt the quotes actually because it is a variable, but that could also be a php habbit.

    @Kor: I attached a zip of the file how it is now. I don't know if you can something with it, cause it is in php and you'll miss the mysql database.

  6. #6
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    ZIP is not useful. You have there server-side variables we can not reproduce.

    Or: try to isolate the problem. Remove everything is not related with the problem. Do create a small HTML/CSS/JS file which shows only that the error. Isolating the problem is, usually, a good method to find yourself the solution.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles