SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with DOM object

    Hi,

    I'm writing the JS functions but I've get some errors from the JS console, so:


    Code:
    <script type="text/javascript">
    function rounded(selector,bk,color){
    	var el=document.getElementById(selector);
    	addtop(el,bk,color);
    	addbottom(el,bk,color);
    }
    
    function addtop(el, bk, color){
    	var i;
    	var cn="r";
    	var d=document.createElement("b");
    	d.className="rtop";
    	d.style.backgroundColor=bk;
    	for(i=1;i<=4;i++){
    		var x=document.createElement("b");
    		x.className=cn + i;
    		x.style.backgroundColor=color;
    		d.appendChild(x);
    	}
    	el.insertBefore(d,el.firstChild); // line where console shows error
    }
    
    function addbottom(el,bk,color){
    	var i;
    	var cn="r";
    	var d=document.createElement("b");
    	d.className="rbottom";
    	d.style.backgroundColor=bk;
    	for(i=4;i>0;i--){
    		var x=document.createElement("b");
    		x.className=cn + i;
    		x.style.backgroundColor=color;
    		d.appendChild(x);
    	}
    	el.appendChild(d,el.firstChild);
    }
    </script>
    <script type="text/javascript">
    window.onload=rounded("top","#000","#fff");
    </script>
    The console tells me that object "el" has no properties, anybody can help me?

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Tommy,

    Please post the related css and html, or give us a link to the page.

    It looks kinda strange to be inserting B elements as children of a B element

  3. #3
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re:

    Hi,
    Thank you for reply,
    My script is based on this one:
    http://www.html.it/articoli/nifty/index.html
    But I want to make it easier...

    And here is CSS code:
    Code:
    <style type="text/css">
    #all{
    width: 50%;
    height: auto;
    overflow: auto;
    margin: 0 auto;
    border: 1px solid rgb(0, 0, 0);
    }
    #top{
    display: block;
    width: 100%;
    background-color: #000;
    }
    .rtop{
    display: block;
    }
    .rbottom{
    display: block;
    }
    .r1{
    margin: 0 5px;
    }
    .r2{
    margin: 0 3px;
    }
    .r3{
    margin: 0 2px;
    }
    .r4{
    margin: 0 1px;
    }
    #menu{
    width: 30%;
    float: left;
    border: 1px solid rgb(0, 0, 0);
    }
    #container{
    display: block;
    float: right;
    overflow: hidden;
    width: 60%;
    height: 500px;
    border: 1px solid rgb(0, 0, 0);
    }
    #footer{
    clear: both;
    width: 100%;
    border: 1px solid rgb(0, 0, 0);
    }
    </style>
    and html:
    HTML Code:
    <body>
    <div id="all">
    <div id="top">Top</div>
    <div id="menu">
    <a href="#" onclick="javascript:do_includepag('home.html')">Home</a>
    <a href="#" onclick="javascript:do_includepag('contact.html')">Contact</a>
    <a href="#" onclick="javascript:do_includepag('links.html')">Links</a>
    </div>
    <div id="container">
    Ajax page
    </div>
    <div id="footer">Footer</div>
    </div>
    </body>
    </html>
    It can seems strange but is beacouse that I'm using AJAX to include the pages.
    PS This page is not online...

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whoa! That's cool!

    but why not just use his latest work?

    What about it do you want to simplify?

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I'm starting to see...

  6. #6
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your code works. I only changed two things:

    (1) I copied the exact css from the demo:
    Code:
    b.rtop, b.rbottom{display:block;background: #FFF}
    b.rtop b, b.rbottom b{display:block;height: 1px;
        overflow: hidden; background: #9BD1FA}
    b.r1{margin: 0 5px}
    b.r2{margin: 0 3px}
    b.r3{margin: 0 2px}
    b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
    (2) Your window.onload assignment was wrong:
    Code:
    window.onload = function()
    {
      rounded("top","#fff","#000");
    }

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Btw...

    Since the original code is GPL, please license your modification of his code also as GPL, and give the original author credit

  8. #8
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Thank you very much. I also thing that its very nice and interesting tutorial. About my version... you can see that i don't need function to check the "selector" - this script in tutorial is like library tu use with many divs, tags and id, but i don't need it...
    Best wishes from cold and far Warsaw,
    Tommy!

  9. #9
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re:

    Quote Originally Posted by MikeFoster
    Btw...

    Since the original code is GPL, please license your modification of his code also as GPL, and give the original author credit
    Thanks one more time. Good goal about licence, I'll do it of course...


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
  •