I'm working on a client site and i'm currently having an issue firguring out how to make something work. the goal is to pause at the section and continue to scroll inside the iphone then continue to scroll once the iphone has finished scrolling. I have attempted to use position fixed on the section but obviously the body continues to scroll so I'm not sure if this is the right solution. I was wondering if this is something Skrollr could assist with as well. Does anyone have any ideas?
I've added a fiddle of the layout: https://jsfiddle.net/9Lm6he4j/1/
Psuedo HTML:
<section>
<div class="iphone_wrap">
<div class="iphone_inner">
<!--Message content-->
</div>
</div>
</section>
CSS:
section {
position:relative;
min-height:500px;
width:100%;
}
.iphone_wrap {
width:400px;
height:650px;
position:absolute;
left:20%;
top:-200px;
background:url('iphone.jpg');
}
.iphone_inner {
position:relative;
margin:0 auto;
overflow:scroll;
}
one way you can do this is
use javascript/jquery and set position fixed of the "blue color
section" and "iphone wrapper"
content which run inside the phone implement as a part of the
underlying body of the page
so the blue section + iphone wrapper will work as a overlay while the
content of the iphone scroll below this section
and using js/jquery you can reset the position fixed to relative
after the end of that content.
You can try out ScrollMagic that might help you. It has really detailed doc's and well support by author on https://github.com/janpaepke/ScrollMagic
Related
I am trying to achieve the effect of an div scrolling until it reaches the top and just stays there.
I have achieved this with:
HTML
<div id="nav">this is nav</div>
<div id="mooey">
<div id="theFixed" style="position:fixed; background-color:red">SOMETHING</div>
</div>
CSS
#mooey {
background: green;
min-height:250px;
margin-top:300px;
}
#nav {
background:#000000;
position:fixed;
top:0;
width:100%;
height:100px;
}
JavaScript
$(window).scroll(function(){
$("#theFixed").css("top", Math.max(100, 300 - $(this).scrollTop()));
});
What I want to do, Instead of stating that the div theFixed is fixed in the style in the HTML. I was wondering if there was a way of applying this using the code.
Reason being is that if the script isn't enables or fails for whatever reason - I want the theFixed div to scroll along with the mooey div rather than be stuck in the middle of the page.
You can see what I have done here:
http://jsfiddle.net/susannalarsen/4J5aj/7/
Any ideas for this?
Use $('#theFixed').css('position','fixed'); to pin it down.
<script>
$(document).ready(function(){
$("#FixedElement").css("position","fixed");
});
</script>
I didn't know what would be the best title for my question...
Well, I'll show what I want to do with a simple picture:
The issue:
I have my content centered, lets say it's 980px width.
Now, my header will have a logo and a menu.
BUT, I want my header to
use only a left side of the top, like 50% of the content width and
then stretch to the left side of the viewport. I know this is
possible using javascript and calculate the left offset of the
content and set the dynamic width div with it's left offset.
Is it the best way? I believe there should be another way, but I can't think of one. Hope you guys have a better idea than mine, since mine slows down the perfomance of the site when I resize the window.
Maybe have 2 divs; one in the background and one to contain the logo?
http://jsfiddle.net/kUKyp/1/
I believe what you are after is margin:auto in CSS. It's very simple:
Put your content div on the page, with a fixed width of say 980px as you wanted and set margin:auto.
Put your logo and menu div inside content.
Here is a good example of this in action:
http://bluerobot.com/web/css/center1.html
The CSS code from the above page:
body {
margin:50px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */
text-align:center; /* Hack for IE5/Win */
}
#Content {
width:500px;
margin:0px auto; /* Right and left margin widths set to "auto" */
text-align:left; /* Counteract to IE5/Win Hack */
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
And the markup:
<body>
<div id="Content"></div>
</body>
Using twitter bootstraps fluid layouts
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<div class="span6"> (6 for half of the width, number can be changed 1-12) your logo and menu
</div>
your content
</div>
</div>
So I have a page layout that has a main content container div that is position relative. With in this container I have two other layout divs, one acting as a side bar the other acting as a content container that can scroll up and down. This div also has a heading bar that must remain in place when you scroll through this div. If I fix the position the heading bar it will stay in place with out a problem as long as you scroll with in that container. If you scroll the entire window though (outside the wrapper div) the header bar scrolls along with it. I know why this is happening but would like to know if there is a way to fix it or prevent this behavior. I do not mind using Javascript to do so either. I understand that that fixed positioning only makes the element fixed to its parent container.
This is most likely hard to understand at least lay out wise through just text so here is a very simple example fiddle of just some mark up showing which items are fixed and how they are sort of laid out. http://jsfiddle.net/gvNqv/
Thanks a bunch for any possible help with this!
EDIT: Adding code from fiddle here
.maincontent{
position:relative;
width:760px;
}
.sidebar{
float:left;
}
.stage{
float:right;
position:relative;
}
.headbar{
position:fixed;
}
<div class="wrapper">
<div class="mainContent">
<div class="sideBar"></div>
<div class="stage">
<div class="headbar">banner text</div>
</div>
</div>
</div>
enter code here
Don't you need to use top, left, bottom or right for it to get fixed to something?
Hi I'm looking help with a mobile site I'm developing. I'm trying to get a page with a toolbar at the top of the screen that has previous and next buttons, with most of the viewport displaying an iframe containing 3rd party websites.
I have a few issues getting this working. The first is to have the toolbar fixed at the top. Mobile browsers don't natively support fixed positioning so I've achieved a workable solution where I move the toolbar back to the top of the screen with the window.onresize event. I can't move the div while scrolling as mobile browsers disable DOM rendering between the touchstart and touchend events.
The main issue I am now having is that the div toolbar displays correctly at the top however the iframe is zoomed to the top left corner of the site it has loaded. You cannot zoom out at all. You can only zoom in further and pan the site. You can only really view the iframe site in 100% of the viewport when it's loaded by itself.
Here's a wireframe of what I want to achieve..
Any help would be much appreciated!
Here's an idea of the code I'm using to achieve this..
There's also javascript that modifies the top and left css values of #wrapper when you scroll the screen using the window.onresize event.
<html>
<head>
<meta
name="viewport"
content="width=device-width;
initial-scale=1;
maximum-scale=1;
minimum-scale=1;
user-scalable=yes;"
/>
</head>
<body>
<div id="wrapper" style="width:320px;top:0;height:86px; position:absolute; z-index:1000; background-color:#FFFFFF; border-bottom:5px solid #4B90B7;">
<!-- Header markup -->
</div>
<div id="iframe" style="height: 750px;position:absolute; top:100px; width:100%" >
<iframe style="width:100%; height:100%">
<!-- iframe -->
</iframe>
</body>
</html>
I'm sure you've moved on by now, but for anyone Googling, I ended up dealing with a similar situation by applying CSS Scale. Re-positioning was a total nightmare, but you can get it to work. This works on an inline scrollview, and I assume it would work on an iframe:
Question/answer here: Scale HTML content using JQuery Mobile & Phonegap
Additionally, it may be worth looking into ChildBrowser vs. iframe. I'm experimenting with it now, but so far it looks useful:
https://github.com/alunny/ChildBrowser
Hope this can help someone!
Just thought I'd chip in another way to do a "fixed" position element in mobile browsers. You can simply give the content element a height and overflow: auto. Make sure the sum of the heights of the fixed header and the content element equals the page height.
<div id="page">
<div id="header">fixed header</div>
<div id="content">...</div>
</div>
#page {
position:relative;
}
#header {
position: absolute;
height: 1.5em;
}
#content {
top: 1.5em;
position:relative;
overflow: auto;
height: 400px;
}
Example: http://jsfiddle.net/william/BWA7j/
How can I create a DIV block that always stays at the bottom of my page? When scrolling more content should show up right above the block. The only solution i can think of is to use 2 iframes but I prefer using CSS.
Update: The solution needs to work on iOS
Here's some CSS:
.bottomFixed {
position:fixed;
bottom: 0;
/* technically not necessary, but helps to see */
background-color: yellow;
padding: 10px;
}
Here's some HTML:
<div class="bottomFixed">Hello, world!</div>
This div would be placed at the bottom of the screen and stay there. Note: this won't work on iOS because of the way it does scrolling.
div.bottom {
position:fixed;
}
Then just move it where you want. Unfortunately, browser support is limited. IE6 for example doesn't support this option for position. Also note that this removes the div from the flow, so you'll have to make sure there's enough space for the viewer to see stuff at the bottom of the page with the div on top.