Question

I’m trying to get a javascript based “world clock” to run inside a pop up div that is shown with jQuery.
It works great when I look at it in the Dreamweaver Live View. But when I upload it to my server, the Javascript showClock(clockobj), which contains a document.write(…) command, executes immediately and rewrites the entire screen with the map. So, I took the showClock(clockobj) call out of the worldclock.html javascript and put it in the jQuery handler that opens the div. The map comes up with a click. But its not in the div. It takes over the whole screen.

How do I get it to display INSIDE the div, like all of the other buttons do on the page? (Tips, Converter, Add, Edit, Copy, etc,)

Here is the link, if you want to see what I’m doing:

http://www.bizzocall.com/cp-ManagePhone.php

Here’s the JS:

<script src="http://www.clocklink.com/embed.js"></script><script type="text/javascript" language="JavaScript">
clockobj=new Object;clockobj.clockfile="world001-blue.swf";
clockobj.TimeZone="PST";
clockobj.width=480;
clockobj.height=250;
clockobj.wmode="transparent";

</script>

Here’s the jQuery:

<script type="text/javascript">
        $(function(){
            // Dialog box           
            $('#worldclock').dialog({
                autoOpen: false,
                width: 540,
                buttons: {
                    "Cancel": function() { 
                        $(this).dialog("close");

                    } 
                }
            });

            // Dialog Link
            $('#worldclockbtn').click(function(){
                $('#worldclock').dialog('open');
                showClock(clockobj);
                return false;
            });
        });
    </script>

The HTML:

<div id="worldclock"  class="DialogBox">
<?php require_once('worldclock.html'); ?>
</div>
<div class="tiptxt" id="worldclockbtn" >WORLD CLOCK
        <div class="arrowInCircle"></div>
</div>

Answer 1

Firstly get rid of one of your jqueries – you have several and different versions
they may be the reason for this error:

$(“#picker”).farbtastic is not a function
Source File: http://www.bizzocall.com/cp-ManagePhone.php
Line: 26

To handle a document.write, override it

var oldWrite = document.write;
var stringToWrite = ""; // this is polluting the window scope, but is for demo purposes ok
document.write=function(str) {
  stringToWrite+=str
}

and use $(“#someDiv”).html(stringToWrite)

but looking at the JS, you can also just replace

function showBanner(BannerLink){
    document.write(BannerLink);
}

with

function showBanner(BannerLink){
  $("#someDiv").html(BannerLink);
}

---

update: replace the whole external script with

function showClock(obj){

//Aded by Takeshi Sugimoto on 2008/05/01 for SSL
var str = '';

if(obj.ssl == '1'){
    str = '<embed src="https://secure.clocklink.com/clocks/';
}
else{
    str = '<embed src="http://www.clocklink.com/clocks/';
}
//--

    str += obj.clockfile;
    str += "?";

    for( prop in obj ) {
        if( 'clockfile' == prop 
            || 'width' == prop
            || 'height' == prop
            || 'wmode' == prop
            || 'type' == prop
        ) continue;

        //Added by takeshi on 2007/01/29 (to display mutibyte chars by using URL encoding)
        if(prop == "Title" || prop == "Message"){
            str += ( prop + "=" + obj[prop] + "&" );
        }
        else{
            str += ( prop + "=" + _escape(obj[prop]) + "&" );
        }
        //--
    }
    str += '" ';
    str += ' width="' + obj.width + '"';
    str += ' height="' + obj.height + '"';
    str += ' wmode="' + obj.wmode + '"';
    str += ' type="application/x-shockwave-flash">';

    return str ;
}

function _escape(str){
    str = str.replace(/ /g, '+');
    str = str.replace(/%/g, '%25');
    str = str.replace(/\?/, '%3F');
    str = str.replace(/&/, '%26');
    return str;
}

and do

$(‘#worldclock’).html(showClock(clockobj)).dialog…..