Add Dropdown to Current Navigation Buttons

[JRR]

I have a javascript code that when placed in my Main Header creates the following buttons Rider Birthdays, Latest Rider Posts, Recent Rider Post and Recent Rider Threads.

This is the Code:

<script>

$(function(){
	
	(function(){
		
		return {
		
			init: function(){
				var recent = $("a.recent-threads-button");
				var recent_threads = recent.clone().attr("href", "/threads/recent").attr("id", "recent-threads-new").html("Recent Rider Threads");
				var boards_new_posts = $(".icon img[alt='New Posts']");
				var threads_new_posts = $("tr.item.thread.new");
				
				var new_icon = $("<span></span>").attr("class", "new-icon").hide();
				
				if(boards_new_posts.length || threads_new_posts.length){
					new_icon.html("New").show();
					new_icon.css("position", "relative").css("top", "2px");
				}
				
				recent_threads.append(new_icon).insertBefore($("#navigation-tree"));
recent.clone().attr("href", "/posts/recent").html("Recent Rider Posts").insertBefore($("#navigation-tree"));
if (proboards.data("route").name == "home") {
var lastUpdated = $(".last-updated > a").attr("href");
recent.clone().attr("href", lastUpdated).html("Latest Rider Post").insertBefore($("#navigation-tree"));
recent.clone().attr("href", "/members?dir=asc&sort=name&view=birthdays").html("Rider Birthdays").insertBefore($("#navigation-tree"));
};

			}	
			
		};
		
	})().init();
	
});

</script>

You can see the buttons here:

http://itistheride.boards.net/

The Buttons are right under the News Feed which include the Buttons It Is The Ride that is a drop down button and the Home button. Those are standard buttons and I didn't add them.

Now if you scroll down to the bottom right hand corner of the forum right under View Today's Birthdays You'll see a drop down button labeled FRIENDS. The code for it is in the Home Template and is follows:

{if $[current_user.is_member]}
<tr><td><form name="jump">
<select name="menu" onChange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
<option value="">Friends</option>
<option value=http://thescooterprofessor.proboards.com//>The Scooter Professor Forum</option>    
<option value=http://itistheride.boards.net/>It Is The Ride Forum</option>
<option value=http://scooterrebels.proboards.com/>Scooter Rebels Forum</option>
<option value=http://49ccscoot.proboards.com/>49ccScoot Forum</option>
<option value=http://trueblueliberty.com/>True Blue Liberty Forum</option>
<option value=http://www.dansgaragetalk.com/>Dan's Garage Forum</option>
</select></form></br></td></tr>
{/if}

Also both codes are made so that one has to be a member and logged in to see the buttons. I would like to add the last drop down FRIENDS to the Navigation code and need help doing so. I probably won't have room for all of those buttons and if so I'll just remove the Birthdays Button.

Thanks.

[styxlawyer]

.
.
Now if you scroll down to the bottom right hand corner of the forum right under View Today's Birthdays You'll see a drop down button labelled FRIENDS.
.
.

If I go there all I see is a message which says: "You need to login or register on this forum to view members." As I'm not a member it's difficult to offer any suggestions.

[JRR]

You can't see the main home page?

Try my test forum:

http://scootproftest.freeforums.net/

[styxlawyer]

You can't see the main home page?

Try my test forum:

http://scootproftest.freeforums.net/

On your test forum I get the same message:

"You need to login or register on this forum to view members."

[JRR]

That doesn't happen for anyone else? The forum is not set to do that? Now if you're trying to post or such then yes you must register. But does one really need to see the forum to work with the code?

[jscheuer1]

There's already a Friends drop down in the menu that's just below the header image. Do you really need another just a little below that under the news feed as you're asking? Oh, and I tried it out. You would need more room there than you would get by dropping Rider Birthdays, you would have to lose another item as well to make it fit. Still want to? (click image for preview)



After further testing, still not certain if we can even get what's pictured.

OK, this I think we can do:



I think we can get either one now.

[JRR]

The last one will work and I have the option of removing anyone of the buttons I want to for extra room. Yes I know I have the Friends button in another spot but I'm wanting to do away with it for this simple code because it is a plugin that uses what they call a key and I'm out of keys because they only allow so many. If I eliminate that plugin I can have the key to use for something else. Plus with this code I can modify it at will where I can't the plugin.

Thanks

[jscheuer1]

OK, I actually agree the second one looks better. And I want to be clear that I've played around with this a lot and see that the word "Friends" is a little bit lower than the other words there. I don't think there's an easy way to alter that. And that's why I like the second one better, because done that way, the slight misalignment is less obvious to the eye I think.

It's late here now, but I've saved the code and will be posting it - probably tomorrow because it may need tweaking and I have an idea for making it easier to mange, depending upon the order in which things are already occurring on the page during loading, but, if that is an issue, we will most likely find the right approach. I'm also wondering, apropos to that, if you know at what point the second Friends drop down (one near the bottom) occurs in the loading of the page? is it in the template and/or more or less part of the HTML, or is it loaded via script? Also do you intend to keep the second Friends drop down?

[jscheuer1]

NOTE: The code below assumes no other changes to the page (other than removing that first Friends drop down you say you want to stop using, and that's optional). As for the items where we are inserting the new Friends drop down, the code itself removes those items that are in the way. Also as noted, this current formulation requires (copies in a way actually) the existing Friends drop down that is currently near the end of the page.

OK, figured part of that out for myself. Assuming you are keeping the Friends select that appears near the bottom of the page, add this script code just after the code in your first post in this thread:

jQuery(function($){
	var friendsClone = $('select[name="menu"]', $('form[name="jump"')).clone();
	friendsClone.addClass('recent-threads-button').css({
			display: 'inline',
			height: '1.7em'
		}).change(function(){
			window.location.href = this.options[this.selectedIndex].value;	
		}).get(0).onchange = function(){};
	$('.recent-threads-button').last().remove();
	$('.recent-threads-button').last().replaceWith(friendsClone);
});

Otherwise, let me know (see my previous post for questions about various requirements you might have that differ from what this code does). But, as I say, as long as you are keeping the Friends select dropdown currently near the end of the page, this code should do the trick. And then again, if there are any other issues that pop up - let me know.

[JRR]

OK John that works great. I'm sorry I've taken so long to reply. I had my main computer hard drive crash and had to pull out a old computer to work with. good thing is my other computer is still under extended warranty and they are going to replace the hard drive in it.

OK I would like to know if two things can be done, one can the code you made be done so that when one clicks on one of the drop down links the new link will open in a new tab window? Currently when you click on one now it replaces the site you are on.

Lastly can the code be made to let me put other links in just like the one at the bottom of the page and completely remove the one at the bottom of the page just like the other one I have removed. I know this code just copies the one at the bottom. I've got your code working here:

http://thescooterprofessor.proboards.com/

Thanks