Chat widget development

View previous topic View next topic Go down

Chat widget development

Post by rabid squirrel on Fri Dec 26, 2014 3:34 am

Working with @Conundrumer on this in the chat and decided to put it in a thread.

Code:
<p>
            <script>
jQuery(window).scroll(function(){
    jQuery("#fixedChat").css("top",Math.max(0,340-jQuery(this).scrollTop()));
});
</script>
</p>
<div id="fixedChat" style="position:fixed;top:340px;padding-top:10px;">
            <iframe src="http://cdn.livestream.com/embed/WRTL?layout=6&height=400&width=300&showTimestamp=true" style="border: 0px none; outline: 0px none; width: 280px; height: 350px;" bgcolor="#ffffff" scrolling="no" frameborder="0"></iframe>        
   <div style="font-size: 11px;padding-top:10px;text-align:center;width:300px">
               Watch <a href="http://www.livestream.com/?utm_source=lsplayer&utm_medium=embed&utm_campaign=footerlinks" title="live streaming video">live streaming video</a> from <a href="http://www.livestream.com/WRTL?utm_source=lsplayer&utm_medium=embed&utm_campaign=footerlinks" title="Watch WRTL at livestream.com">WRTL</a> at livestream.com        
   </div><iframe src="http://cdn.livestream.com/embed/WRTL?layout=4&height=340&width=560&autoplay=false" style="border: 0px none; outline: 0px none; width: 280px; height: 200px;" scrolling="no" frameborder="0"></iframe>        
   <div style="font-size: 11px;padding-top:10px;text-align:center;width:560px">
                      
   </div>
            <br />        
   <p>
                      
   </p>
</div><style>li .mainmenu[href="/search"] { display: none; }</style><style>li .mainmenu[href="/groups"] { display: none; }</style><style>li .mainmenu[href="/calendar"] { display: none; }</style><style>li .mainmenu[href="/faq"] { display: none; }</style>

1. Horizontal scrolling
- If window is resized so that chat is not fully in view, and user scrolls to the right, chat should track with the page horizontally.

2. Dynamically stretch chat vertically to fill window
- Vertical size of chat should be dependent on distance from top of chat to bottom of window
- Chat should resize when window is resized vertically
- Leave enough space to see Livestream embed below chat.

3. Hide/show toggle
- Add a "hide chat" button
- When clicked, chat/stream disappears. is replaced with button that says "click to activate chat" [better: widget width shrinks / minimizes, replaced with small button]
- Chat no longer loads for that member when they open a new page. Instead, only "click to activate chat" button loads
- If the button is clicked the chat/stream reappears, and reappears for any page loaded after that.
- If a user goes "offline" (no activity for 30mins), if the chat was closed when they left, when they come back the chat will be "open"

_________________
Support My Art
A playlist of my best tracks
To keep up with what I'm up to in the world of Line Rider, follow me:
My Twitter | My Tumblr | My Twitch
(You can also follow my patreon and see all public posts completely for free)
avatar
rabid squirrel
Member

I'm the artsy guy round here

Community Pick: Braggadocio
3rd place in Tournament of Legends 4th place in Tournament of Legends

View user profile http://www.benjaminharveydesign.com/

Back to top Go down

View previous topic View next topic Back to top

- Similar topics

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