|
JavaScript - Javascript On Content Page Misbehaving
Howdy folks,
New to Javascript programming. I was able to do decent javascript (getting refereces to various elements on a page and read attributes or set attributes)...but when I try to do same kind of programming in a content page, it misbehaves. For example a have a table element on the content page and button. in the onclick event of the button control, I am getting the <td> element and change its colors. but for some reason instead of changing the color of just the <td> element, the entire content page as well as Master page changes. can someone guide me please. Code: <%@ Page Title="" Language="C#" MasterPageFile="~/DMS.Master" AutoEventWireup="true" CodeBehind="Javascript_RetrievingByTagName.aspx.cs" Inherits="DMS.WebUI.Javascript_RetrievingByTagName" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
<script type="text/javascript">
function changecolors() {
var a1 = document.getElementsByTagName("td");
var a1Length = a1.length;
for (var i = 0; i < a1Length; i++) {
a1[i].style.background = "#aaabba";
}
}
</script>
<table id="mytable" border="1">
<tr>
<td id="lefttd0">Left column</td>
<td id="righttd0">Right column</td>
</tr>
<tr>
<td id="lefttd1">Left column</td>
<td id="righttd1">Right column</td>
</tr>
<tr>
<td id="lefttd2">Left column</td>
<td id="righttd2">Right column</td>
</tr>
</table>
<a href="#" onclick="return changecolors();">Click to Change Colors</a>
<input id="Button1" type="button" value="button" onclick="changecolors();"/>
</asp:Content>
thanks Similar TutorialsHi, I am Aditya. I am explaining below the exact scenario where I need the help: I am developing a web application in which I need to integrate a javascript/html editor on some of the web pages and then provide 'Edit' buttons on those web pages so that users can edit the content on that partciular html/jsp page (like editing in wiki pages) and then, when they add some content and click on submit button, the new content should appear on the web page with all the formatting (i.e. bold, italics, color and so on) which was applied by user when he was entering the text. Now, I need help for the below issues: 1. Please suggest me a good javascript/html editor (freely downloadable) which I can use to integrate with my web pages. 2. Once the user has entered some content using the above javascript editor, how to make that content reach the server and update the corresponding web page. I am new to web development, so may be that these questions are too simple. But, I need some help from you. Waiting for your reply, Thanks, Aditya Firstly, I'm a complete Javascript noob, so apologies if this is blindingly simple. I'm trying to write a piece of javascript that will check a single checkbox depending on a dynamically-imported piece of information further up the page. The page will look like this: Code: <div id="title">
<p class="white">1</p>
</div>
<div id="question">
<p>Please indicate your area(s) of interest below:<br />
<input type=checkbox value="1" /> Option 1<br />
<input type=checkbox value="2" /> Option 2<br />
<input type=checkbox value="3" /> Option 3<br />
<input type=checkbox value="4" /> Option 4</p>
</div>
The variable which indicates which checkbox should already be checked is in the div 'title' in the p class 'white'. So in the case above, when the page loads the 'Option 1' checkbox should already be checked. The javascript i have, rather poorly, cobbled together so far just doesn't work, and I was wondering if anyone could point me in the direction of some useful tutorials. All the tutorials I have read so far deal with mass checking all the boxes with a button click. There are two pages, folder/india.html folder/usa.html and dropdown menu in each page to switch between india and usa pages. india.html page sells in INR and usa.html in USD with links to shopping carts for each currency. link1(INR) link2(USD) Except the link and the currency information(selling price), contents in both the pages are same. So here comes the problem. Google hates duplicate pages! I am looking for a solution where, a single page In That Page, a dropdown menu to select currency As the currency is selected, without page reload, the link to shopping cart and the pricing also should be changed according to the selected currency. So Single page should be able to handle both the currencies. Kindly suggest me with codes as I am new to javascript. Thanks a lot Currently my chess game, which is lacking rules, is operating for the most part. However, the button which allows the players to make moves is only operating once. As far as i can tell it is probably a problem with the recreation of the button in the move() method. Any advice on this code at all is appreciated! Code: <html>
<head>
<title>Project</title>
<script type ="text/javascript">
//1 means the background is black
//0 means the background is white
//- signifies that a piece is black
//+ signifies that a piece is white
//X means there is no piece
//P means pawn
//R means rook
//N means knight
//B means bishop
//Q means queen
//K means king
//X means no piece again
function print(array){
for(var i = 0; i< array.length;i = i+1){
for(var z = 0; z< array[i].length;z= z+1){
if(array[i][z] == "0XX"){
document.write('<img src = "white.jpg">');
}else if(array[i][z] == "1XX")
{
document.write('<img src = "black.jpg">');
}else if(array[i][z] == "0-P")
{
document.write('<img src = "images/bwPawn.jpg">');
}else if(array[i][z] == "1-P")
{
document.write('<img src = "images/bbPawn.jpg">');
}else if(array[i][z] == "0+P")
{
document.write('<img src = "images/wwPawn.jpg">');
}else if(array[i][z] == "1+P")
{
document.write('<img src = "images/wbPawn.jpg">');
}else if(array[i][z] == "0-R")
{
document.write('<img src = "images/bwRook.jpg">');
}else if(array[i][z] == "1-R")
{
document.write('<img src = "images/bbRook.jpg">');
}else if(array[i][z] == "0+R")
{
document.write('<img src = "images/wwRook.jpg">');
}else if(array[i][z] == "1+R")
{
document.write('<img src = "images/wbRook.jpg">');
}else if(array[i][z] == "0-N")
{
document.write('<img src = "images/bwKnight.jpg">');
}else if(array[i][z] == "1-N")
{
document.write('<img src = "images/bbKnight.jpg">');
}else if(array[i][z] == "0+N")
{
document.write('<img src = "images/wwKnight.jpg">');
}else if(array[i][z] == "1+N")
{
document.write('<img src = "images/wbKnight.jpg">');
}else if(array[i][z] == "0-B")
{
document.write('<img src = "images/bwBishop.jpg">');
}else if(array[i][z] == "1-B")
{
document.write('<img src = "images/bbBishop.jpg">');
}else if(array[i][z] == "0+B")
{
document.write('<img src = "images/wwBishop.jpg">');
}else if(array[i][z] == "1+B")
{
document.write('<img src = "images/wbBishop.jpg">');
}else if(array[i][z] == "0-Q")
{
document.write('<img src = "images/bwQueen.jpg">');
}else if(array[i][z] == "1-Q")
{
document.write('<img src = "images/bbQueen.jpg">');
}else if(array[i][z] == "0+Q")
{
document.write('<img src = "images/wwQueen.jpg">');
}else if(array[i][z] == "1+Q")
{
document.write('<img src = "images/wbQueen.jpg">');
}else if(array[i][z] == "0-K")
{
document.write('<img src = "images/bwKing.jpg">');
}else if(array[i][z] == "1-K")
{
document.write('<img src = "images/bbKing.jpg">');
}else if(array[i][z] == "0+K")
{
document.write('<img src = "images/wwKing.jpg">');
}else if(array[i][z] == "1+K")
{
document.write('<img src = "images/wbKing.jpg">');
}
}
document.write("<br>");
}
}
function move(boardz){ //for moving pieces. variables declare the 2 positions of the array that move.
var rowS = prompt("Please enter the desired row you wish to move [1 to 8]","1");
var colS = prompt("Please enter the desired column you wish to move [1 to 8]","1");
var rowF = prompt("Please enter the targetted row [1 to 8]","1");
var colF = prompt("Please enter the targetted column [1 to 8]","1");
rowS = parseInt(rowS)-1;
colS = parseInt(colS)-1;
rowF = parseInt(rowF)-1;
colF = parseInt(colF)-1;
temp = boardz[rowS][colS].charAt(1) + boardz[rowS][colS].charAt(2); // this and the next 2 lines move the piece
boardz[rowS][colS] = boardz[rowS][colS].charAt(0) + "XX";
boardz[rowF][colF] = boardz[rowF][colF].charAt(0) + temp;
document.clear();
print(boardz);
document.write('<button type="button" onclick="move(boardz);">'+ "Move."+ '</button>');
}
var board = new Array(
["0-R","1-N","0-B","1-Q","0-K","1-B","0-N","1-R"],
["1-P","0-P","1-P","0-P","1-P","0-P","1-P","0-P"],
["0XX","1XX","0XX","1XX","0XX","1XX","0XX","1XX"],
["1XX","0XX","1XX","0XX","1XX","0XX","1XX","0XX"],
["0XX","1XX","0XX","1XX","0XX","1XX","0XX","1XX"],
["1XX","0XX","1XX","0XX","1XX","0XX","1XX","0XX"],
["0+P","1+P","0+P","1+P","0+P","1+P","0+P","1+P"],
["1+R","0+N","1+B","0+Q","1+K","0+B","1+N","0+R"]);
print(board);
</script>
</head>
<body>
<button type="button" onclick="move(board);">Move.</button>
</body>
</html>
Hello Basically I have found and adapted the code: Code: alreadyloading = false;
nextpage = 2;
$(window).scroll(function() {
if ($('body').height() <= ($(window).height() + $(window).scrollTop())) {
if (alreadyloading == false) {
var url = "page"+nextpage+".html";
alreadyloading = true;
$.post(url, function(data) {
$('#projectscontainer').children().last().after(data);
alreadyloading = false;
nextpage++;
});
}
}
});
I want when the user scrolls to the bottom of the page for content in a new page to load under the div "#projectscontainer". So in the new page 'Page2.html" I have put 5 divs going down with content in... I want the new content to appear below "#projectscontainer'" Why won't this work? Anyone know? Thanks I want to create several pages (they can be text or html) with basic informatons for css formatting. example: <div class="appname" name: this app <div class="appdetails"> Version: 1.0 Date: 1/1/2011 Description: this is an app </div> </div> I want to be able to save several of these and load them into a web page where they are formatted and displayed. This needs to be a client side solution so that I can be able to access this offline. Any suggestions? Edit: so far I have tried this but I am not sure about it. <object type="text/html" data="app1.html"> Hi, I wish to get some content from another page. Here is my code. Code: <script type="text/javascript">
jQuery.ajax({url: 'http://www.livecounter.dk/viewstats/30050',type: 'get',success: function(ajax) {
var x = jQuery('#box4 .first:last', ajax).innerHTML;
document.write(x);
}
}
});
</script>
<script src="http://code.jquery.com/jquery-1.6.1.min.js"> </script>
But it isn't working. I can't get the at this page : http://www.livecounter.dk/viewstats/30050 under "Altid" (to the right), next to "Sidevisninger". Image of it here : http://i51.tinypic.com/2e0sb9s.png Thanks I know that when you "display: none" with CSS it will not show the div content in the browser, but will still show the div and content in page source. Is there a way (via javascript or anything else) to also remove the content from page source at the same time? Thanks. I have been searching online for hours, but it is possible I'm just not thinking of the correct keywords. I have included a basic illustration of the current setup (which does not work). The issue lies with the page that is the desired output. I have a far deeper issue which I have narrowed down to javascript on the final .asp page not loading at all. On default.asp, I am calling a function contained in 'ajax_call-contentselection.js' Code: <a onclick="func_displaycontents('restaurants'); return false">displayajaxcontent</a>
Honestly, I don't believe the following piece of code (ajax_call-contentselection.js) is relevant, as it is standard ajax code, but just in case: Code: function func_displaycontents(var_type){
var xmlHttp = GetXmlHttpObject();
var url = "../_include/ajax_display-contentselection.asp";
url += "?type="+var_type;
if (!xmlHttp){
alert ("Browser does not support HTTP Request")
return
}
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState == 1){
document.getElementById("div_ajaxfillattractions").innerHTML = "<div style='padding-top:50px;color:white;width:930px;text-align:center;'><img src='../_images/ajax-loader.gif'/><br/>Loading...</div>";
};
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
document.getElementById("div_ajaxfillattractions").innerHTML=xmlHttp.responseText;
}
};
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
The other contents of "ajax_display-contentselection.asp" are displayed properly in "div_ajaxfillattractions" of "default.asp", but no javascript code on that page loads. If I use "ajax_display-contentselection.asp" as an include file on "default.asp", I get the javascript alert of 'Success', but when I initiate the AJAX it does not work, so I know there isn't a problem with the javascript. Please let me know if I sucked at explaining something, or more detail is needed. Thanks in advance, Matt So I'm trying to get one particular number from a game's grand exchange database. Say I wanted to know the 'Market price' of this item and the item results would change on click of a drop down box. I don't know how I'd go about getting that one section of the entire page though. Any help is appreciated. Code: <html>
<head>
<title></title>
function doit()
{
var potion = calculate.potion.options[calculate.potion.selectedIndex].text;
if (potion=="Sara brew")
{
var potion = "Saradomin_brew_(3)";
}
if (potion=="Zammy brew")
{
var potion = "Zamorak_brew_(3)";
}
calculate.results.value=potion;
}
</head>
<body>
Item: <select name="potion" onChange="doit()" />
<option selected>--Potion--</option>
<option>Sara brew</option>
<option>Zammy brew</option>
<br />
<input type="text" name="results" />
</body>
</html>
Hello, I'm creating a section for a school website that will list over 9,000 book titles in four different categories (by Title, by Author, by Book Level, and by Points). The content is shown in a div and called and loaded via Ajax. Here is the test page: http://www.gilchrist.leon.k12.fl.us/ar/artest.htmlAfter you click "Go" when the drop down menu is displaying By Book Title, the content loads in the div in a few moments. Here is the content page that appears in the div after you click "Go": http://www.gilchrist.leon.k12.fl.us/...tByAuthor.html If possible, I need a "page loading..." script that will appear only after you click "Go" while the list of books is being loaded. I've been testing different ones I've found online, but can't get any to work. Of course, I'm not even sure if the script would be added to artest.html, 1112-QuistListByTitle.html, or a combination of both... Any help with this would be greatly appreciated. Thank you, Deborah Hi all: This script and code works great, but in order for me to finish, I need a way of passing to the next PHP page which check box is checked. Currently, it is just passing a single value (1, 2, 3, 4, 5, or 6) depending on the last box checked. I need a way to record which check boxes are selected. Code: <html>
<head>
<script type="text/javascript">
var majors = {
"001 - Exchange" : [ 2, 6 ],
"003 - Academic Foundations" : [ 2, 6 ],
"005 - Pre-Engineering" : [ 2, 6 ],
"006 - Pre-Business" : [ 2, 6 ],
"008 - Pre-Nursing" : [ 2, 6 ],
"010 - Accounting" : [ 3, 4 ],
"014 - Afro-American Studies" : [ 2, 6 ],
"050 - American Studies" : [ 2, 6 ],
"070 - Anthropology" : [ 2, 6 ],
"080 - Art" : [ 2, 6 ],
"082 - Art History" : [ 2, 6 ],
"090 - Arts and Sciences" : [ 2, 6 ],
"100 - Astronomy" : [ 2, 6 ],
"115 - Biochemistry" : [ 2, 6 ],
"120 - Biology" : [ 2, 5, 6 ],
"124 - Biomedical Technology" : [ 2, 6 ],
"130 - Botany" : [ 2, 6 ],
"135 - Business Administration" : [ 3, 4 ],
"140 - Business Law" : [ 3, 4 ],
"160 - Chemistry" : [ 2, 5, 6 ],
"163 - Childhood Studies" : [ 2, 5, 6 ],
"190 - Classics" : [ 2, 6 ],
"198 - Computer Science" : [ 2, 5, 6 ],
"200 - Creative Writing" : [ 5 ],
"202 - Criminal Justice" : [ 2, 5, 6 ],
"203 - Dance" : [ 2, 6 ],
"220 - Economics" : [ 2, 6 ],
"300 - Education" : [ 2, 6 ],
"350 - English" : [ 2, 5, 6 ],
"352 - English - American Literature" : [ 2, 5, 6 ],
"354 - English - Film Studies" : [ 2, 5, 6 ],
"360 - European Studies" : [ 2, 6 ],
"387 - Film Studies" : [ 2, 6 ],
"390 - Finance" : [ 3, 4 ],
"415 - Foreign Languages" : [ 2, 6 ],
"420 - French" : [ 2, 6 ],
"460 - Geological Sciences" : [ 2, 6 ],
"470 - German" : [ 2, 6 ],
"490 - Greek" : [ 2, 6 ],
"500 - Hebraic Studies" : [ 2, 6 ],
"509 - Historical Methods and Skills" : [ 2, 6 ],
"510 - History, General" : [ 2, 6 ],
"512 - History, American" : [ 2, 5, 6 ],
"516 - African Asian Latin American and World Hist" : [ 2, 6 ],
"520 - Home Economics" : [ 2, 6 ],
"525 - Honors Program" : [ 2, 6 ],
"533 - Human Resource Development" : [ 3 ],
"537 - Hospitality Management" : [ 3 ],
"549 - International Studies" : [ 2, 6 ],
"555 - Student Proposed Major" : [ 2, 6 ],
"560 - Italian" : [ 2, 6 ],
"565 - Japanese" : [ 2, 6 ],
"570 - Journalism" : [ 2, 6 ],
"580 - Latin" : [ 2, 6 ],
"590 - Latin American Studies" : [ 2, 6 ],
"601 - Law - Day Student" : [ 1 ],
"602 - Law - Evening Student" : [ 1 ],
"606 - Liberal Studies" : [ 2, 5, 6 ],
"615 - Linguistics" : [ 2, 5, 6 ],
"620 - Management" : [ 3, 4 ],
"623 - Management Science and Info Systems" : [ 3, 4 ],
"626 - Managerial Economics" : [ 4 ],
"630 - Marketing" : [ 3, 4 ],
"640 - Mathematics" : [ 2, 6 ],
"645 - Mathematical Science" : [ 5 ],
"660 - Medical Technology" : [ 2, 6 ],
"680 - Microbiology" : [ 2, 6 ],
"698 - Museum Studies" : [ 2, 6 ],
"700 - Music" : [ 2, 6 ],
"701 - Music, Applied" : [ 2, 6 ],
"705 - Nursing" : [ 2, 6 ],
"730 - Philosophy" : [ 2, 6 ],
"740 - Physical Education" : [ 2, 6 ],
"742 - Physical Therapy" : [ 5 ],
"750 - Physics" : [ 2, 6 ],
"760 - Physiology" : [ 2, 6 ],
"780 - Plant Physiology" : [ 2, 6 ],
"790 - Political Science" : [ 2, 6 ],
"830 - Psychology" : [ 2, 5, 6 ],
"834 - Public Administration" : [ 5 ],
"840 - Religon" : [ 2, 6 ],
"842 - Rhetoric" : [ 5 ],
"860 - Russian" : [ 2, 6 ],
"890 - General Science" : [ 2, 6 ],
"910 - Social Work" : [ 2, 6 ],
"920 - Sociology" : [ 2, 6 ],
"940 - Spanish" : [ 2, 6 ],
"950 - Speech" : [ 2, 6 ],
"960 - Statistics" : [ 2, 6 ],
"964 - Teacher Preparation" : [ 2, 6 ],
"965 - Theater Arts" : [ 2, 6 ],
"975 - Urban Studies and Community Development" : [ 2, 6 ],
"976 - Urban Planning" : [ 2, 6 ],
"981 - Volunteer Organization and Leadership" : [ 2, 6 ],
"988 - Womens & Gender Studies" : [ 2, 6 ],
"989 - Writing" : [ 2, 6 ],
"990 - Zoology" : [ 2, 6 ]
};
Array.prototype.isMember = function( find )
{
for ( var i = 0; i < this.length; ++i )
{
if ( this[i] == find ) return true;
}
return false;
}
function resetOptions( )
{
var form = document.theForm;
var sel = form.Majors;
for ( var s = sel.options.length-1; s > 0; --s )
{
sel.options[s] = null;
}
var checked = [ ];
for ( var cb = 0; cb < form.schools.length; ++cb )
{
if ( form.schools[cb].checked ) checked.push( form.schools[cb].value );
}
for( major in majors )
{
var mschools = majors[major];
for ( var c = 0; c < checked.length; ++c )
{
if ( mschools.isMember( checked[c] ) )
{
sel.options[sel.options.length] = new Option( major, major );
break;
}
}
}
}
</script>
</head>
<title>Search</title>
<body bgcolor="99CCFF">
<center>
<br>
<center>Search:<table border='1'>
<form name='theForm' action='display.php' method='post'>
<tr><td>ID: </td><td><input type="text" name="ID"/></td></tr>
<tr><td>Last Name: </td><td><input type="text" name="NAME_LAST"/></td></tr>
<tr><td>First Name: </td><td><input type="text" name="NAME_FIRST"/></td></tr>
<tr><td valign="top">School: </td>
<td>
<input type="checkbox" name="schools" value="1" onClick="resetOptions()"> Law School<br/>
<input type="checkbox" name="schools" value="2" onClick="resetOptions()"> College of Arts and Sciences<br/>
<input type="checkbox" name="schools" value="3" onClick="resetOptions()"> School of Business (Undergraduate)<br/>
<input type="checkbox" name="schools" value="4" onClick="resetOptions()"> School of Business (Graduate)<br/>
<input type="checkbox" name="schools" value="5" onClick="resetOptions()"> Graduate School<br/>
<input type="checkbox" name="schools" value="6" onClick="resetOptions()"> University College
</td>
</tr>
<tr><td>Major: </td><td><select name="Majors">
<option value="" selected>Select a major</option>
</select></td></tr>
<tr><td>Order By: </td><td>
<select name="ORDER_BY">
<option value = "" selected> Select One </option>
<option name="NAME_LAST" value = "NAME_LAST ASC"> Last Name </option>
<option name="CURRIC_CD" value = "CURRIC_CD ASC"> Major </option>
<option name="ID" value = "ID ASC"> RUID </option>
<option name="UNIT_OF_REG_CD" value = "UNIT_OF_REG_CD ASC"> School </option>
<option name="EMAIL_ADDR" value = "EMAIL_ADDR ASC"> Email Address </option>
</select></td>
</tr>
</table>
<br><br>
<input type='submit'/>
</form><br><br>
</center>
</body>
</html>
Thanks in advance. I would like to find some direction or help to solve an issue I have. I would like to find a way to search for a string of content on my webpage and return the string, or at least part of the string into the URL... Example of the content on my page: ----- Welcome, John Adams Log Out Welcome to your own content, based on your settings provided. Feel free to download the content you need. ----- Fairly straightforward. Now I would like to create a function that will look at the page and "copy" the string of content beginning with "welcome" and ending with "out" Next, I would like to remove the "welcome," and "log out" and have the name remain. Then, post the name into the URL to be passed onto the next page for me to use as more personalization/dynamically driven content; Such as: http://www.noname.com/index.html?string=John-Adams Hopefully you can help. Hey there I want to know how i can make a page that opens and loads content in a div tag when i click a certain link on my home page. i have a javscript code to load content into a div tag when the link is on the same page as the div tag, but i want to get a script where it will open a new page and load content into a div tag on that page. like the link must be something like main.html?div=content.html i know how to do this with iframes, but i want to work with div tags thank you javascript for loading content into the div tag on the same page : PHP Code: var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no) var loadedobjects="" var rootdomain="http://"+window.location.hostname var bustcacheparameter="" function clientSideInclude(containerid, url){ var page_request = false if (window.XMLHttpRequest) // if Mozilla, Safari etc page_request = new XMLHttpRequest() else if (window.ActiveXObject){ // if IE try { page_request = new ActiveXObject("Msxml2.XMLHTTP") } catch (e){ try{ page_request = new ActiveXObject("Microsoft.XMLHTTP") } catch (e){} } } else return false page_request.onreadystatechange=function(){ loadpage(containerid, page_request) } if (bustcachevar) //if bust caching of external page bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime() page_request.open('GET', url+bustcacheparameter, true) page_request.send(null) } function loadpage(containerid, page_request){ if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)) document.getElementById(containerid).innerHTML=page_request.responseText } function loadobjs(){ if (!document.getElementById) return for (i=0; i<arguments.length; i++){ var file=arguments[i] var fileref="" if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding if (file.indexOf(".js")!=-1){ //If object is a js file fileref=document.createElement('script') fileref.setAttribute("type","text/javascript"); fileref.setAttribute("src", file); } else if (file.indexOf(".css")!=-1){ //If object is a css file fileref=document.createElement("link") fileref.setAttribute("rel", "stylesheet"); fileref.setAttribute("type", "text/css"); fileref.setAttribute("href", file); } } if (fileref!=""){ document.getElementsByTagName("head").item(0).appendChild(fileref) loadedobjects+=file+" " //Remember this object as being already added to page } } } D.I.C Head ** Joined: 29 Jan, 2009 Posts: 94 Thanked: 1 times My Contributions Hello, I am teaching myself javascript and in the course of my experimentation have run into this roadblock: I want to display a styled navigation bar with a button beneath it. When the button is clicked, an onclick event will be triggered and the response of the browser should be to print the word "test" right beneath the button. However, what actually happens is the page blanks out and the word 'test' appears in the upper left corner of the screen. I'm hoping someone would be kind enough to fix this code and explain to me where I've gone wrong here. CODE <html> <head> <title>JavaScript Navanimation Example</title> <style type="text/css"> #navsite h5 { display: none; } #navsite ul { padding: 3px 0; margin-left: 0; border-bottom: 1px solid #778; font: bold 12px Verdana, sans-serif; } #navsite ul li { list-style: none; margin: 0; display: inline; } #navsite ul li a { padding: 3px 0.5em; margin-left: 3px; border: 1px solid #778; border-bottom: none; background: #DDE; text-decoration: none; } #navsite ul li a:link { color: #448; } #navsite ul li a:visited { color: #667; } #navsite ul li a:link:hover, #navsite ul li a:visited:hover { color: #000; background: #AAE; border-color: #227; } /* #navsite ul li a#current { background: white; border-bottom: 1px solid white; } */ </style> </title> <script language="JavaScript" type="text/javascript"> function navanimate() { document.write("test"); return false; } </script> </head> <body language="JavaScript" type="text/javascript"> <div id="navsite"> <h5>Site Navigation</h5> <ul> <li><a href="/">Home</a></li> <li><a href="/about/">About</a></li> <li><a href="/archives/">Archives</a></li> <li><a href="/writing/">Writing</a></li> <li><a href="/speaking/">Speaking</a></li> <li><a href="/Contact/">Contact</a></li> </ul> </div> <input type="button" name="button" value="Drop Down" onclick="return navanimate()"> </body> </html> Thanks! I am one problem. When i click a link a some information in html is to be displayed on the screen. I have written code for that. But before i click the link i am able to display the content. Please look into my code and give some suggestions: <html> <head> </head> <body> <center> <table> <tr> <td> <a href="javascript:Chg1()">Add Required (Features)</a> </td> <td> <a href="javascript:chg2()">Add via Search</a> </td> <td> <a href="javascript:Chg3()">Add via List</a> </td> </tr> </table> </center> function chg2() { document.write(<b> Type Model Feature Relationship Search and Add </b>);s <table> <tr> <td> Type<input type="text" id="type" name="type" value=""> </td> <td> Document Number<input type="text" id="doc" name="doc" value=""> </td> </tr> <tr> <td> Model<input type="text" id="model" name="model" value=""> </td> <td> Promoted<input type="text" id="promoted" name="promoted" value=""> </td> </tr> <tr> <td> Feature<input type="text" id="feature" name="feature" value=""> </td> </tr> </table> } </script> </body> Hello, I was wondering if it is possible to do something like below using JS. Say I have some hidden text at the top of an HTML page... Code: <div id="text" style="visibility: hidden;">text</> and an empty tag at the bottom of the page. Code: <div id="empty_container"></div> Is there any way JS could grab the content inside #text and move it inside #empty_container when the page loads? Thanks. The project I am working on involves a flash piece that communicates with a iframe. Currently the flash piece just calls on javascript functions. I want the buttons in the flash piece to be able to change the src of the iframe. PHP Code: <script type="text/javascript"> document.getElementById('video').setAttribute('src',address2); function closeVideo() { document.getElementById('video').style.height='0px'; return false; document.getElementById('video').setAttribute('src', address2); } function openVideo() { document.getElementById('video').style.height='391px'; return false; document.getElementById('video').setAttribute('src', address); } </script> So the way the code works now is when the page loads it sets the iframe with the id of 'video' to the variable address2 which it pulls from an XML file. In the flash piece when a button is hit, it calls openVideo() which "opens" the iframe and I want it to change the contents to address. This does not work though. It opens the frame but will not change the src. I've tried a bunch of different things now such as make the flash target the iframe using navigateToURL(request1, 'video'); but in Firefox and IE is opens it stills as if I had _blank in there. It does strangely work in Safari. Any ideas how to get this to work? I'm new to javascript so it could be something basic I'm overlooking I am trying to give uses the ability to email a web page in addition to print the pages but I cannot get the web page to post as the body of the email. Here is what the print function looks like: Code: function OnPrint() {
var contentWindow = GetContentFrame().contentWindow;
{
contentWindow.focus();
contentWindow.print();
}
}
and here is where I stand on the email the page(not just a link to the page) Code: function mailpage()
{
mail_str = "mailto:optilinksupport@seton.org?subject=Check out the " + document.title;
mail_str += "&body=I thought you might be interested in the " + document.title;
mail_str += ". You can view it at, " + location.href;
location.href = mail_str;
}
The above work great if I want to send a link to the page. How do I amend the above so that the the mail_str = contentWindow html? And do I need to do make other changes to format the email as html rather than text? Thank for a rookie! Hi, I am creating a webpage to display menu items in a div tag. The premis of my page is to use 4 div tags. 1st div tag = company logo (top left) 2nd div tag = img of restaurant and address (top right). 3rd div tag = horizontal menu with text or buttons to call up menu items, for example: Lunch: Dinner: Beverages: Driving Directions, etc 4th div to display content pages. For example, if the user clicks the Lunch button, it would call the lunch page and place it into the 4th div tag. I am able to do this with frames in HTML or content pages in ASP.net, but how would I do it using CSS and div tags. The best response I got was with AJAX, but I am not familiar with this language yet. Can I use JavaScript to do this? Any suggestions? Thank you, Paul |
|||||||