10 Replies - 767 Views - Last Post: 09 November 2012 - 05:30 AM

#1 drodriguez  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 93
  • Joined: 03-October 12

moving div with page

Posted 09 November 2012 - 01:54 AM

i already know how to move a div when a user scrolls. what i want to be able to do is once the page passes a certain point begin to move the div upwards to take up the blank space left by the header since, in its original position, it does not overlay the header. the reason i need this is because if the browser window is too small it cuts the div off towards the bottom and since its fixed it scrolls with the window never showing the cut off portion of the div. i am currently using media queries to use fixed/relative positions depending on the height of the browsers window as an ugly way to fix the problem such as:

@media screen and (min-height:600px)
{
#fixednav
{  
width:270px;
position:fixed;
} 
}

@media screen and (max-height:600px)
{
#fixednav
{  
width:270px;
position:relative;
} 
}



im pretty sure this can be fixed with javascript or something of the sort. any tutorials out there on how to do this? thanks in advance.

Is This A Good Question/Topic? 0
  • +

Replies To: moving div with page

#2 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: moving div with page

Posted 09 November 2012 - 02:29 AM

Hello there,

I think I understand what you are after, so I have prepared a small example for you to try and explain a very simple way of achieving what you are after with some Javascript. I've included comments all over to explain the process and help you get an understanding of how it works.
<script>
	function getScrollY() // A small function to get the scrollY coord.
	{
		if (window.pageYOffset) // Is this value available?
			return window.pageYOffset; // Return it.
		else if (document.documentElement.scrollTop) // How about this one?
			return document.documentElement.scrollTop; // Return that.
		else if (document.body.scrollTop) // A final hope.
			return document.body.scrollTop; // Return it!
	}
	
	function scrollEvent() // Scroll event function of doom
	{
		var floatingDiv = document.getElementById('myMagicalBox'); // Our DIV we want to make somewhat magical.
		
		if (getScrollY() > 50) // Have we scroll down 50px yet (the height of the header)
			floatingDiv.style.position = 'fixed'; // Unattach the DIV and make it fixed.
		else
			floatingDiv.style.position = 'relative'; // Attach the DIV back to it's parent.
	}
	
	window.onscroll = scrollEvent; // Hook our above function to the onscroll event.
</script>

<style>	
	* /* This is here to make the example easier */
	{
		padding: 0;
		margin: 0;
	}
	
	#myMagicalBox /* Our floating DIV */
	{
		background-color: red;
		width: 1100px;
		height: 50px;
		left: 0; /* This is defined so when we fix the DIV, it dosn't have an offset similar to it's relative position in it's parent */
		top: 0; /* This is defined so when we fix the DIV, it dosn't have an offset similar to it's relative position in it's parent */
	}
	
	#header /* The header */
	{
		background-color: blue;
		width: 1100px;
		height: 50px;
	}
	
	#someContent /* This is here merely to make the page scrollable. */
	{
		height: 2000px;
		width: 100%;
	}
</style>

<div id="someContent">
	<div id="header"></div>
	<div id="myMagicalBox"></div>
</div>


Basically, what happens is we put the DIV where we want it to be normally and then hook an event to detect when the user scrolls. If the user scrolls more than the height of the header, we set the position of the DIV to fixed. If we scroll back up, we return it to it's previous position.

Remember, the code above is to be used as reference and only a fool would copy and paste it into his/her application and expect it to work.
Was This Post Helpful? 1
  • +
  • -

#3 drodriguez  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 93
  • Joined: 03-October 12

Re: moving div with page

Posted 09 November 2012 - 03:38 AM

i honestly cannot express the amount of love i have for you right now (no homo). it worked like a charm. i had two minor issues one of which i still have but its so insignificant i could care less about it. the first was it stayed in the same spot and not at the top like i wanted it to so to fix it i added floatingDiv.style.top = '5px' the only other issue i have is if i scroll down and then scroll back up to the top the div is not in the original position. it seems to be off by about 5px from the top. not even close to being easily recognizable. i only noticed it when i hit refresh the div moves up about 5px. any idea as to how to fix this? if not like i said its off by such an insignificant amount and the majority of visitors would probably never notice it.

function scrollEvent() // Scroll event function of doom
	{
		var floatingDiv = document.getElementById('fixednav'); // Our DIV we want to make somewhat magical.
		
		if (getScrollY() > 50) // Have we scroll down 50px yet (the height of the header)
			floatingDiv.style.position = 'fixed'; // Unattach the DIV and make it fixed.
		else
			floatingDiv.style.position = 'relative'; // Attach the DIV back to it's parent.
                        floatingDiv.style.top = '5px'; // ADDED THIS TO PUSH THE DIV DOWN SLIGHTLY FROM TOP
	}



p.s. thank you for the in depth explanation. ive been looking for something like this for a while now. =)
Was This Post Helpful? 0
  • +
  • -

#4 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: moving div with page

Posted 09 November 2012 - 03:45 AM

Hello again,

I can't say I noticed either of said issues, which browser are you noticing these in?
Was This Post Helpful? 0
  • +
  • -

#5 drodriguez  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 93
  • Joined: 03-October 12

Re: moving div with page

Posted 09 November 2012 - 03:58 AM

ie 9. i noticed you posted some css code in another one of my posts that would remove browser specific margins/padding so im going to try and add that and see if it does anything.
Was This Post Helpful? 0
  • +
  • -

#6 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: moving div with page

Posted 09 November 2012 - 03:59 AM

Let me know if it works out for you!

This post has been edited by Kruithne: 09 November 2012 - 04:00 AM

Was This Post Helpful? 0
  • +
  • -

#7 drodriguez  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 93
  • Joined: 03-October 12

Re: moving div with page

Posted 09 November 2012 - 04:14 AM

ok i just added the css to remove browser specific margins/padding and it didnt change anything. im guessing because ie9 didnt already have any specific default margins or paddings. im still have the issue of the div being off by 5px upon returning to the top of the page. it only happens after i have added

floatingDiv.style.top = '5px';



i also attempted to add another if statement to return it back to normal after reaching the top. im not sure if im doing this right but its not working for me. this is what i have tried.

if (getScrollY() > 250)
	floatingDiv.style.position = 'fixed';
else
	floatingDiv.style.position = 'relative';
        floatingDiv.style.top = '5px';
//ADDED THE FOLLOWING CODE
if (getScrollY() == 0)
        floatingDiv.style.top = '0px';



still no luck. ill continue to trouble shoot
Was This Post Helpful? 0
  • +
  • -

#8 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: moving div with page

Posted 09 November 2012 - 04:19 AM

There should be no need to add another scope to the if statement, the already existing else part will take care of that. Every time you scroll, if it is lower than 250 then we run what's in that scope.

Bare in mind if you have more than one line of code in a scope you will need to use scope brackets otherwise it will treat it as outside the scope past one line.

If you're trying to add the extra 5px to it when it's floating, you've got it in the wrong part of the statement as well, let's try this...

if (getScrollY() > 250)
{
	floatingDiv.style.position = 'fixed';
	floatingDiv.style.top = '5px'; // Add that extra bit
}
else // This will trigger if the scroll is lower than 250
{
	floatingDiv.style.position = 'relative';
	floatingDiv.style.top = '0px'; // Remove that extra bit.
}

Was This Post Helpful? 1
  • +
  • -

#9 drodriguez  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 93
  • Joined: 03-October 12

Re: moving div with page

Posted 09 November 2012 - 04:26 AM

i didnt realize that for more lines of code than 1 i needed the brackets. still new to javascript. so im guessing that it was ignoring that second line of code? once i added those and changed around the 5px, once i stared at it for a second i realized the error of my ways lol, it works great with no bugs. it seems to be going back to its original position. thanks again =)
Was This Post Helpful? 0
  • +
  • -

#10 Kruithne  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 99
  • View blog
  • Posts: 442
  • Joined: 28-July 09

Re: moving div with page

Posted 09 November 2012 - 04:31 AM

As far as I know all languages (that use the curly brackets, obviously) will allow you to leave them out if it's just one line of code. It's a good thing to get into the swing of using because having just one line of code does not warrant a visible scope, where as when you have fifty (bad idea to have that much in a scope anyway) it's much easier to tell what's happening.

On the subject of things in this nature, check out short hand statements (ternary) here. The article is for PHP but the concept crosses into Javascript also.
Was This Post Helpful? 0
  • +
  • -

#11 drodriguez  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 93
  • Joined: 03-October 12

Re: moving div with page

Posted 09 November 2012 - 05:30 AM

no issues here just wanted to post my handy work. and maybe theres a better way to do this but it works for me. i added code to the js to basically get the div height and window height and if the difference between the two is less than 10px then to set the div to relative. in other words if the browser height isnt large enough to house the fixed div then to prevent part of it being cut off i set the if to make it relative.

	function scrollEvent() // Scroll event function of doom
	{
		var floatingDiv = document.getElementById('fixednav'); // Our DIV we want to make somewhat magical.
		var divheight = document.getElementById('fixednav').offsetHeight; // get div height
		var windowheight = window.innerHeight; // get window height
                var windowdif = windowheight - divheight; // figure the difference between the two
                     if (windowdif > 10)  // if the difference is greater than 10 ie tall enough to house the div
		     {
			if (getScrollY() > 250)
			{
				floatingDiv.style.position = 'fixed';
				floatingDiv.style.top = '5px'; // Add that extra bit
			}
			else // This will trigger if the scroll is lower than 250
			{
				floatingDiv.style.position = 'relative';
				floatingDiv.style.top = '0px'; // Remove that extra bit.
			}
                     }
                     else // if difference between heights is less than 10 ie browser not tall enough to house div
                     {
                        floatingDiv.style.position = 'relative';
			floatingDiv.style.top = '0px';
                     }
                        
	}



i used 10 because im already offsetting the div by 5 px on scroll so i wanted a small buffer.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1