Arranging links system

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

bump

Bump again.

Bump

Where exactly do you want to show the user action ?

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.

bump

Bump

bump

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.

@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?

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)

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

How does it look like now?

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.

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.

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.

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.

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

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');
});
});

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

Does the newer code not work?

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

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.

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

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

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

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.

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

Topic archived

Have a good day.