|
JavaScript - Applying Javascript To Only One Table In A Html File
I have some javascript which applies alternative row colors to a table and also gives you a highlight effect when you mouseover the rows.
However, the problem I have is that it applies to every table on my page, I only want it to apply to a specific table in the html file (I'm using frontpage), not all of them How would I go about doing this? The code is below, it has a bit of styling at the top before the javascript. <style type="text/css" media="all"> table.altsrowtable { width: 90%; margin: auto; border-collapse: collapse} td { border: 1px solid black; cursorointer;text-align:center} /* row 1 */ tr td { background: #edf3fe; } tr:hover td, tr.ie td { background: #e1e1ff; } /* row 2 */ tr.bis td { background: #D9ECFF; } tr.bis:hover td, tr.bisie td { background: #e1e1ff; } /* selected row 1 */ tr.sel:hover td, tr.selie td { background: #edf3fe; } /* selected row 2 */ tr.selbis:hover td, tr.selbisie td { background: #D9ECFF; } </style> <script type="text/javascript" span="altsrowtables" div="altsrowtable" id="altsrowtable" class="altsrowtable"> var IE = false; /*@cc_on IE=true; @*/ var r; function setRows(){ r = document.getElementsByTagName('TR'); for(var i=0;i<r.length;i++) r[i].className = (i/2 != Math.round(i/2))? '':'bis'; } function selectRow(aRow,add){ var c = aRow.className; if(add) setRows(); var b = aRow.className; if(IE) aRow.className = b==''? 'selie' : b=='bis'? 'selbisie' : c=='selie'? 'ie' : c=='ie'? 'selie' : c=='bisie'? 'selbisie' : c=='selbisie'? 'bisie' : ''; else aRow.className = b==''||c==''? 'sel' : b=='bis'||c=='bis'? 'selbis' : c=='selbis'? 'bis' : ''; } // roll-over (only for IE) function roll(what) { var c = what.className; what.className = c==''? 'ie' : c=='bis'? 'bisie' : c=='bisie'? 'bis' : c=='selbis'? 'selbisie' : c=='selbisie'? 'selbis' : c=='selie'? 'sel' : c=='sel'? 'selie' : ''; } // fire on loading onload= function() { setRows(); for(var i=0;i<r.length;i++) { if(IE) { r[i].onmouseover = function(){ roll(this); } r[i].onmouseout = function(){ roll(this); } } } } </script> <style type="text/css"> table.altrowstable { font-family: calibri; font-size:11px; color:#333333; border-width: 1px; border-color: #C0C0C0; border-collapse: collapse; } table.altrowstable th { border-width: 1px; "background-image:url('QP Header.png');" border-style: solid; border-color: #C0C0C0; font-size:12px; font-style:bold; } table.altrowstable td { border-width: 1px; border-style: solid; border-color: #a9c6c9; } </style> Thanks Sean Similar TutorialsI'm designing a page that uses javascript+css for enhanced interaction. However, if javascript is disabled, I'd still like the page to be functional, albeit less fancy. Likewise, if css is disabled, it still needs to be functional. Finally, if both js+css are disabled, the page will be quite bare but still usable. For example, I use javascript to set a css style that hides certain panels of content. JS is used to toggle these and all is fine. If JS is disabled, then the css isn't applied, and all the content is visible (though not too pretty). If CSS is disabled, the inline CSS applied by the JS works fine. Finally, if both are disabled, all the content is visible. I'm wondering what's the best way to do this. Currently, I set the styles like this in the js file: Code: function initialize() {
// set styles, for example:
document.getElementById("panel").style.display = "none";
}
var onloadFlag = false;
document.onreadystatechange = function() {
if (!onloadFlag) {
onloadFlag = true;
initialize();
}
};
// for older browsers
window.onload = function() {
if (!onloadFlag) {
onloadFlag = true;
initialize();
}
};
The problem that sometimes comes up is I see the "fallback" styles briefly, before the JS kicks in and applies the enhanced css. How can I avoid this? Does anyone know how to accomplish this? I got the html file to show but none of the text in the file will show.
Hi i am using javascript for the first time and i have a problem .I have 2 files html and javascript file in seperate but i donot know how to make them work .the code is down below .Thanks in advance for help. HTML <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <meta name="description" content="Instagram API - usage" /> <meta charset=utf-8 /> <title></title> </head> <body> <input id="lat_input" type="number" value="60.221374"/> <input id="lng_input" type="number" value="24.805391"/> <button id="search_location">Search</button><br/> <button id="get_popular">Get popular</button> <div id="images"></div> </body> </html> Javascript file // API DOCUMENTATION: // Instagram Developer Documentation var clientId = 'e7538f47e197479d8d32a63ae3ae4cd2'; $('#search_location').click(function () { getMediaByLocation($('#lat_input').val(), $('#lng_input').val()); }); $('#get_popular').click(function () { getPopularImages(); }); function getMediaByLocation(lat, lng) { var o = { lat: lat, lng: lng, client_id: clientId }; $.getJSON('https://api.instagram.com/v1/media/search?callback=?', o, function (response) { processImages(response.data); }); } function getPopularImages() { var o = { client_id: clientId }; $.getJSON('https://api.instagram.com/v1/media/popular?callback=?', o, function (response) { processImages(response.data); }); } function processImages(array) { $('#images').empty(); $.each(array, function (index, element) { var fs = $('<fieldset>').appendTo('#images'); $('<img>').attr('src', element.images.low_resolution.url).appendTo(fs); if (element.caption) { $('<pre>').text(element.caption.text).appendTo(fs); } $.each(element.comments.data, function (index, comment) { $('<pre>').text('Comment from ' + comment.from.full_name + ': ' + comment.text).appendTo(fs); }); }); } I'm trying to include an HTML/CSS Navigation Bar in a JavaScript file for easy editing (instead of going from page to page changing the same thing). This is the HTML & CSS I want to include in the JavaScript file: <a style="border-left: 1px solid white; padding: 5px" class=menu href="Index.html" title="Home"> Home</a><a class=menu href="menu1.html" title="Portfolio"> Portfolio</a><a class=menu href="menu2.html" title="About Us"> About Us</a><a class=menu href="menu3.html" title="Media"> Media</a><a class=menu href="menu4.html" title="Store"> Store</a><a class=menu href="menu5.html" title="Contact Us"> Contact Us</a> -If this isn't possible to do in JavaScript, then what language can I do it in? Thank you for reading. I included a js file into my html file. Everything work well in firefox but intenet explorer does not display my js file content. please helppp Js file // JavaScript Document document.write(<div class="RightSideGallerybox"> <div class="RightBoxContext">News</div> <div class="RightBoxPictures"><img src="../image/BotanicalTreeDecoration.jpg" /></div> <div class="RightBoxPictures"><img src="../image/IMG_3304.JPG" /></div> <div class="RightBoxPictures"><img src="../image/IMG_0297.JPG" width="150" height="100" /></div> <div class="ImportantRemarks">High School Admissions</div> <div class="ListOfRemarks"> <ul> <li>A. Phillip Randolph HS</li> <li>Astor Collegiate</li> <li>Aviation High School</li> <li>Bard College HS</li> <li>Bayside High School</li> </ul> </div> </div>); html file <div class="RightSideWrap"> <div class="footertext"> <script type="text/javascript" src="gallery.js"></script> </div> <!-------------------------------middle parts - right side--------------------------> </div> </div> Hi, I'm currently working on my portfolio website and would like to have information about my movie clips be retrieved from an XML document when a thumbnail is clicked. I am building my website in HTML and would like to retrieve the Xml using JavaScript. Any help would be appreciated. My XML is valid and structured as such: <?xml version="1.0" encoding="UTF-8"?> <work> <motion> <reel> <title id="Demo Reel 2009" project="Self Promotion" client="Self"> <![CDATA[This demo reel is primaraly a collection ......]]> </title> </reel> . . . . These are my initial variable definitions and readXML function in javascript: <script language="javascript"> var xmldom, workNode, motionNode, printNode, fineartNode, displayNode, titleNode; function readXMLDocument() { xmldom=createDocument(); xmldom.async=false; if (xmldom.parseError != 0) { alert("An error occurred: \nError Code " + xmldom.parseError.errorCode + "\n" + "Line: " + xmldom.parseError.line + "\n" + "Line Pos: " + xmldom.parseError.linepos + "\n" + "Reason: " + xmldom.parseError.reason); } else { alert("Document: " + xmldom.documentElement); alert("Root: " + xmldom.documentElement.tagName); alert("Child: " + xmldom.documentElement.firstChild.tagName); alert("Xml DOM: " + xmldom.xml); } xmldom.load("workinfo.xml"); workNode=xmldom.documentElement; motionNode=workNode.firstChild; printNode=motionNode.nextSibling; fineartNode=printNode.nextSibling; } . . . . A call to function revealText is called "onClick" of a thumbnail as such: <a href="videopages/reel.html" class="vid" target="video" onClick="revealText(0)"> This is function revealText: function revealText(x) { var title, project, client, info; readXMLDocument(); displayNode=motionNode.childNode[x]; titleNode=displayNode.firstChild; title=titleNode.getAttribute("id"); project=titleNode.getAttribute("project"); client=titleNode.getAttribute("client"); info=titleNode.getNodeValue(); titleSpan.innerHTML=title; projectSpan.innerHTML=project; clientSpan.innerHTML=client; infoSpan.innerHTML=info; } </script> and these are the spans they are written to: <span id="titleSpan" class="vidinfo"> <span id="projectSpan" class="vidinfo"> <span id="clientSpan" class="vidinfo"> <p id="infoSpan" class="content"> If you have read this far, I REALLLLY appreciate it. And any ideas as to what is wrong would help alot. I have some HTML that I want to put in a Javascript file and reference the HTML through external Javascript file. So I have my page, example.html Code: <html> <head></head> <body> <script type="text/javascript src="../js/external.js"> </script> </body> </html> external.js Code: document.write("<p class="txt_medium style4"> example.com<br />101 Street St.<br />City, ST, ZIP</p><p class="txt_medium style4">"The Best website." </p>");
The above code is all on one line, but is not displaying on the page. PHP is out of the question too (_._) Any thoughts? I have a javascript file and a html file. On the html file I have an action (button) and would like to use some type of attribute of the onclick to call my function to open this html file. below is the beginning of my function: requestPanel_Forwardme: function() { view.opendialog("show_me") What other attributes of action can I use? can this function in my JS file be called and if so how would I call it? <action?? Hi, I have a problem. please help me in this regard. I have a combobox which contain numeric values from 1-7. i want to generate a table with 2 rows and 4 columns through javascript. Means when a user select numeric value like '3' from a combo box then a page generates '3' tables without refreshing a page. And if a user selects '4' from a combobox then a script generates 4 tables with 2 rows and 4 columns and so on. kindly guide me that how can i mkae this javascript. plz help Hi I have written the following code to read contents of a text file using FileReader object of HTML 5 for Google Chrome. Quote: <script> function handle_files(files) { var i; if (checkBrowser("Chrome")) { for (i = 0; i < files.length; i++) { file = files[i]; var reader = new FileReader(); ret = []; reader.onload = function (e) { console.log(e.target.result) } reader.onerror = function (stuff) { console.log("error", stuff) console.log(stuff.getMessage()) } text = reader.readAsText(file[i]); alert(text); } } } </script> ---------------------- <input type="file" multiple="multiple" onchange="handle_files(this.files)"> Unfortunately, the variable text always displays as undefined. Everything above the line text = reader.readAsText(file[0]); works fine. How can I fix it?. Or is there any other solution to read a text file using HTML5/JavaScript on Chrome? Thanks in advance. Hi I'm New to javascript how to Call WCF service using Javascript or Jquery in html page.(with out using Activex Objects) So I've now made the layout of my website and I need to know how to position a javascript date I made, in a html table. This is the basic "var d=new date();" code I'm trying to implement in the menu section of my website. Also, I need to know how to do this using an external javascript file.
Hi, I am new to javascript, Please help me with the issue below. My javascript code below should actually fetch the data from html table on button click. function displaymessage() { alert ("button pressed"); var table_cells = new Array(); var table7 = document.getElementById('Auth'); for (i=0,n=table7.rows.length; i < n ; i++) { var Rowdata = table7.rows[i]; table_cells[i] = new Array(); for(j=0,cols = Rowdata.cells.length; j < cols; j++) { table_cells[i,j] = Rowdata.cells[j].innerHTML; alert (table_cells[i,j]); } } alert (table_cells[1,1]); alert (table_cells[2,1]); alert (table_cells[3,1]); alert (table_cells[4,1]); alert (table_cells[5,1]); alert (table_cells[6,1]); alert (table_cells[7,1]); alert (table_cells[8,1]); } The problem with my code above is that the statement "alert (table_cells[i,j]);" executes properly and shows the correct value. But the other alert statements shows only the value of the last row of the table. i.e., my table has 9 rows. and all the alert statements shows 9th row's 2nd column's value outside the for loop. But inside the for loop it executes fine. I tried it in IE7. I seem to miss something. Could someone please help me out with this? Thanks in advance. All -- I have a JavaScript config file called gameSetting.js which contains a bunch of variables which configures a particular game. I also have a shared JavaScript library which uses the variables in gameSetting.js, which I include like so: <script type="text/javascript" src="gameSetting.js" ></script> <script type="text/javascript" src="gameLibrary.js" ></script> In gameSetting.js I have: $(document).ready(function() { // call some functions / classes in gameLibrary.js } in Firefox, Safari, and Chrome, this works fine. However, in IE, when it's parsing gameSetting.js, it complains that the functions that live in gameLibrary.js aren't defined. When it gets to parsing gameLibrary.js, the variables in gameSetting.js are reported as not being defined. I've tried dynamically bootstrapping the gameLibrary file using this function in document.ready for dynamic load... $.getScript("gameLibrary.js"); However, the same problem still happens in IE, where when it parses the files individually it's not taking into context the file/variables that came before, so it's not an out of load order problem. My options a 1) collapsing all the functions in gameLibrary.js and variables in gameSetting.js into one file. However, this is not practical because this is dealing with literally hundreds of games, and having a gameLibrary.js in ONE location for ONE update is what makes most logical sense. 2) figure out a way to get this to work where variables in file1 are accessible to file2 in IE (as it seems they are in other browsers). jQuery seems to be able to have multiple plugins that all refer to the based jQuery-1.3.2.js, so I know there is a way to get this to work. Help appreciated. Nero I can get this code to take two separate sections of a file which are not beside each other and write them into another file. It always comes up as a single full line of the code instead of the sections I want. The code includes the student number first name last name and three results of assignments. I want the code to write the student number and three results of all the students into a file and then work out the average of the student results. Can you help? Code: try{
while (in.hasNextLine())
{
String line = in.nextLine();
out.println( line);
int i=0;
if(!Character.isDigit(line.charAt(i))) { i++; }
studentStringNumber = line.substring(0, i);
String stringResult = line.substring(i);
studentStringNumber = studentStringNumber.trim();
stringResults = stringResults.trim();
double stringResultsValue = Double.parseDouble(stringResults.trim());
stringResults = in.nextLine();
studentStringNumber = in.nextLine();
studentNumber = Integer.parseInt(studentStringNumber);
if(in.hasNextInt())
{
int value = in.nextInt();
}
results = Double.parseDouble(stringResults);
if(in.hasNextDouble())
{
double value = in.nextDouble();
}
Scanner lineScanner = new Scanner(line);
studentStringNumber = lineScanner.next();
while(!lineScanner.hasNextDouble())
{
studentStringNumber = studentStringNumber+ " " +lineScanner.next();
}
stringResultsValue = lineScanner.nextDouble();
}
}
favorite I'd like to modify a form on www.formsite.com (form builder app): username: testuser password: password I would like to use the nicedit.com's inline content editor's js to transform my textarea's into a richtext area. At present the nicedit editor works well in creating the richtextarea. However, the KEY point is that I would like formsite's form to pipe in the the created html and render it with the html component of formsite. Currently, the pipe function in formsite will only put out the html syntax in it's html module. action seen he http://fs8.formsite.com/testform/form1/index.html So this would be: 1. checking out my form on formsite.com 2. the script from nicedit.com is already installed in an html component. 3. changing or telling me the scripts/tags/or whatever for formsite form using formsites form builder (which allows some html/script editing). 4. changed so as to render the rich text entered on page 1 in page 2 instead of the html syntax. Any other solutions using formsite and any other richtextarea solutions would be great too! My issue is that I have a javascript function applied on page load via an addLoadEvent function call in the head to every row (dynamic number of records retrieved) on a table. On every row of the table I also have an element (image or button) that performs a different function that is assigned on the element itself. Unfortunately, when I click the element it also performs the function that was applied to the row in the page load. Is there any way to not call this function on element click? I know usually you include code, but due to the nature of the work I am limited in that respect. Basically its: Code: <script type="text/javascript">
addLoadEvent(function() { function1(1); })
//function1 makes the table rows do something appearance wise.
</script>
<tr>
<td></td>
<td></td>
<td>
<img src="pics/delete.png" alt="Delete" onclick="function2();">
</td>
</tr>
I apologize if my post doesn't conform to the general guidelines of proper posting on this board. I'm new on this site. Hi All, I have a page which i am setting up for my local football team, and the javascript part of the page which is a 'news' rotator which i need to ammend. at the moment the tabs on the right of the 'news' rotator are linked to a certain page but nothing happens when you click on them? and i dont know enough javascript to ammend my code to make it so that it send the user to the linked page here is my js file Code: /*
* faded 0.3.1 - jQuery plugin
* written by Nathan Searles
* http://nathansearles.com/faded/
*
* Copyright (c) 2009 Nathan Searles (http://nathansearles.com/)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* Built for jQuery library
* http://jquery.com
* Compatible with jQuery 1.3.2+
*
*/
if(typeof jQuery != "undefined") {
jQuery(function($) {
$.fn.extend({
faded: function(options) {
var settings = $.extend({}, $.fn.faded.defaults, options);
return this.each(
function() {
if($.fn.jquery < "1.3.1") {return;}
var $t = $(this);
var $c = $t.children(":nth-child(1)");
var o = $.metadata ? $.extend({}, settings, $t.metadata()) : settings;
var total = $c.children().size();
var next = 0, prev = 0, number = 0, currentitem = 0, restart = 0, restartinterval = 0;
var loaded,active,imgSrc,clicked,current;
if (o.random) {
$.fn.reorder = function(callback) {
function randOrd() { return(Math.round(Math.random())-0.5); }
return($(this).each(function() {
var $this = $(this);
var $children = $this.children();
var childCount = $children.length;
if (childCount > 1) {
$children.hide();
var indices = new Array();
for (i=0;i<childCount;i++) { indices[indices.length] = i; }
indices = indices.sort(randOrd);
$.each(indices,function(j,k) {
var $child = $children.eq(k);
var $clone = $child.clone(true);
$clone.show().appendTo($this);
if (callback !== undefined) {
callback($child, $clone);
}
$child.remove();
});
}
}));
};
$c.reorder();
}
function pause() {
clearInterval(autoplay);
clearTimeout(restart);
restart = setTimeout(function() {
autoplay = setInterval(function(){
animate("next");
},o.autoplay);
},o.autorestart);
}
$c.css({position:"relative"});
$c.children().css({
position:"absolute",
top: 0,
left: 0,
zIndex: 0,
display:"none"
});
if (o.autoheight) {
$c.animate({height: $c.children(":eq(0)").outerHeight()},o.autoheight);
}
if (o.pagination) {
if (o.autopagination) {
$t.append("<ul class="+o.pagination+"></ul>");
$c.children().each(function(){
$("."+o.pagination+"",$t).append("<li><a rel="+number+" href=\"#\" >"+(number+1)+"</a></li>");
number++;
});
}
$("."+o.pagination+" li a:eq(0)",$t).parent().addClass("current");
$("."+o.pagination+" li a",$t).click(function(){
current = $("."+o.pagination+" li.current a",$t).attr("rel");
clicked = $(this).attr("rel");
if (current != clicked) {animate("pagination",clicked,current);}
if(o.autoplay){pause();}
return false;
});
}
if (o.sequentialloading&&$c.children()[0].tagName=="IMG") {
$c.css({background:"url("+o.loadingimg+") no-repeat 50% 50%"});
imgSrc = $("img:eq(0)",$c).attr("src");
$("img:eq(0)",$c).attr("src", imgSrc).load(function() {
$(this).fadeIn(o.speed,function(){
loaded = true;
});
});
} else {
$c.find(":eq(0)").fadeIn(o.speed,function(){
loaded = true;
});
}
if (o.bigtarget) {
$c.css({"cursor":"pointer"});
$c.click(function(){
animate("next");
if(o.autoplay){
if (o.autorestart) {
pause();
} else {
clearInterval(autoplay);
}
}
return false;
});
}
if (o.autoplay) {
autoplay = setInterval(function(){
animate("next");
},o.autoplay);
pause();
}
$("."+o.nextbtn,$t).click(function(){
animate("next");
if(o.autoplay){
if (o.autorestart) {
pause();
} else {
clearInterval(autoplay);
}
}
return false;
});
$("."+o.prevbtn,$t).click(function(){
animate("prev");
if(o.autoplay){
if (o.autorestart) {
pause();
} else {
clearInterval(autoplay);
}
}
return false;
});
function animate(dir,clicked,current){
if (!active&&loaded) {
active=true;
switch(dir) {
case "next":
prev = next;
next = currentitem*1+1;
if (total === next) { next = 0; }
break;
case "prev":
prev = next;
next = currentitem*1-1;
if (next === -1) { next = total-1; }
break;
case "pagination":
next = clicked;
prev = current;
break;
}
if (o.pagination) {
$(".pagination li.current",$t).removeClass("current");
$(".pagination li a:eq("+next+")",$t).parent().addClass("current");
}
if (o.crossfade) {
$c.children(":eq("+next+")").css({zIndex:10}).fadeIn(o.speed,function(){
$c.children(":eq("+prev+")").css({display:"none",zIndex:0});
$(this).css({zIndex:0});
currentitem = next;
active = false;
});
} else {
$c.children(":eq("+prev+")").fadeOut(o.speed,function(){
if (o.autoheight) {
$c.animate({height: $c.children(":eq("+next+")").outerHeight()},o.autoheight,function(){
$c.children(":eq("+next+")").fadeIn(o.speed);
});
} else {
$c.children(":eq("+next+")").fadeIn(o.speed);
}
currentitem = next;
active = false;
});
}
}
}
}
);
}
});
$.fn.faded.defaults = {
speed: 300,
crossfade: false,
bigtarget: false,
sequentialloading: false,
autoheight: false,
pagination: "pagination",
autopagination: true,
nextbtn: "next",
prevbtn: "prev",
loadingimg: false,
autoplay: false,
autorestart: false,
random: false
};
});
}
not sure why it wont load the url when clicked apon? can anyone please help? many thanks Luke Hi, I have the following code snippet: test.html ====== <script language="javascript" type="text/javascript"> var testVariable = "test"; </script> <script language="javascript" type="text/javascript" src="test.js"> </script> test.js ===== var testVariable = window.top.testVariable; In firefox, I'm able to access testvariable defined within test.html in test.js. But in chrome, test.js couldnot get the window.top.testVariable field defined in test.html. Can any one please let me know how i can make it work in chrome?. Am i missing something here?. |
|||||||