Keep div on top when scrolling but keep margin - javascript

title is a little bit stupid. I have a page, probably full of errors. Either way, there's a Navi and a text box. Navi left, text box right.
Navi shall scroll up until it raches top of the window and then stay there. I got that to work so far. Copied and used codes I found, since I am a noob in Javascript.
Something happens to the text box though, just at the moment when the Navi changes from relative to fixed position. The text box ignores the Navi and just writes over it.
I had the Navi on fixed before I used the stick to top script and it all worked fine.
Here's the page:
http://test.pluskat.de/StuckWeit/
Ignore background image.
What to do or what to change? I am totally confused myself by now with all the positioning.
Please help. Remember I'm a noob in Javascript. I might be able to follow you, but please describe what is to be done, so others might be able to learn from it too.
Thank You. You guys are my last hope.

To fix this issue you could try adding below style at the end of the style.css file.
#wrapper
{
width: 1024px; /*Add this if you have fixed width layout else ignore*/
position: relative;
}
#textbox
{
position: absolute;
left: 220px;
height: auto;
}

This is how fixed position works: it takes the element out of the document flow. That's why your div occupies the whole width.
You could try to add a class (i.e. "nav-positioned") to a common container element instead of changeing the position property in your JS.
After you can style .nav-positioned .navi1 and .nav-positioned #Text

Related

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.

JQuery UI Slide pushes elements down, other solutions don't seem to work

EDIT: Whoops I forgot to have the console open to clear the cache when working on my actual project. Previous solutions and the ones you suggested work just fine. Thanks guys
So I'm trying to have something slide out while something else inline stays stationary. However, the sliding pushes other elements below downwards.
Here is the basic HTML:
<div id="title-container">
<h1 class="inline-header">Example.</h1>
<h1 id="sliding-text" class="inline-header">slide</h1>
</div>
<button id="slideButton">SLIDE</button>
I tried other solutions I found through searching, but they don't seem to work. For ex, giving the outside container a fixed height with overflow hidden, will prevent the slide from pushing outside elements down, but pushes the left (static) text upwards as the right side goes down. Here is a JSFiddle showing what happens in my orig code.
https://jsfiddle.net/9hj6y79k/11/
Essentially I just want the right side to slide out without moving anything else.
I would like the position to stay as relative (rather than switching it all to absolute positioning), but if switching to absolute is the best way to do it I would not be opposed. Could anybody help out? Thanks!
You will need to add overflow:hidden; in css
https://jsfiddle.net/9hj6y79k/12/
.inline-header {
display: inline-block;overflow:hidden;
}
#title-container {
position: relative;
left: 40%;
}
Change your css class to this:
.inline-header {
display: inline-block;
vertical-align: top;
}
https://jsfiddle.net/9hj6y79k/13/

Bootstrap Collapse over an element

I'm using Bootstrap 3 to make a responsive website. However, I'm making a "portfolio".
You can see the website here as well as my "error".
http://basic-models.com/b/
Scroll down to "Our models" and click on "Informations". When you click on that button, it will collapse a new element below the profile picture of a model.
But that collapsible element is pushing the picture below the element to right for one column.
I guess I don't have to place code here since you can just right click > source code it.
Also, this is my first question on Stack Overflow, so I'm sorry if it is not formatted properly. Thank you for all the help.
You can change the CSS position attribute of the collapsing div to absolute. That way, the element will float over the below item - but you`ll have to apply styles a bit.
Try it like that:
.model-outer div.collapse {
position: absolute;
z-index: 1000;
background-color: white;
width:100%;
left:0px;
margin-top:10px;
}
You see, positioning and styles are not that good, but I assume you can start from there.
Since you are already using Bootstrap, I would suggest you to use default bootstrap dropdown . The problem with current code is that the div which shows the information is not absolutely positioned. So, whenever that div is displayed, it takes up the extra space and breaks the layout of the grid. Bootstrap dropdown uses absolute positioned div and hence it doesn't break the layout. Try using it and it will definitely solve this issue.

Trying to integrate the mmenu.js(off canvas menu) into my site, having trouble with my sticky footer

I'm trying to add a off canvas menu into my site and the one I picked was the mmenu(http://mmenu.frebsite.nl/index.php). Everything else other then my footer works. I have a sticky footer in the site and every time the menu is clicked open the footer flys out of position.
For a fixed footer, add the class mm-fixed-bottom:
id="footer" class="mm-fixed-bottom">Goodbye<
Example: http://jsfiddle.net/1eddy87/Lx5ps/1/
I have tried the documented way which says you should use "mm-fixed-bottom" for any fixed elements, however that didn't do the trick.
Documentation: http://mmenu.frebsite.nl/tutorial.php
scroll to the bottom of the page and then open the menu via the header and you will see the footer move out of position.
any ideas??
I realize that I am using absolute, and not fixed. Its a requirement for the sticky footer(http://mystrd.at/modern-clean-css-sticky-footer/). I tried to fix my way through hoping that the mm-fixed-bottom would work, however it didn't. I need a fix for using the absolute.
You've got position:absolute on the footer when it's supposed to be fixed. You're also overwriting the CSS from mm-fixed-bottom. I thought the whole reason for a sticky footer is for it to stay at the bottom of the screen and not move.
I removed all positioning and it worked.
http://jsfiddle.net/Lx5ps/3/
Solution found:
On further inspection, looks like the library changes <div class="mm-page"> to height:100% which screws with height:auto. I toggled it off in browser inspector and it works.
Changed this:
html.mm-opened .mm-page {
height: auto;
overflow: hidden;
position: absolute;
}
http://jsfiddle.net/Lx5ps/4/
Just been having the same problem but I came up with using css calc.
html.mm-opened .mm-page {
height: -webkit-calc(100% - 320px);
height: -moz-calc(100% - 320px);
height: calc(100% - 320px);}
320px being the height of the footer. Calc is pretty well supported. See calc browser support

Nivo Slider Thumbnail / ControlNav not positioning inside slider

This is the first time i'm trying out Nivo Slider, so bear with me here --
I'm trying to position my controlNav thumbnails INSIDE the slider (I want it in the center, 15px from the bottom of the slider), but so far using position:absolute and left and top attributes just make the entire positioning of the thumbnails position around the body instead of the slider.
Am I doing something wrong? I'm looking online for solutions but I just can't find any. Maybe I'm searching for the wrong keywords?
The site I'm testing it out with is [link removed]. I've reset the thumbnails to the original centered below slider layout, if you want to fiddle with it inside the console it'll be easier.
If when you say "thumbnails", you mean the small pager icons then you can change the css to:
#front-showcase .nivo-controlNav {
z-index: 10;
position: relative;
bottom: 40px;
}
Here I removed display:block and you can adjust the 40px to what ever will suit your layout needs.
In your CSS, set the positioning properties on .nivo-control instead of nivo-controlNAV.
This worked for me by adding to your <head>:
<style type="text/css">
.nivo-control {
position:relative;
top:-45px;
}
</style>
Ah, looks like i've found the answer with help from #aditya and #mToce's answers.
Seems that I forgot about positioning the #front-showcase as a relative element, thus making the controlNav position itself with the body element instead of the slider element.
For more information, read this :
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
I've solved the thing by entering position:relative; inside my #front-showcase, and entering position:absolute; inside .controlNav.
Hope this helps!

Categories