Ok guys, three questions here. They are all pretty noobish, but I just want to get your guys' thoughts on them.
1) When writing a jquery script, should I include type?
IE:
<script type="text/javascript" charset="utf-8">
//Jquery here
</script>
or is just an opening and closing script tag acceptable?
2) I know it's a best practice to include all JQuery just before the closing body tag, but does this also mean I include the actual jquery.js file just before body as well?
3) What if my page is reliant on jquery to look how it should (not just action events/ajax/etc). For example, I'm using a jquery plugin called datatables, which sorts through my specified database and automatically paginates/sorts/etc. I find that because I include all the scripts after the DOM loads, I see a raw format of the datatable until my datatables.js file and corresponding constructor loads. Would it be acceptable to include this before my body loads, so that this doesn't happen?
Including the type(type="text/javascript") is the best practice, though in HTML5 it's not needed as it's the default. In HTML 4 it's mandatory, but all modern browsers will read the script content as javascript if not specify, but it's still invalid according to the spec. You can read more here: Which is better: <script type="text/javascript">...</script> or <script>...</script>
Putting the jQuery script in the head is a good option, but it's not mandatory, it just have to be above all other scripts using the jQuery library.
Regarding to the plugin, it's hard to tell without seeing your code, and knowing how the plugin works. You can try move all the scripts to the <head> and see if it helps you. (It might still have the same effect if the plugin waits for the DOM ready. )
Related
I am working on some pretty old code and in every jsp file where there is a javaScript block I see some bizarre Syntax. It goes like :
<script language="JavaScript">
<!--
here is the main code (mixed jsp and javaScript)
//-->
</script>
neccesity <!-- code here //-->
I don't find any necessity for <!-- //--> this syntax. But to remove these from the whole project I really have to be sure why these syntax was used.
Does those had any significance previously, I mean for browser issue or something?
Or,
Just a simple mistake which were carried on.?
HTML style comments in javascript date back to a time when not all browsers supported javascript, so would render the code as text. The <script> tag was just assumed to be just like any other unknown tag, so the tag itself was not rendered, but the contents were
I don't think any current browser would have a problem with it, but I would recommend getting rid of it, because who knows what the future will bring
Does those had any significance previously, I mean for browser issue or something?
Yes, it used to. Remember that a script tag embeds non-HTML inside an HTML document, in this case JavaScript code. Since the content of the script tag isn't HTML, but is being parsed by an HTML parser (while it looks for the ending tag), the idea was to use an HTML comment (<!-- ... -->) to contain the JavaScript code, so the HTML parser wouldn't get confused by HTML-like things within the JavaScript code, and so really old browsers that didn't understand script tags at all wouldn't show the "text" inside them.
The one you've quoted is one of many variations.
There's no need, at all, to do this in an HTML document, with modern browsers — or even with really old browsers, at this point.
In an XHTML document, you do need to do something, but what's shown there is likely to be insufficient; you'd need a CDATA section instead.
Assuming you're writing HTML5 documents (<!doctype html>), you can remove those comments from the JSPs.
As stated here: http://www.w3schools.com/tags/tag_comment.asp
You can also use the comment tag to "hide" scripts from browsers without support for scripts (so they don't show them as plain text)
Nowadays not really an issue I suppose. But may not be the best idea to get rid of them.
Those are comments, just removed if no documentation comments are there
Back in the days there were all sorts of tricks used to make sure that the content looked decent even if the user had javascript or cookies disabled.
This looks like it was meant for hiding the javascript, if the browser didn't understand Javascript.
we are working on a Zend 1.11. based application.
In the overall layout, we use
$this->inlineScript()->appendFile(...)
to add all required global libraries such as jQuery.
In some individual views, we need local JavaScripts we included via
<?php $this->inlineScript()->captureStart(); ?>
jQuery(document).ready((function() {
alert('ping');
}));
<?php $this->inlineScript()->captureEnd(); ?>
Here the problem is: The layout file is processed after the view, thus the captured content is obove the library include in the inlineScript stack. As a result, in the html, we get them printed in a way that jQuery is not loaded before our view specific script:
<script type="text/javascript">
//<!--
jQuery(document).ready((function() {
alert('ping');
}));
//-->
</script>
<script type="text/javascript" src="http://.../js/jquery/jquery-1.11.2.min.js"></script>
We did not found any solution browsing the Zend code to let the HeadScript helper print the includes first and the inline script afterwards. Does anybody know how to get this working (first including the script references and printing inline scripts afterwards)?
Thanks a lot
Ben
Aha, I should have checked the first code sample a bit more closely. In your layout you have:
$this->inlineScript()->appendFile(...)
you then said you wanted a solution to "let the HeadScript helper print the includes first and the inline script afterwards". But you aren't using the head script helper at the moment (at least none of the code in your question is).
The call in your layout should be:
$this->headScript()->appendFile(...)
and you will need a corresponding call to echo the result of the head script helper (within the <head>...</head> part of your layout). There are several examples in the documentation if you need to see how this should look.
Then you can leave the rest of your inline script calls as-is, and it shoudl all work fine.
I know the question is very old, but since i did not find any answer here or elswhere, i wanted to share my solution to the problem, it may maybe help someone else having the exact same problem.
Was looking for a answer myself
We are using ZendX_JQuery View Helpers (ZendX_JQuery_View_Helper_JQuery) to include jquery ($this->jQuery() on layout)
it has some nice functions to add JS-Files, but also scripts to the HEAD after the jquery was included, no mather if calling those after or before che inclusion of the jquery js-file itself.
Resolution of your specific problem would be:
<?php
$this->jQuery()->javascriptCaptureStart();
echo <<<JS
$(document).ready(function() {
alert('ping');
});
JS;
$this->jQuery()->javascriptCaptureEnd();
i want to insert Jquery library in my HTML, but i can't place it on the header of file. I need to include it after some scripts im running.
Do you know any way to do this without getting an error?
You may be trying to call jQuery in a script before your jQuery library file is loaded.
You only have to load jQuery before your scripts that use it. Other scripts that don't use jQuery can go before it if you want.
For example, if you want to include jQuery in a script tag at the end of the body and then include some scripts that use jQuery after that, you can do it that way.
If you are constructing your own site/page then you may be able to control this enough by making sure jQuery is included before the other files. However, if you are using something like WordPress or other dynamic CMS platforms you may not be able to stop something from referencing jQuery before it exists.
Check out this github project for jqShim that might help. You can include the very basic dom ready functionality in the head while moving the bigger/larger/slower/complete jQuery download to the bottom of the BODY (but before any plugins). As long as the code that calls jQuery is doing something like:
jQuery(function($) { ... doing something when ready ... });
Those calls can still be made in the body, after using the jqShim, and will behave as expected. Let me know if it proves to be helpful!
I'm trying to create a simple portfolio site for a friend of mine based around his drawings and paintings. The layout is relatively simple but is proving to be very difficult to implement. I have three jquery scripts on the page that each perform a specific function.
1) bgStretcher - Stretches a series of background images to fill a user's window.
2) collapse - Simple collapsable menu system
3) galleryview - Basic no frills slideshow gallery
Currently, bgstretcher and collapse are on one page called nav.shtml (http://yungchoi.com/nav.shtml) and the gallery on gallery.shtml(http://yungchoi.com/gallery.shtml). Seperatley they work fine, but when I call the nav page via SSI (test.shtml), The code seems to run into problems and becomes disabled.
The solutions I've found all lead to utilizing the noConflict function in jquery (http://stackoverflow.com/questions/2656360/use-multiple-jquery-and-jquery-ui-libraries), (http://hubpages.com/hub/How-to-use-jQuery_noConflict), but everytime I've tried inserting it and changing my code, everything gets messed up again. I've also organized each script's files into separate folders and directories but that hasn't helped either.
My experience is in graphic and web design, so my coding skills are not the greatest. I do know the basics, but rewriting jquery code was not something I ever learned so I might not be understanding how to correctly fix this problem. If someone could clearly and easily explain what I would need to do to make these all work together, I'd appreciate it greatly.
Thanks!
You still have multiple versions of jQuery being loaded in your page.
Remove:
<script type="text/javascript" src="support/bgstrecher/jquery-1.3.2.min.js"></script>
and
<script src="support/collapse/jquery-1.2.1.min.js" type="text/javascript"></script>
you should also remove:
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
& - (because you only need either the packed or unpacked version, not both)
<script type="text/javascript" src="galleryview/jquery.galleryview-2.1.1.js"></script>
See if that helps.
You only need noConflict if you're going to also use other libraries that are similar to jQuery like MooTools, Dojo or Prototype. It's unlikely you will need to & if you do, you will need to recode to use the jQuery function instead of the $.
The issue it appears you're having is that all these jQuery includes are overwriting the previous version of jQuery which the plugin attached to and thus the function no longer exists when you call it.
Why are you loading Jquery twice ?
First the 1.4.2 min file and then the full blown straight after ?
You still have multiple calls to jQuery (even if files are not in same directories).
In the same way, you call "galleryview/jquery.galleryview-2.1.1.js" twice (the second file is just packed).
By the way, my error console tell me that:
"Error: jQuery.timer is undefined
Source File: http://yungchoi.com/galleryview/jquery.timers-1.2.js
Line: 135"
Are you sure you need this timer plugin? For now, it seems you have too many script included. Try to remove all unneeded files (you should keep only one version of jquery. But if some plugins you used is not compatible with, you'll have more and more compatibility problems).
Frequently, I just want to drop a bit of jQuery on an individual page. Given my early understanding of Sitefinity, I think...
I can't easily put JS in the <head>.
I could put JS in a Generic Content control, but then my JS is sitting inline in the <body>. Maybe I need to relax, but I don't usually like to put much JS in the <body>.
It feels like this kind of scenario is an afterthought. Is JS a 2nd-class citizen in Sitefinity?
JavaScript does not live in the head. Yahoo even says it is better for performance
I agree with epascarello you really shouldn't be putting your javascript in the head anyway.
And just in case you didn't know about this the jQuery framework is part of Sitefinity. The article also shows you how you can include external libraries in sitefinity from anywhere withing your project whether it be master page or user control.
Why not have the jQuery code in a separate .js file and use unobtrusive JavaScript? With jQuery you can separate behavior and markup so nicely that you should never have to include JavaScript in your head or body ever again.
Just use the standard onLoad function in jQuery and put all of your initialization code in there.
Try it, I think that you will like it! If you like using CSS for separation of presentation and markup, then jQuery can do the same thing with behavior and markup.
This is an old question, but one way you can do it now is:
Add a Javascript block (under Scripts & Styles), and then paste the URL to the jquery code:
http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js
Then add another Javascript block with your jquery, like:
$(document).ready(function() {
alert("hello");
});
Or you can also paste the URL to your js file.