|
JavaScript - Image Object Src Not Accepting Absolute Paths
Background on my task:
My page accepts a url with various parameters passed in querystring. One of the parameter is the URL of the Image I wish to display on the page. I save this URL in a variable "imagesource" To ensure the image is not bigger than the size permitted, I use image object to get the height and width of the image. Now here's my code: function foo(){ ...... var imagesource = URL of the image; .... var newImg = new Image(); newImg.src = imagesource; var height = newImg.height; var width = newImg.width; .... } Now, say if, imagesource = http://www.yourwebsite.com/yourimage.jpg I expect newimage.src to be http://www.yourwebsite.com/yourimage.jpg But I get newimage.src = http://www.mywebsite.com/http://www.yourwebsite.com/yourimage.jpg Browser in use : IE 8 (if it matters in this case) Am I wrong in my assumption to begin with? Similar TutorialsHi All, Although I have done a fair bit of html coding after taking several HTML courses, I have never become involved in JavaScript beyond adding the occasional pre-made script for a particular function. Which is what I am trying to do at the moment. I want to insert a slide show into a page and have tried 2 scripts from Java Kit Scripts. Both are similar and I am having the same problem with both. The problem: Inserting the image path. They both ask for the image path (naturally) and give the following examples: =========================== Example 1: //configure the paths of the images, plus corresponding target links slideshowimages("food1.jpg","food2.jpg","food3.jpg","food4.jpg","food5.jpg") ============================ Example 2: //ultimateshow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target"] ultimateshow[0]=['dinosour.gif', '', ''] ultimateshow[1]=['crow.gif', 'http://www.dynamicdrive.com', '_new'] ============================= But there is no reference to an "image" folder. I have tried inserting the folder name: "images/iss-bunker-1tn.jpg", I have also tried leaving the word "images" out and also tried saving the related images in the same folder as the html coded pages. I have also tried using "shtml" pages. But nothing seems to work. My lack of JavaScript knowledge is obviously the problem, but I would greatly appreciate some help. Sincerely RufusB Hi, So here is my problem. I have a main image that has a bunch of images (e.g., stars) on top. I place the stars in absolute positions on top of the main image. If a user resizes the brower, then the position of the main image changes, so then the stars are off position (not on top of the main image). Should I: 1) make the main image be in an absolute position? or 2) do something else such that the main image moves around if the browser is resized? but then I don't know how to re-adjust the positions of the stars on the fly. I'm trying to make a countdown timer, it works fine if I define the value myself from where it has to start. However, when I try to take output from the user it says undefined and 'Nan'. Here is the code of html Code: <html> <head> <script type="text/javascript" src = "experimento2.js"></script> <link rel="stylesheet" type="text/css" href="experimento2.css" /> </head> <body> <h1> Count DOWn!</h1> Enter the number to begin countdown with : <input type = "text" id = "user" onchange = "input()"/> <input type="button" onclick = "timedCount()" value = "begin" id = "begin" /> <input type = "button" onclick="stopCount()" value = "stop" id = "end" /><br> <div id = "start" >00 </div> </body> </html> Here is the script: Code: var t;
var l =document.getElementById("user").value;
var c = l;
function timedCount()
{
document.getElementById('start').innerHTML=c;
c=c-1;
t=setTimeout("timedCount()",1000);
}
function stopCount()
{
clearTimeout(t);
}
Basically my problem is that if I give c a value like c = 30. it works fine. But when I try to take the input , it gives an undefined error. I am trying to use JavaScript to change the path to my pics on my web site at the same time that I change the css sheet. I found the code to change the css but I want to change the pic paths at the same timeI got the css changing code from http://javascript.internet.com/css/change-style.html thanks
Hi, i'm new to javascript, im managing to find out how to do most things, but i need to validate two paths. I want to know how to check whether path1 is a subpath of path2. e.g. 1: /files/stuff/mypics/anotherfolder/etc 2:/files/stuff/mypics i want to be able to return a boolean given whether i can move folder 1 in to folder 2 in this case yes. but if you swap them its a no. please help. oxide i want to draw vector paths on the the google map on my site that I want to add moving vehicles on the roads and i want to zoom the map when the cars going somewhere. Can I do it? I do not want to take a screenshot of the google map adress. here is my javascript codes.Do you have an idea about google map zooming with animations? var options = { controls: { panControl: true, zoomControl: true, mapTypeControl: true, scaleControl: true, streetViewControl: true, overviewMapControl: true }, scrollwheel: true, maptype: 'TERRAIN', markers: [ { latitude: -2.2014, longitude: -80.9763, }, { address: "Guayaquil, Ecuador", html: "My Hometown", icon: { image: "images/gmap_pin_grey.png", iconsize: [26, 46], iconanchor: [12,46] } } ], icon: { image: "http://www.mobilyala.com/mapfiles/marker.png", iconsize: [37, 34], shadowsize: [37, 34], iconanchor: [9, 34], shadowanchor: [19, 34] }, latitude: -2.282, longitude: -80.272, zoom: 10 } In the spirit of the season, I wanted to make it snow on my website. So I began digging. Eventually I ended up with a script that moved an image element down the page in a snowflake-like manner. The problem with it was it was dependant on an img element for every flake - simply no poor programming when using an Object Oriented programming language. So I decided I wanted to extend (in Java-speak; most of my programming background is in Java) the in-built Image object. The new object's src variable will lead to an image of the type of flake it is. (I want to be able to have more variance in images than a simple dot.) The new object will have a function that will allow it to move. A separate, unrelated function will control when each flakes move. I did some more research and read about prototyping on JavaScript Kit and here, but I still cant seem to get this to work. JS Lint says it's bug-free, but Firefox says "move()" is an invalid function. I am presuming the problem lies in my inability to fully grasp how to extend objects in JavaScript. Code: <html>
<head>
<script type="text/javascript">
Image.prototype.dFlake=dotFlake;
function dotFlake(xLocation,yLocation){
this.src = "simpleDotFlake.png";
this.x = xLocation;
this.y = yLocation;
}
dotFlake.prototype.move = fall;
function fall(){ // ^^ Belongs to dotFlake class.
this.style.position="absolute";
this.style.top = this.y;
this.style.left = this.x;
this.y= this.y + 1; // Falling is constant.
if (Math.random() > 0.5){ // Random direction, though.
this.x = this.x + 1;
} else{
this.x = this.x - 1;
}
}
function snow(flakes){ // Allows addition of different flakes later.
for (i in flakes){
i.move();
}
timer = setTimeout("snow()",1);
}
function startSnow(){
basicFlakes = new Array(new dotFlake(0,0));
snow(basicFlakes);
}
</script>
</head>
<body onload="startSnow()">
<h1>This is test text.</h1>
<img id="basicFlake" src="./simpleDotFlake.png" width="10" height="10" />
</body>
</html>
Any and all input is much appreciated. Thank you! Hi, every time I try and alert: [ { number:0, secondnumber:0 }, { number:2, secondnumber:1 }, { number:1, secondnumber:2 } ] it just shows [object object], [object object], [object object]. Why is this and what can I do to make the record be shown as it is above in an alert? Thanks. I can't get any info from Firebug except that one line, uncaught exception [object Object]. The code fully worked, then I needed to make it dynamically create Sortables from the scriptaculous library based on how many X were in a table in my database, which I've done, and I'm thinking it may be a simple slight parse error of some type, I'm not too good with Javascript, because now my script barely works. I've double checked the script's source code, the PHP variables are exactly what they should be. Code: print<<<HERE
Sortable.create('sortlist$box', { tag: 'img', overlap:'horizontal',constraint:false, containment: $list, dropOnEmpty: true,
onChange: function(item) {
var list = Sortable.options(item).element;
if(changeEffect) changeEffect.cancel();
changeEffect = new Effect.Highlight('changeNotification', {restoreColor:"transparent" });
},
onDrop: function(item) {
var thing=Sortable.options(item).element.identify();
var anchors = document.getElementById(thing).childNodes.length-2;
if(anchors > 20){
alert('This box had 20 creatures in it already, your last action has not been saved.');
window.location.reload();
}
else{
new Ajax.Request("saveImageOrder.php", {
method: "post",
parameters: { data: Sortable.serialize("sortlist$box") }
});
}
}
});
HERE;
$box++;
}
?>
});
</script>
if you solve this I'll send ya $10 via paypal I created a method for displaying an object's properties: Code: renderfunction = false;
function showProperty (object, property)
{
document.write ('<td class="type">' + (typeof object[property]) + '</td>'
+ '<td class="name">' + property + '</td>');
document.writeln('<td class="value">' +
(
(typeof object[property] != 'function')
? object[property]
:(
(property != 'showProperties')
? (
renderfunction
? object[property]()
: ('<span class="self">NOT RENDERED</span>')
)
: ('<span class="self">THIS</span>')
)
)
+ '</td>');
document.writeln('<td class="hasOwnProperty" >'
+ (
object.hasOwnProperty(property)
? "Local"
: "Inherited"
)
+ '</td>');
if (typeof object[property] == 'function')
{
document.writeln ('<td class="function">' + object[property] + '</td>');
}
else
{
document.writeln ('<td class="function"> </td>');
}
}
As long as renderfunction = false, the object is fine coming out of this function. However, if I change renderfunction to true, all my properties become undefined. Why isn't this working as I expect it to? How should I fix it? Thanks in advance, -Brian. Hi all, I'm stumped on finding a way in javascript to create an object factory whose instances are also object factories. In short I want something like that below, but no joy ... any clues? Code: function createClass () {
return new createClass()
function createClass() {
return new createInstance ()
function createInstance () {
//Default properties, values and methods which might later be extended
}
}
}
var createDoor = createClass();
var door1 = createDoor();
var door2 = createDoor();
var createChair = createClass();
var chair1 = createChair ();
var chair2 = createChair ();
I'm writing a program that involves a network of interconnected nodes (or simply objects in my example below). It depends on being able to access properties of an object's linked objects (a bit oddly worded, sorry)... Problem is I'm not sure how to properly access those properties... see below please. <script> //This is an example of a problem im having in my own code... //I want to access the name of the object within the links array wintin the object... var objA = {name: "Object A", links: [objB, objC]}; var objB = {name: "Object B", links: [objC, objD, objE]}; var objC = {name: "Object C", links: [objB]}; var objD = {name: "Object D", links: [objE]}; var objE = {name: "Object E", links: [objD]}; //ex: I want to access the name of Object A's first link... console.log(objA.links[0].name); </script> I'm hoping to get "Object B"... But instead I get: TypeError: Result of expression 'objA.links[0]' [undefined] is not an object. Is there another way around this? Any thoughts are appreciated. Ignore post (if mod, please delete)
Hello together! I generate html code with jsp. In that jsp there a several framesets and frames. And yes i know, frames are not really up to date but it's an old program and i have to deal with it now. Anyway, in the top frameset i have an onload attribute like onload="load()". In the function load i want to access the Element.prototype object. But unfortunately typeof Element gives me "undefined". So i looked a little deeper and found that window.toString() gives me "[object]" and not as expected "[object window]" so somehow my window doesn't know that its construcor is Window. window.construcor is "undefined" as well. And i don't have access to the Element object. I really don't know where the error could be. When the page is loaded and i access the same window over the console, then everything is right. But in my function a can't get access to the objects i need. I also don't know what part of the code could be useful to post here, but maybe someone had a similar problem before? i should say that this problem only occurs in IE8. In IE9 it works perfectly. Has anyone any idea?? Quote: menu: function( a, b ) { $( b ).observe( 'click', function( event ) { event.stop(); if( $( a ).visible() ) { $( a ).hide(); $( b ).removeClassName( 'selected' ); document.stopObserving( 'click' ); } else { $( a ).show(); $( b ).addClassName( 'selected' ); document.observe( 'click', function( e ) { if( e.target.id != a && e.target.id != b && !Element.descendantOf( e.target, $( a ) ) ) { $( a ).hide(); $( b ).removeClassName( 'selected' ); document.stopObserving( 'click' ); } }); } }); $$( '#' + b + ' > a' ).each( function( element ) { element.observe( 'click', function( event ) { $( a ).hide(); $( b ).removeClassName( 'selected' ); document.stopObserving( 'click' ); }); }); } This work's perfrect accept when i use it with others on the menu it leaves the other ones open, how do i get it to close the open one when i open a new menu.. Thanks. Hello. Is there any way to get the variable name of an object from inside the object? E.g. PHP Code: function Bla(){ this.write = function(){ document.write(<objectname>); } } obj1 = new Bla(); obj1.write(); //Outputs obj1 Here is my script: PHP Code: function myTimer(seconds, obj){ this.seconds = seconds; this.obj = obj; this.startTimer = function(){ if(this.seconds>0){ this.seconds--; this.obj.innerHTML = this.seconds; this.timer = setTimeout("Timer.start()",1000); } } } Timer = new Timer(10, obj); Timer.startTimer(); Now the problem is that the variable that contains the object must be named "Timer". This way I cannot create new timer objects with different variable names I have tried: this.timer = setTimeout("this.start()",1000); but it doesn't work. That's why it would be good to detect the variable name and instead use something like this: this.timer = setTimeout(varname+".start()",1000); I would rather not have to pass the variable name through a parameter like this: Timer1 = new Timer(10, obj, "Timer1"); Thanks in advance. I am trying to troubleshoot my javascript function below. Code: <script type="text/javascript">
function txtboxfill(fillobj) {
var rChar=String.fromCharCode(13);
var myVal = "To: " + this.form.to.value + rChar;
myVal = myVal + "From: " + this.form.from.value + rChar;
myVal = myVal + "Subj: " + this.form.subj.value + rChar + rChar;
myVal = myVal + "Message: ";
fillobj.value = myVal;
}
</script>
Then I have a text box input field with an Code: <input type="text" id="tp" name="to" size="34" class="totext" onkeyup="txtboxfill(this.form.msg_area);"> and when I enter text in this field it gives me a 'this.form.to' is null or not an object and does not populate the textarea. BTW, msg_area is the id of my textarea. Thank you. Hello everyone! I just thought this might require some javascript, so I posted this here. Anyway, how do I create an element that is absolutely positioned first, and then, when it goes to the top of the page, it becomes fixed? Thanks Lucas Hi there, am working on an assignment to replicate the caesar cipher. i've written a function to move the cipher text one postion to the right and it works. i'm now trying to write another function that calls on the first where the signal character and index character do not match. The function then returns a new array. Here is the first function and it's test call: Code:
function right(letterArray)
{
var lowerArray = new Array(letterArray.length);
for (var letter = 0; letter < letterArray.length; letter = letter + 1)
{
lowerArray[letter] = letterArray[letter - 1];
if(letter == letterArray.length - 1)
{
lowerArray[0] = letterArray[letterArray.length - 1];
}
}
return lowerArray;
}
function testTask02()
{
right(cipherArray)
window.alert(right(cipherArray));
// calls the right() function with cipherArray, an array of lower case
// characters as an argument.
// displays the return value in a dialogue box.
}
And here is the bit i'm having trouble with: Code: function rotateToPosition(signalCharacter, indexCharacter, plainAlphabet, cipherAlphabet)
{
var resultArray = new Array(cipherAlphabet.length);
for (var copy = 0; copy < cipherAlphabet.length; copy = copy + 1)
{
resultArray[copy] = cipherAlphabet[copy];
resultArray[indexCharacter] = resultArray[copy];
}
var signalPosition = signalCharacter;
for (var position = 1; position < plainAlphabet.length; position = position + 1)
{
if (plainAlphabet[position] == plainAlphabet[signalPosition])
{
signalPosition = position;
}
}
while (resultArray[indexCharacter] != plainAlphabet[signalPosition])
{
right(resultArray);
}
return resultArray;
}
function testTask03()
{
rotateToPosition('A', 'g', plainArray, cipherArray)
window.alert(rotateToPosition('A', 'g', plainArray, cipherArray));
// calls the rotateToPosition() function with signal character,
// index character, an array of upper case letters and an
// array of locwer case letters as arguments.
// displays the return value in a dialogue box
//TO DO TASK 3 (iii)
}
Been working on this for hours and my brain is fried! If anyone can point me in the right direction that would be awesome. Many thanks Hi, Im having a weird issue... I am using position absolute to stick a table header to the top of a div. In the screenshot, under the menu is a div, the buttons and drop downs are at the "top" and grid starts from half way down, now when user scrolls till header is out of view i show the header at the "top" with position absolute. then when user scrolls back down and onto original position the buttons and drop downs are now again at the top exactly at the position where the header was shown, once the header has been shown all the buttons and the drop down are no longer clickable, i.e. there is no reaction, no dropdown shown and no click... whats happening is that IE is thinking that that area at the top where the header was is now invalid, or still occupied by the header or something like that? Its like the buttons and drop downs are kind of "behind" the area where the header was therefore nothing is clickable... And proof of this is that i gave some <BR> spacing to the buttons and drop downs so that they are not at the up most, but halfway down... and things work fine... whats IE up to? or is there some coding i need to do... below is the code for the header to float [it may be coz when the header is not to be shown i set the position to ' ', but i have tried with relative, fixed and static as well to no avail...] Code: <script language="javascript" type="text/javascript">
var floating_header = function() {
this.header = document.getElementsByTagName('THEAD')[0].getElementsByTagName('TR')[0];
this.getXY = function(o) {
var y = 0;
var x = 0;
while (o != null) {
y += o.offsetTop;
x += o.offsetLeft;
o = o.offsetParent;
}
return { "x": x, "y": y };
}
this.setheader = function() {
if (window.header == undefined) {
floating_header();
}
var screenpos = this.scrollTop;
var theady_max = window.getXY(window.table_obj.getElementsByTagName('THEAD')[0]).y + window.table_obj.offsetHeight;
if (screenpos > window.theady - 100 && screenpos < theady_max) {
window.header.style.position = 'absolute';
window.header.style.top = this.offsetTop;
window.header.style.display = 'block';
window.headerOffsetTop = this.offsetTop;
}
else {
if (screenpos != undefined && window.header != undefined) {
window.header.style.position = '';
window.header.style.top = '';
window.headerOffsetTop = undefined;
window.header = undefined;
}
else {
if (window.headerOffsetTop) {
window.header.style.position = 'absolute';
window.header.style.top = window.headerOffsetTop;
window.header.style.display = 'block';
}
}
}
}
document.getElementById("divcn").onscroll = this.setheader;
this.table_obj = document.getElementsByTagName('THEAD')[0].parentNode;
this.theady = this.getXY(this.table_obj.getElementsByTagName('THEAD')[0]).y;
};
floating_header();
</script>
|
|||||||