Jump to content

Rain Lover

Members
 View Profile  See their activity

  • Posts

    62

  • Joined

  • Last visited

 Content Type 

Everything posted by Rain Lover

  1. Rain Lover
    Sample code: <!DOCTYPE html><html><head><title></title></head><body><iframe name="iframe_a" onload="alert('Thanks for the visit!');"></iframe><a href="http://www.example.com/" target="iframe_a">Go!</a></body></html> I'd like to see the alert message after clicking on the link and when the iframe finishes loading. But now it appears on the initial page load, too. How can I achieve it?
  2. Rain Lover
    Seems to be working, but there should be a more straightforward approach to such a simple problem.
  3. Rain Lover
    Here's a Google form: <form action="https://docs.google.com/spreadsheet/formResponse?formkey=dE02TlBHQ2hnVVdkTE5ya0lBYXhaMlE6MQ&ifq" method="POST" id="ss-form"><br><div class="errorbox-good"><div class="ss-item ss-item-required ss-text"><div class="ss-form-entry"><label class="ss-q-title" for="entry_0">First name<span class="ss-required-asterisk">*</span></label><label class="ss-q-help" for="entry_0"></label><input type="text" name="entry.0.single" value="" class="ss-q-short" id="entry_0"></div></div></div><br> <div class="errorbox-good"><div class="ss-item ss-item-required ss-text"><div class="ss-form-entry"><label class="ss-q-title" for="entry_1">Last name<span class="ss-required-asterisk">*</span></label><label class="ss-q-help" for="entry_1"></label><input type="text" name="entry.1.single" value="" class="ss-q-short" id="entry_1"></div></div></div><br><input type="hidden" name="pageNumber" value="0"><input type="hidden" name="backupCache" value=""><div class="ss-item ss-navigate"><div class="ss-form-entry"><input type="submit" name="submit" value="Submit"></div></div></form> And here's the spreadsheet that it feeds:https://docs.google.com/spreadsheet/ccc?key=0ApjOXzxlxbMhdE02TlBHQ2hnVVdkTE5ya0lBYXhaMlE I wonder how to redirect the form to my own customized 'thank you' page on submission.Thanks!
  4. Rain Lover
    That's what I thought at first and wondered if there was a way to achieve what I'm after without adding another HTML element. Thanks anyway!
  5. Rain Lover
    Hi, Sample: <!DOCTYPE html><html><head><title></title><style type="text/css">#left {display:table-cell; width:448px; height:336px; vertical-align:middle; background:black;}#left img {display:block; margin:0 auto;}#right {width:97px; height:326px; padding:5px; overflow-x:hidden; overflow-y:auto; background:black;}</style></head><body><div id="left"><img src="http://dl.dropbox.com/u/4017788/Labs/image2.jpg" alt=""></div><div id="right"> <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb2.jpg" alt=""></a> <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb3.jpg" alt=""></a> <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a> <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb2.jpg" alt=""></a> <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb3.jpg" alt=""></a> <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a> <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb2.jpg" alt=""></a> <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb3.jpg" alt=""></a> <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a></div></body></html> If I use div {float:left;}, the large image won't be vertically centered any more. What's the solution? Many thanks in advance!Mike
  6. Rain Lover
    Hi, Sample: <!DOCTYPE html><html><head><title></title> <style type="text/css">div {display:inline-block; height:200px; overflow-x:hidden; overflow-y:auto;} a {display:block;}img {border:0;} </style></head><body> <div><a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a><a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a><a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a><a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a><a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a> </div></body></html> Except in Internet Explorer and Opera the right part of images are cut. I wonder what's the reason and how they can be displayed the same across different browsers. Many thanks in advance!Mike
  7. Rain Lover
    Hi, Sample: <!DOCTYPE html><html><head><title></title> <style type="text/css">#container {width:300px; overflow-x:auto; overflow-y:hidden; white-space:nowrap;}img {border:0;} </style></head><body> <div id="container"><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a> </div></body></html> How can I reduce the space between the links to 1px? Many thanks in advance!Mike
  8. Rain Lover
    Here's a sample gallery: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title>Slideshow</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css">#large {width:448px; height:336px; background:#000 url(http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg) no-repeat center;}#thumbs {padding-top:12px; overflow:auto; white-space:nowrap; width:448px;}img {padding:1px; width:80px; height:60px;}img:hover {background:#00F;}</style></head> <body> <div id="large"></div> <div id="thumbs"> <img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="" onclick="document.getElementById('large').style.backgroundImage='url(http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg)';"><img src="http://lh3.googleusercontent.com/-JU5a-eDnOSg/Thc7g5UkwLI/AAAAAAAAABI/9aCyCMixWb4/s800/thumb2.jpg" alt="" onclick="document.getElementById('large').style.backgroundImage='url(http://lh3.googleusercontent.com/-u5BHGxpr0rg/Thc6hLbDRKI/AAAAAAAAAA8/IvQWzJBvqjg/s800/image2.jpg)';"><img src="http://lh4.googleusercontent.com/-TdbbNGFbDNk/Thc7g0IBSsI/AAAAAAAAABM/pxpntZaTVoQ/s800/thumb3.jpg" alt="" onclick="document.getElementById('large').style.backgroundImage='url(http://lh4.googleusercontent.com/-4AMWSfi8q7A/Thc6haUv1QI/AAAAAAAAABE/oRdTWawPi_c/s800/image3.jpg)';"></div> </body></html> I wonder how I can highlight the active thumbnail so its background remains blue until I click another one. Thanks in advance!Mike
×
×
  • Create New...