Here Maps - infobubble reposition in viewport - here-api

I'm upgrading an application from Here Maps Javascript API v2 to v3.
In v2, the infobubbles re-position in the viewport so they stay on the screen (e.g. if it's on the left of the viewport, then the infobubble re-positions to the right so it doesn't appear off screen)
This behaviour no longer exists in v3 of the Here Maps JS API. The infobubble stays put all the time. I can't find any settings for this - is it possible to get this old behaviour back?
Cheers

I couldn't find any solution to this so rolled my own code to make it happen.
Here it is in case it helps anyone out ...
$(document).ready(function () {
setInterval(function () {
if ($('.H_ib_body').is(':visible')) {
var top = parseInt($('.H_ib_top').css('transform').split(',')[5]);
var left = parseInt($('.H_ib_top').css('transform').split(',')[4]);
var height = $('.H_ib_body').height();
if ($('.H_ib_body').attr('data-isBottom') != '1') { // on top
if (height - top > 0) {
{
$('.H_ib_body').css('bottom', 'auto').css('top', '0em').attr('data-isBottom', '1');
$('.H_ib_tail').css('transform', 'rotate(180deg)');
}
}
} else { // on bottom
var totalHeight = $('#map canvas').height();
if ((top + height) > totalHeight) {
$('.H_ib_body').css('bottom', '.5em').css('top', 'auto').attr('data-isBottom', '0');
$('.H_ib_tail').css('transform', '');
}
}
if ($('.H_ib_body').attr('data-isRight') != '1') { // on left
if (left - $('.H_ib_body').width() < -30) {
$('.H_ib_body').css('right', 'auto').css('left', '-20px').attr('data-isRight', '1');
}
} else { // on right
var totalWidth = $('#map canvas').width();
if (left + $('.H_ib_body').width() > totalWidth) {
$('.H_ib_body').css('right', '0px').css('left', 'auto').attr('data-isRight', '0');
}
}
}
}, 20);
});

Related

Rendered Height and Client Height aren't the same

I have a react application which contains a react component of publication cards. They represent a publication that has a title, some authors, a summary, date, and some other fields. I want each of the elements to have the same card size and each of the elements within the card to line up so the title sections are all the same height as the tallest title, the authors are the same height as the tallest of the authors and so on.
To do this, I have have an inner div that contains the content shouldn't change it's height and and outer div that I set to the highest clientHeight of all inner div elements.
I have a resize function that works, however only for when you drag and move the browser by resizing the window. When I click the maximize, restore, or snap the browser to the screen it ignores the height of the inner div and sets it to weird values. Ie, the rendered size of the content will be 85px in the chrome debugger, however clientWidth if I trace that value before I set it shows all of them for each of the inner divs as like 28 and so the outer div is being set to that value.
render() {
return (
<PubContainer>
<TitleSection
style={{ height: this.state.pubTitleHeight }}>
<InnerDiv className="innerPubTitleDiv">
{this.props.publicationData.header}
<SubtitleSection>
{this.props.publicationData.subtitle}
</SubtitleSection>
</InnerDiv>
</TitleSection>
</PubContainer>
);
}
SubtitleSection is a div and InnerDiv is the container that should have its height set to whatever is the value within. Here the rest of the code, along with the resize function.
componentDidUpdate() {
this.updatePublicationCardSizes();
}
componentDidMount() {
this._isMounted = true;
this.updatePublicationCardSizes();
window.addEventListener('resize', this.updatePublicationCardSizes.bind(this));
}
componentWillUnmount() {
this._isMounted = false;
window.removeEventListener('resize', this.updatePublicationCardSizes.bind(this));
}
updatePublicationCardSizes() {
this.setContainerHeightByClassName('innerPubTitleDiv', 'pubTitleHeight');
}
setContainerHeightByClassName(innerDivClassName, stateName) {
var classNameList = document.getElementsByClassName(innerDivClassName);
if (classNameList != undefined) {
var maxHeight = 0;
for (var index = 0; index < classNameList.length; index++) {
var divHeight = classNameList[index].clientHeight;
if (maxHeight < divHeight) {
maxHeight = divHeight;
}
}
if (this._isMounted) {
if (maxHeight > 0) {
if (this.state[stateName] != maxHeight) {
this.setState({
[stateName]: maxHeight
});
}
} else {
if (this.state[stateName] != '100%'){
this.setState({
[stateName]: '100%'
});
}
}
}
}
}
I've verified that resize is being called on all changes to the browser (drag, snap, restore, max, min). And again, the normal resizing by dragging the browser to change width does update and resize it correctly, it's only when I click the maximize button for example do I get the weird values. I'm trying to find out why just those cases don't work and how to make them work.
EDIT
I've refactored my code to use hooks, but I'm still getting the same issue when I click maximize/restore. Apparently the inner div clientHeight is still being calculated from a pre-render size, instead of setting it after the resize event has finished and rendered. Any ideas?
function PublicationCard(props) {
const [pubTitleHeight, setTitleHeight] = useState('100%');
useLayoutEffect(() => {
updatePublicationCardSizes();
window.addEventListener("resize", updatePublicationCardSizes);
return () => window.removeEventListener("resize", updatePublicationCardSizes);
});
const updatePublicationCardSizes = () => {
setTitleHeight(getContainerMaxHeightByClassName('innerPubTitleDiv'));
};
const getContainerMaxHeightByClassName = (innerDivClassName) => {
var classNameList = document.getElementsByClassName(innerDivClassName);
if (classNameList != undefined) {
var maxHeight = 0;
for (var index = 0; index < classNameList.length; index++) {
var divHeight = classNameList[index].clientHeight;
if (maxHeight < divHeight) {
maxHeight = divHeight;
}
}
if (maxHeight > 0) {
return maxHeight;
} else {
return '100%';
}
}
};
return (
<PubContainer>
<a href={`/publications/${props.publicationData.id}`} target="blank">
<div
style={{ height: pubTitleHeight }}>
<div className="innerPubTitleDiv">
{props.publicationData.header}
<span>
{props.publicationData.subtitle}
</span>
</div>
</div>
</a>
</PubContainer>
);
}

Joomla template issues

I'm working on a website for a school project, I'm using a template called quantua. If you go to live demo of the template ( http://www.templatesjoomla.net/index.php/joomla3-x/244-quantua-joomla-3-x.html ), you can see that when resizing the browser window the image shrinks so much that a black background appears. I don't want it to do that, how can the resizing be achived like on this (http://www.websitetemplatesonline.com/free-template/progress-business.html) template? I played with css quite a bit, but i failed, so I guess it has to do with javascript?
heres the javascript code
(function($) {
var NivoSlider = function(element, options){
// Defaults are below
var settings = $.extend({}, $.fn.nivoSlider.defaults, options);
// Useful variables. Play carefully.
var vars = {
currentSlide: 0,
currentImage: '',
totalSlides: 0,
running: false,
paused: false,
stop: false,
controlNavEl: false
};
// Get this slider
var slider = $(element);
slider.data('nivo:vars', vars).addClass('nivoSlider');
// Find our slider children
var kids = slider.children();
kids.each(function() {
var child = $(this);
var link = '';
if(!child.is('img')){
if(child.is('a')){
child.addClass('nivo-imageLink');
link = child;
}
child = child.find('img:first');
}
// Get img width & height
var childWidth = (childWidth === 0) ? child.attr('width') : child.width(),
childHeight = (childHeight === 0) ? child.attr('height') : child.height();
if(link !== ''){
link.css('display','none');
}
child.css('display','none');
vars.totalSlides++;
});
// If randomStart
if(settings.randomStart){
settings.startSlide = Math.floor(Math.random() * vars.totalSlides);
}
// Set startSlide
if(settings.startSlide > 0){
if(settings.startSlide >= vars.totalSlides) { settings.startSlide = vars.totalSlides - 1; }
vars.currentSlide = settings.startSlide;
}
// Get initial image
if($(kids[vars.currentSlide]).is('img')){
vars.currentImage = $(kids[vars.currentSlide]);
} else {
vars.currentImage = $(kids[vars.currentSlide]).find('img:first');
}
// Show initial link
if($(kids[vars.currentSlide]).is('a')){
$(kids[vars.currentSlide]).css('display','block');
}
// Set first background
var sliderImg = $('<img class="nivo-main-image" src="#" />');
sliderImg.attr('src', vars.currentImage.attr('src')).show();
slider.append(sliderImg);
// Detect Window Resize
$(window).resize(function() {
slider.children('img').width(slider.width());
sliderImg.attr('src', vars.currentImage.attr('src'));
sliderImg.stop().height('auto');
$('.nivo-slice').remove();
$('.nivo-box').remove();
});
//Create caption
slider.append($('<div class="nivo-caption"></div>'));
// Process caption function
var processCaption = function(settings){
var nivoCaption = $('.nivo-caption', slider);
if(vars.currentImage.attr('title') != '' && vars.currentImage.attr('title') != undefined){
var title = vars.currentImage.attr('title');
if(title.substr(0,1) == '#') title = $(title).html();
if(nivoCaption.css('display') == 'block'){
setTimeout(function(){
nivoCaption.html(title);
}, settings.animSpeed);
} else {
nivoCaption.html(title);
nivoCaption.stop().fadeIn(settings.animSpeed);
}
} else {
nivoCaption.stop().fadeOut(settings.animSpeed);
}
}
//Process initial caption
processCaption(settings);
// In the words of Super Mario "let's a go!"
var timer = 0;
if(!settings.manualAdvance && kids.length > 1){
timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
}
// Add Direction nav
if(settings.directionNav){
slider.append('<div class="nivo-directionNav"><a class="nivo-prevNav">'+ settings.prevText +'</a><a class="nivo-nextNav">'+ settings.nextText +'</a></div>');
// Hide Direction nav
if(settings.directionNavHide){
$('.nivo-directionNav', slider).hide();
slider.hover(function(){
$('.nivo-directionNav', slider).show();
}, function(){
$('.nivo-directionNav', slider).hide();
});
}
$('a.nivo-prevNav', slider).live('click', function(){
if(vars.running) { return false; }
clearInterval(timer);
timer = '';
vars.currentSlide -= 2;
nivoRun(slider, kids, settings, 'prev');
});
$('a.nivo-nextNav', slider).live('click', function(){
if(vars.running) { return false; }
clearInterval(timer);
timer = '';
nivoRun(slider, kids, settings, 'next');
});
}
// Add Control nav
if(settings.controlNav){
vars.controlNavEl = $('<div class="nivo-controlNav"></div>');
slider.after(vars.controlNavEl);
for(var i = 0; i < kids.length; i++){
if(settings.controlNavThumbs){
vars.controlNavEl.addClass('nivo-thumbs-enabled');
var child = kids.eq(i);
if(!child.is('img')){
child = child.find('img:first');
}
if(child.attr('data-thumb')) vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('data-thumb') +'" alt="" /></a>');
} else {
vars.controlNavEl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>');
}
}
//Set initial active link
$('a:eq('+ vars.currentSlide +')', vars.controlNavEl).addClass('active');
$('a', vars.controlNavEl).bind('click', function(){
if(vars.running) return false;
if($(this).hasClass('active')) return false;
clearInterval(timer);
timer = '';
sliderImg.attr('src', vars.currentImage.attr('src'));
vars.currentSlide = $(this).attr('rel') - 1;
nivoRun(slider, kids, settings, 'control');
});
}
//For pauseOnHover setting
if(settings.pauseOnHover){
slider.hover(function(){
vars.paused = true;
clearInterval(timer);
timer = '';
}, function(){
vars.paused = false;
// Restart the timer
if(timer === '' && !settings.manualAdvance){
timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
}
});
}
// Event when Animation finishes
slider.bind('nivo:animFinished', function(){
sliderImg.attr('src', vars.currentImage.attr('src'));
vars.running = false;
// Hide child links
$(kids).each(function(){
if($(this).is('a')){
$(this).css('display','none');
}
});
// Show current link
if($(kids[vars.currentSlide]).is('a')){
$(kids[vars.currentSlide]).css('display','block');
}
// Restart the timer
if(timer === '' && !vars.paused && !settings.manualAdvance){
timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
}
// Trigger the afterChange callback
settings.afterChange.call(this);
});
You are looking in the wrong place. use firebug to inspect and know which css file is being used. the file is default.css. Line 159. Thats what you should be playing with. this is what it looks like
.nivoSlider {
float: left;
position: relative;
width: 100%;
height: 480px;
overflow: hidden;
background: #000
this is the block of code that affects the presentation of the navigation bar. but to eradicate the blackness down there, you can use this close fix
change the property height of the nivoslider class to auto on line 159
change the backgroud property of the navigation class from transparent to black on line 296
change the margin-top property of the id menu class to 316px on line 285
this is not guaranteed to not distort especially the last point. but keep trying.

Make fixed positioned div relatively to another div,

I started the first question here: but it was very hard to make the effect for each single page I had, So I thought if I made the div that I wanted to make fixed not fixed to the screen scroll
Very Hard to compute heights with pure math and it doesn't work ultimately as you need to modify the calculation for every single page
Here is the code :
<script >window.addEventListener("scroll",function() {
if(window.scrollY >= 148) {
document.getElementById('main_nav').style.position = 'absolute';
document.getElementById('main_nav').style.bottom = '65%';
}
if(window.scrollY <= 148){
document.getElementById('main_nav').style.position = 'fixed';
document.getElementById('main_nav').style.top = '42%';
}
});</script>
so to get things clear That piece of code depends on scroll height of screen.
I need to apply the following effect :
when the page loads the main_nav div is position:fixed.
On scrolling down
when main_nav is above some div by: say 20px it should stop position:fixed.
It should stand still at it's last place.
On scrolling up again.
It should restore the position fixed again .
"This creates the float effect till some point"
Someone I know gave me the link for this question and a js code and told me to past it here
so here its if it is not relevant to the subject please let me knw
Someone I know gave me the link for this question and a js code and told me to past it here
so here its if it is not relevant to the subject please let me know and I will delete it
/* ===========================================================
* fixate.js v1
* Use:
* Inspired by the original jquery sticky scroller
* ========================================================== */
!function ($) {
"use strict"; // jshint ;_;
/* FIXATE PUBLIC CLASS DEFINITION
* =============================== */
var Fixate = function (element, options) {
this.init(element, options);
}
Fixate.prototype = {
constructor: Fixate
, init: function (element, options) {
var self, opts;
this.$element = $(element);
opts = this.options = this.getOptions(options);
this.zindex = this.$element.css('z-index');
this.$window = $(window);
this.$doc = $(document);
this.$bottomCap = opts.bottomCapEl ? $(opts.bottomCapEl) : false;
this.$topCap = opts.topCapEl ? $(opts.topCapEl) : false;
this.bottomOffset = opts.windowInset.bottom || 0;
this.topOffset = opts.windowInset.top || 0;
this.top = this.$element.offset().top - parseFloat(this.$element.css('margin-top').replace(/auto/, 0)) - this.topOffset;
this.eto = this.$element.offset().top;
this.origTop = this.$element.css('top');
this.origBottom = this.$element.css('bottom');
this.z = (this.zindex === '0' || this.zindex === 'auto') ? opts.zindex : this.zindex;
this.bh = (this.$bottomCap) ? this.$bottomCap.outerHeight(true) : 0;
self = this;
this.$window.on('scroll', function (e) {
self.fixate();
});
this.$doc.on('DOMNodeInserted DOMNodeRemoved', function(e){
//Called when elements are added or removed from DOM
self.fixate();
});
}
, getOptions: function (options) {
options = $.extend({}, $.fn['fixate'].defaults, options, this.$element.data());
return options;
}
, fixate: function(){
var s = this.$window.scrollTop()
, h = this.$element.outerHeight(true);
// Calc offset onscroll to get most updated results - incasse ajaxed els come in
this.bco = (this.$bottomCap) ? this.$bottomCap.offset().top : 0;
this.tco = (this.$topCap) ? this.$topCap.offset().top + this.$topCap.outerHeight(true) : 0;
this.dh = this.$doc.height();
if(this.options.windowEdge === 'top'){
this.fixToTop(s, h);
} else {
this.fixToBottom(s, h);
}
}
, fixToTop: function (s, h) {
var bco = this.bco
, to = this.topOffset
, eto = this.eto
, bo = this.bottomOffset
, point = bco - h - bo - to;
if (s >= this.top) {
this.$element.css({
'position': 'fixed',
'top': to,
'z-index': this.z
});
this.fixTouchDevice();
// Bottom cap calc -check cpu factor
if (s >= point) {
this.$element.css({
'top': Math.round(point - this.top + parseFloat(this.origTop)),
'position': 'absolute'
});
}
} else {
this.$element.css({
'position': '',
'top': this.origTop,
'z-index': this.zindex
});
}
}
, fixToBottom: function (s, h) {
var bco = this.bco
, to = this.topOffset
, eto = this.eto
, bo = this.bottomOffset;
if (s >= ( bco - h - bo - to - this.top) ) {
this.$element.css({
'bottom': Math.round(this.dh-(bco - bo)),
'position': 'absolute'
});
this.fixTouchDevice();
} else {
this.$element.css({
'position': 'fixed',
'bottom': bo,
'z-index': this.z
});
}
}
, fixTouchDevice: function(){
//stick the footer at the bottom of the page if we're on an iPad/iPhone due to viewport/page bugs in mobile webkit
if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod') {
this.$element.css("position", "static");
}
}
}
/* FIXATE PLUGIN DEFINITION
* ========================= */
$.fn.fixate = function (option) {
return this.each(function () {
var $this = $(this),
data = $this.data('fixate'),
options = typeof option == 'object' && option;
if (!data) $this.data('fixate', (data = new Fixate(this, options)));
if (typeof option == 'string') data[option]();
})
}
$.fn.fixate.Constructor = Fixate;
$.fn.fixate.defaults = {
windowInset: {
top: 0,
bottom: 0
}
, windowEdge: 'top'
, bottomCapEl: 'footer'
, topCapEl: 'header'
, zindex: 5
};
}(window.jQuery);

How to make top bar go transparent when scrolling down?

Right now i have one bar located on top and here is the CSS for it:
#header_bar {
background: #000000;
height: 60px;
position: fixed;
top: 0px;
width: 100%;
z-index: 10020;
}
My question is, how i can make this bar go transparent when the page is scrolled?
Should i use opacity option somehow?
Thanks in advance!
I like the JQuery solutions here, but for completeness wanted to include a JavaScript solution in case anyone was looking for that.
The following will fade the navigation bar when it is not at the top, and return it to a solid color when it is.
function fadeNav(){
var offset = getScrollXY();
//if y offset is greater than 0, set opacity to desired value, otherwise set to 1
offset[1] > 0 ? setNavOpacity(0.5) : setNavOpacity(1.0);
}
function setNavOpacity(newOpacity){
var navBar = document.getElementById("header_bar");
navBar.style.opacity = newOpacity;
}
function getScrollXY() {
var scrOfX = 0, scrOfY = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
//Netscape compliant
scrOfY = window.pageYOffset;
scrOfX = window.pageXOffset;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
//DOM compliant
scrOfY = document.body.scrollTop;
scrOfX = document.body.scrollLeft;
} else if( document.documentElement && ( document.documentElement.scrollLeft ||
document.documentElement.scrollTop ) ) {
//IE6 standards compliant mode
scrOfY = document.documentElement.scrollTop;
scrOfX = document.documentElement.scrollLeft;
}
return [ scrOfX, scrOfY ];
}
And of you would call it by adding this in script blocks on your page (at the bottom is best practice):
<script type="text/javascript">
window.onscroll = fadeNav;
</script>
Here is a fiddle demonstrating a working version
Credit for the getScrollXY() function goes to: this site - function is at the bottom
You can't do it with just CSS, you'll need JavaScript/jQuery. Here's a little jQuery code snippet that will fade it in and out:
var opacity = 1;
var lastScrollTop = 0;
$(window).scroll(function(){
var st = $(this).scrollTop();
if(st == 0)
$('#header_bar').css('opacity','1');
if (opacity > 0.5 && (st > lastScrollTop)){
$('#header_bar').css('opacity','-=0.01');
opacity -= 0.01;
}
else if(opacity < 1)
{
$('#header_bar').css('opacity','+=0.01');
opacity += 0.01;
}
lastScrollTop = st;
});
http://jsfiddle.net/LBHvD/
With pure css you will not be able to achieve this effect but by using jQuery to manipulate the css then you can.
jQuery
$(window).scroll(function() {
$('#header_bar').css({opacity: 0});
});
JSFIDDLE
$(window).scroll(function() {
$('#header_bar').animate({opacity: 0});
});
JSFIDDLE Fading out .animate
If you want it to come back once you reach the top again then let me know!
Fade back in at top (Seems to fade in very slow)
$(window).scroll(function() {
$('#header_bar').animate({opacity: 0});
if ($(window).scrollTop() === 0) {
$('#header_bar').animate({opacity: 1});
}
});
JSFIDDLE fade in/out
Hide and show
$(window).scroll(function() {
$('#header_bar').hide(500);
if ($(window).scrollTop() === 0) {
$('#header_bar').show(500);
}
});
JSFIDDLE show/hide
This works great for me, and you can change the fadeTo to animation and works just as great.
var scroll_transparency = false;
$(window).scroll(function() {
// $('div.navbar-main-top').hide(500);
if ($(window).scrollTop() == 0) {
scroll_transparency = false;
$('div.navbar-main-top').fadeTo( "fast", 1 );
} else {
if (scroll_transparency == false) {
$('div.navbar-main-top').fadeTo( "fast", .9 );
scroll_transparency = true;
}
}
});

Javascript for a second responsive select nav on ONE page

I'm building a responsive site that uses javascript to create a select nav for the primary navigation menu when the viewport is less than 800px wide. This select nav works as planned.
Now, I'm trying to add a SECOND responsive select nav to a couple of pages (pages that obviously include the primary navigation menu). I've duplicated the script (the script used to enable the primary navigation menu to become a select nav), and tried renaming a couple variables to get the secondary navigation menu to act responsively (similar to the primary navigation menu). The responsive select nav appears for the secondary navigation menu when the viewport goes down below 800px, however, when you select a secondary page from this menu, nothing happens. The user isn't taken to a new secondary page.
Can you help me troubleshoot this?
I tried to set up a jfiddle http://jsfiddle.net/R3AD3/
Here is the script for the primary navigation menu:
function selectnav() {
var select = document.createElement('select');
var first = document.createElement('option');
first.innerHTML = 'Main Navigation';
first.setAttribute('selected', 'selected');
select.setAttribute('id', 'mobile');
select.appendChild(first);
var nav = document.getElementById('nav');
var loadLinks = function(element, hyphen, level) {
var e = element;
var children = e.children;
for(var i = 0; i < e.children.length; ++i) {
var currentLink = children[i];
switch(currentLink.nodeName) {
case 'A':
var option = document.createElement('option');
option.innerHTML = (level++ < 1 ? '' : hyphen) + currentLink.innerHTML;
option.value = currentLink.href;
select.appendChild(option);
break;
default:
if(currentLink.nodeName === 'UL') {
(level < 2) || (hyphen += hyphen);
}
loadLinks(currentLink, hyphen, level);
break;
}
}
}
loadLinks(nav, '- ', 0);
nav.appendChild(select);
var mobile = document.getElementById('mobile');
if(mobile.addEventListener) {
mobile.addEventListener('change', function () {
window.location.href = mobile.options[mobile.selectedIndex].value;
});
} else if(mobile.attachEvent) {
mobile.attachEvent('onchange', function () {
window.location.href = mobile.options[mobile.selectedIndex].value;
});
} else {
mobile.onchange = function () {
window.location.href = mobile.options[mobile.selectedIndex].value;
}
}
}
Here is the script that I duplicated... I then renamed a couple variables:
function selectnav_EP() {
var select = document.createElement('select');
var first = document.createElement('option');
first.innerHTML = 'Electric Playground Nav';
first.setAttribute('selected', 'selected');
select.setAttribute('id', 'mobile');
select.appendChild(first);
var nav = document.getElementById('nav_EP');
var loadLinks = function(element, hyphen, level) {
var e = element;
var children = e.children;
for(var i = 0; i < e.children.length; ++i) {
var currentLink = children[i];
switch(currentLink.nodeName) {
case 'A':
var option = document.createElement('option');
option.innerHTML = (level++ < 1 ? '' : hyphen) + currentLink.innerHTML;
option.value = currentLink.href;
select.appendChild(option);
break;
default:
if(currentLink.nodeName === 'UL') {
(level < 2) || (hyphen += hyphen);
}
loadLinks(currentLink, hyphen, level);
break;
}
}
}
loadLinks(nav, '- ', 0);
nav.appendChild(select);
var mobile = document.getElementById('mobile');
if(mobile.addEventListener) {
mobile.addEventListener('change', function () {
window.location.href = mobile.options[mobile.selectedIndex].value;
});
} else if(mobile.attachEvent) {
mobile.attachEvent('onchange', function () {
window.location.href = mobile.options[mobile.selectedIndex].value;
});
} else {
mobile.onchange = function () {
window.location.href = mobile.options[mobile.selectedIndex].value;
}
}
}
In the footer, I call upon both of these scripts.
Here is the exact page to my website
http://brianlueck.com/wordpress/electric-playground/
Narrow your browser window below 800px to see the responsive select navs appear... you'll notice that the primary navigation menu works fine, however, the secondary navigation menu doesn't function properly because it doesn't link off to the pages it should link to.
Can anyone help?

Resources