Category Archives: dom

css: display vs visibility

Leave a reply

Tip: Even invisible elements takes up space on the page. Use the “display” property to create invisible elements that do not take up space.

Definition

The visibility property sets if an element should be visible or invisible.

Inherited: No

Tip: Even invisible elements takes up space on the page. Use the “display” property to create invisible elements that do not take up space.

JavaScript Syntax

CSS properties can also be dynamically changed with a JavaScript.

Scripting Syntax: object.style.visibility=”hidden”

In our HTML DOM tutorial you can find more details about the visibility property.

In our HTML DOM tutorial you can also find a full Style Object Reference.

Example

p
{
visibility: hidden
}

Possible Values

Value Description
visible The element is visible
hidden The element is invisible
collapse When used in table elements, this value removes a row or column, but it does not affect the table layout. The space taken up by the row or column will be available for other content. If this value is used on other elements, it renders as “hidden”

source:http://www.w3schools.com/CSS/pr_class_visibility.asp





multi level menu js less

Leave a reply

Meet the markup





To start, we should use the best method for defining a navigation menu — a list. For this example, we will work on a simple HTML unordered list. {Line wraps are marked ». –Ed.}

<ul>
  <li>Sunfishes
    <ul>
      <li><a href="">Blackbanded»
        sunfish</a></li>
      <li><a href="">Shadow bass</a></li>
      <li><a href="">Ozark bass</a></li>
      <li><a href="">White crappie</a></li>
		</ul>
	</li>

  <li>Grunts
    <ul>
      <li><a href="">Smallmouth grunt
        </a></li>
      <li><a href="">Burrito</a></li>
      <li><a href="">Pigfish</a></li>
    </ul>
  </li>

  <li>Remoras
    <ul>
      <li><a href="">Whalesucker</a></li>
      <li><a href="">Marlinsucker</a></li>
      <li><a href="">Ceylonese remora</a></li>
      <li><a href="">Spearfish remora</a></li>
      <li><a href="">Slender suckerfish</a></li>
    </ul>
  </li>
</ul>

Quite straightforward really — nice and neat HTML that, as a result, is highly accessible. But now we want to transform this into a dynamic list — the first level of list items will make up a horizontal menu bar from which the second level lists will drop down.

Continue reading →

dom event

Leave a reply

DOM Event interface

Event handlers may be attached to various elements in the DOM. When an event occurs, an event object is dynamically created, and passed sequentially to the event listeners that are allowed to handle the event. The DOM Event interface is then accessible within the handler function, via the event object passed as the first (and the only) argument.

The following simple example shows how an event object is passed to the event handler function, and can be used from within one such function.

Note there is no “evt” parameter passed in the code below. The event object gets passed automatically to foo. All that is needed is to define a parameter in the event handler to receive the event object.

function foo(evt) {
  // event handling functions like this one
  // get an implicit reference to the event object they handle
  // (in this case we chose to call it "evt").
  alert(evt);
}
table_el.onclick = foo;
Example
<html>
<head>
<title>event object parameter example</title>

<script type="text/javascript">

function showCoords(evt){
  alert(
    "clientX value: " + evt.clientX + "\n" +
    "clientY value: " + evt.clientY + "\n"
  );
}

</script>
</head>

<body onmousedown="showCoords(event)">
<p>To display the mouse coordinates click anywhere on the page.</p>
</body>
</html>

source: https://developer.mozilla.org/En/DOM:event

iframes: Different ways to access it

Leave a reply

Different ways how to access iframes:

Check out http://www.quirksmode.org/js/iframe.html for detailed explanation.

ie bug: form within a form not posting values

Leave a reply

You might be wondering why you cannot post the values of some fields even it’s inside the form.

Having a form within a form in your html code/dom is a BIG issue when it comes to ie.

Some of the issues you will encouter are listed below:

1. You won’t be able to post the values of those fields and it’s not even on the $_POST coz basically those fields within nested form is not recognize.
2. When calling javascript those fields are undefined.

I read from another source that it has something to do with the DOM in ie. So in order to solve this issue fix your form. Remove the nested form in your html code. :)