I've seen similar questions but I think this one is slightly different.
I'm writing a website and since the nav and footer styling is the same on every page, I've put it in a separate file that I've linked to in every html file because this saves a few KBs of data.
The navbar is using some jQuery and I was wondering if there is a simple way to do the same for my JS files. The problem is that all of my code is inside a $() function and I don't think I can just make 2 of these, 1 in every file.
If the solution for this is too complicated I won't bother because the data this saves is negligible compared to the size of the images on the site.
Related
I have an html5 canvas project that's made to function as a multi-page eLearning interaction. Each "page" is designed to be a movieclip set on a main timeline, and buttons (page indicators) just use gotoAndPlay(); to get to the right page.
I ran into an issue after making it 5 pages long where Animate CC would say it was "Out of Memory" and couldn't export anything because the file was too big.
It seems like this question is on the right track, but I was trying to see if there'd be a way to divide each page into a separate .FLA file, and then combine them after?
I'd provide a link, but I can't publish it...
There's an intro page, then 3 scenarios the user has to go through. These should auto advance, but should be accessible from the other pages.
To further complicate it, the last page (conclusion/review) is supposed to link back to each of the three scenarios, shown here:
At this point, I'm not even sure if it's possible to get it to work how I want. It would have been nice if Animate CC could've just published it out, and I wouldn't have a problem.
As long as there are no duplicate names, you should be able to just load all the libs at once. The export format is built so it is additive -- so it will use existing lib, images, and ss references to combine all the lib elements into one global library.
You should be able to confirm this, and then combine/minify all the files together if it works.
I am working on a simple Cordova app with about 4 page types and I am trying to think through which is the better way to handle the inner HTML templates.
Hidden HTML hard coded into the HTML files that is hidden and populated/revealed by my JS.
Using a JS template system and appending and removing from the DOM.
I feel that appending all that to the DOM for a page is inefficient when I could just update the sections that change. But perhaps an append is lightweight enough where I shouldn't worry about it.
There are a number of ways you can do it. In terms of load on the browser. That is hard to say. From your question it is hard to know what is in these pages, what are you displaying, is it live data, static html etc.
When you first plot out an app, if you are from the old class of building multiple page websites, it can be a little concerning as to how well your app/page will run with all those pages crammed in to one, and all that data plus code.
The answer is, amazingly well. If done properly in modern browsers, and for example Ipads the app will run to near native performance.
The options you have are
Map all the pages into one HTML document. Hide each page content using css display:none, flip them into view using css animation, fading or just display:block.
Use a javascript routing library to map urls to blocks of code that deal with each page, this makes mapping out your app much easier, and means that buttons can just link to your pages, like a real website. see http://projects.jga.me/routie/
Building all the page templates into one page can make it hard to code, as the page becomes enormous, consider breaking the inner content of each page into separate files, you can then give each page holder a url and use a small xhr request to load the page on-the fly, once loaded you can cache it into memory or even local-storage, depending on whether you remove it when it is closed or keep it hidden.
In my experience you can put an enormous number or nodes into one page and have very little speed drop, bear in mind if you use something like jquery and do a lot of $(".page > .page1 > .items li") your going to have a slow app.
Tips
Use element ID's everywhere document.getElementById(..) is 100's of times faster in a loop that $(...)
cache elements when you find them, if you need them later store them in a memory cache.
keep for loop inner code to a minimum.
use a decent click touch libary like http://hammerjs.github.io/ and delegate all the events of the body tag or at least on each page.
If you need to touch the server, load data, think dom first, device second server later. A good app is a responsive app, that responds to the user instantly.
I know this has been posted a while ago, but for the sake of the users I am going to add my answer.
I completely agree with MartinWebb but my answer will shed some light on the results of his options. I am currently working on a similar project. Please note that this answer pertains to cordova (previously called phonegap) specifically. My app has about 5 pages with +-20 different components (input's, div's, h1's, p's, etc.). This is what i tried and the result of each:
jQuery was my first option, mainly because it is easy to use and reduces the amount of code required to accomplish a said goal. Result: First time I tried this approach I though I would spice it up with animations and transformations. The result of this was a very unresponsive app. I removed the animation and transformation, however due to the nature of my application I required multiple dynamically added components and jQuery just wasn't up for the task.
Css display:none and visible:hidden was my next option. I used javascript's dom to display certain div's. Result: This works if your not planning on switching many div shortly after one another eg. a simple menu. It quickly became apparent that this wasn't going to work. Also this does not eliminate my need for the dom. Remember document.getElementById('menu').style.display = "none"; is still part of the dom. This as a solution, for me, is poor. There is a reason that var menu= document.createElement('div'); is part of the language. Which brings me to my last option.
Building a page 90% on javascript's dom was my last option. Logically I could not see how 600 lines of code cold trump one .innerHTML or .style.display = "block"; but it did. Result: It was by far the most responsive of all the solutions.
I'm not saying that all webpages should be coded with dom appending, but as I stated previously, for a cordova app of a few pages (<6), with a few components a javascript dom appending approach would be best. It takes longer to code, but you will be rewarded with control and efficiency. I would suggest coding the backbone of your app in html and populating and controlling with javascript's dom.
Best of luck.
The first option, <div>s with display:none; would be more efficient by a small margin, but you can get the best of both worlds by compiling your JavaScript and templates together into a single file using something like browserify or require.js.
I have a page with small "applications" in it, and I want to switch between them without reloading the page.
Is there way to remove all the js code and variables and functions and intervals etc. etc. from the page, for one application which presents itself as a .js file?
Or would it be easier to just refresh the page?
If you have each application in its own namespace, (see for example here: http://msdn.microsoft.com/en-us/magazine/gg578608.aspx or here: JavaScript Namespace Pattern ) you could pass those namespaces into your particular part of the page, which would probably achieve something like this.
However depending on what kind of performance you want putting the applications in an iframe and dynamically loading different pages there might be better.
well I'm new to JavaScript so I know that my work will look nasty but I have been looking for a solution for a week now, I tried to put some JavaScript in the Head tag and so but it didn't get any faster so I said if there is one I'll get it here :D here are the link to the project please have a look at it and if there is something to do about it I'll appreciate it thank you all!
http://www.ayman.benhamida.com/metalexfinal/
First of all, your site looks pretty nice! ;) However, I saw the following problems:
you have two javascript versions included. Kick one out!
Very important: You have several .js which are uncompressed. Use an online-compressor to minify them: this one or this one or just pick one, you like.
You have a lot of jquery-plugins. You can merge them together into one file.
Fix your 404-errors (css/bullets.png, css/loading.gif)
Place your scripts as far to the bottom of your page as possible. (best position would be before </body>). This speeds up the initial page-construction.
minify your css.
compress your images.
Use minfied Javascript.
Use minfied CSS.
Combine Javascript files.
Combine CSS files.
Compress your images more.
You use 2 versions of jQuery ( http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js and http://code.jquery.com/jquery-latest.js ).
Split your page up into seprate pages, so you don't need to load things like http://www.ayman.benhamida.com/metalexfinal/images/map.png (which is 181.1kb in size) on the home page. Only load resources when they are needed, i.e. when someone wants to see the map!
http://www.ayman.benhamida.com/metalexfinal/images/para_green.png is 235.2kb in size. Compress this more!!
I'm using sphinx to auto-generate html pages. The Table of Contents is really long so I'm trying to add a new html class (among other things) to the toctree's div so I can use a javascript library. Basically wanting to change how the toctree generates its HTML.
I've found the globaltoc.html file, put it in the _templates folder and uncommented the template_path in conf.py.
This is the file in the _templates directory.
{% extends '!globaltoc.html' %}
<div class="toctree-wrapper compound dhtmlxTree" id="toc", setImagePath="_static/imgs/csh_dhx_skyblue/">
{{ toctree() }}
</div>
If I'm doing this completely wrong please tell me another way to do this. I'd like to be able to this in pure reST, but it doesn't seem possible. I've looked at the limited examples on Sphinx templating and this is all I can find.
The overall goal of this is to use dhtmlxTree for use with a very large tree. I've already added the required .js files and .css files to layout.html. I just need the div that contains the toctree to have the class I need. I can get the results I need by editing it manually, now i need to automate it.
Thanks for your help.
I believe there are two possible solutions to my problem:
Using Jinja templates to write the javascript and the bulleted list. Currently, I'm not familiar with using the recursive Jinja flag. So this solution, while possible, may cause me more frustration than the second solution.
Simply reducing the :maxdepth: attribute for the toctree directive. It was set to 4. Reducing this number makes the Table of Contents smaller and therefore easier to read.
After thinking about the need to see all the layers, I realized it was just silly and it reduced the usefulness of the Table of Contents. So I just reduced the :maxdepth: to 2 and everything is back to the simplicity that reST and Sphinx offers.
Better design trumps the cool factor every time.