How do you make a widget float and follow the page when you scroll?
2 posters
Page 1 of 1
How do you make a widget float and follow the page when you scroll?
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...
Here is a link to the section of my forums I'm talking about, and I use version phpBB2...
Khalus- Forumember
- Posts : 42
Reputation : 0
Language : English
Re: How do you make a widget float and follow the page when you scroll?
Hello,
You can do it with CSS. Please navigate to Admin CP > Display > Colors > CSS
Add this code there and submit...
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- Energetic
- Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL
Re: How do you make a widget float and follow the page when you scroll?
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!
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!
Khalus- Forumember
- Posts : 42
Reputation : 0
Language : English
Re: How do you make a widget float and follow the page when you scroll?
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.
Now, try using this new widget instead of the previous one. Hope it helps
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&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&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&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&sid=073a92782198026c7f0e176c36c5b170#FFXI&FFXIVRules">FFXI & 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&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&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&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&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&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&sid=073a92782198026c7f0e176c36c5b170#Avatars&Signatures">Avatars & Signatures</a></font></li><li style="font-family: Comic Sans MS;"><font size="2"><a href="http://eldritcheponym.rpgdynasty.com/portal.htm?pid=3&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
ankillien- Energetic
- Posts : 5198
Reputation : 129
Language : English, XHTML, CSS, JS, PHP, SQL
Re: How do you make a widget float and follow the page when you scroll?
Alrighty thanks again, I'll play with it tomorrow as its getting late...
Khalus- Forumember
- Posts : 42
Reputation : 0
Language : English
Similar topics
» Is there a way to make images float around a page?
» Up and Down Keys make the page scroll
» How to make different glow names and how do u make them scroll? or at least the ranks scroll
» How do you make pictures of your choice float down the screen? And, how do you make the gender signs?
» im stuck trying to make a link on a side widget open to a new page
» Up and Down Keys make the page scroll
» How to make different glow names and how do u make them scroll? or at least the ranks scroll
» How do you make pictures of your choice float down the screen? And, how do you make the gender signs?
» im stuck trying to make a link on a side widget open to a new page
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum