|
JavaScript - Trying To Use Onclick To Display Video (firefox Issue)
Hello all,
I'm trying to set up a web page to display a video when a user clicks on a link. So far, it works fine in IE and Chrome, but it won't work in Firefox. Any ideas? http://tinyurl.com/6u3jnq5 Similar TutorialsI wrote this to trigger a video when an image is clicked, but it doesnt work. Any help? Code: <head>
<style>
#movie {}
#img {}
</style>
</head>
<body>
<embed type="application/x-vlc-plugin" name="VLC" rel="nofollow" target="mymovie.webm" id="movie" > </embed>
<img src=myimage.jpg" id="img" />
<script>
var v = document.getElementById("movie");
var i = document.getElementById("img");
i.onclick = function() {
v.play();
};
</script>
</body>
I have a video on a page, which on a pc or mac, will play inside a standard flash player. On the iphone, I have setup javascript to detect iphone / ipod, and replace the flash player with an embedded m4v file: Code: if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
$('div#vid').empty('');
$('div#vid').html('<div ontouchstart="incrementHitcount()"><embed src="http://www.gridcity.co.nz/uploaded/images/'+cid+'_bg.jpg" href="http://www.gridcity.co.nz/uploaded/videos/'+cid+'.m4v" type="video/x-m4v" rel="nofollow" target="myself" width="'+vidwidth+'" height="'+vidheight+'" scale="1" id="iphone"></embed><div>');
}
So far so good. I also want to trigger a simple onclick which makes an ajax call a remote PHP file. I have tried ontouchstart instead (see above code) but still no luck. If I add the onclick to a static image rather than an embed instance, it works fine. But with the embedded video, it's as if the video blocks the onclick event for javascript to pickup. Does anyone know a way around this? Please explain! This is so frustrating :/ There is: <script language="text/javascript"> function spYL() { alert("FFFFFFFFFFFFFFF"); } inside head area and there is: <input name="Button" type="button" value="Επιλογή υλικών" onClick="spYL();"> But it doesn't work! Hello, The code below assigns a value to the Latitude and to the Longitude table cells when the submit button is pressed. I would like to have these values appear in text boxes instead. Obviously I need to amend onclick="javascript:usePointFromPostcode(document.getElementById('postcode').value, placeMarkerAtPoint)" to make this work but I can't seem to. Assuming two text boxes with names lng and lat, how would I amend the line? Thanks Code: <p align="left">
<table bgcolor="#FFFFCC" width="300">
<tr>
<td width="100">
<b>Latitude</b></td>
<td id="lat">
</td>
</tr>
<tr>
<td width="100">
<b>Longitude</b></td>
<td id="lng">
</td>
</tr>
</table>
</p>
<p>
Postcode:
<input type="text" id="postcode" size="10" value="IG3 8PY" /><br />
<input type="submit" value="Find" onclick="javascript:usePointFromPostcode(document.getElementById('postcode').value, placeMarkerAtPoint)" /><br />
<div id="map" style="width: 500px; height: 500px">
</div>
<p>
<script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAA43oi4HUU6ay_KI5aLlgqqxRs1CMn3rnBr6PSR_9LSokba_k_xRRX9T_bJ1PRZQ_1n4nF3EOK"
type="text/javascript"></script>
<br />
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAA43oi4HUU6ay_KI5aLlgqqxRs1CMn3rnBr6PSR_9LSokba_k_xRRX9T_bJ1PRZQ_1n4nF3EOK"
type="text/javascript"></script>
<br />
<script src="gmap.js" type="text/javascript"></script>
</p>
</body>
</html>
from my spry sub.menu tab, i'm trying to use "onclick" to post a new img in a specific div elsewhere on the page. <li><a class="MenuBarItemSubmenu" href="#">CPQC</a> <ul> <li><a href="#" onclick="document.getElementById('cpqcRange').src='images/cpqc/cpqcHot.png';">Hot</a></li> </ul> </li> <div id="cpqcRange"> <p> <img src="cpqcLocation.png" alt="cpqcLocation" name="cpqcLocation" width="504" height="360" id="cpqcLocation" /> </p> </div> i think i'm close, but something is wrong. can you just call up the div "cpqcRange" by name and slap a new img.src in there??????? cheers, Paul today's weather in Kalispell, MT, USA cold, brrrrr, not much snow, but it's coming soon it was about 18degF this morning I'm trying to make a basic rss reader with a google reader-esque functionality of clicking on article names and being able to expand/collapse that article. I'm working on the expand part and am going crazy. I am having no trouble getting content and displaying it without the onclick function but when I try to integrate onclick I can just get the titles. here's the snippet. any help? Code: <!-- HTML -->
<body>
<div id="feeddiv"></div>
<script type="text/javascript">
// feed stuff using Google Feed API
function feedLoaded(result)
{
if (!result.error)
{
// Grab the container we will put the results into
var container = document.getElementById('feeddiv');
container.innerHTML = '';
// Loop through the feeds, putting the titles onto the page.
for (var i = 0; i < result.feed.entries.length; i++)
{
var entry = result.feed.entries[i];
var content = entry.content;
var title = entry.title;
var url = entry.link;
var div = document.createElement('div'); //parentDiv for articles
var articleTitle = document.createElement('div');
articleTitle.setAttribute('name', i); //set articleTitle name to article's place in array
articleTitle.setAttribute('style', 'font-weight:bold;font-size:15px;');
articleTitle.innerText = title;
articleTitle.onclick = function() {populate(content, title, url, i);};
div.appendChild(articleTitle); //adds title to div
container.appendChild(div); //adds div to the container
}
}
}
function populate(content,title, url, i)
{
var article = document.getElementByName(i); //gets articleTitle
//clickable title
var a = document.createElement('a'); //creating title link
var href = document.createElement('href');
a.setAttribute('href', url); //putting actual url into html
a.setAttribute('style', 'font-size:25px;');
a.innerText = title;//still puts into html
//Text
var snippet = document.createElement('p'); //creates <p> to throw articles in
snippet.innerHTML = content; //renders the article
article.appendChild(a);
article.appendChild(snippet);
}
</script>
</body>
This is driving me crazy! So I'm using a javascript file to switch out items when a thumbnail is clicked. This includes photo, title, description, price, size, quantity and add to cart button.... The original code on the html file works fine, but as soon as it is swapped by onclick, the 'add to cart' button does nothing! Here is the code: Code: var addDisplay = document.getElementById('cart-add');
addDisplay.innerHTML = "<a class='item_add' href='/' onclick='simpleCart.add(); return false;'><img src='images/shop/cart-add.jpg' width='118' height='26' border='0'></a>";
that is what shows in my javascript file... here is what's on the html file: Code: <div id="cart-add"><a class='item_add' href='/' onclick='simpleCart.add(); return false;'><img src="images/shop/cart-add.jpg" width="118" height="26" border="0"></a>
</div>
and that adds the item to the cart just fine, but when a thumbnail is clicked on, activating the javascript file to switch out the item/elements, the 'add to cart' button no longer does anything... by the way, I am using simpleCart.js PLEASE HELP, PLEASE!? Please PM me if you need more info... or post here if you have a solution. Thanks! Hi, I have the script below working fine in IE but not FF, can any one help me?? The script creates new fields with calendar in a form, if new information is added to a field and then a new field is created the information is lost in FF Live demo: http://hotelendenia.com/sandbox/ Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Calendar Text Input</title>
<script language="javascript" type="text/javascript" src="datetimepicker.js"></script>
<script type="text/javascript">
function extend(m, e){
var e = e || this;
for (var x in m) e[x] = m[x];
return e;
};
function create(type, opt, parent){
var el = document.createElement(type);
if (opt.style){
extend(opt.style,el.style);
}
delete opt.style;
extend(opt,el);
if (parent){
parent.appendChild(el);
}
return el;
}
fields = 0;
function add_input(){
document.getElementById('input_container').innerHTML += ""+ fields +"<input id=\"cal"+ fields +"\" type=\"text\" size=\"25\"><a href=\"javascript:NewCal('cal"+ fields +"','ddmmyyyy')\"><img src=\"cal.gif\" width=\"16\" height=\"16\" border=\"0\" alt=\"Pick a date\"></a> <input type=\"text\" name=\"\" value=\"\"><br>";
fields += 1;
}
</script>
</head>
<body>
<div>
<form>
<div id="input_container">
</div>
<br /><input type="submit" value="submit">
</form>
<a href="#" onclick="add_input()">add input</a>
</div>
</body>
</html>
Hello all, my second post! I finally got the below script working in Firefox and was really pumped about it until I realized it didn't load in Google chrome or Safari. What this script does is its a dual onclick event which makes a hidden div appear and loads an iframe within the now visible div. Here is the code, I would love any input on how to make this work in other browsers. Here is the header code: Code: <SCRIPT type="text/javascript">
<!--
var state = 'none';
function showhide(layer_ref) {
if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}
//-->
</script>
<SCRIPT type="text/javascript">
function loadIframe(iframeName, url) {
if ( window.frames[iframeName] ) {
window.frames[iframeName].location = url;
return false;
}
else return true;
}
</script>
Here is the code on the page where a link click shows the hidden div and loads the iframe contained. Code: <p><a href="#" onclick="showhide('div1');return loadIframe('ifrm1', 'http://www.google.com');">show/hide me</a></p>
</td></tr>
<div id="div1" style="display: none; position: fixed; z-index:4; width: 1010px; height: 500px; left: 5%; top: 15%; background-color: #f0f0f0; border: 1px solid #000; padding: 10px;"><iframe name="ifrm1" id="ifrm1" width="100%" height="90%" scrolling="yes" frameborder="0">Sorry, your browser doesnt support iframes.</iframe><p><a href="#" onclick="showhide('div1')">close</a></div>';
As always, any input is greatly appreciated! I won't even pretend to know what I'm doing. I'm just trying to update a few things on our company's website. We implemented live chat and some new graphics to accomodate our banner. We use two main index files (one sorts by category and the other by manufacturer). Originally these two files along with every single product page referenced the banner code from a javascript file named: header.js This is fine in firefox but IE isn't too thrilled with it and does something fairly strange (at least to me). Here's a link to the problem (open in IE): http://www.alamomotorsports.com/act/act.html Here is the Java code Code: <div id="header_container">
<div id="header">
<div id="header_lh_cell"><a href="http://www.alamomotorsports.com"><img src="http://www.alamomotorsports.com/images/AMSTopper.jpg" alt="Jump to the Alamo Motorsports Homepage" /></a></div>
<div id="header_center_cell">Orders over $150<br /><span class="bam">Ship Free!</span>*<br />
<img src="http://www.alamomotorsports.com/images/multicard_bk_allt.gif" alt="Alamo Motorsports accepts Visa, Mastercard, and American Express" /></div>
<div id="header_rh_cell" class="header_footer_links">
Customer Support:<br />
<span class="bam">800-880-0960</span><br />
<form>
<input type="button" value="Email Us!" onClick="window.open('/emailus.html','mywindow','width=600,height=500')">
</form>
</div>
Also: Code: document.writeln("<div id=\"header_container\"> <div id=\"header\"> <div id=\"header_lh_cell\"><a href=\"http://www.alamomotorsports.com\"><img src=\"http://www.alamomotorsports.com/images/AMSTopper.jpg\" alt=\"Jump to the Alamo Motorsports Homepage\" /></a></div> <div id=\"header_center_cell\">Orders over $150<br /><span class=\"bam\">Ship Free!</span>*<br /> <img src=\"http://www.alamomotorsports.com/images/multicard_bk_allt.gif\" alt=\"Alamo Motorsports accepts Visa, Mastercard, and American Express\" /></div> <div id=\"header_rh_cell\" class=\"header_footer_links\">Customer Support:<br /><span class=\"bam\">800-880-0960</span><br /><form> <input type=\"button\" value=\"Email Us!\" onClick=\"window.open('/emailus.html','mywindow','width=600,height=500')\"> </form></div> <div id=\"header_menu\"> <ul id=\"category\"> <li><a href=\"http://www.alamomotorsports.com/indexcat.html\">Shop By<br />Category</a></li> </ul> <ul id=\"manufacturer\"> <li><a href=\"http://www.alamomotorsports.com/indexman.html\">Shop By<br />Manufacturer</a></li> </ul> <ul id=\"info\"> <li><h2> <br />Info</h2> <ul> <li><a href=\"http://www.alamomotorsports.com/contact_info.html\">Contact Us</a></li> <li><a href=\"http://www.alamomotorsports.com/blowout.html\">Blowout Sale</a></li> <li><a href=\"http://www.alamomotorsports.com/disclaim_shipping.htm\">Our Policies</a></li> <li><a href=\"http://www.alamomotorsports.com/links.html\">Links</a></li> <li><a href=\"http://www.alamomotorsports.com/most_popular.html\">Most Popular</a></li> </ul> </li> </ul> <ul id=\"showcart\"> <li><a href=\"http://www.cartserver.com/sc/cart.cgi?item=a-2309&view.x=1\">Show My<br />Shopping Cart</a></li> </ul> <ul id=\"search\"> <li><form method=\"get\" action=\"http://www.alamomotorsports.com/cgi/search.pl\"> <h2><label for=\"fdse_TermsEx\" >Search for: </label> <input name=\"Terms\" id=\"fdse_TermsEx\" /> <input type=\"submit\" value=\"Go\"> </h2> </form> </li> </ul> </div><!--header_menu--> </div><!--header--></div><!--header_container--><div id=\"content_container\"><div id=\"content\">");
Thank you for help in advance. I'm developing a FlashCard App for Mozilla based browsers, and i seem to be having a strange problem. When i goto write the data file, it for some reason is not writing the CR and LF. In the datafile i'm just getting one long string of data. Hopefully i can get this app functional by today. I want to get back to studying chinese while i'm bussing to work Code: <html>
<head>
<script language="javascript">
// Set Global Variables
var Know = 0;
var DontKnow = 0;
var CurrentCard = 0;
var ChineseCard = new Array();
var PinYinCard = new Array();
var EnglishCard = new Array();
var NumberOfCards = 0;
var DataFile = "C:" + String.fromCharCode(92) + "FlashCard.txt";
var Delimeter = ",";
var EndOfRecordTerminationCharacter = ".";
function init()
{
document.getElementById("FlashCardPlayer").style.visibility = "hidden";
document.getElementById("FlashCardEditor").style.visibility = "hidden";
document.getElementById("MainMenu").style.visibility = "visible";
}
function ShowPlayer()
{
document.getElementById("FlashCardPlayer").style.visibility = "visible";
document.getElementById("MainMenu").style.visibility = "hidden";
document.getElementById("FlashCardEditor").style.visibility = "hidden";
LoadFlashCard();
}
function ShowEditor()
{
document.getElementById("FlashCardEditor").style.visibility = "visible";
document.getElementById("FlashCardPlayer").style.visibility = "hidden";
document.getElementById("MainMenu").style.visibility = "hidden";
}
function ShowMain()
{
document.getElementById("MainMenu").style.visibility = "visible";
document.getElementById("FlashCardPlayer").style.visibility = "hidden";
document.getElementById("FlashCardEditor").style.visibility = "hidden";
}
function btnClickShowPinYin()
{
document.getElementById("PinYin").value = PinYinCard[CurrentCard];
}
function btnClickShowEnglish()
{
document.getElementById("English").value = EnglishCard[CurrentCard];
}
function ClearEditor()
{
// Clear all the text boxes in the editor
document.getElementById("EditChinese").value = "";
document.getElementById("EditPinYin").value = "";
document.getElementById("EditEnglish").value = "";
}
function WriteData()
{
// Conicate the Record data
var WriteData = document.getElementById("EditChinese").value + Delimeter +
document.getElementById("EditPinYin").value + Delimeter +
document.getElementById("EditEnglish").value + EndOfRecordTerminationCharacter + "\n";
// Load the data file's current contents
var OldData = LoadFromDisk(DataFile);
var AppendData = OldData + WriteData + "\n";
// Write the data to the file
SaveToDisk(DataFile, AppendData);
// Clear the TextBoxes to prepare for the next entry
ClearEditor();
}
var Records = new Array();
var Elements = new Array();
function LoadFlashCard()
{
// Load the FlashCard Information from the DataFile into the Arrays
LoadData = LoadFromDisk(DataFile);
// Loop through the String and record the locations of the delimeters
// Split the data string into records
Records = LoadData.split(".");
// Split the Records into Elements
for (var x = 0; x <= Records.length; x++)
{
Elements = Records[x].split(",");
}
// Load the Elements in to the ChineseText, PinYin, and English Arrays
NumberOfCards = 3 / Elements.length;
// Load the Chinese Characters "12, 123, 1234, 12345, 123456, 1234567
var Ptr = 0;
for (var x = 0; x < Records.length; x = x + 3)
{
ChineseCard[Ptr] = Elements[x];
Ptr++;
}
Ptr = 0;
// Load the PinYin
for (var x = 1; x < Records.length; x = x + 3)
{
PinYinCard[Ptr] = Elements[x];
Ptr++;
}
Ptr = 0;
// Load the English
for (var x = 2; x < Records.length; x = x + 3)
{
EnglishCard[Ptr] = Elements[x];
Ptr++;
}
}
function btnClickKnow()
{
Know = Know + 1;
if(CurrentCard == NumberOfCards)
{
// Display the score
alert("You scored " + Know + " out of " + NumberOfCards);
CurrentCard = 0;
Know = 0;
DontKnow = 0;
// clear all textboxes and put index(0) chinese character into the chinese character textbox
}
CurrentCard = CurrentCard + 1;
document.getElementById("PinYin").value = "";
document.getElementById("English").value = "";
document.getElementById("ChineseCharacter").value = ChineseCard[CurrentCard];
}
function btnClickDontKnow()
{
DontKnow = DontKnow + 1
if(CurrentCard == NumberOfCards)
{
// Display the score
alert("You scored " + Know + " out of " + NumberOfCards);
CurrentCard = 0;
Know = 0;
DontKnow = 0;
// clear all textboxes and put index(0) chinese character into the chinese character textbox
}
CurrentCard = CurrentCard + 1;
document.getElementById("PinYin").value = "";
document.getElementById("English").value = "";
document.getElementById("ChineseCharacter").value = ChineseCard[CurrentCard];
}
function SaveToDisk(FileName, Content)
{
try {
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
} catch (e) {
alert("Permission to save file was denied.");
}
var file = Components.classes["@mozilla.org/file/local;1"]
.createInstance(Components.interfaces.nsILocalFile);
file.initWithPath( FileName );
if ( file.exists() == false ) {
file.create( Components.interfaces.nsIFile.NORMAL_FILE_TYPE, 420 );
}
var outputStream = Components.classes["@mozilla.org/network/file-output-stream;1"]
.createInstance( Components.interfaces.nsIFileOutputStream );
outputStream.init( file, 0x04 | 0x08 | 0x20, 420, 0 );
var output = Content;
var result = outputStream.write( output, output.length );
outputStream.close();
}
function LoadFromDisk(filePath)
{
if(window.Components)
try
{
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
var file = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile);
file.initWithPath(filePath);
if (!file.exists())
return(null);
var inputStream = Components.classes["@mozilla.org/network/file-input-stream;1"].createInstance(Components.interfaces.nsIFileInputStream);
inputStream.init(file, 0x01, 00004, null);
var sInputStream = Components.classes["@mozilla.org/scriptableinputstream;1"].createInstance(Components.interfaces.nsIScriptableInputStream);
sInputStream.init(inputStream);
return(sInputStream.read(sInputStream.available()));
}
catch(e)
{
//alert("Exception while attempting to load\n\n" + e);
return(false);
}
return(null);
}
</script>
</head>
<body onload="init()">
<!--
*****************************************
Flash Card Player
*****************************************
-->
<div id="FlashCardPlayer" style="position: absolute; left: 0px; top: 0px;" >
<input id="ChineseCharacter" type="textbox" style="position: absolute; left: 75px; top: 5px; width: 100px; height: 100px; font-size: 35px;">
<input id="PinYin" type="textbox" style="position: absolute; left: 5px; top: 110px; width: 225px;" >
<input id="English" type="textbox" style="position: absolute; left: 5px; top: 135px; width: 225px;">
<input type="button" value="Know" style="position: absolute; left: 5px; top: 170px; width: 100px; height: 30px;" onclick="btnClickKnow();">
<input type="button" value="Dont Know" style="position: absolute; left: 125px; top: 170px; width: 100px; height: 30px;" onclick="btnClickDontKnow();">
<input type="button" value="PinYin" style="position: absolute; left: 5px; top: 210px; width: 100px; height: 30px;" onclick="btnClickShowPinYin();">
<input type="button" value="English" style="position: absolute; left: 125px; top: 210px; width: 100px; height: 30px;" onclick="btnClickShowEnglish();">
<a href="" style="position: absolute; left:10px; top: 245px;" onclick="ShowMain();">Home</a>
<TextArea id="DataArea" style="visibility: hidden;"></TextArea>
</div>
<!--
******************************************
Flashcard Editor
******************************************
-->
<div id="FlashCardEditor" style="position: absolute; left: 0px; top: 0px;">
<input id="EditChinese" style="position: absolute; left: 75px; top: 5px; width: 100px; height: 100px; font-size: 35px;" type="textbox">
<input id="EditPinYin" style="position:absolute; left: 5px; top: 110px; width: 225px;" type="textbox">
<input id="EditEnglish" style="position:absolute; left: 5px; top: 135px; width: 225px;" type="textbox">
<input id="EditClearTextButton" value="Clear" style="position:absolute; left: 5px; top: 180px; width: 100px; height: 30px;" onclick="ClearEditor();" type="button">
<input name="EditOKButton" value="OK" style="position: absolute; left: 125px; top: 180px; width: 100px; height: 30px;" onclick="WriteData();" type="button">
<a href="" style="position: absolute; left:10px; top: 225px;" onclick="javascript:Alert("*sigh* i'm getting to it!");">New</a>
<a href="" style="position: absolute; left:10px; top: 245px;" onclick="btnClickShowMain();">Home</a>
</div>
<!--
******************************************
Define the Layer for the Main menu
******************************************
-->
<div id="MainMenu" style="position: absolute; left: 0px; top: 0px;">
These are the instructions for the Flashcard App. In the future, there should be a score board and a selection of word lists and other such things. However, it's blank for now until i finish this app :)
<input value="Study Flashcards" style="position: absolute; left: 50px; top: 170px; width: 120px; height: 30px;" onclick="javascript:ShowPlayer();" type="button">
<input value="Edit Flashcards" style="position: absolute; left: 50px; top: 210px; width: 120px; height: 30px;" onclick="ShowEditor();" type="button">
</div>
</body>
</html>
Hi Im Using YUI 2.4.1 and the dragdrop text box is not edited upon mouse click in FireFox 3.0 where as it works fine in IE. I iwsh i would get some light on this. the file used is dragsrop-min.js Hi, I currently created a video uploader, but when the video is too big in size, the page seems to be not doing any until the video is completely uploaded. I want to put somewhat like "loading.. please wait" script until the video is not completely uploaded. Thanks. //Ana Javascript: Code: function hoverMenu(listItem, menuName)
{
if (document.getElementById(menuName).isActive == "1")
{
var listItemHeight = document.getElementById(listItem).offsetHeight;
var itemTop = document.getElementById(listItem).offsetTop;
var itemLeft = document.getElementById(listItem).offsetLeft;
document.getElementById(menuName).style.top = itemTop + listItemHeight + "px";
document.getElementById(menuName).style.left = itemLeft + "px";
document.getElementById(menuName).style.display = "block";
document.getElementById(menuName).style.opacity = "1.0";
document.getElementById(menuName).isActive = "0";
}
else
{
var listItemHeight = document.getElementById(listItem).offsetHeight;
var itemTop = document.getElementById(listItem).offsetTop;
var itemLeft = document.getElementById(listItem).offsetLeft;
document.getElementById(menuName).style.top = itemTop + listItemHeight + "px";
document.getElementById(menuName).style.left = itemLeft + "px";
document.getElementById(menuName).style.display = "block";
menuFade(menuName);
document.getElementById(menuName).isActive = "0";
}
}
function hoverMenuTier2(listItem, menuName)
{
if (document.getElementById(menuName).isActive == "1")
{
var itemTop = document.getElementById(listItem).offsetTop;
var itemLeft = document.getElementById(listItem).offsetLeft;
document.getElementById(menuName).style.top = itemTop + "px";
document.getElementById(menuName).style.left = itemLeft + "px";
document.getElementById(menuName).style.display = "block";
document.getElementById(menuName).style.opacity = "1.0";
document.getElementById(menuName).isActive = "0";
}
else
{
var itemTop = document.getElementById(listItem).offsetTop;
var itemLeft = document.getElementById(listItem).offsetLeft;
document.getElementById(menuName).style.top = itemTop + "px";
document.getElementById(menuName).style.left = itemLeft + "px";
document.getElementById(menuName).style.display = "block";
menuFade(menuName);
document.getElementById(menuName).isActive = "0";
}
}
function hideThis(menuName)
{
document.getElementById(menuName).style.display = "none";
document.getElementById(menuName).style.opacity = "0";
}
function showMenu(menuName)
{
document.getElementById(menuName).style.display = "block";
document.getElementById(menuName).style.opacity = "1.0";
document.getElementById(menuName).isActive = "1";
}
HTML: Code: <div id='db-sub' class='ddm-db' onmouseover="showMenu('db-sub');" onmouseout="hideThis('db-sub');">
<ul>
<a href='#'><li id='dba' class='sub'>1</li></a>
<a href='#'><li class='sub'>2</li></a>
<a href='#'><li class='sub'>3</li></a>
<a href='#'><li class='sub'>4</li></a>
<a href='#'><li class='sub'>5</li></a>
<a href='#'><li class='sub'>6</li></a>
<a href='#'><li class='sub'>7</li></a>
<a href='#'><li class='sub'>8</li></a>
<a href='#'><li id='dbq' onmouseover="hoverMenuTier2('dbq', 'dbq-sub');" onmouseout="hideThis('dbq-sub');" class='submenuArrow'>9</li></a>
<a href='#'><li class='sub'>10</li></a>
<a href='#'><li class='sub'>11</li></a>
<a href='#'><li class='sub'>12</li></a>
<a href='#'><li class='sub'>13</li></a>
</ul>
</div>
The remaining HTML for the the 'dqb-sub' element that is displayed follows an identical format to 'db-sub'. Mousing over the upper elements produces a drop-down menu that is aligned with the position of the top-most element in question. Mousing over the 'dbq' element produces the element 'dbq-sub' at the (0,0) position of the window, which is my issue. I believe it has to do with the fact that I'm setting the display property to 'none', which essentially destroys the element, along with its properties. What doesn't make sense is that while the 'db-sub' element is set to a block display type, it should have valid, non-zero offsets. I'd like the 'dbq-sub' element to position based on where the 'dbq' element is. Any ideas? How you handle back button scenario in firefox browser. The problem is when i click browser back button , the javascript on load is not executed and page is rendered from cache. It works in IE.. Hi all, this is the code I'm using in order to display the contents of an xml file into a page. It's working fine with IE but with Firefox. I have searched over intrenet and have applied all suggestions I've found about this issue. Unfortunately it's still not working. Can you please help me??? Code: function importXML()
{
if (document.implementation && document.implementation.createDocument)
{
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.onload = createTable;
}
else if (window.ActiveXObject)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.onreadystatechange = function () {
if (xmlDoc.readyState == 4) createTable()
};
}
else
{
alert('Your browser can\'t handle this script');
return;
}
xmlDoc.load("news.xml");
}
function createTable()
{
var x = xmlDoc.getElementsByTagName('event');
var newEl = document.createElement('table');
newEl.style.width = '100%';
newEl.setAttribute('cellPadding',0);
newEl.setAttribute('cellspacing',0);
var tmp = document.createElement('TBODY');
newEl.appendChild(tmp);
for (i=0;i<x.length;i++)
{
var row = document.createElement('TR');
if (x[i].childNodes[0].nodeType != 1) continue;
var container = document.createElement('<TD style="padding-left:3px; font-weight:bold;">');
var theData = document.createTextNode(x[i].childNodes[0].firstChild.nodeValue);
container.appendChild(theData);
row.appendChild(container);
tmp.appendChild(row);
row = document.createElement('TR');
if (x[i].childNodes[1].nodeType != 1) continue;
var container = document.createElement('<TD class="box_2">');
var theData = document.createTextNode(x[i].childNodes[1].firstChild.nodeValue);
container.appendChild(theData);
row.appendChild(container);
tmp.appendChild(row);
}
document.getElementById('writeroot').appendChild(newEl);
}
I am currently working on a simple site and I was looking into methods to take advantage of html partial rendering to make site maintenance easier without using a server side language. The code for the two pages is as follows: Main html page: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<link href="../css/main.css" rel="stylesheet" type="text/css"/>
<link href="../css/default.css" rel="stylesheet" type="text/css"/>
<title>Default</title>
</head>
<body>
<div class="navigation" id="nav_div">
<iframe name="nav_frame" onload="loadNav()"></iframe>
</div>
<script type="text/javascript" language="javascript">
<!--
function loadNav()
{
nav_frame.location="../static_partials/navigation.htm";
}
//-->
</script>
</body>
</html>
And the code of navigation.htm is: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<script type="text/javascript" language="javascript">
<!--
function iframeLoad()
{
parent.document.getElementById("nav_div").innerHTML = document.getElementById("navigation_divs").innerHTML;
}
//-->
</script>
<title>Navigation Partial</title>
</head>
<body onload="iframeLoad()">
<div id="navigation_divs">
</div>
</body>
</html>
The works fine in IE, but in Firefox 3.5.7 the iframeLoad generates an exception. The exception states the following: Code: Permission denied for <file://> to get property Window.document from <file://>. Firefox doesn't seem to like my usage of the parent object in that way, but I am unsure of another way to do it without using a server side language. I'm currently working on a project and I am doing a bunch of image switching. I'm having a problem with the following... I have seven medium image objects and one small one. One is at the top and the other 7 are below. When one of the 7 is clicked, it then becomes the one up top and the one up top then takes the place of the image clicked. This needs to be able to happen no matter which of the seven i click. Also when you click one of the seven it runs a script to change 9 other images in the center of the page. this isnt too important because i have it working already. What i have is, each of the seven images run their function that changes the 9 center images and then it runs another function. What i need is for that function to determine which company for example(shaws, lowes, target) the top image belongs to and replace the image that was clicked with the top one. But i also need to replace the NAME="" and ONCLICK="function()" with the proper ones for the original company up top. Please if you can understand what im trying to do let me know, if you need further clarification i can do so. i can draw a picture of what im trying to do or the layout if needed but i cant necessarily show anyone the project due to a non-disclosure. Is it possible disable an onclick after clicking it and then enable it from another onclick by id Code: <img id="one" href="images/homepage/sliders/bonus_button.jpg" style="position:relative; top:30px; left:50px; height:30px; width:70px; float:left;"> This code runs when it is clicked: Code: $("#one").click(function() {
runEffectB();
return false;
});
What I would like to happen is for either runEffectB() to not run if it was just run or to disable the #one.click once it has run. I am assuming I will be able to re-enable it from another onclick running a similar function. This is jquery and jquery ui if that helps. Any ideas much appreciated. I want to be able to have multiple video's available on our site from our local news station. I have two separate video's in the code but only one shows. I wanted to show a player for each one but it looks as though I can display one player and need to know how to have more than one load in the same player - one at a time. I hope this makes sense. I need to have links but not leave this page or player. You can view the code with two video links here http://www.cincinnatidesigns.com/wri...ing/w_news.htm |
|||||||