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.

Show / Hide Widgets

View previous topic View next topic Go down

Solved Show / Hide Widgets

Post by J0k3R^ on April 13th 2014, 9:29 pm

Hello.

I recently started working with my forum after some months and I found some problems. One of themhas to do with some "show/hide widgets" codes. I dont remember where I had found these codes, maybe from a tutorial here, maybe from avacweb but I dont remember.

Anyway, i made a very short youtube video to show u how it looks like. At beginning its normal, when i press the arrow to hide the widgets, its getting hidden with an ugly way and also when i press the arrow again to show the widgets, the whole widgets bar is over the main categories. When i refresh the page (click on logo) its again normal view.

The video:

My forum:http://myplanet.forumgreek.com/

Codes: (1 widget on top of all widgets:)

Code:
<div onclick="jQuery('#right').animate({width:'toggle',height:'toggle',opacity:'toggle'},1000); if(my_getcookie('forum-widget')=='0') { my_setcookie('forum-widget','1',0,0); jQuery('#forum-widget').css('background-position','0 -0px'); jQuery('#content-container div#content').css('margin-right','189px');} else { my_setcookie('forum-widget','0',1,0); jQuery('#forum-widget').css('background-position','0 0px'); jQuery('#content-container div#content').css('margin-right','0px'); }" style="cursor: pointer; height: 32px; width: 32px; top: 50px; left: 100 px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; position: relative; bottom: -15px; float: right; background: transparent url(http://i36.servimg.com/u/f36/17/06/15/51/tab-co10.png) no-repeat 0 -0px;" id="forum-widget">
</div><br /><br /><br /><br />


And one more widget at bottom of them:

Code:
<script type="text/javascript"> jQuery('#forum-widget').insertBefore('#right'); if(my_getcookie('forum-widget')=='0') {jQuery('#right').animate({width:'toggle',height:'toggle',opacity:'toggle'},0); jQuery('#forum-widget').css('background-position','0 0px'); jQuery('#content-container div#content').css('margin-right','0px');} </script>



Im not very good at english but i hope u understood what im trying to tell u. Thanks for ur help guys. Please tell me whats wrong and what i have to change.

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: Show / Hide Widgets

Post by SLGray on April 13th 2014, 10:05 pm

So when you hide the widgets and reopen them, they cover part of the forums?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36735
Reputation : 2447
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Show / Hide Widgets

Post by Ange Tuteur on April 13th 2014, 11:58 pm

Hello J0k3R^,

Try this :

Change your top widget code to :
Code:
<div onclick="jQuery('#right').animate({width:'toggle',height:'toggle',opacity:'toggle'},1000); if(my_getcookie('forum-widget')=='0') { my_setcookie('forum-widget','1',0,0); jQuery('#forum-widget').css('background-position','0 -0px'); jQuery('#content-container div#content').css('margin-right','200px').css('transition','1000ms');} else { my_setcookie('forum-widget','0',1,0); jQuery('#forum-widget').css('background-position','0 0px'); jQuery('#content-container div#content').css('margin-right','0px').css('transition','1000ms'); }" style="cursor: pointer; height: 32px; width: 32px; top: 50px; left: 100 px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; position: relative; bottom: -15px; float: right; background: transparent url(http://i36.servimg.com/u/f36/17/06/15/51/tab-co10.png) no-repeat 0 -0px;" id="forum-widget">
</div><br /><br /><br /><br />

Change your bottom widget code to :
Code:
if(my_getcookie('forum-widget')=='0') {jQuery('#right').animate({width:'toggle',height:'toggle',opacity:'toggle'},0); jQuery('#forum-widget').css('background-position','0 0px'); jQuery('#content-container div#content').css('margin-right','0px').css('transition','1000ms');} </script>

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Show / Hide Widgets

Post by J0k3R^ on April 14th 2014, 6:40 am

@SLGray wrote:So when you hide the widgets and reopen them, they cover part of the forums?

Yeah, thats right.
and when i simply close them, they close with an ugly way comparing with other forums using something similar 'show/hide widgets'

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: Show / Hide Widgets

Post by J0k3R^ on April 14th 2014, 6:50 am

@Ange Tuteur wrote:Hello J0k3R^,

Try this :

Change your top widget code to :
Code:
<div onclick="jQuery('#right').animate({width:'toggle',height:'toggle',opacity:'toggle'},1000); if(my_getcookie('forum-widget')=='0') { my_setcookie('forum-widget','1',0,0); jQuery('#forum-widget').css('background-position','0 -0px'); jQuery('#content-container div#content').css('margin-right','200px').css('transition','1000ms');} else { my_setcookie('forum-widget','0',1,0); jQuery('#forum-widget').css('background-position','0 0px'); jQuery('#content-container div#content').css('margin-right','0px').css('transition','1000ms'); }" style="cursor: pointer; height: 32px; width: 32px; top: 50px; left: 100 px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; position: relative; bottom: -15px; float: right; background: transparent url(http://i36.servimg.com/u/f36/17/06/15/51/tab-co10.png) no-repeat 0 -0px;" id="forum-widget">
</div><br /><br /><br /><br />

Change your bottom widget code to :
Code:
if(my_getcookie('forum-widget')=='0') {jQuery('#right').animate({width:'toggle',height:'toggle',opacity:'toggle'},0); jQuery('#forum-widget').css('background-position','0 0px'); jQuery('#content-container div#content').css('margin-right','0px').css('transition','1000ms');} </script>


Okey, I tried your codes and the result is to dissapear the arrow when i have to reopen the widgets and also they r hidding with 2 different ways xD


J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: Show / Hide Widgets

Post by Ange Tuteur on April 14th 2014, 12:35 pm

Replace your top widget by :
Code:
<div onclick="jQuery('#right').animate({width:'toggle',height:'toggle',opacity:'toggle'},1000); if(my_getcookie('forum-widget')=='0') { my_setcookie('forum-widget','1',0,0); jQuery('#forum-widget').css('background-position','0 -0px'); jQuery('#content-container div#content').css('margin-right','200px');} else { my_setcookie('forum-widget','0',1,0); jQuery('#forum-widget').css('background-position','0 0px'); jQuery('#content-container div#content').css('margin-right','0px').css('transition','1000ms'); }" style="cursor: pointer; height: 32px; width: 32px; top: 50px; left: 100 px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; position: relative; bottom: -15px; float: right; background: transparent url(http://i36.servimg.com/u/f36/17/06/15/51/tab-co10.png) no-repeat 0 -0px;" id="forum-widget">
</div><br /><br /><br /><br />

Replace your bottom widget by :
Code:
<script type="text/javascript"> jQuery('#forum-widget').insertBefore('#right'); if(my_getcookie('forum-widget')=='0') {jQuery('#right').animate({width:'toggle',height:'toggle',opacity:'toggle'},0); jQuery('#forum-widget').css('background-position','0 0px'); jQuery('#content-container div#content').css('margin-right','0px').css('transition','1000ms');} </script>

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Show / Hide Widgets

Post by J0k3R^ on April 14th 2014, 1:18 pm

@Ange Tuteur wrote:Replace your top widget by :
Code:
<div onclick="jQuery('#right').animate({width:'toggle',height:'toggle',opacity:'toggle'},1000); if(my_getcookie('forum-widget')=='0') { my_setcookie('forum-widget','1',0,0); jQuery('#forum-widget').css('background-position','0 -0px'); jQuery('#content-container div#content').css('margin-right','200px');} else { my_setcookie('forum-widget','0',1,0); jQuery('#forum-widget').css('background-position','0 0px'); jQuery('#content-container div#content').css('margin-right','0px').css('transition','1000ms'); }" style="cursor: pointer; height: 32px; width: 32px; top: 50px; left: 100 px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; position: relative; bottom: -15px; float: right; background: transparent url(http://i36.servimg.com/u/f36/17/06/15/51/tab-co10.png) no-repeat 0 -0px;" id="forum-widget">
</div><br /><br /><br /><br />

Replace your bottom widget by :
Code:
<script type="text/javascript"> jQuery('#forum-widget').insertBefore('#right'); if(my_getcookie('forum-widget')=='0') {jQuery('#right').animate({width:'toggle',height:'toggle',opacity:'toggle'},0); jQuery('#forum-widget').css('background-position','0 0px'); jQuery('#content-container div#content').css('margin-right','0px').css('transition','1000ms');} </script>

Okey thats very good and its working. Thank you very much for help.:wouhou:

Edit: one more small thing if u can make, i will be more satisfied.
see before [close and open widgets] and after it: I try to tell u if u could just make it look same with "b4"
if not its okey, i just wanted to solve the main problem Smile


J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: Show / Hide Widgets

Post by Ange Tuteur on April 14th 2014, 1:23 pm

Change your top widget to :
Code:
<div onclick="jQuery('#right').animate({width:'toggle',height:'toggle',opacity:'toggle'},1000); if(my_getcookie('forum-widget')=='0') { my_setcookie('forum-widget','1',0,0); jQuery('#forum-widget').css('background-position','0 -0px'); jQuery('#content-container div#content').css('margin-right','203px');} else { my_setcookie('forum-widget','0',1,0); jQuery('#forum-widget').css('background-position','0 0px'); jQuery('#content-container div#content').css('margin-right','0px').css('transition','1000ms'); }" style="cursor: pointer; height: 32px; width: 32px; top: 50px; left: 100 px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; position: relative; bottom: -15px; float: right; background: transparent url(http://i36.servimg.com/u/f36/17/06/15/51/tab-co10.png) no-repeat 0 -0px;" id="forum-widget">
</div><br /><br /><br /><br />

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Show / Hide Widgets

Post by J0k3R^ on April 14th 2014, 1:29 pm

thank you!!!

lock the topic, problem solved!!Smile

J0k3R^
Forumember

Male Posts : 742
Reputation : 28
Language : Greek > English > Russian > Spanish
Location : C:\>r00t

http://fmplanet.forumgreek.com

Back to top Go down

Solved Re: Show / Hide Widgets

Post by Jophy on April 14th 2014, 1:52 pm

Solved

Jophy
ForumGuru

Male Posts : 17924
Reputation : 835
Language : English
Location : Somewhere

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