CODEWITHSUNDEEP
jquerycssonclick
user188995
user188995

Reputation: 557

Change table width and show a div onClick

I' trying to change the width of a table from 100% to 60% and show a div when a user clicks on a particular href. Here's my relevant code:

<table id="pageTable" width="100%">
...
...
<td><a href="#" onclick="shrink();">ABC</a></td>          
...
...
</table>
<div id="#xyz">

CSS for #xyz has display:none

Javascript:

function shrink()
    {
    curr = document.getElementById('pageTable').width;  
    curr = (curr== '100%'?'60%':'100%');
    }

I'm having trouble while using the Jquery .show function. I mean to which div I should apply it. Also, the width of the table is not changing.

Upvotes: 0

Views: 3205

Answers (4)

Matt
Matt

Reputation: 156

Please, no inline javascript.

Also, in html you do not need # in id's, thats purely jquery and css. This is correct: <div id="xyz"></div>

<table id="pageTable" width="100%">
...
...
<td><a href="#" class="shrinky-dinky">ABC</a></td>          
...
...
</table>

<div id="xyz">XYZ</div>

JS:

$(".shrinky-dinky").click( function() {
$("#pageTable").width( "60%" );
$("#xyz").show();
});

Example: http://jsfiddle.net/drpqT/1/

Documentation on Unobtrusive JavaScript: http://en.wikipedia.org/wiki/Unobtrusive_JavaScript

UPDATE: We've indetified that this table is being loaded with AJAX, therefore the .live function will be needed.

http://jsfiddle.net/drpqT/2/

More on .live http://api.jquery.com/live/

Upvotes: 2

Sagar Rao
Sagar Rao

Reputation: 29

This should be simple. Here is the Html & JavaScript code which does the expansion, and hide/show.

<html>
<head>
    <title>Testing, what can be tested.</title>
    <script type="text/javascript" language="javascript">
        function shrink() {
            var curr = document.getElementById('pageTable').width;
            // This code will check current table width, and re-assign to 60% if 100%.
            if (curr == '100%') {
                document.getElementById('pageTable').width = '60%';
            }
            else {
                document.getElementById('pageTable').width = '100%';
            }

            // This code will check current div display, and re-assign to visible is hidden & vide versa.
            if (document.getElementById('pageDiv').style.display != 'block') {
                document.getElementById('pageDiv').style.display = 'block';
            }
            else {
                document.getElementById('pageDiv').style.display = 'none';
            }
        }
    </script>
</head>
<body>
    <!-- This table needed a border to identify the dimension change. -->
    <table id="pageTable" width="100%" border="1">
        <tr>
            <td>
                <a href="#" onclick="shrink();">Calling Shrink</a>
            </td>
        </tr>
    </table>
    <!-- This div needed to hidden first to shown on click. -->
    <div id="pageDiv" style="display: none;">
        Now Showing; An extra function.
    </div>
</body>
</html>

Upvotes: 0

BenjaminRH
BenjaminRH

Reputation: 12172

If you're using jQuery, there's a much better way to do what you're trying to do:

$("#yourLink").click(function() {
    $("#xyz").show(); /* Show the div whose id is "xyz" */
    $("#pageTable").width("60%"); /* Now change the width of the table to 60% */
});

Here's a demonstration: http://jsfiddle.net/BenjaminRH/Cq2CH/

Also, just a couple of style points:

  • Don't use in-line Javascript. Use jQuery's click() function and tie it to the link instead of putting a function in the onClick attribute
  • IDs in HTML don't need the hash symbol (#). Just use "xyz" in the div id.

Upvotes: 0

nnnnnn
nnnnnn

Reputation: 150040

The width isn't changing because you only change the curr variable, you don't assign that back to the table width. So try this:

function shrink() {
    curr = document.getElementById('pageTable').width;  
    curr = (curr== '100%'?'60%':'100%');
    document.getElementById('pageTable').width = curr;

    document.getElementById('#xyz').style.display = "block";
}​

http://jsfiddle.net/q9X62/

Or with jQuery I'd do this:

$(document).ready(function() {
    $("#shrinkLink").click(function() {
        $("#pageTable").toggleClass("shrunk");
        $("#xyz").toggle();
    });
});​

With the following in your stylesheet:

#pageTable { width : 100%; }
#pageTable.shrunk { width : 60%; }

Demo: http://jsfiddle.net/q9X62/1/

Adding and removing a class to vary the widths is neater than putting the widths directly in your JS.

Upvotes: 2

Related Questions