I have a navigation menu that is responsive using css media queries. When the nav is in desktop/laptop view the whole menu works fine. The nav tags are placed under an image in laptop desktop view which is how I want it but When it is in mobile view I need the nav tags and everything inside it to be placed about an img. I already have a css media query setup with some other styles in it but I think I need a javascript to do what I want.
Hope someone can help,
Thanks
Below are the media queries that I used for your question,
#mobileImg{
display:none;
}
#media only screen and (max-width: 768px) {
/* For mobile phones: */
#desktopImg{
display:none;
}
#mobileImg{
display:block;
}
}
Here is the working demo
So to explain what I did, I have two images one with the id desktopImg and other as mobileImg. The desktopImg is above the nav tags and mobileImg is below the nav tags. Using the media queries, I'm setting the display of mobileImg as none for desktops/laptops. Similarly for mobile view, I made the mobileImg visible and the desktopImg invisible by making its display as none
Related
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>
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
I'm working in a website for mobiles, tablets and desktops. This website in its desktop layout has a carousel that it is defined in the html like this:
<div id="carousel">
<div class="carousel-slide carousel-slide-active">
</div>
<div class="carousel-slide">
</div>
</div>
Class carousel-slide define an slide of the carousel, and carousel-slide-active, the slide being showed at the moment (controled by Javascript).
For the mobile layout, I don't want to show this carousel. My idea is to show just the first slide (each slide is basically a background color and an image). The question is, how can I do this? Actually I'm using CSS media queries to rearrange all the elements in each device but I don't know how to hide all unused slides and disable the Javascript (this javascript controls the background code (random) and the positioning). Which is the cleanest way to replace the carousel with a simple div with the image and a random color?
You can't disable the JavaScript unless your carousel plugin has a built-in method for it. If it doesn't have that, there is just no way.
Assuming all of the carousel slides actually appear inside of the carousel-slide-active div, you can do something like this:
#media screen and (max-width: 700px) {
.carousel-slide {
display: block;
}
.carousel-slide.carousel-slide-active: {
display: none;
}
}
This will make sure your "active" div is hidden and the other one is displayed. All html elements inside of the active div will also be hidden because their parent is hidden.
You can potentially add the !important flag to those css properties if you need to override some styles being created by the JavaScript. In that case it would look like this:
#media screen and (max-width: 700px) {
.carousel-slide {
display: block !important;
}
.carousel-slide.carousel-slide-active: {
display: none !important;
}
}
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}
}
I have looked all over online trying to solve this problem. I am in the process of making a desktop website responsive for mobile and have run into issues with the Navigation menu. I have set it to display:none for the mobile version but I want to make it so it can be seen by clicking on either an image or text. The solution that I have found elsewhere have all only worked with a div menu that only has UL and LI elements in it. Mine has H2 tags for each "section", etc. I just would rather have a button click and bam the whole DIV shows up just on a mobile query without messing with any of my HTML code, etc.
I have found this jquery code that seems close, however it seems to hide the nav div on desktop. I need it to work with display:none only set in the media query via CSS.
$("#preview").toggle(function() {
$("#navi").hide();
}, function() {
$("#navi").show();
});
});
It gets called by just clicking on the text such as "Click here for menu"...Would also prefer that to be a button or a link.
Try $.toggleClass() instead of using $.hide(). This way the media query css will have more control. The following is an example that a button that hides a div only in screen smaller than 700px.
JS:
$("#preview").toggleClass('hideInMobile');
Css:
#media (max-width: 700px){
.hideInMobile
{
display:none
}
}
demo:http://jsfiddle.net/HZDCW/2/
Hope it helps.