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.

How to make forum widgets expandable/retractable?

View previous topic View next topic Go down

Solved How to make forum widgets expandable/retractable?

Post by Alexander Moore on July 31st 2012, 6:50 pm

On this forum I really like the ability to hide the widgets.

Could I have the code for that? I just need to add it in a widget without a table type, right?


Last edited by Alexander Moore on August 1st 2012, 8:40 am; edited 1 time in total

Alexander Moore
Forumember

Male Posts : 210
Reputation : 2
Language : English (USA), Mandarin Chinese || HTML, CSS, Limited JavaScript.
Location : Suzhou, China

Back to top Go down

Solved Re: How to make forum widgets expandable/retractable?

Post by Sir Chivas™ on July 31st 2012, 7:06 pm

Hi, Hello

Are you asking to toggle the widgets? Yes this forum doesn't use a table.

Here this might help: http://www.avacweb.com/t117-16-single-widget-toggle?highlight=Toggle



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6783
Reputation : 430
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: How to make forum widgets expandable/retractable?

Post by Alexander Moore on July 31st 2012, 7:26 pm

No, I'm talking about this button :


Alexander Moore
Forumember

Male Posts : 210
Reputation : 2
Language : English (USA), Mandarin Chinese || HTML, CSS, Limited JavaScript.
Location : Suzhou, China

Back to top Go down

Solved Re: How to make forum widgets expandable/retractable?

Post by Sir Chivas™ on July 31st 2012, 7:30 pm

That's a widget toggle? I don't know thr exact code of that one. Sorry, that's all I can provide. Unless someone else, does.



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6783
Reputation : 430
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: How to make forum widgets expandable/retractable?

Post by Alexander Moore on July 31st 2012, 7:44 pm

Well I'm trying to find the info I need by disassembling the site in Chrome (I love Chrome for this feature, it's great for developers).

So far, I found this

Code:
<div id="forum-widget" style="cursor: pointer; height: 13px; width: 16px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; position: relative; bottom: -15px; float: right; background-image: url(http://illiweb.com/fa/optimisation_fdf/common/arrow_rtl.png); background-color: rgb(229, 241, 249); background-position: 0px -13px; background-repeat: no-repeat no-repeat; " 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 -13px'); 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'); }"></div>

Hopefully an Admin can tell me how it works more simply so I don't have to work it out Razz by a quick analysis I'm pretty sure I need a Javascript page and/or edit the CSS too.

I'm still looking through to find related scripts. I think and Admin will reply faster than I can finish though, unless they reply realllyyyyy slow.

Alexander Moore
Forumember

Male Posts : 210
Reputation : 2
Language : English (USA), Mandarin Chinese || HTML, CSS, Limited JavaScript.
Location : Suzhou, China

Back to top Go down

Solved Re: How to make forum widgets expandable/retractable?

Post by Sanket on July 31st 2012, 9:19 pm


Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Solved Re: How to make forum widgets expandable/retractable?

Post by Alexander Moore on August 1st 2012, 7:02 am

Well, for one the pre-defined image he made has been deleted, haha.

But even after replacing the graphic, now all I have is an arrow that changes direction when you click it - it does nothing to hide the widgets.

Perhaps this tutorial is no longer valid and need updating? It's from 2010.

Edit : And it's out of place to. It's positioned nicely on this forum, but in the code there it made it appear really low and to the left.

Edit 2 : Ah yes! I got it to work!

I replaced what was originally in the top widget with the code I found by disassembling the site. After doing that, it worked! You might want to update that tutorial, I think it might be outdated or something.

But now I have a new problem - After hiding the widgets, the arrow graphic will also disappear. How to fix this?

Also, the arrow appears in the wrong default position.

Edit 3 :

Ah, I fixed it by finding the correct second code in disassembling the site.

The correct second code is :
Code:
 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');}

All I had to do was wrap it in <script type="text/javascript"></script> and it worked.

Now all I have to do is figure out how to get the arrows to point the right way by default Razz

Alexander Moore
Forumember

Male Posts : 210
Reputation : 2
Language : English (USA), Mandarin Chinese || HTML, CSS, Limited JavaScript.
Location : Suzhou, China

Back to top Go down

Solved Re: How to make forum widgets expandable/retractable?

Post by Sanket on August 1st 2012, 7:33 am

Which part is missing in the tutorial?
In the top widget code add this in the beginning & tell me if it positions it perfectly?
Code:
<br />

I have tried the rest of the tutorial & the image appears perfectly.
http://troubleshoot.forumotion.net/forum

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Solved Re: How to make forum widgets expandable/retractable?

Post by Alexander Moore on August 1st 2012, 8:04 am

With the new codes from this site it works fine. The ones in the tutorial didn't work out.

Nah, that didn't change anything. All I need is to get the arrows to face the right way. They only face the right way after clicking it at least once.

Alexander Moore
Forumember

Male Posts : 210
Reputation : 2
Language : English (USA), Mandarin Chinese || HTML, CSS, Limited JavaScript.
Location : Suzhou, China

Back to top Go down

Solved Re: How to make forum widgets expandable/retractable?

Post by Sanket on August 1st 2012, 8:11 am

I have tried the same codes in the tutorial, without any problems. I just added the image url from this forum. Also, added that
Code:
<br />
before the top widget code & it works fine as you see it on my test forum.

Did you check the place where i tried on my test forum?

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Solved Re: How to make forum widgets expandable/retractable?

Post by Alexander Moore on August 1st 2012, 8:36 am

Sorry for the confusion, I found the issue.

I'm using the image from here as well, if that's not a problem, until I make my own which will be soon.

My mistake was using the image : http://illiweb.com/fa/optimisation_fdf/common/arrow_rtl.png

After looking at that url for a moment I thought "Hmm...rtl probably stands for "Right to Left" considering the image...what if I change it to ltr?"

And I changed it to http://illiweb.com/fa/optimisation_fdf/common/arrow_ltr.png and now it works fine.

Thanks for the help! Thanked, rep given, marking as solved after my 60 second posting wait (the flood control operates on edits as well as posts, haha).

Oh, and I thought I'd let you know : Like on my forum, the images here aren't resizing on the portal. I fixed it with CSS, if you didn't see my posts about image resizing.



Might wanna pass that up to the techies (if you're not one of them) Razz

Alexander Moore
Forumember

Male Posts : 210
Reputation : 2
Language : English (USA), Mandarin Chinese || HTML, CSS, Limited JavaScript.
Location : Suzhou, China

Back to top Go down

Solved Re: How to make forum widgets expandable/retractable?

Post by Sanket on August 1st 2012, 9:12 am

Thanks .
Topic Solved & Locked

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.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