enquire
.register('screen and (min-width: 1200px)', {
match: function() {
active_li_margin_left = $('li.active').css('margin-left')
active_li_width = $('li.active').width()
console.log(active_li_margin_left, active_li_width)
zwarovsky();
}
})
.register('screen and (min-width: 980px) and (max-width: 1199px)', {
match: function() {
active_li_margin_left = $('li.active').css('margin-left')
active_li_width = $('li.active').width()
console.log(active_li_margin_left, active_li_width)
zwarovsky();
}
})
li.active width change from 770px to 620px, where margin-left from -30px to -20px, this are bootstrap span8 items.
the problem:
seems that enquire fire the functions just before the css media query, so it pickup the previous values when you resize the window.
when i switch from 1200 to 980 resizing the browser window console log show 30px 770 instead 20px 660, and than when i switch back from 980 to 1200 console log show 20px 620.
Related
I want to do a something in a smaller width of screen But I have a problem. I'm creating a Responsive Navbar, So I want to show a Button when It is in small width & toggling the Menu. But when I hide the Menu in smaller width, It doesn't show the Menu in wider width Because of Hiding in jQuery ...
So I wanted to make jQuery Codes run JUST in smaller width, I wrote this But It doesn't work :
$(window).resize(function() {
if($(window).width() < '48em') {
$('.ji-toggle-btn').click(function() {
$(this).parent().find('ul').toggle();
});
}
});
The proper way to show/hide a button is with a media query in CSS:
.css example:
.ji-toggle-btn {
display: none;
}
#media (min-width: 48em) {
.ji-toggle-btn {
display: block;
}
}
.scss example:
.ji-toggle-btn {
display: none;
#media (min-width: 48em) {
display: block;
}
}
I mocked up a sample of how to do a responsive sidebar:
http://codepen.io/staypuftman/pen/dGOMYO
What you'll notice in this example is how little JS is used. Targeting a .toggle class and using css transitions will get you where you want to go. You're overthinking this approach with the JS.
Your problem is that you're assigning a behavior on smaller resolution. You practically want to assign a click event only when the window size is smaller than 48 em.
With simple words - just remove the click event:
$(window).resize(function() {
if($(window).width() < '48em') {
$('.ji-toggle-btn').parent().find('ul').toggle();
}
});
EDIT I agree with the guy above about the CSS. Those things basically should be done with media queries.
$(window).width() returns an int (screen width in pixels). In order to get that value in ems you need to divide that buy the body's font-size, then compare that with just '48' not '48em'. For example:
$(window).resize(function() {
if(($(window).width() / parseFloat($("body").css("font-size"))) < 48) {
// Do stuff here...
}
});
i want to use zslider javascript in my website, but can any one tell me how to make it work only in screen resolution below 768px
Here is the zslider script link:
http://www.cssscript.com/demo/mobile-friendly-content-carousel-slider-with-pure-javascript-zslider/
Use media queries to show slider content below 768px:
#media (min-width: 768px) {
.z-slide-wrap {
display: none;
}
}
Than use JavaScript to initialize slider only if width is below 768px:
if (window.innerWidth <= 768) {
var slider1 = new Slider('#demo', '.z-slide-item', {
// OPTIONS HERE
});
}
I have a JavaScript like this
$(document).on('click', '.transparent-btns_nav', function(event) {
var images = $('.rslides ').find('img');
setTimeout(function() {
images.each(function() { // jQuery each loops over a jQuery obj
var h = $(this).outerHeight(true); // $(this) is the current image
var w = $(this).outerWidth(true);
// alert('source:'+$(this).attr('src'));
// alert('alto: '+h);
if (h < 290) {
$(this).addClass('small');
var m = 290 - h;
m = m / 2;
// alert('less height');
$('.small').attr('style', 'margin-top:' + m);
// $('.small').css('margin-top', +m + "px");
// $('.small').css('margin-bottom', +m + "px");
}
if (h > 290) {
$(this).addClass('big');
var m = h - 290;
m = m / 2;
// alert('less height');
$('.small').attr('style', 'margin-top:' - m);
}
});
}, 1000);
});
And Media Query something like this
#media only screen
and (min-device-width: 420px)
and (orientation: landscape) {
#bg {
}
#bg img {
margin - top: 0px;
}
.class {
margin-top: 0px;
margin-bottom: 0px;
}
.big {
margin-top: 0px;
margin-bottom: 0px;
}
}
What I want to do is add attributes to class big and small using the JavaScript and remove the attribute using the MediaQuery when the mode is Landscape . But I am not able to do it can some one please help me out in this
More Explanation
I am trying to add padding to the image which are bigger or smaller than the div . Like if its height is smaller then equal padding on the top and the bottom .If the height of the image is tooo big then I am trying to add -ve padding at the top and center the image . All these are done dynamically in portrait mode . If the phone is turned into landscape all the padding should be removed
I can give small Input on your code.
Instead "ATTR", you can directly Use "CSS" method to apply inline style to any element.
It will behave same like Attribute Style.
Instead of this:
$('.small').attr('style', 'margin-top:' + m);
You can Use this:
$('.small').css('margin-top',m);
Out put will be same as you Desired:
class="small" style="margin-top:xx"
My first suggestion would be for you to look for another option of vertical alignment. Have a look at display: inline-block, or display: table-cell, and see if you can use with vertical-alignment: middle;. - http://css-tricks.com/centering-in-the-unknown/
Second suggestion would be to use the !important statement, inside your media query. That way you could use inline styles (jQuery.css()) to define paddings on portrait, and override on landscape:
#media only screen
and (min-device-width: 420px)
and (orientation: landscape) {
.big {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
}
Third suggestion would be to write some new css to the page using javascript:
document.write("<style> .small { margin-top:10px; margin-bottom:10px; } #media only screen and (min-device-width: 420px) and (orientation: landscape) { .small { margin-top:0; margin-bottom:0; } }</style>");
I believe what you are really after is not "attributes" but changing "rules", the same as this person:
Changing a CSS rule-set from Javascript
That said, I'm not sure you wouldn't be better off simply using the class selectors to find all of the applicable elements and directly changing their styles. But it can be done.
I'm using some pretty basic jQuery to force things into position when they are moved around:
function ipad() {
var width = jQuery(window).width();
if (width < 1200 && width >= 768){ //if tablet
jQuery('.mobbut').css('width', '33.333%');
jQuery('#re2').css('max-width', '');
} else {
jQuery('.mobbut').css('width', '100%');
jQuery('#re2').css('max-width', '400px');
}
if (width < 768){ //if mobile phone
jQuery('._btnselect').hide();
} else {
jQuery('._btnselect').show();
}
}
jQuery(document).ready(function() {
ipad();//run when page first loads
});
jQuery(window).resize(function() {
ipad();//run on every window resize
});
jQuery(window).load(function() {
ipad();//run when page is fully loaded
});
So far my website is perfect on Chrome, Safari, iPad, iPhone, but for some reason it looks a mess when you resize your Firefox window to smaller than 1200px wide. Try for yourself here's the webpage. Is it something to do with the jQuery or more the layout of the page? I inherited this homepage from another designer and it was previously built on tables so this may be giving FF problems.
I tried using media queries and they didn't work, I had to turn to jQuery to get the results.
If they didn't work, it's probably because the syntax was incorrect. Try it like this, which is pretty much exactly what your jQuery is doing, but much simpler:
#re2 {
max-width: 400px;
}
.mobbut {
width: 100%;
}
#media only screen and (max-width: 767px) {
._btnselect {
display: none;
}
}
#media only screen and (min-width: 768px) and (max-width: 1199px) {
#re2 {
max-width: none;
}
.mobbut {
width: 33.333%;
}
}
--EDIT--
Since it looks like you're trying to target the iPad. Try these media queries, from this post:
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
These will likely work even more reliably than your jQuery adjustments since they are based on the device-width rather than the page width.
I ran your site with firebug (I do recommend using it) enabled and the error is in the following function
** function futsal(){
var wid = jQuery(window).width();
if (wid <= 1024 && width >= 768){ //if tablet **
just there you declare the var wid and then test against width
I agree with all of the comments above though, use media queries. It's far easier.
I'm trying to remove a span with class, using jquery. My goal is to remove this span, when screen smaller then 480px. I already tried with .remove(); but it does not remove the span, when screen is lower then 480px.
I am using CSS / media queries to control and customize the page.
This is my Fiddle: FIDDLE EXAMPLE
HTML
<span class="textbox">This is what we made of you!</span>
CSS
#media screen and (max-width: 368px) {
.container{width: 368px; margin: 0 auto;
padding: 0; display: block;}
span .textbox{display: none;}
.nav{display: none;}
.header{width: 368px;}
}
JQUERY
$(document).ready(function () {
var words = [
'Special', 'Dynamic', 'Simple', 'Great', 'Better',
'Stronger', 'Stylish', 'Flawless', 'Envied',
'Strong', 'Sucessful', 'Grow', 'Innovate', 'Global',
'Knowledgable', 'Unique', 'Trusted', 'Efficient',
'Reliable', 'Stable', 'Secure', 'Sofisticated',
'Evolving', 'Colorful', 'Admirable', 'Sexy', 'Trending',
'Shine', 'Noted', 'Famous', 'Inspiring', 'Important',
'Bigger', 'Stylish', 'Expand', 'Proud', 'Awesome',
'Solid'
], i = 0;
var getRandomWord = function () {
return words[Math.floor(Math.random() * words.length)];
};
setInterval(function(){
$('.textbox').fadeOut(500, function(){
$(this).html(getRandomWord()).fadeIn(500);
});
}, 5000);
});
span .textbox{display: none;}
should be:
span.textbox{display: none;}
because your original code would select all elements with a textbox class which have a span parent, and not the actual span element with the textbox class.
UPDATE
I didn't catch you're using fadeIn that will actually override your display: none property. The quickest fix (without having to check the window width in JS and all that...) is to animate the opacity instead of using fades because that won't change the display state of the element and your CSS rule will remain active.
So, your interval function should be:
setInterval(function(){
$('.textbox').animate({'opacity': 0}, 500, function(){
$(this).html(getRandomWord()).animate({'opacity': 1}, 500);
});
}, 3000);
See it in action here: http://jsfiddle.net/9B7vz/3/
Your current CSS does actually hide the text when the width is reduced to below 480px, but the jQuery fadeIn function brings it back into view, as fadeIn will change the display property of that element.
Try
#media screen and (max-width: 480px) {
.textbox {
display: none;
}
}
then
var interval;
function handler() {
var width = $(window).width();
//if window size is > 480 and there is no interval set then create a new interval
if (width >= 480 && !interval) {
interval = setInterval(function () {
$('.textbox').fadeOut(500, function () {
$(this).html(getRandomWord()).fadeIn(500);
});
}, 5000);
} else if (width < 480 && interval) {
//if window width < 480 and there is a interval clear it and hide the textbox
clearInterval(interval);
interval = undefined;
$('.textbox').hide();
}
}
handler();
//to handle resizing of window
$(window).resize(handler);
Demo: Fiddle