JavaScript - Border Around An Object
Hi,
I am using javascript code to change the background colour and font colour of some elements (called 'filled') dynamically. For example: if(timeInputValue >= startcode && timeInputValue < endcode && stateInput.value == "playing") { filled.style.backgroundColor = '#ffffff'; filled.style.color = '#000000'; } I also want to put a border around these 'filled' elements too - how can I do this is javascript? I can't find an equivelent to style.border = "1px" Similar TutorialsHi, 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. 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?? 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 (); Ignore post (if mod, please delete)
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. 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. Hi All, (Another Post LOL) Ive been getting alot of help with js recently THANKS! One last thing and i shouldnt be on here for a while How would i go about doing this Code: <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="750" height="550" codebase="http://active.macromedia.com/flash4/cabs/swflash.cab#version=4,0,0,0"> <param name="movie" value="SWF/helicopter.swf"> <param name="quality" value="high"> <param name="menu" value="false"> </object> into JS using .innerHTML = "Above Stuff"; I always get an error + i dont know how im going wrong with the quotes :S ANY HELP (GOOD STUFF); Thanks In Advance, Jamie. NOM NOM NOM! Hello, below you will find two objects, background and photo1, which I need help cleaning up a bit. This will eventually be imported using Json but for now during development it sits as is in my script. I need help with a couple things: - You will notice the 'val' property is identical in both objects. How can I move this into an outside function that each object can share? I'm having trouble bc I couldn't get 'this' to work outside of its current context. - Second, how can I restructure this so that I can instantiate a new object. So if I wanted to add a new layer I'd like to do something like importLayers.push[new Layer('photo2')] Code: var importLayers = { background: { layerType: 'background', index: 0, layerContent: { content: function() { return $(element).find('#background_Content'); }, width: 850, height: 530, xPos: 0, yPos: -150, skewX: 0, skewY: 0, angle: 0, originX: function() { return (this.sWidth() / 2); }, originY: function() { return (this.sHeight() / 2); }, scaleX: 1, scaleY: 1, sWidth: function() { return this.width * this.scaleX; }, sHeight: function() { return this.height * this.scaleY; }, aspect: 0, opacity: 100, val: function(prop, val) { switch(prop) { case 'width': if(plugin.constrain) this.scaleX = this.scaleY = val / this.width; else this.scaleX = val / this.width; break; case 'height': if(plugin.constrain) this.scaleY = this.scaleX = val / this.height; else this.scaleY = val / this.height; break; case 'angle': this.angle = val; } buildTransformation(this, this.content()); } }, }, photo1: { layerType: 'photo', index: 1, layerContent: { content: function() { return $(element).find('#photo1_Content'); }, width: 1920, height: 1280, xPos: 0, yPos: 0, skewX: 0, skewY: 0, angle: 0, originX: function() { return (this.sWidth() / 2); }, originY: function() { return (this.sHeight() / 2); }, scaleX: .15625, scaleY: .15625, sWidth: function() { return this.width * this.scaleX; }, sHeight: function() { return this.height * this.scaleY; }, aspect: 0, opacity: 100, val: function(prop, val) { switch(prop) { case 'width': if(plugin.constrain) this.scaleX = this.scaleY = val / this.width; else this.scaleX = val / this.width; break; case 'height': if(plugin.constrain) this.scaleY = this.scaleX = val / this.height; else this.scaleY = val / this.height; break; case 'angle': this.angle = val; } buildTransformation(this, this.content()); } }, } } Code: function globals() { this.states = ""; } now I can: Code: globals.states = .... how to extend first code to be able: Code: globals.states.something = .... ? Greetings, I have a floating object that work find within my page. However, I would like to only show after a button is clicked. Any ideas how to do this. Thanks how do i put a red border around an input box with a class of .input1 if it goes into this loop?? Code: if(firstName=='' || firstName.length < 3 || firstName=='First Name:' ){ error = 'Please enter your first name'; $j('#errormsg').html('<p class="errors">'+ error +'</p>'); return false; } How can i display a javascript object having [CODE]var myVarr = [{"name":"xyz","age":21}, {"name":"cde","age":25}].[CODE] in a table in jsp page? Regards, Anas Hello awesome coders! I am here in need of your help. I have a site with a lot of videos, from different sources, in different sizes, only thing they have in common is <div id="player">. Due do different sources, each video player is different. Some have embed code, some have object, some have iframe, some have both/all. Is it possible to create a script that will: Change the height and width of object, embed, iframe within the div. Is there another way to resolve this issue without changing all video code manually. Hi I need help with a function inside an object that is inserted into a function argument which is then used in a string that is returned. For a quick example which may help you understand. Code: function fn(o) { var text = '<a onclick="function(){'+o.func+'};">Click me!</a>'; document.write(text); } fn({ func: function() {alert('clicked');} }); The above code should display a link on the page saying 'Click me!' and once you click it, an alert box should pop up but it doesn't seem to be working, can anyone help please, thank you. I am doing my homework for my class, and I don't usually ask for this much help because I get most of them done by myself. However, I am having a really hard time to understand this time. I have lots lots of questions...I tried to follow the instructions that I got from my professor, but it seems not clear enough to me... If anyone can fix or add on my codes, I will be really really appreciated....and here is the instructions and my codes.. If the form validates, instead of returning true, call the GetValues() function followed by the DisplayOutput() function. so, I changed result true to calling functions like this, Code: if (blnError == true){ return false; } else { DisplayOutput(); GetValues(); } In the .js file, create a PortraitOrder class using the following specifications Properties: portrait, copies, size, buyer Method: CalculateCost () -- determines the size (radio buttons) and then mutiplies the related cost by the number of copies Code: function PortraitOrder(){ var cost; this.copies = ""; this.portrait = ""; this.size = ""; this.buyer = ""; var CalculateCost = { met1 : function () { if(size == 0){ cost = this.copies * 10 } else if(size ==1){ cost = this.copies * 20 } else if(size ==2){ cost = this.copies * 10 } else if(size ==3){ cost = this.copies * 30 } else{ cost = this.copies * 20 } } } } Create a new instance of the class named portraits as a global variable in the ,js file -" I don't see why I need this. So I did not create Create a GetValues() function that will retrieve the values from the form fields (document.forms[0].element.value) and assign them the properties of the instance of the PortraitOrder class. use a for loop to retrieve the value from the radio buttons use the prototype property to add a new property named email to the instance of the class retrieve the value from the form field and assign it to the new email property Code: function GetValue(){ this.copies = document.forms[0].Copies.value; this.buyer = document.forms[0].Buyer.value; var file = document.getElementsByName('Filename'); for(var i = 0; i < file.length; i++){ if(file[i].checked){ this.portrait = file[i].value; } } var sizes = document.getElementsByName('Size'); for(var i = 0; i < sizes.length; i++){ if(sizes[i].checked){ this.size = sizes[i].value; } } GetValue.prototype.email = document.forms[0].Email.value; } Create a DisplayOutput() function that calls the CalculateCost () method for the current instance of the class. displays the image using the value from the portrait property which contains the filename. Be sure to include height and width (and that would be why all of the images had to be the same dimension. These values can be hardcoded. The filename, however, may NOT be hard coded.. it must use the object.property format. displays the buyer, email, copies, size, and cost using the object.property format (document.forms[0].element.value is not permitted) The cost must be formatted as ##.## where # represents a number (Hint: Use a method of the Number class). It is NOT okay just to concatenate .00 to then end of the cost. Code: function DisplayOutput(){ CalculateCost.met1(); document.write("buyer: " + this.buyer); document.write("Email: " + email); document.write("Portrait: " + this.portrait); document.write("Copies: " + this.copies); document.write("Cost: " + "$"+cost.toFixed(2)); document.write("Thank you"); } The order form must include the site's header and footer and coordinate with the rest of the site. There is no form processing file, everything is done in the .js file. You may think like, this is horrible codes. And yes, it is. I know probably this is totally odd. This is why I came here for ask help. Also, I spent days to tried, but I could not get any idea...Anyone please help me on this? I am a total JS newb, so please excuse what is probably a very dumb question. I have an autosuggest feature written that creates an object called "autoComplete." this.oDiv is set to the div tag for the suggestions box. For example, here is the call to my constructor: Code: // bothStringNames is the array of strings to search through // param 2 is the textbox the user is typing into // param 3 is the div suggestion box that appears with autosuggestions // param 4 is the max # of results to display new autoComplete(bothStringNames,document.getElementById('searchtxt'),document.getElementById('searchsuggest'),10); The thing I'm concentrating on now is the "document.getElementById('searchsuggest')." In my constructor, I call this value this.oDiv. Now, when I alert() this value, it says "object HTMLDivElement." I actually need the value "document.getElementById('searchsuggest')." Here is the code where I try to obtain this value: Code: // what to return if no results are found. Only perform this for search feature alert(this.oDiv); if(this.oDiv == "document.getElementById(\'searchsuggest\')" && aList.length == 0) aList.push("No results found"); "aList" is simply the array of search results from the autosuggest. So, how do I extract the "document.getElementById('searchsuggest') from oDiv instead of the "object HTMLDivElement?" Thanks! |