Morrigan

Skins Move Jcink Alerts Popup

Recommended Posts

Morrigan    6,212

So a lot of people hate the default user bar that JCink provides however if you get rid of it then you get rid of the alerts popup with is super helpful for those that like to track their posts through this. So I figured out the javascript and adapted it so you can move the link to wherever you like.

 

Please read the following instructions carefully before asking questions in this thread!

 

 

First add this to the head of your site (somewhere between <head> and </head>):

<script>
//
// Code to move alerts on Jcink
// Code Originally from Jcink
// Adapted by Morrigan of The Initiative
// https://rpginitiative.com
//
function read_the_alerts() {
	$('#the-alerts').slideToggle('slow');
	$.get( "index.php?recent_alerts=1&read=1", function( data ) {
		$( "#recent_alerts_data" ).html( data );
	});
	$( ".alerts-indicator" ).html( "Alerts (0)");
}


function load_the_alerts() {

		alert_link = $('.alerts-indicator').position().left-75;
		
		$('#the-alerts').css({
			left: alert_link + "px",
		});
		
		if($('#the-alerts').is(':visible')) {
			$('#the-alerts').slideToggle('slow');
		} else {
			$.get( "index.php?recent_alerts=1", function( data ) {
				$( "#the-alerts-data" ).html( data );
			});
			$("#the-alerts").slideToggle('slow');
		}
}
</script>

 

 

Next you will need to add the following code where you want the alerts link to show up:

<a id='alerts-indicator' class='alerts-indicator' title='Alerts' href='javascript:load_the_alerts();'>Recent Alerts <script>
			if('<!-- |new_alerts| -->' > '0') { document.write("(<span class='alert_total'><!-- |new_alerts| --></span>)");}
			</script></a>
			<div style="display: none;" id="the-alerts">
				<div class="alert_box">
					<span id="the-alerts-data"></span>
					<div style="text-align: center;" class="bottom_alerts">
						<a title="View All Alerts" href="http://forum.jcink.com/index.php?act=UserCP&amp;CODE=alerts">View All Alerts</a> · <a title="Mark All Read" href="javascript:read_the_alerts();">Mark All Read</a>
					</div>
				</div>
			</div>

 

This will only show a number for alerts if the member has unread alerts. This will also leave alerts in tact if the user doesn't want to mark them as read yet, just like the standard one.

 

 

Skinning, positioning and whatnot is up to you but if you need help please respond here with specific questions or issues.

 

Thanks!

 

 

 

Important position changes

 

If the popup appears in the wrong location change the 75 here:

left-75

To the number that would better fit your needs.

If you need it moved by the right instead of the left change that number and only this:

left: alert_link + "px",

Change the left to right instead. (only).

  • Like 1
  • Love 1
  • Thank you 2

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.