Floating a module outside the template

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

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'); ?>

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

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?

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. -->

Select allOpen in new window

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)?

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

Ok how about this one here
http://www.dynamicdrive.com/dynamicindex17/floatiframe.htm

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.

That feature was actually part of a template I got from Rockettheme...Template monster do one as well.

Just a bit of tricky javascript

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"

Select allOpen in new window

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>

Yea I have that in the body tags of index.php file of my active template.

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...

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

Ok try this one
http://www.scripts.com/javascript-scripts/frame-scripts/floating-iframe/

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....

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.

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?

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.

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>

Select allOpen in new window

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

Yea I think I'll do that. Thanks for all your help :)

Worked together with snowball77 to reach a desired outcome

Thank you and good luck