Z-index in IE: li element disappeared when over on it - javascript

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')

Related

Select a css3 element by grandparent's parent's class

Im implementing multiple rangesliders into my site and because this is code generated in real time I need to select some elements by their parents parent class.
this is the code the timeline class is the last one i can set myself and i need to be able to edit the .irs-line-right without changing my other sliders
In your question you stated that you want to access an element through a parent element. I don't see why this is necessary, but it's surely possible. You can change the element style, attribute, etc. through js. However, it's best to simply use css if you only need to change the style of the span with the class 'irs-line-right'. I'll show how to do this in both css and javascript.
CSS Example
In css you can change the style of the 'irs-line-right'
by referencing the 'timeline' div (and no other ids or classes) as follows:
https://jsfiddle.net/2t3w0826/
.timeline > div:nth-of-type(2) > span > span > span > span:nth-of-type(3)
{
background-color: red;
}
Javascript Example
https://jsfiddle.net/8qceLgw8/
var array_of_all_timelines = document.getElementsByClassName("timeline");
for(var loop=0; loop < array_of_all_timelines.length; loop++)
{
var element_irs_line_right = array_of_all_timelines[loop].children[1].children[0].children[0].children[0].children[2];
element_irs_line_right.style.backgroundColor = "red";
};

Slider/scrolling navigation - excluding sections from nav and changing nav color over sections

Hi I'm currently using fullpage.js and wanted to use the fixed "slider" nav (with the dots on the right), but have two issues I'm trying to solve.
How do I make only certain sections appear as items/links in the nav and not every section (which it currently picks up on)? Basically, I have a "title slide" every 3-4 section of the page and only want these sections to appear in the nav, not all of the sections in between. Is it possible to create some variable to use as target ? Or does somebody know of an alternative slideNav that allows this behaviour?
function addVerticalNavigation(){
$body.append('<div id="' + SECTION_NAV + '"><ul></ul></div>');
var nav = $(SECTION_NAV_SEL);
nav.addClass(function() {
return options.showActiveTooltip ? SHOW_ACTIVE_TOOLTIP + ' ' + options.navigationPosition : options.navigationPosition;
});
for (var i = 0; i < $(SECTION_SEL).length; i++) {
var link = '';
if (options.anchors.length) {
link = options.anchors[i];
}
var li = '<li><span></span>';
I want to differ the colour of the nav (white or black) depending on the specific section background color. I found a code snippet which would help me achieve this for a fixed nav bar... Make Header/Navigation change colour when on different section of the website
...however it's targeting html/a nav 'div' which doesn't exist for slidesNav... From what I can see that's the case with a lot of these jquery slider navs. Could somebody suggest a workaround, or know of one which does contain html?
1- Possibly the easiest way is to create your own navigation system and use the fullpage.js callbacks or the state classes to style the active one.
Check this answer.
2- Just overwrite the active class for the element and use a different color.
#fp-nav ul li:nth-child(1) a.active span,
#fp-nav ul li:nth-child(1):hover a.active span{
background:blue;
}
#fp-nav ul li:nth-child(2) a.active span,
#fp-nav ul li:nth-child(2):hover a.active span{
background:red;
}
Demo online

Scrolling ul to specific li

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

Is it possible to determine whether you are in the last row of a css-defined column?

I am using the new css-style column to break a single ul into multiple columns. I wish to select the last element in each column with javascript or CSS.
html:
<ul>
<li />
<li />
<li><h4 /></li>
...
</ul>
css:
ul{
column-count: 6;
}
Sometimes the line-items with h4:s in them end up as the last item of the row, being orphans. I would like to solve this, and have been looking at two alternatives.
Using the css orphan property, but due to the markup I don't think it will work at all and It is not unsupported in Firefox and Safari, support is not a must but would be nice.
Adding some top-margin/padding to any h4 that is at the end of a column, but I don't know how to select them, either with css or javascript/jquery. I would prefer keeping the markup, as it is, but if it's not possible, I can change it.
Columns in CSS aren't content aware. The only two properties related to columns which can help you in a way are column-fill (which only works in firefox) and break-inside.
Column-fill will distribute the contents through the columns based on the height of the container.
Page-break will do for columns what clear does for floats, stopping elements from getting stuck between columns. It has different syntaxes across browsers.
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
But anyway, columns are more helpful when you have a container with text and want to divide it in columns without any extra markup. Since you are using li and don't have just a text inside a div, I would suggest you to use floats to achieve the multi column layout you are looking for.
You question is unclear.
If you want to know if your element (ex. h4) is in the last li than use CSS:
ul li:last-of-type h4
If you want to know this in JS but withou use of pseudoselector than you can use:
$(function () {
var $li = $('ul > li'),
count = $li.length - 1,
cssClass = 'last';
$li.eq(count).addClass(cssClass);;
});
And from here use CSS ul li.last h4
Working fiddle: http://jsfiddle.net/Lwuzgm08/2/
You could use the :last-child selector for selecting the last LI element.
li:last-child{color:red;}
Yes you can remove the orphan h4 tag from your html. Below is the simple scripts that does the same.
$('h4').each(function() {
var $this = $(this);
if($this.html().replace(/\s| /g, '').length == 0)
$this.remove();
});
If you want to select last element in each column (assuming li is an column) you can use following CSS
ul > li h4:last-of-type
or jQuery:
$('ul > li h4:last-of-type')
Providing fiddle: http://jsfiddle.net/pqse3er1/1/

Accessibility of JavaScript drop down menu

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.

Categories