Solved

Floating a module outside the template

Posted on 2010-11-10
26
1,533 Views
Last Modified: 2012-05-10
Ok what I'm trying to achieve at the moment is use our new live chat software in the same way we were using our old free software.
www.itthatworks.com.au
On the right hand side is the old software, floating at the bottom right of the page at all times. At the very bottom left is our new software. Basically we want it to "float" at the bottom of the users screen like the old one currently does.

Normally in this situation I would just reverse engineer the code off the old chat module but it gets all the positioning info as well as pretty much everything else from there website so the code is not accessible.

I've started by giving the new chat module it's own position in the joomla backend (live1) and need to work out where to go from here.

Any help is greatly appreciated.
0
Comment
Question by:Fordster55
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 15
  • 11
26 Comments
 
LVL 11

Accepted Solution

by:
Amanda Watson earned 500 total points
ID: 34109074
0
 
LVL 11

Expert Comment

by:Amanda Watson
ID: 34109170
Something like this on this page...would that work
http://tawfa.com.au

the sheep and the facebook icon how it floats...did you want that?

I used dynamic drive to do that, let me know and I will show you how

Its bascially using this code here:
http://www.dynamicdrive.com/dynamicindex4/logo.htm

0
 
LVL 1

Author Comment

by:Fordster55
ID: 34109197
I have tried some of the extensions but nothing so far has all the features I need.

The closest is R3D floater but it can only display in a static location not float to the same position on the browser. So when users scroll down it doesn't follow.

The tutorial posted on the forum is not working for me either. If I can get the code posted there working It should be the solution to my problem but I'm having no luck at all.

Fatal error: Call to undefined function mosCountModules() in /home/itthatwo/public_html/templates/itthatworksdraft2/index.php on line 126

line 126:    <?php if (mosCountModules('float')) mosLoadModules('float'); ?>
0
Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

 
LVL 1

Author Comment

by:Fordster55
ID: 34109204
Yea the facebook and twittter floating icons. They are what I am looking for. They move with the scrolling page.

I will try out that code now :)
0
 
LVL 1

Author Comment

by:Fordster55
ID: 34109246
I added the code to my template index.php and uploaded the .js file to the same folder but nothing is appearing on the website.

Using default settings I should be seeing a green d in the bottom right corner.. but nothings there

Any suggestions?
0
 
LVL 1

Author Comment

by:Fordster55
ID: 34109306
Ok the .js file had to be in the site root not the template folder.

I have everything working but the image i want to display is powered by javascript.

Attached is the code that I want to display. When I put that in the logoHTML: field it does not display.

Is there any way to make this work?
<!-- BEGIN PHP Live! code, (c) OSI Codes Inc. -->
<script language="JavaScript" src="http://itthatworks.com.au/live/js/status_image.php?base_url=http://itthatworks.com.au/live&l=admin&x=1&deptid=0&"><a href="http://www.phplivesupport.com"></a></script>
<!-- END PHP Live! code : (c) OSI Codes Inc. -->

Open in new window

0
 
LVL 11

Expert Comment

by:Amanda Watson
ID: 34109324
That code is actually for static images isn't it...so now we need to somehow embed your code instead of the image...

We may need to find a different script so that you can load a module into that position instead of an image.

I wonder, can you add <?php if (mosCountModules('float')) mosLoadModules('float'); ?>  into the javascript of the staticlogo then add your code into a custom module, (or mod_html)?
0
 
LVL 1

Author Comment

by:Fordster55
ID: 34109347
No such luck. The php isn't accepted in the staticlogo.js just as the original script was. Just doesnt't display anything.

0
 
LVL 11

Expert Comment

by:Amanda Watson
ID: 34109401
0
 
LVL 1

Author Comment

by:Fordster55
ID: 34113271
I will give that a test in the morning.

Looks promising though :)

On a side note. How did you create the image scroller on http://tawfa.com.au? It's been amazing me all afternoon.
0
 
LVL 11

Expert Comment

by:Amanda Watson
ID: 34114465
That feature was actually part of a template I got from Rockettheme...Template monster do one as well.

Just a bit of tricky javascript
0
 
LVL 1

Author Comment

by:Fordster55
ID: 34117572
I don't know what I'm doing wrong.... But i can't get anything to display with that new code.

These are the control variables for the script and i've just set the source to a plain image for now to just get the script working before trying to get it to power the other script.

Can you see anything noticeably wrong in there?
//Specify iframe to display. Change src and other attributes except "position" and "left/top":
var iframetag='<iframe id="masterdiv" src="http://www.itthatworks.com.au/images/Bored_office_Worker.jpg" width="150px" height="95px" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="1" scrolling="no" style="position: absolute; left: -500px; top: -500px;"></iframe>'

//specify x coordinates of iframe ("right" for right corner, or a pixel number (ie: "20px")):
var masterdivleft="10px"

//specify y coordinates of iframe ("bottom" for bottom of page, or a pixel number (ie: "20px")):
var masterdivtop="bottom"

Open in new window

0
 
LVL 11

Expert Comment

by:Amanda Watson
ID: 34117648
Lets take it back to basics

Just put this code in body tag of your site (or better still, but it in a mod_html) and publish it on your site

<script type="text/javascript">

/***********************************************
* Floating Iframe script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Specify iframe to display. Change src and other attributes except "position" and "left/top":
var iframetag='<iframe id="masterdiv" src="whatever.htm" width="150px" height="150px" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="1" scrolling="no" style="position: absolute; left: -500px; top: -500px;"></iframe>'

//specify x coordinates of iframe ("right" for right corner, or a pixel number (ie: "20px")):
var masterdivleft="10px"

//specify y coordinates of iframe ("bottom" for bottom of page, or a pixel number (ie: "20px")):
var masterdivtop="bottom"

var ie=(document.all || window.opera) && document.getElementById
var iebody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body

if (ie)
document.write(iframetag)

function positionit(){
masterdivobj=document.getElementById("masterdiv")
var window_width=ie && !window.opera? iebody.clientWidth : window.innerWidth-20
window_height=ie && !window.opera? iebody.clientHeight : window.innerHeight
var dsocleft=ie? iebody.scrollLeft : pageXOffset
var masterdivwidth=masterdivobj.width
masterdivheight=masterdivobj.height
masterdivobj.style.left=(masterdivleft=="right")? window_width-masterdivwidth-20 : masterdivleft
setInterval("repositionit()", 100)
}

function repositionit(){
if (ie){
dsoctop=ie? iebody.scrollTop : pageYOffset
masterdivobj.style.top=(masterdivtop=="bottom")? window_height-masterdivheight-14+dsoctop : parseInt(masterdivtop)+dsoctop
}
}

if (window.attachEvent)
window.attachEvent("onload", positionit)

</script>
0
 
LVL 1

Author Comment

by:Fordster55
ID: 34117655
Yea I have that in the body tags of index.php file of my active template.
0
 
LVL 1

Author Comment

by:Fordster55
ID: 34152629
This is still not working for me. I have that code in my body tags as it sais to do and have changed the source to just a plain image but nothing will display.

the page is www.itthatworks.com.au and you should be able to view source to check the code. I don't know what I'm doing wrong...
0
 
LVL 11

Expert Comment

by:Amanda Watson
ID: 34152887
arrghh I just reread the dynamic information and it says
Note that this script is only visible in IE5+ and Opera 7+. A bug in NS6+ causing iframes to not follow the page disables the script from appearing in it.

So there you go!

Back to the drawing board
0
 
LVL 11

Expert Comment

by:Amanda Watson
ID: 34152890
0
 
LVL 1

Author Comment

by:Fordster55
ID: 34152901
I read that and tried viewing in internet explorer but still had no luck.

I would have thought there would be available code for this function without that much hassle....
0
 
LVL 1

Author Comment

by:Fordster55
ID: 34152924
As a possible alternative..... I could use the static floating iframe we got working before (http://www.dynamicdrive.com/dynamicindex4/logo.htm) as long as I can put the javascript version of the link hidden on the page somewhere out of site.

I just need the javascript version for visitor tracking and chat initiation. I can use a static version for people to click to contact me.

So if we can't find a working floating iframe or similiar how can i hide the javascript image.
0
 
LVL 11

Expert Comment

by:Amanda Watson
ID: 34158104
Ok I am not sure what you need now sorry....The staticlogo.js is the one you want to try and use now?  But you need a link somewhere on the image?

var ddsitelogo={
      setting: {orientation:4, visibleduration:0, fadeduration:[1000, 500]}, //orientation=1|2|3|4, duration=millisec or 0, fadedurations=millisecs
      offsets: {x:50, y:50},//offset of logo relative to window corner
      logoHTML: '<a href="http://www.facebook.com" title="Twitter"><img src="http://tawfa.com.au/images/facebook-icon.png" style="width:125px; height:125px; border:0" /></a>', //HTML for logo, which is auto wrapped in DIV w/ ID="mysitelogo"


like that?
0
 
LVL 1

Author Comment

by:Fordster55
ID: 34160735
Sorry that didn't come out in the most understandable way.

Basically I have two versions of the image I can deploy. The javascript version (the one I'd rather deploy) provides the image, a link to the live chat, and live tracking of users on the website.

The plain HTML version only contains the image and link.

So if we have no way to deploy the javascript version in the floating frame we can stay with the plain HTML providing we can hide the javascript version somewhere else on the page.
0
 
LVL 1

Author Comment

by:Fordster55
ID: 34160905
Ok I've finally had some success!

Attached is the code I'm using to achieve the floating frame on www.itthatworks.com.au

The only thing I would like to change now is the speed of the frame. I'd rather have appear static rather than move after you scroll the page. Pretty much the same as your twitter and facebook icons snowball.

If you can see anything in that code that might be adjustable to make that happen please point it out :)

If not I guess I'll just live with it.
<!-- Begin FloatMail Code //-->

<script>

var hX = 100;
var vY = -200;

</script>

<!-- Edit the HTML between the div tags to suit your design //-->

<div id="FloatMail" style="position: absolute;
                           width: 150px;
                           border-width: 2;
                           border-style:outset;
                           border-color:#444444;
                           padding:5px">
<center>
<!-- BEGIN PHP Live! code, (c) OSI Codes Inc. -->
<script language="JavaScript" src="http://itthatworks.com.au/live/js/status_image.php?base_url=http://itthatworks.com.au/live&l=admin&x=1&deptid=0&"><a href="http://www.phplivesupport.com"></a></script>
<!-- END PHP Live! code : (c) OSI Codes Inc. -->
</center>
</div>


<!-- End of editable HTML //-->

<script>
/* Floating Mail-This-Link Script C.2004 by CodeLifter.com */
/* Caution! Do not allow linebreaks other than where shown */
var good;function checkEmailAddress(field){var goodEmail=field.value.match(/\b(^(\S+@).+((\.com)|(\.net)|(\.edu)|(\.mil)|(\.gov)|(\.org)|(\..{2,2}))$)\b/gi);
if (goodEmail){good = true}else{alert('Please enter a valid e-mail address.');
field.focus();field.select();good=false;
}}u=window.location;m="I thought this might interest you...";
function mailThisUrl(){good=false;
checkEmailAddress(document.eMailer.address);
if (good){window.location="mailto:"+document.eMailer.address.value+"?subject="+m+"&body="+document.title+" "+u;
}}var nn=(navigator.appName.indexOf("Netscape")!=-1);
var dD=document,dH=dD.html,dB=dD.body,px=dD.layers?'':'px';
function floatMail(iX,iY,id){var L=dD.getElementById?dD.getElementById(id):dD.all?dD.all[id]:dD.layers[id];		
this[id+'O']=L;if(dD.layers)L.style=L;L.nX=L.iX=iX;L.nY=L.iY=iY;
L.P=function(x,y){this.style.left=x+px;this.style.top=y+px;};L.Fm=function(){var pX, pY;	
pX=(this.iX >=0)?0:nn?innerWidth:nn&&dH.clientWidth?dH.clientWidth:dB.clientWidth;	
pY=nn?pageYOffset:nn&&dH.scrollTop?dH.scrollTop:dB.scrollTop;	
if(this.iY<0)pY+=nn?innerHeight:nn&&dH.clientHeight?dH.clientHeight:dB.clientHeight;	
this.nX+=.1*(pX+this.iX-this.nX);this.nY+=.1*(pY+this.iY-this.nY);this.P(this.nX,this.nY);
setTimeout(this.id+'O.Fm()',33);};
return L;}
floatMail(hX,vY,'FloatMail').Fm();
</script>

Open in new window

0
 
LVL 11

Expert Comment

by:Amanda Watson
ID: 34161735
Well done...I could take a guess at this but I think its more for a javascript expert that particular question.

You might want to finish this question and then open a new one for the javascript
0
 
LVL 1

Author Comment

by:Fordster55
ID: 34161813
Yea I think I'll do that. Thanks for all your help :)
0
 
LVL 1

Author Closing Comment

by:Fordster55
ID: 34161820
Worked together with snowball77 to reach a desired outcome
0
 
LVL 11

Expert Comment

by:Amanda Watson
ID: 34161889
Thank you and good luck
0

Featured Post

Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

Question has a verified solution.

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

Suggested Solutions

In this article, we will look at our content management system as a whole, to get an idea of how we will start to manage these content items.
This article will shed light on the latest trends when it comes to your resume building needs. For far too long, the traditional CV format has monopolized the recruitment market.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

756 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