Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript table width

    Hi guys,

    Firstly, my apologies - I am a bit of a novice when it comes to javascript!

    I've been working on a basic table that opens and closes cells on mouseover. This is working fine and the cells close nicely on mouseout.

    However, rather than a 'hover' prompt, I'd like to be able to open and close the cells on a mouse click.

    Does anybody have any ideas?

    Many thanks for any comments you may have! My current script is below.
    Working example - http://conjureup.co.uk/test4.html

    Best wishes,

    Matt


    //<![CDATA[
    $(window).load(function(){
    $('.principale').hover(function() {
    $(this).animate({
    width: 600, height: 300, margin: 0,
    }, 'slow');

    }, function() {
    $(this).animate({
    width: 40, height: 300, margin: 0,
    }, 'slow');
    });

    });//]]>
    //]]>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    Matthew, Your not doing what your saying your doing. You say
    I've been working on a basic table that opens and closes cells on mouseover.
    You have a number of tables and it's the tables your expanding. You are using some obsolete code. Brush up you skills here http://www.w3schools.com/
    <![CDATA[ does not need to be used and jquery is up to ver 2.0.3.
    You also have three close tags at the bottom of your code that should be eliminated.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>
    
    <style type="text/css">
    body {
      width: 1000px;
    }
    table{
    	border: 1px solid black;
    	height: 200px;
    	margin: 0 auto;
    }
    td{
    	width: 50px;
    }
    </style>
    </head>
    
    <body>
    
    	<table>
    	<tr>
    		<td style="background-color:blue;"></td>
    		<td style="background-color:pink;"></td>
    		<td style="background-color:red;"></td>
    		<td style="background-color:silver;"></td>
    	</tr>
    	</table>
    
    
    <script type='text/javascript'>
    $(window).load(function(){
    	$('td').click(function() {
    		if($(this).width() == 200){
    			$('td').css('width','50px');
    		}else{
    			$('td').css('width','50px');
    	    $(this).animate({width: 200}, 'slow');
    		}
    	});
    });
    </script>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,634
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by sunfighter View Post
    You are using some obsolete code. Brush up you skills here http://www.w3schools.com/
    Why are you advising brushing up on obsolete skills as promoted at that antiquated site? Surely it would be better to use more modern coding techniques unless all of your visitors are still using Netscape 4 and earlier as their browser - which is the main browser that the W3Schools site JavaScript section is written for.

    For modern JavaScript/table interactions see http://javascriptexample.net/domtable.php
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    Why http://www.w3schools.com/? Because his code looks like this
    Code:
    <table cellpadding="0" cellspacing="0" callpadding="0" border="0" width="920" height="700"><tr><td valign="center">
    he needs a fresh uncomplicated start.
    http://javascriptexample.net/domtable.php is such an advanced and impressive site it just might overwhelm the poor lad.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,634
    Thanks
    0
    Thanked 649 Times in 639 Posts
    I guess if the OP has yet to arriive in 1997 to upgrade from HTML 3.2 to HTML 4 then using the antiquated JavaScript as well will be quite appropriate for their visitor's most popular browser Netscape 3 (which had over 90% of the market back before HTML 4 was introduced).

    If the OP were to decide that they live in the 21st Century then the first step would be to upgrade their HTML to a more recent version that will work with today's mobile devices etc.

    Anyway - http://javascriptexample.net/domtable.php is not advanced - it is part of an introductory course on JavaScript for beginners, It does have the prerequisite of having covered the basic DOM commands prior to moving on to the table specific ones though so those learning about interacting with tables from JavaScript will have had about ten hours of learning the more basic parts of JavaScript before getting that far through the course.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •