|
JavaScript - Firebug Inspect Element Feature Using The .net Framework And Javascript
Hello JavaScripters! I was hoping you could help me with an application I'm working on using C# and the .NET Framework that incorporates Javascript. I'm trying to do something similar to to the FireBug / Firefox Inspect Element featu
I came across http://www.selectorgadget.com/ which is exactly what I'm trying to do. It's in Javascript and after looking through the source code for the past 2 hours I still don't have a clue how to incorporate it into my program... From what I can tell it uses tokenizing and recursive analysis of DOM elements to figure out CSS selector paths: http://www.selectorgadget.com/stable/lib/dom.js. Here is what I have so far. The javascript code highlights HTML elements such as a <table> tag and changes the border and background color. Code: document.onmouseover = dohighlight;
document.onmouseout = dohighlightoff;
var BGCOLOR = "#444444";
var BORDERCOLOR = "#FF0000";
// Highlight <table> in grey
function dohighlight()
{
var elem = window.event.srcElement;
while (elem!=null && elem.tagName!="TABLE")
elem = elem.parentElement;
if (elem==null) return;
if (elem.border==0)
{
elem.border = 1;
// store current values in custom tag attributes
//
elem.oldcolor = elem.style.backgroundColor; // store backgroundcolor
elem.style.backgroundColor = BGCOLOR; // new background color
elem.oldbordercolor = elem.style.borderColor; // same with bordercolor
elem.style.borderColor = BORDERCOLOR;
var rng = document.body.createTextRange();
rng.moveToElementText(elem);
// Make a red border around <table>
function dohighlightoff()
{
var elem = window.event.srcElement;
while (elem!=null && elem.tagName!="TABLE")
elem = elem.parentElement;
if (elem==null) return;
if (elem.border==1)
{
elem.border = 0;
// recover values from custom tag attribute values
elem.style.backgroundColor = elem.oldcolor;
elem.style.borderColor = elem.oldbordercolor;
}
}
Any ideas on how to incorporate the Selectorgadget into my program would be greatly appreciated! Selectorgadget Source Code: https://github.com/iterationlabs/selectorgadget Similar Tutorials<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" > <title>Assignment 4 - JavaScript Conditional Variables</title> <head> <script type="text/javascript"> alert("Browser"+"\n\n"+navigator.appName); student = confirm("Are you student at Silicon ?"); if(student==true){ alert("please enter your marks"); } else{ alert("please register first"); location.href="Registration.html"; } function getGrade(){ if((Number(document.form1.input1.value)>90) && (Number(document.form1.input1.value)<100)) { alert("Grade A"); } else if((Number(document.form1.input1.value)>80) && (Number(document.form1.input1.value)<90)) { alert("Grade B"); } else if((Number(document.form1.input1.value)>70) && (Number(document.form1.input1.value)<80)) { alert("Grade C"); } else if((Number(document.form1.input1.value)>60) && (Number(document.form1.input1.value)<70)) { alert("Grade D"); } else if((Number(document.form1.input1.value)>50) && (Number(document.form1.input1.value)<60)) { alert("Grade F"); } else if(Number(document.form1.input1.value)<50) { alert("Grade G"); } } function identifyKey(evt){ evt = evt || window.event; if(navigator.appName==/*Internet Explorer*/){ var charCode = evt.keyCode; } else{ var charCode = evt.which; } alert(charCode); } </script> <style type="text/css"> #main{ margin:auto; width:70%; } #top{ font-size:20px; font-weight:bolder; color:#007700; text-decoration:underline; } #s1{ font-size:20px; font-weight:bold; color:#7700ff; } #s2{ font-size:20px; font-weight:bold; color:#00ff00; } #s3{ font-size:20px; font-weight:bold; color:#ff0000; } #form1{ width:600px; height:80px; padding:20px; background-color:#aaaaaa; } </style> </head> <body> <div id="main"> <p id="top">Assignment 4 - JavaScript Conditional Variables</p> <span id=s1>This is Form for checking Grade</span> <form id=form1 name=form1> <table> <tr><td>Enter Marks </td><td>: <input type="text" name="input1" onkeypress=identifyKey(event) /></td></tr> <tr><td><input type="button" name=btn1 value="Get Grade" onclick=getGrade() /></td></tr> </table> </form> </div> </body> </html> When I try to check whats wrong with this script in Firebug, I get error Quote: No Javascript on this page If <script> tags have a "type" attribute it should equal "text/javascript" or "application/javascript" Why am I getting such an error in Firebug. I understand there is some syntax error in this script How can I check whats wrong if I am getting such a message in Firebug ? Thanks Hello. Recently my company's site has been acting funny. Images on the page bladv.com/work aren't displaying except in older/non-updated browsers. When I ran Firebug to check the javascript, I got the following message twice. "NetworkError: 404 Not Found - http://bladv.com/assets/_cache/00000000009939b9184d06e0feb33450dc78b54e11.js" Does anyone know why I'm getting this code, and would this be the reason images on the page bladv.com/work aren't showing up? If this is the problem, how do I fix it? I tried adding the js file into the cache folder but I'm still getting the error codes in Firebug and the images are still invisible. Hope that makes sense, I'm very very new to javascript. Thanks I am trying to debug this with FireBug Code: function chapter12_nodeOne() {
//create an element
var element = document.createElement('input');
//set some attributes
element.setAttribute('type', 'button');
element.setAttribute('value', 'submit');
//appendd the element into a DIV
document.getElementById('myDiv').appendChild(element);
//uses EventUtil to attach an event listener
(1) EventUtil.addHandler(element, 'click', function() { alert('added event handler') });
}
var EventUtil = {
(2)addHandler: function(element, type, handler) {
//check if the element and the browser support DOM Level 2 event attachment
//if the user is not browsing with IE
if (element.addEventListener) {
element.addEventListener(type, handler, false);
}
//if user is browsing with IE
else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
}
//if user is using a browser that only supports DOM Level 0 event attachment
else {
element["on" + type] = handler;
}
},
removeHandler: function(element, type, handler) {
//check if the element and the browser support DOM Level 2 event attachment
//if the user is not browsing with IE
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
}
//if user is browsing with IE
else if (element.detachEvent) {
element.detachEvent("on" + type, handler);
}
//if user is using a browser that only supports DOM Level 0 event attachment
else {
element["on" + type] = null;
}
},
preventDefault: function(event)
{
if(event.preventDefault)
{
event.preventDefault();
}
else
{
event.returnValue = false;
}
}
};
I put a breakpoint on the line marked with (1), I am trying to go to line (2) with all the available options FireBug gives, but unfortunately I get the end of chapter12_nodeOne function. Any ideas why? Hi All, I am working on dot net framework 1.1.4322. From my html code of aspx file i have called a javascript function like 'onlick =javascript:saveorder()'. I have two copies of same code(identical - compared wit file compare tool) on different machine. When i run my code on one of the machine i get an error ';' expected which is a Javascript error and same time i wont get this error on another machine. When i searched on line number provided from error i saw few auto generated script which i have not putted there. Can anyone help me with the error at least with the reason. Thanks Mishigun Hello all, I want to present my designed and still in development state javascript framework with AMD architecture and many ideas. For first imageination please visit this page: http://arto8.site11.com/arto8-js/bindings.htm Day by day wold changes and new ideas implementation, Regularly visit to see new inovations. Hey All, Recently, I finished making the first version of my own JavaScript framework. Basically, I like Prototype and jQuery so I made one that has what I personally like the best about both of them. Regardless, I'm hoping someone can guide me in the right direction to finding a nice JavaScript documentation creator. Or something that can at least parse my code and get me a decent start on creating the docs. I would also love to easily stylize the pages too. Thanks everyone! Rick Hi, I have been developing a show/hide feature on my companies web site for some time. I have so much code as to where I am confused when I need to add another slide function. I have provided the URL below to the page where the code exists. http://www.pjm.com/markets-and-opera...assistant.aspx This is where I get lost with the huge amount of code that I have. If you take a look under the second slider named "Electricity Markets" there is another slider underneath named "Energy Market". I need to add three more sliders right underneath in the same format under "Energy Market" If anyone can assists with this that would be great. I should have organized the code a lot better, so now I get lost within the code now. BTW, the show/hide feature really does not display well in Firefox, please try in IE. Thanks! Several of the iPhone features can be duplicated with Javascript. One such feature I'd like to see is the Bookmark feature. You click on the Bookmark or Favorite button and the page name (of the html page) is saved to a list, just like what you see in modern browsers. Clicking on the list row brings up the bookmarked page. However, the app is not a browser, but made up of html/css/js pages that function from within a /www/ folder of the app. I've searched for such a script online, but the only ones I see are for desktop browsers (they permit a visitor to click on a link to place the page in the Bookmarks tab or folder of the browser). Does anyone know of a script that'll work on html pages in the iPhone and Android devices? Thanks! Steve Hey all, Whenever firebug detects a js error on a page, it prevents you from interacting with the page, so you can't scroll, you can't click, you can't do anything except close the window. Anyway around this? Thanks. I'm getting an '$active is not defined' error, which makes sense because the method that defines it isn't called till 10 seconds after I check if it is defined below. But that's the point. I'm actually checking to see if it is defined, and if it's not, then I defined. However, firebug still gives me the error for this: Code: if ($active == undefined) {
$active = $('.paging a.active');
}
var triggerID = $active.attr("rel") - 1;
var image_reelPosition = triggerID * imageWidth;
I also tried: if ($active === undefined) if (!$active) But nothing works. I'm just trying to check if it's not defined, then define it. Yet it won't let me check if it is undefined because it is telling me it's undefined despite the fact I'm checking for that very reason. Thanks for any response. Hello. I'm coding a simple hover-opacity thing for some images on my site on the navigation bar. Although I'm receiving this message in my Firebug. uncaught exception: Syntax error, unrecognized expression: . Here's the navigation code: Code: <div class="navigation"> <a href="home"><img class="home" src="images/navigation/home.gif" /></a> - <a href="home" class="home">Home</a> <a href="news"><img class="news" src="images/navigation/news.gif" /></a> - <a href="news" class="news">News</a> </div> So the effect I've made is, when I hover the image, its opacity gets set to 1. And when I move my mouse away the image changes opacity to .5 And when I hover the text "Home" or "News" the same effect happens with the image. And here's my jQuery: Code: $(function(){
$('.navigation img').css({
opacity: .5
});
$('.navigation img').hover(function(){
$(this).stop().animate({ opacity: 1 },300);
}, function(){
$(this).stop().animate({ opacity: .5 },300);
});
$('.navigation a').hover(function(){
var imageClass = $(this).attr('class');
$('.navigation img.' + imageClass).stop().animate({ opacity: 1 }, 300);
}, function(){
var imageClass = $(this).attr('class');
$('.navigation img.' + imageClass).stop().animate({ opacity: .5 }, 300);
});
});
I can't seem to find the error in my script(s). Any help is appreciated. EDIT: Apparently the error appears when I make anchor tags around the image. Code: <a href="home"><img ... /></a> This gives the error. :S Code: <img ... /> But this doesn't? How can this be? Hey all, Firebug gives me the below error message: component.singularize is not a function [Break on this error] var component = component.singularize(); This is what I have: Code: var component = window.location.hash.replace('#', '');
var component = component.singularize();
alert("The component name is " + component);
var singularize = function(){
if(!String.prototype.singularize){
String.prototype.singularize = function(){
var context = this;
result = ((context.charAt(context.length -1, 1) == 's') ? context.substring(0, context.length - 1) : context);
return result;
}
}
}
Thanks for any response. HI I want to write a search for my site .I make a new panel in the left of my menue and it has a text input and an image which when that user click on it javascript opens a new window which is a php page.The part I don't know how to do is when the user click on the image it should get the content of the text input and pass it to the url.For the hyperlink of the image I use "<a href="javascriptpen_window('includes/func/search.php?id=" But I don't know what should I write after that to get the content of the text input and put it in the next of the id. How can I do so? Thanks I am using a jQuery slider for a website but the W3C comes up with invalid because: document type does not allow element "div" here .before('<div id="buttons">') Code: <script type="text/javascript">
$(document).ready(function() {
$('#slider')
.before('<div id="buttons"></div>')
.cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
pager: '#buttons'
});
});
</script>
Any help with this would be appreciated thanks. hi, on my site, http://www.jbiddulph.com/john-drag.html when i move the box within the box, the results are only shown when I click on the firebug icon?! Can someone please help me here? I would like the results to be shown OnMouseUP thanks Hi, I have this web browser which opens up a website that has a drop down list showing values that the user can select. And when I the firebug to inspect the elements in the page, what shows in the inspection window is this: Code: <select id="instance2" name="instance2">
<option value="0">All instances</option>
<option value="1">Item0</option>
<option value="2">Item1</option>
<option value="3">Item2</option>
.
.
.
<option value="23">Item22</option>
What I'm supposed to do is to get the values and update them automatically to the database. I'm actually using HtmlUnit to do this project, and I've heard how I can use getElementById() to get the values. But I don't know how to start. I'm a beginner so I might need a lot of help on this matter. Help is kindly appreciated. Thanks. I am new to javascript and would like to search for the element with id but the element id are changing if i use different navigation in that web page example: C21_W68_V69_notes_struct.text changes to C24_W78_V79_notes_struct.text or any other name next time hence i would like to search that element using a pattern like notes_struct.text as there exist only one element ending with this pattern. I am using old version IE and would like to use javascript only. Kindly help. I am trying to make images change as the user selects the option from the dropdown menu , I have called alert("test1"); alert("test2"); to check if the functions are being called but only the first one happens, can you please tell me what's wrong with the script. Here is the script:
Code: var oImageChooser;
addEvent( window, "load", initialize)
function initialize()
{
alert("test1");
var oImageChooser = document.getElementById("imageChooser");
addEvent(oImageChooser, "change", loadCached);
}
var imageLibrary = new Array();
imageLibrary["image1"] = new Image(120,90);
imageLibrary["image1"].src = "images/desk1.gif";
imageLibrary["image2"] = new Image(120,90);
imageLibrary["image2"].src = "images/desk2.gif";
imageLibrary["image3"] = new Image(120,90);
imageLibrary["image3"].src = "images/desk3.gif";
imageLibrary["image4"] = new Image(120,90);
imageLibrary["image4"].src = "images/desk4.gif";
function loadCached()
{
alert("test2");
var imgChoice = oImageChooser.options[oImageChooser.selectedIndex].value;
document.getElementById("thumbnail").src = imageLibrary[imgChoice].src;
}
here is the html Code: <html> <head><title>Image dropdown</title> <script type = "text/javascript" src = "experimento5.js"> </script> </head> <body onload = "initialize()"> <h1> Choose any image</h1> <img id = "thumbnail" src = "images/desk1.gif" > <form> <select id = "imageChooser"> <option value = "image1"> Bands</option> <option value = "image2"> Clips</option> <option value = "image3"> Lamp</option> <option value = "image4"> Erasers</option> </select> </form> </body> </html> Fairly new the javascript, as in only been tinkering around for about a day. So forgive me if this is a simple question. At the moment I have the following function for handling events such as onclick, mouseover, mouseout. Code: function switcher(action, img){
switch(action){
case "hover":
//mouse is on image
document.imgSeat.src = "images/hover.gif";
break;
case "click":
//mouse has clicked image
document.imgSeat.src = "images/click.gif";
break;
default:
//mouse elsewhere
document.imgSeat.src = "images/defaulter.gif";
break;
}
}
And the html the function refers to Code: <body> <div id="imagesholder"> <a href="#nerf"><img border="0" id="seat0" src="images/available.gif"></a> </div> </body> What im trying to do change my function so that instead of it being hard coded for the id "imgSeat" i can use the id passed through the parameter "img" instead. However I seem to be banging my head against the wall. I've tried using the following Code: document.getElementById(img).src = "images/available.gif"; //no error, just does nothing //where img is "0" instead of "seat0" document.seat[img].src = "images/available.gif"; //error: document.seat is undefined Would be extremely greatful if someone should push me in the right direction or show me what im doing wrong. |
|||||||