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
});
}
Related
This question already has answers here:
Can I resize the browser window?
(4 answers)
Closed 6 years ago.
I want to resize my browser window using Javascript to test my responsive webpage design functionality.
But I didn't find any option for the same.
What I found is, we can modify window size for newly pop up window as shown below:
<body>
<p>Open a new window, and resize the width and height to 500px:</p>
<button onclick="openWin()">Create window</button>
<button onclick="resizeWin()">Resize window</button>
<script>
var myWindow;
function openWin() {
myWindow = window.open("", "", "width=100, height=100");
}
function resizeWin() {
myWindow.resizeTo(250, 250);
myWindow.focus();
}
</script>
</body>
I have defined some responsive behaviour using following css code:
#media screen and (max-width: 500px){
//style changes
}
Can we resize browser window where our page is launched? Or it is not possible?
To resize the window, you can simply do this:
window.resizeTo(width, height);
You likely can use resizeBy/resizeTo but why don't you want to use Chrome built-in tester?
You can open developer console cmd/ctrl + alt + I and click on Device Toolbar or cmd/ctrl + shift + M and adjust screen size using predefined templates or create your own
Update
For automation test there are a several ways to adjust it. Which runtime is running your Jasmine tests? For PhantomJS you can use
var webPage = require('webpage');
var page = webPage.create();
page.viewportSize = {
width: 480,
height: 800
};
More info here
There are 2 options to implement responsive layout structure :
by using javascript..
function ResponsiveLayout() {
if (screen.width <= 1440) {
$('#content').addClass("pipeline1");
}
else if (screen.width > 1440 && screen.width <= 1600) {
$('#content').addClass("pipeline2");
}
else if (screen.width > 1600) {
$('#content').addClass("pipeline3");
}
};ResponsiveLayout()
By using css3 media query :
#media (min-width: 1200px){css attrabutes}
#media (max-width: 1199px) and (min-width: 981px){css attrabutes}
#media (max-width: 980px) and (min-width: 641px){css attrabutes}
#media (max-width: 640px) and (min-width: 481px){css attrabutes}
#media (max-width: 480px) and (min-width: 321px){css attrabutes}
#media (max-width: 320px){css attrabutes}
Professionally Media query would be better option but can we use javascript where limited access of css file or inline css -:)
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'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.
What I want the script:
-detect if site is in standalone app
-detect if site is in landscape
-add padding-top to header
if (window.navigator.standalone == true && window.innerWidth > window.innerHeight){
$('header').css('padding-top','20px');
}
Use media queries for device-conditional layout:
#media screen and (orientation:landscape) {
header {
padding-top:20px;
}
}
If the standalone property is really important, detect it in Javascript and add a class to the body:
if (window.navigator.standalone == true)
$('body').addClass('standalone');
Then use it in your CSS to apply extra requirements:
.standalone header {
padding-top:20px; /* only applied if standalone */
}
You can of course combine the media query with this.
I figured it out
if (window.navigator.standalone){
$(window).resize( function(){
var height = $(window).height();
var width = $(window).width();
if(width>height) {
// Landscape
$('header').css('padding-top','20px');
}
else{
$('header').css('padding-top','0px');
}
});
}
What is the best approach to change a css file when a mobile application page orientation changes from landscape to portrait and vice versa. I need to suport both Android and iPhone only. It seems media queries aren't the cleanest way, any other ideas?
Example
/* For portrait */
#media screen and (orientation: portrait) {
#toolbar {
width: 100%;
}
}
/* For landscape */
#media screen and (orientation: landscape) {
#toolbar {
position: fixed;
width: 2.65em;
height: 100%;
}
p {
margin-left: 2em;
}
}
For more details see here
The below JQuery code seems to work best for me...the binding examples did not.
$(document).ready(function() {
$(window).resize(function() {
alert(window.orientation);
});
});
First give your style sheet include line an id="cssElement" or something.
Then Using jQuery:
$(document).ready(function(){
// The event for orientation change
var onChanged = function() {
// The orientation
var orientation = window.orientation;
if(orientation == 90) {
$('#cssElement').attr('href', '/path/to/landscape.css');
} else {
$('#cssElement').attr('href', '/path/to/portrait.css');
}
};
// Bind the orientation change event and bind onLoad
$(window).bind(orientationEvent, onChanged).bind('load', onChanged);
});
You can use window.onorientationchange event.