Include several HTML pages with JavaScript into one PHP page -
earlier asked fixing clock below , bam! solution instantaneous. since have added several of these clocks single php page. 1 tokyo, 1 london, 1 madrid , 1 denver - great. problem (now) way i've been able "include" individual php pages made of html below. if "view source" on php page, see multiple html pages embedded within complete opening , closing html, head , body tags.
my question: ok have multiple html pages embedded within 1 another? works across major browsers (google chrome, firefox, internet explorer, safari , opera). should going in different way? can't seem call header information within head of php file , make work (specifically call jquery & scripts/jclock.js). long loads on first clock isn't necessary on ones following, can't seem rid of html , use javascript code per clock , echo '<div id='us_pacific"></div>' (which how clock gets printed page within html within body tags.)
any thoughts?
here clock:
<html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="scripts/jclock.js"></script> <link rel="stylesheet" href="css/homepage.css"> <script type="text/javascript"> $(document).ready( function() { if ($('#us_pacific .time').length>0){ $('#us_pacific .time').remove(); } //set offset here var offset = -7; if (offset == '') return; $('#us_pacific').append('<div class="time"></div>'); var options = { format:'<span class=\"dt\">%a, %d %b %h:%m</span>', timenotation: '12h', am_pm: true, utc:true, utc_offset: offset } $('#us_pacific .time').jclock(options); }); </script> </head> <body> <div id="us_pacific"></div> </body> </html>
to question: 'is ok have multiple html pages embedded within 1 another?', answer is: no, can't have multiple html tags inside 1 document, invalid document.
assuming jclock.js coded, should able drive multiple instances.
then add container div's in html , modify javascript code little (peek in other versions have) set clocks own options.
you change code (and re-factor once works liking):
<html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="scripts/jclock.js"></script> <link rel="stylesheet" href="css/homepage.css"> <script type="text/javascript"> $(document).ready( function() { var options; // way can re-use without 'var' keyword. // timezone 1 if ($('#us_pacific .time').length>0){ $('#us_pacific .time').remove(); } $('#us_pacific').append('<div class="time"></div>'); options = { format: '<span class=\"dt\">%a, %d %b %h:%m</span>', timenotation: '12h', am_pm: true, utc: true, utc_offset: -7 // set offset here }; $('#us_pacific .time').jclock(options); //timezone 2 if ($('#eu .time').length>0){ $('#eu .time').remove(); } $('#eu').append('<div class="time"></div>'); options = { format: '<span class=\"dt\">%a, %d %b %h:%m</span>', timenotation: '12h', am_pm: true, utc: true, utc_offset: 1 // set offset here }; $('#eu .time').jclock(options); }); </script> </head> <body> <div id="us_pacific"></div> <div id="eu"></div> </body> </html> i hope helps!
Comments
Post a Comment