jQuery Forum

I am using the following code to allow the user to increase / decrease
the font size of the document. I have tested it in many browsers and
in all of the following it comes back with a starting font size of
16px.
Firefox 3.0.8
Google Chrome 1.0.1
Safari Win 4 Public Beta
In IE 6/7 the font size is always coming back 1243px. Why is there
such a difference and is there anyway to get around this besides hard
coding the starting size?
<script type="text/javascript" language="javascript">
$(document).ready(function(){
    var originalFontSize = getFontSize();
    $(".resetFont").click(function(){
        setFontSize(originalFontSize);
        $("#changeFont").fadeToggle("fast");
        return false;
    });
    $(".increaseFont").click(function(){
        var fontSize = getFontSize();
        var newFontSize = fontSize + 1;
        setFontSize(newFontSize);
        return false;
    });
    $(".decreaseFont").click(function(){
        var fontSize = getFontSize();
        var newFontSize = fontSize - 1;
        setFontSize(newFontSize);
        return false;
    });
});
function getFontSize() {
    var currentSize = $("html").css("font-size");
    var currentSizeNumber = parseFloat(currentSize, 12);
    if(currentSizeNumber > 20) {
        currentSizeNumber = 20;
    }
    return currentSizeNumber;
}
function setFontSize(size) {
    $("html").css("font-size", size);
}
</script>

On a single page I am trying to use 1 theme for my accordion and 1
theme for my tabs. The themes in 1.7 have one huge css file and it
seems like a real pain to go through and delete what I don't need.
Even if I could do that it's not really a good solution because i
might want to use that theme for that component on another page.
Is there a way for me to only load the theme for certain components
like I could before?
http://localhost/css/jquery-ui/redmond/ui.tabs.css
http://localhost/css/jquery-ui/redmond/ui.accordion.css

It seems each of the blocks are the same height as the largest. Is
there a way to tell them only to be as tall as their content?

I am having an issue with tinymce and jquery ajax form submissions. I
have 2 fields (title/content) and a hidden input (id) that I am
submitting via ajax.
when I use serialize
var form = $("form").serialize();
title = My title
id = 2124245
content = null
It seems to be an issue with tinymce but I if I post using normal form
it works. I imagine some kind of scopes are butting heads but I have
no idea. If I take off tinymce and just use the textarea, it works
great.
Anyone got any ideas?

I am using the accordion and everything is working great in FF3/IE7.
In IE 6 the images used for the headers are about 50 pixels below
where the accordion is. Does anyone know why this would be happening?

I have a sidebar that is 450 in height. I have 5 accordion menus and
they are working fine. What I would like to do though is when you
click one of the items for the other icons to push to the very bottom
of the content area just like it does on http://www.hp.com/. Does
anyone know how to do this or have an example of how to do this?
Thanks!

I have a table and each row has the id of the data element. I put a
checkbox in the the first cell of every row with an id of cb+OrderId.
I found my answer to click on a row and check the checkbox but I was
just wondering if there was a better way. Is there a way to use this
to get the checkbox?
    $(document).ready(function(){
$("#dt tbody tr")
.hover( function(e) {
$(this).addClass("rowHighlight");
},
function(e) {
$(this).removeClass("rowHighlight");
})
.click( function(e) {
var id = $(this).attr("id");
$("#cb"+id).toggleCheck();
});
    });
    $.fn.toggleCheck = function() {
        return this.each(function() {
            this.checked = !this.checked;
        });
    };

I am trying to implement a related selects. When the user chooses a
client 2 other boxes get populated. When the document is ready I add a
change event to the company select box. When the company is selected
it fires off 2 methods each of which populate the other select boxes.
A look into firebug shows that both queries are running and the json
is being returned. The 1st drop down gets populated but the 2 one is
acting very odd. Even if I were to rip the code out of the 2nd
function and just stick in an alert() its not getting executed. I am
wondering if I am colliding with something, any help is appreciated.
        $(document).ready(function() {
            // add onChange event to company select box
            $("#company").change(onCompanyChange);
        });
        function onCompanyChange(){
            var clientId = $("#company option:selected").val();
            populateKeywords(clientId);
            populateShows(clientId);
        }
        function populateKeywords(clientId){
            jQuery.getJSON("com/abccompnay/keywords.cfc",
{method:"getByClient",client_id:clientId}, function(j){
                var options = "";
                options += '<option value="" selected>All Keywords</option>';
                for (var i = 0; i < j.length; i++) {
                    options += '<option value="' + j[i].value + '">' + j[i].display +
'</option>';
                }
                $("select#keyword").html(options);
                document.getElementById("keyword").disabled = false;
            });
        }
        function populateShows(clientId){
            jQuery.getJSON("com/abccompany/orders.cfc",
{method:"listShows",client_id:clientId}, function(x){
                var options = "";
                options += '<option value="" selected>All Shows</option>';
                for (var y = 0; y < x.length; y++) {
                    options += '<option value="' + x[y].value + '">' + x[y].display +
'</option>';
                }
                $("select#shows").html(options);
                document.getElementById("shows").disabled = false;
            });
        }

I have a bunch of images inside of a container that is 250w x 300h.
The overflow for the container is hidden. What I want to do have a
looping animation of the images. In most of the examples I have seen
they are based on click events and they fly in. I want the images to
slowly just move across the div almost like a flash piece. Can anyone
point me in the right direction?
Thanks
Dan

>From the docs I gather that I should be able to do the following: This
should allow me to define the parser per column as well as to tell it
that I do not want the edit column to be sortable. The parser
definitions work fine but the sorter:false is not working. I want the
edit column to be un-sortable, any suggestions?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>JQuery Grid</title>
    <!--- tablesorter --->
    <link href="themes/blue/style.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.tablesorter.js"></script>
    <script>
    $(document).ready(function() {
     // call the tablesorter plugin
     $("table").tablesorter({
            widgets: ['zebra']
     });
    });
    </script>
</head>
<body>
    <div style="width:600px;">
    <table class="tablesorter" cellspacing="1">
<thead>
<tr>
<th class="{sorter: 'text'}">First Name</th>
<th class="{sorter: 'text'}">Last Name</th>
<th class="{sorter: 'integer'}">Age</th>
<th class="{sorter: 'currency'}">Total</th>
<th class="{sorter: 'percent'}">Discount</th>
<th class="{sorter: 'date'}">Date</th>
     <th class="{sorter: false}">Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>Parker</td>
<td>28</td>
<td>$9.99</td>
<td>20%</td>
<td>07/06/2006</td>
            <td>Edit</td>
</tr>
<tr>
<td>John</td>
<td>Hood</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>11/10/2002</td>
            <td>Edit</td>
</tr>
<tr>
<td>Clark</td>
<td>Kent</td>
<td>18</td>
<td>$15.89</td>
<td>44%</td>
<td>01/12/2003</td>
            <td>Edit</td>
</tr>
<tr>
<td>Bruce</td>
<td>Almighty</td>
<td>45</td>
<td>$153.19</td>
<td>44%</td>
<td>01/18/2001</td>
            <td>Edit</td>
</tr>
<tr>
<td>Bruce</td>
<td>Evans</td>
<td>22</td>
<td>$13.19</td>
<td>11%</td>
<td>01/18/2007</td>
            <td>Edit</td>
</tr>
</tbody>
    </table>
    </div>
</body>
</html>