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 ] Changing Cursor According to Forum/Member Group
Topic Started: Apr 8 2012, 11:53 PM (592 Views)
AustinL90
Member
[ * ]
Board Address: hogwartsschoolonline.co.cc (though it's closed)
Board Software: ZetaBoards
Description:

Hi there! I'd really love to do some cool stuff with the cursors on my board. Specifically, I was wondering about being able to change the cursor depending on which forum one is viewing and which member group the user is in. (If one or the other is simpler, just let me know, I'm unfamiliar. :X) So members in the 'moderator' group might have a different cursor than those in the 'guest' group, and those in the 'member' group might have a different cursor altogether as well. I know you can change cursors through CSS, but I wasn't sure if CSS was capable of doing what I am requesting.

Please ask any necessary questions, and thanks ahead of time! :-)
Edited by AustinL90, Apr 8 2012, 11:54 PM.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Group-specific cursors would require one AJAX request per-page, this eats us server bandwidth and AJAX is sometimes the culprit of slow-loading sites.

Forum-specific cursors is possible without AJAX:

Admin CP Posted Image Themes Posted Image Board Template Posted Image Below the Board
Code:
 
<script type="text/javascript">
function addCursor(forum_id, class_name) {
if (location.href.indexOf('/forum/' + forum_id + '') !== -1) {
$('body').addClass(class_name);
}
}

addCursor('FORUM_ID', 'CLASS_NAME');
</script>
Replace the capitalized text and you can repeat that line to add more forum-specific classes to the body tag, then you can add the cursor via CSS; add the CSS to the Javascripts wrapper of the Board Template to make it affect every theme, like so:
Code:
 
<style type="text/css">
body.CLASS_NAME {
cursor: VALUE;
}
</style>
Offline Profile Goto Top
 
AustinL90
Member
[ * ]
Thanks so much for your response!

I've been toying with changing the cursor for both normal and hover states - I've tried a various number of CSS combos which include:

Code:
 
body.CROSSHAIR a,a:hover {
cursor:crosshair;
}

and
Code:
 
body.CROSSHAIR a, body.CROSSHAIR a:hover {
cursor:crosshair;
}


This doesn't seem to work. If I want to change each state (even if it's the same cursor), do I need to do those in separate lines of the CSS?

(Also, the 'CLASS_NAME' can be anything, correct? It's just an identifier?)

Thanks! :)
Offline Profile Goto Top
 
Quozzo
Member Avatar
By the blood of Sanguinius!
[ *  *  *  *  * ]
the crosshair would only be visible for the link if hovered over the link, so it wouldn't ever change the cursor as it is either off the link ergo you can't see the crosshiar or its over the link and the `:hover` metatag would take precedence.
Offline Profile Goto Top
 
AustinL90
Member
[ * ]
Thanks for the response, Quozzo. :-)

I'm now using this:

Code:
 
body.CROSSHAIR, a:hover {
cursor:crosshair;
}


Which works when I'm viewing the specific forum's list of topics, but when I view an individual topic, the crosshair only appears when I hover over a link. Is there a way to fix this?

Also, the crosshair/arrow pointer seems to flicker when I scroll, and the hand pointer appears for a split second when I hover over links, before changing to the crosshair. Is there a more streamlined way to do this, to reduce the flicker?

Thanks for your help! :-)

EDIT: I ended up doing the body.CROSSHAIR and body.CROSSHAIR a:hover as separate lines in the CSS, because the previous method noted in this post was changing all of my link hovers across the board to crosshairs. The separate lines fixed this problem, but now I don't get any crosshair at all when viewing a topic in the specific forum.
Edited by AustinL90, Apr 10 2012, 01:28 PM.
Offline Profile Goto Top
 
Quozzo
Member Avatar
By the blood of Sanguinius!
[ *  *  *  *  * ]
try using lower case letters. HTML isn't case specific but it depends on the browser and what the JS does to insert the class to the elements. Actually if i recall correctly CSS is case specific.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
The if statement would need to be modified to add the class to topics in the forum as well:
Code:
 
<script type="text/javascript">
function addCursor(forum_id, class_name) {
if (location.href.indexOf('/forum/' + forum_id + '') !== -1 || $('#nav li a[href*="/forum/' + forum_id + '"]').length) {
$('body').addClass(class_name);
}
}

addCursor('FORUM_ID', 'CLASS_NAME');
</script>
Offline Profile Goto Top
 
Eccentric Feline
Member Avatar
梦想
[ *  *  *  *  *  *  *  * ]
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)
« Previous Topic · Closed Requests · Next Topic »
Locked Topic