I have a (complex) toolbar panel which can be on top or bottom of a page (it's configurable). Is there any way to avoid copy/paste the toolbar in bottom of the page?
Here is code in copy/paste way:
<div id="topToolbar" data-ng-show="configs.toolbarPosition=='TOP'">
<!-- toolbar -->
</div>
<div>
<!-- inner page contents -->
</div>
<div id="bottomToolbar" data-ng-show="configs.toolbarPosition=='BOTTOM'">
<!-- exactly copy/pasted toolbar -->
</div>
Keep the tool bar html in separate file, and include where ever you need.
<ng-include src="'views/toolbar.html'"></ng-include>
Also if you needed add a controller for all functionality. This will help you to reuse your code.
you can check how components are made
and make component <toolbar></toolbar>
Related
I am working on an Angular project and stuck on this bug for a very long time. Not able to find anything on the web and couldn't find any solution to it by myself.
Description :
I have an HTML document both with different UI as One is feed and One is Login/Signup. I have arranged this template in my app.component.html . Attaching Code below
<app-pageloader></app-pageloader>
<app-header></app-header>
<app-login *ngIf = "router.url == '/login'"></app-login>
<!-- <router-outlet></router-outlet> -->
<div *ngIf="router.url != '/login'" class="view-wrapper">
<!-- Container -->
<div id="main-feed" class="container">
<!-- Content placeholders at page load -->
<!-- this holds the animated content placeholders that show up before content -->
<!-- Feed page main wrapper -->
<div id="activity-feed" class="view-wrap true-dom">
<div class="columns">
<!-- Left side column -->
<div class="column is-3 is-hidden-mobile">
<app-left-sidebar *ngIf="router.url != '/login'"></app-left-sidebar>
</div>
<!-- /Left side column -->
<!-- Middle column -->
<div class="column is-6">
<app-postarea></app-postarea>
<router-outlet></router-outlet>
<app-loadmore></app-loadmore>
</div>
<!-- /Middle column -->
<!-- Right side column -->
<div class="column is-3">
<app-right-sidebar></app-right-sidebar>
</div>
</div>
</div>
</div>
<app-modals></app-modals>
</div>
Now you see my feed template starts from Container and Pageloader and the app header are common in both the interfaces. In my feed template, there are multiple components that only need to load once i.e when we refresh. They are Leftsidebar, Post Area, and Right sidebar and different pages like feed and home are being routed with the help of router outlet.
In the Login Page, there is no need for such things I mentioned above.
Now I want that when I switch to /login. It should only load the login component and No other component should load and when I switch to /feed. All components should load below the container.
I have used the URL approach as of now and will be using accessToken local storage condition to hide and show the component.
This solution is working it is only hiding the component from the main page but it is also loading them in the background making unauthorized API calls.
So now I want that if I switch to /login only the login part should load and if I switch to feed or home or blogs then alongside with router outlet all component should load like sidebars and postarea.So that it only make calls when component is called.
If you have ever come across this problem and solved the problem. Help me too. Thank you.
Assuming the idea is that only logged in users ever get to see anything, you should probably target the *ngIf to display only with authenticaed Users like:
*ngIf="isAuthenticated()" or *ngIf="user && user.id"
or something along those lines. In fact, it's best to use a Route Guard to immediately reroute any non-authenticated users to your login.
Aside from all that, your component is getting activated even before the router.url is a thing. You might try:
*ngIf="router.url && router.url!= "" && router.url != '/login'"
I'm in the process of updating my website and I am trying to optimise the website as much as possible. One of the things I'm trying to do is remove excess text and duplicate text/code.
I have around 20 pages and each page includes a button that pops up my privacy policy using the function below.
The page also imports .css for the pop up which includes mark up and script.
<!-- Begin Footer -->
<div class="mainText">
//site name etc
</div>
<div class="popup" onclick="myFunction()">
<div class="privacyButton">
Privacy Policy
</div>
<span class="popuptext" id="myPopup">
<!-- Policy Content -->
//html content like <p></p> and <strong> etc</strong>.
<!-- End of Policy Content -->
</span>
</div>
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>
<!-- End of Footer -->
How can I place this in a separate file and load it from the external file to save me having so much text on every page?
I've tried THIS to use a jQuery, but it doesn't work because of the nature of the pop up.
I've also tried placing only the content (which would still be better than nothing)
<!-- Policy Content -->
//html content like <p></p> and <strong> etc.
<!-- End of Policy Content -->
...in a separate .html file using
<link rel="import" href="/movedContent.html">
...but upon loading, it doesn't adopt the css from the popuptext class.
I'm unsure where to go from here or what to include in any external file in order for importing this on each page. Thanks.
I have called a view within another view
<!-- right area ends -->
</div><!--row marginTR-30px ends-->
</div><!--container marg-top-bnr ends-->
<!-- blog area ends -->
<?php $this->load->view('common/footer'); ?>
<?php $this->common_lib->compared_salon(); ?>
</div><!--body-inner salon-profile ends -->
Top
Here I have rendered my view footer after these element and html comment
<!-- right area ends -->
</div><!--row marginTR-30px ends-->
</div><!--container marg-top-bnr ends-->
<!-- blog area ends -->
But when it's loaded, the entire element available inside the footer view goes to some of its parent element as I'm able to see it with inspect element
Click here to see it in large view
All social icons are horizontally aligned, but due to tag structure change while loading view, its look is totally changed.
Earlier it's running well, I'm unable to find solution. According to me all footer tag element should come after these line, but it's showing before it.
<!-- right area ends -->
</div><!--row marginTR-30px ends-->
</div><!--container marg-top-bnr ends-->
<!-- blog area ends -->
Unfortunately you have not shown any of the HTML associated with your issue.
My educated guess is that your divs are "up the spout". I'd be looking at the actual HTML Source and making sure your pairs are where you expect them to be.
If you "had it working" and now it's not - it's very easy to have this happen (read as - I've done this myself on the odd occassion ).
UPDATE:
So out of all that code you provided, I found
<div class="marginT-30px social clearfix">
</div>
I'm Not sure if 6 x 4 is ever equal to 12! :)
I'd be going over that code with a fine tooth comb. I've no idea what or where marginT-30px and friends are set.
jquery mobile newbie -- I inherited this project.
I have quite a few 'pages' in my jquery mobile app. On each page I have a nav panel. Each page is set up much like this:
<div data-role="page" id="help_manual" data-theme="d">
<div data-role="panel" id="navpanel_help_manual" data-theme="d" data-display="overlay" data-position="right">
<div data-role="controlgroup" data-corners="false">
Home
User main menu
</div>
</div>
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<a data-icon="bars" class="ui-btn-right" style="margin-top:10px;" href="#navpanel_help_manual"
data-iconpos="notext">Menu</a> <!-- this is the button that actually brings up the above panel-->
<h3>User Manual</h3>
</div>
<div data-role="content">
BLAH BLAH CONTENT
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
Back to main menu
</div>
</div>
This all works well and good.
Then you make another page. ... Then another... Then another... Suddenly you've got a few dozen pages all with their own 'menus'. They all work, but there is a LOT of redundant code, given all the menus are identical.
Now I want to make a change to all of the menus.... and instead of modifying one 'navigation panel' I have to make the change a few dozen error-prone times.
I have tried simply taking the 'panel' code and moving it outside the 'page' div... but that results in, effectively, a 'new' 'page' when the button is clicked. Other attempts at moving the various parts of this code around are similarly broken.
An include could remove the 'list' from the 'core' of the control group... unfortunately, that still leaves a lot of redundant code and I've got one fun tweak: This page needs to be able to work offline. The purpose of this app is to be able to go offline, collect data 'in the field', and come back and upload it. So a SSI isn't an good option.
Help?
Here is a JsFiddle with multiple pages and the panel written only once.
You should write your panel once outside the page. (If you have one file per page, just write the panel outside the index page as a sibling of the page) :
<div data-role="panel" id="navpanel_help_manual" data-theme="d" data-display="overlay" data-position="right">
...
</div>
<div data-role="page" id="help_manual" data-theme="d">
...
</div>
Doing so and as it becomes an external panel. You should then initialise it manually.
$('#navpanel_help_manual').panel();
The panels below are all located outside the page. Panels outside of a page must be initalized manually and will not be handled by auto init. Panels outside of pages will remain in the DOM (unless manually removed) as long as you use Ajax navigation, and can be opened or closed from any page.
I have recently started writing some server side code for our new bootstrap themed administrative site.
In the markup I can not find where/how/why bootstrap is adding random anchor tags to some of the HTML divisions.
Example from chrome developer tools below... these exist nowhere in the markup.
Is there a way to disable this?
How does it silently create these anchor tags?
What is the reason behind this?
Here is the html , it adds a partial view with Razor to render the body, but before that you can see where the anchor from the image above is not written.
<div class="page-content-wrapper">
<div class="page-content" style="overflow:auto;">
#RenderBody()
</div>
</div>
<!-- END CONTENT -->