|
JavaScript - Javascript Programming - Modifying Fonts
I need to know two things.
How do you position an alert or prompt to anywhere on the screen. How do you change the font for the alert or prompt (i.e Hebrew) Thanks in advance D.A. Similar TutorialsHi All, I have this javaascript which validates fields on a form, and if one of the fields are empty or 0 it will turn that field red, but it does it individually and i want it to turn all fields that are in error in red at the same time, can someone help me with the below code on how i can accomplish this Code:
var inputsToCheck = Array('MainDisplayContentChange_txtTitleContent', 'MainDisplayContentChange_txtDescription', 'MainDisplayContentChange_txtjusitification','MainDisplayContentChange_txtDateRequired');
var obj;0
function formCheck() {
for(var i=0;i<inputsToCheck.length;i++)
{
obj = document.getElementById(inputsToCheck[i]);
if (obj.value == "") {
obj.style.backgroundColor = "red";
return false
}
else {
return true
}
}
}
Im new to javascript so this could be a simple change for someone with more knowledge then my self. the webpage is built with ASP.Net Thanks in Advance Hi guys, For some reason the following code is not working. Anybody see any issues? By default the style of #pricea in my stylesheet is visibility="hidden"; Code: <script type="text/javascript">
function arrow(boxName){
document.getElementById(boxName).style.visibility = "visible";
}
</script>
<?php
if($_REQUEST['sort']=="price" && $_REQUEST['order']=="ASC"){
?>
<script type="text/javascript">
arrow('pricea');
</script>
<?php
}?>
Hello. I need a javascript font code. It is NOT homework, but I need a script! Thanks! ~Coderguy IndyNS I am trying to create a dynamic form on my webpage. What I want to do is repeat this process multiple times on the same page. I know I have to have unique id's but I am not for sure how to set them. // JavaScript Document function addRowToTable(){ var tbl = document.getElementById('Division'); var lastRow = tbl.rows.length; // if there's no header row in the table, then iteration = lastRow + 1 var iteration = lastRow; // var iteration = lastRow + 1; var row = tbl.insertRow(lastRow); // cell 0 var cell0 = row.insertCell(0); var el = document.createElement('input'); el.type = 'text'; el.NAME = 'Resource[]'; el.size = 30; cell0.appendChild(el); //cell 1 var cell1 = row.insertCell(1); var el = document.createElement("select"); cell1.innerHTML + '<option value="0">Avaliable</option>' + '<option value="1">Busy</option>' //cell 2 var cell2 = row.insertCell(2); var el = document.createElement('input'); el.type = 'text'; el.NAME = 'Comment[]'; el.size = 25; cell2.appendChild(el); } Hello all, I am having some trouble getting my Javascript code to work properly. I want to create a program that allows two objects to race to a certain point which is 1000px in my program. I have figured out how to get the images to race at random speed, and I have figured out a function to reset the program if the user chooses to restart. Basically I can't figure out how to get the clearTimeout() to stop the Race() function when it reaches 1000px. I am fairly new to the Javascript world and could really use some suggestions or a point in the right direction. Thanks in advance, AJ. Here is my program so far: <body> <script language="JavaScript" type="text/javascript"> <!-- function StartUp() { if ((car1.style.pixelLeft<1000) && (car2.style.pixelLeft<1000)) { Race(); } else { alert(); } } function Race() { car1.style.pixelLeft+=(Math.floor(Math.random()*11)); car2.style.pixelLeft+=(Math.floor(Math.random()*11)); stop=setTimeout("Race()",50); } function Restart() { clearTimeout(stop); car1.style.pixelLeft=10; car2.style.pixelLeft=10; } function swapImage() { var image = document.getElementById("imageToSwap"); var length = document.getElementById("Road"); image.src = Road.value; } //--> </script> <div id="car1" style="position:absolute; top: 10"> <img src="Car1.gif" alt=""/> </div> <div id="car2" style="position:absolute; top: 75"> <img src="Car2.gif" alt=""/> </div> <img id="imageToSwap" src="Road1000.gif" alt=""/> <form name="form1"> <br> <input type="button" value="Race" onClick="StartUp()"> <input type="button" value="Restart" onClick="Restart()"> <br> Track Length: <select id="Road" name="Road" onChange="swapImage()"> <option value="Road1000.gif">1000 feet</option> <option value="Road750.gif">750 feet</option> <option value="Road500.gif">500 feet</option> <option value="Road250.gif">250 feet</option> </select> </form> </body> Hi so i am using onClick="myPopup(); on a button and when someone clicks on the button, it pops up an advertisement in a new tab. But is there a way to make the users stay on the page where the button is located instead of forcing the browser to automatically switch to the advertisement tab when a button is clicked? I have traditionally stayed away from javascript because until relatively recently, the lack of decent documentation has made me want to smash the computer in complete frustration!! Now, I have found this little (seemingly quite new) gem which has, for the first time, explained javascript OO programming to me in five minutes flat, and I understand it perfectly!! It's not hard ... it's really not that hard ... but so many people on the net make such a hash of trying to explain it. Thank you Mozilla: https://developer.mozilla.org/en-US/...ted_JavaScript Friend i concern with some that man told me , JavaScript programming is the best effective for website development. so how it is tell me ?
I have to take more javascript programming classes and I'm really not good at it. I desperately need help. I own Visual Basic, but it's a little difficult to use. What is the best book, online resource, and software for programming in javascript?
Hi All, I m newbie on JavaScript Coding. I have Form where the there are 4 radio buttons. Requirement is OnClick of Each radio buttons, some Div must Greyed out. <input type="radio" name="cf_basic_type" value="Apartment" checked="checked" />Apartment <input type="radio" name="cf_basic_type" value="Villa" />Villa <input type="radio" name="cf_basic_type" value="Independant" />Independant house <input type="radio" name="cf_basic_type" value="Plot" />Plot</div> and Grey Part of Form is: Area Size:<input type="text" name="cf_area_size" id="cf_area_size" /></div> Plot Size:<input type="text" name="cf_area_length" id="cf_area_length" /> <input type="text" name="cf_area_width" id="cf_area_width" /> so for Plot radio selected the 'Area Size' must be greyed out but when others radio button selected is must be active For Apartment radio selected or Villa radio selected, Plot Size must be greyed out. Hope that makes clear.... Its very Urgent kindly help me with this.. Thnks in Advnce Hi, Please i am confuse to know the work of this sign (!)...which is exclamation sign in programming. i have this code here which which i remove the exclamation sign (!)..it dont work but when i add it ,then it work. Here is the code <script type="text/javascript"> function getvalue() { var mytextfield=document.getElementById("mytext"); if(mytextfield.value!="") { alert("You Entered:"+mytextfield.value) } else{ alert("would you enter some text") } } </script> <input type="text" id="mytext" size="30"> <input type="button" value="check" onclick="getvalue()"> Please help me to understand the use of this sign !. Thank you. Clement Osei. I am very new to js. I have a jquery plugin that is a live countdown timer and I would like to modify it. Can someone tell me how to modify the code below so that the date is 20 minutes from right now (currently it is set as 26 January 2013). Code: <script type="text/javascript">
$(function () {
var austDay = new Date();
austDay = new Date(austDay.getFullYear() + 1, 1 - 1, 26);
$('#defaultCountdown').countdown({until: austDay});
$('#year').text(austDay.getFullYear());
});
</script>
Here is the style and js for my menu that I got from Dynamic Drive. I have it working as it is suppose to on my site. But I need my menus to have submenus and even have a couple of sub-submenus. Can someone help me with this. Code: YOffset=150; // no quotes!!
XOffset=0;
staticYOffset=30; // no quotes!!
slideSpeed=20 // no quotes!!
waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.
menuBGColor="black";
menuIsStatic="yes"; //this sets whether menu should stay static on the screen
menuWidth=180; // Must be a multiple of 10! no quotes!!
menuCols=2;
hdrFontFamily="verdana";
hdrFontSize="2";
hdrFontColor="white";
hdrBGColor="#170088";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="15";
linkFontFamily="Verdana";
linkFontSize="2";
linkBGColor="white";
linkOverBGColor="#FFFF99";
linkTarget="_top";
linkAlign="Left";
barBGColor="#FF0000";
barFontFamily="Verdana";
barFontSize="3";
barFontColor="white";
barVAlign="center";
barWidth=45; // no quotes!!
barText="Menu Navigation"; // <IMG> tag supported. Put exact html for an image to show.
///////////////////////////
// ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
ssmItems[0]=["Menu"] //create header
ssmItems[1]=["About Our Diocese", "http://www.ptdiocese.org/about-us/about-us.shtml, ""]
ssmItems[2]=["Parishes", "http://www.ptdiocese.org/parishes/parish.shtml",""]
ssmItems[3]=["Schools", "http://www.ptdiocese.org/schools/schools.shtml", ""]
ssmItems[4]=["Ministries", "http://www.ptdiocese.org/christian-formation/christian-formation.shtml", "_new"]
ssmItems[5]=["Clergy and Religous", "http://www.ptdiocese.org/clergy-religious/clergy-religious.shtml", ""]
ssmItems[6]=["Protecting God's Children", "http://www.ptdiocese.org/protecting-children/protecting-children.shtml", ""]
ssmItems[7]=["For Those In Need", "http://www.ptdiocese.org/in-need/in-need.shtml", ""]
ssmItems[8]=["Tribunal", "http://www.ptdiocese.org/tribunal/tribunal.shtml", ""]
ssmItems[9]=["Contact Us"]
//ssmItems[7]=["Tribunal", "http://www.ptdiocese.org", "", 1, "no"] //create two column row
//ssmItems[8]=["Contact Us", "http://www.ptdiocese.org", "",1]
ssmItems[10]=["External Links", "", ""] //create header
ssmItems[11]=["Test", "http://www.javascriptkit.com", ""]
ssmItems[12]=["Test", "http://www.freewarejava.com", ""]
ssmItems[13]=["Test", "http://www.codingforums.com", ""]
buildMenu();
//-->
NS6 = (document.getElementById&&!document.all)
IE = (document.all)
NS = (navigator.appName=="Netscape" && navigator.appVersion.charAt(0)=="4")
tempBar='';barBuilt=0;ssmItems=new Array();
function truebody(){
return (document.compatMode!="BackCompat")? document.documentElement : document.body
}
moving=setTimeout('null',1)
function moveOut() {
if ((NS6||NS)&&parseInt(ssm.left)<0 || IE && ssm.pixelLeft<0) {
clearTimeout(moving);moving = setTimeout('moveOut()', slideSpeed);slideMenu(10)}
else {clearTimeout(moving);moving=setTimeout('null',1)}};
function moveBack() {clearTimeout(moving);moving = setTimeout('moveBack1()', waitTime)}
function moveBack1() {
if ((NS6||NS) && parseInt(ssm.left)>(-menuWidth) || IE && ssm.pixelLeft>(-menuWidth)) {
clearTimeout(moving);moving = setTimeout('moveBack1()', slideSpeed);slideMenu(-10)}
else {clearTimeout(moving);moving=setTimeout('null',1)}}
function slideMenu(num){
if (IE) {ssm.pixelLeft += num;}
if (NS6) {ssm.left = parseInt(ssm.left)+num+"px";}
if (NS) {ssm.left = parseInt(ssm.left)+num; bssm.clip.right+=num;bssm2.clip.right+=num;}}
function makeStatic() {
if (NS||NS6) {winY = window.pageYOffset;}
if (IE) {winY = truebody().scrollTop;}
if (NS6||IE||NS) {
if (winY!=lastY&&winY>YOffset-staticYOffset) {
smooth = .2 * (winY - lastY - YOffset + staticYOffset);}
else if (YOffset-staticYOffset+lastY>YOffset-staticYOffset) {
smooth = .2 * (winY - lastY - (YOffset-(YOffset-winY)));}
else {smooth=0}
if(smooth > 0) smooth = Math.ceil(smooth);
else smooth = Math.floor(smooth);
if (IE) bssm.pixelTop+=smooth;
if (NS6) bssm.top=parseInt(bssm.top)+smooth+"px"
if (NS) bssm.top=parseInt(bssm.top)+smooth
lastY = lastY+smooth;
setTimeout('makeStatic()', 1)}}
function buildBar() {
if(barText.indexOf('<IMG')>-1) {tempBar=barText}
else{for (b=0;b<barText.length;b++) {tempBar+=barText.charAt(b)+"<BR>"}}
document.write('<td align="center" rowspan="100" width="'+barWidth+'" bgcolor="'+barBGColor+'" valign="'+barVAlign+'"><p align="center"><font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></font></p></TD>')}
function initSlide() {
if (NS6){ssm=document.getElementById("thessm").style;bssm=document.getElementById("basessm").style;
bssm.clip="rect(0 "+document.getElementById("thessm").offsetWidth+" "+document.getElementById("thessm").offsetHeight+" 0)";ssm.visibility="visible";}
else if (IE) {ssm=document.all("thessm").style;bssm=document.all("basessm").style
bssm.visibility = "visible";}
else if (NS) {bssm=document.layers["basessm1"];
bssm2=bssm.document.layers["basessm2"];ssm=bssm2.document.layers["thessm"];
bssm2.clip.left=0;ssm.visibility = "show";}
if (menuIsStatic=="yes") makeStatic();}
function buildMenu() {
if (IE||NS6) {document.write('<DIV ID="basessm" style="visibility:hidden;Position : Absolute ;Left : '+XOffset+'px ;Top : '+YOffset+'px ;Z-Index : 20;width:'+(menuWidth+barWidth+10)+'px"><DIV ID="thessm" style="Position : Absolute ;Left : '+(-menuWidth)+'px ;Top : 0 ;Z-Index : 20;" onmouseover="moveOut()" onmouseout="moveBack()">')}
if (NS) {document.write('<LAYER name="basessm1" top="'+YOffset+'" LEFT='+XOffset+' visibility="show"><ILAYER name="basessm2"><LAYER visibility="hide" name="thessm" bgcolor="'+menuBGColor+'" left="'+(-menuWidth)+'" onmouseover="moveOut()" onmouseout="moveBack()">')}
if (NS6){document.write('<table border="0" cellpadding="0" cellspacing="0" width="'+(menuWidth+barWidth+2)+'px" bgcolor="'+menuBGColor+'"><TR><TD>')}
document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+barWidth+2)+'px" bgcolor="'+menuBGColor+'">');
for(i=0;i<ssmItems.length;i++) {
if(!ssmItems[i][3]){ssmItems[i][3]=menuCols;ssmItems[i][5]=menuWidth-1}
else if(ssmItems[i][3]!=menuCols)ssmItems[i][5]=Math.round(menuWidth*(ssmItems[i][3]/menuCols)-1);
if(ssmItems[i-1]&&ssmItems[i-1][4]!="no"){document.write('<TR>')}
if(!ssmItems[i][1]){
document.write('<td bgcolor="'+hdrBGColor+'" HEIGHT="'+hdrHeight+'px" ALIGN="'+hdrAlign+'" VALIGN="'+hdrVAlign+'" WIDTH="'+ssmItems[i][5]+'" COLSPAN="'+ssmItems[i][3]+'"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+ssmItems[i][0]+'</b></font></td>')}
else {if(!ssmItems[i][2])ssmItems[i][2]=linkTarget;
document.write('<TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="'+ssmItems[i][5]+'px" COLSPAN="'+ssmItems[i][3]+'"><ILAYER><LAYER onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="100%" ALIGN="'+linkAlign+'"><DIV ALIGN="'+linkAlign+'"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'"> <A HREF="'+ssmItems[i][1]+'" target="'+ssmItems[i][2]+'" CLASS="ssmItems">'+ssmItems[i][0]+'</DIV></LAYER></ILAYER></TD>')}
if(ssmItems[i][4]!="no"&&barBuilt==0){buildBar();barBuilt=1}
if(ssmItems[i][4]!="no"){document.write('</TR>')}}
document.write('</table>')
if (NS6){document.write('</TD></TR></TABLE>')}
if (IE||NS6) {document.write('</DIV></DIV>')}
if (NS) {document.write('</LAYER></ILAYER></LAYER>')}
theleft=-menuWidth;lastY=0;setTimeout('initSlide();', 1)}
Hello, I have a script that makes a link a different color on click, i would like to add a hover color to the links that are NOT active. Script below. Thanks in advance! Code: function activate(el) { var links=document.getElementsByTagName("a"); for(i=0;i<links.length;i++) { if(links[i].className=="toggle") { links[i].style.color="#999"; } } el.style.color="#DF8700"; }
I am trying to modify a popup script to popup a lightbox on page load instead of a new window. The script identifies if the user is a new visitor and displays the popup only to new visitors. Typically, the lightbox is triggered by an a:link. I would like to trigger it using this script so that the lightbox pops up automatically for new visitors only. Here is the popup script: Code: <SCRIPT LANGUAGE="JavaScript">
<!--
function GetCookie(name) {
var arg=name+"=";
var alen=arg.length;
var clen=document.cookie.length;
var i=0;
while (i<clen) {
var j=i+alen;
if (document.cookie.substring(i,j)==arg)
return "here";
i=document.cookie.indexOf(" ",i)+1;
if (i==0) break;
}
return null;
}
var visit=GetCookie("COOKIE1");
if (visit==null){
var expire=new Date();
window.name = "thiswin";
newwin=open("http://www.pccmedia.net/P25_60sec.php", "dispwin",
"width=350,height=350,scrollbars=yes,menubar=no");
expire=new Date(expire.getTime()+7776000000);
document.cookie="COOKIE1=here; expires="+expire;
}
// -->
</SCRIPT>
I want to replace the newwin=open... command with something that will trigger the lightbox. The section of the lightbox script that receives the trigger and variables is.... Code: Mediabox.scanPage = function() {
// $$('#mb_').each(function(hide) { hide.set('display', 'none'); });
var links = $$("a").filter(function(el) {
return el.rel && el.rel.test(/^lightbox/i);
});
$$(links).mediabox({/* Put custom options here */}, null, function(el) {
var rel0 = this.rel.replace(/[[]|]/gi," ");
var relsize = rel0.split(" ");
return (this == el) || ((this.rel.length > 8) && el.rel.match(relsize[1]));
});
};
window.addEvent("domready", Mediabox.scanPage);
An example of the typical HTML tag that triggers the lightbox and feeds the variables is Code: <a href="http://www.pccmedia.net/other/P25_60sec.mp4" rel="lightbox[set 720 405]" title="Project 25" onClick="stop1()"/> The rel=lightbox... is the trigger for the lightbox. The stop1() function refers to a separate script that plays background music on the website. This also needs to be included in the new visitor popup script, but is a separate issue..... I'm not familiar enough with JS to be able to figure this out. Any help would be GREATLY appreciated. I have the following code for an embed that I would like to add to my site. However, the embed is too large for the box I am trying to put it in on my social network. I tried to add height/width parameters, but it did not work. Is there a way to modify the size? Thanks!!! <div id="wb-9ez75d"></div><script type="text/javascript" src="http://flockdraw.com/embed/9ez75d"></script> Hi all, I found a small fading script online which suits my needs though I need some help changing it around a bit as it seems to only work once in a page (i.e. a second occurance of the code doesn't work though the first one continues). Also, I'm not quite sure how to put it into a .js external page and then call the specific function as many times as I want in the body and have it all work. Please advise on this issue (i.e. Putting the code in an external file and then calling the fadeIn() function as many times as I want in the body). Thanks. BTW, the concept is a fixed imaged with the js fading another image over the top of that first image in and out over and over again. All the images and application of the js will be the same for all occurrences on the page (don't know if that's relevant to the solution I'm asking for but throwing it in there just in case). Here is the code: Code: <html>
<body style="background:#000;">
<div style="float:left;">
<img style="float:left;" id="me" src="fade_arrow2.png"/>
<img style="float:left;margin-left:-44px;" src="fade_arrow1.png"/>
<script type="text/javascript">
var element = document.getElementById('me') ;
var duration = 4000; /* 1000 millisecond fade = 1 sec */
var steps = 20; /* number of opacity intervals */
var delay = 5000; /* 5 sec delay before fading out */
/* set the opacity of the element (between 0.0 and 1.0) */
function setOpacity(level) {
element.style.opacity = level;
element.style.MozOpacity = level;
element.style.KhtmlOpacity = level;
element.style.filter = "alpha(opacity=" + (level * 100) + ");";
}
function fadeIn(){
for (i = 0; i <= 1; i += (1 / steps)) {
setTimeout("setOpacity(" + i + ")", i * duration);
}
setTimeout("fadeOut()", delay);
}
function fadeOut() {
for (i = 0; i <= 1; i += (1 / steps)) {
setTimeout("setOpacity(" + (1 - i) + ")", i * duration);
}
setTimeout("fadeIn()", duration);
}
/* start the effect */
fadeIn();
</script>
</div>
</body>
</html>
I have a question about the implicit behavior of textNode.data I have someElement.childNodes[0].data += 'some char' The text node has already been initialized with a string value, say 'x' so, what happens is the textNode.data is then XXsome char. This seems to imply that the existing data is getting copied into the result of += When I use just: someElement.childNodes[0].data = 'some char' 'x' is already the I get xsome char; BUT: I am doing a calculator that will display a string representation of a simple calculation in a manner that allows the user to modify the string before it is commited to processing. So, there must be accomadation for a decimal fraction. E.G. .0234 When the decimal is entered first, the rest of the chars are added properly but the decimal gets duplicated when it should not. This last could very well be a code problem I would have to find and correct, the the += problem is not. I don't understand how to use the [icode] or [code] tags: apparently not literally thanks for time and attention JK Hi, I am using this image rotation tool on my website but I would like to alter it slightly http://www.zurb.com/playground/orbit...y-image-slider See the small navigation dots under the images to select individual pages there are 4 of them (more if you add more images) - on 1 horizontal line. I would like to alter the code if possible so that the dots are in pairs going down the page (I wont bore you with the reason why) ie: o o o o o o o o etc The code the handles the dots is this: Code: // ==================
// ! BULLET NAV
// ==================
//Bullet Nav Setup
if(options.bullets) {
var bulletHTML = '<ul class="orbit-bullets"></ul>';
orbitWrapper.append(bulletHTML);
var bullets = orbitWrapper.children('ul.orbit-bullets');
for(i=0; i<numberSlides; i++) {
var liMarkup = $('<li>'+(i+1)+'</li>');
if(options.bulletThumbs) {
var thumbName = slides.eq(i).data('thumb');
if(thumbName) {
var liMarkup = $('<li class="has-thumb">'+i+'</li>')
liMarkup.css({"background" : "url("+options.bulletThumbLocation+thumbName+") no-repeat"});
}
}
orbitWrapper.children('ul.orbit-bullets').append(liMarkup);
liMarkup.data('index',i);
liMarkup.click(function() {
stopClock();
shift($(this).data('index'));
});
}
setActiveBullet();
}
//Bullet Nav Execution
function setActiveBullet() {
if(!options.bullets) { return false; } else {
bullets.children('li').removeClass('active').eq(activeSlide).addClass('active');
}
}
The CSS for this is: Code: /* BULLET NAV
================================================== */
.orbit-bullets {
position: absolute;
z-index: 1000;
list-style: none;
bottom: 150px;
left: 0%;
margin-left: 0px;
padding: 0; }
.orbit-bullets li {
float: left;
margin-left: 5px;
cursor: pointer;
color: #999;
text-indent: -9999px;
background: url(bullets.png) no-repeat 4px 0;
width: 13px;
height: 12px;
overflow: hidden; }
.orbit-bullets li.active {
color: #222;
background-position: -8px 0; }
.orbit-bullets li.has-thumb {
background: none;
width: 100px;
height: 75px; }
.orbit-bullets li.active.has-thumb {
background-position: 0 0;
border-top: 2px solid #000; }
The image file for the small dots is this: I'm afraid I'm not a Java person at all and know little about it so I would be very grateful if you could help me out with it... if it's possible. Thanks. PP. |
|||||||