We Keep Coding

Window.Print() adds scroll to page and does not print the entire content

I can't figure why window.print() is adding scroll to this page. The page is really big and has the scroll bar, but shouldn't the content break in different pages? Even removing the overflow from all classes it won't work.

Try showing overflow on print with css:
#media print
{
html {
overflow: visible !important;
}
}
you can change any css class of any element for print using "#media print" and "!important". Try "display: none;" for your scrollbar (if it's a custom scrollbar) too.

Slidetoogle and larger browser

I’m using jquery slideToggle to show and hide a div on mobile devices. I’m using display: none inside a media query for devices below 768px. This allows the div to start closed .
If you resize the browser to be smaller than the 768px breakpoint, the Nav div disappears and you’re prompted with a Button to toggle it’s visibility. But if you resize the browser back to the original state (larger than 768px). At this point, you will notice the div remains hidden and does not return to display:block. Only after refreshing the browser will the div re-appear.
Could someone please suggest a method for solving this?

Create an $(window).resize function
var _windowWidth = $(window).width();
$(window).resize( function() {
if(_windowWidth > 768) {
$("nav").show();
}
});
Or make it visible with css if the screen is bigger than 768px.
#media screen and (min-width: 768px) {
nav {
display: block;
}
}

Check width of viewport on side load, then add class to body if less than X

I'm currently building a portfolio site and i want the sidebar to be hidden by default on mobile devices since its quite big atm, you can check it out here: www.dosh.dk/rofl/
The sidebar will hide if body has the class "sidebar-inactive" and therefore i want to do a single check on the viewport when the site is loaded and then add the class if below X
Im using coffeescript and ive made the following code but it doesnt seem to work, any ideas?
$ ->
$(".inner_content").hide()
$("#myskills").show()
$("#site").addClass 'loaded'
if $(window).width < 600
$("body").addClass 'sidebar-inactive'

How about a non-JavaScript solution using CSS media queries?
#media (max-width: 599px) {
.sidebar {
display: none;
}
}
This will hide elements with the sidebar class when the screen is less than 600px wide and will update as the browser is resized.
More: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Mobile Menu - expanding and collapsing

I have created a responsive mobile menu using jquery. Everything works fine except the toggling of the menu. By default the menu is expanded. I want the menu to be collapsed by default and when the word menu is clicked it expands and is then able to expand and collapse on selection. The only point of consideration in this is that there is also a normal navigation menu, which is displayed and layout differently. I wish for this menu to be always active. I only want the mobile menu to be hidden (collapsed) by default and then expanded on when clicked.
I have uploaded the projected onto jsfiddle: linkhttp://jsfiddle.net/qdhg0r9d/
thanks

Just add
#media screen and (max-width: 600px) {
#collapse-menu{
display:none;
}
}
To your CSS this will hide it by default when the screen width is less than 600px, then when you click the toggle jQuery will over ride it for you by adding the inline style display:block; and display it again

$(document).ready(function () {
if($(window).width() <= 640){
$("#collapse-menu").toggle();
$("#pull").on('click',function () {
$("#collapse-menu").toggle();
});
}
});
it only works depending on the screen width

Using jQuery .hide() with CSS media queries for menu toggle based on screen resolution

I have a website using css media queries to detect browser resolution and modify my site accordingly.
I have run into a slight problem with my main navigation menu. There are a number of pages on my site where I would like to have my main navigation hidden on load for mobile resolutions, but displayed on desktop resolutions.
This seems like a simple enough task to accomplish with css, but unfortunately for me, it is not. I am unable to use both display:none; and visibility:hidden; because when my menu detects on load that it is hidden, it sets it's height to 0, and will not change.
Here is a stack overflow page reference:
Setting a div to display:none; using javascript or jQuery
Ultimately, I the only option I found that would hide my menu on load, while still allowing the menu to correctly calculate it's height was the following bit of jQuery.
$(document).ready(function () {
$(".hide-menu").hide();
var $drillDown = $("#drilldown");
});
Now, this solution is working for pages that I would like to have the menu initially hidden on load for all screen resolutions. However, I have a number of pages on which I would like to have the menu hidden initially hidden on load for mobile, but displayed on desktop.
I have attempted to recreate this scenario in a jsfiddle: http://jsfiddle.net/WRHnL/15/
As you can see in the fiddle, the menu system has big issue with not being displayed on page load. Does anyone have any suggestions on how I might accomplish this task?

You can do it by comparing the screen-size:
$(document).ready(function () {
var width = $(window).width();
if (width < 768) {
$(".hide-menu").hide();
}
var $drillDown = $("#drilldown");
});

You can use !important to force to origional state via media queries.
This will over-ride the "display:none" from your js.
Example:
#media (max-width:980px){
nav > .btn-group{display:none}
}
Your Js then toggles style="display:block" or style="display:none"
you maximize the window and the below resets your origional style.
#media (min-width: 992px) {
nav > .btn-group{margin:0px auto; display:inline-block !important}
}