Need to reposition image button using javascript instead of CSS.

I am a webmaster, and the developer has written an app for online chat/help.  The image button always appears in the upper left hand corner and because of the javascript that is running the code, CSS will NOT work to adjust the position.  How do I add to the below code so that the .gif will appear centered in a div p or span?  I want to move it from the upper left hand corner to below "Basic Insurance Information".  No matter where I put the code the developer gave me to insert in the html page, the image button will always be in the upper left hand corner (see image).


//<script>

// Default window ornaments for the live help dialog
var _liveHelpDialogFeature = "status=1,width=500,height=400,resizable=1";



function WriteLiveSupportButton()
{


	var ImageURL='https://doinetqa.illinois.gov/Applications/CuteLiveSupport/CuteSoft_Client/CuteChat/images/141x44-offline.gif';

	ImageURL= "<img title=\"support chat\" src=\""+ImageURL+"\" border=0>";

	// write the live support button to the page
	document.write('<a href=\"###\" onclick=\"OpenLiveSupport()\">'+ImageURL+'</a>');

}

WriteLiveSupportButton();

Open in new window

Offline.jpg
smitty62Asked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
try this :
//<script>

// Default window ornaments for the live help dialog
var _liveHelpDialogFeature = "status=1,width=500,height=400,resizable=1";


/*
function WriteLiveSupportButton()
{



	ImageURL= "<img title=\"support chat\" src=\""+ImageURL+"\" border=0>";

	// write the live support button to the page
	document.write('<a href=\"###\" >'+ImageURL+'</a>');

}

WriteLiveSupportButton();
*/

jQuery(function($) {
	var img = "<img style='margin-left:auto;margin-right: auto;display: block;' src='https://doinetqa.illinois.gov/Applications/CuteLiveSupport/CuteSoft_Client/CuteChat/images/141x44-offline.gif'/>";
	var link = "<a href='#' id='lnk_openLiveSupport'>" + img + "</a>";
	$("<div>" + link + "</div>").insertAfter("#general .box:eq(0) h2");
	$("#lnk_openLiveSupport").click(OpenLiveSupport);

});

Open in new window


chat
0
 
Brandon LyonSenior Frontend DeveloperCommented:
Unless you position the element using CSS or JS, the image is going to appear wherever you insert it into the markup. If it's after the content then it will go at the bottom of the content.

I'm not sure exactly what would prevent CSS from working in this case to move the item. It's really difficult to diagnose the problem without contextual HTML, CSS, and JS. Based on what you've provided I don't see why CSS would't work.
0
 
smitty62Author Commented:
I can put the script line ANYWHERE in the html and it will always appear in the upper left hand corner...believe me I tried.  Creating a CSS class to try to move it doesn't work either.  The js seems to be overriding the CSS.  

Is there a way I can write javascript code using x & y coordinates and getting that to work in a div?

<script id="LiveSupportVisitorMonitorScript" src="https://doinetqa.illinois.gov/Applications/CuteLiveSupport/CuteSoft_Client/CuteChat/Support-Visitor-monitor-crossdomain.js.aspx"></script>

Open in new window

0
 
smitty62Author Commented:
Yes, that looks like it will work.  Thank you.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.