We Keep Coding

Javascript/ Jquery slide menu not working in Chrome

I've been working on a website and when testing it out on a VM the slide menu didn't work. I've since managed to replicate the error in newer versions of Chrome The page is
http://paperfromabc2xyz.co.uk/
When you shrink the screen size small enough to loose the main menu you'll get a NAV Burger icon. Clicking this should slide a menu in. The Javascript file is 'App.JS'

The click does not get caught, somehow because the span does not have dimensions (the :before element does not expand it).
Add this to your styles:
span.Burger{ display: inline-block; }

for a start use a library as Jquery to simplify your code; then put your javascript code in an $(document).ready(function () {} then then add to your css : span.Burger{ display: inline-block; }

Make Menu have a slideToggle Effect and push below elements down

I'm using a nice Mega Menu from CODROPS and I'm trying to customize it to have:
1) a slideToggle effect
2) When the menu is opened to push the below div element down (IE: not overlapping the below elements)
Here is my JS FIDDLE
This is what I've done so far:
1) I know very basic jquery and usually I know how to apply a slideToggle effect but I can't seem to get it right with their javascript code, so I'm left guessing where to place it but having no success. I've tried researching online but can't find a solution.
2) To make the element below the menu get pushed down, I know to make the position relative in the css below but that just breaks the menus float when it's activated.
/* sub-menu */
.cbp-hrmenu .cbp-hrsub {
display: none;
position: absolute;
background: #47a3da;
width: 100%;
left: 0;
}
It would be nice to have the elements below pushed down but the slideToggle effect is a bit more important to me...

You'll have to refactor this a bit to get it to work the way you want it to.
The .cbp-hrsub element containing the sub text is positioned absolutely, overlaying any text below. You would need to remove position:absolute to revert to the browser default position:static.
However, as the .cbp-hrsub element is part of each menu <li>, this pushes the other <li> elements down.
I'd suggest splitting the HTML out so that your menu <li> elements are separate to your sub text elements. Contain the subtext elements in a new <ul> and get these to slide down on click of the associated menu item link.

Bootstrap admin template responsive menu not working

I'm trying to get responsive menu working on Metis Admin
http://demo.onokumus.com/metis/
When the screen width is less than 768px, the side menu buttons get smaller which is fine but for the submenus it seems to expand to the right and it's invisible. It's position absolute and I've tried increasing z-index but it still does not show up.
I can see using css inspector that the submenu list is still there and working.
Is there a way to make it displayable?

There is an overflow:hidden in your main.css line 399.
Remove this
#menu {
/*other styles*/
overflow: hidden; /*remove this line*/
}
Now it should work as expected.

Javascript scroll - both horizontal and vertical - to particular positions on the page?

Here's my website:
violetoeuvre.com
What I'd like to do is have multiple veritcal and horizontal scrolls on the page. I think I should do this with Jquery.
Vertical:
Writing link at the top would scroll down when clicked so that the writing section on the side bar is at the top of the page.
Contact link at the top – same thing
(When I get the hang of this, I’m going to add up and down arrows on either side of the elements in the sidebar to scroll up and down to next / previous element. )
Horizontal:
In the writing section on the sidebar, I’d like the deadspin, gawker, and the awl links to scroll to content within the writing box when those buttons are clicked. I imagine this would have an overflow:hidden element somewhere? If vertical scrolling within this box would be easier, that’s ok too.
I found this excellent site which I think will be helpful:
http://demos.flesler.com/jquery/scrollTo/
relative position and relative selector look promising.
I'm guessing that I make each button a link that will be able to scroll to another part of the page.
So I would this class selector (the contact nav bar at the top), for example:
.nav_box_r {
display: block;
float:left;
width:219px;
text-align: left;
padding-right: 40px;
padding-top: 169px;
margin-top: 0;
}
as a link to scroll to the bottom of the page to the contact info, like
$(...).scrollTo( 0, 800, {queue:true} );
(Secondary question: Should I redo all the statis elements to have fixed positions?)
I'm new to this so would appreciate specificity. (Does the script go in the head, are the scrollUp / down to relative or fixed positions, etc.)
Thank you!

Hopefully this helps, you can use a href to jump to divs within your website.
Link
There is also this page that can help you as well.
How can I scroll to a specific location on the page using jquery?
Try this code
$(".yourclass").click(function() {
$(this).animate({ scrollTop: $('#title1').offset().top }, 1000);
});

Have a look at Balupton's ScrollTo plugin, it might be easier for you + there's a demo in there that shows you how to set it up.
Download zip at Github

Side Panel in CSS

I have a div called calendar that is inside a div called cal-container. The calendar has width:100% so currently it takes up the whole cal-container.
I need to add a side-panel div. This div will have a fixed width of 150 pixels. Thus, #calendar width should be #cal-container width - 150px. Is this possible with CSS or am I forced to use a table?
If it is possible, is there an example? I googled it but nothing like what I want came up.
The side-panel can be hidden and shown by click a button so adding padding will not work.
Here is an idea of what I mean:
The days part is #calendar, and the Unscheduled part is the side panel of 150px.
I tried floating the calendar left, and cloating the side panel right and giving it a width of 150px. But the idea is if I hide that div, the calendar should then take 100%.
Thanks
Like this, the blue would be side and calendar be the left, but calendar needs to take up the room side does not when hidden.
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/finished.html
Result of float:

Got a working solution for you here.
The code to get this working basically hinges on the following structure:
<div class="sideBar">
...
</div>
<div class="tableWrapper">
<table>
...
</table>
</div>
Next, make sure the elements have these significant CSS properties:
.sideBar {
float: right;
}
.tableWrapper {
overflow: hidden;
}
table {
width: 100%;
}
What's happening here is that the .sideBar floats right, and takes up whatever space it needs to. Meanwhile, the .tableWrapper will take up whatever space is left by virtue of overflow: hidden. Finally, tell the table to take up 100% of its available width.
Click the button in the demo to see the table automatically resize.

All major browsers and IE10 support flexbox. Not supported < IE10.