I'm developing an application using angular JS . I have a menu and when I click on one of the options it becomes active (changes color ) and I include a different html page. for example :
<ul class="nav navbar-nav side-nav">
<li >
</i> Home
</li>
<li >
</i> Profil
</li>
</ul>
........
<div id="page-wrapper">
<div class="container-fluid">
<!-- Page Heading -->
<div ng-include="subPage.url"></div>
</div>
</div>
that works fine . but when I refresh the page I always get the welcome page with no page included . I tried to initialize the subPage.url :
<div ng-init="subPage.url = 'home.html'">
but this way when I refresh I always get the home.html included .
How to do so that when I refresh I keep having the same page included and refresh it ???
When you refresh the page, the application starts from scratch. All you've stored in memory (i.e. the subPage url) is lost.
You should use a router (ngRoute or ui-router). Clicking on a menu option should change the URL in addition to changing the view. That way, refreshing the page would start the application again, but the router would still see that the URL is the one of a sub page, and would automatically route to that sub page.
You should use a $routeProvider and set your default route ('/') to home.html.
Look here for more info: https://thinkster.io/egghead/routeprovider-api
Related
I have three pages/documents in my web page. The links to these pages/documents are provided in left navigation.
I am planning to add Skip to main content in angular UI header. So this will be a common skip link for all 3 pages.
Clicking on skip link from page 1 should take me to Main content of page 1.
Clicking on skip link from page 2 should take me to Main content of page 2.
Clicking on skip link from page 3 should take me to Main content of page 3.
So I have written a condition in my .ts file which will take to the respective main-content. But clicking on Skip to main link is working only once (focus moves to main-content landmark), but from next time the link is not working repeatedly. Am I missing something to make sure that the skip link is working multiple times on enter/click.
I am new to Angular, so please let me know if you need any additional details to understand my requirement.
.ts file
goToMainArea() {
if (location.href.substring(location.href.lastIndexOf('#') + 1) != "mainarea") {
location.href += "#mainarea";
}
}
Partial required HTML code:
<div class="ABC header d-flex" role="banner">
<div class="skip-link">
<a (click)="goToMainArea()" tabindex="0">Skip to main content</a>
</div>
<div class="inventory-title">
<span>
<a [routerLink]="['/home']" attr.ngbTooltip="Home" class="showLink"><span class="titleMaximized">ABC</span><span class="titleMinimized">A</span></a>
</span>
</div>
the links on the homepage navbar is an easy scroll when click on it it moves the page the the section with id, but i need the user when they are on any other page not the homepage and click on any links on the navbar, it return back to the homepage and move to the section.
This code doesn't work for me.
How we Work
Try to remove the / before your URL
How we Work
This / is going to the root of your folder. I guess your using relative path, so this should fix the issue.
In your webpage you have this code within "tracking.html":
<h2>About Us</h2>
<ul class="discover triangle hover row">
<li class="col-xs-12">About EvisaXpress</li>
<li class="col-xs-12">Our Team</li>
<li class="col-xs-12">How We Work</li>
</ul>
This is linking to the current page, i.e. "tracking.html". Write instead
How We Work
and you should be fine.
The difference is that in your page this is called:
http://evisax.com/tracking.html#how-we-work
whereas this is what you want to call:
http://evisax.com/index.html#how-we-work
Removing scrolling.js from the Tracking.html file and everything works fine.
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Tutorial</li>
<li>Blog</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
I have the above nav bar in my website, which includes couple pages.
The thing is, whenever I create new page, I manually have to enter all nav bar stuff over and over again.
So was wondering, if there are any sort of template I can wrap my nav, and use that template for other pages, so I just need to change the one template file, instead of changing whole stuff in each pages.
I found sth called template tag, but not sure how I'm suppose to use it.
You can do this using jQuery. Create separate page for NAV. Ex: header.html.
Then include your header nav in header.html page. Then create and 'id' in the page you want to get the menu. Here I am using a div that id called main-menu. Then using jQuery you can add your html menu to relevant page.
$("#main-menu").load("header.html");
Here is a code snippet. Use loading script always below the jQuery.
// Get nav to the page
$('#main-menu').load('header.html');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-menu"></div>
Quick and easy way would be to save that code as something like header.html and then inlcude it in all the other pages. Which can be done using jQuery or JavaScript, see this SO question for how.
I have used bootstrap nav nav-pills nav-justified
and i have 7 of these
<li>Form</li>
I have been able to click on form which will re-direct to the form page, but I can't seem to return to my home page without clicking back on the browser. I want to be able to just click on the Home button which i've included as part of my 7 <li>s I mentioned earlier. Also i would like to be able jump onto each page from the navbar tab.
<div class="header">
<div class="container">
<ul class="nav nav-pills nav-justified">
<li><a href "#">Home</a></li>
<li><a href "#">About</a></li>
<li><a href "#">JavaScript</a></li>
<li><a href "#">JQuery</a></li>
<li>AngularJS</li>
<li><a href "#">API</a></li>
<li>Form</li>
<li><a href "#">Contact</a></li>
</ul>
</div>
</div>
So from that above, when i click on form, im on the form page, but i cannot go back to the homepage(index.html) unless i click back on the browser, i wanna be able to link to all the lists by clicking each other.
Consider using Ajax to load different pages dynamically (with association with jQuery it said to be simpler to use) for the desired behavior or put everything on the single page and show content only when user clicks the link by JS and CSS.
As soon as you use Bootstrap elements you probably have jQuery already included in your project.
Useful links:
jQuery Ajax
Hiding elements with CSS
Check this page jQuery.get there is a very demonstrative example
$.get("demo_test.asp", function(data, status)
{
alert("Data: " + data + "\nStatus: " + status);
});
where data - data received from the server. It should be your html code to replace the content.
To insert data use:
$.('#Content').html(data); //id="Content" is from the comment
if you do this in a local host and you created these files as i find out when you click on the home you get 404 page the only thing that you have to do is to link your homepage file to the home button if i'm wrong comment me and explain your problem more and then i will help you.
I am using Dojo 1.7. to implement a Android mobile App with Phonegap.
Well my problem is, that I have implemented a tabbar in index.html in my project. Now I want to make a transition by clicking on a tabbar-icon from index.html to a view-div (called testdiv) of view2.html which is another html file in the same project.
Use the url property available within the data-dojo-prop attribute as shown below -
Index.html - link to view on another page
<div id="detailsHeading" data-dojo-type="dojox.mobile.Heading"
data-dojo-props="fixed: 'top', label: 'Details', back:'Back', moveTo:'view1', transition:'slide', transitionDir:'-1',url:'sample.html'">
</div>
The url property above contains the name of the html to be referened and moveTo contains the view to be displayed (your another html may have multiple views)
Sample.html - view definition
<div data-dojo-type="dojox.mobile.ScrollableView" id="view1"
data-dojo-props="selected:false,scrollDir:'v'">
</div>
When the "detailsHeading" is clicked, the application will load sample.html and render the view - view1
theres not a lot to go by here; but im nearly a 100% sure that the 'tabbar' you speak of a dojox.mobile.TabBar?
If so, there's no support out-the-box for pulling in remote pages but you can do this by adding a dijit.layout.ContentPane to the tabbar.
Try out this code for your project, each pane loads viewX.html
<div id="groupview1" data-dojo-type="dojox.mobile.View"
data-dojo-props='selected:true'>
<ul data-dojo-type="dojox.mobile.TabBar"
data-dojo-props='barType:"segmentedControl", fixed:"top"'>
<li data-dojo-type="dojox.mobile.TabBarButton"
data-dojo-props='moveTo:"subview1", selected:true'>New</li>
<li data-dojo-type="dojox.mobile.TabBarButton"
data-dojo-props='moveTo:"subview2"'>What's Hot</li>
</ul>
<div id="subview1" data-dojo-type="dojox.mobile.ScrollableView"
data-dojo-props='selected:true'>
<ul data-dojo-type="dijit.layout.BorderContainer">
<li data-dojo-type="dijit.layout.ContentPane"
data-dojo-props='region:"center", href:"view1.html"'>Hello</li>
</ul>
</div>
<div id="subview2" data-dojo-type="dojox.mobile.ScrollableView" data-dojo-props=''>
<ul data-dojo-type="dijit.layout.BorderContainer">
<li data-dojo-type="dijit.layout.ContentPane"
data-dojo-props='region:"center", href:"view2.html"'></li>
</ul>
</div></div>
<script type="text/javascript">
require(["dojox/mobile/TabBar", "dojox/mobile/TabBarButton", "dojox/mobile/TabBarButton", "dojox/mobile/ScrollableView", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"], function() {
dojo.parser.parse();
});
</script>