i have just starting Angularjs and need some help.
i am working on ANGULAR 4 SPA project where i have side bar with 100 tabs in it . each tab has different content .
Below is the image of side bar
. SO i tried simple approach by creating few components for each tab and adding them in Routes and loading them in and it works fine .but in this approach i will have to create 100 component for each tab .which i think is not the effecient way .
So is there any other way /industry standard for this ?
Thanks and regards.
You don't have to have 100 separated components. I' ve done multiple applications with similar problem. You need one component - SidebarComponent and in there you need to render 100 anchor tags with simple *ngFor. It would look something like this inside sidebar.component.html:
<nav class="sidebar-nav">
<ul id="sidebarnav">
<li *ngFor="let menu of user.menus">
<a href="#" [routerLink]="[menu.url]"
<span> menu.code </span>
</a>
</li>
</ul>
</nav>
Hope it helps!
Related
I am trying to understand if this is a REACT or css issue e.g.. I have the following code below in React component:
<div className="left">
<Link to="/" className="brand">
<img src={Logo} alt="" />
</Link>
</div>
<div className="right">
<div className="primary-nav">
<ul className="navigation">
<li className="active">
<Link to="/">Home</Link>
</li>
</ul>
</div>
</dic>
The first link does not work, mainly if the Link element is wrapped in Div or any other it looks like it is not reloading the page correctly. E.g. Some .js files are not loaded, pictures in the dom, hence page is not working properly. While if I use the second link all works as expected. I don't see a difference in React, hence looks to me a CSS issue?
Once I wrapped the first div element as per below, this worked.
<div className="primary-nav">
<ul className="left">
<li>
<Link to="/index.html" className="brand">
<img src={Logo} alt="" />
</Link>
</li>
</ul>
</div>
Moreover if I replace this Link to a and href element then this works as well!
I am not sure if this would be related as Css issue, and if so, then why would that affect the page reload? Or if this is something straightforward React experts see and is easily fixed?
Don't consider Your React code as a Simple HTML . Actually the thing is That react Uses a JSX code . that mean it bit different Than original html . yaa that is true that at the last React convert jsx code into a Html . but internally react manage a JSX elements .
Now We are Going to your Point href and Link are different thing cause href is html property that uses html default javascript or you can say core javascript but Link mean you are tracking something or we can say manage something using your own javascript .
See Notice One Thing that when you are using a href your page will refresh and when you are using a Link than it may be it will not refresh your whole Dom depends on your coding but when your are working with react you need to use Link for better practice . it will also improve a quality of your web application.
I am using Foundation 6's tabs as described here: https://foundation.zurb.com/sites/docs/tabs.html
I want deep links, so I put the attribute data-deep-link=true. This works fine, but as the contents of the different tabs are of different length, the site jumps up and down when switching tabs.
Is there a way to allow deep linking without scrolling to content in Foundation 6?
(I read that this was possible with Foundation 5, with scroll_to_content: false, but I did not find any documentation about this with Foundation 6.)
To explain it a bit more, just with one tab entry:
<ul class="tabs" data-tabs data-deep-link="true" data-deep-link-smudge="true" data-update-history="true">
<li class="tabs-title is-active">
link
</li>
</ul>
And below, the tab content container:
<div class="tabs-content" data-tabs-content="device-manager-tabs">
<div class="tabs-panel is-active" id="jumpToTab"></div>
</div>
From Browser's point of view, the jump to #jumpToTab is correct. But I would like to avoid it anyway, maintaining the functionality of Foundation. If Foundation would be able to use a custom attribute (such as data-tab-id instead of id, which is interpreted by browsers as well), it would be no problem.
Try adding data-auto-focus="false" to your tab container.
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.
Right now at my job, I'm tasked with creating a monitoring dashboard site. I'm thoroughly looking through a lot of different design choices and what my company wants, but all the templates I'm looking at for dashboards aren't formatted the way the company wants: a nested tab feature, not a side bar navigation.
Upon looking through a bunch of nested tab examples, one of them caught my attention which was Zozoui's Nested Tabs. This isn't something I've seen from BootStrap and JQuery UI, so I don't even know how to begin with starting something like this, but I'd like to change a couple of things here and there, like right before the second set of tabs, have a description of the first current tag.
So in short, how do I create my own nested tab feature like Zozoui's Nested Tabs?
You can make a menu and a div for contents when you click a specific tab it's contents should show in that div.do it by jquery or js.
HTML
<nav id="menu">
<a id="item1">item1</a>
<a id="item2">item2</a>
.
.
.
</nav>
<div id="contents">
<div>
jquery
$("#menu a").click(function{
$("contents").html(//something that you want);
});
Is there a way to replace the add to cart button to a iPhone like slider in Magento?
Also, is there a way to add an external link to the main menu instead of pointing to another category?
Thanks
You can either create a custom template in design/frontend/yourpackage/yourtheme/template/catalog/navigation/top.phtml.
by pasting the code from base/default/template/catalog/navigation/top.phtml, after which you can add the
<div class="nav-container">
<ul id="nav">
<?php echo $_menu ?>
**<li> Testimonials </li>**
</ul>
</div>
Or you can use an extension Flexible Menu (http://www.magentocommerce.com/magento-connect/flexible-menu-9755.html) which may help you to achieve this.
Hope this helps :).
Cheers,
Swapna