Multiple pages in one HTML file - javascript

I've been experimenting with Cordova/Phonegap for iOS, and it has a www directory that is read when the application launches. This directory is readonly meaning I can't add any of my own files into it (it won't let me either.) Does this mean that I should have multiple "pages" of my app from only one index.html file? How would I go about doing this?
UPDATE
If you are using Cordova/Phonegap, just create a separate file in a text editor, save as HTML, and drag it into the /www folder before opening up Xcode.

Hell no!,
I have no idea why your index is read-only, but just turn it off, you are not forced to use multiple pages in the same html, but if you really want to, you can just use jQuery-mobile, then each <div data-role="page"> will be one different page

There are several libraries to accomplish that, like for example JQuery Mobile, or basic javascript scripts.
Here you have an example with Jquery Mobile: Demo of Pages with JQuery Mobile

Related

merging multiple files (html, css and js) with working links

I have multiple html files of different pages a css and a js file for my cv and im wondering how to combine them all to be able to add the as an attachment on indeed as it will only let me add 1 document, i need the links to be working to take to the different pages. Thanks
I've tried putting it all in one file but it all overlapped and I need it to be seperate pages.
I found that, you can use a simple html tag :
<div w3-include-html="your-page.html"></div>
Link your CSS file on the main page
If this doesn't works I think you can use include() with php but you need to install it :/

How to embed HTML5/CSS + js music player on single wordpress page?

I have an html 5, css, and javascript audio player that I'm trying to add to one page on my wordpress site.
I tried to paste the html into my page's text editor, while installing the JS and CSS folders for the player in my child theme's folder, which didn't work.
I tried placing the CSS for the player styling in my child themes CSS file, and that didn't work. I also tried linking to the style sheets and js scripts from the header.php file, which wasn't working for me.
My first thoughts are that because the html is showing up as it should, the css and JS files aren't being called. So I just need to figure out the path structure of how wordpress creates pages? Yet I know wordpress does something with a database to display the pages?
I saw some documentation about using I think it was either php or JS functions to call scripts or something and I don't understand enough of those languages to be able to make sense of it yet.
I'm still working with my developer, but he's 7 hours ahead of me and asleep. I just want to put the hardcoded version of the player and a few songs on my site for now so I can do some testing/see how it looks.
I hope that this question meets the SO req's. I tried to search on my own and I know the answer is out there, I just don't know enough to understand it yet. Trying to get a head start
The path to your Child theme's folder should be '/wp-content/themes/name-of-theme/'. You can use that in your header to call the files from wherever you might have placed them in your Child theme's folder.
To hard code the HTML, pasting it in the WordPress page editor should work fine unless there is another JS call or some weird iFraming going on.. if that's the case, you can simply create a Page Template (https://developer.wordpress.org/themes/template-files-section/page-template-files/page-templates/#creating-custom-page-templates-for-global-use) and paste the code there. You'll likely want to just copy an existing page template from your Theme, take out the inner loop, and replace it with your video code.
Adding the links to your 'header.php' file would be considered bad practice. You would want to create a 'functions.php' file inside your Child theme and call the JS/CSS from there. You can also find this within the WordPress codex (they literally give examples you can copy/paste and change your file names).

Embedding large portions of CSS and JS into <head> without links

So... Just so you have less reasons to call me an idiot, here's why I need this:
I'm currently working on an offline project that uses jruby. So, to generate reports on the fly, it was decided (by my superiors) to use JavaFX's WebView component - so, HTML, CSS and JS.
But here's the catch: no using file system. All the content is drawn from DB and generated on the fly. No internet either. So all the content to be loaded into the WebView is to be in a single file, however enormous.
I have an HTML page and two huge files - one js, one css. When I use <link> tag for css and <script src="..."> for js - all works. Both in a browser and if I artificially load the page into a WebView. But if should I copy-paste the files into corresponding <style> and <script> tags (as it, probably, will be handled in the program), half the things do not work. Is there a special way for doing it right?
Here are the html, css and JS I'm working with (html is filled with sample data so it can be seen if everything works):
html filecss filejavascript file
You could try and merge them. Read more about this here.

VS2010 WebApp .js+.css able to be embedded fully within HTML code?

So I'm looking to take HTML code for a slideshow and insert it into an HTML box for an app.
However, obviously the .js and .css dependencies need to go with it, or else it won't function properly.
Is there a way/program that allows me in VS to take those classes and insert them within the HTML file so that they are all read at once, and the slideshow works? Ideas?
Thanks,
D.
Use external files to allow the browser to cache them. Put the reference to the external files in your master page.

Configure Eclipse to use Javascript editor

When editing JSPs in Eclipse, the contents of <script> tags - i.e. Javascript code - is properly color coded and formated.
For reasons that go beyond the scope of this question, I have created a custom javascript tag, let's call it <sj:script>. The body of this type is pure javascript as you would have in a regular <script> tag.
However, when I have Javascript code within my custom tag, it is treated as simple text (no color coding, no proper indentation, etc).
My question is, how do I make Eclipse use a specific editor within custom JSP tags?
You can try MyEclipse or Aptana Studio. They offer much better editors for web development.
But a much better approach is to put the JS into a different file and reference that with <script src="...">:
You can use a better editor
The browser can cache the JavaScript (instead of downloading it every time with the rest of the page)
You can write tests for the JavaScript (next to impossible when the JS is held hostage in a JSP file).
[EDIT] Eclipse is open source. Download the code for the WTP project, look for the text editor parts and search for "script". In all places that you find, add "sj:script", too.
Have you included the Tag Library Descriptor file in the jsp where you are using the custom tag?
I have a list of plugins for eclipse which enable eclipse to edit JS files:
http://www.delicious.com/powtac/javascript+eclipse
Just go trough the links and see the different descriptions how to install them.
AFAIK, editors are chosen based on file extension, and there's no mechanism to customize this based on particular content inside the file.
I see 2 options
Creating a custom text editor to take into account your custom script tag (probably not worth the effort)
Put your javascript snippet in an external file, use the include directive inside your custom script tag.
<%# include file="javascript.js" %>
Eclipse has a template feature where in you can add specific tag ,which can be made available for all JSP pages.
Ensure you have installed Eclipse WTP ( Web Tools Platform )
1.Open Preferences window [ Select Window > Preferences ]
2.Expand Web Option from the menu, upon which you can see [ CSS Files,HTML Files etc..
3.Select JSP Files
4.Select Editor
5.Select Templates
6.In the corresponding pane , click New and from there rest can be easily done.

Categories

Resources