Solved

Floating a module outside the template

Posted on 2010-11-10
26
1,525 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
  • 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
 
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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Read about how to approach blogging and about ways to do it right. Stand out from the crowd and let your knowledge be consumed by a large audience. This article aims to explain how your blog should look like,  the most important things to do while b…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
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.…

746 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now