Jump to content


  • Posts

  • Joined

  • Last visited

About LaLaLa

  • Birthday 11/19/1993

Previous Fields

  • Languages
    HTML, XHTML, CSS, PHP, JavaScript, GML, C, and C++ (somewhat)

Contact Methods

  • Website URL
  • ICQ

Profile Information

  • Location
    Runescape, RuneHQ, or W3Schools
  • Interests
    ~ I like creating HTML code and making websites.<br />~ I like playing Runescape a lot!<br />~ I like reading books, especially Harry Potter, The Chronicles Of Narnia, and The Hobbit.<br />~ I like watching movies, especially Harry Potter (All), Lord of the Rings (All), Star Wars (All), Shrek (All), and Narnia.

LaLaLa's Achievements


Newbie (1/7)



  1. Double topic; delete this topic, please.
  2. I have created some code that collapses a <div> smoothly, changes the inner HTML, and then reopens the <div> smoothly. The code works perfectly in Internet Explorer 8, but stops after the first resize in FireFox 3.5 and doesn't continue looping. No errors are returned by either browser. Here is the java script: <script type="text/javascript"> function section_change(var_section_parameter) { var_section=var_section_parameter; section_visible(document.getElementById("section_content_div").offsetHeight,-1); } function section_visible(var_original_height,var_direction) { if(var_direction==-1) { if(document.getElementById("section_content_div").offsetHeight>0) { var_change=(-((document.getElementById("section_content_div").offsetHeight-var_original_height/2)*(document.getElementById("section_content_div").offsetHeight-var_original_height/2))+var_original_height*var_original_height/4)/1200+1; document.getElementById("section_content_div").style.height=(document.getElementById("section_content_div").offsetHeight-var_change)+"px"; document.getElementById("section_content_border_left").style.height=(document.getElementById("section_content").offsetHeight-var_change)+"px"; document.getElementById("section_content_border_right").style.height=(document.getElementById("section_content").offsetHeight-var_change)+"px"; document.getElementById("main_border_left").style.height=(document.getElementById("main").offsetHeight-var_change)+"px"; document.getElementById("main_border_right").style.height=(document.getElementById("main").offsetHeight-var_change)+"px"; document.getElementById("title").style.opacity=document.getElementById("section_content_div").offsetHeight/var_original_height; document.getElementById("title").filters.alpha.opacity=document.getElementById("section_content_div").offsetHeight/var_original_height*100; setTimeout("section_visible("+var_original_height+","+var_direction+");",30); } else { setTimeout("section_change_continue();",500); } } else if(var_direction==1) { if(document.getElementById("section_content_div").offsetHeight<var_original_height) { var_change=(-((document.getElementById("section_content_div").offsetHeight-var_original_height/2)*(document.getElementById("section_content_div").offsetHeight-var_original_height/2))+var_original_height*var_original_height/4)/1200+1; document.getElementById("section_content_div").style.height=(document.getElementById("section_content_div").offsetHeight+var_change)+"px"; document.getElementById("section_content_border_left").style.height=document.getElementById("section_content").offsetHeight+"px"; document.getElementById("section_content_border_right").style.height=document.getElementById("section_content").offsetHeight+"px"; document.getElementById("main_border_left").style.height=document.getElementById("main").offsetHeight+"px"; document.getElementById("main_border_right").style.height=document.getElementById("main").offsetHeight+"px"; document.getElementById("title").style.opacity=document.getElementById("section_content_div").offsetHeight/var_original_height; document.getElementById("title").filters.alpha.opacity=document.getElementById("section_content_div").offsetHeight/var_original_height*100; setTimeout("section_visible("+var_original_height+","+var_direction+");",30); } } } function section_change_continue() { if(var_section=="Game Maker") { //Change innerHTML... } document.getElementById("section_content_div").style.height="100%"; var_new_height=document.getElementById("section_content_div").offsetHeight; document.getElementById("section_content_div").style.height="0px"; section_visible(var_new_height,1); } </script> The "section_change("Game Maker");" function is called when an anchor is clicked.
  3. What are the CSS equivalents of the cellpadding and cellspacing attributes of a <table> element? I have tried setting the table's margin and padding to 0px but this has no effect.
  4. What you suggested didn't work, although it gave me an idea and setting img{display:block;} works fine Thanks.
  5. @Ingolme: The "defer" attribute is what I was thinking of, although I wasn't aware that it only worked in Internet Explorer. Nice script.@dsonesuk: I understood what you meant and have already implemented it. It works like a charm :)I now have another problem ... my site works fine when using the HTML 4.01 Transitional DTD and forcing Quirks Mode rendering, which I happened to randomly try, but when using any standards complient Doctype (XHTML 1.1, for instance), 4px of padding are added below the left and right border images. I tested some things by setting background colors and the <td> in which the <img> is contained isn't the problem (the background color shows through), so it's like I put img{margin-bottom:4px;}. What the crap? Also, after finding this problem I removed the JavaScript and set an explicit height for the images (just to test), and it was the same.
  6. I know that it will return an error if you try to access an element that has not yet been loaded, but it would return "Error: Object Expected". What I'm talking about is different. Look at the following code:<html><body><div id="the_div">Crap.<br />More crap.</div><script>alert(document.getElementById("the_div").style.height);</script></body></html> This will return an error saying "style.height" is undefined because you haven't set a specific height for the <div>, even though it's like 40px tall.Also, you used a double assignment in your code: In the line before //alert(x), you put "var y = document.getElementById('left').style.height=x+'px';". Notice the two equal signs, so it is basically "y=height=x;". Considering you used this, I guess it is allowed.Lastly, about what you were saying concerning using onload, there is an attribute keyword that you can put in a script tag in the <head> that automatically fires it once the DOM has finished loading, but I forget what it is. An even easier way is to simply put <script> tags in the body after the required elements, so it will run as soon as possible. These methods prevent using external JS files, but they are much faster.
  7. Ah, I know that if you read the "style.height" property for something that hasn't been explicitly set then it is considered undefined, but "offsetHeight" will return this in pixels? Is this well supported on IE, FF, etc.?And does JavaScript allow double assignments (x=y=5)?
  8. I can't have repeat-y because my image isn't just a 22x1px border, it's a screen shot of the highlight of a window (originally 520px high), so it has to be stretched/shrunk. I know that what you are suggesting would work, but that's not what I need in this situation.
  9. I am beginning to create a new website. I have decided to use a Windows Vista Aero WinAPI theme, which is why I must use tables. I need a top and bottom border image around the main content, and left and right border images that expand to the height of the content. These border images are cropped screenshots of windows to make the content actually appear to be within a window. So far, the images look perfect, although I cannot get the left and right border images to expand properly. Here is my current code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><body style="margin:0px;overflow:auto;text-align:center;"><table style="font-size:14px;font-family:'Segoe UI';width:769px;" cellpadding="0" cellspacing="0"><tr><td style="background-image:url('Top.bmp');height:42px;" colspan="3"></td></tr><tr><td style="width:22px;"><img src="Left.bmp" style="height:100%;" /></td><td style="background:rgb(240,240,240);height:600px;">Rebar Control<div style="margin:10px;">Text.</div></td><td style="width:27px;"><img src="Right.bmp" style="height:100%;" /></td></tr><tr><td style="background-image:url('Bottom.bmp');height:26px;" colspan="3"></td></tr></table></body></html> If you read through the tags' attributes you should be able to tell what I am trying. The left and right <td>s expand to the full height, but any content within them (such as an <img> tag or even the image nested within a <div>) does not expand.What I am more generally asking, and the problem to which no one can find a solution, is how to get content within a <td> element to automatically expand (or srink) to that size, without actually affecting the <tr>'s height. For example, if a <td> is 500px tall and you have an image within it, get the image to automatically stretch to 500px (by setting <img height="100%">?, but this doesn't work), regardless of the image's native height.
  10. Well yes, that's because I only changed the first line and use "...etc...." to indicate that you needed to make the same changes to the rest of the lines of code in your example. Replace the document.write with what I showed you for everything else.
  11. LaLaLa

    Html Image Maps?

    Lol or you could just open up your image in MS Paint and hover over the areas you want.
  12. I believe what you want is to change all the document.write's to document.getElementById("cell2").innerHTML=document.getElementById("cell2").innerHTML+whateverYouWantToAdd. (Note the "cell2" id for the cell that you want the stuff to be written to.) Just conecate what's already in the second cell with what you are tyring to add. For example:HTML<html><script type="text/javascript" src="test.js"></script><script type="text/javascript" src="revisedtest.js"></script><body><table border="1"><thead>Testing</thead><tr><td><button type="Load" onclick="test()">click me</button></td><td><button type="revised" onclick="revised()">make revised</button></td></tr><tr><td> </td><td id="cell2"> </td></tr></table></body></html> JavaScript document.getElementById("cell2").innerHTML=document.getElementById("cell2").innerHTML+"<table border='1'>";...etc....; I believe this is what you want?
  13. Ah-Ha! I never thought about setting the height of the <html> tag (although having to do so makes no sense). Thank you, this works perfectly.
  14. The extension of any externally linked file (CSS or JS) is irrevelevent, correct?
  • Create New...