visibility & disable

[raheleh]

Hi every body
I don't JavaScript language well. I want to know about visibility or disable html's controls on a web page. I have a web page and I want disable some controls and print my page and after that the controls back to preview condition.
Pleeeeeeeeeeeeeeas help me:sad:

[tgreer]

Research the CSS "visible" property.

[autocrat]

... raheleh ...

sorry - but are you asking to "hide";
1) some parts of the webpage content, such as hding a menu, or some advertising banners etc...
2) some part of the browser window, suc has the toolbar, addressbar etc...

???

If (1), then same goes as from tgreer, look into CSS properties... possibly even create a seperate stylesheet just for that view.

If (2), there are sites out that will give you a form, and create the JS you need based on your input. All you do is C&P that code.

Note, if you use the JS method, you will probably have to open a new window, (not good for accessibility standards compliance!), and some people aren't keen on having now real control over a window!

Further, the JS is likely to work on the more common browsers, but not all, (probably IE5+, maybe NN6+ abd MFF1+).

[digital-ether]

Hi every body
I don't JavaScript language well. I want to know about visibility or disable html's controls on a web page. I have a web page and I want disable some controls and print my page and after that the controls back to preview condition.
Pleeeeeeeeeeeeeeas help me:sad:

Pretty much what you're asking is how to style elements with JavaScript?

Styling elements with JS is very similar to CSS.

Heres an example for hiding an element with the id "hide_div".
eg CSS:

#hide_div {
  display: none;
}

eg JS:

document.getElementById('hide_div').style.display = 'none';

Most the time you want to hide or display a div as a result of a user generated event.

In CSS you have the event, "hover". In JS its "onmouseover".

Eg:

eg CSS:

#hide_div {
  display: none;
}

/* show the div on hover (non-IE only if not an anchor) */
#hide_div:hover {
  display: block;
}

eg JS:

var element = document.getElementById('hide_div');
element.style.display = 'none';

element.onmouseover = function() {
  element.display = 'block';
}

element.onmouseout = function() {
  element.display = 'none';
}

Even though you can use JavaScript to change the style of html elements , its ususally better to let CSS do the work of styling, and just use JavaScript to switch between different styles. You can do this by changing the className (css calles it "class") of the element you want to style.

Example:

If you want to hide an element, create a class for hidden elements with CSS.

.hidden {
display: none;
}

Then when you want to hide an element, just change its class to "hidden" so that it adopts the styles in the "hidden" class.

// adopt the "hidden" class style when clicked

var el = document.getElementById('my_element_id');

el.onclick = function() {
  el.className = 'hidden';
}

or you can check if its already hidden, and show it if it is:

.hidden {
display: none;
}

.shown{
display: block;
}

// adopt the "hidden" class style when clicked

var el = document.getElementById('my_element_id');

el.onclick = function() {
  el.className = (el.className == 'hidden') ? 'shown' : 'hidden';
}

Thats the same as:

// adopt the "hidden" class style when clicked

var el = document.getElementById('my_element_id');

el.onclick = function() {
 if  (el.className == 'hidden') {
   el.className = 'shown';
 } else {
   el.className = 'hidden';
 }
}

hope that gets you started.

What you'll need to look at are:

The DOM - document object model
The DOM function: getElementById()
DOM CSS: http://www.howtocreate.co.uk/tutorials/javascript/domcss
DOM Events: http://www.howtocreate.co.uk/tutorials/javascript/domevents