How to use a link with different url on diffrent page - javascript

I have these links
<li class=" ">Who are we </li>
<li class=" ">How it Works </li>
<li class=" ">What to expect</li>
My home page url is abcd.com
Home page have some data according to # tag. The # show a scroll down only for home page. when i click on any link then url change in abcd.com/#who-are-we and scroller point that section on home page,
But i want one thing.
When i will go on any other page as like products page or contact us page then the click action of these links go on about us page. Will you please tell me how can i set a conndition for url in php

You should look at the difference between named Anchors and links to other pages.
You can combine the page AND the named anchor like this:
go to contact page to anchor ABC
Here an example:
named-anchors: first 3 <a href>'s point to a location in this document
links: other 2 <a href>'s point to other pages...
That should do the trick.
<ul>
<li>About us:
<ul>
<li class=" ">Who are we </li>
<li class=" ">How it Works </li>
<li class=" ">What to expect</li>
</ul>
</li>
<li>Contact Page</li>
<li>Products Page</li>
</ul>
<a name="who-are-we">
<h2>Who are we</h2>
<p>Blah<br>blah<br>blaah<br>...</p>
<a name="how-it-works">
<h2>how-it-works</h2>
<p>Blah<br>blah<br>blaah<br>...</p>
<a name="what-to-expect">
<h2>what-to-expect</h2>
<p>Blah<br>blah<br>blaah<br>...</p>

Related

is there any option to prevent routing of href links to next page?

Is there any option to prevent routing of href links to next page, I want to display in index page with list?
</ul>
<li>Elevation Profile</li>
<li>Bookmark Widget </li>
</ul>
There are several ways to do this
<b>First</b>
<ul>
<li>Elevation Profile</li> //this method will take you to the top of the page on click
<li>Bookmark Widget </li>
</ul>
<b>Second</b>
<ul>
<li>Elevation Profile</li> // this method will stays at the same scroll position on click
<li>Bookmark Widget </li>
</ul>

mmenu keep parent menu a link

I am using js mmenu on the shopify site. I run into issue which I cant figure out.
When there is a dropdown menu, parent link becomes not clickable and has #mm-0 at the end of it. I need to keep it as is and link to its own page.
You can see code below. Right now Links "Products" and "About" go to https://www.irestorelaser.com/products/irestore-laser-hair-growth-system#mm-0 . Any help would be great!
<div id="nav" >
<ul>
<li >How it works</li>
<li class="Selected">Products
<ul>
<li class="Selected">Laser Helmet</li>
<li >All Products</li>
</ul>
</li>
<li >About
<ul>
<li >Warranty</li>
</ul>
</li>
</ul>
</div>

How to redirect an user from one tab to another tab of other page?

Basically there are 2 pages with me :-
Index page
<div class="box-footer text-center">
View my Groups
</div>
MyGroups.html
<ul class="nav nav-tabs pull-right ui-sortable-handle">
<li class=""><a id="clickSearch" data-toggle="tab" href="#search" aria-expanded="false">Search</a></li>
<li class=""><a data-toggle="tab" href="#sent" aria-expanded="false">My Groups</a></li>
<li class="active"><a data-toggle="tab" href="#all" aria-expanded="true">All Groups</a></li>
<li class="pull-left header"><i class="fa fa-inbox"></i> Groups</li>
</ul>
<div id="sent" class=" tab-pane">
//some content
</div>
Now how can user be redirected from HTML page 1 on clicking " View my groups" to the #sent div on another Html page ?
Things seacrhed :- Using jquery .click() function
But Need proper guidance in syntax .
Had a look on this , got the basic idea but still not able to achieve what's needed .
You can link directly from the href of the first page
View my Groups
adding the #sent to the link will automatically scroll to the appropriate div

Bootstrap treeview from asp.net masterpage

I am using Bootstrap Treeview from my ASP.NET master page. Please see the sample code below. This code is in a Master page. The treeview is losing its state when going to a child page (for example, Page5). The menu gets collapsed.
What would be the best way to keep the respective treeview expanded? For example, when I go to Page 3, I want to have the secondMenuli expanded.
NOTE: I tried it without master page and it works perfectly, but I was looking to solve it using the master page.
<ul id="leftmenulist" class="sidebar-menu">
<li id="firstMenuli" class="active">
<a href="Home.aspx">
<span>Home</span>
</a>
</li>
<li id="secondMenuli" class="treeview">
<a href="#">
<span>Second Menu</span>
</a>
<ul class="treeview-menu">
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</li>
<li id="thirdMenuli" class="treeview">
<a href="#">
<span>Third Menu</span>
</a>
<ul class="treeview-menu">
<li>Page4</li>
<li>Page5</li>
<li>Page6</li>
</ul>
</li>
</ul>

Active elements when using Master pages

If I setup a Master page to display a header similar to the following
<ul class="nav nav-pills nav-main" id="mainMenu">
<li>
<a class="dropdown-toggle" href="default.aspx">Home</a>
</li>
<li>
About Us
</li>
</ul>
I want to set the element active for the current page the user is on so in html it will look like this if default.aspx is the active page.
<ul class="nav nav-pills nav-main" id="mainMenu">
<li class="dropdown active"> <%--active--%>
<a class="dropdown-toggle" href="default.aspx">Home</a>
</li>
<li>
About Us
</li>
</ul>
The header menu is based on an existing template so is all html with CSS styling and does not contain any asp: controls. I know I can do this in codebehind by setting the attributes but most of the searches I've pulled up say there could be a better way or here's a dirty workaround link1 & link2
What would be the best way(s) of doing this?
First you have to set all li tags as server Controls
<ul class="nav nav-pills nav-main" id="mainMenu">
<li>
<a class="dropdown-toggle" href="default.aspx" runat="server" id="lidefault">Home</a>
</li>
<li>
About Us
</li>
</ul>
do like the above for all li tags
Then in master page load,
string sURL=Request.Url.ToString().ToLower();
if (sURL.Contains("/default.aspx")
lidefault.Attributes.Add("class", "active")
else if (sURL.Contains("/about.aspx")
liabout.Attributes.Add("class", "active")
// do like the above for the rest li tags
You can check it with javascript. Set a foreach loop for check each link of your menu. If your menu url equal the page url, add active class with .addClass() method.

Categories