The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Arranging links system

Go down

Solved Arranging links system

Post by Luffy on Fri 11 Jul - 12:08:23

Hello, i want to add the below system to my forum but i don't know how to do it. Can someone help me please?


This is how the system is seen and when you pass your mouse on top of it it shows the links like this:


Thanks for your time..
avatar
Luffy
Manager
Manager

Male Posts : 5267
Reputation : 567
Language : Greek, English
Location : Greece

https://www.crossroadz.net

Back to top Go down

Solved Re: Arranging links system

Post by Luffy on Mon 14 Jul - 11:09:46

bump



avatar
Luffy
Manager
Manager

Male Posts : 5267
Reputation : 567
Language : Greek, English
Location : Greece

https://www.crossroadz.net

Back to top Go down

Solved Re: Arranging links system

Post by Luffy on Wed 16 Jul - 22:58:26

Bump again.



avatar
Luffy
Manager
Manager

Male Posts : 5267
Reputation : 567
Language : Greek, English
Location : Greece

https://www.crossroadz.net

Back to top Go down

Solved Re: Arranging links system

Post by Luffy on Fri 18 Jul - 11:20:01

Bump



avatar
Luffy
Manager
Manager

Male Posts : 5267
Reputation : 567
Language : Greek, English
Location : Greece

https://www.crossroadz.net

Back to top Go down

Solved Re: Arranging links system

Post by SocialAcademy on Fri 18 Jul - 12:15:35

Where exactly do you want to show the user action ?
avatar
SocialAcademy
Forumember

Male Posts : 142
Reputation : 10
Language : JavaScript, CSS, Html, JQuery, C#, C++, Php, Python
Location : Forumotion

http://www.socialacademy.biz

Back to top Go down

Solved Re: Arranging links system

Post by Luffy on Fri 18 Jul - 14:32:48

In my homepage. Specifically i want to add a bar with the welcome message for the users and to have the user action next to it. Like the image i sent you. Just below the nav bar.



avatar
Luffy
Manager
Manager

Male Posts : 5267
Reputation : 567
Language : Greek, English
Location : Greece

https://www.crossroadz.net

Back to top Go down

Solved Re: Arranging links system

Post by Luffy on Sun 20 Jul - 0:11:15

bump
avatar
Luffy
Manager
Manager

Male Posts : 5267
Reputation : 567
Language : Greek, English
Location : Greece

https://www.crossroadz.net

Back to top Go down

Solved Re: Arranging links system

Post by Luffy on Wed 30 Jul - 12:07:46

Bump
avatar
Luffy
Manager
Manager

Male Posts : 5267
Reputation : 567
Language : Greek, English
Location : Greece

https://www.crossroadz.net

Back to top Go down

Solved Re: Arranging links system

Post by Luffy on Thu 31 Jul - 14:30:48

bump
avatar
Luffy
Manager
Manager

Male Posts : 5267
Reputation : 567
Language : Greek, English
Location : Greece

https://www.crossroadz.net

Back to top Go down

Solved Re: Arranging links system

Post by Japorized on Thu 31 Jul - 14:49:51

I'm not sure if this will work but I've found the code to it. Hope this helps?
Code:
<a rel="nofollow" href="javascript:showhide(document.getElementById('plus_menu'))">Actions</a>
<div class="overview row3" id="plus_menu" style="position: absolute; width: 400px; margin-top: 8px; z-index: 1; left: 358px;"><p class="title-overview row2"><strong>Actions</strong></p><p class="left-overview"><strong><a rel="nofollow" href="/search?search_id=newposts&amp;search_where=f1">View posts since last visit</a><br><a rel="nofollow" href="/search?search_id=egosearch&amp;search_where=f1">View your posts</a><br><a rel="nofollow" href="/search?search_id=unanswered&amp;search_where=f1">View unanswered posts</a><br><a rel="nofollow" href="/search?search_id=watchsearch&amp;search_where=f1">Topic(s) being watched</a></strong></p><hr class="dashed"><p class="left-overview"><strong><a rel="nofollow" href="http://YOURURL" onclick="link_bbcode();return false">Copy BBCode URL</a><br><a rel="nofollow" href="javascript:void(0);" onclick="window.print();return false">Print this page</a></strong></p></div>
This is copied from the source code itself.
avatar
Japorized
Forumember

Male Posts : 310
Reputation : 3
Language : English
Location : Malaysia

http://infinityhub.ace.st

Back to top Go down

Solved Re: Arranging links system

Post by Luffy on Thu 31 Jul - 14:59:33

@Japorized wrote:I'm not sure if this will work but I've found the code to it. Hope this helps?
Code:
<a rel="nofollow" href="javascript:showhide(document.getElementById('plus_menu'))">Actions</a>
<div class="overview row3" id="plus_menu" style="position: absolute; width: 400px; margin-top: 8px; z-index: 1; left: 358px;"><p class="title-overview row2"><strong>Actions</strong></p><p class="left-overview"><strong><a rel="nofollow" href="/search?search_id=newposts&search_where=f1">View posts since last visit</a><br><a rel="nofollow" href="/search?search_id=egosearch&search_where=f1">View your posts</a><br><a rel="nofollow" href="/search?search_id=unanswered&search_where=f1">View unanswered posts</a><br><a rel="nofollow" href="/search?search_id=watchsearch&search_where=f1">Topic(s) being watched</a></strong></p><hr class="dashed"><p class="left-overview"><strong><a rel="nofollow" href="http://YOURURL" onclick="link_bbcode();return false">Copy BBCode URL</a><br><a rel="nofollow" href="javascript:void(0);" onclick="window.print();return false">Print this page</a></strong></p></div>
This is copied from the source code itself.

Hello my friend and thanks for your reply,
Where am i supposed to put this code?
avatar
Luffy
Manager
Manager

Male Posts : 5267
Reputation : 567
Language : Greek, English
Location : Greece

https://www.crossroadz.net

Back to top Go down

Solved Re: Arranging links system

Post by Japorized on Thu 31 Jul - 15:07:19

Try adding it after this code in the index_body template
Code:
<li><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a></li>
      <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></li>
      <li><a href="{U_MARK_READ}">{L_MARK_FORUMS_READ}</a></li>
And add the li tag to it too, so that it appears inline. (My code here might be a little different from yours cause I've removed something)
avatar
Japorized
Forumember

Male Posts : 310
Reputation : 3
Language : English
Location : Malaysia

http://infinityhub.ace.st

Back to top Go down

Solved Re: Arranging links system

Post by Luffy on Thu 31 Jul - 15:33:17

That does something but doesn't give me the result i want! Sad



avatar
Luffy
Manager
Manager

Male Posts : 5267
Reputation : 567
Language : Greek, English
Location : Greece

https://www.crossroadz.net

Back to top Go down

Solved Re: Arranging links system

Post by Japorized on Thu 31 Jul - 15:34:25

How does it look like now?
avatar
Japorized
Forumember

Male Posts : 310
Reputation : 3
Language : English
Location : Malaysia

http://infinityhub.ace.st

Back to top Go down

Solved Re: Arranging links system

Post by Luffy on Thu 31 Jul - 15:45:18

Right now it is the word Actions and as soon as i click it it appears. I want it to be invisible at the beginning and then as soon as you take the mouse over the word to appear automatically. You dont need to click it.



avatar
Luffy
Manager
Manager

Male Posts : 5267
Reputation : 567
Language : Greek, English
Location : Greece

https://www.crossroadz.net

Back to top Go down

Solved Re: Arranging links system

Post by Japorized on Thu 31 Jul - 15:48:56

Code:
<a rel="nofollow" onmouseover="javascript:showhide(document.getElementById('plus_menu'))">Actions</a>
<div class="overview row3" id="plus_menu" style="position: absolute; width: 400px; margin-top: 8px; z-index: 1; left: 358px; display:none;"><p class="title-overview row2"><strong>Actions</strong></p><p class="left-overview"><strong><a rel="nofollow" href="/search?search_id=newposts&search_where=f1">View posts since last visit</a><br><a rel="nofollow" href="/search?search_id=egosearch&search_where=f1">View your posts</a><br><a rel="nofollow" href="/search?search_id=unanswered&search_where=f1">View unanswered posts</a><br><a rel="nofollow" href="/search?search_id=watchsearch&search_where=f1">Topic(s) being watched</a></strong></p><hr class="dashed"><p class="left-overview"><strong><a rel="nofollow" href="http://YOURURL" onclick="link_bbcode();return false">Copy BBCode URL</a><br><a rel="nofollow" href="javascript:void(0);" onclick="window.print();return false">Print this page</a></strong></p></div>
See if this works now. It should be hidden by default now.
avatar
Japorized
Forumember

Male Posts : 310
Reputation : 3
Language : English
Location : Malaysia

http://infinityhub.ace.st

Back to top Go down

Solved Re: Arranging links system

Post by Luffy on Thu 31 Jul - 16:00:40

The hidden part i figured it out. The problem is that i want it to be shown as soon as you pass your mouse over the image i entered.



avatar
Luffy
Manager
Manager

Male Posts : 5267
Reputation : 567
Language : Greek, English
Location : Greece

https://www.crossroadz.net

Back to top Go down

Solved Re: Arranging links system

Post by Japorized on Thu 31 Jul - 16:08:02

Change the code to this:
Code:
<a rel="nofollow" class="hoverme">Actions</a>
<div class="overview nodisplay row3" class="plus_menu" style="position: absolute; width: 400px; margin-top: 8px; z-index: 1; left: 358px;"><p class="title-overview row2"><strong>Actions</strong></p><p class="left-overview"><strong><a rel="nofollow" href="/search?search_id=newposts&search_where=f1">View posts since last visit</a><br><a rel="nofollow" href="/search?search_id=egosearch&search_where=f1">View your posts</a><br><a rel="nofollow" href="/search?search_id=unanswered&search_where=f1">View unanswered posts</a><br><a rel="nofollow" href="/search?search_id=watchsearch&search_where=f1">Topic(s) being watched</a></strong></p><hr class="dashed"><p class="left-overview"><strong><a rel="nofollow" href="http://YOURURL" onclick="link_bbcode();return false">Copy BBCode URL</a><br><a rel="nofollow" href="javascript:void(0);" onclick="window.print();return false">Print this page</a></strong></p></div>

Then add in this in your CSS:
Code:
.nodisplay {
display: none;
}

Then add this jQuery in the javascript management and allow placement in all pages:
Code:
$(document).ready(function(){
$('.hoverme').hover(function(){
$('.nodisplay').toggleClass('nodisplay');
});
});

See if this works now. Smile
avatar
Japorized
Forumember

Male Posts : 310
Reputation : 3
Language : English
Location : Malaysia

http://infinityhub.ace.st

Back to top Go down

Solved Re: Arranging links system

Post by Luffy on Thu 31 Jul - 16:28:47

Now it shows the image i added there instead of the word Action and when i take my mouse over it nothing appears. Also, nothing appears if i click it now.. Sad



avatar
Luffy
Manager
Manager

Male Posts : 5267
Reputation : 567
Language : Greek, English
Location : Greece

https://www.crossroadz.net

Back to top Go down

Solved Re: Arranging links system

Post by Japorized on Thu 31 Jul - 16:33:43

I shouldn't have any actions when you click it cause I've changed it to hover.
Try using this jQuery instead of the one before.
Code:
$(document).ready(function(){
$('.hoverme').mouseenter(function() {
$('.nodisplay').removeClass('nodisplay');
});
$('.hoverme').mouseleave(function() {
$('this').next().addClass('nodisplay');
});
});
avatar
Japorized
Forumember

Male Posts : 310
Reputation : 3
Language : English
Location : Malaysia

http://infinityhub.ace.st

Back to top Go down

Solved Re: Arranging links system

Post by Luffy on Thu 31 Jul - 16:36:29

Hey,
Sorry i made a mistake and i had a code wrong. Now as soon as you hover the image it shows the links, but then they stay there. They don't disappear..



avatar
Luffy
Manager
Manager

Male Posts : 5267
Reputation : 567
Language : Greek, English
Location : Greece

https://www.crossroadz.net

Back to top Go down

Solved Re: Arranging links system

Post by Japorized on Thu 31 Jul - 16:39:24

Does the newer code not work?
avatar
Japorized
Forumember

Male Posts : 310
Reputation : 3
Language : English
Location : Malaysia

http://infinityhub.ace.st

Back to top Go down

Solved Re: Arranging links system

Post by Luffy on Thu 31 Jul - 16:44:54

It does.
As soon as i hover the image the box with the links appear but i want them to disappear after..



avatar
Luffy
Manager
Manager

Male Posts : 5267
Reputation : 567
Language : Greek, English
Location : Greece

https://www.crossroadz.net

Back to top Go down

Solved Re: Arranging links system

Post by Japorized on Thu 31 Jul - 16:50:10

Code:
$(document).ready(function(){
$('.hoverme').mouseenter(function() {
$('.nodisplay').removeClass('nodisplay');
});
$('.hoverme').mouseleave(function() {
$('.overview').addClass('nodisplay');
});
});

Try this and see if it works. Remember to hover out too.
avatar
Japorized
Forumember

Male Posts : 310
Reputation : 3
Language : English
Location : Malaysia

http://infinityhub.ace.st

Back to top Go down

Solved Re: Arranging links system

Post by Luffy on Thu 31 Jul - 16:55:30

Almost there.
Look,
It is the image and the box(with the links)
When i hover the image, the box appears. As soon as i move the mouse somewhere out of the box, the box disappears and the image is there.
That is how the system should work. The java you send last does not allow me now to click any link...



avatar
Luffy
Manager
Manager

Male Posts : 5267
Reputation : 567
Language : Greek, English
Location : Greece

https://www.crossroadz.net

Back to top Go down

Solved Re: Arranging links system

Post by Japorized on Thu 31 Jul - 17:02:25

Can I have a look at how it looks like now? A link to it would help a lot.
avatar
Japorized
Forumember

Male Posts : 310
Reputation : 3
Language : English
Location : Malaysia

http://infinityhub.ace.st

Back to top Go down

Solved Re: Arranging links system

Post by Luffy on Thu 31 Jul - 17:04:17

Try logging in with my test account to check it out. I will send you its information via pm.



avatar
Luffy
Manager
Manager

Male Posts : 5267
Reputation : 567
Language : Greek, English
Location : Greece

https://www.crossroadz.net

Back to top Go down

Solved Re: Arranging links system

Post by Japorized on Thu 31 Jul - 17:15:05

Code:
$(document).ready(function(){
$('.hoverme').mouseenter(function() {
$('.nodisplay').removeClass('nodisplay');
});
$('.overview').mouseleave(function() {
$(this).addClass('nodisplay');
});
});
Try this? I think I see the reason now but I'm not too sure how to solve it.
avatar
Japorized
Forumember

Male Posts : 310
Reputation : 3
Language : English
Location : Malaysia

http://infinityhub.ace.st

Back to top Go down

Solved Re: Arranging links system

Post by Luffy on Thu 31 Jul - 17:19:28

Yeap!! Your the man!! Working perfectly. Thanks! Solved!



avatar
Luffy
Manager
Manager

Male Posts : 5267
Reputation : 567
Language : Greek, English
Location : Greece

https://www.crossroadz.net

Back to top Go down

Solved Re: Arranging links system

Post by Ange Tuteur on Thu 31 Jul - 17:22:53

Topic archived

Have a good day. Smile
avatar
Ange Tuteur
Forumaster

Male Posts : 13194
Reputation : 2907
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum