Asked  7 Months ago    Answers:  5   Viewed   28 times

I have about 7 Javascript files now (thanks to various jQuery plugins) and 4-5 CSS files. I'm curious as to what's the best practice for dealing with these including where in the document they should be loaded? YSlow tells me that Javascript files should be--where possible--included at the end. The end of the body? It mentions that the delimeter seems to be whether they write content. All my Javascript files are functions and jQuery code (all done when ready()) so that should be OK.

So should I include one CSS and one Javascript file and have those include the rest? Should I concatenate all my files into one? Should I put Javascript my tags at the very end of my document?

Edit: FWIW yes this is PHP.

 Answers

93

I would suggest using PHP Minify, which lets you create a single HTTP request for a group of JS or CSS files. Minify also handles GZipping, Compression, and HTTP Headers for client side caching.

Edit: Minify will also allow you to setup the request so that for different pages you can include different files. For example a core set of JS files along with custom JS code on certain pages or just the core JS files on other pages.

While in development include all the files as you normally would and then when you get closer to switching to production run minify and join all the CSS and JS files into a single HTTP request. It's really easy to setup and get working with.

Also yes, CSS files should be set in the head, and JS files served at the bottom, since JS files can write to your page and can cause massive time-out issues.

Here's how you should include your JS files:

</div> <!-- Closing Footer Div -->
<script type="application/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"></script>
</body>
</html>

Edit: You can also use Cuzillion to see how your page should be set up.

Wednesday, March 31, 2021
 
CodeCaster
answered 7 Months ago
39

It looks like Google uses 2 inputs, one with grey text, and another with black text. Then they are overlayed so that the grey text input is on the bottom and the black text input is on top (greater z-index it looks like).

They grey input contains the full text plus the suggestion and the black input only displays what you typed. Hopefully this can help you figure out the code. Here's Google's html:

<div style="position:relative;zoom:1"> 
  <div style="position:relative;background:transparent"> 
    <input type="text" maxlength="2048" id="grey" disabled="disabled" autocomplete="off" class="lst"> 
    <div id="misspell" class="lst"></div> 
  </div> 
  <div> 
    <div class="lst" style="position: absolute; top: -900px; left: -9000px; max-width: 3000px; overflow: hidden; width: auto;"></div>
    <input type="text" maxlength="2048" name="q" class="lst" autocomplete="off" size="41" title="Search" value=""> 
    <span id="tsf-oq" style="display:none"></span> 
  </div> 
</div>

EDIT: Here's a very simplified version of some html and css you could potentially use http://jsfiddle.net/JRxnR/

#grey
{
    color: #CCC;
    background-color: transparent;
    top: 0px;
    left: 0px;
    position:absolute;
}
#black
{
    color: #000;
    background-color: transparent;
    z-index: 999;
    top: 0px;
    left: 0px;
    position:absolute;
}

<input id="grey" type="text" value="test auto complete" />
<input id="black" type="text" value="test" />
Wednesday, March 31, 2021
 
Tapha
answered 7 Months ago
26

You can do it like that:

var pass1 = $('input[name=Password]').val();
var pass2 = $('input[name=RePassword]').val();
if(pass1 != '' && pass1 != pass2) {
    //show error
    var error = 'Password confirmation doesn't match.';
    $('input[name=Password]').next('span').text(error);
    $('input[name=RePassword]').next('span').text(error);
    errorCount = errorCount + 1;   
}

The "for" property in the label is used as follows:

<label for="myPasswordField">
    <input type="password" id="myPasswordField" name="Password" />
</label>

So when you click on the label this will set the focus on the related element with that ID attribute.

To check if the phone field is a number you need that:

var mobile = $('input[name=MNumber]').val();
if(isNaN(parseFloat(mobile )) && !isFinite(mobile )) {
    var error = 'Mobile number incorect.';
    $('input[name=MNumber]').next('span').text(error);
    errorCount = errorCount + 1; 
}
Saturday, May 29, 2021
 
Keat
answered 5 Months ago
59

For large content that won't fit in memory at once, stream the content from the database to the response.

This kind of thing is actually pretty simple. You don't need AJAX or websockets, it's possible to stream large file downloads through a simple link that the user clicks on. And modern browsers have decent download managers with their own progress bars - why reinvent the wheel?

If writing a servlet from scratch for this, get access to the database BLOB, getting its input stream and copy content through to the HTTP response output stream. If you have Apache Commons IO library, you can use IOUtils.copy(), otherwise you can do this yourself.

Creating a ZIP file on the fly can be done with a ZipOutputStream. Create one of these over the response output stream (from the servlet or whatever your framework gives you), then get each BLOB from the database, using putNextEntry() first and then streaming each BLOB as described before.

Potential Pitfalls/Issues:

  • Depending on the download size and network speed, the request might take a lot of time to complete. Firewalls, etc. can get in the way of this and terminate the request early.
  • Hopefully your users are on a decent corporate network when requesting these files. It would be far worse over remote/dodgey/mobile connections (if it drops out after downloading 1.9G of 2.0G, users have to start again).
  • It can put a bit of load on your server, especially compressing huge ZIP files. It might be worth turning compression down/off when creating the ZipOutputStream if this is a problem.
  • ZIP files over 2GB (or is that 4 GB) might have issues with some ZIP programs. I think the latest Java 7 uses ZIP64 extensions, so this version of Java will write the huge ZIP correctly but will the clients have programs that support the large zip files? I've definitely run into issues with these before, especially on old Solaris servers
Thursday, June 3, 2021
 
Hilmi
answered 5 Months ago
80

PHP has a great function to help you capture only the files you need. Its called glob()

glob - Find pathnames matching a pattern

Returns an array containing the matched files/directories, an empty array if no file matched or FALSE on error.

Here is an example usage -

$files = glob("/path/to/folder/*.txt");

This will populate the $files variable with a list of all files matching the *.txt pattern in the given path.

Reference -

  • glob()
Wednesday, June 9, 2021
 
clean_coding
answered 5 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :