JavaScript - Remove A Class And Edit An Object
Hi, I have no experience with javascript. For several hours I have been trying to figure out how to use it but I cannot. I want to change the layout of a page to something that would be much more readable.
Recently the website Cramster has moved to Chegg and I don't like the layout. Everytime I load a problem I have to make the two changes in this screenshot: I expand the answer box then delete the footer because it overlaps in front of the answer box. Here is a screenshot of the before and after of what it does: How do I create a script to automate this every time I go to this site? I'm at a loss and tried all kinds of codes that are supposed to remove elements, but none have done anything. I know I don't have any code to show here, but I don't know what is supposed to work. Please help, thank you! Similar TutorialsNo Jquery plz As you can see that I want to remove this advertisement area (denoted by 1) via some java code. Now one can observe that this advert is hosted in the 'main-content' id & wrapped in 'inner' class. One cannot remove/hide id but CAN remove/hide the class which also will remove/hide the advert area placed within this class. Hi all, I have a couple of functions, an add error function, if some validation is not met I add a message to a array holding error messages and mark the field red, I have no problem with that piece of code... Code: function addError(errorArray, formObj, message) { errorArray[errorArray.length] = message; if (formObj.options != undefined) { formObj.parentNode.className = "error-field"; } else { formObj.className = "error-field"; } } However I have an issue with the 2nd function, it takes in 2 variables, an id for a div which is displaying the error messages, and the form object, the issue I have is removing the error class. for some reason obj.className = '' fails to remove the class, getting the same object using getElementById() (name and id are the same) however if I construct the removing piece of js code as a String and execute it using eval it works... Code: function clearErrors(errorDivId, vForm) { var errorDiv = document.getElementById(errorDivId); errorDiv.innerHTML = ""; errorDiv.style.display = "none"; // remove red boxes for (i=0; i<vForm.elements.length; i++) { var obj = vForm.elements[i]; if (obj.type != "button" && obj.type != "hidden") { if (obj.options != undefined) { if (obj.parentNode.className == "error-field") { obj.parentNode.className = ""; } } else { if (obj.className == "error-field") { alert(obj.name); obj.className == ""; alert(obj.className); obj = document.getElementById(obj.name); alert(obj); obj.className == ""; alert(obj.className); var jsExecuteCommand = "vForm." + obj.name + ".className = '';"; alert(jsExecuteCommand); eval(jsExecuteCommand); alert(obj.className); } } } } } I am so baffled? I have no idea why it won't work can anybody please explain what is happening please? Although I have a work around, I have been banging my head to get to this workaround and I just don't understand why the obj.className = ''; doesn't work. Thanks, Dale Hey all, Hoping someone could help me out with some javascript coding as I am a complete novice to this! I am currently building a website using 1 static page and all the content will be pulled in through different iframes by clicking on a navigation on the page. I found a very handy piece of javascript coding that lets me remove a class from one link and move it to the link that was clicked on (the code will be below). The issue I am facing with this is that if I have Home set to class="On" to begin with and then click on Location, the background image will be added to the Location section but won't get removed from Home until it is physically clicked on. Can anyone help me out with how I can get this to work correctly? javascript: Code: <script language="JavaScript" type="text/javascript"> var Lst; function CngClass(obj){ if (typeof(obj)=='string') obj=document.getElementById(obj); if (Lst) Lst.className=''; obj.className='On'; Lst=obj; } </script> HTML: Code: <div id="navWrapper"> <div id="globalNav"> <ul> <li onclick="CngClass(this);" class="On"><a href="iframes/home.html" target="content_iframe">Home</a></li> <li onclick="CngClass(this);" class=""><a href="iframes/location.html" target="content_iframe">Location</a></li> <li onclick="CngClass(this);" class=""><a href="iframes/speakers.html" target="content_iframe">Speakers</a></li> <li onclick="CngClass(this);" class=""><a href="iframes/agenda.html" target="content_iframe">Agenda</a></li> <li onclick="CngClass(this);" class=""><a href="iframes/useful_material.html" target="content_iframe">Useful Material</a></li> <li onclick="CngClass(this);" class=""><a href="iframes/event_presentations.html" target="content_iframe">Event Presentations</a></li> <li onclick="CngClass(this);" class=""><a href="iframes/gallery.html" target="content_iframe">Gallery</a></li> </ul> </div> <div id="localNav"></div> </div> 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 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. 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 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. 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 (); Hello, I am new with Javascript and running into this problem that I don't understand. I define a base class that only contains an array "elements", and a derived class that contains nothing more (for simplicity): Code: function baseClass() { this.elements = new Array; } function derivedClass() { } derivedClass.prototype = new baseClass; Then I create two instances of the derived class, and add two elements in each: Code: a = new derivedClass(); a.elements.push("A"); a.elements.push("B"); b = new derivedClass(); b.elements.push("C"); b.elements.push("D"); When I examine the contents of these arrays, I see that both a.elements and b.elements contain {"A","B","C","D"} ! I.e. as if the two arrays are in fact the same array! But these are two separate instances of the class, I expect two separate arrays. Note that if instead I use the base class: Code: a = new baseClass(); a.elements.push("A"); a.elements.push("B"); b = new baseClass(); b.elements.push("C"); b.elements.push("D"); then I get a.elements = {"A","B"} and b.elements = {"C","D"}, as I would expect. Could someone explain to me the problem with using the derived class? Thank you, Stephanos 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, I am having some issues. I have a loading bar, created with CSS. Although, I want to fill the loading bar (Increasing the width) with javascript (onload) Is this possible? Thanks. This website details how to make a gallery with javascript. http://monc.se/kitchen/80/lightweigh...ith-thumbnails My problem here is that instead of a cropped image in the thumbnails, I would like a re sized image. This is the CSS and javascript code.
Code: /* begin gallery styling */ #jgal { list-style: none; width: 200px; } #jgal li { opacity: .5; float: left; display: block; width: 60px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; } #jgal li img { position: absolute; top: 20px; left: 220px; display: none; } #jgal li.active img { display: block; } #jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ } Code: <script type="text/javascript">document.write("<style type='text/css'> #gallery { display: none; } </style>");</script> <!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]--> <script type="text/javascript"> var gal = { init : function() { if (!document.getElementById || !document.createElement || !document.appendChild) return false; if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal'; var li = document.getElementById('jgal').getElementsByTagName('li'); li[0].className = 'active'; for (i=0; i<li.length; i++) { li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')'; li[i].style.backgroundRepeat = 'no-repeat'; li[i].title = li[i].getElementsByTagName('img')[0].alt; gal.addEvent(li[i],'click',function() { var im = document.getElementById('jgal').getElementsByTagName('li'); for (j=0; j<im.length; j++) { im[j].className = ''; } this.className = 'active'; }); } }, addEvent : function(obj, type, fn) { if (obj.addEventListener) { obj.addEventListener(type, fn, false); } else if (obj.attachEvent) { obj["e"+type+fn] = fn; obj[type+fn] = function() { obj["e"+type+fn]( window.event ); } obj.attachEvent("on"+type, obj[type+fn]); } } } gal.addEvent(window,'load', function() { gal.init(); }); </script> Thanks. I want to edit the code below so i can use it for my country. I only dont know which things i have to change, except the ``var now``. Can someone pls help me by explaining which things i have to change .. If u have more questions pls ask me. PHP Code: <script type="text/javascript"> /* * World Populution Counter - By JavaScript Kit (http://www.javascriptkit.com) * Based on code by Adam Brown * This notice MUST stay intact for use * Visit JavaScript Kit (http://www.javascriptkit.com) for this script and more */ function maind(){ startdate = new Date() now(startdate.getYear(),startdate.getMonth(),startdate.getDate(),startdate.getHours(),startdate.getMinutes(),startdate.getSeconds()) } function ChangeValue(number,pv){ numberstring ="" var j=0 var i=0 while (number > 1) { numberstring = (Math.round(number-0.5) % 10) + numberstring number= number / 10 j++ if (number > 1 && j==3) { numberstring = "," + numberstring j=0} i++ } numberstring=numberstring if (pv==1) {document.getElementById("worldpop").innerHTML=numberstring } } function now(year,month,date,hours,minutes,seconds){ startdatum = new Date(year,month,date,hours,minutes,seconds) var now = 5600000000.0 var now2 = 5690000000.0 var groeipercentage = (now2 - now) / now *100 var groeiperseconde = (now * (groeipercentage/100))/365.0/24.0/60.0/60.0 nu = new Date () schuldstartdatum = new Date (96,1,1) secondenoppagina = (nu.getTime() - startdatum.getTime())/1000 totaleschuld= (nu.getTime() - schuldstartdatum.getTime())/1000*groeiperseconde + now ChangeValue(totaleschuld,1); timerID = setTimeout("now(startdatum.getYear(),startdatum.getMonth(),startdatum.getDate(),startdatum.getHours(),startdatum.getMinutes(),startdatum.getSeconds())",200) } window.onload=maind </script> Current world population (estimated): <span id="worldpop" style="font-weight: bold"></span>. <p style="font: normal 11px Arial">This free script provided by<br /> <a href="http://www.javascriptkit.com">JavaScript Kit</a></p> Hi there, I have a listbox and an Edit button. The user will need to click on the email address in the listbox before clicking on the button to edit. But then, the email address will be displayed on the prompt box's textbox, and even without editing it, the user can get scot-free. I would want to remove the email address on the prompt box's textbox, and also to check for null entries. If it is null, it will display an alert message. Else, it will check if it is a valid email address. My code is as follow: Code: function editItem() { var listbox = document.getElementById('listBox'); // listbox control id var newValue = lst.value; if(newValue != "") { var newItem = prompt("Enter the new email address",newValue); if(newItem == "") { alert("Please key in an email address into the textbox."); return false; } else { listbox.options[listbox.selectedIndex] = new Option(newItem,newItem,false,false); return false; arrTexts = new Array(); validRegExp =/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/ // search email text for regular exp matches if (arrTexts.value.search(validRegExp) ==-1 ) { alert('A valid e-mail address is required.\nPlease try again.'); return false; } else { for(i=0; i<listbox.length; i++) { arrTexts[i] = lst.options[i].text; } arrTexts.sort(); for(i=0; i<listbox.length; i++) { listbox.options[i].text = arrTexts[i]; listbox.options[i].value = arrTexts[i]; } } } } else { alert('Select Item From The List To Edit '); } } HTML Code: select id="lstBxEmail" name="listBoxEmail" size="6" style="width: 580px;"> <option>figFruit@msn.com</option> <option>apple@hotmail.com</option> <option>cherry@yahoo.com</option> <option>banana@hotmail.com</option> <option>elephantApple@ymail.com</option> <option>durian@gmail.com</option> </select> <select id="listBox" name="listBox" size="3" style="width: 580px;"> <option>hello@msn.com</option> <option>wowAmusers@hotmail.com</option> <option>yrulikethis@yahoo.com</option> </select> Could someone edit this script so the date is always 2 weeks infront of the actual date? <script language="JavaScript"> <!-- var now = new Date(); var days = new Array( 'Sunday','Monday','Tuesday', 'Wednesday','Thursday','Friday','Saturday'); var months = new Array( 'January','February','March','April','May', 'June','July','August','September','October', 'November','December'); var date = ((now.getDate()<10) ? "0" : "")+ now.getDate(); function fourdigits(number) { return (number < 1000) ? number + 1900 : number;} today = days[now.getDay()] + ", " + months[now.getMonth()] + " " + date + ", " + (fourdigits(now.getYear())); document.write(today); //--> </script> Thanks Pls help me on how to edit opera mini pls help
|