|
JavaScript - Load And Show Xml File Contents (dfxp)
Hello, I have a DFXP formatted XML file (used for closed captioning), and I have tried several times unsuccessfully to load and show its contents on screen using js. Here is what the XML looks like
Code: <tt xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling" xmlns="http://www.w3.org/2006/04/ttaf1" xml:lang=""> <head> <styling> <style tts:fontSize="14" tts:textAlign="center" tts:wrapOption="wrap" id="1"/> </styling> </head> <body> <div xml:lang="en"> <p begin="00:00:01.45" style="1" end="00:00:03.55"> PROFESSOR: Welcome to your <br/> virtual classroom. </p> </div> </body> </tt> I have the URL of the file and all I want to do is print the text onto the screen (the "PROFESSOR: Welcome to your virtual classroom." portion). If anyone can help me out I would greatly appreciate it, I'm stuck! Similar TutorialsGreetings! I'm not a huge javascript person, I barely know enough php to get by. I struggle and I learn. I have this page that take a while to load and I really don't want it to show the results in the browser before the php script finishes. So I was hoping that somebody could point me to a way to either give some sort of wait indicator (i.e. a bar, the trendy twrilling circle thingy) or just hide the everything till the page is completely loaded. Below this sentence is the original post I left in the PHP forum. Since the birth of CSS3 you can easily use fonts that are NOT on the local users PC. This is the best! Although some fonts do not render through the browser. I wrote this script (for personal use) which is pretty elementary which reads fonts in a directory (without installing them in windows) and then lets you display them in various web aspects. In the script I pick a random background color and calculate a contrast color and then determine if the text color should be black or white depending on the color of the background. What's happening is that if I pile a bunch of fonts in the fonts directory when the script executes it displays the contents until it 100% complete. Basically I'd like it NOT to do that. I was looking around a progress bars but .. they don't seem to do much. I couldn't find one that would either give you that twrilling circle while it loads or something to that nature. **Is you test this script you MUST create a folder named 'fonts' in the root of where you put the script! ***If you find ways that I can make this more effecient or any tips or tricks that'd be great and constructive criticism is always appreciated! Thanks so much for any help or advice given! You'll need the javascript file animatedcollapse.js from my site http://handlersspot.net/css3font/animatedcollapse.js There's are three images: http://handlersspot.net/css3font/slantdivider.gif http://handlersspot.net/css3font/minus.png http://handlersspot.net/css3font/plus.png I tried to post the source here but it seems that I used up my allotment of 20K characters I tried to use the attachments feature but it doesn't work for me for some reason so I posted all the source here on my website: http://handlersspot.net/css3font/source.html Whew! That's allot of stuff! Again .. thanks for the effort/advice/help way in advance! Oh! Sorry! Meant to put the actual working version of this here --> http://handlersspot.net/css3font Hi I want to get javascript to show or hide a row in a table depending on whether a value is held by a variable collected in a mulitple part formmail. If only 1 adult fills in their name on the earlier form there is no need to show the row which asks him to agree to membership on a later form page. This is what Ive got so far Code: <form name="frm3" method="post" action="bookingscript.php">
<input type="hidden" name="adult2fn" value="$adult2name" />
<script Language="JavaScript">
var name1 = document.frm3.adult2fn.value;
if(name1 =="")
{alert("hello");document.getElementById("hidden_row").style.display = 'none';}
else
{alert("no way");document.getElementById("hidden_row").style.display = '';};
</script>
<table border="1">
<tr>
<td>Always visible</td>
</tr>
<tr id="hidden_row">
<td>Hide this</td>
</tr>
<tr>
<td>Always visible</td>
</tr>
</table>
</form>
If $adult2name is blank then name1 is blank and the row does not show, else $adult2name contains a name, name1 is not blank and the row shows. I have tried displaying the hidden form field (by changing it to text), and adding my own content, also putting in my own values instead if $adult2name and the Alerts appear as appropriate, but the whole table disappears whilst the alert is on and reappears when the alert is OKed for either condition of the if. Same in Firefox and IE7 & 8 Could someone please tell me the error of my ways. Many thanks Richard I have already worked on this pop-up: https://defencedog.googlecode.com/sv...lcome_box.html but I still considers a lightweight replacement so here it goes https://defencedog.googlecode.com/sv...elcome/my.html as you can see the popup show at click event; I want it to load automatically when page loads & can't find the appropriate method: Here my failed tries... Code: $(document).ready(function () {
// id is the ID for the DIV you want to display it as modal window
launchWindow( dialog );
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$( dialog ).css('top', winH/2-$( dialog ).height()/2);
$( dialog ).css('left', winW/2-$( dialog ).width()/2);
//transition effect
$( dialog ).fadeIn(2000);
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
I use a PHP page to set elements of a text file on our web server and I want to create a javascript function to intermitently check the contents of that file and if an element in that file matches a criteria I want to act on it... So, I do this <script type="text/javascript"> t = setInterval("CHECKFILE()",5000); </script> This calls the CHECKFILE function every 5000ms <script type="text/javascript"> function CHECKFILE(){ } </script> How, in the CHECKFILE function can I read from a file called FILE.txt for example?? In PHP I can use $myFile = "FILE.txt"; $theData = file($myFile); And this gives me an array, with each element containing one line from the file Can I do similar in Javascript? Or can I add PHP into the JS to do it for me? Thanks Hi, i need to read a files contents to an array so that i can check which lines of the file i need to write back. im not very good with arrays and haven't had any luck so far. thanks epic thread title! Right I have a process page in php which is fairly long and complex with many options. If a certain option case is met as this ie: we've hit the Note Saved case. PHP Code: // save notes against company if ($_POST['a']=="Save Note") { if (addnote($_POST['notetitle'],$_POST['notebody'])) { $err = "<p id=\"returnresults\"><font color=\"red\"><strong>Note Saved</strong></font></p>"; } else { $err = "<p id=\"returnresults\"><font color=\"red\"><strong>Failed to save note.</strong></font></p>"; } } I want to then wait until the page load is complete and then do the following. PHP Code: document.getElementById('addevent').style.display='block'; The reason I need to wait for page complete is that the div that needs to be displayed it one of the last parts of the page rendered so triggering the above too soon leads to the div not actually being available to be shown. Now my current fail attempt at doing it was this PHP Code: echo "<script type=\"text/javascript\">if (confirm('You have not yet added a call back event do you wish to do so now?')) { document.getElementById('addevent').style.display='block'; } However it doesn't display the hidden div like i want it to as it holds the page rendering off until the confirm is completed are there any suggestions of better ways or should I say CORRECT says of doing this. There are other similar topics, but this one is different. I am making an external js file and I want to use prototype.js with it. I don't want it in the html file that is referencing the .js file, I actually want to use prototype in the .js file. I'd just rather not copy the 4,000 lines of prototype if there is an easier way to do it. Sorry if I'm not being clear, but thanks for the help in advance. Jazzo Hi guys. I've made a html file with three lists to populate different pages of my site. Then i've called the html with SSI. let me show the code the HTML with the list's Code: <div id="list_box"> <ul class="list"> <li><a href="#">item01</a></li> <li><a href="#">item02</a></li> <li><a href="#">item03</a></li> <li><a href="#">item04</a></li> <li><a href="#">item05</a></li> </ul> </div> <div id="list_box"> <ul class="list"> <li><a href="#">item06</a></li> <li><a href="#">item07</a></li> <li><a href="#">item08</a></li> <li><a href="#">item09</a></li> <li><a href="#">item10</a></li> </ul> </div> <div id="list_box"> <ul class="list"> <li><a href="#">item11</a></li> <li><a href="#">item12</a></li> <li><a href="#">item13</a></li> <li><a href="#">item14</a></li> <li><a href="#">item15</a></li> </ul> </div> the HTML with the list loaded Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#list_box {
height:100%;
width: 100%;
padding-top: 15px;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 20px;
background-color: #cccccc;
overflow: hidden;
}
ul.list li {
list-style-type: none;
text-align: left;
text-decoration: none;
}
.list a:link,
.list a:visited {
font-family: "Courier New", Courier, monospace;
font-size: 12px;
line-height: 15px;
color: #036;
text-decoration: none;
text-align: left;
font-weight: bold;
font-style: normal;
}
.list a:hover{
font-family: "Courier New", Courier, monospace;
font-size: 12px;
line-height: 15px;
color: #ffffff;
text-decoration: none;
text-align: left;
font-weight: bold;
font-style: normal;
}
-->
</style>
</head>
<body>
<div id="list_box">
<!--#include file="list.html" -->
</div>
</body>
</html>
the zip with the sample I've made load_external.zip I wanted to ask how can I make an item from the list's to have a different css in the html with the loaded list's. because in each page one of the items (that are all buttons) will be up or should I say active. can someone tell me how can I do this please. Maybe with javascript? thanks in advance I have several js files to include in Hml so was thinking if there is any way that i can includes all the files in one file and then include that file in the main html file so that i don't need to chnage the main file again and again How can i do that just like we use import in css So I was reading up on how to load and parse an XML file into an html page and I found through w3 a great tutorial with sample code: http://www.w3schools.com/xml/xml_dom.asp It appears to work fine on their website but when I try it from my desktop it doesn't work. So what I have is an html file with contents: Code: <html>
<body>
<h1>W3Schools Internal Note</h1>
<div>
<b>To:</b> <span id="to"></span><br />
<b>From:</b> <span id="from"></span><br />
<b>Message:</b> <span id="message"></span>
</div>
<script type="text/javascript">
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","note.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.getElementById("to").innerHTML=
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML=
xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML=
xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
And then the xml file named "note.xml": Code: <note> <to>Tove</to> <from>Jani</from> <heading>Reminder</heading> <body>Don't forget me this weekend!</body> </note> I have no idea what I am missing or not seeing that is causing this not to work but if anyone knows I would appreciate the input. For the record I have tried this in chrome and ie. That's right, I want to load a random html file from a list into a another div. Does anyone knows any example, please? It would be very helpful. Thanks Hi anyone knows a lightbox that can be called like this? Code: <img src="imgs/edit.png" border="0" onclick="lightbox.open( 'test.php' ,'test');" style="cursor : pointer;"> or modify slimbox to work with iframe? sorry for bad english Thanks So I'm trying to make a free flash game site that is not completely annoying and never redirects you to another site. i'm hosting all my flash games on my server. when you select the game you would like to play, it loads the file name into a javascript variable that gets sent to my game.html where i would like the game to load. every game should load on this same page. I cannot for the life of me find how to read the variable in html. I've tried embed, object, documentwrite, basically everything i could find doing google searches for 10 hours. I'm no expert programmer, but I've never had to post a question to any forum EVER before because I always figure it out on my own. Not this time. i don't want to include any code i'm using because i would like the proper format. tell me what to do with it and i will do anything in my power to make you feel special. i'll devote a special page to you highlighting your genius on my site. this is a terrible example of what I'm trying to do, just imagine VARIABLEGOESHERE = mystinkingame.swf: [CODE] <object width="550" height="400"> <param name="movie" value="VARIABLEGOESHERE"> <embed src="VARIABLEGOESHERE" width="550" height="400"> </embed> </object> [CODE] it is also clear that i do not understand the [CODE] tag in your forum. I have a question is it bad or what are the disadvantages of doing what I am going to explain. I want to put the same javascript file two time in the same page e-g Code: <script type="text/javascript" src="http://www.mydomain.com/javascript.js"></script> <script type="text/javascript" src="http://www.mydomain.com/javascript.js"></script> Now many people will ask why would I want to do that, well the reason is that I am using blogger and blogger doesn't let me see all code from which the page is made rather split it into two parts named as POSTS and EDIT HTML. So I am going to place this script in those both areas but at the end when the page loads it is actually going to two the same script two times which is not error. Another question would be why am I not using same script in one place rather than two places if at the end the page code is going to become one. Well the answer would be because that script is used by other scripts too so I CAN'T CHANGE THE LOCATION if I do so, then the script stops working. Hello to all ... I am very basic on this of javascript, so someone could help me how to resolve this issue. I have a javascript (HTML internal), which fetches and executes a file in another web address... but I do not want it to do that, i want this script to execute is function directly from my local disk (file location). Here is the script; Code: <html>
<head></head>
<body>
<div style="WIDTH: 984px; HEIGHT: 443px" >
<script type="text/javascript">
var previewConfigs = [{
type: 'flash',
preview_url: "http://myflashtest.com/files/9083/preview.swf",
base: "http://myflashtest/files/9083/"
}];
</script>
<span id="large_item_preview">
<object style="visibility: visible; Z-INDEX: 0; WIDTH: 590px; HEIGHT: 300px; TOP: -51px; LEFT: -27px; " id="large_item_preview_container" data="srcs-ff/preview.swf"></object> </span>
<script type="text/javascript" src="srcs-ff/jquery.js">
</script>
<script type="text/javascript" src="srcs-ff/preview.js">
</script>
<script type="text/javascript">
if (typeof(previewConfigs) !== 'undefined') {
for (var i = 0; i < previewConfigs.length; i += 1) {
var preview = new ItemPreview(previewConfigs[i]);
preview.display();
};
};
</script>
<script type="text/javascript">
$(document).ready(function() {
$("tr[data-accessor=source]").click();
});
</script>
</div>
</body>
</html>
<b>What I want is to change this part;</b>; preview_url: "http://myflashtest.com/files/9083/preview.swf", base: "http://myflashtest/files/9083/" I have looked all over for an answer to this, but haven't found a definite way to do it yet. I am updating my audio page (a demo track list for getting composing work) and getting rid of my flash audio player in favor of embedding .mp3 files, or adding them with the HTML5 audio tag. What I would like to be able to do is link into the page, and have that link autoplay a specific track out of the 10-20 that I will have on the same page. The problem is I am extremely new to scripting and have no idea where to even start with this. The reason I want it to be able to autoplay specific tracks is so I can market a specific track, and have that person (who is already expecting to hear the music on page load) not have to then look through the track list for that one track I was promoting and click play. Any help would be greatly appreciated, Thanks! Hello All, I always wonder that how to display any sort of data or HTML codes by just simply calling or including a Javascript file in other HTML file or a webpage. If you didn't understand what I want to say, I would like to give an example like AdSense gives a javascript code that need to be put where we want to show ads. And the ads appear, similarly how to display any HTML code with just inclusion of Javascript file. An other example is - <script type="text/javascript" src="http://example.com/scripts/javascript/source/somescript.js"> <div id="div_one"></div> <div id="div_two"></div> <div id="div_three"></div> </script> Now this script will show some HTML inside first div, some on second and so on. So How can I do that, please explain with an example... Thanks. I am trying to decide whether using a JavaScript-flatfile or a PHP-MySQL setup is the fastest for my application. The PHP-MySQL setup is really basic, just a very simple MySQL 5 database with only 3 columns or so. However, the JavaScript-flatfile is a solution I thought of that could work surprisingly well. Let's say I want to make a Google Suggest like application, but one that only works for single words, and only displays the most likely result and not the 10 most likely. If the user has partially enter the word "banana", by only typing "ban", the Javascipt will do some parsing, and send the user to a filesystem that has the destination "b/a/n/finish.txt". The finish.txt file would be in every one of these directories, and would contain the most likely ending, in this case "ana". Would this be fast, or does having all these directories slow the server down quite a bit? Would there be a faster way, or a more simple way? Thanks! Hi all Is there a way to get the image(s) to load into the table after the page has loaded instead of the way I have it now? I have 4 tabs, but I would like the imgs in tabs 2,3,4 to load after page load. Example of how the tabs look. Code: <div class="tabbertab">
<h2>Australia_____</h2>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFCC">
<caption class="highlight_Red">澳洲 Australia
</caption>
<tr>
<td><a href="pages/promotion.html#aus_ACE" rel="nofollow" target="_blank"><img src="pages/images/Pics/AUS/ace.jpg" alt="ACE / ATTC" width="110" height="69" border="0" align="left" class="ozimg_L"/> ...a few more images etc
the other tabs look the same. LT This script displays a link to a registration/login form that loads in a light box for Joomla. I've been goin nuts trying to figure out how to get this to load on page load with a delay. Anyone know how to get this done? PHP Code: <?php JHTML::_('behavior.mootools'); $document = JFactory::getDocument(); $document->addStyleSheet(JURI::base() . 'media/system/css/modal.css'); $document->addScript(JURI::base() . 'media/system/js/modal.js'); $document->addScriptDeclaration("window.addEvent('domready', function() {SqueezeBox.initialize({});});"); $user = & JFactory::getUser(); $uri = JFactory::getURI(); $url = $uri->toString(); $return = base64_encode($url); ?> <div id="lbframeid" style="position:absolute;top:1px;left:1px;height:0px;width:0px;overflow:hidden"> <a href="http://www.wowjoomla.com/"><h1>Joomla Login LightBox powered by WowJoomla.com</h1> </a> </div> <?php if ($user->get('guest')) :?> <a href="<?php echo JRoute::_('index.php?option=com_loginbox')?>" onclick="SqueezeBox.fromElement(this); return false;" rel="{handler: 'iframe', size: {x: 660, y: 500}}"><?php echo JText::_('SIGNUP_LOGIN')?></a> <?php else: ?> <?php echo JText::sprintf( 'HINAME', $user->get('name') ); ?> <br> <a href="javascript:void(0);" onclick="LB_onLogout(); return false;"><?php echo JText::_('LOGOUT')?></a> <?php endif; ?> <script type="text/javascript"> function LB_onLogout() { var form = new Element('form'); form.setProperty('method', 'POST'); form.setProperty('target', '_self'); form.setProperty('action', 'index.php'); var input = new Element('input'); input.setProperty('type', 'hidden'); input.setProperty('name', 'option'); input.setProperty('value', 'com_user'); form.appendChild(input); var input = new Element('input'); input.setProperty('type', 'hidden'); input.setProperty('name', 'task'); input.setProperty('value', 'logout'); form.appendChild(input); var input = new Element('input'); input.setProperty('type', 'hidden'); input.setProperty('name', 'return'); input.setProperty('value', '<?php echo $return; ?>'); form.appendChild(input); $E('body').appendChild(form); form.submit(); } </script> |
|||||||