I'm trying to make some responsive page begin by mobile first and i'm always coming back to the same mistake.
When I have my pull-down menu in mobile version the menu it's ok, but when I try to change it to no-mobile version it doesn't works. i'd like a mobile version with one column and when the windows size oversteps the mark of 400px modify to two columns.
This is my code after lots of changes.
$('.slide ul').slideUp();
var ventana;
ventana=$('.wrapper').width();
$(window).on('load',preguntaTamano());
$(window).resize(preguntaTamano());
function preguntaTamano(e){
if(ventana<400){
mobile();
}
else if(ventana>400){
noMobile();
}
}
function mobile(e){
$('.especial').hide();
$('.toggle').on('click',controlaMenu);
}
function controlaMenu(e){
$('.slide ul').slideToggle();
e.preventDefault();
}
function noMobile(e){
$('.lista').show();
var listaElegidos;
listaElegidos= $('.elegidos').html();
$('.especial').preppend(listaElegidos);
}
Thank you very much!
I'd use CSS media queries instead:
#media (max-width: 400px) {
.lista {
display: block;
}
.especial {
display: none;
}
}
#media (min-width: 401px) {
.lista {
display: none;
}
.especial {
display:block;
}
}
Related
I'm trying to figure why the #media print doesn't seem to work on the iOS, on android the functionality works fine. Basically I've made a functionality to hide the contents that aren't part of the print
body.printing *{display : none}
and only display the contents that will be printed
body.printing .print-me, body.printing .print-me > div{display : block}.
$('.print-modal').on('click', function() {
$('body').addClass('printing');
window.print();
$("body").removeClass("printing");
})
#media print {
/* Hide everything in the body when printing... */
body.printing * { display: none; }
/* ...except our special div. */
body.printing .print-me, body.printing .print-me > div { display: block; }
}
#media screen {
/* Hide the special layer from the screen. */
.print-me { display: none; }
}
Maybe the issue is, you are adding a class printing and removing the same class immediately. That's could be the reason.
Try changing the logic. You don't need to add a class for printing. Instead use print media query #media print to handle print logic.
$('.print-modal').on('click', function() {
window.print();
})
#media print {
/* Hide everything in the body when printing... */
body * { display: none; }
/* ...except our special div. */
body .print-me, body .print-me > div { display: block; }
}
#media screen {
/* Hide the special layer from the screen. */
.print-me { display: none; }
}
I have a css class "fadeout" that I want to disable if viewport width less than 786px
something like this
#media only screen and (max-width: 786px) {
.fadeout {doesItWork?:noItDoesNotWork!;}
}
You see the class does something regarding " $(window).scrollTop(); " in jquery which i don't think would be appropriate in mobile devices here is the code I got and it from https://tympanus.net/Tutorials/FixedFadeOutMenu/
//fadeout script
$(function() {
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop != 0)
$('.fadeout').stop().animate({'opacity':'0.2'},400);
else
$('.fadeout').stop().animate({'opacity':'1'},400);
});
$('.fadeout').hover(
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('.fadeout').stop().animate({'opacity':'1'},400);
}
},
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('.fadeout').stop().animate({'opacity':'0.2'},400);
}
}
);
});
I am open to javascript/jquery/plugin but would prefer a css only solution
Any help much appreciated thanks in advance
Why not just define the CSS for the class using the opposite media query?
#media only screen and (min-width: 787px) {
.A {
// style rules here.
}
}
Try to disable the parameters you want by using !important
I.E.
Greater that 768px
.A {
margin: 10px;
width: 120px;
}
Less then 768px
#media only screen and (max-width: 786px) {
.A {
margin:0px !important;
width: 120px !important;
}
}
Not entirely sure what you mean by disable but you can use display:none or visibility:hidden. With visibility:hidden the element still takes up space on the page, you just can't see it while display:none will not render the element at all.
#media screen and (min-width: 787px) {
.A {
display: none !important; /* If you just want it hidden */
pointer-events: none; /* If you don't want the user to be able to click */
}
}
I have a code trying to change the text of an h1 if the screen is reduced in size, here's the actual code I have, but is not working. Someone could help me to correct it and to understand it? thanks!
HTML
<h1 id="text1">Test</h1>
JAVASCRIPT
if($(window).width() <= 500){
$('#text1').Text('testing');
}else{
$('#text1').Text('buuu');
}
You need to work along with window resize event. Other option is using CSS pseudo code.
#media (min-width: 500px) {
#text1:after {
content: "foo";
}
}
#media (max-width: 499px) {
#text1:after {
content: "bar";
}
}
<h1 id="text1"></h1>
Edited As per Niet the Dark Absol suggestion.
#media (min-width: 500px) {
#text1 > .tiny {
display: none;
}
}
#media (max-width: 499px) {
#text1 > .big {
display: none;
}
}
<h1 id="text1">
<span class="big">Bigger Content</span>
<span class="tiny">Smaller Content</span>
</h1>
Maybe CSS could help you here:
use data- attributes to validate HTML5 and mediaqueries to show its value. Old text-indent method to erase at screen text hold in the tag itself.
You can use it without id or class for entire site, but data- attribute will need to be there and filled, else a class to set wherever needed, or id for a single use.
#media all and (max-width:500px) {
h1 {
text-indent:-9999px;
}
h1:before {
content:attr(data-text);
text-indent:0;
float:left;
}
}
<h1 data-text="short text">My long text stands here</h1>
You have to catch the window's resizing events. Pretty easy to do it with jquery.
Try this:
$(window).resize(function(){
if ($(window).width() <= 500){
$('#text1').Text('testing');
}
else {
$('#text1').Text('buuu');
}
});
http://jsbin.com/puzanajepe/1/edit?html,js,output
I'm currently using CSS to hide a div section when the screen goes under a certain width. That bit works fine, but I'm struggling to get my head round, how to show a replacement div when I hide the div.
I might be going about it the wrong way, but here's my code:
#media all and (max-width: 955px) {
div.grid12-11 {
display: none;
}
}
#media all and (max-width: 954px) {
div.grid12-12 {
display: block;
}
}
What I'm trying to achieve is when the screen width goes below 955px grid12-11 is hidden and replaced with grid12-12.
Currently both the div's are being shown > 955px rather than replacing the block.
Is there a better/correct way to doing this?
There is no need to change the media query
div.grid12-12 {
display: none; // make it hidden on default view
}
#media all and (max-width: 955px) {
div.grid12-11 {
display: none;
}
div.grid12-12 {
display: block;
}
}
Check this: http://jsfiddle.net/Mohamed_nabil/cHQcD/
#media (max-width: 955px) {
div.gridFirst {
display: none;
}
}
#media (min-width: 955px) {
div.gridSecond {
display: none;
}
}
How are your initial rules set up? I think you're running into a problem of specificity. If your 'standard' rules are the same or more specific than your rules in your media query, the media query will not override them.
This seems to do what you expect:
#media all and (max-width: 955px) {
div.grid12-11 {
display: none;
}
div.grid12-12 {
display: block;
}
}
.grid12-11 { display:block; }
.grid12-12 { display:none; }
Note that if your standard rules (non-media) are prefixed with "div", it will NOT function (depending on what order the rules are processed in, and which browser you are using).
I need to quickly knock up the functionality of the twitter bootstraps main navigation and sub navigation e.g. http://twitter.github.com/bootstrap/scaffolding.html (when you scroll the subnav becomes fixed to that main navigation)
Has anyone implemented this or are there any tutorials?
Here is my code to implement this feature:
$(document).scroll(function(){
// If has not activated (has no attribute "data-top"
if (!$('.subnav').attr('data-top')) {
// If already fixed, then do nothing
if ($('.subnav').hasClass('subnav-fixed')) return;
// Remember top position
var offset = $('.subnav').offset()
$('.subnav').attr('data-top', offset.top);
}
if ($('.subnav').attr('data-top') - $('.subnav').outerHeight() <= $(this).scrollTop())
$('.subnav').addClass('subnav-fixed');
else
$('.subnav').removeClass('subnav-fixed');
});
As of 2012-12-04 the accepted answer is no longer the best choise, since the desired functionality has been included into Bootstrap.
Please see Affix JavaScript component which is part of Bootstrap JS
Great Answer from #Oleg,
For people like me who want to reproduce the responsive behaviour of the .subnav
Here is the css code (without colors, borders and effects)
body { padding-top: 90px; }
#media (max-width: 980px) {
body {
padding-top: 0;
}
}
.subnav {
width: 100%;
}
#media (max-width: 768px) {
.subnav {
position: static;
top: auto;
z-index: auto;
width: auto;
height: auto;
}
.subnav .nav > li {
float: none;
}
}
#media (min-width: 980px) {
.subnav-fixed {
position: fixed;
top: 40px;
left: 0;
right: 0;
z-index: 1020;
}
.subnav-fixed .nav {
width: 938px;
margin: 0 auto;
}
}
#media (min-width: 1210px) {
.subnav-fixed .nav {
width: 1168px;
}
}
If you want to clone the style of the menu (including colors, borders and effects)
http://jsfiddle.net/baptme/ydY6W/
The two answers above work great, but I just thought I'd let people know that I've made this into a module (without the jQuery dependency) available at ForbesLindesay/booting-sub-nav. It can be used standalone with a script tag or via https://github.com/component/component/
Here is another code
$(function(){
var
$win = $(window),
$filter = $('.navbar'),
$filterSpacer = $('<div />', {
"class": "filter-drop-spacer",
"height": $filter.outerHeight()
});
$win.scroll(function(){
if(!$filter.hasClass('navbar-fixed-top')){
if($win.scrollTop() > $filter.offset().top){
$filter.before($filterSpacer);
$filter.addClass("navbar-fixed-top");
}
}else if ($filter.hasClass('navbar-fixed-top')){
if($win.scrollTop() < $filterSpacer.offset().top){
$filter.removeClass("navbar-fixed-top");
$filterSpacer.remove();
}
}
});
});