I am working on multiple HTML page phoneGap application and i want to implement a navigation bar.
I am using the following code for phoneGap navigation bar implementation:
In index.html, I have defined navigation bar like this:
function onDeviceReady() {
plugins.navigationBar.init();
// or .create("BlackOpaque") to apply a certain style
plugins.navigationBar.create("BlackOpaque");
plugins.navigationBar.setTitle("Home");
plugins.navigationBar.hideLeftButton();
plugins.navigationBar.hideRightButton();
plugins.navigationBar.show();
}
When i run app, it creates a nav bar at top of index page with title labelled as HOME, without left or right navBarButton as I don't need it in home page.
But when I go to next HTML page xyz.html by clicking on a button, the navBar show same behaviour: i.e same Title without left and write button.
But I want it to change the title for the currently loaded page and also insert leftNavBarButton label as back so that I can also go back to previous page.
But it is not happening. I have also tried to write a script in xyz.html page that should change its title and put leftNavBarButton as back but not working.
Its static throughout the app with same title and i am unable to go back to previous page. I want its behaviour to be global which changes with every page and maintain the state of previous pages as well! How can i do this?
If you're using a single-page template (= 1 jQuery Mobile page per HTML file), you have to include your JS code in every HTML files.
What you can do is to put all your custom JS code inside a JS file and import it in every HTML pages you have. Also, import any other JS lib you'll use in every pages.
Ex:
<script src="./js/navigationbar.js"</script>
<script src="./js/myjs.js"></script>
...
...
Another solution would be to force the refresh of the pages when navigating to them.
In this case, you don't have to import all your JS code in every pages, and for each HTML file, you can import the JS files which are required for this given file.
Related
At the moment, I need to create an app that will dynamically change it's sections
This is the app layout.
The main section would be an independent webapp, because it would keep changing it's contents.
The nav bar it's basically a set of images that work as buttons and change the contents of the main section.
The side bar have some parallel uses, but it can work with the "main webapp" (the one that contains all sections
That's why I think having a nested webapp would be the best solution. I tried google site but since I can't really control it I dropped the idea.
But it's possibly to achieve that? At the moment the app need to refresh the whole page to apply even the smallest HTML change
Im a little confused, You could have that part dynamically generate information in the main section and everything else be static.
And the web app will update anytime you change the code weather its a small html changes or logic changes. unless its deployed and you dont have sync on, then you need to manually sync it to show the changes.
Update:
I solved my issue stacking divs and changing the active one by hiding the others.
I also using an include with my templates, in a way I can split my HTML code in a main template.
I use two types of includes:
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
And
function includeTemplate(template) {
return HtmlService.createTemplateFromFile(template).evaluate().getContent();
}
one used to include static HTML and other dinamic HTML (templates)
I'm building an application using React. My problem is that I have multiple HTML pages and I want to open one of them when I click on a button. But when that HTML opens up, React does not render that page although. What should I do to resolve that?
I've already seen React Router but it seems like to be for the same HTML page. I want to open a different HTML page not to render on the same page at different times.
I tried to do this in the HTML I open when I click the button
<script src="../src/app.js"></script>
but it does nothing.
tl;dr - A button opens a new HTML page. How to make React render that page?
If you really need to do this, then you need to reformulate the question. You might need to add iframes of external static html files.
This is something that was answered here correctly, so I won't duplicate.
Render HTML inside a React app using iframe
Hope this helps!
I have the following problem.
I have a typo3 page without any template I made by myself, but it gets in some way the style and the behavior of the other pages (I mean navigation, footer and so on). Now I have written some HTML inside the page by creating an HTML element.
In this HTML element, I included some js-code, which uses jQuery. The problem is, that the page loads the jquery at the footer and my scripts are loading before (in the HTML element). So my script does not recognize jQuery. How can I add my scripts at the whole end of the page? I know, that it has something to do with templates, but when I create a new template for the page, the whole content disappears.
Would be nice to get any help.
Cheers,
Andrej
It is usually good practice to read all your JS from a single file placed in the footer of the page. Add this to the setup section of your page template:
page.includeJSFooter.scripts = fileadmin/js/scripts.js
Then remove the JS from the HTML template and put into this file. This file could hold all your custom JS and possibly even all the libraries you use on the page (if you are not loading them from a CDN).
Bonus: the JS doesn't have to be re-loaded on every page view but can be read from cache.
For reference: https://docs.typo3.org/typo3cms/TyposcriptReference/Setup/Page/Index.html#includejsfooter-array
I hope by template you mean a template record where you store your TypoScript? Otherwise this answer is not what you are looking for. :)
You can just add an extension template on your page that only adds to the rest of the TypoScript but does not override anything. To do so, go to the template module, choose "info/modify" in the dropdown at the top and use this button
Explanation: an extension template has the checkboxes for clearing the constants and the setup not checked and will not mess with the rest of your site's TypoScript:
In this sharepoint site collection, there is a home(main) page and subpages all of which retain a page layout. I use the standard $(document).ready() function to apply certain styles after the page is loaded. However, static locations for images are not applying correctly to subpages, and using relative locations doesn't work for the main page. How do I apply certain jQuery scripts to just the subpages and not the main page?
An example address would be
//somepage/SitePages/Home.aspx is being modified by using $(document).ready()
and how would I be able to execute a script on a page like
//somepage/subpage/SitePages/Home.aspx
by using(something similar to)
$(document == '../subpages/SitePages/Home.aspx').ready()
I'm ultimately trying to implement a script in jquery that would modify any subsite's homepage without changing the root's homepage.
I have done a lot of research for requireJS AMD in AngularJS and found out that
the
JS files are being called by triggers either by changing url or
clicking a button
I have the home page which is divided into 5 sections with each one having its html and controller file.
The motive is to call only the first section on page load with its
controller and html file. And load the rest files one by one as we scroll to the
bottom.
Is there any way to do that? Or I will have to change the URL whenever I go to the next sections?
just simply use javascript and require(['your_controller']);
like:
document.addEventListener("scroll", function(){
if(document.body.scrollTop == 500){
require(['your_controller']);
}
});
This will add your_controller.js to your page when you scroll down 500px from the top of the page. But still it may not be work in the way you expecting. I have never done such thing to load a controller, but according to your question. This will help you load the script file of your controller.