The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

How do you make a widget float and follow the page when you scroll?

2 posters

Go down

float - How do you make a widget float and follow the page when you scroll? Empty How do you make a widget float and follow the page when you scroll?

Post by Khalus Thu 22 Apr - 22:47

Hiya all, been working on a new info page for my Linkshell Forums, and I recently finished making an index box with anchors for each category which are a great help, but only if you're near the top of the page where the links are. I'm wondering if its possible and if someone could please provide me with the code to make the index box float up & down the page, staying visible when you scroll the forums, and where to place that code!?

Here is a link to the section of my forums I'm talking about, and I use version phpBB2...
avatar
Khalus
Forumember

Posts : 42
Reputation : 0
Language : English

Back to top Go down

float - How do you make a widget float and follow the page when you scroll? Empty Re: How do you make a widget float and follow the page when you scroll?

Post by ankillien Fri 23 Apr - 0:55

Hello,

You can do it with CSS. Please navigate to Admin CP > Display > Colors > CSS
Add this code there and submit...

Code:
.portal>tbody tr .column {
position : fixed;
top : 50px;
left : 50px;
width : 150px;
}
ankillien
ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

Back to top Go down

float - How do you make a widget float and follow the page when you scroll? Empty Re: How do you make a widget float and follow the page when you scroll?

Post by Khalus Fri 23 Apr - 2:09

Ah thankies, that works...kinda. However, now my actual Portal and Links page are messed up now, making all the widgets float there too which I don't want. I have 3 portal pages, one just Portal, a Links Portal and an Info Portal.

Here is the link to the Info portal where I'd like to only have that one "index" widget float if possible, should this be necessary for it to work how I'm trying to describing:

/portal.forum?pid=3sid=073a92782198026c7f0e176c36c5b170


Also when this code is applied it makes the index widget unrecognized in the left column, therefor making my center column not line up properly. While I was awaiting a response I added "back to top links" in each section that do a well enough job so if this is too much trouble, then what I came up with suffice. Thanks for the effort!
avatar
Khalus
Forumember

Posts : 42
Reputation : 0
Language : English

Back to top Go down

float - How do you make a widget float and follow the page when you scroll? Empty Re: How do you make a widget float and follow the page when you scroll?

Post by ankillien Fri 23 Apr - 2:39

You might need to change the whole code of the Index widget.

Create a new widget and set "Use a table type" to "No".
Now put the following code inside the "Widget source" area and save it.

Code:
<table style="position:fixed; top:50px; left:50px;" class="portal" width="100%" align="center" border="0" cellpadding="1" cellspacing="1"><tbody><tr><td class="column" valign="top" width="20%"> <table class="forumline" width="100%" border="0" cellpadding="0" cellspacing="1"><tbody><tr><td class="catLeft" height="25"><span class="genmed  module-title">Index</span></td></tr><tr><td class="row1" align="left"><div style="text-align: justify;"><ul><li><font size="2"><a style="font-family: Comic Sans MS;" href="http://eldritcheponym.rpgdynasty.com/portal.htm?pid=3&amp;sid=073a92782198026c7f0e176c36c5b170#MissionStatement">Mission Statement</a></font></li><li style="font-family: Comic Sans MS;"><font size="2"><a href="http://eldritcheponym.rpgdynasty.com/portal.htm?pid=3&amp;sid=073a92782198026c7f0e176c36c5b170#AboutEE">About
 Eldritch Eponym</a></font></li><li style="font-family: Comic Sans MS;"><font size="2"><a href="http://eldritcheponym.rpgdynasty.com/portal.htm?pid=3&amp;sid=073a92782198026c7f0e176c36c5b170#LinkshellGuidelines">Linkshell Guidelines</a></font></li><li style="font-family: Comic Sans MS;"><font size="2"><a href="http://eldritcheponym.rpgdynasty.com/portal.htm?pid=3&amp;sid=073a92782198026c7f0e176c36c5b170#FFXI&amp;FFXIVRules">FFXI &amp; FFXIV Rules</a></font></li><li style="font-family: Comic Sans MS;"><font size="2"><a href="http://eldritcheponym.rpgdynasty.com/portal.htm?pid=3&amp;sid=073a92782198026c7f0e176c36c5b170#Looting">General Lot Rules</a></font></li><li style="font-family: Comic Sans MS;"><font size="2"><a href="http://eldritcheponym.rpgdynasty.com/portal.htm?pid=3&amp;sid=073a92782198026c7f0e176c36c5b170#FFXILot">FFXI Lot Rules</a></font></li><li style="font-family: Comic Sans MS;"><font size="2"><a href="http://eldritcheponym.rpgdynasty.com/portal.htm?pid=3&amp;sid=073a92782198026c7f0e176c36c5b170#FFXIVLot">FFXIV Lot Rules</a></font></li><li style="font-family: Comic Sans MS;"><font size="2"><a href="http://eldritcheponym.rpgdynasty.com/portal.htm?pid=3&amp;sid=073a92782198026c7f0e176c36c5b170#HowToJoinUs">How To Join Us...</a></font></li><li style="font-family: Comic Sans MS;"><font size="2"><a href="http://eldritcheponym.rpgdynasty.com/portal.htm?pid=3&amp;sid=073a92782198026c7f0e176c36c5b170#NamingPolicy">Naming Policy</a></font></li><li style="font-family: Comic Sans MS;"><font size="2"><a href="http://eldritcheponym.rpgdynasty.com/portal.htm?pid=3&amp;sid=073a92782198026c7f0e176c36c5b170#Avatars&amp;Signatures">Avatars &amp; Signatures</a></font></li><li style="font-family: Comic Sans MS;"><font size="2"><a href="http://eldritcheponym.rpgdynasty.com/portal.htm?pid=3&amp;sid=073a92782198026c7f0e176c36c5b170#Ventrilo">Ventrilo Server Info<br></a></font></li></ul></div>

</td></tr></tbody></table></td>

Now, try using this new widget instead of the previous one. Hope it helps Very Happy
ankillien
ankillien
Energetic

Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL

Back to top Go down

float - How do you make a widget float and follow the page when you scroll? Empty Re: How do you make a widget float and follow the page when you scroll?

Post by Khalus Fri 23 Apr - 3:13

Alrighty thanks again, I'll play with it tomorrow as its getting late...
avatar
Khalus
Forumember

Posts : 42
Reputation : 0
Language : English

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum