I am using Joomla 3.3.3. I want to use javascript on specific page. How can i use it?
There are variety of plugins you can use this purpose. If you are JavaScript needs to be loaded in the HEAD tags, most of these components allow it. Read the component descriptions to get a better idea.
http://extensions.joomla.org/extensions/core-enhancements/coding-a-scripts-integration/custom-code-in-modules
Related
I want to add a web plugin to my Vaadin website. Normally for such plugins, you add a JavaScript snippet to the <body> or <head> sections (depending on the plugin), but we don't have access to that directly in Vaadin development, so was wondering how people do it?
Maybe this is where we use #JavaScript annotation, referenced here, but that seems like overkill since I don't think I need a component.
#JavaScript can be used to load any JavaScript file, it doesn't need to be a component.
I need to make changes to an existing project that uses iFrames to dynamically load external html files. However, the html files are part of the same project, not external sites. If I'm not mistaken, iFrames are considered a terrible way of loading html content unless they are used to actually display external sites.
I have looked into web components but apparently, browser support is still spotty and unfortunately, I need to support IE9.
I know that the JQuery load() method can accomplish this but in my online research, that doesn't often come up as a proper way of loading external html in general and a proper replacement for iFrames in particular.
Is there a reason why JQuery shouldn't be used here and are there better and established ways of doing this? For example, I once saw a framework that dynamically built the interface out of separate "partials" but I don't remember which framework that was.
It depends on the HTML -
If it's built like a full page - then iFrames are actually a decent solution - Also, iframes with the same origin let you have full control over the content from the parent, while still protecting CSS and JS variables which is pretty convenient.
If not - jQuery.load() will do the trick, you can also do it manually ofc, but if you already have jQuery in your project, just use it.
The load() function is almost always the best way to go, if you are encountering a specific issue using that function maybe you can share it?
I've just stepped into a new field of HTML designing of websites. I'm using HTML, CSS, jQuery, JavaScript for designing purpose. I've designed one website using above technologies. It has almost forty(40) webpages of HTML design. Now the requirement changes in a design I've created are coming from client. For making those changes I've to make the change in almost all the files. This has become a headache for me. This is a very tedious job. Now I want to reuse the some HTML code in every file. Means Left menu should contain in a separate HTML file, Top Menu should contain in a separate HTML file, Footer menu should contain in a separate HTML file, Right menu should contain in a separate HTML file, etc. In short I want this common code in separate files and I should be able to include all of these files in every HTML file. So that I can do only the body of HTML page in different HTML files. Also the CSS and jQuery files should also be reusable. But I don't want to use any server side technology for including these files. SO can anyone help me in how to achieve this reusability and extensibility of a HTML code? Thanks in advance.
Use jquery, or make your pages PHP and just use one of these functions in php tags where you want the common parts, or pages.
include()
include_once()
require()
require_once()
Take a look at this for some more info on how to use, or do some easy quick google searches.
Edit: Here is a JQuery implementation then, which is all executed in the browser:
Inside some Script tags:
$(document).ready(function(){
$.get( "test.html" );
});
It follows the syntax on this page. Also, take a look at W3school's jquery tutorial. Also, you might want to look at this page at W3school to see how to add the contents of the html page where you want to.
The simplest way to share HTML across pages are Server Side Includes. Your user name seems to imply you know your PHP, so this would be the easiest way to handle it (use PHP). If you absolutely can't have it be a server-side solution, you can use JS to handle it instead.
A more complex, but likely preferred way to handle it is to use a template engine. Most Content Management Tools include just that. Wordpress would be one of the more common ones out there.
As for your CSS and JS, those should already be in separate files and you should be linking to them from within each HTML page.
I am tinkering around with jQuery and am finding it very useful and almost exciting.
As of now, I am referencing the jQuery script via Google's CDN and I store plugins I use locally in a static/scripts directory.
Naturally, each page has its own individual implementation of components that are required for the features it currently offers. I.E. the main page has the Twitter plugin whereas the login page has form validation logic and password strength metering. However, certain components (navigation bar) for example use the same script across multiple pages.
Admittedly so, I am not a fan of putting javascript code in the header of a page, but I rather prefer to have it in an external file (for caching, re-usability, and optimization purposes).
My question is, what is the preferred route for organizing the external files. I wanted to try and keep it to one javascript file for the entire site to reduce IO requests. However, I am not sure how to implement document ready functions on a conditional per page bases.
$(document).ready(function () { ... }
Is there some way to reference a page by some method (preferably id based and not a url conditional).
Thank you in advance for your time!
You should try REQUIRE JS.
This will allow you to load only those plugins the pages where you need them, and unload them again if they are not needed anymore.
Then again, it might be overkill. It really depends on the size of your project.
Paul Irish:
http://paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/
This will allow you to block your scripts by body class/ID and execute them automatically.
First you might want to use YUI Compressor or some other JS compressing tool. Then perhaps creating a resource file (resx) for your JavaScript is the way to go. Then just reference the resource within your code. This is the approach Telerik took for their RadControl ASP.NET AJAX control framework.
Is there any way to add template tags into javascript and css files? I would use it for anything from passing in urls to media url links (image paths, etc) to conditional javascript based on user permissions.
I just had a thought that maybe I can serve it up as if it were a template but have the url as my javascript file. Is that the only way to do somethign like this? If so, it probably wouldn't work with my media generator, so I'd probably want a better solution if there was one out there.
How about defining the JavaScript variables and CSS attributes from within your Django HTML template, between script and style tags? I know it sounds like a hack, but it seems to me a tidy one, as this will allow you to control your dynamic variables from one spot.
Your idea is the right way to go. If you want to leverage Django's template tools then the easiest way is to serve up the JS file as a template. See this question for a situation like yours.
You can serve any type of content like a template, it doesn't have to be HTML. However, you may not be able to serve it with the rest of your static content, depending on your setup.
One option, if you only want to replace things like media URLs, is to "compile" these templates into static files that you can serve. This won't work for anything that is conditional based on the current user's permissions, though. You'll need to write a script to call django.template.loader.render_to_string and write the result to a file every time you deploy or change media URLs, etc.
As for dynamic content inside JS-files, you would have to make a template, like the others said.
But you can very easily attach JS and CSS files to specific page templates using django-sekizai. (I use it as a part of django-cms, but it works stand alone too.)
It allows you to, inside a normal page template, define the template's required static resources in a block. There is one block for CSS and one for JS. These blocks can then be printed in your base.html. It also handles duplicates, so you don't have to worry about adding the same files multiple times. See the usage document.
With this system, you wont be sending any restricted JS or CSS, since django will only run authorized templates, and the content will never be added to the JS and CSS blocks.