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 ] Preferences Menu Change
Topic Started: Jan 6 2015, 09:55 PM (291 Views)
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
On a Test Board
Zeta

So I thought I could make the switch myself but I'm not quite good enough at js for that.

I'm watching to make this code ( http://z5.ifrm.com/30458/170/0/f5306530/PreferencesMenu.js ) apply to the username in the top left corner ( #top_info strong a )

I want it the have the exact same effects. I also want to hide "Preferences" from the top menu.
And due to possible code conflict can you disable actions when you click the actual username? (Disable the function that takes you to your profile when you click the username) But I only want that disabled on the #top_info strong a that isn't within the code.

Sorry if you're confused, if you need more specifications just say so.
Edited by Kankuro, Jan 6 2015, 09:58 PM.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Who's the original author of that code and do you have their permission to make major edits to it?
Offline Profile Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
I honestly have no clue who made it.
Lol, it's your own code: http://support.zathyus.com/topic/5188012/1/
Edited by Kankuro, Jan 6 2015, 10:53 PM.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Try this instead:
Code:
 
//<![CDATA[
$('#top_info').append('<div id="user_box" class="meta_box" style="position: absolute; display: none"><div id="avatar" class="left" style="margin: 10px"><img src="http://z5.ifrm.com/static/1/default_av.png" alt="No Avatar" height="170" width="170" /></div><p><a href="' + main_url + 'profile/' + $.zb.stat.mid + '/" style="font-size: 24px">' + $('#top_info strong a').text() + '</a></p><a href="' + main_url + 'search/?c=4&mid=' + $.zb.stat.mid + '" style="font-size: 14px">My Content</a><br /><a href="' + main_url + 'home/?c=4" style="font-size: 14px">My Settings</a><br /><a href="' + main_url + 'home/?c=6" style="font-size: 14px">Update Profile</a><br /><a href="' + main_url + 'home/?c=10" style="font-size: 14px">Update Avatar</a><br /><a href="' + main_url + 'home/?c=32" style="font-size: 14px">Update Signature</a><br /><a href="' + main_url + 'search/?c=6" style="font-size: 14px">My Topic Replies</a><br /><div style="margin: 10px; float: right;"><input id="status" type="text" value="What\'s on your mind?" style="padding: 4px 5px" /> <button type="button" style="padding: 4px 5px">Update</button></div></div>');

$('#top_info strong a').click(function(e) {
e.preventDefault();
}).hover(function() {
$('#user_box').fadeIn('slow');
});

$('#user_box').hover(function() {}, function() {
$(this).fadeOut('slow');
});

$.get(main_url + 'profile/' + $.zb.stat.mid + '/?force_ads', function(data) {
if ($('td.c_mark img', data).length !== -1) {
$('#avatar img').attr('src', $('td.c_mark img', data).attr('src'));
}
});

$('#status').click(function() {
if ($(this).val() === 'What\'s on your mind?') {
$(this).val('');
}
});

$('#status + button').click(function() {
$.post(main_url + 'home/?force_ads', {
c: 43,
status: $('#status').val(),
success: function() {
$('#status').val('');
}
});
});
//]]>
Offline Profile Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
Thank you, now how would I hide the "Preferences" option?
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
With CSS:
Code:
 
#menu_ucp {
display: none;
}
Offline Profile Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
How do I align the text within the drop down to be centered?
http://prntscr.com/5pfqfc

And what selector do I use for the avatars; div#avatar.left img?
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
You probably want to change this:
Code:
 
<div id="user_box" class="meta_box" style="position: absolute; display: none">
To this:
Code:
 
<div id="user_box" class="meta_box c" style="position: absolute; display: none">
#avatar img alone will be sufficient enough.
Offline Profile Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
Cory
Jan 7 2015, 12:06 AM
You probably want to change this:
Code:
 
<div id="user_box" class="meta_box" style="position: absolute; display: none">
To this:
Code:
 
<div id="user_box" class="meta_box c" style="position: absolute; display: none">
#avatar img alone will be sufficient enough.
Would my selector work though? I only want it to apply to that specific avatar in that meta box.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
#avatar is an ID and ID's are unique, which means unless a different code is using 'avatar' as an ID, then the selector will be valid for the avatar image in this code only. You don't need to specify the class name as well, or the element name.
Offline Profile Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
Cory
Jan 7 2015, 12:38 AM
#avatar is an ID and ID's are unique, which means unless a different code is using 'avatar' as an ID, then the selector will be valid for the avatar image in this code only. You don't need to specify the class name as well, or the element name.
Is it possible to disable the link in the top info username while still keeping the username valid? Pretty much I don't want it to be a link to my profile but still say my name.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
The #top_info strong a link should already be disabled, at least it is for me.
Offline Profile Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
Oh, I didn't actually click it, I just seen the link the the little URL that shows when you hover over links. Sorry about that.
Offline Profile Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
1 last edit. Instead of the fadein/out transition can you make it slide down when hovered?
I tried doing the height transition but it didn't quite work.

This is what I tried:
Code:
 

div#user_box.meta_box.c {
height: 0%!important;
transition: height 1s;
}

div#user_box.meta_box.c :hover {
height: 100%!important;
}


It had the right effect, but didn't slide down to match the height it should and I want it to slide down when you hover over the username and not the actual box..Still kinda learning the more advanced CSS tricks lol.

Note: I just want to add the CSS to my theme appearance, I don't want to have to change the script I'm hosting again.



EDIT: Nevermind, after looking more at the code I realized it's a simple fix and required the script to be edited.
Edited by Kankuro, Jan 8 2015, 08:07 PM.
Offline Profile Goto Top
 
Helena
Member Avatar
M is for Mod

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