We Keep Coding

fullpage.js issue positioning navigation button

I am currently using the fullpage.js plugin for my website, I created a slide in navigation bar and I am now placing the pancake to open it on the first section of fullpage. I am trying to position it in the top left corner of the page, but I can't figure out how. Here is the code. Thanks in advance for your help.
<div class="section"><span style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span><h2 class="animated fadeInDown">GTX 1080</h2></div>
edit: here is all of my code: https://anotepad.com/notes/pjccfy
Image

You give me very little code to go by, but I'm assuming you want a similar navigation as on the fullPage.js demo page.
Using CSS:
.section {
position: fixed;
top: 0;
left: 0;
}
As I said, I have very little to go by so I don't even know if .section is the correct class to apply this positioning to. Would be great if you could provide a complete page. If you want the element to have some spacing between the browser borders, you can increase the values for top and left to say, 20px.

Strategy for dynamically changing the position of a footer using CSS in ExpressionEngine

so using ExpressionEngine, I can generate a lot of webpages using the same template with different content. My problem is that I can't get the footer to appear where I want it to appear: at the bottom of the background image for each separate webpage.
For example, say that one of my pages is about dogs and the other is about cats. I love dogs so I write two paragraphs about dogs while only writing one paragraph about cats. I would like for both the background image to grow and the footer to be relatively positioned at the bottom of the background image. I have tried messing with both relative and absolute positioning in css, but the minute that I get it right for the "dog" page, it screws up the format for the "cat" page. I have also tried to adjust the height of the background image.
Am I missing something? Maybe there is an easier way to position an object relative to another object in css that I am not aware of? Thanks in advance.
As I previously mentioned, this does NOT achieve the result that I would like:
#landing_details {
position: relative;
bottom: -20px;
left: 40px;
height: 900px;
}
#belowTitle {
position: relative;
bottom: 25px;
}
#landingBodyCopy {
width: 400px;
position: relative;
bottom: -50px;
}
#landing_footer {
position: relative;
left: 120px;
bottom: -105px;
}
These are both nested within a div id="wrapper" which I never reference in my css. The landing details is what changes per entry. Also, the landing_footer div is kept within the landing_details div.
UPDATE:
So the part that I highlighted in red represents the space that I would like to be eliminated from the page.
UPDATE: The basic html layout is as follows
{exp:channel:entries channel="landing_pages" url_title="{segment_2}" sort="asc" disable="categories|pagination"}
<div id="wrapper">
<link rel="stylesheet" type="text/css" media="all" href="{stylesheet='in-store-analytics/LandingBodyStyle'}" />
<div id="landing_details">
<h3 class="LandingHeader"> {landing_page_header} </h3>
<div id="belowTitle">
<h4 class="LandingSubTitle"> {landing_page_sub_title} </h4>
<div id="landingBodyCopy">
<div class="landingBodyCopyText"> {landing_body_copy} </div>
</div>
<div id="landing_footer">
{embed="embed/footer"}
</div> <!-- End of landing footer>
</div> <!--- End of below title-->
</div> <!-- End of the landing details -->
</div> <!-- END div wrapper -->
{/exp:channel:entries}
Thanks again and any help on this matter would be greatly appreciated.

If you do not absolutely position your footer, its default position value will be static, which means that it will naturally appear below ("at the bottom of", like you asked for) any statically or relatively positioned preceding elements, however many there may be, and however big they are.
As for the background image growing according to content length, any div whose height is not explicitly set will expand according to the size of its content. Therefore your two-paragraph content div about dogs will be larger than the one-paragraph page about cats. If there is a background image on the content div, the div will act as a window displaying a portion of the background depending on its size. More content -> bigger content div -> more of the background image displayed. This is possibly not what you mean by having the background image "grow", but it does effectively grow.
If you'd like to perform some kind of dynamic scaling on the bg image, you should be more specific about how you want that to work, since I'd only be guessing at your intent. As well, it would help people answer you if you can provide a barebones version of your rendered pages using jsFiddle or jsbin. Isolate the part of the layout that you want help with and mock it up.

Fixing the position of a div on webpage

I have a div whose position has been fixed. Everything is fine till the window is re-sized. On re-size, when we scroll to the rightmost part of the webpage, the fixed div still remains at the left-most end of screen. I wish it to scroll left along with the window, but not scroll down along with the window.
If I am unclear in expressing my doubt. You can have a live demo here.
Search for any product say Apple Ipod Touch there. Once the results are displayed , resize window and scroll to rightmost part .
Can anyone suggest some CSS or Javascript to resolve the same.
Thanks !

I would restructure your layout and remove position fixed. For example something like this. Obviously this isn't exactly like your code. But the concept is the same. If you have your div with the control inside of the same container as the results and the history, it should then move with it.
#wrapper {
width:960px;
margin:0 auto 0 auto;
}
#left-col,
#right-col {
width:100px;
float:left;
}
#mid-col {
width:710px;
float:left;
}
<!-- holds your column containers -->
<div id="wrapper">
<!-- your control -->
<div id="left-col">
</div>
<!-- your search results -->
<div id="mid-col">
</div>
<!-- your history -->
<div id="right-col">
</div>
</div>

Either use CSS Media Queries or Javascript. A quick way is on Jquery $(window).resize method.

I think you just need to remove
position: fixed from #completeSlider
at least that worked for me on chrome.
EDIT:
then I'd say you need to use JQuery to handle this. You can't have both a fixed positioning and still relative to other elements. Still remove position: fixed as mentioned above and add some JQuery magic like follows:
$(window).scroll(function() {
$('#completeSlider').offset({ top: $(window).scrollTop(), left: 0});
});
Seems like the standard $ for jQuery is reserved for some other function on your page... try this:
jQuery(window).scroll(function() {
jQuery('#completeSlider').offset({ top: jQuery(window).scrollTop(), left: 0});
});

Fluid Elements and Overflow Question

So here's a stump I've hit.
I'm designing a... Thing. It sizes itself to the browser window, with some controls at the top and a rather large list near the bottom. Anyways, it's basically a table cell that sizes with the browser window, whos size is the document size - 130px in height, and document size - 50px in width. What I want it to do, is when the list of stuff inside that cell is bigger then the cell, it to become scrolly using css's overflow: auto.
The problem, is that I can't get it to do that, only make the entire document scrolly. Currently, the cell has no properties aside from valign:top, and it has a single div in it (to which the list elements are written), and it's set to overflow:auto. However, it's just scales up the entire document when the list becomes to long.
I don't want to give it a static size since it sizes with the page.
Any ideas?
Thanks!
-Dave

I'm not sure I understand correctly, but here's a try that may give you ideas.
<head>
<title>Test</title>
<style>
div.outer {
background-color: red;
position: absolute;
top: 40px;
bottom: 40px;
left: 40px;
right: 40px;
}
div.inner {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
background-color: aqua;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.
You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly.
To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command. Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template.
</div>
</div>
</body>

The solution of buti-oxa is very nice, but doesn't work in Internet Explorer.
For a cross-browser solution, you need to assign a fixed height to the div that contains the list. You can't do it using only css, because the height to assign depends from the height of the browser window.
But you can use a simple javascript function to dinamically assign the height to the div.
Here is an example, using jQuery:
function resizeDiv(){
var h = $(window).height(); //maybe the window height minus the header and footer height...
$("#yourDivId").css("height", h + "px");
}
You should call this function when the page is loaded and when the user resizes the window:
$(document).ready(function(){
resizeDiv();
$(window).resize(function(){
resizeDiv();
});
});
You can see this in action in this demo page I posted (resize window to test):
http://www.meiaweb.com/test/BMS_DM_NI/

if I m not wrong and your content is only text you can add wrap property although this dosen't work in firefox u can add wbr to your text

I think you should consider fluid layout design patterns.
Couple of tips:
MediaQueries
Use % instead of fixed values like px

I think an iFrame would help. Put your 'thing' into a base URL, and then use another page with an iFrame to load it. As the 'thing' goes crazy in size, the scroll bars appear, but your outer page is not effected.
An old fashion frame should work too, but iFrames are just more fun ....

How to set up the browser scrollbar to scroll part of a page?

I've seen this done in a few sites, an example is artofadambetts.com. The scroll bar on the page scrolls only an element of the page, not the entire page. I looked at the source and havent't been able to figure it out yet. How is this done?

That's pretty nifty. He uses "position:fixed" on most of the divs, and the one that scrolls is the one that doesn't have it.

In fact it is not the scrolling part that is "doing the job", it is the fixed part of the page.
In order to do this, you should use CSS and add position: fixed; property (use it with top, bottom, left and/or right properties) to the elements that you wish not to scroll.
And you should not forget to give them a greater z-index, if you don't there might be some of the scrolling element that can go over your fixed element as you scroll (and you certainly don't want that).

To find out how people do these kinds of things in CSS and/or Javascript the tool Firebug is just outstanding:
Firebug addon for Firefox

It should be noted that without further hacks position fixed does not work for IE6, which is still managing to hold on to 15-30% of the market, depending on your site.

You can use fixed positioning or absolute positioning to tie various elements to fixed positions on the page. Alternatively you can specify a fixed size element (such as a DIV) and use overflow: scroll to force the scrollbars on that.
As already mentioned, getting everything to work in Internet Explorer AND Firefox/Opera/Safari requires judicious use of hacks.

This can be done in CSS using the "position:absolute;" clause
Here is an example template:
http://www.demusdesign.com/bipolar/index.html
From http://www.demusdesign.com/

The browser is scrolling the page, its just that part of it is fixed in position.
This is done by using the "position: fixed" CSS property on the part that you wish not to scroll.

They've set the side and top elements to have fixed positions via CSS (see line 94 of their style.css file). This holds them in the viewport while the rest scrolls.

Try this for scrolling a particular part of web page......
<html>
<head>
<title>Separately Scrolled Area Demo</title>
</head>
<body>
<div style="width: 100px; border-style: solid">
<div style="overflow: auto; width: 100px; height: 100px">
sumit..................
amit...................
mrinal.................
nitesh................
maneesh................
raghav...................
hitesh...................
deshpande................
sidarth....................
mayank.....................
santanu....................
sahil......................
malhan.....................
rajib.....................
</div>
</div>
</body>
</html>

For a div, you can add in the cSS
overflow: auto
For example,
<div style="overflow:auto; height: 500px">Some really long text</div>
Edit: After looking at the site you posted, you probably don't want this. What he does in his website is make the layout as fixed (position: fixed) and assigns it a higher z-index than the text, which is lower z-index.
For example:
<div class="highz"> //Put random stuff here. it'll be fixed </div>
<div class="lowz"> Put stuff here you want to scroll and position it.&lt/div>
with css file
div.highz {position: fixed; z-index: 2;}
div.lowz {position: fixed; z-index: 1;}

To put scroll bars on an element such as a div:
<div style="overflow-x: auto; overflow-y: auto;>the content</div>
If you only want a horizontal or vertical scroll bar, only use whichever of overflow-x and overflow-y you need.