I've got a twitter bootstrap parallax template (purchased) - specifically regarding the nav bar, the way it currently works is when you click a nav menu item, the nav bar scrolls up with the rest of the site, then reappears further down the page and remains fixed at the top. What I'd like is for it to not scroll up in the first instance, and just remain fixed at the top the whole time.
This is the site in testing:
http://realestatemediafactory.com/test/
One thing I did try was wrapping the entire nav bar in the code below:
<div data-spy="affix" data-offset-top="160">
But the result was messy, and I figured it better to switch off/modify the code causing the scroll rather than try to cancel it out with more code...
Unsure whether this is controlled by css or jquery, so have not copied any of my code here... whatever's needed I'm happy to paste here.
Thanks guys!!
I don't know if I understand correctly your question and if this will help you
With firebug I tried to edit the css code
Search in your css code this selector and try to modify it so
.navbar-fixed-top .navbar-inner, .navbar-static-top .navbar-inner {
background: url("../img/line_bg.png") repeat scroll left top rgba(0, 0, 0, 0.3);
border-bottom: medium none;
box-shadow: none;
filter: none;
padding-bottom: 10px;
padding-top: 10px;
position: fixed;
transition: padding 0.5s ease-in-out 0s;
width: 100%;
z-index: 1030;
}
With this modification, the navigation bar should always remain fixed at the top
Again: i've only tried with firebug so I'm not sure of the result
If this solution does not suit your needs, i apologize for making you lose time.
Mate thank you very much for your help - I did try that and it solved the problem for the most part, but there was still a positioning issue. I actually found there were two css classes for the header, one fixed and one scrolling, which were controlled by a script which switched between them depending on the position of the page. I turned off the script and that has solved the problem. The script I switched off is below. Thanks again for your help!
<script>
var navbar = jQuery('#navbartop');
var navbartop = jQuery('#topnavbar');
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 640) {
navbar.addClass("navbar-scroll");
navbartop.removeClass("navbar-static-top");
navbartop.addClass("navbar-fixed-top");
} else {
navbar.removeClass("navbar-scroll");
navbartop.removeClass("navbar-fixed-top");
navbartop.addClass("navbar-static-top");
}
});
</script>
Related
I have a blogger blog, and I need to know how to have the footer entirely cover the bottom of the page. When you scroll to the bottom, there is a small gap between the content container which is obviously black, and the bottom of the browser window. How do I fix this? How do I make the content container stretch to the bottom of the page entirely?
http://blog.substructures.us/
You can use
.content{
heigth : 100%;
padding : 5px;
margin : 5px;
}
Changing CSS for .content-inner to this will work although there might be a better solution available, so keep looking at answers in this thread.
.content-inner {
margin-top: -20px !important;
min-height: 100vh;
}
I experimented with the answer Dr. Geek gave me, and had a problem with a horizontal scrollbar appearing at the bottom and throwing the pages setup off from the main setup, so I added this to the custom CSS for now:
.content{
margin-bottom: -1px;
}
It's a very simple fix, and anyone who uses blogger and wants to remove a gap from the bottom of their blog will have this answer hopefully.
I'm trying to use the Bootstrap affix() plugin. I want the navbar to pin to the top of the screen when I scroll. here is what i have so far:
http://jsfiddle.net/zncud7md/2/
The issue is the content below navbar shifts (tiny bit of inch downwards) when the affix class triggers in. I even tried adding the:
#header.affix + #body { padding-top: 75px; } that i found on other sources but didnt work for me.
I'm unable to find a way around this. Any ideas how can i prevent this issue??
Thanks!!
Bootstrap affix acts like sticky positioning so that if you scroll, you can have an element stick to a fixed position (http://getbootstrap.com/javascript/#affix).
Instead, you can simplify your code by setting your header position to fixed at top:0 and pad the top of your body.
#header {
position: fixed;
top: 0;
z-index: 9999;
}
#body {
padding-top: 75px;
}
http://jsfiddle.net/zncud7md/4/
Whenever i re-size my window the slider buttons (next/previous) disappear and do not move with the slider. Any idea on how to fix this?
JSFIDDLE:https://jsfiddle.net/b31kvqwr/
Buttons CSS:
#nav img {
position: absolute;
top: -10px;
cursor:pointer;
color:grey;
width:40px;
height:30px;
}
#prev {
margin-left: 530px;
font-size: 10px;
}
#next {
right: -30px;
margin-top: 13px;
}
PS: if the result in the jsfiddle doesn't show, expand the result tab.
This is how the slider looks like when full screen (the right way);
This what happens when i re-size the browser horizontally:
The buttons aren't moving with the slider. Any help please?
The problem at the moment is that you are using margin-left:530px; meaning that the arrows will always be 530px from the left of the screen no matter the size of the screen. It also looks like what ever is wrapping it has a set width and isn't resizing, your code was to messy for me to find this but there are a few thing that I found to make the problem a little better,
https://jsfiddle.net/b31kvqwr/2/
I have managed to keep it the correct place for a lot of the, however to improve get it working perfectly you will need to create 1-2 #mediaqueries to tweet the alignments at different sizes to make it perfect.
The way I did this was by changing margin-left to position:absolute and use a left positioning instead on your prev and next buttons;
#prev {
left: 50%;
font-size: 10px;
position:absolute;
}
#next {
margin-top: 13px;
left:58%;
position:absolute;
}
As I side note I would recommend cleaning up your code like #TingGaint said as it is insanely messy. Also when posting on stack try only include the relevant code not all of it as it makes it quicker and easier to look through and help.
EDIT
I have found the problem, still do what I said above however now instead of have the arrows div where they are now, move them out and so there below <div id="wrapper"> however you will have to play around with the placement as they will be at the top of the screen. However now they stay in the same place when re-sizing!
Example - https://jsfiddle.net/b31kvqwr/4/
I am an awful web programmer trying to make a website for a school club. I'm using the fullcalendar plugin to display my Google calendar's events.
The trouble is, I'm using a lot of weird little tricks to get my sidebar to work, and I think that some of the css i'm using to get my divs to display in the proper places are preventing my calendar from displaying correctly. Right now, it's crammed at the top of my div (as you can see in the events tab). I just want the calendar to display beneath the header in my #events div.
I think the culprit lies somewhere in one of these css blocks:
.container div
{
opacity: 0;
position: absolute;
top: 0;
left: 0;
padding: 10px 40px;
overflow:hidden;
}
.container
{
font-family: Avant Garde,Avantgarde,Century Gothic,CenturyGothic,AppleGothic,sans-serif;
width:80%;
min-height: 100%;
left:20%;
background-color: #ffffff;
position: relative;
box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
border-radius: 0 3px 3px 3px;
overflow-x:hidden;
overflow-y:scroll;
}
I play around with the "position:absolute" in .container div, but that just makes all of my divs go haywire. I'm really, really new at this. If anyone can help me figure out why this isn't working or give me tips on how to manage my sidebar more intelligently, I would appreciate it.
The site is hosted here:
http://webbox.cs.du.edu/~samkern/DU-GDS/index.php
Also, if any clarifications are needed, please ask. I hope I have given enough information.
I think I might have a sollution for you:
change
.container div {}
to
.container > div {}
What you're saying with .container div {}, is that ALL divs within the .container must have that style. This is apparently not what you want.
With .container > div, you only select the div's within the .container on the 1st level.
I.E.:
<div class="container">
<div> <!-- this div gets the styling from .container > div -->
<div> <!-- this div doesn't get styling from .container > div --> </div>
</div>
</div>
I hope I made this clear for you.
Give a height to your div, either in the HTML initially, or in the JavaScript when that populates the div with something. Since the page starts up with nothing much in the div it doesn't have any height. Later the JavaScript is adding content, but that won't change the height, so scroll bars appear instead and everything is out of sight. So give it enough height to hold all the content (use em units for the height, rather than px units, so it won't matter what text height your users are using).
Also check out your JavaScript syntax - there's an unwanted comma I think in the $(document.ready()) function, for instance, which should stop that bit of code running.
Also correct your HTML (run it through an HTML validator - there's several around). The errors aren't causing your particular problem, but needs cleaning up nevertheless. It needs a DOCTYPE eg for HTML5. The link to normalize.css should be in an href not an src attribute, and the for attributes in your labels don't all point to field names.
I found this great plugin called onepage-scroll, which meets my needs, except for one thing. Some of my pages (<section> tags) can be larger than one screen. How can I customize it so that it only scrolls when it finished the "regular" scrolling, inside the section ?
I tried to change the css rule :
.onepage-wrapper {
width: 100%;
/*height: 100%;*/
height:200%;
display: block;
position: relative;
padding: 0;
-webkit-transform-style: preserve-3d;
}
but it still scrolls to the next page, with one scroll movement.
I'm trying to make it scroll to the bottom of the section (height > 100%), then scroll to the next page.
Any help will be appreciated. Thanks !
You may want to use fullPage.js instead. There's an option called scrollOverflow which allow you to have scrolling inside section as you can see in this example
While it's a less ideal solution, we ran into the same issue and found that using an iframe works with jquery onepage scroller as a solution for providing this.