I have 3 lists of a clickable links, so when you click one you go to that section and the line too.
so this is my code :
<div className="description-container">
<div className="nav-tab">
<ul className="description-tab">
<li>
<a href="/" className="active">
Class Description
</a>
</li>
<li>
Testimony
</li>
<li>
FAQ
</li>
</ul>
</div>
</div>
How it looks like is
How I want is when I clicked Testimony, the line goes there and our page got scrolled into Testimony Section.
How to improve this code so I can get that feature with React?
Related
I am making a website using HTML and I wanted to put one navigation bar on every page so I created a separate HTML for navigation but I don't know how to put it on every page. this is a small part of my navigation HTML code what do I have to do to put it on every page. and I am not meant to use PHP.
<body>
<div id="nav" class="menu">
<ul>
<li class="active"><i class="fa fa-home" aria-hidden="true"></i>Home </li>
<li> <i class="fa fa-user" aria-hidden="true"></i>Profile
<div class="sub-menu-1">
<ul>
<li>Daniel</li>
<li>Robel</li>
<li>Yohanes</li>
</ul>
</div>
</li>
<li><i class="fa fa-code" aria-hidden="true"></i>Interest
<div class="sub-menu-1">
<ul>
<li>Daniel</li>
<li>Robel</li>
<li>Yohanes</li>
</ul>
</div>
I think you should use iframe (tag of HTML)
which shows one HTML page's O/P on other else change only 2nd iframe's O/P
Take only navigation bar in first iframe and all other HTML pages in 2nd iframe
I have a mobile menu that has some anchored links that scroll to a certain section of the page when clicked. The problem with this is when I click one of these links, due to the fact that a new page is not loading, the menu remains open.
I wish to implement a solution whereby if one of these links are clicked, the menu closes by default. I have tried to hide the menu on click using JS but I think my logic may be wrong. Any help would be great.
Here is the code for my menu.
<div id="my-id" class="uk-offcanvas custom_canvas">
<div class="uk-offcanvas-bar">
<div class="uk-panel">
<a class="btn btn primary remove_image-div" onclick="UIkit.offcanvas.hide([force = false]);">
<img src="img/remove_icon.png" class="remove_image" alt="remove">
</a>
<ul class="mm-list mm-panel mm-opened mm-subopened" id="mm-0">
<li class="offcanvas_li">
<a class="offcanvas_open" title="Samples" href="index.html#sample-section">Samples</a>
</li>
<li class="offcanvas_li">
Packages
</li>
<li class="offcanvas_li">
About
</li>
<li class="offcanvas_li">
Contact
</li>
<li class="offcanvas_li">
Blog
</li>
<li class="offcanvas_li">
<a class="offcanvas_open" title="We Love" href="we_love.html">We Love</a>
</li>
</ul>
</div>
</div>
</div>
I'm not familiar with UIkit.offcanvas plugin but with a little sense I can answer you that you can add them (the links) all the attribute onclick="UIkit.offcanvas.hide([force = false]);"
A better (generic) solution is to "listen" to their click event, then, run offcanvas command.
Something like:
$('.offcanvas_li a').click(function() {
UIkit.offcanvas.hide([force = false]);
});
This works
<script>
function myFunction() {
UIkit.offcanvas.hide([force = false])
}</script>
<button onclick="myFunction()">Close Panel</button>
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>
What's more semantic for organizing menus that change when you click any of their links into another menu? My idea is to have an "Edit" button and, when clicked, the buttons will change to show the proper edit actions for a text in that same page. First the user can only see the text, but when clicked on the edit button he can edit it. This is how I have it right now:
<ul>
<li class = "displaymode">
<a class = "edit">
Edit
</a>
</li>
<li class = "displaymode">
<a href = "/notes/history/<?= $id; ?>">
History
</a>
</li>
...
<li class = "editmode">
<a class = "save">
Save
</a>
</li>
<li class = "editmode">
<a class = "cancel">
Cancel
</a>
</li>
</ul>
<div id = "fulltext">
<p>
This is some demo text that is supposed to be edited by the user when they change from the display mode to the edit mode.
</p>
</div>
Then with javascript it's simple to show/hide the classes with the editmode or displaymode. However, I have other ideas that would also work. One is having different full lists and showing/hiding the full lists:
<ul class = "displaymode">
<li>
<a class = "edit">
Edit
</a>
</li>
<li>
<a href = "/notes/history/<?= $id; ?>">
History
</a>
</li>
...
</ul>
<ul class = "editmode">
<li>
<a class = "save">
Save
</a>
</li>
<li>
<a class = "cancel">
Cancel
</a>
</li>
</ul>
<div id = "fulltext">
<p>
This is some demo text that is supposed to be edited by the user when they change from the display mode to the edit mode.
</p>
</div>
And the last one is to just insert/remove the <li> elements with javascript. However this is not nice for translations nor for SEO. So, which way of the above or from what you've used has better semantics and why? I don't see any advantage/disadvantage from one to another of the ones shown here. From the names of the classes I think it's clear my objective, but if you need any further explanation don't hesitate to ask in the comments.
I've been implementing the code for the flex slider which allows links/buttons outside of the flex slider to target specific slides with rel tags as provided by LJ902 here:
jQuery FlexSlider hide Slider but retain visibility of Manual Controls
Now I'm curious how I would be able to change the css state of the targeting link/button (giving it a different colored background to indicate it's active state), when the flex slider is positioned within a section of slides.
So for instance in the example below, when the slider at a state between the images images/section2-Image01.jpg thru images/section2-Image03, the css state of slide-thumb link for Section 2 is changed , for the slides in section 3 the css state of slide-thumb link for Section 3 is changed and the styling for section 2 goes back to it's previous state. In essence creating tab like functionality that flows over when the users slides/clicks though into the next section
<a rel="0" class="slide_thumb" href="#">Section 1</a>
<a rel="3" class="slide_thumb" href="#">Section 2</a>
<a rel="6" class="slide_thumb" href="#">Section 3</a>
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/section1-Image01.jpg" />
</li>
<li>
<img src="images/section1-Image02.jpg" />
</li>
<li>
<img src="images/section1-Image03.jpg" />
</li>
<li>
<img src="images/section2-Image01.jpg" />
</li>
<li>
<img src="images/section2-Image02.jpg" />
</li>
<li>
<img src="images/section2-Image03.jpg" />
</li>
<li>
<img src="images/section3-Image01.jpg" />
</li>
<li>
<img src="images/section3-Image02.jpg" />
</li>
<li>
<img src="images/section3-Image03.jpg" />
</li>
</ul>
</div>
Could anyone help me out with this? My mediocre development skills have been stumped by this over the last day or so.Thanks!