|
JavaScript - Anchor Objects Referenced By Name Fail In Ie?
for an anchor object, it is ok to reference by index. But when referenced by name, it seems unavailable in IE8 (not sure abt other IE version). I tried FF, it works well. So is it an IE bug or something?
Code: <a name="thisAnchor">HERE</a> <script language="javascript" type="text/javascript"> alert(document.anchors[0].nodeType) // no problem in IE and FF alert(document.anchors["thisAnchor"].nodeType) // does't work in IE? </script> thx in advance Similar TutorialsHi guys, Having a little bit of trouble with a site I'm currently working on... I'm using some AJAX for the instant g-mail/facebook style navigation, you know the kind, with no refreshes, etc. Problem is, to allow for back/forward and bookmarks, I currently use a URL that looks like: http://www.mySiteOfFun.com/index.html#page=news.html; This is fine, not a problem... The issue comes into play when I want to open up the news.html page, from my home.html page, and have it open to news item #6 (for example). I can't add a #, because one is already being used to reference the anchor for the content div. Has anyone run into a similar problem before? If so, how did you resolve it? Can some jQuery be used to find the location of the news item div in question, on load, and scroll to it like that? Just not sure how to progress really, and any help would be greatly appreciated! You know the deal: you have something (tooltip-like) that pops up on mouseover and disappears again on mouseout. But sometimes, the mouse moves too fast (speedy Gonzalez?), and the event doesn't get trapped. So your tooltip thingy stays popped, and doesn't go away till another mouseover-mouseout happens. Any suggestions for avoiding this scenario?
Greetings, I had to add the following DOCTYPE to a webpage in order for IE to parse my page design properly, and this caused the form on the page to fail in FireFox (which works fine without the doctype). The form works fine in IE. Here is the DOCTYPE I added to the top of the page; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> The error log in FireFox says; frmTest is not defined - Line 30 Here is the block of code it is referring to; function MoveForward(ipage) { if(TestAnswers()) { frmTest.action.value = 'next'; frmTest.p.value = ipage; frmTest.submit(); frmTest.cmdNext.disabled = true; try { frmTest.cmdBack.disabled = true; } catch(err) { } } } Line 30 is: if(TestAnswers()) The opening form code further down the page is; <form action="stress_test.asp" method="post" name="frmTest" id="frmTest"> I have been up against this for a couple days, any help would be very (very) appreciated. Regards, Ross I try to auto scroll to bottom of a div when the page is loaded. It works on firefox but it is not working on IE. How to scroll to bottom on a div when page is loaded on IE? You can test it by copy paste my codes into two html files. test5.html : Code: <div id='div' style='overflow:scroll; height:300px; width:200px; border:1px solid blue; background:yellow;'>
</div>
<script src="javascripts/jquery-1.5.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript">
function showrsp(){
jQuery.get("test5a.html", function(data) {
$('#div').append(data);
$(document).ready(function(){asd();});
});
};
function asd(){
$('#div').scrollTop($('#div')[0].scrollHeight);
}
showrsp();
</script>
test5a.html : Code: <p>asdasdas</p>
<p>asdasdas</p><p>asdasdas</p><p>asdasdas</p><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" />
<p>asdasdas</p><p>asdasdas</p><p>asdasdas</p><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" />
<p>asdasdas</p><p>asdasdas</p><p>asdasdas</p><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" />
<img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" />
<img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" />
<img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" /><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" />
<img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" />
<p>asdasdas</p><p>asdasdas</p><p>asdasdas</p>
<p>asdasdas</p><p>asdasdas</p><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" />
<p>asdasdas</p><p>asdasdas</p>
<p>asdasdas</p><p>asdasdas</p><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" />
<p>asdasdas</p><p>asdasdas</p><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" />
<p>asdasdas</p><p>asdasdas</p><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" />
<p>asdasdas</p><p>asdasdas</p><img src="http://2aek.com/inventory/emoticons2/69.gif" border="0" />
How to wait until innerHTML finish render the contents before execute function asd()? If you try some codes and then catch exception, it should catch the exception when there is. However, if there is a setInterval method in the try clause, then the exception cannot be caught... why??? the following works ( a usual method is invoked in the try clause): Code: <script language="javascript" type="text/javascript">
function invoke()
{ var i=0;
return i.x.y;
}
try
{
alert(invoke());
}
catch(ex){ alert(ex); } //Any Exception will be caught.
</script>
if the highlighted line is changed as below (using setInterval method), then it fails... Code: <script language="javascript" type="text/javascript">
function invoke()
{ var i=0;
return i.x.y;
}
try
{
setInterval(alert('invoke())',1000);
}
catch(ex){ alert(ex); } //The Exception will NOT be caught.
</script>
any idea? thx in advance EDIT: Ive actually managed to sort this out. The problem was as simple as the onload in the body tag was overriding the onload script in the header. Combining the two solved the problem. Ive recently been appointed to do some work on my employers website. For now, to hold us over until we can manage a complete re-write, I have been asked to just do a little update to the look and feel. One of the things I have done is use the niftycorners code for rounded divs. I have had no trouble implementing this code over all the site pages, until I got to one page. Our product pages. Ive never seen a code placed directly within the body tag, but this is what has been done here. <BODY onload="pricing_init(); attribute_changed();"> This code loads the dynamic pricing feature. Unfortunately, it also causes the nifty corners code I have placed between the head tags to fail. I dont know if its just the odd placement of the code or the code itself as I am just learning js (using the Javascript and Ajax for dummies book). Is there some way I can alter this so that both the dynamic pricing and nifty corners works? thanks in advance for any suggestions. Honestly, its probably my fail. Regardless, here is the deal, any help would be appreciated. I am currently skinning up a custom cpanel theme for a company I work with from time to time, kudolabs.net. They would like their Jixed Bar that is on their main web page to be on the skin, and I am attempting to put it there now. I have put the code into the html of the skin, both the call to the proper javascript files and css files, and the proper code for the bar itself. It is not working, the bar shows up as it is supposed to, but it is not aligned correctly and the bar does not float with the page. It acts exactly like the javascript is not working at all.... Unfortunately I can't just provide access to the cpanel for people to check, but you can see the source code of the main page, kudolabs.net, and if you're willing to help, I can of course give you access to a demo account (and quite possibily provide some hosting for a month or two, we're based in the netherlands and have plenty of space to share to anyone willing to help us with little problems such as this. @_@ ) Thank you for your time reading this, any help or points in the right directions would be appreciated. Unfortunately, google has failed me this time. Or, rather, I have failed google. o.o I have a JSP page,such as test.jsp Code: <input name="id1" type="text" value="abc" size="40"> Then I want to open it by using Javascript,and alert id1 value,so I use following statements: Code: var s=window.open('test.jsp','mywin');
alert(s.document.id1.value);
When I run alert(s.document.id1.value),,it raise javascript error Code: s.document.id1.value undefined I want to know how Javascript can get jsp value by window.open? Thanks I've cannibalised some code from the jQuery supersized plugin that scales images to full screen size while retaining aspect ratio. However, I seem to be getting it wrong, and my maths is... well, appalling. The problem is that while it's resizing correctly to fit the width OR the height, it's not fitting the width AND the height. That is: If I adjust the window height, the image scales to fit the height, but goes outside the window width. If I adjust the window width, the image scales to fit the width, but goes outside the window height. If I adjust both (dragging the window corner) it seems to favour fitting the width. I am currently using only landscape images. I don't know if that has a bearing. This may well just be a logic issue, but my brain is just turning to jelly when I look at my code below: Code: var image_ratio = options.image_dimensions.height / options.image_dimensions.width;
var browser_ratio = browser_height / browser_width;
if (browser_ratio > image_ratio){
var target_height = browser_height;
var target_width = Math.floor(browser_height / image_ratio);
} else {
var target_width = browser_width;
var target_height = Math.floor(browser_width * image_ratio);
}
The code above works out some new image dimensions and is called when the browser is resized. The options.image_dimensions.height and options.image_dimensions.width variables represent the original dimensions of the image, and browser_height and browser_width are calculated from the window size. How can I make it fit either landscape or portrait images to the smallest available dimension of the browser? I have placed the <script></script> in the <head></head> tags and the page will not work. But placing the <script> below the element that the JS works with allows the page to work but thought the correct method to use was place all JS functions inside the <head> tags? here is a link to the folder I am testing this out on. http://www.realistichostings.com/test_booking/ I have named the two files accordingly, test_booking_page-script is in head tags.php test_booking_page-script is outside head tags.php can anyone tell me why the code works outside the head tag but not when i is inside the head tag ? function($) { $.fn.superfish = function(op){ var sf = $.fn.superfish, c = sf.c, } So I see the '.superfish' method being added to the object '$.fn'. I find it interesting that the first order of business is to declare 'sf' and stuff in to it some value '$.fn.superfish' which I do not fully understand. Also the statement c=sf.c How can 'c' be set to equal 'sf.c' when no 'sf.c' has been declared yet? Thanks! Hi, I am trying to detect a users browsers and output a different code based on browser. I found this code online that uses the object detection method and it works. When I document.write(BrowserDetect.browser) it outputs Chrome, (which is what I am using). The code can be found he http://www.quirksmode.org/js/detect.html So I can't understand why the following code does not work? It ouputs the "not" in the else statement. I believe that BrowserDetect is an object and the .browser at the end is a property of the object. Can one not make an object a variable? or make an object a string? oh and BTW there is a bunch of javascript that creates the browserdetect object that can be found on the site above, but I thought it would be too unwieldy to post here. Thanks. The following script outputs: Chrome Not Working <script type="text/javascript"> document.write(BrowserDetect.browser); var browser="BrowserDetect.browser"; if(browser=="Chrome") { document.write(" Working"); } else { document.write(" Not working"); } </script> I am able to do the following; Code: alert(myObject.Income.EESA.Name); However I'm looking at Code: alert(myObject.Income[0].Name); Or even better, not the full name, just "EESA". I need to loop through as you can see at the end of this script what I'm working on. Code: <script type="text/javascript">
var EESARate = 289.3;
var DLARate = 111.20;
var CARate = 61.35;
var SkyCost = 54.75;
var PerfectHomeCost = 28.17;
var CreditExpertCost = 14.99;
var UnitedUtilitiesCost = 8.13;
var BTCost = 57.18;
var AdobeCCCost = 46.88;
var TVLicenceCost = 6.06;
var GasCost = 10.00;
var ElectricCost = 20.0;
var ServerPackageCost = 9.99;
var USDValue = 123; //Fetch the value
var myObject = {
"Income": {
"EESA": {
"Name": "Enhanced Employment and Support Allowance",
"Amount": {
"GBP": EESARate,
"USD": EESARate * USDValue
},
"Frequency": {
"When": "14",
"Next": "30/10/2014"
},
"Description": "",
},
"DLA": {
"Name": "Disibility Living Allowance",
"Amount": {
"GBP": DLARate,
"USD": DLARate * USDValue
},
"Frequency": {
"When": "7",
"Next": "Wednesday"
},
"Description": "",
},
"CA": {
"Name": "Carers Allowance",
"Amount": {
"GBP": CARate,
"USD": CARate * USDValue
},
"Frequency": {
"When": "7",
"Next": "Saturday"
},
"Description": "",
},
},
"Bills": {
"Sky": {
"Name": "Sky",
"Amount": {
"GBP": SkyCost,
"USD": SkyCost * USDValue
},
"Frequency": {
"When": "30",
"Next": "XX/XX/XX"
},
"Description": "",
},
"PerfectHome": {
"Name": "Sky",
"Amount": {
"GBP": PerfectHomeCost,
"USD": PerfectHomeCost * USDValue
},
"Frequency": {
"When": "7",
"Next": "Wednesday"
},
"Description": "",
},
"CreditExpert": {
"Name": "Experian Credit Expert",
"Amount": {
"GBP": CreditExpertCost,
"USD": CreditExpertCost * USDValue
},
"Frequency": {
"When": "30",
"Next": "XX/XX/XX"
},
"Description": "",
},
"UnitedUtilities": {
"Name": "United utilities",
"Amount": {
"GBP": UnitedUtilitiesCost,
"USD": UnitedUtilitiesCost * USDValue
},
"Frequency": {
"When": "7",
"Next": "Wednesday"
},
"Description": "",
},
"BT": {
"Name": "British Telecomunications",
"Amount": {
"GBP": BTCost,
"USD": BTCost * USDValue
},
"Frequency": {
"When": "30",
"Next": "XX/XX/XX"
},
"Description": "",
},
"AdobeCC": {
"Name": "Adobe Creative Cloud Suite",
"Amount": {
"GBP": AdobeCCCost,
"USD": AdobeCCCost * USDValue
},
"Frequency": {
"When": "30",
"Next": "XX/XX/XX"
},
"Description": "",
},
"TVLicence": {
"Name": "Television Licence",
"Amount": {
"GBP": TVLicenceCost,
"USD": TVLicenceCost * USDValue
},
"Frequency": {
"When": "30",
"Next": "XX/XX/XX"
},
"Description": "",
},
"Gas": {
"Name": "Eon Gas",
"Amount": {
"GBP": GasCost,
"USD": GasCost * USDValue
},
"Frequency": {
"When": "7",
"Next": "Wednesday"
},
"Description": "",
},
"Electric": {
"Name": "Eon Electric",
"Amount": {
"GBP": ElectricCost,
"USD": ElectricCost * USDValue
},
"Frequency": {
"When": "7",
"Next": "Wednesday"
},
"Description": "",
},
"ServerPackage": {
"Name": "1&1 Unlimited Plus (12 mo. term)",
"Amount": {
"GBP": ServerPackageCost,
"USD": ServerPackageCost * USDValue
},
"Frequency": {
"When": "30",
"Next": "XX/XX/XX"
},
"Description": "",
},
},
};
var IncomeTotal = 0;
for (var k in myObject.Income) {
if (myObject.Income.hasOwnProperty(k)) {
++IncomeTotal;
}
}
alert(myObject.Income.EESA.Name);
document.write('<table>')
for(i = 0; i < IncomeTotal; i++){
document.write('<tr>')
document.write('<td>row ' + (i+1) + ', column 0</td>')
document.write('</tr>')
}
document.write('</table>')
var TotalBills = 0;
for (var k in myObject.Bills) {
if (myObject.Bills.hasOwnProperty(k)) {
++TotalBills;
}
}
//alert(TotalBills);
</script>
I'm having a spot of trouble in making my functions work and my book seems to be pure rubbish. I'm sure that the error is purely syntax, although it may be something more. Code: <script type="text/javascript" src="flowers.js"></script>
<script type="text/javascript">
function pageSetup() {
var today = new Date(); // this creates a date object with today's date
var banner = displayBanner(today); // *should* call the displayBanner function
var days = calcDaysToSale(today); // *should* call the function using today's date
document.sale.saleMessage.value = days; // *should* set the value to days.
// Obviously none of it works.
}
</script>
This is the code working with the script contained in the html file. I'll post the full page at the bottom. The following code is the JavaScript code. The first function isn't made to provide full functionality at the moment, I'm trying to get the rest of it working. Code: function displayBanner(currentDate) {
if (currentDate.getMonth() == 2)
imgSrc = "winterLogo";
return ("<img src='" + imgSrc + ".gif'>");
}
function calcDaysToSale(currentDate) {
var saleDay = new Date();
saleDay.setDate(15); // sets the sale date to the 15th of the current month
// Subtracts the days remaining until the sale.
// If the number is negative, the sale is over.
var Days = saleDay.getDate()-currentDate.getDate();
if (Days < 0) {
return "The sale has ended.";
}
else {
return Days;
}
}
I have tried to Google the problem and I have also tried to look it up in my book. I simply don't know the right terms to Google, and as I said the book is rubbish. I don't know why the Code: document.sale.saleMessage.value = days; doesn't work for this. Oh well, I'll learn quickly I suppose. Here is the full HTML code: 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>Carol's Flowers</title>
<link href="flowers.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="flowers.js"></script>
<script type="text/javascript">
function pageSetup() {
var today = new Date(); // this creates a date object with today's date
var banner = displayBanner(today); // *should* call the displayBanner function
var days = calcDaysToSale(today); // *should* call the function using today's date
document.sale.saleMessage.value = days; // *should* set the value to days.
// Obviously none of it works.
}
</script>
</head>
<body class="oneColLiqCtrHdr">
<div id="container">
<div id="header">
<p><img name="myBanner" src="banner" id="myBanner" alt="Carol's Flowers" />
<!-- end #header -->
</p>
<div id="links"><a href="#">Home</a> | <a href="#">General Arrangements</a> | <a href="#">Seasonal Designs</a> | <a href="#">Custom Orders</a> | <a href="#">Location</a></div>
</div>
<div id="mainContent">
<table id="mainTable">
<tr>
<td width="201"><h1><img src="Flowers.JPG" alt="Random Flowers" width="200" height="255" /></h1></td>
<td width="687">
<p>Here at Carol's Flowers, we believe that there is a perfect floral arrangment for every occasion! Take a look around and see if there is anything you like. If we don't already have it, then we will create it for you!</p></td>
</script>
</tr>
</table>
<!-- end #mainContent --></div>
<div id="footer">
<p> <form name="sale" id="sale">
Days Until Mid Month Madness Sale :
<input type="text" name="saleMessage" id="saleMessage" /></form></p>
<!-- end #footer --></div>
<!-- end #container --></div>
<!-- I am trying to run the script here -->
<script type="text/javascript">
pageSetup();
</script>
</body>
</html>
Hi If i was using c# i would use a generic list and add all my people objects to the list collection but how do i do this in jquery/javascript eg //container object var allObj= { }; //people object var people= { name:"fred",: age:00; }; How do I add many people objects to allObj (the amount of people added in not always the same) eg the final result is something like this allObj -person1 -person2 -person3 -person4 thanks I'm trying to reuse some code in a different context to do a different job. The code to be reused contains hundreds of lines similar to a = new b.c.d(e,f) with different value for e and f. I need to create a new user defined object with the structure b.c.d. I've made numerous attempts along the lines of: Code: function d (e, f) {
this.e = e;
this.f = f;
}
function c () {
this.d = d (e, f);
}
function b () {
this.c = c;
}
var a = new b.c.d("test", "message");
with various permuations of functional declarations. However I get error message "Object expected" or "b.c.d is null or not an object" at the final line of the example. It works with the test line var a = new d("test", "message") but not when I start to build up the expression. How should I define of b.c.d? Hi there, I have a very strange issue using dynamic scripting and iframe. It looks like when when iframe is loaded (i.e. onload method is triggered) all js objects that were sent to iframe before disappear? To clarify... I set iframe.scr from java script that caused it to connect to the server. After connection is established I start sending JS code to it (including some JS objects). At some point connection to iframe is closed (and onload method is called). Later on I reconnect (i.e. set src property again), and try to issue method calls on the JS objects that were sent in earlier session. None of these methods get triggered. Did anyone experienced similar problems? Is there a workaround? (I.e. is there any way I can send register JS Objects globally when sent through iframe?). Thanks for all your help, Ed Greetings! This is actually a two part question from the html source I attached as a .txt document (too big for the post). 1) How can I get the name of an object. I took my failed attempt in the function named disableJobStream: Code: function disableJobStream(obj)
{
if((obj.value == "completed") && (getRadioCheckedValue("shift") == "2"))
{
if(obj.name == "artprogs")
{ document.shiftreport.artprogs.disabled = true; }
}
<select style="100px;" name="artprog_stat" OnChange="disableJobStream(this)"><option style='background-color:white;' value='none'selected='selected'>None</option>
<option style='background-color:red;' value='stopped'>Stopped</option>
<option style='background-color:yellow;' value='running'>Running</option>
<option style='background-color:green;' value='completed'>Completed</option>
</select>
2) Once I put my form through validation any of the fields that I disabled become enabled again. How would I go about keeping that from happening? Page is too large to post and too large to put up as an attachment! Thanks for your help! Hello there folks, First time poster, so please be gentle I am ok with using objects creating classes if someone else defines, but when it comes to defining my own, I hit a nasty brick wall... I am using an XML/XSLT wrapper called Sarissa to help with programming a utility to transform XML into HTML in different views. For this to happen, I have created a Loader class which loads in XML required. I am aware of prototyping for binding methods to objects (as opposed to replicating the same method every time an instance is created)... The aim being I want to create a progress bar for the essential files that need to be loaded in. Presently I have them load in Synchronous mode just to get the utility working, which I know is poor, so would like to address it. So can someone answer me this: I understand why this works: Code: var SWMU = new Object();
SWMU.stylesheets = new Object;
SWMU.joblot = null;
SWMU.cache = new Object;
SWMU.filtering = new Object;
SWMU.locns = null;
function Loader(sXml, sTitle) {
this.doc = Sarissa.getDomDocument();
this.doc.load(sXml);
this.doc.summary = sTitle;
this.doc.onreadystatechange = function() {if(this.readyState)
{alert(this.summary + " state change to..." + this.readyState);} else
{alert(this.summary + " state change to..." + this.doc.readyState);}
}
}
function async() {
SWMU.stylesheets[0] = new Loader("swmu_test/swmu_berthing.xsl", "Main SWMU Stylesheet");
SWMU.stylesheets[1] = new Loader("assets/xsl/controls.xsl", "Drop down boxes");
}
function _init() {
async();
}
as it recreates the "this.doc.onreadystatechange" anonymous function everytime an instance is created (which is yuck). However, when I do this (using prototype)... Code: var SWMU = new Object();
SWMU.stylesheets = new Array;
SWMU.joblot = null;
SWMU.cache = new Object;
SWMU.filtering = new Object;
// Now define the Loader object
// Create the loader method for dealing with items loaded
function Loader(sXml, sTitle) {
this.doc = Sarissa.getDomDocument();
this.doc.load(sXml);
this.doc.summary = sTitle;
}
function rHandler() {alert(this.summary + " State changed to... "+this.readyState);}
// Create the request handler
Loader.prototype.doc = {};
Loader.prototype.doc.onreadystatechange = rHandler;
function async() {
SWMU.stylesheets[0] = new Loader("swmu_test/swmu_berthing.xsl", "Main SWMU Stylesheet");
SWMU.stylesheets[1] = new Loader("assets/xsl/controls.xsl", "Drop down boxes");
}
function _init() {
async();
}
Nothing happens and no errors are thrown, though there should be an alert box everytime there is state change to the progress of a file loading. Can someone help me with this? Apologies if this is on the basic side, but it has been causing me a headache all week, and I can not find any answers on this. Shaun Is it possible to create an array of objects? I require a two dimensional array of objects. Thanks! |
|||||||