We Keep Coding

Menu item is not shown (width of variable is miscalculated)

My question is about the following code (not written by me):
http://codepen.io/lukejacksonn/pen/PwmwWV
Problem
Somehow the var availableSpace is being miscalculated when the page is loaded originally at ~1125px*, hiding the last menu item and showing the hamburger button in stead:
When you make the browser window wider until the hamburger button disappears and then more narrow again to ~1125px, var availableSpace is calculated correctly and shows the last menu item:
Question
How do I calculate var availableSpace so that (when there is enough space to fit the last item in the menu) the last menu item is shown in stead of the menu button?
*
I made the following screenshots with my browser window at a 1125 pixels width, but the width can vary depending on the number of menu items and the length of the menu items.

UPDATED: in the JS code panel , right before function updateNav() {add this code to get the total width of all li elements in the horizontal menu dynamically:
//calculate total width of the horizontal menu
var hMenuTotalWidth = 0;
$('.visible-links li').each(function(){
hMenuTotalWidth += $(this).width();
});
//this line calls the function to fix the bug when the first loads for the first time
updateNav();
Then on line 37, change this line:
if(availableSpace > breaks[breaks.length-1] ){
to
if(availableSpace > breaks[breaks.length-1] || $(window).width() > hMenuTotalWidth){
codepen: http://codepen.io/anon/pen/YyaZRJ
hopefully this will work now

class is being removed from a div

The OpenERP web interface relies heavily on javascript, QWeb, jQuery (I think), and css.
The default view has a black menu bar along the top, a side menu bar along the left, and the rest of the screen for the content being served.
The issue I was trying to "fix" is that it is displayed as one large page, meaning if you scroll the page the top menu and side menu also scroll off.
I have a nearly working solution:
adjust top menu bar to be fixed
adjust side menu bar to be fixed
adjust remainder to take up the remaining space
In order to do that I also had to add a new css class, which I called oe_main_window, and located the code which sets up the view to add oe_main_window to the div with the class oe_view_manager_current.
This works fine for primary views.
However, if I click on a link in a primary view, say to show a product, it removes the oe_main_window class and messes up the display. If I go into developer tools and add oe_main_window back the display is again correct.
I have tried searching for where this is happening, but so far have failed to locate the appropriate code either to not remove the new class or to add it back after the transition.
Any ideas?

You can find how to put a breakpoint on DOM mutation here:
https://developer.chrome.com/devtools/docs/javascript-debugging#breakpoints-mutation-events
mainly it's opening the chrome dev-tools using F12, right click on your div and click "Break on...>> Attributes modifications"

The final solution to the problem involved targeting the first oe_view_manager found. Here's the (clumsy) JavaScript:
function addOeMainWindow() {
var newChildren = [];
var currentChild, getAttr, oldClass, newClass;
var i;
for (i=0; i<document.childNodes.length; i+=1) {
newChildren.push(document.childNodes[i]);
}
while (newChildren.length > 0) {
currentChild = newChildren.shift();
getAttr = currentChild.getAttribute;
if (getAttr !== undefined) {
oldClass = currentChild.getAttribute("class");
if (/oe_view_manager/.test(oldClass) && !/oe_main_window/.test(oldClass)) {
newClass = oldClass + " oe_main_window";
currentChild.setAttribute("class", newClass);
return;
}
}
for (i=0; i<currentChild.childNodes.length; i+=1) {
newChildren.push(currentChild.childNodes[i]);
}
}
return;
}

Highlighting the element after scrolling to it

Here is the fiddle I'm working with: http://jsfiddle.net/fz5Yk/5/
As you can see, it has a one-page scrolling navigation. I want to achieve a highlighting effect (preferably using .animate function) to the headings in <strong> </strong> tags when scrolling to a section. Just scroll the page manually and you will see a highlighting in the navigation menu; item of the scrolled section, but I can't quite resolve the js codes in order to apply the same to the headings, and an intervention in it with .animate function seems much more difficult to me. Can you help me?

The plugin-page seems well-documented; https://github.com/davist11/jQuery-One-Page-Nav.
Just put an animation on the location you scroll to inside the end: definition;
$('#nav').onePageNav({
end: function() {
//I get fired when the animation is ending
}
});
Test update
$(window).scroll(function() {
var visible_start = window.pageYOffset;
var window_height = window.innerHeight;
var section3_height = $('#section-3').height();
var section3_start = $('#section-3')[0].offsetTop;
if ((visible_start - window_height >= section3_start) &&
$('#section-3').css('background-color', 'yellow');
}
});

jquery on hover sliding vertical and horizontal menu

i have created a jquery onhover vertical sliding menubar now i need to implement horizontal sliding also i am facing some problem with the styling it is not coming horizontally
i have created a demo in jsfiddle link to demo
on hovering over 'manage' in the vertical slidedown menu there is lookup management menu under which there are 2 submenus(hi and hello) which i want to slide horizontally but unable to do so, it seems there is some problem with the javascript can someone help me out
the javascript is here
var menuShowDelay = 500;
var menuHoverTimer = null;
$(function () {
bindMenuSliding();
});
function bindMenuSliding() {
// Expand menu on mouse over.
$('.ulMiddleMenu li').hover(function () {
// Clear previous mouse hover timer.
if (menuHoverTimer) {
clearTimeout(menuHoverTimer);
menuHoverTimer = null;
}
var targetElement = $(this); // Get the target element.
// Display the menu after a certain time interval.
menuHoverTimer = setTimeout(function () {
targetElement.parent('ul').find('ul').stop(true, true).css('display', 'none');
targetElement.find('ul').slideDown('medium');
}, menuShowDelay);
},
function () {
// Clear previous mouse hover timer.
if (menuHoverTimer) {
clearTimeout(menuHoverTimer);
menuHoverTimer = null;
}
// Hide the menu.
$(this).find('ul').slideUp('fast');
});
}
you can copy paste this in the javascript panel of jsfiddle

Two main problems. One, you were showing all sub-menus on hover, instead of just the child. Two, you had no logic to distinguish between levels of navigation, so there was no way to expect the lower levels to behave differently at all.
// Display the menu after a certain time interval.
menuHoverTimer = setTimeout(function () {
var $parent = targetElement.parent('ul');
$parent.find('ul').stop(true, true).hide();
//test for first level nav
if( $parent.hasClass("ulMiddleMenu") ){
targetElement.children('ul').slideDown('medium');
}else{
targetElement.find('ul').width(0).show().animate({width:'100%'},1000);
}
}, menuShowDelay);
jsFiddle. This still leaves some issues for you to sort out in terms of display. You should consider scrapping your CSS and starting from scratch because it is going to get harder and harder to dig your way out of that mess.

Jquery image scroller not switching to next image

I have an image scroller that I am trying to implement. The image scrolling works, but it is moving vertically instead of horizontally. Here is what I got so far:
Next Image
$('#btnNext').click(function () {
//Calls new image with value true, meaning next image
newImage(true);
return false;
});
function newImage(direction) {
//Get the current selected item (with selected class), if none was found, get the first item
current_image = $('#imageGallery li.selected').length ? $('#imageGallery li.selected') : $('#imageGallery li:first');
//If determines slideshow direction
if (direction) { //Next image
//Get next sibling
next_image = (current_image.next().length) ? current_image.next() : $('#imageGallery li:first');
} else { //Previous image
//Get previous sibling
next_image = (current_image.prev().length) ? current_image.prev() : $('#imageGallery li:last');
}
//Clear selected class
$('#imageGallery li').removeClass('selected');
//Reassign selected class to current image
next_image.addClass('selected');
//Scroll images
$('#images').scrollTo(next_image, 800);
}
Update: Here are my quesions:
1) How do I edit this to make it move horizontally?
2) Is there a way to make an image scroller like this without using .scrollTo()?

I assume you want to make the gallery move horizontally, not vertically. (You say both in the question.) This is just a CSS issue: change the list to show horizontally (display: inline-block or float: left for instance) and the scrollTo plugin should do that for you.
It is possible to do this without the scrollTo plugin. The plugin uses the jQuery animate function to move around the page and, well, you can do the same if you want. :) Here's a quick jsFiddle that uses animate to move pictures in a gallery. Obviously it needs quite a bit of work (doesn't go back to the beginning at the last pic, only goes 1 way, doesn't calculate picture width, etc.), but it should hopefully give you an idea of how it can be done.
http://jsfiddle.net/meloncholy/KzBzT/