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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.