|
JavaScript - Text In Javascript-affected Div Not Rendering Well In Ie7
I have a javascript-run rotating (as in rotating through a series of content, not rotating in a circle) div.
Each content div has an image and a bit of text. The title text - bold arial - is really messy, as though it's a badly pixelated image - smudged, almost. the rest of the text - smaller and not bold - isn't bad, but still doesn't match text outwith these divs. it's fine in firefox, chrome, and even IE6!! Does anyone know what's happening in IE7? Similar TutorialsWhat I am trying to achieve is when the Input Box value is increased or decreased using the up/down arrows that the new value will be writen to the Canvas, though the code I have works it dosent render properly. I also have a Span Tag absouletly positioned within the canvas which works perfectly but I'd like the Canvas text to work instead. Not sure if it's possible. Code:
<!doctype html>
<html>
<head>
<title></title>
<!------------------------------------- STYLE ------------------------------------->
<style type="text/css">
canvas {
background:#222;
}
#length{
position:absolute;
left:10px;
top:10px;
width:150px;
}
#text_in_canvas{
position:absolute;
left:500px;
top:100px;
width:400px;
font-style: normal;
font-size: 25px;
color: red;
}
</style>
<!------------------------------------- CODE ------------------------------------->
<script type="text/javascript">
var fps = 100;
function draw_canvas() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");//returns drawing functions to allow the user to draw on the canvas.
var width = canvas.scrollWidth;
var height = canvas.scrollHeight;
//
var startPosX = (300); // Start Position from X axis
var startPosY = (height - 50); // Start Position from Y axis
//
var length = document.getElementById("length").value; //Get's value from Text Input Box
var text = "This is the number from Input Box: " + length;
document.getElementById("text_in_canvas").innerHTML= text;
//LEFT BLOCK
context.beginPath();
context.rect(0, 0, 250, height); //position & size of left block
context.fillStyle = 'black'; //background colour
context.fill();
context.lineWidth = 0;
context.strokeStyle = 'red';
context.stroke();
context.closePath();
//TEXT
context.font = 'bold 28px sans-serif'; // set text font
context.textAlign = 'center';
context.fillStyle = '#FFFFFF'; // set text color
context.fillText(text, 548, 50);
}
</script>
</head>
<body onload="draw_canvas()">
<!-- CANVAS STARTS HERE -->
<div id="" style="width:1000px;height:600;margin:auto;position:relative;">
<canvas id="myCanvas" width="1000" height="600" style="border:1px solid #000000;"></canvas>
<!-- FORM BEGINS HERE -->
<form id="my_form">
<label for="length">Outside too Outside Wallplate Measurement (millimeters):</label>
<input type="number" id="length" name="length" step="1" min="0" max="" placeholder="" oninput="JavaScript: draw_canvas()">
</form>
<span id="text_in_canvas"></span>
<!-- FORM END's HERE -->
</div>
<!-- CANVAS END's HERE -->
</body>
</html>
Hi there, I am having a problem with IE rendering the font of my website poorly, but only when the javascript code is allowed... The website is he www.thelivingsacred.co.uk And as you can see, there is a huge difference between IE8's rendering of the site once the scripts are allowed, and before, as well as a difference between IE8 and Firefox. Please could someone explain what's going on? My javascript quits working when I am rendering the html? (It works perfectly fine if the page is opened from http address directly). I did some research and concluded that "JavaScript is executed on page load", so when I render my html, my JavaScript functions are not automatically called. My question is how should I call the javascript functions manually? verify.html: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <Title>form</Title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <link rel="stylesheet" type="text/css" href="xupload.css"> </HEAD> <BODY> <form id="myform" enctype="multipart/form-data" action="/cgi-bin/upload.cgi" method="post" onSubmit="return StartUpload(this);"> <DIV id="div1"> <b><font id='x_max_files'>?</font> files <font id='x_max_size'>?</font> Mb total maximum</b> <div id="upload_input"><input id="my_file_element" type="file" name="file_1" size=58></div> <div id="files_list"></div> <p align=center><input type="submit" value="Upload Files" class="myForm" id="submit_btn"></p> </DIV> </form> <iframe src="javascript:false;" name="xupload" style="position:absolute;left:-9999px;"></iframe> <script type="text/javascript"> //Specify your form ID var x_form_id = 'myform'; var x_mode = 1; var x_tmpl_name = ''; </script> <script src="xupload.js" type="text/javascript"></script> </BODY> </HTML> config file: Code: htmlverify = "../verify.html" Perl: Code: if(my $verifypage = $g->{CV}{htmlverify}) {
# passing variables
xxxxx
....
# render the page:
send_header();
$p->pf($verifypage);
}
Below is my previous code I had working in the manner it would change the price, sub_total, tax, sh, total, and total_paid input fields to 0. There are two problems with this... 1. When it outputs to the input fields, the value displays as 0 instead of 0.00. 2. I need to have it only react when the value typed into the input field "trees_sold" is "0". If any higher, I would like it to ignore the statement. Code: <!-- Comp all prices to zero value -->
<SCRIPT LANGUAGE="JavaScript">
var trees_sold = 0.00;
function InitSaveVariables(form) {
price = form.price.value;
sub_total = form.sub_total.value;
tax = form.tax.value;
sh = form.sh.value;
total = form.total.value;
total_paid = form.total_paid.value;
}
function CompPrices(form) {
if (trees_sold == 0.00) {
InitSaveVariables(form);
form.price.value = 0.00;
form.sub_total.value = 0.00;
form.tax.value = 0.00;
form.sh.value = 0.00;
form.total.value = 0.00;
form.total_paid.value = 0.00;
}
}
</script>
Code: <input name="trees_sold" id="trees_sold" size="15" onkeyup="javascript:CompPrices(this.form);" maxlength="15" /> Below is my current code I'm working with that I can't seem to get to function properly. I've modified the first two lines of code here, and am attempting to pull any data that is typed in and automatically take into consideration if it is a "0" value, it reacts as my code below says "if (trees_sold == 0.00)" and if anything else, it will not do anything. This is not working unfortunately. Code: <!-- Comp all prices to zero value -->
<SCRIPT LANGUAGE="JavaScript">
form.trees_sold.value = "";
trees_sold = form.trees_sold.value;
function InitSaveVariables(form) {
price = form.price.value;
sub_total = form.sub_total.value;
tax = form.tax.value;
sh = form.sh.value;
total = form.total.value;
total_paid = form.total_paid.value;
}
function CompPrices(form) {
if (trees_sold == 0.00) {
InitSaveVariables(form);
form.price.value = 0.00;
form.sub_total.value = 0.00;
form.tax.value = 0.00;
form.sh.value = 0.00;
form.total.value = 0.00;
form.total_paid.value = 0.00;
}
}
</script>
Code: <input name="trees_sold" id="trees_sold" size="15" onkeyup="javascript:CompPrices(this.form);" maxlength="15" /> Anyone have any ideas? Thank you. As of right now I have a code that will work in IE but wont work in FireFox...go figure. Basically what I want to have happen is when you type in an area code it will provide an output in a predetermined area of the page. For Example: Input- 512 Output - Austin, TX The code that I have doesn't work with firefox and I was just wondering if there was a code that would allow that to happen. Thanks! i have a javascript running on my web page, however the text in the input field is white, on a white background. making it unreadable. is there a way to change the text color for the script. site can be viewed he www.barren-county.net the script running is the toolbar at the bottom, more specifically the "Connect" app on the right, if you open it you see that the text field is white and text is invisible. here is the code i have: Code: <head>
{S_HEADER_TAGS}
<link rel="stylesheet" type="text/css" href="{THEME_PATH}/style/style.css" />
<!-- IF S_MAIN_MENU or S_ADMIN_CSSMENU -->
<link rel="stylesheet" type="text/css" href="{THEME_PATH}/style/cpgmm.css" />
<!-- ENDIF -->
{CSS_IE}
<script src="http://cdn.wibiya.com/Toolbars/dir_0585/Toolbar_585555/Loader_585555.js" type="text/javascript"></script>
</head>
<body>
can you help? I'm making a multiple choice test, it all must be on the same page but the user must not be able to see the next question until they finish the first and click continue. Is this possible in Javascript by manipulating form object or something else? Thanks for any suggestions. Hello, I am building a web application that has quotes on it. I am planning on having all the quotes stored in a .txt file. A line space would separate the quotes. Example: "Blah Blah" "Idk what blah" "sure you do" Would this be using Javascript to pull the quotes from the txt file for use in my page be best? I need it to pull all the quotes. Reason for having it like this, I am also planning on having a random quote page where it just pulls 1 quote instead of showing all of them. I'm also open to other ideas here! David Faircloth I have written a small code in Javascript which does the work of blinking all the content inside any tag with the name 'blink' here is the code <html> <body> <p name="blink" style="visibility: visible;">This text blinks using Javascript</p> <p name="blink" style="visibility: visible;">This text blinks using Javascript</p> <p name="blink" style="visibility: visible;">This text blinks using Javascript</p> <p name="blink" style="visibility: visible;">This text blinks using Javascript</p> <p name="blink" style="visibility: visible;">This text blinks using Javascript</p> <p name="blink" style="visibility: visible;">This text blinks using Javascript</p> <p name="blink" style="visibility: visible;">This text blinks using Javascript</p> <p name="blink" style="visibility: visible;">This text blinks using Javascript</p> <p name="blink" style="visibility: visible;">This text blinks using Javascript</p> <p name="blink" style="visibility: visible;">This text blinks using Javascript</p> <script type="text/javascript"> function blinkText() { var x=document.getElementsByName('blink'); for(i=0;i<x.length;i++) { if(x[i].style.visibility=='visible') x[i].style.visibility='hidden'; else x[i].style.visibility='visible'; } } setTimeout('blinkText()',500); </script> </body> </html> I use a Ubuntu system and work on Mozilla 3.6.18 This hides the text successfully but does not display it again What can be wrong here? Can anyone please help me I have this code but it doesnt work: Code: <script type="text/javascript"> var number = 10; document.getelementbyid(number).value = number; </script> <input type="text" id="number" value=""> Can anybody help me out here? Hi, I have a drop down menu, which you select an item and the text in a text box below displays according to what has been chosen from the drop down list. I have too much text in some case to appear in the text box, so i wanted to find some code so i can select different numbers for pages so i can display the information on different pages. Is this possible. Thanks Dear all, Can anyone help me with this… I do not know if this is possible to be done… Instead of text: "Your favorite color is <b>Green</b> right?" I need to show form like this: Code: <form action="auto.htm" method="get" > Your state<br> <select name="statecode" id="statecode"> <option value="">Choose State...</option> <option value="AK">Alaska</option> <option value="AL">Alabama</option> <option value="AR">Arkansas</option> </select> <input type="submit" name="search" value="Get Quotes" /> </form> Thank you in advance This is code I wish to modify. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body {
padding:0;
height:100%;
}
#right {
width:500px;
height:100%;
background-color:#999;
text-align:center;
float:right;
}
#left {
height:100%;
margin-right:500px;
background-color:#f00;
text-align:center;
}
</style>
<script type="text/javascript">
function change()
{
switch (document.getElementById("select").value)
{
case "1":
document.getElementById("change").innerHTML = "Your favorite color is <b>Green</b> right?"
break;
case "2":
document.getElementById("change").innerHTML = "Your favorite color is <b>Red</b> right?"
break;
case "3":
document.getElementById("change").innerHTML = "Your favorite color is <b>Yellow</b> right?"
break;
}
}
</script>
</head>
<body>
What is your favorite color
<select onchange="change()" id="select">
<option value="">------</option>
<option value="1">Green</option>
<option value="2">Red</option>
<option value="3">Yellow</option>
</select>
<div id="change" style="margin:10px;width:200px;height:100px;padding:5px;">
Original Text
</div>
</body>
</html>
Been using document.write to write onto a html file.... What if I want to make the document.write Bold..? looked everywhere but can't find anywhere with legitimate information I can understand... Code: <DOCTYPE html>
<html>
<head>
<title>
Science Practical Report Writer
</title>
</head>
<body>
<script>
var none = confirm("Scientific Report Automator!")
var pracName = prompt("Name Of Report")
var aim = prompt("Aim Of The Experiment")
var hypothesis = prompt("Hypothesis?")
var equiptment = prompt("Equiptment Used:")
var method = prompt("Method Used...")
var results = prompt("Results?")
</script>
<h1> Practical Report </h1>
<script>
document.write(pracName + "<br><br>")
document.write("Aim:" + "<br><br>")
document.write(aim + "<br><br>")
document.write("Hypothesis:" + "<br><br>")
document.write(hypothesis + "<br><br>")
document.write("Equipment:" + "<br><br>")
document.write(equiptment + "<br><br>")
document.write("Method:" + "<br><br>")
document.write(method + "<br><br>")
document.write("Results:" + "<br><br>")
document.write(results + "<br><br>")
</script>
</body>
</html>
All the printed (document.write) variables, are supposed to be bold how do i make those two lines go away in the backround? EDIT: UP! http://insidehb.com/main/default.html EDIT: Now works with ie I have a website, and I'[m learning Javascript. Somehow, I have to type a code in my browser like this javascript:enable:_Path Or something to enable the text box so that I can enter in it. Here is the details that I'm given. This below is in the actual website with the text box disabled ( cannot enter anything in it ) Code: <td width="40%"><strong><script>document.writeln(read_str("virtual_media", "STR_VM_CDROM_IMG_PATH"));</script></strong></td>
<td><input type="text" id="_path" maxlength="128" disabled style="width:140px;" />
<label id="desc" style="font-size:11px"><script>document.writeln(read_str("virtual_media", "STR_VM_CDROM_IMG_PATH_DESC"));</script></label>
</td>
Below is me using Google Chrome to inspect the element, the text box. shareHost=document.getElementById("_shareHost"); path=document.getElementById("_path"); user=document.getElementById("_user"); pwd=document.getElementById("_pwd"); CheckRole(); So what do I type in the URL of my broswer to activate the _path form? Do I type javascript:document.getElementById("_path) OR ("path) IF I'm wrong, correct me the way I should do it. If theirs a program that allows me to do it easier, let me know. Hi everyone, I've downloaded the curvy corners codes from the following address: http://www.curvycorners.net/downloads/ The instructions in the curvycorners.src.js file say that all i need to do is add the following piece of code which I've inserted into the head section: <script type="text/javaScript" src="js/curvycorners.src.js"></script> <style type="text/css"> <!-- p.round { -webkit-border-radius: 25px; -moz-border-radius: 25px; CCborderRadius: 25px; } --> </style> However, it's not rendering in opera and internet explorer. I wondered if someone could tell me where I'm going wrong? The is the xhtml I'm targeting: Code: <div id="content_wrapper">
<div class="accomm">
<h3 id="accomm"><a href="#" title="Quality accommodation"> Quality accommodation</a></h3>
<p class="round">lam et deliciisqui cor resto il eos verciderit ee litate niam eaqui denihicae dolorio rpore, nisinim aut as eum alitior eriaesti atioreiunde erem is sin expelenet, verae dus, conseribus dit odit remqui volestias exceri ullam, con cullatiamet, ut ipite officil igenem non. <a href="about.php">Learn more...</a></p>
<p id="fees"><a href="fees.php">Fee structure</a></p>
</div>
<div class="local">
<h3 id="local_area"><a href="#" title="Our local area"> Our local area</a></h3>
<p class="round">lam et deliciisqui cor resto il eos verciderit ee litate niam eaqui denihicae dolorio rpore, nisinim aut as eum alitior eriaesti atioreiunde erem is sin expelenet, verae dus, conseribus dit odit remqui volestias exceri ullam, con cullatiamet, ut ipite officil igenem non. <a href="local_area.php">Learn more...</a></p>
<p id="directory"><a href="directory.php">Hospital directory</a></p>
</div>
<div class="welcome">
<h3 id="packages"><a href="#" title="Welcome packages">Welcome packages</a></h3>
<p class="round">lam et deliciisqui cor resto il eos verciderit ee litate niam eaqui denihicae dolorio rpore, nisinim aut as eum alitior eriaesti atioreiunde erem is sin expelenet, verae dus, conseribus dit odit remqui volestias exceri ullam, con cullatiamet, ut ipite officil igenem non. <a href="welcome_packs.php">Learn more...</a></p>
<p id="map"><a href="location_map.php">Find us on the map</a></p>
</div>
</div>
</div>
Really appreciate any help. Hi All, I'm building a featured content slider using AnythingSlider. It works fine in FF, Safari, Chrome, and IE8, but in IE7 it will not show the navigation buttons. Take a look at the site here. The navigation buttons are added by the script in a ul called thumbNav. This ul either doesn't load or can't be seen in IE7. Any help would be greatly appreciated as I've got to have this ready for the client by tonight. If any other info is necessary let me know and I'll provide it. Thanks very much, Mike I need javascript to read height of an static multiline text and write height value into the var value? Is it possible? Hello, I am fairly new to javascript so patience is appreciated. I have some javascript I need to execute that is located in an SSI footer. The purpose of the code is to find out what domain the page was loaded at and then to tailor some links to match. Because of how the hosting environment is set up (which I have no control over) when the links don't match the domain they aren't included. I also have to use a complete url (as opposed to relative url) because the footer is included in many different web pages. The problem is that the code is executed but it also is displayed as plain text in firefox. The test site is http://test.ci.edina.mn.us Help! The code is: Code: <script type="text/javascript"> var domainName, strOut; domainName = document.domain; strOut = '<link rel="stylesheet" type="text/css" href="http://' + domainName + '/js/jquery.fancybox/jquery.fancybox.css" media="screen" />'; document.write(strOut); strOut = '<script src="http://' + domainName + '/js/jquery-1.3.2.min.js" type="text/javascript"></script>'; document.write(strOut); strOut = '<script src="http://' + domainName + '/js/jquery.fancybox/jquery.fancybox-1.2.1.js" type="text/javascript"></script>'; document.write(strOut); strOut = '<script src="http://' + domainName + '/js/jquery.easing.1.3.js" type="text/javascript"></script>'; document.write(strOut); </script> |
|||||||