Solved

Help with coding -  basic web development

Posted on 2013-12-30
2
360 Views
Last Modified: 2014-01-02
See the example here:

http://www.ministryideaz.com/New-World-Translation-Reference-Edition-cover-p/bilar.htm

Waaaay at the bottom of the screen is a widget for chat.

This is based on the following HTML which is included in the template for my website:

<!--START Chat Widget -->
<!--If you already have jquery on the page you don't need to insert this script tag-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

<link href="https://d218iqt4mo6adh.cloudfront.net/assets/widget_embed_191.css" media="screen" rel="stylesheet" type="text/css" />
<!--If you already have fancybox on the page this script tag should be omitted-->
<script src="https://d218iqt4mo6adh.cloudfront.net/assets/widget_embed_libraries_191.js" type="text/javascript"></script>

                <script>
                        
                        // ********************************************************************************
                        // This needs to be placed in the document body where you want the widget to render
                        // ********************************************************************************
                        
                        new DESK.Widget({ 
                                version: 1, 
                                site: 'ministryideaz.desk.com', 
                                port: '80', 
                                type: 'chat', 
                                displayMode: 1,  //0 for popup, 1 for lightbox
                                features: {  
                                        offerAlways: false, 
                                        offerAgentsOnline: false, 
                                        offerRoutingAgentsAvailable: true,  
                                        offerEmailIfChatUnavailable: true 
                                },  
                                fields: { 
                                        ticket: { 
                                                // desc: &#x27;&#x27;,
                                // labels_new: &#x27;&#x27;,
                                // priority: &#x27;&#x27;,
                                // subject: &#x27;&#x27;,
                                // custom_order_number: &#x27;&#x27;,
                                // custom_topic: &#x27;&#x27;
                                        }, 
                                        interaction: { 
                                                // email: &#x27;&#x27;,
                                // name: &#x27;&#x27;
                                        }, 
                                        chat: { 
                                                //subject: '' 
                                        }, 
                                        customer: { 
                                                // company: &#x27;&#x27;,
                                // desc: &#x27;&#x27;,
                                // first_name: &#x27;&#x27;,
                                // last_name: &#x27;&#x27;,
                                // locale_code: &#x27;&#x27;,
                                // title: &#x27;&#x27;,
                                // custom_orderid: &#x27;&#x27;
                                        } 
                                } 
                        }).render();  
                        
                        
                    var $ = jQuery.noConflict();
      
                        
                    $(document).ready(function() { 
                    
						$("#triggeremail").click(function() { $('#assistly-widget-1 a').click(); }); 
						setTimeout(function() {
						if ($(".a-desk-widget-chat").prop('href').indexOf("widget/emails/new") > -1){$(".a-assistly-widget-chat").hide();$("#assistly-widget-email").show();
						}
						else{$("#assistly-widget-1").show()
						}

													  }, 1000);

					 console.log($(".a-desk-widget-chat")); });
					 
					 
                        
                </script>
                
                
                
                
               <style>
				#assistly-widget-1 {
					display:none;
				}
				.assistly-widget a {
					min-height: 40px !important;
					width: 226px !important;
					background-image: url('https://desk-customers.s3.amazonaws.com/ministryideaz/online-csupport.png') !important;
					background-position: 0px 0px !important;
				}

				.assistly-widget a:hover {
					min-height: 40px !important;
					width: 226px !important;
					background-image: url('https://desk-customers.s3.amazonaws.com/ministryideaz/online-csupport-hover.png') !important;
					background-position: 0px 0px !important;
				}

				.hidden {
					display:none;
				}
				
				#triggeremail {
				min-height: 40px !important;
			    width: 226px !important;
				background-image: url('https://desk-customers.s3.amazonaws.com/ministryideaz/offline-csupport.png') !important;
				background-position: 0px 0px !important;
				display: block !important;
				}
				
				#triggeremail:hover {
				min-height: 40px !important;
			    width: 226px !important;
				background-image: url('https://desk-customers.s3.amazonaws.com/ministryideaz/offline-csupport-hover.png') !important;
				background-position: 0px 0px !important;
				display: block !important;
				cursor: pointer;
				}
				

				</style>
				
				
				
				<span class="assistly-widget hidden" id="assistly-widget-email" >
		<span id="triggeremail"></span>

				</span>

<!—END Chat Widget -->

Open in new window


What I would like to do is make this hover at the bottom of the page. I'm not sure if "hover" is the correct term. The idea is you shouldn't need to scroll to the bottom to see it. It should always be there.

Also I would prefer it to be bottom-right instead of bottom-left.

Any suggestions?
0
Comment
Question by:gregholl
2 Comments
 
LVL 5

Accepted Solution

by:
DamjanDemsar earned 500 total points
ID: 39747696
add
position:fixed;
bottom: 5px;
right: 5px;

to the #trigeremail css in bilar.htm (line 1545)
0
 
LVL 1

Author Closing Comment

by:gregholl
ID: 39750885
You are an absolute genius! hehe. Thanks so much!
0

Featured Post

Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn how to count occurrences of each item in an array.

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question