We Keep Coding

Fullpage.js with background colour fade

Hi I'm trying to get 2 plugins to work so that when you scroll there's a 'slide' transition from one full page container to another along with a background color fade transition.
Plugins
Magic scrolling colour
http://codepen.io/daveredfern/pen/zBGBJV
Fullpage.js
http://alvarotrigo.com/fullPage/
However the 'magic scrolling colour' doesnt seem to work if I contain all the ".panel" divs in any other tag/div other than - the issues is that I need a container div in order for fullpage.js to work.
Even if I change the background colour js to target that container div name
(i.e. )
$body = $('#fullpage') or $body = $('fullpage')
...it still won't work. I find it hard to believe it wouldn't work with anything between the variable divs and body tag.
I've mocked up an example of the issue here: https://codepen.io/anon/pen/qmbmMm
I would be grateful if you could offer any assistance!
Cheers

The problem is that you have
#fullpage {
background: #f4f4f4;
}
and
.color-indigo {
background-color: #4332CF;
}
In CSS ID's have a higher priority than classes, so it overrides the custom color always. Easy fix, change the classes to
#fullpage.color-indigo {
background-color: #4332CF;
}

The scroll event won't get fired in fullPage.js unless you use the fullPage.js options scrollBar:true or autoScrolling:false as detailed in the fullPage.js FAQs.
So, you need scroll bar in order to register the scroll event that is being used by Magic Scrolling Color.
If you do not want to use a scroll bar and just want to recreate a fading effect, I would encourage you to go for the fullPage.js Fading Effect extension.

Stickysidebar within container

Affix is giving me a hard time. I'm trying to create a sticky sidebar that only follows within the bounds of the container.
The sidebar should stick to the top of the screen as long as it's within the containing div.
See my horrible attempt here: http://codepen.io/icedice/pen/OMrPwz
I'm using $('#sidebar').affix();
Is this possible with affix or how do i proceed?

You need to use the offset.bottom option so that affix-bottom gets set on the sidebar...
$('#sidebar').affix({
offset: {
top: ..,
bottom: ..
}
});
http://codeply.com/go/sv7l3DDGtO

html5: link to the #id of a div at a certain point on the page

I have a responsive header that I'm working on for a site that turns into a fixed-position navbar as you scroll down. It takes up roughly the upper quarter of the page.
The content of the page is in a series of divs / cards that slide up as you scroll down.
I want to add <a href> links to the navbar that correspond to the ids of the divs. However, when I do so, the div content moves to the top of the page.
So I get something like the following when I navegate to /localhost#first_card
---- TOP OF PAGE
[<div id="first_card"> begins here]
---- bottom border of navbar
[<div id="first_card"> continues here]
when what I really want is this:
---- TOP OF PAGE
---- bottom border of navbar
[<div id="first_card"> begins here]
Is there a way to control where on the page the hash link might render the <div id="first_card"> after navigating to /localhost#first_card?

I've been trying to solve this for you in JSFiddle for a bit now, and from what I can find, the best way would be to box all the cards into a seperate element with overflow:auto
The result of this, and as proof of it working can be found at http://jsfiddle.net/Entoarox/TT2JN/
This may not work for your site, but the only alternative is using javascript to solve this and I cant recommend that because it would cause a massive load on the visitors PC due to most hash related javascript functionality being either static or very new, meaning that to support older browsers, you'd need to manually poll if the hash has changed, either taking up a lot of CPU time, or having a very slow response to when the hash has changed.

Try the jQuery scrollTop() command. This will give you the precise positioning that you need.
http://api.jquery.com/scrollTop/
You might have to change your links up a little. Example with jQuery and a wrapper div:
<a id="first-card-jump" href="#first_card">Jump to First Card</a>
<div id="wrapper">
NAVBAR
first div
second div
...
nth div
</div>
<script>
$('a#first-card-jump).on('click', function(event) {
event.preventDefault(); // Not sure if this is needed
$('div#wrapper).scrollTop(500); // you have to measure how far down you want to scroll
});
</script>
Note that this might mess up your in-page back button support. Not sure if that's an issue for you.
p.s. If you're in time trouble, the simplest fix is to add a top margin to each div equal to the height of the fixed navbar.
Hope this helps!

I made you a jsfiddle
it uses padding-top to create the offset to the top, then it uses margin-bottom to remove the offset between the elements.
the relevant css:
/*
add top padding and substract the same amount from bottom margin
*/
.card {
padding-top: 200px;
margin-bottom: -200px;
position: relative;
}
/*
we need to reverse the stacking for this solution, so the elements later in
the document don't cover the elements before
either you know how many cards you have, so you can solve this in a central
css file (like below)
or you must add the stacking upon creation (in your template)
or use the javascript
starts from 2 because nav is :nth-child(1) in this example
*/
.card:nth-child(2){
z-index: 0;
}
.card:nth-child(3){
z-index: -1;
}
.card:nth-child(4){
z-index: -2;
}
javascript to reverse the stacking, using jQuery
$(function(){ //on load
$('body>.card').each(function(i, elem){$(elem).css('z-index', -i)})
})

If I understand your question correctly, you want to make a div appear in the middle of the page, right? So, to do this, you can just direct the page to the div above it. You can also make another div above it with a fixed height.

I need help figuring out how to toggle an element once vertical height of window is scrolled

I'm trying to toggle a div from relative to fixed when I scroll down 200px using javascript. When I reach 200px from the top of the window, my div should toggle to fixed. And when I'm above that 200px from the top it should go back to relative. Does anyone have an idea on how to do this?

Something like:
$(window).on('scroll', function() {
$("#myDivID").css({
position: $(this).scrollTop()<200?'relative':'fixed',
top: $(this).scrollTop()<200?'200px':'0px'
});
});
You'll probably also have to reset the top position of the element.

I know there's at least a couple of plugins that do this. Can't remember the name of the one I saw last, but here's one I've written myself: http://code.google.com/p/sleekphp/source/browse/trunk/Sites/SleekBase/Modules/Base/JS/jQuery.fixedIfNeeded.js
You use it like so:
$('#my-element').fixedIfNeeded();
There's one optional argument that specifies if the element should stop being fixed before it reaches another element (like a footer for example):
$('#my-element').fixedIfNeeded('#footer');

JQuery resizeable and dragable divs positioning problems

I'm having trouble properly positioning some divs within a larger div and having them behave as I want.
The source and a preview is here: http://jsbin.com/usuniw/6/edit
Problem 1
When the hidden div is unhidden it appears under the div I want it to appear inside. Once the dive inside is resized (using a handle on the left hand side) it pops into place
Problem 2
When resizing the originally hidden div it moves outside the boundry of it's parent rather than aligning itself to the right-hand side of it.
Thanks for any help you can give.

At the moment, you have the #selectedResult element set as float right which is causing it to appear underneath the #ipad element.
If you get rid of the float:right on #selectedResult and instead set it to:
position: absolute;
right:0;
top:0;
And set the #ipad element to:
position:relative;
Then the element will be fixed to the top and right sides of its parent.
You can see an updated version of your example here: http://jsbin.com/uxavov/edit#preview