Im developing a website from scratch, my website is a "one-page" type, and my navigation menu make it scroll between sections using anchors.
I'm relatively new to mobile-optimized developing. Everything is fine on comptuer but when testing it in mobile-phone, when scrolling down manually, the sidebar that is supposed to be fixed, create a blank space below it for a second, after that it become again 100% height as it's supposed to be. I would like to remove that "blank space below sidebar" second delay, when scrolling.
Here's my example, try to browse it by mobile phone (i used iPhone actually).
http://www.officine06.com/limonaia
Full code:
http://jsfiddle.net/hQGFa
the CSS code:
.sidebar {background: yellow; width: 200px; height: 100%; position: fixed; z-index: 10; left: 0; top: 0;}
I also noticed that the smoothscroll js is not working on mobile.
And if u look at the above hosted example with background photos, on mobile it creates a white space between the backgrounds of the sections, that's not supposed to happen.
Any suggestion would be very appreciated, thanks in advance, and sorry for my english, is not my native language.
Related
My main issue is that when you click a button on my site (www.typo.video) it takes you to a different page of the site but it jumps back to the top when I'd like for the view not to change relative to the background. The obvious solution to me is to not allow the page to overflow and instead have the whole site scale to the size of the window (similar to using ctr +/- in the browser to zoom), but I cannot figure out how.
I've tried a few solutions, but it's possible I didn't implement them correctly because I am not coding the site from scratch. I am using a website builder through NameCheap and I don't always know what folders/files I should be editing the code in to affect certain aspects of the site. I am a fast learner and have some limited coding experience but I only started messing with html/css in the past few days.
I think this solution could work from the sounds of it, but if I'm not mistaken I would need to essentially put the whole site into a container and I am not sure where amongst the files I would implement that.
If anyone has a solution it would be helpful to know what I am looking for in terms of where to put the code/what phrases I should be looking for. (See image of relevant folder structure).
You need to edit this id, replace the values with the commented ones.
#wb_main_11 {
width: 1920px; /* 100% or 100vh */
height: 1080px; /* 100vh */
/* once you change the above, you probably don't need the ones bellow */
min-width: 1920px; /* 100vh or 100% */
min-height: 1080px; /* 100vh or 100% */
max-width: 1920px;
max-height: 1080px;
flex: 1 1 auto;
}
Also the image your have a "max-width: 100%" rules, after doing that, the button are the last element making your page to overflow, so reposition them
We have a third party web application which needs to be integrated into our web portal. We used iframe approach to integrate that. It would look like:
Iframe got some scrolls. So I got to inspect their code and found that they kept some static width to body around 1280px where the iframe can't afford since its width is less than that.
But the interesting thing here is, when the third party app is run in an iPad (without iframe, directly in browser address bar), there are no scrolls and the app got fit into the ipad window size. I believe iPad browser's width is less than 1280px(not really sure). So I wonder, how could the app got fit into window without any scrolls. They are not doing any device based width settings. I inspected the code in iPad and saw that body is set to 1280px.
So the question here is, how does it work properly in iPad and how to avoid scrolls in desktop if app is run in iframe?
html, body {
width: 1530px;
height: 100%;
margin: 0;
}
.rightpane {
margin-left: 250px;
border: none;
width: 1280px;
height: 100%;
}
.leftnav {
position: fixed;
width: 250px;
height: 100%
}
<div class="leftnav">
left nav here
</div>
<iframe class="rightpane" src="http://example.com/" />
The most straightforward solution is to just set the iframe width to 1280px. On an ipad it will show the whole page correctly being zoomed out.
This issue is giving me a serious headache and delaying my project because I cannot figure it out.
I am trying to create a mobile friendly website and am performing the tests in iOS7/OSX.
Basically I have a header, a nav below it, and below that all the content. When the user scrolls down, I want the header to smoothly to dissapear, and then the nav bar will clip (fix) to the top of the browser. So far this seems to be possible with only CSS3, but it isn't perfect, and javascript makes the nav bar "snap" to the browser once the scrolling has stopped. Furthermore, I would like to make it so when I scroll up, it will show the header, regardless if im in the middle, top, or bottom of the page. This works just like the header and footer in the iOS Safari browser. When you scroll down everything slides away, but then when you scroll back up, the footer and header reveal themselves.
I need to accomplish this, preferably without JS, but that doesnt seem possible.
So, can someone PLEASE show me or link me to a tutorial that can show me how this is done and what it is I exactly need? I would greatly appreciate it. And keep in mind it must work smoothly on mobile browsers.
Using position: sticky for the nav could be close to what you are after. It is supported by Safari in ios7 at least (demo). Try adding something like this to your nav:
.nav {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top: 15px;
}
For more complex behaviour, like the header appearing again when you are scrolling up, you will probably need to resort to javascript.
Recently I've been thinking about working on a new website layout, but I've come across lots of inspiration lately, but with no luck of finding how to implement them into my project. One of these problems include preloading an image before allowing the webpage the load exactly like how Squarespace presents their website with a preloaded image of their logo and then a quick transition to their webpage. I tried to look at their source code, but with no luck of finding how they did it or what they used (Jquery?/Javascript?). I have no Idea. I did some research, but most of them consist of "progress bars" which I do not want, I would just like to emulate Squarespace with an image and a nice background then transition into my webpage. Would anyone be willing to demonstrate how to do so? Thank you all in advance.
P.S I am still learning JavaScript and Jquery, but I am just fascinated in how people come up with these implementations.
Here is the website link to make things easier: http://www.squarespace.com/
You can see at the beginning a logo loads before the whole website loads, that's what my question revolves around.
Wanna try this one?
Tutorial site http://jquerybyexample.blogspot.com/2012/06/show-loading-image-while-page-is.html
HTML
<div id="dvLoading"></div>
CSS
#dvLoading{
background:#000 url(images/loader.gif) no-repeat center center;
height: 100px;
width: 100px;
position: fixed;
z-index: 1000;
left: 50%;
top: 50%;
margin: -25px 0 0 -25px;
}
JS
<script>
$(window).load(function(){
$('#dvLoading').fadeOut(2000);
});
</script>
In a mobile web application I have a div which can be scrolled with the new fancy -webkit-overflow-scrolling: touch. The only problem is that the content is being rendered only when the scrolling finishes. Is there a way to make Mobile Safari (and maybe other mobile browsers, like that one in Android) render the html during single finger scroll?
.layer-content {
position: absolute;
top: 112px;
bottom: 0;
width: 100%;
background: #e6e6e6;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
You can work around this by using hardware acceleration. Try adding the following CSS to elements inside .layer-content:
-webkit-transform: translate3d(0,0,0);
Not really. That is just the way the iPhone works. If you scroll, all resources are used to make the scrolling very smooth, at the expense of not showing the new parts. You could maybe fool the browser into thinking the layer is bigger, by making it bigger, and add a layer on top of the part you don't want to show, but this doesn't work for all layouts. I would just leave it be. Users are used to it, as normal pages have the same 'rendering issue'.
The position: absolute is messing with the rendering. The Mobile Safari will not render elements that does not have the standard value for positioning, until the scrolling have come to a halt.
If the position is auto (the default value), Mobile Safari will render the element as you scroll.
I'm pretty darn sure I just solved this with:
overflow-y: auto;
Add that to your scrolling element.
(Presumably just overflow: auto; would work too depending on your needs.)