I have an unordered list #ul with set max-height and overflow-y: scroll it houses a lot of list tags with unique id's like #item-1.
I am trying to figure out a way to scroll this ul element to specific li if it is selected, so far I've tried
let ul = document.getElementById('ul');
let li = document.getElementById('item-1') // can be item-2 etc..
ul.scrollTo(0, li.offsetTop)
But I get error saying that scrollTo is not a function.
Please provide vanilla js solutions only.
HTML showing what I have at the moment: https://jsfiddle.net/axu8eywr/1
You have the Scrolling functions confused.
It's either:
window.scrolTo(x,y) - https://developer.mozilla.org/en/docs/Web/API/Window/scrollTo
(element).scrollIntoView() - https://developer.mozilla.org/en/docs/Web/API/Element/scrollIntoView
Related
Just a quick question, my un-ordered list is coded to only have one li element, but it duplicates that element and then displays two of them.
example http://stredtech.co.uk/YMD/YMD.php
code behind http://pastebin.com/W9MDTid9
Any help would be great.
I have tried cutting out the CSS properties but it still duplicates.
I have read this post: scrolling to li element - jquery,
and used the jquery code, namely this.
var ul = $('ul.myul');
var li = $('li.item', ul)
ul.scrollTop(li.position().top);
The UL is on a div that is floated, and the UL has a set height, and overflow set to auto. The LI has padding and margin set.
The scroll code above is not working. The scroll is being set much further than the actual item. The offset is calculated incorrectly.
You ul has multiple list items thus the variable "li" has multiple li elements. Try this instead
var ul = $('ul.myul');
var li = $('li.item:eq(0)', ul);
ul.scrollTop(li.position().top);
Good Luck !!
In JS code I declare that when over on the LI element in the vertical Menu all the li elements get style: z-index:5 except the current over li element and li element with class="selected" that the style is: z-index: 10.
In chrome, FF it works well but in IE when I over the li element of the menu it disappeared.
The follow is the JS code:
var mainMenu_li = document.getElementById('mainMenu').getElementsByTagName('li');
for(i = 0; i < mainMenu_li.length; i++)
if(mainMenu_li[i].className != "selected")
mainMenu_li[i].style.zIndex = '5';
$('#' + curObjID).parent().css('z-index','10');
How can you help me?
First of all read this series of articles: https://developer.mozilla.org/en/Understanding_CSS_z-index
If you trying to use z-index in IE7 - it have problems with it - try to build menu based on "Stacking without z-index". For example - without hover position:static, with hover position:relative.
Also try to set without hover position:relative; (without z-index) and on hover position:relative;z-index:2
It will better if you put your styles to classes and manipulate with jquery through classes: addClass('class') and removeClass('class')
im new to jQuery and have a slight issue with the following navigation:
http://jsfiddle.net/6Dh8j/7/
Essentially, I love the navigation in the Creative Production section of this lovely site: http://www.gainsburyandwhiting.com > see Portfolio > Fashion Show etc...
I need to hide the current ul and show a fresh one in its place. At the moment, they show until I un-click the parent.
Any thoughts?
Thanks,
Red
You need to hide all the ul elements that are descendant of the siblings of the current ul e.g.
$(this).siblings().find('ul').fadeOut('fast');
This finds each sibling of the clicked ul (all of which are ul in the example) and finds all the ul elements that are withing their bounds and fades them out.
In the context of your code:
$("nav ul li").find("ul").hide().end()
.click(function(e) {
if (this == e.target) {
$(this).siblings().find('ul').fadeOut('fast');
$(this).children('ul').fadeToggle('fast');
}
});
I have implemented my own drop down menu and wanted to clarify the accessibility implication of my solution:
http://jsfiddle.net/tpHcv/5/
The piece of code i am interested in for now is:
$('#sub-nav > li ul').each(function(index){
var $this = $(this),
index = index + 1;
$this
.clone()
.appendTo('#main-nav > li:eq(' + index + ')');
});
'sub-nav' is hiddden from everyone via CSS to start. Then it is appended to the relevant 'main-nav' li. Will this approach prevent people using assistive technology from getting to the sub menu items?
Please don't aks why i have done it this way. Suffice to say i have no access to the original markup of the project so cannot just append the sub-menu to the markup in the way that i would like.
For greater accessibility, consider adding keyboard support. When a link has the focus (via tab or whatever), make sure its subnav is visible. Similarly, when a subnav link has focus, make sure it is visible. Some of that you can do with css via :focus.
It's unfortunate you don't have access to the markup. Is there a reason you need to clone the <ul>, or is it ok to just move the original element? Do your dom manipulation with script, but do the show/hide with css via the :hover pseudo-class.
This gets you part of the way there: http://jsfiddle.net/tpHcv/9/ You'll still need some JavaScript to manage tabs and focus on the sub-items.
#main-nav li > ul
{
display: none;
}
#main-nav > li a:focus + ul,
#main-nav > li:hover > ul
{
display:block;
}
Will your #main-nav links go anywhere or are they just for triggering the sub navigation? If they don't go anywhere, to support browsers with JavaScript disabled, consider hiding #main-nav initially with css, and then show it with JavaScript. This way it isn't displayed unless the links will actually do something.