I was wondering how would I be able to make a sub nav where only the sub nav changes once I've clicked one of the links in the navigation bar instead of the whole page refreshing if you can help me much appreciated
http://jsfiddle.net/qrn8Q/
Thank you.
HTML Code:
<header class="header">
<div class="container">
<div class="header-primary_container">
<a class="header_brand" href="#"></a>
<div class="navigation-primary_right">
<div class="navigation-primary">
<nav class="navigation-primary_links"> Home
Designs
About Us
</nav>
</div>
</div>
</div>
</div>
</header>
<nav class="sub_nav">
Home
Sign in
Sign up
</nav>
</div>
What you need to do is to use either Ajax or iFrame. For onclick event of those links, you can write your javascript codes to load the new content.
You can accomplish this with jQuery. check out my code. it's pretty simple and easy:
http://jsfiddle.net/mELsr/
$('.nav_icon').click(function() {
$('nav.sub_nav:visible').fadeOut(300); // 1
$('.selected').removeClass('selected'); // 2
var classKey = $(this).attr('id'); // 3
$('nav.'+classKey+'_sub_nav').fadeIn(500); // 4
$(this).addClass('selected'); // 5
return false; // 6
});
In plain english: whenever on of the .nav_icon's is clicked, fade out the visible sub_nav (1) and remove .selected class from the .nav_icon that was selected (2). fetch the clicked item's id attribute (3) and find the sub_nav related to it and fade it in (4) and then add .selected class to the clicked item (5). at last return false; in order to ignore the links default behavior (6).
Hope it help you get started.
Related
I am attempting to show a certain div when the relative li is selected. If any other divs are showing, I need to hide that one and only display the new one. There 1000% is a way more efficient way to do this then creating many useStates.
import {useState} from 'react'
import './dope.css'
export const PageContent = () => {
const [one, setOne] = useState('false')
const [two, setTwo] = useState('false')
function toggle1(){
set1(!1)
}
function toggle2(){
set2(!2)
}
return (
<section>
<div className='middle_wrapper'>
<div className='left_menu_wrapper'>
<nav className='nav_black'>
<li><a href='#!' onClick={toggle1}>1</a></li>
<li><a href='#!' onClick={toggle2}>2</a></li>
<li><a href='#!'>3</a></li>
<li><a href='#!'>4</a></li>
<li><a href='#!'>5</a></li>
<li><a href='#!'>6</a></li>
<li><a href='#!'>7</a></li>
<li><a href='#!'>8</a></li>
<li><a href='#!'>9</a></li>
<li className='no_border'><a href='/'>10</a></li>
</nav>
</div>
<div className='right_content'>
<section className='full_page'>
<div id='new_res' className={one? 'inactive' : 'active'}>
<h1>This is a 1 test</h1>
</div>
<div id='all_res' className={two? 'inactive' : 'active'}>
<h1>This is a 2 test</h1>
</div>
</section>
</div>
</div>
</section>
)
}
---- From dope.css ----
.active {
display: block;
}
.inactive {
display: none;
}
--------
https://gyazo.com/1838ccf473832a00f341f4366b97b670
Like above, I would like to make this more efficient, it's probably something very simple that I am overlooking because I am tired and need sleep. I think I could simply just toggle the div's using href='#new_res' but how would I keep it hidden if it's not in use?
Any help would be appreciated, I know this is something simple and I by time someone answers, I may have found the solution. If not, thank you for helping!
If possible, it would be more efficient to simply use a checkbox.
However, if you have to use React state for flexibility, you could make a state with an array instead:
const [checkedArray, setCheckedArray] = useState([])
Whenever there is a new div to check toggle state, push a false into the array, when it is clicked, turn it to be true:
// Example
// Adding new state
setCheckedArray((current)=>[...current,false])
// Mutating 3rd item's state
setCheckedArray((current)=>{
const newArray = [...current];
newArray[3] = true;
return newArray
})
// Getting the info of the 3rd item of the array
const stateOfThirdItem = checkedArray[3]
Create a state to store all the components and their visibility flag. This will allow you to loop through them to dynamically render the anchors (and their onClick event) and also show them in the DOM.
https://codesandbox.io/s/so-71716290-bdsp9w?file=/src/PageContent.js
I'm trying to build an SPA using jquery. I have some html (nothing special).
I just have a menu and some divs. Depending on which menu item you click, a specific div should be displayed.
I can use .show() and .hide() and make use of id's and data-attributes.
But I was wondering if there are better ways to perform this kind of functionality.
I have simplified your code to the bone to show it easier
Since your ID on the triggers kind of matches your sub-menu, I have used them to target the content. You would put the code in doc ready.
$( "#" + this.id.replace("-tab", "-menu") ) this line simply uses the clicked ID and replaces the -tab with -menu. This is done to work with your current html
var $menu = $('#menu');
var $subMenu = $('.sub-menu');
$('.menu-item').on("click", function() {
$menu.hide();
$( "#" + this.id.replace("-tab", "-menu") ).show();
});
$('.back-btn').on( "click", function() {
// hide all sub-menu, no need to be specific
$subMenu.hide();
$menu.show();
});
.sub-menu {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid" id="menu">
<div id="weed-tab" class="menu-item">
<p class="menu-name">Wiet</p>
</div>
<div id="indica-tab" class="menu-item">
<p class="menu-name">Indica</p>
</div>
</div>
<div class="container-fluid sub-menu" id="weed-menu">weed
<div class="back-btn">
back
</div>
</div>
<div class="container-fluid sub-menu" id="indica-menu">indica
<div class="back-btn">
back
</div>
</div>
I'm using Foundation, and would like a sticky top bar with sub links to internal parts of the page. The problem is, if I do it naïvely, i.e.:
<div class="sticky">
<nav class="top-bar" data-topbar role="navigation">
<section class="top-bar-section">
<ul class="left">
<li>Intro</li>
<li>Basic</li>
</ul>
</section>
</nav>
</div>
... not much stuff ...
<a name="/intro"></a>
<h2>Intro</h2>
... much stuff ...
<a name="/basic"></a>
<h2>Basic</h2>
... much stuff ...
... then the top of the page scrolls to the top of the header, which is then obscured by the sticky top bar. See the jsfiddle and click on the top links to see what I mean.
How can I keep a sticky top bar, yet have clicks on the top bar scroll the page such that the header is right below the top bar, instead of obscured?
Solution #1
Add an <h2> style rule to the CSS, something like:
h2 {
margin-top: 30px;
}
Solution #2
If you want to minimise the extra white-space added to the document, you might try something like the following, instead:
a[name]:target {
padding-top: 30px;
}
This will only add white-space to the <a> element which is currently targeted.
I ended up writing a function to do this.
It changes the window location, so acts as if the user clicked an <a href='#internal-ref></a> link.
It scrolls to the link anyway using scrollIntoView() (thanks to this answer for making me aware of its existence).
It then scrolls back by $("nav.top-bar").height() pixels using window.scrollTo().
The code:
function scrollToAnchor(name) {
// change location
window.location = '#' + name;
// scroll to element anyway
var element = $("a[name='" + name + "']")[0];
if (!element) {
console.error("No such anchor with name", name);
return;
}
element.scrollIntoView();
// scroll back to leave room for sticky nav
var stickyNavHeight = $("nav.top-bar").height();
console.log(stickyNavHeight);
window.scrollTo(window.scrollX, window.scrollY - stickyNavHeight);
}
Live demo.
I'm using bootstrap scrollspy on my project, basically I have a click here link which has the following url format http://example.com/#positionA and on the page that it loads I have the following html code
<p></p>
<h3 id="positionA">Position A</h3>
<p>This is a test code</p>
The issue that I had is that the page loads on the position that I want but the scroll stops on the This is a test code position instead of the Position A.
How I can fix the position that the scrollspy stops so that I will stop before the title of the paragraph and display the title as well? Thank you
[UPDATE]
The project is a prestashop website and I'm working on the Terms and Conditions of the website. So on the delivery page I have the click here where if the client clicks it it will take him to the terms and conditions page on the specific sections. On the body I have this one
<body id="cms" class="cms cms-3 cms-terms-and-conditions-of-use hide-right-column lang_en two-columns" data-spy="scroll" data-offset="50">
And all the text belogs to this div
<div id="center_column" class="center_column col-xs-12 col-sm-9">
<div class="rte">
</div>
</div>
So on the delivery page I have the following code
<li>Terms and conditions for delivery, refund and returns please click here</li>
I have found the solution, here is my code how i fixed it
var hash = false;
if(window.location.hash) {
hash = true;
}
if (hash)
{
hash = document.URL.substr(document.URL.indexOf('#')+1);
var anchor = $('#'+hash).offset();
console.log("left" + anchor.top);
anchor.top = anchor.top - 100;
console.log("top" + anchor.top);
$('html, body').animate({
scrollTop: anchor.top
}, 500);
}
Use Scrollspy offset
By adding
data-offset="10"
to
<a data-spy="scroll" data-target="#positionA" data-offset="20" href="#positionA" >
it will 'offset from top when calculating position of scroll' in pixels
I have been using a bootstrap one page theme in my ASP MVC 5 app. Since it is one page, all the navigation links points to anchors inside the page. Then I needed an additional link to direct to another page, but it does not work. When I see the source code, the href is just fine, the hover is also fine, but when clicked it does nothing. Please help me spot the problem.
the problem is here:
<li class="active">Cart (2)</li>
here is the html code:
<nav class="fixed-top" id="navigation" style="top: 0px; opacity: 1;">
<div class="container">
<div class="row-fluid">
<div class="span12 center">
<!-- LOGO -->
<a class="brand pull-left" href="./">
<img src="/assets/images/logo.png" alt="Treble">
</a>
<!-- END LOGO -->
<!-- MOBILE MENU BUTTON -->
<div class="mobile-menu" data-toggle="collapse" data-target=".nav- collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<!-- END MOBILE MENU BUTTON -->
<!-- MAIN MENU -->
<ul id="main-menu" class="nav-collapse collapse">
<li class="">Home</li>
<li class="">Product</li>
<li class="">About Us</li>
<li>News</li>
<li class="">Contact</li>
<li class="active">Cart (2)</li>
</ul>
<!-- END MAIN MENU -->
<!-- SOCIAL ICONS -->
<div class="social-icons pull-right" id="navRight">
info#panairsan.com
+62 (21) 580 7881
</div>
<!-- END SOCIAL ICONS -->
</div>
</div>
</div>
</nav>
Here is the related css classes:
.fixed-top {
position: fixed;
top: 0px;
opacity: 0;
filter: alpha(opacity=0);
}
#navigation #main-menu {
float: right;
}
#navigation .social-icons {
display: none;
}
I think that is all about the code, nothing else seems to be effecting the link. Please let me know if you need more code to solve this weird problem.
I tried this one also:
<a href="./ShoppingCart">
Adding a dot, like the logo that is able to go to home page (refresh the page), but still does not work.
Thanks
Update
I use jquery.scrollTo. Maybe there is something with this plugin?
The theme I use is this one:
Wrapbootsrap - Treble One Page Theme
UPDATE about jquery.scrollTo
I keep searching, and I am narrowing the problem to jquery.scrollTo. It seems that the plugin is preventing the page from going anywhere. Anywone here is experienced with jquery.scrollTo?
UPDATE Routing Mechanism:
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional },
namespaces: new string[] { "percobaan2.Controllers" }
);
IMPORTANT UPDATE
the main problem: the link is active but it does not direct to the linked page. It does not even direct to a 404 page or anything. It just does not execute the href location.
In the href link call the class "external" like this:
<a href="./ShoppingCart"class="external">
i experienced the same some of the element may overlap your link, just increase the z-index of the link separately
I just solved this issue in my project.
The file plugin.js was causing the trouble, in my case, because the template itself was a one-page template.
I commented-out the line:
self.$nav.on('click.onePageNav', $.proxy(self.handleClick, self));
And the links in the nav just work fine.
I had a similar issue with the template. The application.js file has a script that makes this happen. So you should be able to just remove the
scroll class from the a tag to allow redirect.
/* use class="scroll" on the a element to activate*/
$(".scroll").click(function (event) {
event.preventDefault();
//calculate destination place
var dest = 0;
if ($(this.hash).offset().top > $(document).height() - $(window).height()) {
dest = $(document).height() - $(window).height();
} else {
dest = $(this.hash).offset().top - 50;
}
//go to destination
$('html,body').animate({
scrollTop: dest
}, 1500, 'swing');
/* Fix jumping of navigation. */
setTimeout(function() {
$(window).trigger('scroll');
}, 900);
return false;
});
here is the solution on this page:
a href is not going to other pages
open up your console and then click the inspection tools and then click on the link to open what script runs when you click on that link. you have to state an if statement to say: if (".navbar a" =! ".external"){here goes the rest of li that have external links and now it works}
and then add the external links to the li tags that have external links.
if (".navbar a" =! ".external"){
$(".navbar a, footer a[href='#myPage']").on('click', function(event) {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
});
}
The bug is in the smooth scroll function event.preventDefault();
the best and most simple way to do it would be to add a .not('.ext_link')
to the smooth scroll function witch will look something like:
$(".navbar a, footer a[href='#myPage']").not('.ext_link').on('click', function(event) {
and the add to all the external links a class="ext_link"
Hope that works for you...