Charlie Calvert on Elvenware

Writing Code and Prose on Computers

Elvenware

Exploring jQuery Text

Click on this paragraph to make it disappear

We are using the JQuery Click Method to make this happen.

Here is what the code looks like. First we make sure the paragraphs above are assigned to a class called hideMe, then we write the following:

$("hideMe").click
(
	function() 
	{ 
		$(this).slideUp(); 
	}
);

Restore Text

Working with Menus

This can be a great trick for making menus appear and disappear on small devices. The problem you face is the lack of real estate on small devices. So you need to find a way to make menus visible when the user wants them, but hidden by default. One technique is to put a hyperlink or button at the top of the screen that when toggled makes the menu appear or disappear. The code is just what you see above. You put the whole menu in some element that has an id with a name like "TheMenu". Then write some CSS:

p {
	 border: thin black solid;
	 width: 90px;
	 border-radius:8px;
	 text-align:center;
	 padding: 5px;
}

And add a little JQuery:

function toggleMenu() 
{    
	$('ul.theMenu').slideToggle('medium');
}

And some simple HTML:

<p class="menu_class" onclick="toggleMenu()">Toggle Menu</p>
<ul class="theMenu" hidden="true">
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a></li>
</ul>

Like this: