Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1551
  • Last Modified:

Floating a module outside the template

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
Fordster55
Asked:
Fordster55
  • 15
  • 11
1 Solution
 
Amanda WatsonCommented:
0
 
Amanda WatsonCommented:
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
 
Fordster55Author Commented:
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Fordster55Author Commented:
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
 
Fordster55Author Commented:
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
 
Fordster55Author Commented:
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
 
Amanda WatsonCommented:
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
 
Fordster55Author Commented:
No such luck. The php isn't accepted in the staticlogo.js just as the original script was. Just doesnt't display anything.

0
 
Amanda WatsonCommented:
0
 
Fordster55Author Commented:
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
 
Amanda WatsonCommented:
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
 
Fordster55Author Commented:
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
 
Amanda WatsonCommented:
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
 
Fordster55Author Commented:
Yea I have that in the body tags of index.php file of my active template.
0
 
Fordster55Author Commented:
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
 
Amanda WatsonCommented:
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
 
Amanda WatsonCommented:
0
 
Fordster55Author Commented:
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
 
Fordster55Author Commented:
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
 
Amanda WatsonCommented:
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
 
Fordster55Author Commented:
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
 
Fordster55Author Commented:
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
 
Amanda WatsonCommented:
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
 
Fordster55Author Commented:
Yea I think I'll do that. Thanks for all your help :)
0
 
Fordster55Author Commented:
Worked together with snowball77 to reach a desired outcome
0
 
Amanda WatsonCommented:
Thank you and good luck
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 15
  • 11
Tackle projects and never again get stuck behind a technical roadblock.
Join Now