Embedded Javascript - javascript

I intend to create an HTML report from a perl script on Linux/Unix side. The report contains various statistics mainly in the tabular format. Since there are many such tables I want to split them into categories using Tabs. The report then will be sent to some email-ids, as an attachment.
The questions are:
Is there a good example of HTML + Javascript to create such tabs? I could not find a complete example
Libraries like jQuery fits the bill except that I need to give the .js file as well, which becomes a bit tedious. Is it possible to somehow embed jQuery (or any other library) in HTML?
Thanks in Advance!

I hope this answers your questions
Use jQuery UI which is an extension of jQuery library, Or you can use ExtJS
and there are lots of UI library depending on how much you want.
Why does giving JS file become tedious ? use script tags to call the external JS files to use these libraries. Embedding JS in your HTML will clutter it and its a BAD practice.
Checkout
jquery's tab example :
http://jqueryui.com/demos/tabs/
ExtJS tab example : http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/tabs/tabs.html
EDIT:
If you are planning to use JS in emails, forget it. A lot of email clients remove JS content.
Instead
Share a google spreadsheet link with email
Generate a PDF that has the report, there are a lot of libraries that convert HTML to pdf , use them and convert an HTML table to PDF.

Take a teaser approach to this one where its a hybrid of INLINE html + actual links to go to real content.
Just take a screenshot of the real tabs and place as the header image in your email
Below the tabs image, place only the first page of the tab content
Upon clicking the tabs in the email it takes them to the actual page
The URL can be tokenized and be HTTPS so it will be somewhat secure to view via link
The real tabs can use jQuery UI as others have suggested.

Related

Is there anyway to get full rendered HTML code of any website (with JavaScript code included)?

Is there any way we get the full HTML source code of a website with JavaScript code (fetched from 3rd party) are also included in it?
I understand we can get using document.getElementsByTagName('html')[0].innerHTML but it will not include the 3rd party JS in the HTML code?
The reason for this question (based on my knowledge) is when the browser renders and create DOM then it should have all the required files so does anyone know where and how we can get that full HTML source code of any website?
Yes when the browser renders the page it does indeed fetch these resources, you can use the save option provided by the browser, by clicking right click, then save as, then save as a complete webpage.
If the previous does not work, then there are many tools, extensions, applications that provides this functionality and its easy to search for them.
If you want to save the html and its resources in one html file, you can save it as mhtml file, using this extension for example https://chrome.google.com/webstore/detail/save-webpages-offline-as/nfbcfginnecenjncdjhaminfcienmehn.

How can i change the language of my Html5 hybrid application using java script and jQuery?

In my application i have a option of language selection.
When I select an option, the entire application language should be changed.
I have already tried using Google and Microsoft api but guess that is paid. Is there any free api using javascript that can help me regarding this problem.
This post might be what you are looking for. They are talking about:
A wordpress, change language plugin widget.
A jQuery handler to change language by directing to another url.
Have a nice day!
Two options:
#1
Have a look here. Click "Options" top right and select another langauges. Open a datebox plugin widget and it will be in the language you specified.
I like the way it's done using Crowdin, although you will end up with all your text in .js files. If you check out one of the languages sample files this will be a lot of meat to load if your site becomes more complex.
#2
Do this server side. I'm (using Coldfusion) loading a langauge object on first page load and cache this until the user selects a new language. My langauge object is about 60k with 2000 entries. You could also send this to the page from server via json and store it in the page, then you could reference it from Jquery/Javascript.
I will probably end up trying to switch from server side to using the first approach and will try to see if I can split up my language .js files according to JQM page and then load them together with require, which would mean only a few ks per page. If you don't mind having a bunch of langauge files for each language and page, this would probably be the best "Mobile" approach.

Wordpress Widget on a page not using Wordpress

I use a wordpress blog format for the news section of my website but not the main part and I want to have a"most recent" widget drawing from the wordpress section but displaying on a page that is not using the blog it is written mostly in html and javascript. Is this possible and if so does anyone have any examples they could point me to?
Thanks!
I don't think it's possible - the Widget API is loaded somewhere in the middle of the WordPress loading process so you need a PHP rendering engine loading the entire WP and getting the widget code evaluated at the end. You will need some PHP to get the data from the database or at least AJAX code calling to external scripts that pull posts from the MySQL database.
It may be possible with an iframe, but I (as would most developers) highly advise against that. W3C compliance with iframes can be tricky, but if you're not worried about that then give it a go. On second thought, iframes wouldn't even be a viable option. Just pull the RSS in to your HTML pages using something like this (http://www.htmlgoodies.com/beyond/css/displaying-rss-feeds-with-xhtml-css-and-jquery.html) from HTMLGoodies.com.
Another alternative could be to use a method outlined by FLD Trace here: http://www.fldtrace.com/wordpress/display-latest-post-outside-of-wordpress-with-json-and-jquery, and showcased here: http://www.fldtrace.com/lab/jsonAPI.html.
I've used it before with mild success on a few projects, and styled the FLDT widget accordingly. Be sure to give credit where credit is due if you use this and it fits the bill of what you're looking for--though I don't see any licensing restrictions for FLD Trace's method.

How does social plugin work?

Introduction
I am planning to create a widget much like, Facebook provides for likes, share etc. Basically the requirement is:
The client will include JavaScript provided by us.
The client can, now, put our widgets in the page having the JS. The widget placeholder looks like <nw:fav id="911"/>.
When page gets loaded, the JavaScript replaces the placeholders with actual HTML. The JavaScript also keeps this DIV updated with dynamic (perhaps using long polling) content.
Problem
I am not sure how to do step #2.
How JavaScript will get all the <nw:... tags and all the attributes of it?
How to replace the tag with real HTML tag?
Constraints
I am trying to avoid JQuery or any other JS library, since we may cause conflict if the client is also using JQuery, may be some other version.
I don't really want to use IFrame.
I am looking for approaches. Open for suggestions.
The facebook connect JS SDK is open source. You might find the xfbml.js file useful. See this link.
Basically when the document loads, the code walks the dom looking for elements that have a specific namespace (FB uses fb, you appear to want to use nw). Find those elements and then replace them with whatever content you need.

How to setup a dynamic website with javascript only (no serverside)

Here's my problem: I want to build a website, mostly static but with some dynamic parts (a little blog for news, etc..).
My webserver can only do static files (it's actually a public dropbox directory!) but I don't want to repeat the layout in every html page!
Now, I see two possible solutions here: either I create an index.htm page that emulates site navigation with javascript and AJAX or I create all the different html pages and then somehow import the layout bits with javascript..
From you I need ideas and suggestions on how to implement this, which libraries to use, or maybe there exists even something tailored exactly for what I need?
Thanks!!
I would define the site layout in your index.html file, and then use JavaScript and Ajax to load the actual content into a content div on the page. That way your content files (fetched by Ajax) will be more or less plain HTML, with CSS classes defined in index.html. Also, I wouldn't recommend building a blog in pure HTML and JavaScript. It wouldn't be very interactive; no comments, ratings, etc. You could store your blog content in XML and then fetch and display it with Ajax and JavaScript, however.
While on the subject of XML, you could implement all your site content in XML. You should also store the list of pages (for generating navigation) as XML.
Just another one way. You can generate static HTML in your computer and upload result to dropbox. Look at emacs muse.
jQuery allows you to easily load a section of one page into another page. I recommend loading common navigation sections into the different pages, rather than the other way around to avoid back/forward problems. Layout can be done with a separate CSS file rather than with tables to minimize the amount of repeated code. For the blog, you could put each blog entry in a separate file and load each section individually.
However, I would just use something already available. TiddlyWiki, for example, is a self-contained wiki that is all in one file. It's very customizable, and there's already a blog plug-in available for it. You can work on the site on your hard drive or USB drive, and then you can upload it to the web when done. There's nothing more to it.
Have you considered using publishing software on your computer to combine your content with a template, resulting in a set of static pages that you can then upload to the dropbox?
Some options in this regard come to mind:
Movable Type - can output static HTML which can then be uploaded to the server
Adobe Dreamweaver
Apple iWork Pages
To handle comments, you can use Disqus. It inserts a complete comment system into your site using just JavaScript.
You can use the Google Closure templates. It's one of the fastest and most versatile javascript templating solutions around.

Categories