Why does changing an element through jQuery affect my media queries? - javascript

I am trying to create a Navigation bar that on mobile is transparent until you scroll past a certain point, but it switches back and forth through the use of a JavaScript function I'm using for the window scroll listener. But once that function changes the navigation properly, I find that my media query to show the navigation bar again on a desktop width does not change, but only when my JS has ran for the mobile width. I wanna believe it's how I'm using classes and IDs, but I've tried all the different ways and the media query still doesn't work properly.
#media screen and (min-width: 768px) {
/* Change navbar for desktop */
.navigation-bar {
background: black;
justify-content: space-between;
}
.navigation-bar .logo {
display: inline;
}
}
The above is my desktop media query for the navigation
/**
* Show navigation bar on mobile
* after 400 pixels scrolled
*/
function showNavOnMobile() {
if(window.innerWidth <= 768) {
if($(window).scrollTop() > 400) {
$(".navigation-bar").css("background", "black");
$(".navigation-bar .logo").css("display", "inline");
}
else {
$(".navigation-bar").css("background", "none");
$(".navigation-bar .logo").css("display", "none");
}
}
}
Only when that function runs, the media query doesn't work, but if I was to not scroll the page, the media query would work just as I need it to.
This is my first post, so I apologize if it's not exactly the way you should format it.

Related

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;
}
}

Not load all links in particular size of screen by javascript and advance java

I am implementing two header menu in one .jspf file. One header menu for mobile screen and another one is desktop screen. But problem is that when load the page then all links load for small screen header menu and desktop screen header menu. When page is load in mobile screen then i don't want to load desktop header menu screen links.
Right now i am using media query for hide the header for small screen and desktop screen.
I have another idea for hide and display to the header i.e javascript.
$(document).ready(function () {
var windowViewWidth = $(window).width();
if (windowViewWidth <= 767)
{
.........
.........
}
});
One mobile screen header menu screen shot:
When i am see view page source code then load all links. I tried Java script width property and media queries. Still it is not working. When i see page source code for small screen then should not show desktop header menu screen links in source code.
Any one have some different idea please with with me.
Could you have the same css for your header (mobile and desktop) in a media query and the CSS used for the header changes depending on screen size? So the header css would be using the same attributes and html for both, but just changing at the time of the media query criteria being true?
header{
height: 40px;
width: 500px;
background: gold;
}
#media screen and (max-width: 480px) {
header {
height: 300px;
width: 100px;
background: lightgreen;
}
}
<header>
<header>

CSS Styles not being removed after class is removed

I am sitting with an issue where CSS styles don't get removed from an anchor tag when the css class is removed via AJAX, it only happens on a mobile device. This doesn't happen when using a desktop browser.
Have a look here using a mobile device.
You will note that the filters turn red when you select them, but deselecting them doesn't remove the red.
The code that is used there:
$('.tagsContainer .tagsContainerA').click(function () {
vm.alphabet("");
clearAlphabet();
$('.pagination.alphabet .alphabetAll').addClass('currentPage');
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
}
else {
$(this).addClass('selected');
}
return false;
});
Any ideas what could be causing this on a mobile device?
The problem has to do with the hover, not the click function.
This happens because the hover is triggered in mobile while the element is focused also.
Just add this to your css:
#media screen and (max-width: 768px) {
.places-filter .places-tags li:hover {
background-color: #d1d1d1;
background: #d1d1d1;
}
}
This way you will 'disable' the hover function and only have the click one in mobile.
Another solution is placing the hover effect only in screens bigger than X amount.

How do I show a previously hidden div if the view port is resized?

I am developing a responsive site using Bootstrap 3. I have a JS show/hide script which is available when the screen is max-width 767px, but if I have shown and then hidden the div in that size, when I resize the screen back to desktop the div is still hidden.
Is there away to force the div to come back if the screen goes beyond a 767px?
<script type="text/javascript">
function showFunction() {
document.getElementById("left-col").style.visibility="visible";
}
function hideFunction() {
document.getElementById("left-col").style.visibility="hidden";
}
</script>
Why not use a media query then?
#media (max-width: 767px) {
.left-col {
display: none;
}
}
http://jsfiddle.net/x9y1s14o/
Generally, there are two ways to do this:
Use CSS to force the div to be shown at one size, and hidden at another
Use JavaScript to listen for changes in the browser and then call a function to modify the state of the dom
With CSS, you tell the browser what to do when the window is bigger than your breakpoint, and what to do when your window is smaller than your breakpoint, which 767 px.
#media (min-width: 767px) {
.left-col {
visibility: visible;
}
}
#media (max-width: 767px) {
.left-col {
visibility: hidden;
}
}
With JavaScript, you tell the browser to call a function when the window resizes:
var breakpoint = 767;
window.onresize = function(event) {
if (window.innerWidth >= breakpoint) {
showFunction();
} else {
hideFunction();
}
};
Note: Your specifics might be slightly different, but this is meant to illustrate the idea behind it. Tweak the details that you need to.

How can I remove caret on Bootstrap 3 menu and show dropdown on hover?

I have set up Bootstrap 3 on my Wordpress theme and I have got the submenu working correctly on a mobile (grey arrow to indicate it is a dropdown which opens on click).
On a desktop I would like the dropdown to work on hover without the arrow image. Is there a way to do this without affecting the mobile layout? see this.
I get it, you don't want the users to see the "caret" on the desktop. This could be achieved with minimal amount of Media Queries. It should be something along these lines. I got the Desktop breakpoint Media query code right from Bootstrap 3 Docs.
#media (min-width: 1200px) {
.navbar-nav .caret {
display:none;
}
.dropdown:hover .dropdown-menu {
display: block;
}
}
You can use Jquery hover to activate the drop-down
Try this
$(document).ready(function() {
$('.nav li.dropdown').hover(function() {
$(this).addClass('open');
}, function() {
$(this).removeClass('open');
});
if($(window).width() > 750)
{
$('b.caret').hide()
}
});
DEMO

Categories