Is it possible to add an external sheet containing html elements (similar to an external css stylesheet) maybe using the link tag?
The project will have many webpages that have identical elements (for example, a navigation bar) Is there a way I would be able to link to an external file so that I would only have to change one file to spread this change to all of my webpages.
Using just plain HTML, no. Some other options:
You can use a server side scripting language to include files. (Language specific)
Server Side Includes. SSI's are rather limited however.
Templates or Templating Engine (like Smarty). This is the overkill solution to a simple problem, but left here as an option.
Javascript can dynamically generate the content after the page loads.
Depending on your content, sometimes an IFRAME can be used.
Related
I have not been able to get an explanation of which files are needed in a JQuery Mobile Web site. The stackoverflow documentation on JQuery Mobile shows that there is one file for css and one file for js:
jquery.mobile-1.4.5.min.css
jquery.mobile-1.4.5.min.js
However, downloading the JQuery Mobile 1.4.5 package one ends up with many more. All files that have ".min" appended to the name of the asset, is a minimized version.
The standard download includes one js (the one mentioned above). That is required, as well as JQuery itself. At this date, the latest jQuery that is compatible with jQuery Mobile 1.4.5:
jquery-2.2.4.js
(correct me if that is not true)
For css files standard download includes:
jquery.mobile-1.4.5.css
jquery.mobile.structure-1.4.5.css
jquery.mobile.theme-1.4.5.css
jquery.mobile.external-png-1.4.5.css
jquery.mobile.icons-1.4.5.css
jquery.mobile.inline-png-1.4.5.css
jquery.mobile.inline-svg-1.4.5.css
It appears to me that the first file contains all the rest. So that one can choose to include all at once with one file. The others, I guess, would be used if less code is wanted in a streamlined version of JQuery Mobile. However if one does not use jquery.mobile.css, which are needed in HTML at the top of the page?
If one uses ThemeRoller, jquery.mobile.theme.css becomes MySITE.css (whatever name was selected during the export process in ThemeRoller). If one uses a custom theme, then that theme css is needed, along with jquery.mobile.structure.css.
If one includes jquery.mobile.icons.css, does that in turn include in the external-png, external-svg, and inline-png files?
And what is "jquery.mobile-1.4.5.min.map" for and when is it needed?
That would all be good information for the documentation in stackoverflow.
I created a custom theme (mysite.css) in ThemeRoller so I include the following in HTML (in the appropriate link of script tag):
mysite.css
jquery.mobile.icons-1.4.5.css
jquery.mobile.structure-1.4.5.css
jquery-2.2.4.min.js
jquery.mobile-1.4.5.js
Is that correct?
I have created a custom XBL component that includes very little markup. It primarily consists of CSS, JavaScript and a <div>. The JavaScript then writes the markup to the DOM, inside the <div>. Its CSS specifies styles for a lot of specific element IDs. This works just fine in Form Runner, but not with the Server Side Embedding API.
The Server Side Embedding API appears to be rewriting the CSS file. It prefixes all the CSS selectors for specific IDs with o0. For example #MultiMousePosition-cwm is changed to #o0MultiMousePosition-cwm. This might work fine if the markup of the elements were included in the XBL component. Then it could be rewritten. But since the markup is generated by JavaScript after the page is loaded, this doesn't happen.
Is the rewrite of CSS and element IDs done in case the API is used to include multiple forms in the same page?
Is there a way to prevent the CSS from being rewritten? Or is there some other way to deal with this problem?
I tried to use <xxbl:global> but it looks like that won't work for CSS resources.
The JavaScript is a complex library created by another developer and rewriting it to avoid this issue would take a significant amount of work, if it is possible.
The rewrite of ids is done to prevent id conflicts in the resulting HTML page. That can include supporting multiple forms, but also possible conflicts with other content on the page.
Currently there is no way to disable rewriting. It wouldn't be hard to add as a configuration property, possibly on the XBL components (though some things would need to be rewritten on some not, which might make the configuration more difficult), or globally, for users who know for sure they won't have id conflicts.
I am starting a jquery mobile/phonegap application. And would like to know if there is any way I can keep my code in seperate files so it is easier to manage. From all the reading I have done on jquery mobile it looks like all of your pages are in one file and are just seperated by divs like <div data-role="page" id="page-one"></div>. I guess I could try to make some type of a makefile that concatenated them all together, but it seems that most apps are pretty lengthy that they should have a solution for this. Keeping all the code in one file just seems impossible to maintain.
JQuery demo, three pages, all one source file:
http://demos.jquerymobile.com/1.1.0/docs/pages/multipage-template.html
You can just use normal links with jQuery mobile:
http://demos.jquerymobile.com/1.4.0/navigation/
It will "hijack" the link and use transitions to give you a native like animation. As Flatlineato pointed out you need to make each page confirm to the required markup, and you'll need to repeat your headers/footers etc on each included page.
Or you can use more complex solutions to dynamically change the content of your page, which can be stored in multiple files, like this other SO post:
including the header and footer in jquery mobile multiple page site
But I would also agree with Leo and say the jQuery mobile isn't the best choice for Phonegap, it's not that well optimized, and runs slower in the Phonegap webkit view than it does in native safari.
I've also switched to a custom navigation system and dropped jQM early on in my Phonegap development, but that was over a year ago, more recent versions may work better.
I think my personal API is what you are searching for:
https://github.com/charnekin/api
Demo example:
http://yopo.es/cordovapi/
jQuery Mobile allows you to have the pages in separate files. Obviously in each file must conform to the structure of the markup pages.
To point to another page in the link instead of the id you specify the correct file name. If the file then you enter multiple jquery mobile pages must also specify the id.
What is the purpose of the div 'data-role' option seen in the TriggerIO template files? Am I to assume that I can ignore this and build my app as if I would build a normal website in HTML5? Or do I need to use different tag options in order to initiate CSS selectors and such? There doesn't seem to be much information about the real differences between your TriggerIO apps and how you would write a normal HTML5 app.
I'm creating a children's story app whereby you can view an image and some text, and swipe for the next page). Should I be using canvas to load the images and text or is it best to use the older school img tags and other markup?
The example app that you get when you create a new app using the TriggerToolkit uses jQuery mobile. The data-role attributes are used by jQuery mobile:
In the body, a div with a data-role of page is the wrapper used to delineate a page, and the header bar (data-role="header") and content region (data-role="content") are added inside to create a basic page (these are both optional). These data- attributes are HTML5 attributes used throughout jQuery Mobile to transform basic markup into an enhanced and styled widget.
From: http://jquerymobile.com/demos/1.2.0/docs/about/getting-started.html
You can delete all this and use whatever markup, stylesheets and JavaScript you would usually when making a website. I'd definitely recommend using <img> and regular text rather than doing everything in a <canvas>. My advice would be to "try it and see", treating the development as you would a mobile website, but with assets stored locally and the ability to leverage forge APIs.
I would like to convert my existing website to Joomla. However, I need finer control over URLs than I seem to be able to control with Joomla. Assuming that Joomla is installed in the base public_html directory of my user, I would like these pages to keep their URLs:
http://dotancohen.com/howto/rtl_right_to_left.html
http://dotancohen.com/eng/genealogy.php
http://dotancohen.com/heb/contact_info.html
I am aware that I could use a 301 redirect via .htaccess however I would prefer to actually configure the canonical URL of the page. Is this possible in Joomla or with an extension?
Unquestionably, the defacto standard extension is At http://extensions.joomla.org/extensions/site-management/sef/10134. It's highly configurable, well supported, and ver well rated.
In Joomla! 2.5 you can use the built-in Redirect component to catch old URLs and send them to the right content without fiddling with the .htaccess.
You can also create menu's and menu items that will match the old paths then all you need is to place the content of your .html files into suitable articles. Remember you can create a menu (and thus a path to the content) but not display the menu anywhere on the site.
The genealogy.php appears to be a separate application so you can approach that by doing two things, first have a /eng/ directory on your new website with the genealogy.php application in it that way it will have the same URL. Then if you want to create a menu item in a Joomla! menu then you can link to it using a menu item of type 'External Link' - you can read more about the menu types by clicking on the help button in the toolbar.
[EDIT]
For external pages if you want to wrap the external application in your template use a menu item type of Iframe Wrapper this will place them in the main component area of the template. With a good Joomla! 2.5 template you can use a template style specific (i.e. layout settings) for that page.