We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Locked Topic
[ C ] Modification to Floating Menu
Topic Started: Jun 26 2011, 12:23 PM (716 Views)
Ulti
Member Avatar
Member
[ *  * ]
Board Address: http://s7.zetaboards.com/Burnin_Rubber/
Board Software: ZetaBoards
Description: Hello ZNR. I have been looking to update my site for the past month or so now, and I have found this code recently which really intrigued me: Floating Menu v1.5. I looked at all of the floating menu options this site offered to me, and this one best suited my needs. However, I am stumped on changing a few things about it to fit my board to the best of it's abilities. First, is there any way I could change the small square you click to open the menu to a picture, preferably semi-transparent like the floating menu is here, or at least change the text inside the box from an 'M' character to something else (I'd probably change it to BR, the initials of my site, at bare minimum)? Second, would I be able to move the icon you click to open the menu from the top left to the bottom left?


This is the code I am working with that I already edited a bit; the unedited one is found in the topic linked above
Offline Profile Goto Top
 
Minato
Member Avatar
Let Me Be With You
[ *  *  *  *  * ]
In the script, find the following (After Reference Point A)

Code:
 
<span onmouseover="MenuActivate()" id="MenuActivate" style="display:inline; position:fixed;" ><button onmouseover="MenuActivate()">M</button></span>


and change it to

Code:
 
<span onmouseover="MenuActivate()" id="MenuActivate" style="display:inline; float:right;" ><button onmouseover="MenuActivate()">BR</button></span>


That should fix both of your problems.
Offline Profile Goto Top
 
Ulti
Member Avatar
Member
[ *  * ]
Thank you very much. Now, that first code what it is right now and the second is what I should change it to, correct?
Offline Profile Goto Top
 
Minato
Member Avatar
Let Me Be With You
[ *  *  *  *  * ]
Correct.
Offline Profile Goto Top
 
Ulti
Member Avatar
Member
[ *  * ]
While that did change the 'M' to 'BR', the floating square is at the top right, not bottom left, and is fixed, not floating. When you click on it, it opens and floats at the top, but after dismissing it, it goes back to the top.

That is one thing I forgot to mention; naturally, if the square could be moved to the bottom left, can the menu it opens open at the bottom of the screen as well, not the top?
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Change your code to the following, see what that does.
Code:
 
<!---Menu By C0smic1--->

<script type="text/javascript">
function Appear() {
document.getElementById('menu').style.display = '';
}

function disappear() {
document.getElementById('menu').style.display = 'none';
}

function news() {
document.getElementById('newsbox').style.display = '';
}

function newsclose() {
document.getElementById('newsbox').style.display = 'none';
}

function linkAppear() {
document.getElementById('links').style.display = '';
}

function linkClose() {
document.getElementById('links').style.display = 'none';
}

function Dismiss() {
document.getElementById('Dismiss').style.display = 'none';
document.getElementById('ButtonA').style.display = 'none';
document.getElementById('ButtonB').style.display = 'none';
document.getElementById('newsbox').style.display = 'none';
document.getElementById('links').style.display = 'none';
document.getElementById('menu').style.display = 'none';
document.getElementById('MenuActivate').style.display = '';
}

function MenuActivate() {
document.getElementById('MenuActivate').style.display = 'none';
document.getElementById('Dismiss').style.display = '';
document.getElementById('ButtonA').style.display = '';
document.getElementById('ButtonB').style.display = '';
}

/* Reference Point A*/

</script>

<span onmouseover="MenuActivate()" id="MenuActivate" style="display:inline; position: fixed; bottom: 0; left: 0" ><button onmouseover="MenuActivate()">BR</button></span>

<span onclick="Appear()" style="position:fixed ; bottom: 0; left: 0; display:none" id="ButtonA"><button onclick="Appear()">Open Menu</button></span>

<span onclick="Dismiss()" style="position:fixed; bottom: 0; left: 0; margin-left:250px; Display:none" id="Dismiss"><button onclick="Dismiss()">Dismiss</button></span>

<span style="position:fixed; bottom: 0; left: 0; margin-top:40px; display:none;" id="menu">
<table style='position: fixed; bottom: 0; left: 0; margin-left:5px; margin-bottom:100px; width:100px;'>


<!---Navigation Links--->


<tr><th>Site Navigation
<tr><td><a href='http://s7.zetaboards.com/Burnin_Rubber/search/?c=5'>Active Topics</a>
<tr><td><a href='http://s7.zetaboards.com/Burnin_Rubber/stats/top_posters/'>Today's Top Posters</a>
<tr><td><a href='INSERT LINK URL'>LINK NAME</a>
<tr><td><a href='INSERT LINK URL'>LINK NAME</a>
<tr><td><a href='INSERT LINK URL'>LINK NAME</a>
<tr><td><a href='INSERT LINK URL'>LINK NAME</a>
<tr><td><a href='INSERT LINK URL'>LINK NAME</a>
<tr><td><a href='INSERT LINK URL'>LINK NAME</a>



<!---End Navigation Links--->



<tr><td><span onclick ="news()">Board News</span>
<!---Referance point B--->


<tr><td><span onclick ="disappear()">Close Menu</span>
<tr><td>Menu by C0smic1
</table></span>
<span style="position:fixed; bottom: 0; left: 0; margin-top:40px; display:none;" id="newsbox">
<table style='position: fixed; bottom: 0; left: 0; margin-left:150px; margin-bottom:150px; width:300px;'>
<tr><th colspan="3">Board News <!---change this to modify the header name for the news box--->
<tr><td colspan="3">



<!---Board News Goes Here--->

Place any board announcemnts within this area.

<!---End of Board News--->




<tr><td colspan="2" onclick="newsclose"><span onclick="newsclose()">Close</span></td><td colspan="1"><a href="http://s7.zetaboards.com/Burnin_Rubber/forum/34996/">More News</a></td></tr>

</table>
</span>

<span style="position:fixed; bottom: 0; left: 0; margin-top:200px; display:none;" id="links">
<table style='position: fixed; bottom: 0; left: 0; margin-left:150px; margin-bottom:150px; width:300px;'>
<tr><th colspan="3">Board Links <!---Edit the header to the left as needed--->


<td colspan="3"><span onclick="linkClose()">Close</span>
</tr></table></span>

<!---Up to index button--->
<span style="position:fixed; bottom: 0; left: 0; margin-left:100px; display:none" id="ButtonB">
<a href="http://s7.zetaboards.com/Burnin_Rubber/index/"><button>Up to Board Index</button></a>
</span>
<!---End of Up to index button--->


<!---End menu--->
Offline Profile Goto Top
 
Ulti
Member Avatar
Member
[ *  * ]
That worked flawlessly, thank you.

I know this may be a bit too much to ask, and if it can't be solved, that's fine. But if you saw my other request, it was concerning a mobile theme; is there anyway to disable this floating menu in one theme? I don't own a mobile internet device but I'd assume floating menus don't work to well on them. However, maybe I am wrong, in which case, just tell me and don't worry about it. :P
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Add <div id="floating_menu"> before all the HTML of the menu and </div> after all the HTML, then add this to the theme's CSS you wish to remove it in.
Code:
 
#floating_menu {
display: none;
}
Offline Profile Goto Top
 
Minato
Member Avatar
Let Me Be With You
[ *  *  *  *  * ]
Instead of adding a DIV tag, you can do this.

Code:
 
#MenuActivate, #menu {
display:none!important;
}


Add that to the Theme Appearance of any theme you don't want that to show up on.
Edited by Minato, Jun 26 2011, 11:54 PM.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
#menu already has display: none; by default, so really you would only need to remove #MenuActivate, though I would prefer remove the parent element than a single child element. Either method will work, really.
Offline Profile Goto Top
 
Ulti
Member Avatar
Member
[ *  * ]
Thanks for the help! But got a bit confused there on the end; what exactly am I adding to the skin I don't want the menu on? Cory's code or Minato's code? Or a variation of one?
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Either will work. You need to add the CSS and HTML for mine, the CSS only for Minato's. Mine removes the parent element (all the HTML), Minato's removes a child element (the only portion that appears before activating it).
Offline Profile Goto Top
 
Ulti
Member Avatar
Member
[ *  * ]
Ok, thank you very much!!
Offline Profile Goto Top
 
ElementalAlchemist-ZNR
Member Avatar
Member
[ *  *  *  *  * ]
Completed!

Your request has been completed. If you have any questions or concerns regarding the state of your request, please feel free to contact me via PM.
Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
DealsFor.me - The best sales, coupons, and discounts for you
« Previous Topic · Closed Requests · Next Topic »
Locked Topic