in chrome, space-around doesn't center items if its single column.
but in Firefox, it works.
how to make it behave like firefox?
also, keep in mind that text is aligned to the right
.flex-cont {
display: flex;
justify-content: flex-start;
flex-flow: column wrap;
align-content: space-around;
align-content: space-evenly;
align-items: flex-end;
}
.flex-item {
/* display: inline-block; */
flex: 0 1 auto;
width: fit-content;
}
http://jsfiddle.net/f6k7xoe0/1/
edit: also I can do this but this messes up text aligning to right :
.flex-cont{
align-items: center;
}
edit: honestly I wouldn't care so much if it was as a hobby, but I added cefsharp(chrome) in my application. will be in production. there is no other way. i have to get that render in the cefsharp.
edit:
this is not a duplicate.
I dont ask WHY it doesn't work. I want a solution
my output is different. output in the other questions is not even multi-column.
edit2: I solved it via js getboundrect compare get max-width of each item them apply margin if wrap happens. but its messy don't wanna use it. but I have to.
I cleaned up the code to make it apply the all flex-container, flex item if you give appropriate CssSelector in the doit() function. it will work. but this is for columns.
http://jsfiddle.net/yeaqrh48/1203/
var debug = true;
class ertTimer {
constructor(funcName ,intervalms=3500, maxRunDuration=20000 , StopIfReturnsTrue=true ) {
this.intervalObj = setInterval(function(){
console.log("interval - funcName:" + funcName.name);
try{
var res = funcName();
if(StopIfReturnsTrue)
if(res == true)
clearInterval(intervalObj);
} catch(exx){console.warn(exx.message, exx.stack);}
}, intervalms);
// after 15 sec delete interval
setTimeout( function(){ clearInterval( intervalObj ); },maxRunDuration);
this.intervalms = intervalms;
this.maxRunDuration = maxRunDuration;
}
get getter_intervalms() { return this.intervalms; }
calcRepeatTimes() {
return this.maxRunDuration / this.intervalms;
}
}
var center_ONsingleCol_nonFF = function(contNode, itemSelector) {
var items = contNode.querySelectorAll(itemSelector);
//arr.count shoud be 1 element // items[0].style.alignItems = "center";
var parItem = items[0].parentNode;
var parItemR = parItem.getBoundingClientRect();
var parWidth = parItemR.width;
var maxItemWidth = 0;
for (var k = 0; k < items.length; k++) {
var currItem = items[k].getBoundingClientRect();
if (currItem.width > maxItemWidth)
maxItemWidth = currItem.width;
//console.log(parWidth, itemWidth);
}
var alignItemsVal = getComputedStyle_propValue(parItem , "align-items");
var flexDirVal = getComputedStyle_propValue(parItem , "flex-direction");
var iswrapped = isWrapped(contNode ,itemSelector );
for (var k = 0; k < items.length; k++) {
if(iswrapped && flexDirVal == "column" ){
if(alignItemsVal == "flex-end"){
items[k].style.marginRight = "" + ((parWidth - maxItemWidth) * 0.5) + "px";
items[k].style.marginLeft = "";
}
else if(alignItemsVal == "flex-start"){
items[k].style.marginRight = "";
items[k].style.marginLeft = "" + ((parWidth - maxItemWidth) * 0.5) + "px";
}else
{
items[k].style.marginRight = "";
items[k].style.marginLeft = "";
}
}
else{
items[k].style.marginRight = "";
items[k].style.marginLeft = "";
}
}
};
var getComputedStyle_propValue = function(element , CssPropName){
//var element = document.querySelector( selector );
var compStyles = window.getComputedStyle(element);
var comStyle_xxx = compStyles.getPropertyValue(CssPropName);
return comStyle_xxx;
};
var colorizeItem = function(items) {
for (var k = 0; k < items.length; k++) {
items[k].style += ";background:Red;";
}
};
var detectWrap = function(contNode, item_selector) {
var wrappedItems = [];
var prevItem = {};
var currItem = {};
var items = contNode.querySelectorAll(item_selector);
//console.log("wrapped item arrrat::",items);
for (var i = 0; i < items.length; i++) {
currItem = items[i].getBoundingClientRect();
if (prevItem && prevItem.top > currItem.top) {
wrappedItems.push(items[i]);
}
prevItem = currItem;
}
return wrappedItems;
};
var isFirefox = function() {
var _isFF = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
return _isFF;
};
var isWrapped = function(contNode, item_selector){
var wrappedItems = detectWrap(contNode, item_selector);
//colorizeItem(wrappedItems);
if (wrappedItems == null || wrappedItems.length == 0)
return true;
else
return false;
};
var isWired_listenContResize = false;
var doit = function() {
if (isFirefox()) {
console.log("ff already works Right. ");
return;
} else {
console.log("not ff. script will run. ");
}
/* flexItem_selector must be relative to flexCont*/
var flexContainer_selector = ".flex-cont.cont-resize"; /*specific flex-cont */
var flexItem_selector = ".flex-item";
var contList = document.querySelectorAll(flexContainer_selector);
for (var i = 0; i < contList.length; i++) {
//no such event //there is external lib..
// call doit after you change size in the code;
if (!isWired_listenContResize) {
contList[i].onresize = function() { doit(); };
}
center_ONsingleCol_nonFF(contList[i], flexItem_selector);
}
isWired_listenContResize = true;
};
window.onresize = function(event) { doit(); };
window.onload = function(event) {
doit();
const et1_ = new ertTimer(doit , 500, 320000,true );
};
I am having some really weird issues with my static GridView Header. The lines in IE aren't lining up properly; some of them do, and others do not. Can some one help me out? It works perfectly in Chrome, just not IE.
Chrome:
IE:
Here is my relevant code.
<script type="text/javascript">
function MakeStaticHeader(gridId, height, width, headerHeight, isFooter) {
var tbl = document.getElementById(gridId);
if (tbl) {
var DivHR = document.getElementById('DivHeaderRow');
var DivMC = document.getElementById('DivMainContent');
var DivFR = document.getElementById('DivFooterRow');
//*** Set divheaderRow Properties ****
DivHR.style.height = headerHeight + 'px';
DivHR.style.width = (parseInt(width) - 50) + 'px';
DivHR.style.position = 'relative';
DivHR.style.top = '0px';
DivHR.style.left = (tbl.clientLeft-25) +'px';
DivHR.style.zIndex = '10';
DivHR.style.verticalAlign = 'top';
DivHR.style.alignContent = 'center';
//*** Set divMainContent Properties ****
DivMC.style.width = width + 'px';
DivMC.style.height = height + 'px';
DivMC.style.position = 'relative';
DivMC.style.top = -headerHeight + 'px';
DivMC.style.zIndex = '1';
//****Copy Header in divHeaderRow****
DivHR.appendChild(tbl.cloneNode(true));
}
}
function OnScrollDiv(Scrollablediv) {
document.getElementById('DivHeaderRow').scrollLeft = Scrollablediv.scrollLeft;
//if (document.getElementById('DivHeaderRow').scrollLeft >= 300) {
// document.getElementById('DivHeaderRow').scrollLeft = 300;
//}
}
</script>
CSS
html, body {
margin:0px;
padding:0px;
width: 100%;
box-sizing: border-box;
}
CSS Header Style
.GVFixedHeader
{
font-weight: bold;
background-color: Green;
position: relative;
font-size: 12px;
text-align: left;
}
It has to do with how IE renders a GridView. I would custom change my formating on one cell of the table, but that would mess with IE and change the default settings. Chrome would correctly identify that I only wanted to add style not change completely.
for (int i = 0; i < e.Row.Cells.Count; i++)
{
if (e.Row.RowType == DataControlRowType.Header)
{
e.Row.Cells[i].Attributes.Add("style", "white-space: inital;");
e.Row.Cells[i].Attributes.Add("style", "text-align: left;");//THIS IS WHAT I ADDED + some altering of the width of the JS
if (i == 1)
{
e.Row.Cells[i].Text = "Make Inactive?";
}
if (i == 9)
{
e.Row.Cells[i].Text = "Total Invoice YTD";
e.Row.Cells[i].Attributes.Add("style", "white-space: normal;");
}
if (i == 13)
{
e.Row.Cells[i].Attributes.Add("style", "white-space: normal;");
}
}
if (e.Row.RowType == DataControlRowType.DataRow) { e.Row.Cells[i].Attributes.Add("style", "white-space: nowrap;"); } //ALWAYS makes sure there is no wrapping of text
}
I have three classes of div containers. One is an outer container
with width:1200px, with inner div rows that each have inner div's with a
desired size of 280 px. My problem is that when I create the elements
using the DOM that the CountriesInnerDiv elements are varying in size depending what is inside them.
Here's what I have so far:
.CountriesOuterDiv1{
width: 1200px;
}
.CountriesInnerDiv{
min-width:280px;
display:inline;
border:1px solid black;
}
.RowDiv {
width:100%;
}
Here is the relevant Javascript:
function AddTable() {
var TableDiv = document.getElementById("CountriesOuterDiv");
var i,j;
var NumCountries = 5;
var NumSectors = 5;
for (i = 0; i < NumCountries; i++) {
var RowDiv = document.createElement("div")
RowDiv.className = "RowDiv";
RowDiv.id = "Row"+i;
for (j = 0; j < NumSectors + 1; j++) {
var CountryData = document.createElement("div");
var SectorString = String(i+1)+"_"+String(j);
CountryData.className = "CountriesInnerDiv";
CountryData.id = "CountryData"+SectorString;
if (!((i ==0 && j == 0) || (i==0 && j ==1))) {
CountryData.style.display = "none";
}
if (j == 0 || (i == 0 && j == 1)) {
var CountryDataSelect = document.createElement("select");
var AddButton = document.createElement("button");
AddButton.id = "AddButton" + SectorString;
AddButton.innerHTML = "+";
if (j != 0) {
AddButton.setAttribute('onclick','AddOrDeleteDiv("add", "' + SectorString + '");');
}
else {
if (i != NumCountries - 1) {
AddButton.setAttribute('onclick','AddCountry("' + SectorString + '")');
}
if (i != 0) {
var DeleteCountry = document.createElement("button");
DeleteCountry.id = "DeleteButton" + SectorString;
DeleteCountry.innerHTML = "-";
DeleteCountry.setAttribute('onclick', 'DeleteCountry("' + SectorString + '")');
}
}
CountryData.appendChild(CountryDataSelect);
if (i != NumCountries - 1) {
CountryData.appendChild(AddButton);
}
if (i!=0) {
CountryData.appendChild(DeleteCountry);
}
RowDiv.appendChild(CountryData);
}
else if (j == NumSectors) {
var CountryDataSelect = document.createElement("select");
var DeleteButton = document.createElement("button");
DeleteButton.id = "DeleteButton" + SectorString;
DeleteButton.innerHTML = "-";
DeleteButton.setAttribute('onclick','AddOrDeleteDiv("delete", "' + SectorString + '");');
CountryData.appendChild(CountryDataSelect);
CountryData.appendChild(DeleteButton);
}
else {
var CountryDataSelect = document.createElement("select");
var AddButton = document.createElement("button");
var ADString = "add";
AddButton.setAttribute('onclick','AddOrDeleteDiv("add", "' + SectorString + '");');
AddButton.id = "AddButton" + SectorString;
AddButton.innerHTML = "+";
var DeleteButton = document.createElement("button");
DeleteButton.id = "DeleteButton" + SectorString;
DeleteButton.innerHTML = "-";
DeleteButton.setAttribute('onclick','AddOrDeleteDiv("delete", "' + SectorString + '");');
CountryData.appendChild(CountryDataSelect);
CountryData.appendChild(AddButton);
CountryData.appendChild(DeleteButton);
}
RowDiv.appendChild(CountryData);
TableDiv.appendChild(RowDiv);
}//End of inner for
}//End of outer for
}//end of function
Its cose you make this div display:inline; do like this .CountriesInnerDiv{
min-width:280px;
display:inline-block;
border:1px solid black;
}
Basically, what you're experiencing, is most likely that the inner element is just too big in it's minimal size to fit the parent one when the window is small... well.. we can't have an inside bigger than an outside... unless you use
overflow: scroll;
This will make the parent element scrollable so you can visualize the child by scrolling...
or...
.parent{min-width: 280px}
wich will make the parent has the same minimum width...
I want to make a sidebar like gool
e play store..When i scroll left side in the body then the sidebar should appear...
Is there any idea to make such a sidebar?
For js.
$(function () {
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6 && $('#sidebar').offset()!=null) {
var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('margin-top').replace(/auto/, 0));
var height = $('#sidebar').height();
var footerTop = $('#footer').offset().top - parseFloat($('#footer').css('margin-top').replace(/auto/, 0));
var gap = 15;
scrollingSideBar(top,height,footerTop,gap);
$(window).resize(function (event) {
scrollingSideBar(top,height,footerTop,gap);
});
$(window).scroll(function (event) {
scrollingSideBar(top,height,footerTop,gap);
});
}
});
function scrollingSideBar(top,height,footerTop,gap){
var winHeight = $(window).height();
var winWidth = $(window).width();
var y = $(this).scrollTop();
var x = $(this).scrollLeft();
if (height+top+gap < winHeight) {
$('#sidebar').css({ position: "fixed",top: top, left:-x});
} else if(y+winHeight > height+top+gap){
$('#sidebar').css({position: "fixed",top: winHeight-height-gap, left:-x});
} else if (y+winHeight > footerTop) {
$('#sidebar').css({position: "fixed",top: footerTop-height-y-gap, left:-x});
} else {
$('#sidebar').css({position: "absolute",top: top, left:-x/winWidth});
}
}
For CSS you just right click on browser and inspect it.
<ul id="MenuBar2" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
<ul>
<li>Mr</li>
<li>Mrs</li>
<li>Miss</li>
<li>Ms</li>
<li>Master</li>
<li>Prof.</li>
<li>Dr</li>
</ul>
</li>
</ul>
This is the code that I have used on Dreamweaver Cs6. The drop down works however, when I click on one of the titles, it doesn't select it. Could someone explain how to fix this problem please.
Thanks :)
If you are using the default Spry menu provided by Dreamweaver, you have to make sure that in the head section that SpryMenuBar.js and SpryMenuBarHorizontal.css are included.
If so you have also to insert
<script type="text/javascript">
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
before </body>
So you end code should look like this
(function() { // BeginSpryComponent
if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.BrowserSniff = function()
{
var b = navigator.appName.toString();
var up = navigator.platform.toString();
var ua = navigator.userAgent.toString();
this.mozilla = this.ie = this.opera = this.safari = false;
var re_opera = /Opera.([0-9\.]*)/i;
var re_msie = /MSIE.([0-9\.]*)/i;
var re_gecko = /gecko/i;
var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;
var r = false;
if ( (r = ua.match(re_opera))) {
this.opera = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_msie))) {
this.ie = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_safari))) {
this.safari = true;
this.version = parseFloat(r[2]);
} else if (ua.match(re_gecko)) {
var re_gecko_version = /rv:\s*([0-9\.]+)/i;
r = ua.match(re_gecko_version);
this.mozilla = true;
this.version = parseFloat(r[1]);
}
this.windows = this.mac = this.linux = false;
this.Platform = ua.match(/windows/i) ? "windows" :
(ua.match(/linux/i) ? "linux" :
(ua.match(/mac/i) ? "mac" :
ua.match(/unix/i)? "unix" : "unknown"));
this[this.Platform] = true;
this.v = this.version;
if (this.safari && this.mac && this.mozilla) {
this.mozilla = false;
}
};
Spry.is = new Spry.BrowserSniff();
// Constructor for Menu Bar
// element should be an ID of an unordered list (<ul> tag)
// preloadImage1 and preloadImage2 are images for the rollover state of a menu
Spry.Widget.MenuBar = function(element, opts)
{
this.init(element, opts);
};
Spry.Widget.MenuBar.prototype.init = function(element, opts)
{
this.element = this.getElement(element);
// represents the current (sub)menu we are operating on
this.currMenu = null;
this.showDelay = 250;
this.hideDelay = 600;
if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (Spry.is.ie && typeof document.uniqueID == 'undefined'))
{
// bail on older unsupported browsers
return;
}
// Fix IE6 CSS images flicker
if (Spry.is.ie && Spry.is.version < 7){
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
}
this.upKeyCode = Spry.Widget.MenuBar.KEY_UP;
this.downKeyCode = Spry.Widget.MenuBar.KEY_DOWN;
this.leftKeyCode = Spry.Widget.MenuBar.KEY_LEFT;
this.rightKeyCode = Spry.Widget.MenuBar.KEY_RIGHT;
this.escKeyCode = Spry.Widget.MenuBar.KEY_ESC;
this.hoverClass = 'MenuBarItemHover';
this.subHoverClass = 'MenuBarItemSubmenuHover';
this.subVisibleClass ='MenuBarSubmenuVisible';
this.hasSubClass = 'MenuBarItemSubmenu';
this.activeClass = 'MenuBarActive';
this.isieClass = 'MenuBarItemIE';
this.verticalClass = 'MenuBarVertical';
this.horizontalClass = 'MenuBarHorizontal';
this.enableKeyboardNavigation = true;
this.hasFocus = false;
// load hover images now
if(opts)
{
for(var k in opts)
{
if (typeof this[k] == 'undefined')
{
var rollover = new Image;
rollover.src = opts[k];
}
}
Spry.Widget.MenuBar.setOptions(this, opts);
}
// safari doesn't support tabindex
if (Spry.is.safari)
this.enableKeyboardNavigation = false;
if(this.element)
{
this.currMenu = this.element;
var items = this.element.getElementsByTagName('li');
for(var i=0; i<items.length; i++)
{
if (i > 0 && this.enableKeyboardNavigation)
items[i].getElementsByTagName('a')[0].tabIndex='-1';
this.initialize(items[i], element);
if(Spry.is.ie)
{
this.addClassName(items[i], this.isieClass);
items[i].style.position = "static";
}
}
if (this.enableKeyboardNavigation)
{
var self = this;
this.addEventListener(document, 'keydown', function(e){self.keyDown(e); }, false);
}
if(Spry.is.ie)
{
if(this.hasClassName(this.element, this.verticalClass))
{
this.element.style.position = "relative";
}
var linkitems = this.element.getElementsByTagName('a');
for(var i=0; i<linkitems.length; i++)
{
linkitems[i].style.position = "relative";
}
}
}
};
Spry.Widget.MenuBar.KEY_ESC = 27;
Spry.Widget.MenuBar.KEY_UP = 38;
Spry.Widget.MenuBar.KEY_DOWN = 40;
Spry.Widget.MenuBar.KEY_LEFT = 37;
Spry.Widget.MenuBar.KEY_RIGHT = 39;
Spry.Widget.MenuBar.prototype.getElement = function(ele)
{
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
};
Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
{
if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
{
return false;
}
return true;
};
Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
{
if (!ele || !className || this.hasClassName(ele, className))
return;
ele.className += (ele.className ? " " : "") + className;
};
Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
{
if (!ele || !className || !this.hasClassName(ele, className))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
};
// addEventListener for Menu Bar
// attach an event to a tag without creating obtrusive HTML code
Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
{
try
{
if (element.addEventListener)
{
element.addEventListener(eventType, handler, capture);
}
else if (element.attachEvent)
{
element.attachEvent('on' + eventType, handler);
}
}
catch (e) {}
};
// createIframeLayer for Menu Bar
// creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
{
var layer = document.createElement('iframe');
layer.tabIndex = '-1';
layer.src = 'javascript:""';
layer.frameBorder = '0';
layer.scrolling = 'no';
menu.parentNode.appendChild(layer);
layer.style.left = menu.offsetLeft + 'px';
layer.style.top = menu.offsetTop + 'px';
layer.style.width = menu.offsetWidth + 'px';
layer.style.height = menu.offsetHeight + 'px';
};
// removeIframeLayer for Menu Bar
// removes an IFRAME underneath a menu to reveal any form controls and ActiveX
Spry.Widget.MenuBar.prototype.removeIframeLayer = function(menu)
{
var layers = ((menu == this.element) ? menu : menu.parentNode).getElementsByTagName('iframe');
while(layers.length > 0)
{
layers[0].parentNode.removeChild(layers[0]);
}
};
// clearMenus for Menu Bar
// root is the top level unordered list (<ul> tag)
Spry.Widget.MenuBar.prototype.clearMenus = function(root)
{
var menus = root.getElementsByTagName('ul');
for(var i=0; i<menus.length; i++)
this.hideSubmenu(menus[i]);
this.removeClassName(this.element, this.activeClass);
};
// bubbledTextEvent for Menu Bar
// identify bubbled up text events in Safari so we can ignore them
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
{
return Spry.is.safari && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget));
};
// showSubmenu for Menu Bar
// set the proper CSS class on this menu to show it
Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
{
if(this.currMenu)
{
this.clearMenus(this.currMenu);
this.currMenu = null;
}
if(menu)
{
this.addClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
{
if(!this.hasClassName(this.element, this.horizontalClass) || menu.parentNode.parentNode != this.element)
{
menu.style.top = menu.parentNode.offsetTop + 'px';
}
}
if(Spry.is.ie && Spry.is.version < 7)
{
this.createIframeLayer(menu);
}
}
this.addClassName(this.element, this.activeClass);
};
// hideSubmenu for Menu Bar
// remove the proper CSS class on this menu to hide it
Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
{
if(menu)
{
this.removeClassName(menu, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
{
menu.style.top = '';
menu.style.left = '';
}
if(Spry.is.ie && Spry.is.version < 7)
this.removeIframeLayer(menu);
}
};
// initialize for Menu Bar
// create event listeners for the Menu Bar widget so we can properly
// show and hide submenus
Spry.Widget.MenuBar.prototype.initialize = function(listitem, element)
{
var opentime, closetime;
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
if(menu)
this.addClassName(link, this.hasSubClass);
if(!Spry.is.ie)
{
// define a simple function that comes standard in IE to determine
// if a node is within another node
listitem.contains = function(testNode)
{
// this refers to the list item
if(testNode == null)
return false;
if(testNode == this)
return true;
else
return this.contains(testNode.parentNode);
};
}
// need to save this for scope further down
var self = this;
this.addEventListener(listitem, 'mouseover', function(e){self.mouseOver(listitem, e);}, false);
this.addEventListener(listitem, 'mouseout', function(e){if (self.enableKeyboardNavigation) self.clearSelection(); self.mouseOut(listitem, e);}, false);
if (this.enableKeyboardNavigation)
{
this.addEventListener(link, 'blur', function(e){self.onBlur(listitem);}, false);
this.addEventListener(link, 'focus', function(e){self.keyFocus(listitem, e);}, false);
}
};
Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)
{
this.lastOpen = listitem.getElementsByTagName('a')[0];
this.addClassName(this.lastOpen, listitem.getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.hasFocus = true;
};
Spry.Widget.MenuBar.prototype.onBlur = function (listitem)
{
this.clearSelection(listitem);
};
Spry.Widget.MenuBar.prototype.clearSelection = function(el){
//search any intersection with the current open element
if (!this.lastOpen)
return;
if (el)
{
el = el.getElementsByTagName('a')[0];
// check children
var item = this.lastOpen;
while (item != this.element)
{
var tmp = el;
while (tmp != this.element)
{
if (tmp == item)
return;
try{
tmp = tmp.parentNode;
}catch(err){break;}
}
item = item.parentNode;
}
}
var item = this.lastOpen;
while (item != this.element)
{
this.hideSubmenu(item.parentNode);
var link = item.getElementsByTagName('a')[0];
this.removeClassName(link, this.hoverClass);
this.removeClassName(link, this.subHoverClass);
item = item.parentNode;
}
this.lastOpen = false;
};
Spry.Widget.MenuBar.prototype.keyDown = function (e)
{
if (!this.hasFocus)
return;
if (!this.lastOpen)
{
this.hasFocus = false;
return;
}
var e = e|| event;
var listitem = this.lastOpen.parentNode;
var link = this.lastOpen;
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
var opts = [listitem, menu, null, this.getSibling(listitem, 'previousSibling'), this.getSibling(listitem, 'nextSibling')];
if (!opts[3])
opts[2] = (listitem.parentNode.parentNode.nodeName.toLowerCase() == 'li')?listitem.parentNode.parentNode:null;
var found = 0;
switch (e.keyCode){
case this.upKeyCode:
found = this.getElementForKey(opts, 'y', 1);
break;
case this.downKeyCode:
found = this.getElementForKey(opts, 'y', -1);
break;
case this.leftKeyCode:
found = this.getElementForKey(opts, 'x', 1);
break;
case this.rightKeyCode:
found = this.getElementForKey(opts, 'x', -1);
break;
case this.escKeyCode:
case 9:
this.clearSelection();
this.hasFocus = false;
default: return;
}
switch (found)
{
case 0: return;
case 1:
//subopts
this.mouseOver(listitem, e);
break;
case 2:
//parent
this.mouseOut(opts[2], e);
break;
case 3:
case 4:
// left - right
this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
break;
}
var link = opts[found].getElementsByTagName('a')[0];
if (opts[found].nodeName.toLowerCase() == 'ul')
opts[found] = opts[found].getElementsByTagName('li')[0];
this.addClassName(link, opts[found].getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.lastOpen = link;
opts[found].getElementsByTagName('a')[0].focus();
//stop further event handling by the browser
return Spry.Widget.MenuBar.stopPropagation(e);
};
Spry.Widget.MenuBar.prototype.mouseOver = function (listitem, e)
{
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
if (this.enableKeyboardNavigation)
this.clearSelection(listitem);
if(this.bubbledTextEvent())
{
// ignore bubbled text events
return;
}
if (listitem.closetime)
clearTimeout(listitem.closetime);
if(this.currMenu == listitem)
{
this.currMenu = null;
}
// move the focus too
if (this.hasFocus)
link.focus();
// show menu highlighting
this.addClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
this.lastOpen = link;
if(menu && !this.hasClassName(menu, this.subHoverClass))
{
var self = this;
listitem.opentime = window.setTimeout(function(){self.showSubmenu(menu);}, this.showDelay);
}
};
Spry.Widget.MenuBar.prototype.mouseOut = function (listitem, e)
{
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
if(this.bubbledTextEvent())
{
// ignore bubbled text events
return;
}
var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
if(!listitem.contains(related))
{
if (listitem.opentime)
clearTimeout(listitem.opentime);
this.currMenu = listitem;
// remove menu highlighting
this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
if(menu)
{
var self = this;
listitem.closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, this.hideDelay);
}
if (this.hasFocus)
link.blur();
}
};
Spry.Widget.MenuBar.prototype.getSibling = function(element, sibling)
{
var child = element[sibling];
while (child && child.nodeName.toLowerCase() !='li')
child = child[sibling];
return child;
};
Spry.Widget.MenuBar.prototype.getElementForKey = function(els, prop, dir)
{
var found = 0;
var rect = Spry.Widget.MenuBar.getPosition;
var ref = rect(els[found]);
var hideSubmenu = false;
//make the subelement visible to compute the position
if (els[1] && !this.hasClassName(els[1], this.MenuBarSubmenuVisible))
{
els[1].style.visibility = 'hidden';
this.showSubmenu(els[1]);
hideSubmenu = true;
}
var isVert = this.hasClassName(this.element, this.verticalClass);
var hasParent = els[0].parentNode.parentNode.nodeName.toLowerCase() == 'li' ? true : false;
for (var i = 1; i < els.length; i++){
//when navigating on the y axis in vertical menus, ignore children and parents
if(prop=='y' && isVert && (i==1 || i==2))
{
continue;
}
//when navigationg on the x axis in the FIRST LEVEL of horizontal menus, ignore children and parents
if(prop=='x' && !isVert && !hasParent && (i==1 || i==2))
{
continue;
}
if (els[i])
{
var tmp = rect(els[i]);
if ( (dir * tmp[prop]) < (dir * ref[prop]))
{
ref = tmp;
found = i;
}
}
}
// hide back the submenu
if (els[1] && hideSubmenu){
this.hideSubmenu(els[1]);
els[1].style.visibility = '';
}
return found;
};
Spry.Widget.MenuBar.camelize = function(str)
{
if (str.indexOf('-') == -1){
return str;
}
var oStringList = str.split('-');
var isFirstEntry = true;
var camelizedString = '';
for(var i=0; i < oStringList.length; i++)
{
if(oStringList[i].length>0)
{
if(isFirstEntry)
{
camelizedString = oStringList[i];
isFirstEntry = false;
}
else
{
var s = oStringList[i];
camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
}
}
}
return camelizedString;
};
Spry.Widget.MenuBar.getStyleProp = function(element, prop)
{
var value;
try
{
if (element.style)
value = element.style[Spry.Widget.MenuBar.camelize(prop)];
if (!value)
if (document.defaultView && document.defaultView.getComputedStyle)
{
var css = document.defaultView.getComputedStyle(element, null);
value = css ? css.getPropertyValue(prop) : null;
}
else if (element.currentStyle)
{
value = element.currentStyle[Spry.Widget.MenuBar.camelize(prop)];
}
}
catch (e) {}
return value == 'auto' ? null : value;
};
Spry.Widget.MenuBar.getIntProp = function(element, prop)
{
var a = parseInt(Spry.Widget.MenuBar.getStyleProp(element, prop),10);
if (isNaN(a))
return 0;
return a;
};
Spry.Widget.MenuBar.getPosition = function(el, doc)
{
doc = doc || document;
if (typeof(el) == 'string') {
el = doc.getElementById(el);
}
if (!el) {
return false;
}
if (el.parentNode === null || Spry.Widget.MenuBar.getStyleProp(el, 'display') == 'none') {
//element must be visible to have a box
return false;
}
var ret = {x:0, y:0};
var parent = null;
var box;
if (el.getBoundingClientRect) { // IE
box = el.getBoundingClientRect();
var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
ret.x = box.left + scrollLeft;
ret.y = box.top + scrollTop;
} else if (doc.getBoxObjectFor) { // gecko
box = doc.getBoxObjectFor(el);
ret.x = box.x;
ret.y = box.y;
} else { // safari/opera
ret.x = el.offsetLeft;
ret.y = el.offsetTop;
parent = el.offsetParent;
if (parent != el) {
while (parent) {
ret.x += parent.offsetLeft;
ret.y += parent.offsetTop;
parent = parent.offsetParent;
}
}
// opera & (safari absolute) incorrectly account for body offsetTop
if (Spry.is.opera || Spry.is.safari && Spry.Widget.MenuBar.getStyleProp(el, 'position') == 'absolute')
ret.y -= doc.body.offsetTop;
}
if (el.parentNode)
parent = el.parentNode;
else
parent = null;
if (parent.nodeName){
var cas = parent.nodeName.toUpperCase();
while (parent && cas != 'BODY' && cas != 'HTML') {
cas = parent.nodeName.toUpperCase();
ret.x -= parent.scrollLeft;
ret.y -= parent.scrollTop;
if (parent.parentNode)
parent = parent.parentNode;
else
parent = null;
}
}
return ret;
};
Spry.Widget.MenuBar.stopPropagation = function(ev)
{
if (ev.stopPropagation)
ev.stopPropagation();
else
ev.cancelBubble = true;
if (ev.preventDefault)
ev.preventDefault();
else
ev.returnValue = false;
};
Spry.Widget.MenuBar.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
{
if (!optionsObj)
return;
for (var optionName in optionsObj)
{
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName];
}
};
})(); // EndSpryComponent
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
}
ul.MenuBarActive
{
z-index: 1000;
}
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
float: left;
}
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}
ul.MenuBarHorizontal ul li
{
width: 8.2em;
}
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}
ul.MenuBarHorizontal ul
{
border: 1px solid #CCC;
}
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #EEE;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #33C;
color: #FFF;
}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #33C;
color: #FFF;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}
#media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #FFF;
}
}
<ul id="MenuBar2" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
<ul>
<li>Mr</li>
<li>Mrs</li>
<li>Miss</li>
<li>Ms</li>
<li>Master</li>
<li>Prof.</li>
<li>Dr</li>
</ul>
</li>
</ul>
You can include Bootstrap to your website and follow these examples:
Dropdowns
Beautiful Dropdowns
Split button Dropdowns