TIP: Easily create a floating \ following quick reply box

Started by IdanC, July 18, 2010, 10:20:05 AM

Previous topic - Next topic

IdanC

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:
#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

if ($context['can_reply'] && !empty($options['display_quick_reply']))
{


3. after that add
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

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.

DoctorMalboro


IdanC

thanks Bloc!

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



Shole

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

!RFAN

even a guest can write there???
i mean if i have not given permission to gusts then what???


!RFAN

urs was pretty...
i ant use this mod coz i already have a bottom bar

IdanC

oh, i'm flattered.

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

!RFAN

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

IdanC

there shouldn't be such problem because this trick uses the original replybox, which only appears when permission allow it.

!RFAN

i'll use it then... btw.. that text direction problem has been resolved or not??

IdanC

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.

!RFAN

hey thanks for the info...  i liked this unrelated info :p

lucas-ruroken

Adk Portal 3.1 is coming....

Design your universe!

Zirc

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?

IdanC

actually, i think that if you'll only change the css line "left:-10px;" to "right:-10px;", you should be fine...


marwan

Please tell me which css shall I edit? Only index.css?

IdanC

yep, just paste it at the end, that should do the trick...

marwan


marwan


Advertisement: