jQuery - Random On Load


/ Published in: jQuery
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <!-- Google jQuery call -->
  2. <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  3. <script type="text/javascript">
  4. // You may specify partial version numbers, such as "1" or "1.3",
  5. // with the same result. Doing so will automatically load the
  6. // latest version matching that partial revision pattern
  7. // (i.e. both 1 and 1.3 would load 1.3.2 today).
  8. google.load("jquery", "1.3.2");
  9.  
  10. google.setOnLoadCallback(function() {
  11. // Place init code here instead of $(document).ready()
  12. });
  13. </script>
  14.  
  15. <script type="text/javascript">
  16.  
  17. this.randomtip = function(){
  18. var length = $("#tips li").length;
  19. var ran = Math.floor(Math.random()*length) + 1;
  20. $("#tips li:nth-child(" + ran + ")").show();
  21. };
  22.  
  23. $(document).ready(function(){
  24. randomtip();
  25. });
  26.  
  27. </script>
  28.  
  29. <style type="text/css">
  30.  
  31. #tips, #tips li{
  32. margin:0;
  33. padding:0;
  34. list-style:none;
  35. }
  36.  
  37. #tips{
  38. width:250px;
  39. font-size:16px;
  40. line-height:120%;
  41. }
  42.  
  43. #tips li{
  44. padding:20px;
  45. background:#e1e1e1;
  46. display:none; /* hide the items at first only */
  47. }
  48.  
  49. </style>
  50.  
  51.  
  52. <ul id="tips">
  53. <li>... if you want to become a better coder you need to eat your vegetables?</li>
  54. <li>... it takes more time to code a web page then to make a pizza?</li>
  55. <li>... you should validate your code?</li>
  56. <li>... jQuery is your friend? For real!</li>
  57. <li>... no matter what some people claim, you can't learn CSS in 3 hours?</li>
  58. </ul>

URL: randomOnLoad

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.