Jump to content
Larry Ullman's Book Forums
Sign in to follow this  
Necuima

Inconsistent Treatment Of Javascript Routine - Modularising

Recommended Posts

Hi,

 

I wasn't sure whether to post this in this forum or the "Modern JavaScript" forum so apologies if I've got it wrong.

 

I am trying to modularise a website that is already in production and works fine, but the modularisation approach in chapter 2 looks very appealing.

 

In one part of the website I have the index.php 'controller' module which includes other modules on a one by one basis as needed.  The structure of index.php is as per chapter 2 of the book. Every time the index.php module is invoked, I include header.inc.htm which has within it an invocation of a small JS routine which just adjusts the width of the displayed website based on the width of the available viewport.

 

What happens is that the first time index.php includes say module_a.php the width adjustment works perfectly.  Then after having done its thing, module_a.php calls module_b.php via the index.php controller passing it a parameter that module_b needs.  However, even though the exact same header.inc.htm module gets included when module_b.php is included by index.php, the JS routine does not fire and the width of the website display does not get adjusted.

 

I've attached some of the code; first the header.inc.htm file which invokes the JS adjust-wrapper_size() routine. As you can see, I tried both 'document ready' and window load' but the problem appears both ways.

<!DOCTYPE html>

<head>

 <title><?php echo $page_title; ?></title>

 <link rel="stylesheet" type="text/css" href="./css/the_css_file.css" media="screen" />

 <script type="text/javascript" src="../jQuery/jquery_1.5.2.min.js"></script>

 <script type="text/javascript" src="../js/the_js_file.js"></script>

 <script type="text/JavaScript">

  // window.onload(function()

  $(document).ready(function()

   {

   adjust_wrapper_size();  // to stop it from being too big!

          

   });  // end document ready function

  

  $(window).resize(function() {

     adjust_wrapper_size();  // to stop it from being too big!

   

   });  // end window resize function

  

 </script>

</head>

Now the code in module_a which calls module_b (add_cv_2) via index.php;

....
$group_name = urlencode($_POST['cv_group']);

    $url = BASE_URL . "index.php?p=add_cv_2&cvgroup=$group_name";

    if (!headers_sent($filename, $linenum))

        {

       header("Location: $url");

          exit();

     }
......

Now the code within index.php...

.....
case 'add_cv_2':

        $page = 'module_b.php';

        $page_title = "The appropriate title";

        break; 
.....

And finally the JS routine:

function adjust_wrapper_size()

{

 var s_w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || document.width; // to cater for all browsers

 // alert('Window/Screen width = ' + s_w);

 if (s_w > 1000)

  {

   $('#wrapper').css('width', 1000);

  }

 else

  { // screen < 1000 - use available screen

   $('#wrapper').css('width', s_w);

  }

}

My  environment is:
. Windows 7 Home Premium 64 bit
. Internet Explorer 10
. Firefox 22.0
. Dreamweaver CS5 as the text editor

. Flex 4 via FlashBuilder 4

. XAMPP for Windows 1.8.3 which comprises:

.. Apache 2.4.4

.. PHP 5.5.3

.. MySQL 5.6.11

.. phpMyAdmin 4.0.4

 

Any assistance will be most appreciated.

 

Thanks, and Cheers from Oz.
   

 

Share this post


Link to post
Share on other sites

I could propose a PHP/JS solution, but the standard CSS solution is so straightforward, I can't help but recommend it:

.site_container {
  margin: auto;
  max-width: 1000px;
  width: 100%;
}

That will center your site and make it 100% the width of the screen up to 1000px, and no fancy PHP or JS is required.

  • Upvote 1

Share this post


Link to post
Share on other sites

Wow - this is a terrific solution!!

 

FYI I 'got around' the problem described above by making the file references within the header.inc file absolute but your solution is much more elegant!

 

A related function in the js file is to adjust text font sizes also based on the available width - do you have an elegant solution for that as well?

 

Here's that code...

 

function adjust_font_sizes ()
{
 var mc_w = $('#wrapper').width();
 // alert('Main Col Width is ' + mc_w);
 if (mc_w >= 1000)
  {
   var f_s = (1000 / 8) + '%';
   $('.table_entry_text').css('fontSize', f_s);
   var f_s2 = (1000 / 9) + '%';
   $('.about_button').css('fontSize', f_s2);
   var f_s3 = (1000 / 7.5) + '%';
   $('h3').css('fontSize', f_s3);
   var td_size = (1000 / 4) + 'px';
   $('td').css('width', td_size);
  }
 else
  {
   var f_s = (mc_w / 8) + '%';
   $('.table_entry_text').css('fontSize', f_s);
   var f_s2 = (mc_w / 9) + '%';
   $('.about_button').css('fontSize', f_s2);
   var f_s3 = (mc_w / 7.5) + '%';
   $('h3').css('fontSize', f_s3);
   var td_size = (mc_w / 4) + 'px';
   $('td').css('width', td_size);
   
  }
}

 

Thanks again, Hartley-san!

 

Cheers from Oz.

Share this post


Link to post
Share on other sites

Hi Hartley-san, yes, I've already started doing that - thanks for the tip.

 

I also have 2 new books from the 'Missing Manuals' series - one on HTML5 and the other on CSS3 - and I see from the index that media queries is covered.

 

If you are currently in Ohio, I shall wish you "Good Night" :-)

 

Cheers from Oz.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...