 | 2012-01-12 Memebase forever |
| 2012-01-11 Strange squares |
| 2011-12-22 TVV Ondernemingsportaalnl.com zuigt ezel |
| 2011-12-08 Dilbert vs Skype |
| 2011-11-29 The uncanny resilience of bulshytt |
| 2011-11-23 Another silly Trojan attempt |
| 2011-10-29 ACTA is coming our way |
| 2011-10-28 Burgernet in the Netherlands |
| 2011-10-27 Facepalm art |
| 2011-10-26 Do not drag this image |
| 2011-10-22 Off The Grid Challenge |
| 2011-10-12 PI like a boss |
| 2011-10-07 Once upon a time |
| 2011-07-13 Dutch eticket system for trains |
| 2011-07-12 Is Hell exothermic or endothermic |
| 2011-04-27 Optical Illusions |
| 2011-04-19 Odd lyrics |
| 2011-04-16 Band Revival at MON |
| 2011-03-13 Protests in the Middle East and you |
| 2011-03-10 Mac OSX Hotkey for locking your system |
| 2011-02-12 dnspb 0.06 is out |
| 2011-02-08 Would I buy this fridge |
| 2011-02-06 InstaYouth |
| 2011-02-05 The Thinker is back |
| 2011-01-17 Math challenge |
| 2011-01-11 Zero tolerance and zero intelligence |
| 2011-01-05 My interest income in 1991 |
| 2011-01-01 Your horoscope by Eddie |
| 2010-12-22 New York City Tours might be half price for you |
| 2010-12-20 Weather Forecast |
| 2010-12-14 World Economy Collapse explained in 3 minutes |
| 2010-12-13 The Salvation Army and its choice of toys |
| 2010-12-08 Elizabeth thinks highly of me |
| 2010-12-06 Should I trust my government with my data |
| 2010-12-05 Announcing dnspb |
| 2010-12-03 Realistic piechart |
| 2010-11-26 Crossroads 2.71 is out |
| 2010-11-24 8 bit Starwars |
| 2010-11-17 Six to eight black men |
| 2010-11-16 Canada wants backdoors and data and everything |
| 2010-11-11 Autumn storm over the Netherlands |
| 2010-10-08 USA wants backdoors to everything |
| 2010-10-05 Sudoku solver in Perl |
| 2010-10-02 Finally wrote up a Syscheck page |
| 2010-09-28 Neon sign fail |
| 2010-09-27 The Renault Eco Team |
| 2010-09-23 Crossroads 2.68 is out |
| 2010-09-20 How to suppress Flash cookies |
| 2010-09-15 Meanwhile on Facebook |
| 2010-09-09 The Yes Men Fix The World |
| 2010-09-07 ed is not dead |
| 2010-08-26 Installing Perl modules in a non root environment |
| 2010-08-22 Magic self leviation |
| 2010-08-20 Google Chrome does not support offline Gmail |
| 2010-08-19 The number 48 |
| 2010-08-12 Welsh trout mini HOWTO |
| 2010-08-04 Fooling a NetCache proxy into fetching forbidden files |
| 2010-07-30 The world will end on May 21, 2011 |
 |
2010-07-28 Hiding or showing a textbox with image animation using JQuery |
|
More eye candy in the browser!
Here's a very quick description how you can hide or show a text
box in a browser, with image animation in a title bar that suggests
that the box can be opened or closed.
Here are some concepts:
- Internally we'll use JQuery to show or hide page content.
- We'll need an outer div which will be always visible. In this,
there will be...
- A title div, also always visible. Clicking an image in the
title div toggles the visibility of...
- A content div, which is either visible or not.
Typical usage
Here is a small example. For visibility, the outer div has a border
around it. There's a small arrow in the title to toggle the visibility
of the contents. The shown arrow is the
file /img/arrow-down.png, it's a transparent arrow that will
look right on any background. Once the content hides, the image
changes to /img/arrow-right.png (If you want, get the images
from my site. I made them, and they are not copyrighted. Use
them however you like.) Try it out, click on the arrow below.
Click the arrow to hide or show contents.
Lorem ipsum dolor sit amet, aliquam dolor, viverra et in, amet
lacus. Felis elit ligula integer, dolor lacus, tellus integer duis
ut amet, metus et aenean. Iaculis mollis vestibulum odio amet duis
quis, sodales nulla tellus enim proin, scelerisque praesent erat
integer felis dictum et, nam vestibulum dui eros, ut adipiscing
porttitor in. Nunc nibh malesuada ut aliquam cursus, enim
fermentum cursus aliquam pretium lorem, consequat interdum
dictumst placerat pellentesque, vel volutpat eget eu, tortor quis
lacus metus. Donec cras aliquam nulla dictumst magna, vulputate
lacus erat, augue orci ut sit pellentesque condimentum aliquet,
amet sodales sit egestas praesent. Fringilla ultricies
consectetuer felis, turpis nulla blandit cursus eros purus velit,
metus nec urna, diam mi esse consectetuer duis sem morbi. Eros
semper in eu, mauris magna vitae sed mi vitae, sed non porta wisi,
nam habitant, vivamus fermentum sodales enim nam. Vestibulum id
risus duis omnis sed pellentesque, cursus magna egestas nunc in,
pulvinar sed sit ante luctus ut, rutrum placerat malesuada purus
lacus erat, nam nulla porttitor vel nibh. Massa sit sem elementum
pretium. Nulla sed pede a, leo eu libero nam tellus aenean, mus
lobortis semper leo arcu massa sed, non vero.
Right. Onward to the code. First of all, you will need JQuery, a
JavaScript library, which is included in the head section of the
page. You can get your copy of jquery.js
at jquery.com. (The
downloaded copy might have a filename like jquery-1.4.2.min.js,
i.e., with a version ID etc. in it. For practical purposes, I'm just
referring to it as jquery.js.)
<html>
<head>
<script type="text/javascript" src="/where/ever/jquery.js">
</script>
</head>
<body> <!-- body content comes here --> </body>
</html>
Next, you'll need a text box. Here's what comes in the body.
<!-- Outer box. We give it a 1pt border to make it stand out. -->
<div style="border: 1pt">
<!-- Title box. We give it a slightly different back ground color to
to make it stand out. Inside is the image of the arrow (initially:
down), with an onclick handler to toggle (see below). Also there
is a box title. The image must have some id, in this example it is
arrowimage. -->
<div style="background-color: #d0d0d0">
<img id="arrowimage" src="/img/arrow-down.png"
onclick="togglebox('arrowimage', 'contentbox');"/>
<b>Click the arrow to hide or show the contents.</b>
</div>
<!-- The content box. It must have an id, in this example it is
contentbox. Note that the above id of the arrow and the id
this box are used in the call to the function togglebox().
We also give it a nice background color. -->
<div id="contentbox" style="background-color: #e0e0e0">
Lorem ipsum dolor sit amet, ..... non vero.
</div>
</div>
Right. The only thing that remains is the Javascript
function togglebox(). It works as follows:
- It expects two arguments: the ID of the image of a box, and the
ID of the content div of a box.
- When the content div is visible, then the image is swapped
to /img/arrow-right.png and the content is hidden.
- When the content div is hidden, then the image is swapped
to /img/arrow-down.png and the content is shown.
Here it is.
<script>
function togglebox(image_id, content_id) {
if ($('#' + content_id).is(':visible')) {
$('#' + image_id).attr('src', '/img/arrow-right.png');
$('#' + content_id).hide('fast');
} else {
$('#' + image_id).attr('src', '/img/arrow-down.png');
$('#' + content_id).show('fast');
}
}
</script>
An initially hidden textbox
The text box can be initially made hidden, so that it "unfolds"
when a user clicks the arrow. The easiest way to do that, is to draw
the box as shown above, but to run togglebox() just once to
hide it. From then on the user can take over to show it. The following
box should be initially hidden, but you can click on the arrow to show
its contents:
Click the arrow to hide or show contents.
Lorem ipsum dolor sit amet, aliquam dolor, viverra et in, amet
lacus. Felis elit ligula integer, dolor lacus, tellus integer duis
ut amet, metus et aenean. Iaculis mollis vestibulum odio amet duis
quis, sodales nulla tellus enim proin, scelerisque praesent erat
integer felis dictum et, nam vestibulum dui eros, ut adipiscing
porttitor in. Nunc nibh malesuada ut aliquam cursus, enim
fermentum cursus aliquam pretium lorem, consequat interdum
dictumst placerat pellentesque, vel volutpat eget eu, tortor quis
lacus metus. Donec cras aliquam nulla dictumst magna, vulputate
lacus erat, augue orci ut sit pellentesque condimentum aliquet,
amet sodales sit egestas praesent. Fringilla ultricies
consectetuer felis, turpis nulla blandit cursus eros purus velit,
metus nec urna, diam mi esse consectetuer duis sem morbi. Eros
semper in eu, mauris magna vitae sed mi vitae, sed non porta wisi,
nam habitant, vivamus fermentum sodales enim nam. Vestibulum id
risus duis omnis sed pellentesque, cursus magna egestas nunc in,
pulvinar sed sit ante luctus ut, rutrum placerat malesuada purus
lacus erat, nam nulla porttitor vel nibh. Massa sit sem elementum
pretium. Nulla sed pede a, leo eu libero nam tellus aenean, mus
lobortis semper leo arcu massa sed, non vero.
Here's how this looks in the code:
<!-- Outer box -->
<div>
<!-- Title box and content box go here, just as in the above
example. -->
</div>
<!-- Now we initially hide the textbox. The image id and content id
must match the id's in the divs. -->
<script type="text/javascript">
togglebox('arrowimage', 'contentbox');
</script>
Playing around with a floating box
Same thing, but a floating box.
Lorem ipsum dolor sit amet, aliquam dolor, viverra et in, amet
lacus. Felis elit ligula integer, dolor lacus, tellus integer duis
ut amet, metus et aenean. Iaculis mollis vestibulum odio amet duis
quis, sodales nulla tellus enim proin, scelerisque praesent erat
integer felis dictum et, nam vestibulum dui eros, ut adipiscing
porttitor in. Nunc nibh malesuada ut aliquam cursus, enim
fermentum cursus aliquam pretium lorem, consequat interdum
dictumst placerat pellentesque, vel volutpat eget eu, tortor quis
lacus metus.
The same concept can be re-used on the same page, as long as the image
id and content div id are unique per textbox. As with any div, the
textbox can be placed inline with text, just by adding a style, as
in: <div style="float: right; width: 200pt"> There are
lots of possibilities to play around with.
Have fun! And as ever, if you have neat additions
- drop me a note.
|
|
|
| 2010-07-27 Manipulating browser cookies using Javascript |
| 2010-07-25 Survival of the fittest book |
| 2010-07-23 Pastafarians in Spain |
| 2010-07-22 You have two sheep |
| 2010-07-09 Highway bank fire |
| 2010-07-08 Setting up a remote git repository |
| 2010-07-06 Bye bye trusted old Macbook |
| 2010-06-28 John Cleese on Football |
| 2010-06-23 ABN Amro and the Pathetic Customer Service Dept. |
| 2010-06-22 Wally does not like criticism |
| 2010-06-14 Soccermatch Netherlands vs Denmark |
| 2010-06-13 Lazy Cat |
| 2010-06-08 Reading public Buzz using the Google API |
| 2010-06-07 A Personal Letter from Steve Martin |
| 2010-06-05 Sushi Saturday |
| 2010-06-04 Suppressing the Enter key with Javascript |
| 2010-05-31 Temporal spacial anomaly on the Dutch highway |
| 2010-05-23 Greenhost will not log your traffic |
| 2010-05-10 Jarlsberg Webapp Exploits |
| 2010-05-04 A Thought Experiment |
| 2010-05-03 SafeEdit information updated |
| 2010-05-01 Microproxy now supports ftp |
| 2010-04-30 What could get Data angry |
| 2010-04-29 Lego Mindstorm solving the Rubik Cube |
| 2010-04-28 Crossroads 2.65 is out |
| 2010-04-17 Goggomobil in its natural habitat |
| 2010-04-14 Bacon Time |
| 2010-04-11 104 More friends to connect with |
| 2010-04-10 Bacteria infested radio reporter |
| 2010-04-07 The Kubat STAR |
| 2010-03-30 Homework Essay |
| 2010-03-29 C++ mutexes again |
| 2010-03-20 Weird Eyechart |
| 2010-03-15 Microproxy 1.01 |
| 2010-03-05 Microproxy |
| 2010-03-03 Sven Kramer and the wrong lane |
| 2010-02-26 Endearing Babe Magnet |
| 2010-02-17 Speed of light measured using chocolate and a microwave |
| 2010-02-17 Never again expires after 65 years |
| 2010-02-16 encfs on the Mac |
| 2010-02-15 Hyves.nl and sexual predators |
| 2010-02-10 Funny textbook |
| 2010-02-09 DNS failing after sleep wake cycle |
| 2010-02-06 Blast from the past |
| 2010-01-28 Simple and straight Perl HTTP::Proxy |
| 2010-01-15 Avatar the Movie |
| 2010-01-08 Slightly NSFW Linux Ad |
| 2010-01-07 WTF |
| 2010-01-05 Stop Software Patents in the EU |
| 2009-12-05 HammerServer 1.02 |
| 2009-11-28 Perls Automagical Autoloading |
| 2009-10-07 Office Poster |
| 2009-10-06 The nr 1 Nerdjoke |
| 2009-10-04 WoW Startscript for my Mac |
| 2009-09-27 HammerServer section is online |
| 2009-09-26 The BING HQ |
| 2009-09-26 Digging a WOW Tunnel |
| 2009-06-29 Wee Todd |
| 2009-06-23 The On Off Switch Revisited |
| 2009-06-22 Meatspace |
| 2009-05-30 My old houses |
| 2009-05-11 LOLcats are funny |
| 2009-05-11 Civic Duty WIN |
| 2009-05-10 Vote for the baby, Sky Radio promo FAIL |
| 2009-05-05 My secure data center |
| 2009-02-15 My Valentine is sending me a dot exe |
| 2009-02-05 MacPorts trash: .mp_123456 savefiles cleaning |
| 2009-02-01 Truecrypt 6 on Linux and the ext3 filesystem |
| 2009-01-28 www versus nl.youtube.com |
| 2009-01-27 Songsmith and The Police |
| 2009-01-25 My own Ministery of Silly Walks |
| 2009-01-09 CoolIris Mini HOWTO |
| 2008-11-04 UDP and DNS balancing |
| 2008-11-02 Life in graphs |
| 2008-11-01 Skeined yet? |
| 2008-10-30 New Crossroads on the horizon |
| 2008-10-28 Thread safe or not |
| 2008-10-15 WOW patch 3 on a case sensitive MacOSX filesystem |
| 2008-10-15 Surprising C++ optimizations |
| 2008-10-14 Weird system message |
| 2008-10-08 Data mining against terrorism does not work |
| 2008-09-16 Crossroads at the top of Freshmeat.net |
| 2008-09-09 Stupid spammers at Computable |
| 2008-09-06 Spam prevention with Postfix and Postgrey |
| 2008-09-03 The Gnomish Flying Machine |
| 2008-08-27 Bank customer data on eBay |
| 2008-08-26 Mutexes in C++ Threads |
| 2008-08-22 4M dataloss in the UK last year |
| 2008-08-21 Dropping spam with Postfix and Spamassassin |
| 2008-08-18 Bayes and the War on Photography |
| 2008-08-13 Good marital advice |
| 2008-08-12 Squid proxy for personal usage |
| 2008-08-11 Posix threads in C++ |
| 2008-08-09 Crossroads mailing list |
| 2008-08-08 Crossroads 2.00 is out |
| 2008-08-01 Fail Pics |
| 2008-07-14 The Fish Dance |
| 2008-07-01 Big Bother and Massive Data Storage |
| 2008-06-30 MMV One of omitted Unix tools |
| 2008-06-08 Even anonymous breadcrumbs can give you away |
| 2008-05-29 Crossroads in Argentina |
| 2008-05-20 The Party at the Company Outing |
| 2008-05-19 Crossroads 1.80 is out |
| 2008-05-18 Where does technical innovation really come from |
| 2008-05-16 Corporate bs generator |
| 2008-05-15 Even the Vatican has to adapt |
| 2008-05-12 Big Brother is watching your dog |
| 2008-05-09 666 all over the place |
| 2008-04-17 Security and privacy are incompatible |
| 2008-04-16 The Hallmark E Card |
| 2008-04-15 Crosroads Solaris port is out |
| 2008-04-04 Identity theft can cost you dearly |
| 2008-04-03 Crossroads can already do that |
| 2008-03-31 A dagerous safari |
| 2008-03-28 Why some Java J2EE projects are inefficient |
| 2008-03-26 The Hummingbird |
| 2008-03-25 The Easter delusion |
| 2008-03-18 McAfee detects mass hack of 200.000 webpages |
| 2008-03-17 More predictive statistics |
| 2008-03-10 Backwards conclusions even on Slashdot |
| 2008-02-18 A fractal photograph |
| 2008-02-15 Kaprekar revisited |
| 2008-02-14 Kaprekar numbers |
| 2008-02-12 A tale of the criminal ineptitude |
| 2008-02-10 Irritating Selfregistered users in PHPBB |
| 2008-02-08 B2B Spam in the Netherlands |
| 2008-02-06 Surprising iSight Capture |
| 2008-02-05 Breadcrumbs at WickedLasers.com |
| 2008-01-29 iSight Capture Utility |
| 2008-01-28 The Male Brain |
| 2008-01-26 Searching for the next Uri Geller |
| 2008-01-24 Opt in for b2b spam |
| 2008-01-14 Bokito Revisited |
| 2008-01-13 Top Crossroads User |
| 2008-01-12 World of Warcraft Dancing |
| 2008-01-12 Justice dispensed better late than never |
| 2008-01-11 Jeremy Clarkson and Identity Theft |
| 2008-01-10 Terrorism in the Netherlands |
| 2007-12-07 The mind and bodysnatchers are among us |
| 2007-12-05 Bruce Schneier and Hildo |
| 2007-12-04 Bye bye, good Christian soul |
| 2007-12-03 Confusing mail message |
| 2007-11-30 Medion MD 85276 reviewed |
| 2007-11-29 Recent cases of data exposure |
| 2007-11-20 Bayes bites |
| 2007-11-19 Japan starts fingerprinting foreigners |
| 2007-11-14 Privacy, Yahoo and the Strange World |
| 2007-11-14 Privacy, Fall through algorithms, and Securing data |
| 2007-11-07 European airlines to retain data |
| 2007-11-03 BloggEd |
| 2007-10-30 Wilders and Marktplaats.nl |
| 2007-10-28 The goldplated Mac |
| 2007-10-26 More morons |
| 2007-10-26 Dilbert nails it again |
| 2007-10-23 Rough yet funny |
| 2007-10-05 Another silly Trojan mail |
| 2007-10-01 So ugly it is beautiful |
| 2007-09-28 Here is a nickel kid |
| 2007-09-23 Spy Shredder |
| 2007-08-29 Web svn view 1.08 |
| 2007-08-24 Caught in THE Process |
| 2007-08-21 Stupid Trojan attack |
| 2007-08-21 Back in 1994 |
| 2007-08-20 A girly iPod |
| 2007-08-17 Crossroads for RDP connections |
| 2007-08-15 Firewall art |
| 2007-08-14 jpeginfo |
| 2007-08-13 Good People |
| 2007-08-07 The Real Crossroads |
| 2007-07-30 BBC Documentaries in the Netherlands |
| 2007-07-12 No problems with Crossroads so far |
| 2007-07-11 Politically correct ad nauseam |
| 2007-07-02 Waka Waka Poem |
| 2007-07-02 Voyage of the rubber ducks |
| 2007-06-28 The On Off Switch |
| 2007-06-27 No free lunch |
| 2007-06-25 Crossroads web interface |
| 2007-06-25 Blinkenlights |
| 2007-06-21 There is no silver bullet |
| 2007-06-18 Motto of the week |
| 2007-06-18 Do not feed the troll |
| 2007-06-17 Which programming language are you |
| 2007-06-13 Crossroads support request |
| 2007-06-12 Bokito glasses |
| 2007-06-07 Apache mod_proxy balancer description |
| 2007-06-05 A ticketnumber is not support |
| 2007-06-05 403 Hammertime |
| 2007-06-04 Playground Fun |
| 2007-05-24 Ascii man |
| 2007-05-07 Cannot find the damn server |
| 2007-05-02 The BFG200 |
| 2007-04-27 Crossroads Top User |
| 2007-03-30 Crossroads Usage |
| 2007-03-25 The guy with the dark motorhelmet |
| 2007-03-22 The Process and The Result |
| 2007-03-21 Quotes attributed to Jos |
| 2007-03-20 A really nice comment about Crossroads |
| 2007-03-18 Kubat in the air |
