We Keep Coding

If a parent menu item is clicked, automatically expand a specific submenu item

My e-commerce store requires three tier menu item to achieve the multi-column megamenu appearance that I want, and although its a bit weird I have found a workaround on desktop by simply hiding the "middle" menu item as "shown" here by the red box (as in there are menu items there, but they are display none).
This is honestly fine, as I hover over the parent menu item, and then only see the li menu items. However my issue is actually on mobile, where the expanding of the top menu item requires a click, and then I need to click a second time to expand the "middle" menu item as you can see in the screenshot below:
There is an event attached to both "caret" clicks, and that is:
function(e) {
e.target.closest("li").classList.toggle("dropdown-open"), e.preventDefault()
}
This attaches an event to the menu item as shown in this screenshot:
..and that allows the submenu to appear below "Weighing Categories" like this:
So my goal (on the mobile viewport) is to show all the submenu items (with the exception of the middle one, in this case "weighing categories") when the categories caret is clicked. I have tried a CSS approach (which is what the dropdown-open class is basically adding), but this results in it always showing (whereas I still want to keep the first click, just not the second click requirement).
body .main-navigation ul.menu li.menu-item-has-children > .sub-menu-wrapper { position: inherit; left: auto; opacity: 1; transform: translateX(0); }
I have also tried multiple variations of using JS to insert a class, and I think this is on the right track, but missing something lol.. I must admit that my JS is poor, mainly trying examples I have found during my research and adapting them.
jQuery("nav-menu-item-1247 .caret").click(function() {
jQuery("#nav-menu-item-6721").addClass( "dropdown-open");
});
The above (and note that it is not working) was supposed to add "dropdown-open" proactively to the weighing categories menu item ("6721") when the top menu item (the "1247" is the "categories" one) is clicked. Perhaps the prevent default in the default JS is blocking it, I am not sure and do not have the skill to troubleshoot it lol.
I would really appreciate some help, been fighting with this for almost 4 hours and I am probably doing something stupid lol. I can share the URL if needed, it is just locked behind a user/pass before it goes live, but I can temporarily remove it.
Thanks :)

How do I stop the page from expanding when animating an element so it slides in from off screen?

I'm making my first website and I've run into a problem I can't easily fix as I'm not sure how to phrase a google search for it. I need to slide images into the page without making the scroll bar appear or, rather, without the page expanding in width to encompass the newly appeared image while it slides in.
Here's the actual test version of the page:
http://test.dingac.com/accommodation.html
The part I need help with is the sliding of the pictures when you click on the arrows next to the blueprint for each apartment in the accommodation tab.
If you want to look at the code, the relevant code is in the JqueryAnimate.js file but keep in mind, the comments aren't in English, I'm new to this so the code is a bit weird and the CSS isn't fine tuned yet. I've posted the relevant code snippet further down. My current issue is the slide animation. The way I did it right now is for all the images to be there from the start but all but one have display:none. When you click the arrow to the right it fades out and slides out the current picture (using Jquery) and turns on the display of the next picture (which is positioned relatively at left: 2000px) while animating it to left:0px.
In the moment the new image appears, the page sees that a new element is on the page and not everything is being displayed so it expands the width of the page to encompass the off-screen picture. This is only an annoyance on desktop as it only makes the scroll bar appear, but on mobile it makes the whole page zoom out until the new picture is on screen and then zoom back in as the picture slides in.
$("#buttonRight"+apInd).click(function(){
if(status[apInd].circleIndex!=status[apInd].numApPic){
status[apInd].Picture.fadeOut({duration: 1000, queue: false}).animate({left: '-2000px'},1000);
status[apInd].NextPicture.fadeIn({duration: 1000, queue:false}).animate({left: '0px'},1000);
status[apInd].PreviousPicture=status[apInd].Picture;
status[apInd].Picture=status[apInd].NextPicture;
$("#apCircle"+apInd+"-"+status[apInd].circleIndex).attr("class","circle");
status[apInd].circleIndex++;
$("#apCircle"+apInd+"-"+status[apInd].circleIndex).attr("class","circleSelected");
status[apInd].NextPicture=$("#apPicture"+apInd+"-"+(status[apInd].circleIndex+1));
}
if(status[apInd].circleIndex===status[apInd].numApPic) //hiding/showing arrows when at the edge of the selection
{
status[apInd].arrowDisplay="left";
$("#buttonRight"+apInd).css("opacity",0).css("cursor","default");
}
else
{
if(status[apInd].arrowDisplay!=="both")
{
status[apInd].arrowDisplay="both";
$("#buttonRight"+apInd).css("opacity",1).css("cursor","pointer");
$("#buttonLeft"+apInd).css("opacity",1).css("cursor","pointer");
}
}
});
What I need is for the page width to stay constant or, more specifically, that there be no zooming in mobile and no horizontal scroll bar on desktop.

Use overflow: hidden (or, for more fine grained control, overflow-x: hidden) in your CSS.
For example, if this is the HTML of your page:
<body>
<div id="page-wrap">
Contents
</div>
</body>
You can use overflow like so:
#page-wrap {
overflow-x: hidden; // hides horizontal overflowing elements
overflow-y: auto; // shows scrollbars if the content vertically overflows
}
Link to MDN

Try to add an overflow:hidden on the span with id="apImgBox"

Slide Over Menu combined with Bootstrap

I am trying to create something similar to this effect, where you can click on the hamburger icon and a menu slides out:
http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/
I don't need the hover event, just the click.
My problem is that in the above example, there is already space allocated for the menu to live. In my situation, I need my main content to shrink to make room for the menu. So, using Bootstrap, I am switching my main content from the "col-md-12" class to the "col-md-11" class, so that my menu with the "col-md-1" class can fit:
$('#toggle').mousedown(function () {
$('#mainMenu').toggleClass('col-md-1');
$('#mainMenu').toggleClass('zero');
$('#mainContent').toggleClass('col-md-12');
$('#mainContent').toggleClass('col-md-11');
});
I have attempted something here:
http://jsfiddle.net/955RV/
But it's not quite right. The negative margin trick is because I'm not sure how else to bring in the menu from the left. I also am not happy with the right side of the content shrinking in animation before the menu appears and would prefer it to happen simultaneously. My guess is that they are technically happening simultaneously, but that the margin animation takes longer to complete than the width animation.
Any help would be appreciated. Let me know if I can help clarify anything.

This looks like a great place to start:
http://tympanus.net/Blueprints/SlidePushMenus/
Notice the difference between the "push" and "slide" type menus. I was looking for "push."
Code explained here:
http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/

Bootstrap 'Affix' wont affix on the right

I've created an example here : http://jsfiddle.net/Ninjanoel/9GEGU/
Basically, I'd like to affix something to the right, in this case, the red box, I want it to appear to just pin itself to the top as it should once the correct amount of page scroll has occurred, but everytime it 'affixes', it jumps to the left, overlapping the content I already have on the left.
It's great that bootstrap has such a volume of documentation, but unfortunately I think I'm missing something regarding this. Please help.
var offsetFn = function() {
return $('#sidebar').position().top;
}
$(document).ready(function(e) {
$('#sidebar').affix({
offset: {top: offsetFn}
});
});​
is a code snippet I found on Stack overflow to not have to guess the top offset value, but even if I give it a simple value, when the div becomes affixed it jumps left.
Note about the fiddle : it doesn't appear to be working very well, at least the version on my hdd jumps left, but it is the code i'm using basically, and the small window size may complicate things, green and red boxes are suppose to be vertical columns

Create inner div for sidebar. Affix is setting position: fixed to column therefore making it not working.
Edit: see http://jsfiddle.net/9GEGU/2/ and your function is needless, only causing weird behaviour in FF, so remove {offset: {top: offsetFn}}. It will look the same but scrolling will be smoother.
Also set width of span5 (290px) to the #sidebar because when element has position: fixed it is removed from document flow and isn't limited by parent's width.

How to properly initialize the jQuery Tools' Scrollable component for a single item?

I have created a web page which uses the jQuery Tools' Scrollable component, and the page is based on the minimal setup demo. As in this demo my page also uses scrollable items with room for five thumbnail images, but when my page loads for the first time I want only a single scrollable item containing only three thumbnail images, with the remaining two image slots empty. I assumed that I could simply replace the three scrollable item divs from the demo with a single scrollable item div and everything would look fine, however when I do that I end up seeing inoperable left/previous and right/next icons, even though there are no previous or next scrollable items to scroll to.
I have an example of what I'm trying to do on the jsfiddle site here. It's essentially the above referenced demo with the non-applicable scrollable item divs and child imgs commented out.
How can I initialize the scrollable such that I only have a single scrollable item on the page without having the non-applicable left/previous and right/next icons appear?
Thanks in advance for your help, suggestions, etc.

best I can come up with is
if($(".scrollable .items div").length < 2) $("a.browse").hide();
after the initialization.

I wanted the browse buttons to be hidden by default, then only display them if needed.
In the css, default the a.browse to visibility: hidden
Then in the initialization:
$(".scrollable").scrollable().each( function() {
var scroller = $(this).data("scrollable");
scroller.getNaviButtons().css('visibility', 'visible');
if (scroller.getSize() <= 1) {
scroller.getNaviButtons().addClass('disabled');
}
});
This seems a bit hacky, but avoids temporarily displaying the browse buttons if they are not going to be seen.