I am developing a website with 30 pages. Each page has two columns: a vertical scrolling menu in the left column and the page content in the right column. Each page has the same html code for the menu:
<div class="nav-scroll-menu">
<a href="page1.html" class="nav-menu-item">
Page 1</a>
<a href="page2.html" class="nav-menu-item">
Page 2</a>
<a href="page3.html" class="nav-menu-item">
Page 3</a>
You can see about 7 or 8 menu items before you have to scroll down to see the rest.
When I scroll down the menu to, say, page 20 and click on the link to take me to page 20, page 20 loads but the menu loads with the first menu link (page 1) at the top. This means that the page 20 menu link is hidden and you need to scroll down to see it.
I would like to have each page load so that its menu link is visible in the menu column.
I thought of giving each menu link an id and then linking to the id. But that would need an href to the id and I've already got the href pointing to the page address!
Do I have to resort to Javascript (if so how?), or is there some obvious html/css solution?
Any advice would be appreciated.
I think you can use the scrollTop attribute of the element to scroll the menu item to a certain position, provided that you need to calculate how far to scroll, and the calculation of this distance can be calculated according to the page number and the height of the menu item.
When you click a menu item, you can get the number of menu items.
I just figured it out!
<a href="pageA.html#pageA" class="nav-menu-item" id="pageA">
etc.
Related
I have an element that expands based on a expandedActive value, and a link that toggles the value. The first time you click the link to expand the element, the page stays put and the content expands below. If I then toggle it off and on again without scrolling, the content expands upwards (or rather, the whole page is pushed up) and the browser seems anchored to the expand toggle. If I scroll any amount in any direction, it will expand below as desired.
How can I force the content to always expand down?
I have tried using a tags with and without href, buttons, and a span. I have tried using anchors and scrolling to them, but it is not the desired behaviour.
Below is the basic vue template.
<span v-if="!expandedActive" v-html="longText.length > charLimit ? longText.slice(0, charLimit) + '...' : longText"></span>
<a v-if="!expandedActive && longText.length > charLimit" #click.prevent="toggleExpandedActive()" href="#">Expand</a>
<span v-if="expandedActive" v-html="longText"></span>
<a v-if="expandedActive" #click.prevent="toggleExpandedActive()" href="#">Collapse</a>
I have a simple scroller (similar to the tag scroller at the top to Google images), which uses jquery/javascript.
<div class="chip-scroller widget">
<a class="chip-scroller_nav chip-scroller_nav--prev">
<span class="md-icon">arrow_back_ios</span>
</a>
<ul>
<li>
<a class="chip-scroller_chip">anchor</a>
</li>
<!-- more items here -->
</ul>
<a class="chip-scroller_nav chip-scroller_nav--next">
<span class="md-icon">arrow_back_ios</span>
</a>
</div>
The UL (list) has overflow-x: hidden set, so depending on the screen width and the number of items in the list, some items will be out of view, either to the left or the right of the visible area.
In the example below, 2 are hidden to the left, 3 are visible and 1 hidden to the right.
(hidden) (hidden) [visible visible visible] (hidden)
The list is positioned using javascript, and in the main navigated using the prev/next navigation buttons at each side.
The issue I have is that any of the items can be focused, whether they are visible or not, and focus means that they're immediately brought into view.
However, the scroller doesn't realise things have changed and it breaks my design. For instance the nav buttons may still show when there is nothing more to scroll in a particular direction.
The first thing I tried was to use e.preventDefault() to try and stop any default browser action, but it still bring the item into view. I'm using the on "focus" to capture the event:
$("body").on("focus", ".chip-scroller_chip", moveFocus);
This seemingly has no effect.
I could tag non-visible anchors with tabindex=-1 but I don't want to stop the focus event happening, just regain control back from the browser.
Any ideas would be great.
What if you would add an if on move focus, assign another class with js to which elements you want to do actions, and with an if check if has a class .hassClass(), then if it does do something, else dont.
Add the class while you create an element. To the class that you dont want to show, add overflow: none, do the wanted thing to the other ones.
Atleast I would oreantate towards this.
I used jQuery-One-Page-Nav for a one page scrolling menu. In my page there are two menus on either side of a logo. So, I have to use jQuery-One-Page-Nav twice. If I click any menu, it scrolls this area and shows the menu button for the current page as active. But when I scroll to any area of the second menu, the menu button for the active page in that menu is not being activated.
Here is the link to jQuery-One-Page-Nav: jQuery-One-Page-Nav.
Here, I have attached an image. Please click to view.
Please give some solutions for this problem.
Here is my code:
/*ONE page menu one*/
$('#nav').onePageNav({
currentClass: 'current',
scrollOffset: 75
});
/*ONE page menu two*/
$('#mav').onePageNav({
currentClass: 'current',
scrollOffset: 75
});
You don't need two navbars for that page. You didn't post your code, but if you are using li then give the first left three li a class identifer and give the second right three a class identifier and then use css to position them using float: left and float: right.
If you are using bootstrap then you may use navbar-left and navbar-right classes.
I need to reproduce the kind of menu we can find on forbes.com. I'm just interested in the logo item submenu.
I'm almost done. I made the logo item menu, the first level menu with category names and the second level where are displayed article links from each category.
Up to now it's a full CSS menu set up on a basical way. When the user has its mouse on the logo, it just displays the first submenu level. I think I will need some JS because my goal is - like on forbes submenu - to display a mouseover effect on the first subitem to allow the second submenu level to be displayed in the same time. (it looks nicer)
Here is my code (simplified) :
<ul id="menu"><li>
<a href="#" >Mylogo</a>
<ul class="submenu1">
<li class="item1">item1
<ul class="subemnu2">content</ul>
</li>
</ul>/*----submenu1-------*/
</li>/*-----li menu------*/
</ul>/*---- ul menu-------*/
Thanks for your help. Regards
You don't need JavaScript for your use case. You can do it with CSS3 animations:
http://www.w3schools.com/css3/css3_animations.asp
When a user hovers over the first subitem, you change its appearance (.submenu1:hover), and you can also trigger an animation to show the second level of menu items.
I have created the following page http://kylehouston.com/testing/localscroll/ where I have a number of main links and then sublinks for these. At the moment when a main link is clicked the content scrolls vertically and when a sublink is clicked eg Blue Inner Link 1 the content slides horizontally.
My question is how can I update the script so that when I click a main link the content scrolls horizontally and when I click a sublink the content scrolls vertically?
Thanks
Kyle
Based on the documentation I think you need to setup selectors that target the parents and children separately. Then set the axis property.
$('parent selector').localScroll({
axis:'yx'
});
$('child selector').localScroll({
axis:'xy'
});
Right now your code uses the same selector and default axis for everything
$.localScroll.defaults.axis = 'xy';