We Keep Coding

How to get current css value defined by media query in javascript?

I am developing a site where I want to access a menu display property. If the menu is closed (display: none) then I want to open it, if it's open (display: block) then I want to close it.
I define the menu as closed in responsive media query (if width is higher then menu is always visible with !important in media query), the rest I control in Javascript:
var attach_menu_control = function() {
var $sidebar = document.querySelector('.sidebar')
var $sidebar_content = document.querySelector('.sidebar .content')
var $menu_opener = document.querySelector('.sidebar .menu-closed')
var hide_menu = function() {
console.log('Hide menu is run.')
$sidebar_content.style.display = 'none'
$menu_opener.style.display = 'block'
$sidebar.style.width = '40px'
}
var show_menu = function() {
console.log('Show menu is run.')
$sidebar_content.style.display = 'block'
$menu_opener.style.display = 'none'
$sidebar.style.width = '270px'
}
var click_handler = function(e){
console.log('Click handler is run.')
debugger
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
if ($sidebar_content.style.display == 'none') { // Here it is `""` instead of `none`
show_menu()
} else if (width <= 724) {
hide_menu()
}
}
var $main = document.querySelector('main')
$main.addEventListener('click', hide_menu)
$sidebar.addEventListener('click', click_handler)
var event = new Event('click');
$sidebar.dispatchEvent(event)
}
Problem is, the first time this is run - the $sidebar_content.style.display is an empty string "" even though if I check it is definitely display: none in media query:
#media only screen and (max-width: 724px) {
/* Force sideback to be in closed mode when new page is opened */
.sidebar {
width: 40px;
}
.sidebar .content {
display: none;
}
}
Where can I get the values defined by media queries in Javascript? I don't want to access the rules themselves, I just want to know what's the current set value..
The site is here: www.saulesinterjerai.lt

If I understand the original question correctly, then the desire is to be able to read the current CSS values once #media settings have been taken into account.
I believe that the following should suffice as it reads out the current rendered state of the element.
window.getComputedStyle($sidebar_content)
Important note - In modern browsers, there can be a delay between setting a style or class, and the re-flow of the page. It may therefore be necessary to set a timeout and read the computed value after a short pause. YMMV.

Make a Responsive Javascript Horizontal Navigation with Logo in Center

I found a question/post on this site that works great upon first looking at it, until I need it to do more, and I have played with it and have not found a solution yet as to get it to do what I need it to do.
I am building a site for a client so I need it to be easy to operate in terms of if the client wants to change the actual order of things, so building a ul/li list on the back end within the theme is not an option, unless there is an easy way for me to modify the functions.php and change the way the menu tab is set up.
Here is my javascript coding, the menu is an actual wordpress menu.
jQuery(document).ready(function() {
jQuery("ul#menu-primary-items").find("li:contains('Home')").hide(); // hides home from navigation
var position = jQuery("ul#menu-primary-items li").length-1;
var i = 0;
jQuery('ul#menu-primary-items li').each(function() {
if(i == position/2) {
jQuery(this).after('the img src code is in here');
}
i++;
});
});
On full page width I need it to look like
Link | Link | Link | LOGO IMG | Link | Link |Link
On media width (the themes #media max-width is 999px) I need it to be a drop down style wordpress box with
LOGO IMG
WP "MENU" button
Link
Link
Link
Link
Link
Link
Instead of it displaying as the above, it shows as
WP "MENU" button
Link
Link
Link
LOGO IMG
Link
Link
Link

Check media in JQuery code, to set LOGO position:
jQuery(document).ready(function() {
jQuery("ul#menu-primary-items").find("li:contains('Home')").hide(); // hides home from navigation
var position = jQuery("ul#menu-primary-items li").length-1;
var i = 0;
/* check media here */
var isMedia999=false;
isMedia999 = (window.width() < 1000); //true if max width is <=999px
/* chek is done */
if( ! isMedia999)
jQuery('ul#menu-primary-items li').each(function() {
if(i == position/2) {
jQuery(this).after('the img src code is in here');
}
i++;
});
else jQuery('ul#menu-primary-items li').each(function() {
if(i == 0) { // <== first position if max width 999px
jQuery(this).after('the img src code is in here');
}
i++;
});
});
Of course this wont be actualized.refreshed on resize, so you could do:
jQuery(document).ready(function() {
myfunc();
windows.resize(myfunc());
});
function myfunc(){
jQuery("ul#menu-primary-items").find("li:contains('Home')").hide();
var position = jQuery("ul#menu-primary-items li").length-1;
var i = 0;
/* check media here */
var isMedia999=false;
isMedia999 = (window.width() < 1000); //true if max width is <=999px
/* chek is done */
if( ! isMedia999)
jQuery('ul#menu-primary-items li').each(function() {
if(i == position/2) {
jQuery(this).after('the img src code is in here');
}
i++;
});
else jQuery('ul#menu-primary-items li').each(function() {
if(i == 0) { // <== first position if max width 999px
jQuery(this).after('the img src code is in here');
}
i++;
});
});
}

Quite better: Use CSS and 2 logos.
1 logo is hidden for a media width > 999px, the 2nd is hidden for media <= 999px width.
#media max-width is 999px {
.logo#wide { display:none; }
.logo#tiny { display:inline; }
}
#media min-width is 1000px {
.logo#wide { display:inline; }
.logo#tiny { display:none; }
}
EDIT: JQuery :
jQuery(document).ready(function() {
jQuery("ul#menu-primary-items").find("li:contains('Home')").hide(); // hides home from navigation
var position = jQuery("ul#menu-primary-items li").length-1;
var i = 0;
jQuery('ul#menu-primary-items li').each(function() {
if(i == 0) {
//put logo tiny here for media maxwidth 999px
}
if(i == position/2) {
// put logo wide here for media minwidth 1000px
}
i++;
});
});

Does something like this could work ?
#media(max-width:whateveryouwant px)
{
.logo{
float:right;
}
}
An other approach would be to move the element threw the DOM.
You can achieve this with jQuery :
if((window).width() <= sizeYouWant){
$('.logo').insertBefore('#FirstElement');
}

javascript responsive menu needs to be refreshed whenever media query point requests change

wonder if anyone can advise.
I am very new to web design and am trying to use a javascript responsive menu code detailed in Tim Kadlec's great Responsive Design book. The menu works fine as mobile menu and then changes to full screen upon my media query, but if I move the browser window I then need to "refresh" every time to make the menu state change to what it should be. Could anyone advise me what I am dong wrong?! Many thanks, Webstudent :
window.onload = function() {
var nav = document.getElementById('nav');
var navItem = nav.getElementsByTagName('li');
//is it floated?
var floated = navItem[0].currentStyle ? el.currentStyle['float'] : document.defaultView.getComputedStyle(navItem[0],null).getPropertyValue('float');
if (floated != 'left') {
var collapse = document.getElementById('nav-collapse');
//toggle class utility function
var classToggle = function( element, tclass ) {
var classes = element.className,
pattern = new RegExp( tclass );
hasClass = pattern.test( classes );
//toggle the class
classes = hasClass ? classes.replace( pattern, '' ) : classes + ' ' + tclass;
element.className = classes.trim();
};
classToggle(nav, 'hide');
classToggle(collapse, 'active');
collapse.onclick = function() {
classToggle(nav, 'hide');
return false;
}
}
}

How to manipulate the screen width via js?

I'll try to explain my use case here. In my site I have a break point for desktop view, and break point for tablet view (which is more compact). I'm trying to add a function to allow seeing the tablet view when browsing from desktop, cause some members prefer the compact design in their desktop as well.
For doing that, I figured I would need to trick the '#media(max-width:X)' query. I'm looking for a JS code that can manipulate the screen width value, so when the browser calculates max-width, it would be against a value that I specified.
One thing to note, this is suppose to work on desktop browsers, so the meta viewport can't be used here.

One solution is to apply a specific class (e.g: .tablet) to the body.
<body class="tablet"></body>
In your CSS:
#media screen and (/* your query */) {
.tablet .my-class {
/* tablet specific stuff */
}
}
You could then remove the .tablet class and replace it with .desktop via JavaScript
var body = document.body;
var switchToDesktop = function() {
body.className = body.className.replace('tablet', 'desktop');
}
var switchToTablet = function() {
body.className = body.className.replace('desktop', 'tablet');
}
var toggleView = function() {
(body.className.indexOf("tablet") > -1) ?
switchToDesktop() :
switchToTablet();
}
If you are using SASS or LESS, you can nest the tablet-specific styles.
#media screen and (/* your query */) {
.tablet {
h1 {
/* tablet specific h1 */
}
.my-div {
color: red;
}
/* etc... */
}
}

Dynamic navbar for mobile

I'm doing a mobile App with jQuery mobile 1.4.3. I'm trying to build a navigation bar that changes dynamically, If the user has logged in the navigation bar will show 4 options, if not it will show 3 options. The problems:
Once I click the bar some times it turns all blue.
I'm sure I'm not using the correct code.
The navigation bar disappears for some time when I click in a button.
The blue click highlight is not persistent for the page click.
What I need is a fixed navigation bar that smoothly changes pages when clicked :)
http://jsfiddle.net/claire89/toxtcbhe/14/
var statusLogin = null;
$(document).on('pagecontainershow', function (e, ui) {
var myNavbar = null;
if (statusLogin == null) {
myNavbar = $('<div data-role="footer" data-id="footer" data-position="fixed"><div data-role="navbar"><ul><li>Menu</li><li>Sugestions</li><li>History</li><li>Settings</li></ul></div></div>');
$('.ui-content').append(myNavbar).trigger('create');
} else {
myNavbar = $('<div data-role="footer" data-id="footer" data-position="fixed"><div data-role="navbar"><ul><li>Menu</li><li>History</li><li>Settings</li></ul></div></div>').appendTo('.ui-content');
$('.content').append(myNavbar).trigger('create');
}
$("[data-role='navbar']").navbar();
$("[data-role='header'], [data-role='footer']").toolbar();
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
var activePageId = activePage[0].id;
switch (activePageId) {
case 'listMenuPage':
alert("listMenuPage");
break;
case 'sugestionsPage':
alert("sugestionsPage");
break;
case 'settingsPage':
alert("settingsPage");
break;
case 'historyPage':
alert("historyPage");
break;
default:
}
});

footer div should be a direct child of page div, you should not place it inside content div. Moreover, you need to .remove() footer or navbar once you leave a page before you inject a new one. Otherwise, you will end up adding duplicating both footer and navbar in same page whenever the same page is shown.
Another note, when you inject toolbar dynamically, you need to reset the height of active page $.mobile.resetActivePageHeight() as toolbars adds padding to page, if height isn't reset, the page will scroll.
For better results, use pagecontainerbeforeshow to inject footer and navbar, and pagecontainerhide to remove them.
var statusLogin = null;
$(document).on('pagecontainerbeforeshow', function (e, ui) {
/* ui.toPage was introduced in 1.4.3
* can be used instead of "getActivePage"
* on pagecontainer events
*/
var activePage = $(ui.toPage),
activePageId = activePage[0].id,
myNavbar = "";
if (statusLogin == null) {
myNavbar = $('<tags></tags>');
activePage.append(myNavbar);
} else {
myNavbar = $('<tags></tags>');
activePage.append(myNavbar);
}
/* create footer and navbar
* add active class to button based on page's ID
*/
$("[data-role='footer']")
.toolbar()
.find("a[href=#" + activePageId + "]")
.addClass("ui-btn-active");
/* reset height of active page */
$.mobile.resetActivePageHeight();
}).on("pagecontainerhide", function (e, ui) {
/* remove footer once page is hidden */
$(".ui-footer", ui.prevPage).remove();
});
Demo