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

View previous topic View next topic Go down

Solved Arranging links system

Post by Luffy on July 11th 2014, 12:08 pm

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

Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Arranging links system

Post by Luffy on July 14th 2014, 11:09 am

bump






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Arranging links system

Post by Luffy on July 16th 2014, 10:58 pm

Bump again.






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Arranging links system

Post by Luffy on July 18th 2014, 11:20 am

Bump






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Arranging links system

Post by SocialAcademy on July 18th 2014, 12:15 pm

Where exactly do you want to show the user action ?

SocialAcademy
Forumember

Male Posts : 141
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 July 18th 2014, 2:32 pm

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.






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Arranging links system

Post by Luffy on July 20th 2014, 12:11 am

bump

Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Arranging links system

Post by Luffy on July 30th 2014, 12:07 pm

Bump

Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Arranging links system

Post by Luffy on July 31st 2014, 2:30 pm

bump

Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Arranging links system

Post by Japorized on July 31st 2014, 2:49 pm

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
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 July 31st 2014, 2:59 pm

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

Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Arranging links system

Post by Japorized on July 31st 2014, 3:07 pm

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)

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 July 31st 2014, 3:33 pm

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






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Arranging links system

Post by Japorized on July 31st 2014, 3:34 pm

How does it look like now?

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 July 31st 2014, 3:45 pm

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.






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Arranging links system

Post by Japorized on July 31st 2014, 3:48 pm

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.

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 July 31st 2014, 4:00 pm

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.






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Arranging links system

Post by Japorized on July 31st 2014, 4:08 pm

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

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 July 31st 2014, 4:28 pm

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






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Arranging links system

Post by Japorized on July 31st 2014, 4:33 pm

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

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 July 31st 2014, 4:36 pm

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






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Arranging links system

Post by Japorized on July 31st 2014, 4:39 pm

Does the newer code not work?

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 July 31st 2014, 4:44 pm

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






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Arranging links system

Post by Japorized on July 31st 2014, 4:50 pm

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.

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 July 31st 2014, 4:55 pm

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






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Arranging links system

Post by Japorized on July 31st 2014, 5:02 pm

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

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 July 31st 2014, 5:04 pm

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






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Arranging links system

Post by Japorized on July 31st 2014, 5:15 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.

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 July 31st 2014, 5:19 pm

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






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Arranging links system

Post by Ange Tuteur on July 31st 2014, 5:22 pm

Topic archived

Have a good day. Smile

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


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