jquery help--just need a push...

josst10 / 2010-03-21 20:26:47   

OK all, I have been at this for about 3 weeks now with no prior experience and this is my first post so please be gentle.

I made it through installation, re-installation, database errors, implementation of the expandable/collapsible menu and horizontal menu installation by searching the threads but can't figure this one out. I would like to try to use this jquery on only one page of my site but need help getting started. If someone could get me started by even telling me the corresponding folders for each of the 4 steps and anything to be aware of or if it is even possible? I just need a push in the right direction.

Thanks for any help...

josst10

lemathieu A / 2010-03-22 09:12:20   

On the Tutorials page, you will found the way to create a plugin that you will call like all the exhibition formats.

lemathieu A / 2010-03-22 11:30:15   

Or simplyer…

  1. This go in your css

            body {
                position: relative;
                width: 100%;
            }
            .box {
                background-color: #F0F0F0;
                color: #888;
                font-family: Arial, Tahoma, serif;
                font-size: 13px;
            }
            .box p {
                padding: 10px;
            }
            .box span {
                float: left;
                font-size: 26px;
                font-weight: bold;
            }
            div.alt {
                background-color: #CCC;
            }

  1. This simply said that you need this version of jquery. Update yours.
  2.     < script type="text/javascript" src="script/jquery-1.3.2.min.js">< /script>

Create a fluid-grid.js and put the 3.1 and 3.2 code inside.
!!! < /script> at line 7 of 3.1 go at the end of 3.2

  1.         <script type="text/javascript">
  2.             var myFluidGrid = {
  3.                 COLNUMBER : 2, // Minimum column number.
  4.                 COLMARGIN : 10, // Margin (in pixel) between columns/boxes.
  5.                 COLWIDTH : 240, // Fixed width of all columns.
  6.                 doLayout : function() {
  7.                     var self = this;
  8.                     var pointer = 0;
  9.                     var arr = [];
  10.                     var columns = Math.max(this.COLNUMBER, parseInt($('body').innerWidth() / (this.COLWIDTH + this.COLMARGIN)));

                    $('.box').css('position', 'absolute').css('width', this.COLWIDTH + 'px');
                    $('.box').each(function() {
                        var tempLeft = (pointer * (self.COLWIDTH + self.COLMARGIN));
                        $(this).css('left', tempLeft + 'px');

                        var tempTop = 0;
                        if (arr[pointer]) { tempTop = arr[pointer];    }
                        $(this).css('top', tempTop + 'px');

                        arr[pointer] = tempTop + $(this).outerHeight() + self.COLMARGIN;
                        pointer++;
                        if (pointer === columns) { pointer = 0; }
                    });
                }
            };
            $(window).ready(function() {
                myFluidGrid.doLayout();
            }).resize(function() {
                myFluidGrid.doLayout();
            });
        

Then copy the Step 1 in your text area. And adjuqst all the values to fit your needs.

lemathieu A / 2010-03-22 11:32:19   

Have you seen ? #(§k° code posting !
;)

josst10 / 2010-03-29 18:37:27   

lemathieu,

You are the man. Apologies for taking so long but I thought I was emailed when a response was posted. Here is what I did and I am missing something as it is not working. Here is the page.

I downloaded and updated the jquery file from here.

  1. In the text area of my page I entered this: (for brevity I replaced the text with test)
  2. <html>
  3. <head>
  4. <title>Fluid grid</title>
  5. <script type="text/javascript" src="script/jquery-1.3.2.min.js"></script>
  6. </head>
  7. <body>
  8. <div class="box alt"><span>00</span>TEST0</div>
  9. <div class="box"><span>01</span>TEST1</div>
  10. <div class="box alt"><span>02</span>TEST2</div>
  11. <div class="box"><span>03</span>TEST3</div>
  12. <div class="box alt"><span>04</span>TEST4</div>
  13. <div class="box"><span>05</span>TEST5</div>
  14. <div class="box alt"><span>06</span>TEST6</div>
  15. <div class="box"><span>07</span>TEST7</div>
  16. <div class="box alt"><span>08</span>TEST8</div>
  17. <div class="box"><span>09</span>TEST9</div>
  18. </body>
  19. </html>
  1. In the file fluid-grid.js in the folder 'ndxz-studio/site/js/fluid-grid.js' I added:
  2. <script type="text/javascript">
  3. ¬†¬†¬†¬†var myFluidGrid = {
  4. ¬†¬†¬†¬†¬†¬†¬†¬†COLNUMBER : 2, // Minimum column number.
  5. ¬†¬†¬†¬†¬†¬†¬†¬†COLMARGIN : 10, // Margin (in pixel) between columns/boxes.
  6. ¬†¬†¬†¬†¬†¬†¬†¬†COLWIDTH : 240 // Fixed width of all columns.
  7. ¬†¬†¬†¬†};doLayout : function() {
  8. ¬†¬†¬†¬†var self = this;
  9. ¬†¬†¬†¬†var pointer = 0;
  10. ¬†¬†¬†¬†var arr = [];
  11. ¬†¬†¬†¬†var columns = Math.max(this.COLNUMBER, parseInt($('body').innerWidth() /  
  12. (this.COLWIDTH + this.COLMARGIN)));
  13. ¬†¬†¬†¬†$('.box').css('position', 'absolute').css('width', this.COLWIDTH  +  
  14. 'px');
  15. ¬†¬†¬†¬†$('.box').each(function() {
  16. ¬†¬†¬†¬†¬†¬†¬†¬†var tempLeft = (pointer * (self.COLWIDTH + self.COLMARGIN));
  17. ¬†¬†¬†¬†¬†¬†¬†¬†$(this).css('left', tempLeft + 'px');var tempTop = 0;
  18. ¬†¬†¬†¬†¬†¬†¬†¬†if (arr[pointer]) { tempTop = arr[pointer];¬†¬†¬†¬†}
  19. ¬†¬†¬†¬†¬†¬†¬†¬†$(this).css('top', tempTop + 'px');
  20. arr[pointer] = tempTop + $(this).outerHeight() + self.COLMARGIN;
  21.         pointer++;
  22. ¬†¬†¬†¬†¬†¬†¬†¬†if (pointer === columns) { pointer = 0; }
  23.     });
  24. }
  25. </script><em>---------suggested by you to be moved here. </em>
  26. $(window).ready(function() {
  27.     myFluidGrid.doLayout();
  28. }).resize(function() {
  29.     myFluidGrid.doLayout();
  30. });
  31. In my '/ndxz-studio/site/sample/style.css' file I added:
  32. body {
  33. ¬†¬†¬†¬†position: relative;
  34. ¬†¬†¬†¬†width: 100%;
  35. }.box {
  36. ¬†¬†¬†¬†background-color: #F0F0F0;
  37. ¬†¬†¬†¬†color: #888;
  38. ¬†¬†¬†¬†font-family: Arial, Tahoma, serif;
  39. ¬†¬†¬†¬†font-size: 13px;
  40. }.box p {
  41. ¬†¬†¬†¬†padding: 10px;
  42. }.box span {
  43. ¬†¬†¬†¬†float: left;
  44. ¬†¬†¬†¬†font-size: 26px;
  45. ¬†¬†¬†¬†font-weight: bold;
  46. }div.alt {
  47. ¬†¬†¬†¬†background-color: #CCC;It doesn't seem to be finding the myFluidGrid variable or loading it.  Thanks not just for this but all of your posts that have cleared up many of my questions. I tried to show you everything I did so I apologize for the lengthy post.  

Also, what is the best way to make code readable here in this forum? I used this website to parse the code are there better ways? Using < code > and < /code > didn't help with the html.

Regards,
josst10

This thread has been closed, thank you.