Arranging links system
Page 1 of 1 • Share •
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..

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..
Re: Arranging links system
bump


|
Re: Arranging links system
Bump again.


|
Re: Arranging links system
Bump


|
Re: Arranging links system
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.


|
Re: Arranging links system
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>
Re: Arranging links system
@Japorized wrote:I'm not sure if this will work but I've found the code to it. Hope this helps?This is copied from the source code itself.
- 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>
Hello my friend and thanks for your reply,
Where am i supposed to put this code?
Re: Arranging links system
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>
Re: Arranging links system
That does something but doesn't give me the result i want! 



|
Re: Arranging links system
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.


|
Re: Arranging links system
- 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>
Re: Arranging links system
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.


|
Re: Arranging links system
Change the code to this:
Then add in this in your CSS:
Then add this jQuery in the javascript management and allow placement in all pages:
See if this works now.
- 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.

Re: Arranging links system
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.. 



|
Re: Arranging links system
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.
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');
});
});
Re: Arranging links system
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..
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..


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


|
Re: Arranging links system
- 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.
Re: Arranging links system
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...
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...


|
Re: Arranging links system
Can I have a look at how it looks like now? A link to it would help a lot.
Re: Arranging links system
Try logging in with my test account to check it out. I will send you its information via pm.


|
Re: Arranging links system
- Code:
$(document).ready(function(){
$('.hoverme').mouseenter(function() {
$('.nodisplay').removeClass('nodisplay');
});
$('.overview').mouseleave(function() {
$(this).addClass('nodisplay');
});
});
Re: Arranging links system
Yeap!! Your the man!! Working perfectly. Thanks! Solved!


|
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum