Category Archives: script ajax

raccolta script ajax

Tab animati con jQuery!

Demo: http://www.gayadesign.com/scripts/tabbed/

  1.  
  2. .tabbed_content {
  3. background-color: #000000;
  4. width: 620px;
  5. }
  6.  
  7. .tabs {
  8. height: 62px;
  9. position: relative;
  10. }
  11.  
  12. .tabs .moving_bg {
  13. padding: 15px;
  14. background-color:#7F822A;
  15. background-image:url(../images/arrow_down_green.gif);
  16. position: absolute;
  17. width: 125px;
  18. z-index: 190;
  19. left: 0;
  20. padding-bottom: 29px;
  21. background-position: bottom left;
  22. background-repeat: no-repeat;
  23. }
  24.  
  25. .tabs .tab_item {
  26. display: block;
  27. float: left;
  28. padding: 15px;
  29. width: 125px;
  30. color: #ffffff;
  31. text-align: center;
  32. z-index: 200;
  33. position: relative;
  34. cursor: pointer;
  35. }
  36.  
  37. .tabbed_content .slide_content {
  38. overflow: hidden;
  39. background-color: #000000;
  40. padding: 20px 0 20px 20px;
  41. position: relative;
  42. width: 600px;
  43. }
  44.  
  45. .tabslider {
  46. width: 5000px;
  47. }
  48.  
  49. .tabslider ul {
  50. float: left;
  51. width: 560px;
  52. margin: 0px;
  53. padding: 0px;
  54. margin-right: 40px;
  55. }
  56.  
  57. .tabslider ul a {
  58. color: #ffffff;
  59. text-decoration: none;
  60. }
  61.  
  62. .tabslider ul a:hover {
  63. color: #aaaaaa;
  64. }
  65.  
  66. .tabslider ul li {
  67. padding-bottom: 7px;
  68. }
  69.  
  1.  
  2. //tab effects
  3.  
  4. var TabbedContent = {
  5. init: function() {
  6. $(".tab_item").mouseover(function() {
  7.  
  8. var background = $(this).parent().find(".moving_bg");
  9.  
  10. $(background).stop().animate({
  11. left: $(this).position()['left']
  12. }, {
  13. duration: 300
  14. });
  15.  
  16. TabbedContent.slideContent($(this));
  17.  
  18. });
  19. },
  20.  
  21. slideContent: function(obj) {
  22.  
  23. var margin = $(obj).parent().parent().find(".slide_content").width();
  24. margin = margin * ($(obj).prevAll().size() - 1);
  25. margin = margin * -1;
  26.  
  27. $(obj).parent().parent().find(".tabslider").stop().animate({
  28. marginLeft: margin + "px"
  29. }, {
  30. duration: 300
  31. });
  32. }
  33. }
  34.  
  35. $(document).ready(function() {
  36. TabbedContent.init();
  37. });
  38.  

Post random su WordPress in AJAX

1. Sulla sidebar.php incollate questo codice:

<h4>Random Post</h4>

<ul>

<li id="randomPost">... loading ...</li>

</ul>

<a href="#" id="another">Get another!</a>

2. Create una nuova pagina template e incollate questo codice PHP:

<?php

/*

Template Name: Random Post

*/

?>

<?php

query_posts('showposts=1&orderby=rand');

the_post();

?>

<a href='<?php the_permalink(); ?>'><?php the_title(); ?></a>

3. Salvate la pagina appena creata dentro una cartella chiamata "/random/" (potete chiamarla come volete)

4. Per effettuare il refresh della pagina hai bisogno d includere anche questo codice jQuery:

$("#randomPost").load("/random/");

$("#another").click(function(){

$("#randomPost")

.text("... loading ...")

.load("/random/");

return false;

});