Advertisement:

Author Topic: TIP: Easily create a floating \ following quick replay box  (Read 22920 times)

Offline IdanC

  • Jr. Member
  • **
  • Posts: 214
  • Gender: Male
    • mila.fm
TIP: Easily create a floating \ following quick replay box
« on: July 18, 2010, 10:20:05 AM »
want your users to comment more easily? want to show off with a lean trick? make the quick reply box follow them!

for example: http://mila.fm/index.php?topic=2876.0
(non-english, but try clicking inside the textarea on the floating box at the bottom left, you'll get the point)
tested on ie7 ie8 ff3 & chrome

1. add this to your css:
Code: [Select]
#quickreplybox {
bottom:10px;
left:-10px;
display:block;
max-width:900px;
position:fixed;
width:350px;
z-index:1000;
}

basically, your done! this will work just fine. but if you want to have that cool expanding feature, there are just a few more changes -

2. edit Display.template.php, and find
Code: [Select]
if ($context['can_reply'] && !empty($options['display_quick_reply']))
{

3. after that add
Code: [Select]
echo '
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
 
  //have the quick reply box expand on focus
$("#quickreplybox textarea").focus(function() {
$("#quickreplybox").animate({
width: "900px"
  }, 500);
});

// be sure to know when the mouse is over the quick reply box (we will need it soon)
var mouse_is_inside = false;
    $("#quickreplybox").hover(function(){
        mouse_is_inside=true;
    }, function(){
        mouse_is_inside=false;
    });

// if the mouse is clicked somewhere OUTSIDE the reply box, fold it back
    $(document).mouseup(function(){
if(! mouse_is_inside) {
$("#quickreplybox").animate({
width: "350px"
}, 500);
};
    });

  });
</script>';
this nifty little piece of code first links to the jquery library (so if you already use it, no need for that), and then adds the code to make the effect (with enclosed comments)

of course you can and should fancy it up a little, maybe play with the hight and so on, but i'll leave that to your imagination. i'd also love to hear comments and share improvements.

---
moderators - a promotion to the tip board would be much appreciated 

bloc

  • Guest
Re: TIP: Easily create a floating \ following quick replay box
« Reply #1 on: July 18, 2010, 10:31:17 AM »
Nice one, quite cool to have quickreply present there. :) Could even perhaps be fully expanded at the bottom and just stay there like a frame. In any case - very interesting.

Offline DoctorMalboro

  • SMF Hero
  • ******
  • Posts: 9,084
  • Gender: Male
  • うまいいいいいい!!!!!
    • @DoctorMalboro on Twitter
    • Personal website
Re: TIP: Easily create a floating \ following quick replay box
« Reply #2 on: July 18, 2010, 04:20:32 PM »
Cool... in wich version this work?

Offline IdanC

  • Jr. Member
  • **
  • Posts: 214
  • Gender: Male
    • mila.fm
Re: TIP: Easily create a floating \ following quick replay box
« Reply #3 on: July 18, 2010, 11:46:29 PM »
thanks Bloc!

Malboro, it's tested on rc3, but i think that with the proper adjustments it can easily be adopted to 1.11

Offline Masterd

  • SMF Hero
  • ******
  • Posts: 3,887
  • Gender: Male
  • Sapienti satis.
Re: TIP: Easily create a floating \ following quick replay box
« Reply #4 on: July 24, 2010, 10:14:07 AM »
Nice tip.
My Mods

Sugested that too. Hey ho. I'd link you to the original discussion but it's not visible to most people (seekrit team board stuff that is more dangerous than wikileaks).


Don't PM me for support! Use the appropriate support board!

Offline davyj

  • Newbie
  • *
  • Posts: 9
Re: TIP: Easily create a floating \ following quick replay box
« Reply #5 on: July 27, 2010, 04:15:39 AM »
great tip...thanks

Offline Shole

  • Semi-Newbie
  • *
  • Posts: 96
    • Shole Company
Re: TIP: Easily create a floating \ following quick replay box
« Reply #6 on: July 28, 2010, 04:50:47 PM »
hmm... the text on the test site goes from left to right does it go from right to left in the code given?
Betvine that question this is awesome thing

Offline !RFAN

  • Sr. Member
  • ****
  • Posts: 716
  • Gender: Male
Re: TIP: Easily create a floating \ following quick replay box
« Reply #7 on: September 03, 2010, 01:20:48 PM »
even a guest can write there???
i mean if i have not given permission to gusts then what???

Offline IdanC

  • Jr. Member
  • **
  • Posts: 214
  • Gender: Male
    • mila.fm
Re: TIP: Easily create a floating \ following quick replay box
« Reply #8 on: September 03, 2010, 01:27:09 PM »
with or without the inspiration of this tip, a mod was launched that achieves a similar goal, have a go at it.

Offline !RFAN

  • Sr. Member
  • ****
  • Posts: 716
  • Gender: Male
Re: TIP: Easily create a floating \ following quick replay box
« Reply #9 on: September 03, 2010, 02:02:37 PM »
urs was pretty...
i ant use this mod coz i already have a bottom bar

Offline IdanC

  • Jr. Member
  • **
  • Posts: 214
  • Gender: Male
    • mila.fm
Re: TIP: Easily create a floating \ following quick replay box
« Reply #10 on: September 03, 2010, 02:05:28 PM »
oh, i'm flattered.

in that case, you say the problem is that the box appear even if user don't have reply permission?

Offline !RFAN

  • Sr. Member
  • ****
  • Posts: 716
  • Gender: Male
Re: TIP: Easily create a floating \ following quick replay box
« Reply #11 on: September 05, 2010, 09:13:09 PM »
i think so.. actually i dont know what permissions u have set for ur demo...thats why i asked whether this box is shown to guests also if they dnt have permissions to reply???

Offline IdanC

  • Jr. Member
  • **
  • Posts: 214
  • Gender: Male
    • mila.fm
Re: TIP: Easily create a floating \ following quick replay box
« Reply #12 on: September 06, 2010, 02:31:38 AM »
there shouldn't be such problem because this trick uses the original replybox, which only appears when permission allow it.

Offline !RFAN

  • Sr. Member
  • ****
  • Posts: 716
  • Gender: Male
Re: TIP: Easily create a floating \ following quick replay box
« Reply #13 on: September 06, 2010, 03:00:06 AM »
i'll use it then... btw.. that text direction problem has been resolved or not??

Offline IdanC

  • Jr. Member
  • **
  • Posts: 214
  • Gender: Male
    • mila.fm
Re: TIP: Easily create a floating \ following quick replay box
« Reply #14 on: September 06, 2010, 03:16:20 AM »
it's not a "problem", it's an character of the hebrew language, which is language of the demo site.

read the context man, don't just sample words...

btw, almost all old languages (such as hebrew and arabic) write from right to left, simply because it's the natural direction when you use a hammer and a chisel -



while later languages were born at time when ink and feather were popular, and to avoid smearing the ink with their palm the wrote from left to right.

and that's why so many middle eastern web designers go crazy and start sharing useless historical information in unrelated forums.

Offline !RFAN

  • Sr. Member
  • ****
  • Posts: 716
  • Gender: Male
Re: TIP: Easily create a floating \ following quick replay box
« Reply #15 on: September 06, 2010, 03:29:15 AM »
hey thanks for the info...  i liked this unrelated info :p

Offline lucas-ruroken

  • SMF Hero
  • ******
  • Posts: 4,907
  • Gender: Male
  • Adk Developer
    • lucas.ruroken on Facebook
    • lucasruroken on GitHub
Re: TIP: Easily create a floating \ following quick replay box
« Reply #16 on: September 09, 2010, 11:00:30 PM »
really nice tip ;)
Adk Portal 3.1 is coming....

Design your universe!

Offline Zirc

  • Semi-Newbie
  • *
  • Posts: 93
Re: TIP: Easily create a floating \ following quick replay box
« Reply #17 on: September 11, 2010, 03:24:45 PM »
Suppose I wanted the Quick Reply box to expand to the left instead of right because I've repositioned the box on my forums.  I would have to change the called .js script to do that wouldn't I?  Or is there something I can change in your code?

Offline IdanC

  • Jr. Member
  • **
  • Posts: 214
  • Gender: Male
    • mila.fm
Re: TIP: Easily create a floating \ following quick replay box
« Reply #18 on: September 11, 2010, 03:46:46 PM »
actually, i think that if you'll only change the css line "left:-10px;" to "right:-10px;", you should be fine...

Offline Zirc

  • Semi-Newbie
  • *
  • Posts: 93
Re: TIP: Easily create a floating \ following quick replay box
« Reply #19 on: September 11, 2010, 03:53:34 PM »
Perfect!! Thanks