Jump to content

Move Jcink Alerts Popup
   (0 reviews)

Morrigan
  • 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.

    Type: Look & Feel Software: Jcink

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).


Related Guides

  • Morrigan

    So continuing through the Jcink theming guides our next step is the actual design process. Board Wrappers are considered the bones of your theme and wraps up the other elements in it. This will often be the biggest part of your mock-up.

    Jcink




User Feedback

Create an account or sign in to leave a review

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

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

There are no reviews to display.


×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.