Using the supersized script http://buildinternet.com/project/supersized/ on a new site. Same thing happens with the demo site. http://buildinternet.com/project/supersized/3/core.html
When I view it through my iPhone / Android, not seeing the bottom of the site, basically unable to scroll down.
Does this have to do with the CSS or that this script does not work with ?
EDIT:
Did not know that jQuery not capable of working on mobile devices. Guess that why they came up with jQuery mobile...
The issue, as far as I can tell, has to do with the inner block having an absolute position and a height:100%. That prevents the page from scrolling.
Change the position to relative and the inner block shows up below the background.
Change the height to auto and the background does not resize.
The best compromise I've come up with is to add the following to my CSS:
#media screen and (max-device-width: 480px) {
.focus_wrapper { poxsition:relative; height:auto;}
}
The image is displayed in the background but if the foreground item is longer than the screen, the background image terminates and doesn't repeat. Sorry I don't have a better answer.
Related
on my website I got a navigation with many elements. The navigation is scrollable and if you hover over an element, it gets highlighted.
The Problem: If I visit my website with my iPad, while scrolling in the navigation, the element I drag on shows its hover-effect and gets highlighted. I don't want this to happen, whats a good solution for this problem?
Thanks in advance!!
I have not try this yet but you can consider this:
Add an on-scroll function to <body>, in the function, set the color of all elements in navigation list to normal color(the color when not hovered at), so that when you scroll the page on your Ipad, even you drag the element it will still not highlighted.
<body onscroll="scroll_function()">
<script>
function scroll_function(){
document.getElementByClassName("element_name").style.backgroundColor = ... (your normal color)
}
</script>
Create an CSS media query that will use custom css on devices smaller or a larger screen than x pixels
#media only screen and (max-width: 600px) {
some-element:hover{
text-decoration:none;
}
}
Hover effects are pointless on mobile devices and tablets because you do not use a mouse to hover over elements.
Use all you hover effects as such:
#media screen and (min-width: 1024px) {
/* STYLES HERE */
}
If you still use the hover effects on all media queries, when you click on elements, the hover effect will take place.
Working without your code (always good to include that in a question btw), I'm gathering that the hover effect will be entirely CSS in spite of the javascript tag in the question, if that is the case you can use media queries to resolve this by simply creating a profile for devices you don't want the hover effect to happen on.
WRT the somewhat troublesome larger resolutions on modern handhelds, here is a quite extensive list of media query resolutions for differing handheld devices which should be helpful if you were to go down the route of attempting an MQ solution.
I have a web page formatted with jQuery mobile that utilizes Owl Carousel & Photoswipe and it is giving me trouble when viewed on mobile sizes. The problem is that when viewed on a portrait sized mobile phone (IPhone 5) the one image that is displayed is off center. I noticed that there is Javascript applying inline style to the ul with the class of .owl-carousel.owl-theme which sets the display to block. If I switch this to inline while debugging the page in Mobile view with developer tools in Chrome the one image is correctly centered. If I try to hard code this into the CSS then all images are stacked on top of one another and you can only click on one image (which is incorrect behavior since there are three images in the carousel/gallery).
Does anyone know what my problem is, and how to solve it so that if viewed from a mobile device in portrait (when only one carousel image is displayed) the image is centered correctly on the page? I have other pages with similar CSS for the carousel (though not jQuery Mobile) and when viewed on a mobile device the behavior is correct, so I am stumped! Thank you for any help given!
Try this CSS
CSS
ul.owl-carousel{
padding:0;
text-align:center;
}
hope this helps..
This is how I did it. Based on Chandra Shekhar's answer, but it seems the plugin is using divs instead of ul now; also I added a mobile query.
#media only screen and (max-width: 450px) {
div.owl-carousel {
padding:0;
text-align:center;
}
}
I have a scrolling <div> that is supposed to fill the visible area of the page:
<div id=allcontent style="width:100%;height:100%;overflow:scroll">
(all page content)
</div>
When I zoom in with ctrl+ IE11, there is extra space below and to the right of my div, where I see the <body> background color.
I would like to resize the "allcontent" div to fill the page when IE zooms in, but I can't find a way to get the actual page size using javascript.
Is there either:
a way to get the real page size from IE11 after clicking ctrl+, or
a way to specify the <div> dimensions in CSS that will cause it to resize correctly with the page?
I have tried all sorts of measurements like ocument.body.clientWidth but not found anything that applies to the newly visible area outside of my <div>.
Even weirder: the page slowly scrolls to cover up the (wrongly) exposed body color.
The problem was the "auto zoom to viewport width" feature of IE11. The fix was to add the following to my CSS:
#media screen {
#-ms-viewport {
width: device-width;
}
}
Microsoft: Internet Explorer... automatically scales content when the window is narrower than 1024 pixels... in cases where this automatic scaling is not needed or desired, the device-width keyword... signifies that the page is optimized to work well regardless of the width of the device.
I found the answer in this question.
I'm having issues with a parallax site I am building using Skrollr.
I've built a site that has the same effect as https://www.spotify.com/uk/. The effect being large full width background images that move slower than the natural browser scroll, and have text and other images moving on top of them.
When viewed on a desktop browser the site functions fine and performs perfectly. The problem I'm having is when testing on an iPad (iOS 6.1.3) and you release your finger from the screen and Skrollr's intertia animation takes over, the large background images and other content on the screen start to jitter and jump on the screen. This does not happen when you still have your finger touching the screen and scroll, only when you let go and the easing takes over.
A couple of things I've tried are:
Setting webkit-backface-visibility:hidden on all of the background images, and skrollr-body div.
Animate elements using –webkit transition: translate3d
If anyone could shed any light on why I'm getting this page flickering issue that would be great.
I had a very similar issue (i.e. Skrollr / iOS parallax background image 'flicker'). I believe you'll find it's related to this: cubiq.org/you-shall-not-flicker
Simple solution (from the article): -webkit-transform:translate3d(0,0,0).
I'm working on a jQuery lightbox type plugin that needs to function for mobile devices and desktops. I'm having a problem with the full screen overlay effect. From my research, it seems that the standard solution for this is to use position: fixed or background-attachment: fixed to accomplish the overlay effect. Of course, mobile devices don't support fixed positioning, and so I'm trying to find another way.
Right now, I'm attaching a function to $( window ).on( 'resize' ) to get the new dimensions of the window and set the overlay to them. The problem I'm seeing is that this is triggering flickering scroll bars that make the whole thing really jumpy when I size the window down. You can see the effect here: (http://jsfiddle.net/dominic_p/ZqLCx/3/ or http://3strandsmarketing.com/lightbox.php).
Any idea how I can solve this? The code is still in heavy development so it's kind of a mess, but I tried to highlight what I think the 2 problem areas are in the jsFiddle with a comment that says "THE PROBLEM: START".
UPDATE:
I had a brilliant idea to just change the positioning to fixed for desktop browsers and still rely on my resizing scripts for mobile browsers. It seems to have helped a lot, but there is still some significant flicker when the browser window starts to get small (especially when shrinking it vertically). Also, when using position: fixed on Android 4 there is suddenly a large white gap on the side of the screen that I can horizontally scroll to in portrait mode only. Anyone have an idea of how to resolve either problem?
The solution for the flicker problem seems to be to set the overflow-x (or just overflow if you prefer) property for the <body> element to hidden. For curiosity's sake, it actually wasn't the overlay layer, but the lightbox contents that were causing the flicker.
I'm still struggling with the white gap that shows up on Android, but that's a separate problem, so I'm posting this as the solution.