Add Dropdown to Current Navigation Buttons

[jscheuer1]

Those were mostly the questions I was asking. If you really want to promote the other boards, it probably would be good to keep the old one at the bottom. But I had originally written the code independent of that one, so sure that can be done. I hadn't thought about opening in a new tab, but both should be able to be made to do that.

[jscheuer1]

OK, so how about this (seems to fulfill all the latest requirements), get rid of the new script I just gave you, also get rid of the one you had, use this one instead:

<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")); */
				var friends = {
					"The Scooter Professor Forum" : 'http://thescooterprofessor.proboards.com/',
					"Scooter Doc Forum" : 'http://scooterdoc.proboards.com/',
					"Scooter Rebels Forum" : 'http://scooterrebels.proboards.com/',
					"49ccScoot Forum" : 'http://49ccscoot.proboards.com/',
					"True Blue Liberty Forum" : 'http://trueblueliberty.com/',
					"Dan's Garage Forum" : 'http://www.dansgaragetalk.com/'
				}
				var friendsSelect = $('<select><option value="">Friends</option></select>');
				friendsSelect.addClass('recent-threads-button').css({
						display: 'inline',
						height: '1.7em'
					}).change(function(){
						if(this.value){
							window.open(this.options[this.selectedIndex].value, '_blank');
							this.selectedIndex = 0; /* optional, returns select to first position "Friends" after a link is opened in a new tab */
						}	
					});
				$.each(friends, function(friend, link){
					friendsSelect.append('<option value="' + link + ' ">' + friend + '</option>');
				});
				friendsSelect.insertBefore($("#navigation-tree"));
			};

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

</script>

NOTES: Links now open in a new tab (red). See also the comment right after that about what happens after a link is activated.

Instead of removing/replacing the two buttons as before to make room, I just commented them out of the code (green), they will still be there for future reference if ever needed/wanted at some point. Instead of cloning the existing select (since you want to get rid of it), I've constructed a new one. And since editing options and other HTML within javascript can be tedious, I made an object (highlighted yellow) to hold the options, using what I hope is an easy to follow format should you ever want to add or remove friends from the list. The rules are:

• Each entry begins with a double quoted name of the friend, then a colon, then a single quoted address to the friend, then a comma - UNLESS it's the last one in the list, then there's no comma at the end.
  
  
• If there's one or more like quotes (like the kind of quotes around the entry) inside any entry each must be escaped with a \. Example, if a friend's name were Bob's "Freedom Riders", the entry for their name should look like so:
  
  

  "Bob's \"Freedom Riders\""

[JRR]

OK John this working nicely except that when one clicks on a friend link for the drop down it still opens on the same page instead of a new tab window?

[jscheuer1]

I see the problem, but we may have to play with it some more, hopefully not, there's at least an issue with a commented out { that still has a non-commented out } hanging around. As I say, we may need to play with it more, but I'm pretty sure this will take care of it (same notes as before):

<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"));
				} */
				var friends = {
					"The Scooter Professor Forum" : 'http://thescooterprofessor.proboards.com/',
					"Scooter Doc Forum" : 'http://scooterdoc.proboards.com/',
					"Scooter Rebels Forum" : 'http://scooterrebels.proboards.com/',
					"49ccScoot Forum" : 'http://49ccscoot.proboards.com/',
					"True Blue Liberty Forum" : 'http://trueblueliberty.com/',
					"Dan's Garage Forum" : 'http://www.dansgaragetalk.com/'
				}
				var friendsSelect = $('<select><option value="">Friends</option></select>');
				friendsSelect.addClass('recent-threads-button').css({
					display: 'inline',
					height: '1.7em'
				}).change(function(){
					if(this.value){
						window.open(this.options[this.selectedIndex].value, '_blank');
						this.selectedIndex = 0; /* optional, resets select to the first 'Friends' option */
					}	
				});
				$.each(friends, function(friend, link){
					friendsSelect.append('<option value="' + link + ' ">' + friend + '</option>');
				});
				friendsSelect.insertBefore($("#navigation-tree"));
			}	
		};
	})().init();
});
</script>

[JRR]

OK John that doesn't work at all? The drop down links will not open at all with this code?

[jscheuer1]

I'm thinking you may have your popup blocker settings too strict*. Either that, or it's opening in a new tab but not switching to the new tab*. Different browsers behave differently as far as that goes. Can you show me an example? What browsers are you using?

Works here:

http://john.dynamicdrive.com/demos/t..._friends-h.htm

*It might be something else though. If it's popup settings, you would probably notice that many, or at least some other other potential popups have not loaded. If it's a new tab without focus, you can see that if you look for a new tab that has loaded without being switched to. Again, it may also simply be the browser (why I asked about that). Try the demo I linked to and report results, and if that doesn't work let me know the browser, OS, and device you're using. One more thing if it's strict popup settings. That's a common issue with this sort of thing. Most people do not have strict settings, but enough do that many people prefer links open in the same window. Aren't most of these forums also yours? If so, that wouldn't be so bad, and we can target which links open where if need be.

[JRR]

I am using W10 and IE11 and you are correct Pop up blocker problem. All solved and working fine! One last question, you mentioned the code in green to have in case I wanted to change one of my buttons, please explain this to me a little bit more.

Thanks

[jscheuer1]

Yes sure, first I would like to review this popup issue. If a person has a setting to block all popups from all sites or something like that, then even an ordinary link that has as it's target attribute "_balnk" will not open. Most browsers are set to allow what are called user initiated popups - that's any popup that comes as the result of a direct action, like clicking on a link or choosing a select. The browser cannot actually determine between new window popups and new tab ones, though it could, but that's generally been left to the user to set. Defaults usually are that new windows that have dimensions specified will open in a new window, those without (what we are doing with this code) open in a new tab. Whether new tabs opened in this manner receive focus unless the user also switches to them by choice, is also usually a setting in the browser. As I say though most folks allow these popups and for most folks they will open in a new tab, and probably even get focus. However, if the link opens in the same tab, there's never a problem. That's why many web designers have given up on opening anything anywhere except in the current tab. Something to think about. An alternative is to have crucial links open in the same tab, and have less important ones set to open in a new tab, where - as we both now know, they might not always fire.

OK, now on the the GREEN commented out section. That's the part of the code that used to create and insert the "Rider Birthdays" and the "Latest Rider Post" link buttons that were dropped to make room for the "Friends" select. If you decide at some point to put the "Friends" select somewhere else or to just get rid of it, and want those other buttons back, that code is still there and could probably be used as is. Or if you want to put those dropped buttons somewhere else where there might be room for them, that code could probably be fairly easily modified to do so, rather than having to start over from scratch. But if you're happy with things, and don't think you will ever want those buttons back, or feel confident you can get them back without keeping that old code as a reminder as to how to do that, you can just delete the green commented out section.

[JRR]

As always thanks a million John. Going to be a long night got the new hard drive for the other computer and having to download everything from scratch and start over! Yuk!

Another thing with the open in a new tab window is I thought one could right click and the pop up box that gives you the option of "open in another tab" would appear but not so? You know kind of like the sites one has in their favorites bar? Here's something odd too? On one of my forums I still have the plugin in use and haven't changed all of the coding yet. If you look right under the banner for "Friends" you can "right click" and get any link to open in a new tab? I don't know what they did to make that happen?

But it's no big deal.

Thanks

[jscheuer1]

That's the difference between an actual link and a select. What that plugin has is links on a drop down div (or similar), not an actual select. We can do something like that, then the user would have a choice. But, then the default would have to be to open in the same tab (or whatever we set it to, could vary by link), as few if any browsers now allow that (open in the same tab) as an option when the default would be a new one. I think they should, but they don't. What one has to do in that case is copy the link and paste it into the address bar. Even I rarely go to that trouble.

In any case, I've worked this out with the option to set both the default target and optionally a custom target for any given link.

Let me know if you're interested.