Tag: hide

HTML Elements and altering them

With javascript you can alter the different elements within the HTML page, which is great when you are doing things like AJAX and you just want to alter one part of the page and not the whole page.

All you need to do is to get the element that you want to “talk” to and then alter that HTML tags element parts, so lets say that you have a HTML P tag

  <p id="hideme">

you can get that element within a variable for javascript to talk to it via

     var elem = document.getElementById("hideme");

and now you can alter all parts of that HTML P tag, e.g. the style, the inner HTML text (which is the text within the <p>innerHTML</p> tags) which gives you allot more things to do on the page that allows more of a desktop feel to the site over a static page that you need to send back and forth to the server.

Of course you cannot alter any internal parts of the HTML tag that do not exist e.g. for the HTML Input there is no innerHTML because it only has a value (the text within the input box) so if you try and do that some web browsers will error/stop/or just ignore.

Here is the full source code that will alter a HTML P style to red and also the innerHTML, and also a lower one will hide and then show the text within a HTML P tag whilst altering the link to show either “click here to hide me”/”click here to show me”, which once again helps users to now what to do.

<html>
<head>
<script language="javascript">
  function hideme()
  {
     var elem = document.getElementById("hideme");
     var elema= document.getElementById("hidemea");
 
     if (elem.style.display == "none")
     {
	elem.style.display = "block";
	elema.innerHTML = "click to hide me";
     }
     else
     {
	elem.style.display = "none";
	elema.innerHTML = "click to show me";
     }
  }
 
  function start()
  {
    var inputElem = document.getElementById("thewords");
    // you cannot alter the innerHTML of a input tag because it does not have any!!.
    // some browsers will error here because you cannot alter the innerHTML of a input tag
    //inputElem.innerHTML = "somewhere";
    // but you can alter the HTML A tag value because that is what input has
    inputElem.value = "genux was here!";
 
    var para = document.getElementById("paragraph");
    para.innerHTML = "I have changed the text within the paragraph!!!.. yeppy.. and also the colour to red ";
    // you also have access to the style(s) attached to that HTML tag, in this case the color 
    para.style.color = "red";
  }
</script>
</head>
<body>
  <input id="thewords"/>
  <a onclick="javascript:start()">Click me</a>
  <p id="paragraph">
  some text within the paragraph
  </p>
  <p id="hideme">
  hideme after the click below<br/>
  you can alter the style e.g. style.display = value<br/>
  and also alter the innerHTML - as I am altering the HTML A tag below text from hide/show me
  </p>
  <a id="hidemea" onclick="javascript:hideme()">click to hide me</a>
</body>
</html>

with using more javascript on pages, you need to have a way of keeping details of the updates on a page if you browse away from that page and come back which is where some problems could arise. So you just need to freshen up on your HTML tags and what they are capable of doing and have fun 🙂

hover over to show a hidden element

Sometimes you may not have the luxury of having javascript to do some of the great things that it can do, like showing hidden content on the screen when you hover over a HTML element (like a A HTML tag for example). In CSS you can achieve a similar result with using some of the overflow and styling elements of un/ordered lists to accomplish a similar result.

If you save this code as codingfriends_showhide.html and then open it up in Firefox or your browser of choice (not sure if it will work in IE6 shall have to check it !). and then just hover over the block and it will display the hidden message 🙂

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS - show/hide on hover</title>
<style type="text/css">
/* the main ul block, there is no list style at all e.g. all together */
#showhideblock {
	list-style:none;
	margin:0;
	padding:0;
}
/* the main ul block elements push to the left and make there display inline e.g. no breaks */
#showhideblock li {
	float:left;
	width:200px;
	height:55px;
	display:inline;
	border:1px solid black; 
}
 
/* the basic showing element of the list */
#showhideblock li .show{
	display:block;
	width:200px;
	height:55px;
}
/* hide the hiding element of the list with the height of 0 and overflow set to hidden */
/* but once shown display in black */
#showhideblock li .hide {
	color : black;
	height: 0; /* hide the .hide element */
	overflow: hidden;
	background:black;
}
/* when you hover over the shown element, set the hidden element sizes */
#showhideblock li:hover .hide, #showhideblock li.over .hide {
	height: 55px;
	width:  200px;
}
/* when you hover over the shown element set the shown element height and overflow values */
#showhideblock li:hover .show, #showhideblock li.over .show {
	height: 0;
	overflow: hidden;
}
 
/* set the show a href links to colour of black (on the white background of the shown element */
/* and the textual size to be bigger than normal */
#showhideblock li a {
	color:black;
	font-size:1.5em;
}
/* since changing the background colour of the hidden element to black, change the on hover */
/* to have a textual colour of white */
#showhideblock li a:hover {
	color:white;
}
</style>
</head>
 
<body>
<ul id="showhideblock">
    <li>
      <a class="show" href="#"  title="The image to show">Hover over me, what has been hidden ?</a>
      <div class="hide">
	<a href="#" title="the hidden link">Codingfriends - I was hidden here all along</a>
      </div>
    </li>
</ul>
</body>
</html>

In essence the main parts of the code are as follows, you need to set the unordered list to have a list style of none with the list elements (li) having a display of being inline (which means that there is no breaks between the elements).

#showhideblock {
	list-style:none;
...
#showhideblock li {
	display:inline;

with this in place you can use the size of show and hide elements with also the overflow set to hidden (when you hover over the block you need to set the shown element overflow to hidden and set the size of the hidden element so that it shows)

#showhideblock li .hide {
	color : black;
	height: 0; /* hide the .hide element */
	overflow: hidden;

And once you have saved the above file and opened up in your browser of choice when you now hover over the “Hover over me” text you will see the hidden text instead.