|
JavaScript - Anythingslider Ie7 Rendering Error
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 Similar TutorialsHi 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. I need to render a tree in freemarker. I am not sure about what technology should be used. I was thinking Jquerys jsTree plugin. My requirements - 1. Tree control -Name and instead of Icon ,i want customized letters(A,B,C) that represents type of element. 2.I dont want dotted lines connecting root and children like folder tree. 3.collapsable. Please suggest what and how can i do .? What 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 presently banging my head against the wall, while working on an html5 game remake of a classic online game I have struck a problem, that should be a simple figure out and is crushing my brain. I need to produce a 2000x2000 tile map and render it to screen, add objects, remove objects, pick objects, all fine no problem, code for said has been dealt with. What I need to do is pre-render a 2000x2000 map as a base for my tile/object map to go on so to speak. Although I should be able to figure this quickly my brain keeps freezing. What I am after here is theory help really, although any code snippets are welcome. 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? 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? Hi all, I'm encountering a strange rendering issue with a chunk of code I'm developing. I'm building an object that will construct a drop down-esque menu. The menu has a function (addEntry) to add additional menu items to itself. When the user hovers over a menu entry - I add a class to the element to change the look (basically highlight it). However, when the mose moves over - some strange rendering occurrs and I can't quite seem to figure it out. Please have a look at the following fiddle, and click the link to open the menu. Edit fiddle - JSFiddle I am currently working on a simple site and I was looking into methods to take advantage of html partial rendering to make site maintenance easier without using a server side language. The code for the two pages is as follows: Main html page: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<link href="../css/main.css" rel="stylesheet" type="text/css"/>
<link href="../css/default.css" rel="stylesheet" type="text/css"/>
<title>Default</title>
</head>
<body>
<div class="navigation" id="nav_div">
<iframe name="nav_frame" onload="loadNav()"></iframe>
</div>
<script type="text/javascript" language="javascript">
<!--
function loadNav()
{
nav_frame.location="../static_partials/navigation.htm";
}
//-->
</script>
</body>
</html>
And the code of navigation.htm is: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<script type="text/javascript" language="javascript">
<!--
function iframeLoad()
{
parent.document.getElementById("nav_div").innerHTML = document.getElementById("navigation_divs").innerHTML;
}
//-->
</script>
<title>Navigation Partial</title>
</head>
<body onload="iframeLoad()">
<div id="navigation_divs">
</div>
</body>
</html>
The works fine in IE, but in Firefox 3.5.7 the iframeLoad generates an exception. The exception states the following: Code: Permission denied for <file://> to get property Window.document from <file://>. Firefox doesn't seem to like my usage of the parent object in that way, but I am unsure of another way to do it without using a server side language. 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);
}
(just started JS 2 weeks ago) -- this is also my first time posting here, if my post isnt following the proper template let me know and Ill fix it .. Thanks so much for taking the time to check this out in advance Im trying to make the first ul tag in the each slideMenus[] array index values have a position of left = 0px I keep recieving this error however ____________________________________________________ Error: slideMenus[i].getElementsByTagName("ul").style is undefined Line: 63 ------------------------------------------------------------------ the script in question is in [code]. Could someone tell me if I am just making a syntax error if not ill try redoing the whole thing. window.onload = makeMenus var currentSlide = null var timeID = null leftPos = 0 function makeMenus(){ var slideMenus = new Array() var allElems = document.getElementsByTagName("*") var slideListArr = new Array() for(var i=0 ; i < allElems.length ; i++){ if(allElems[i].className = "slideMenu") slideMenus.push(allElems[i]) } for(var i=0 ; i < slideMenus.length ; i++){ slideMenus[i].onclick = showSlide; Code: slideMenus[i].getElementsByTagName("ul")[0].style.left = "0px";
} document.getElementById("head").onClick = closeSlide document.getElementById("main").onClick = closeSlide } function showSlide(){ var slideList = this.getElementsByTagName("ul")[0] // mess with this if((currentSlide != null) && (currentSlide.id == slideList.id)) {closeSlide()} else{ closeSlide(); var currentSlide = slideList; currentSlide.style.display = "block"; timeID = setInterval('moveSlide()', 1); } } function closeSlide(){ if(currentSlide){ clearInterval(timeID); currentSlide.style.left = "0px" currentSlide.style.display = "none"; var currentSlide = null } } function moveSlide(){ var leftPos = leftPos + 5; if(leftPos <= 220) {currentSlide.style.left = leftPos + "px"} else{ clearInterval(timeID); var leftPos = 0} } Strange problem here... I'm implementing google's JS tracking code verbatim which determines whether or not the current site is using HTTP or HTTPS. It builds a dynamic URL used as the "SRC" parameter in the SCRIPT statement. On browsers I'm testing with(FF, IE, Chrome) there's no problem running the code. However, there are some people in the office who get an FF or IE error (same versions as mine) on the URL as the SRC parameter. The error, in the FF Error Console, is this: Quote: illegal character http://www.google-analytics.com/ga.js ? ? ? ? --> question marks appear in console I can't figure it out since I can't create this error on any of my browsers. Could this be related to something like browser security settings or add-ons? So i keep getting this nan error. I googled the crap out of it but can't find anything that works. This part here works fine: Code: function calBolt()
{
boltQTY = document.getElementById("boltQTY").value;
boltCost=boltQTY * 2.1;
boltCost=boltCost.toFixed(2);
if (boltCost == 0)
{
document.getElementById("test").lastChild.nodeValue = "$0.00";
}
else
{
document.getElementById("test").lastChild.nodeValue = "$"+boltCost;
}
}
But when i try to use those variables in this function i keep getting an NAN error. Code: function total(boltCost,nutCost,washCost)
{
var total= 0;
total = parseFloat(boltCost)+parseFloat(nutCost)+parseFloat(washCost);
document.getElementById("content").lastChild.nodeValue= total;
}
At the moment i'm trying to use parsefloat to convert it. No luck. I'm thinking it's something really basic and obvious...i do that a lot. am working on a certain project , and there is a part were i have to upload a photo; when i run that part of the code am getting the following error message "The value for the useBean class attribute javazoom.upload.UploadBean is invalid" here is the part of the code <%@ page language="java" import="javazoom.upload.UploadBean*,java.util.*,java.io.*" %> <%@ page language="java" import="javazoom.upload.UploadBean*,java.util.*,java.io.*" %> <%@ page errorPage="ExceptionHandler.jsp" %> <jsp:useBean id="upBean" scope="page" class="javazoom.upload.UploadBean" > <jsp:setProperty name="upBean" property="folderstore" value="<%= directory %>" /> <jsp:setProperty name="upBean" property="parser" value="<%= MultipartFormDataRequest.CFUPARSER %>"/> <jsp:setProperty name="upBean" property="parsertmpdir" value="<%= tmpdirectory %>"/> <jsp:setProperty name="upBean" property="filesizelimit" value="8589934592"/> <jsp:setProperty name="upBean" property="overwrite" value="<%= allowoverwrite %>"/> <jsp:setProperty name="upBean" property="dump" value="true"/> </jsp:useBean> PLEASE HELP!!!!! Why is there a syntax error in this and how do i fix? Code: $(document).ready(function() {
$("#gogo").click(function() {
$("#replace").html("
<tr>
<td width='800' height='186' align='left' valign='top' class='end'>
<h1><a href='register.php'><br />
</a></h1>
<h1>About Chef Match</h1>
<p class='txt' id='more'>Chef Match is a revolutionary site which creates the link between staff and tempory work. Remember this site is not only aimed at chefs, but at anyone who works in a catering environment, waiters, bar staff and even kitchen porters.</p>
<p class='txt'> </p>
<p class='txt'>Chef Match is a revolutionary site which creates the link between staff and temporary work. Remember this site is not only aimed at chefs, but at anyone who works in a catering environment, waiters, bar staff and even kitchen porters.</p>
<p><span class='txt'>Chef Match is a revolutionary site which creates the link between staff and tempory work. Remember this site is not only aimed at chefs, but at anyone who works in a catering environment, waiters, bar staff and even kitchen porters.</span></p>
<p><span class='txt'>Chef Match is a revolutionary site which creates the link between staff and tempory work. Remember this site is not only aimed at chefs, but at anyone who works in a catering environment, waiters, bar staff and even kitchen porters.</span></p>
<p><span class='txt'>Chef Match is a revolutionary site which creates the link between staff and tempory work. Remember this site is not only aimed at chefs, but at anyone who works in a catering environment, waiters, bar staff and even kitchen porters.</span></p>
<p><span class='txt'>Chef Match is a revolutionary site which creates the link between staff and tempory work. Remember this site is not only aimed at chefs, but at anyone who works in a catering environment, waiters, bar staff and even kitchen porters.</span></p>
<p><span class='txt'>Chef Match is a revolutionary site which creates the link between staff and tempory work. Remember this site is not only aimed at chefs, but at anyone who works in a catering environment, waiters, bar staff and even kitchen porters.</span></p>
<p><span class='txt'>Chef Match is a revolutionary site which creates the link between staff and tempory work. Remember this site is not only aimed at chefs, but at anyone who works in a catering environment, waiters, bar staff and even kitchen porters.</span></p>
<p><span class='txt'>Chef Match is a revolutionary site which creates the link between staff and tempory work. Remember this site is not only aimed at chefs, but at anyone who works in a catering environment, waiters, bar staff and even kitchen porters.</span></p>
<p><span class='txt'>Chef Match is a revolutionary site which creates the link between staff and tempory work. Remember this site is not only aimed at chefs, but at anyone who works in a catering environment, waiters, bar staff and even kitchen porters.</span></p>
<p><span class='txt'>Chef Match is a revolutionary site which creates the link between staff and tempory work. Remember this site is not only aimed at chefs, but at anyone who works in a catering environment, waiters, bar staff and even kitchen porters.</span></p>
<p><span class='txt'>Chef Match is a revolutionary site which creates the link between staff and tempory work. Remember this site is not only aimed at chefs, but at anyone who works in a catering environment, waiters, bar staff and even kitchen porters.</span></p>
<p><span class='txt'>Chef Match is a revolutionary site which creates the link between staff and tempory work. Remember this site is not only aimed at chefs, but at anyone who works in a catering environment, waiters, bar staff and even kitchen porters.</span></p>
<p> </p></td>
</tr>
");
});
});
SOLUTION: I accidentally used <\ul> instead of </ul> ... IE actually threw a proper error, since \u escapes a unicode string (in hex) --- I have the following section of javascript: Code: jQuery.each($('.prodContent'), function(i, val) {
if(!($(this).is(":has(ul.tabs)"))) {
jQuery.each($(this).children('.panes:has(.tabdiv)'), function(i, val) {
var theList = "<ul class='tabs'>\n";
jQuery.each($(this).children('.tabdiv'), function(i, val) {
var theName = $(this).children('.noshow:first').text();
theList += " <li><a href='#'>"+theName+"</a></li>\n";
});
theList += "<\ul>\n";
$(this).before(theList);
});
}
In firefox and chrome, it takes a series of divs, containing headers, and adds a list of those headers before the series... so this: Code: <div> <h2>header1</h2> content </div> <div> <h2>header2</h2> content </div> becomes: Code: <ul> <li><a href="#">header1</a></li> <li><a href="#">header2</a></li> <div> <h2>header1</h2> content </div> <div> <h2>header2</h2> content </div> however, in IE, the error console claims an error on line 7, at the +=, saying that it expected a hexidecimal value... any ideas? p.s. you can see the issue live here http://bit.ly/oYrNAa (sorry bout the url shortener, but i don't want this topic to show up in a search for the site) Hello, can anyone tell me why I am getting a NaN error with this code? It works on the computer but when accessing from the Net I am getting NaN errors for total1 and total3? Thank you! showAnswers1() { var score1 = 5; var total1 = 0; for (var i=0;i<2;i++){ if (eval("document.s1.q" + i + "[0].checked") == true) total1 = total1 + score1 + 5; } for (var i=2;i<18;i++) { if (eval("document.s1.q" + i + "[0].checked") == true) total1 = total1 + score1; } document.cookie = total1; document.s1.yes1.value = total1; } function showAnswers2() { var total1 = document.cookie; var score2 = 5; var total2 = 0; var total3 = 0; for (var i=18;i<20;i++){ if (eval("document.s2.q" + i + "[0].checked") == true) total2 = total2 + score2 + 5; } for (var i=20;i<36;i++) { if (eval("document.s2.q" + i + "[0].checked") == true) total2 = total2 + score2; } total1 = total1 -0; total2 = total2 -0; total3 = total1 + total2; document.cookie = total3; document.s2.yes1.value = total1; document.s2.yes2.value = total2; document.s2.yes3.value = total3; } //--></SCRIPT> Hello I am getting an error message on a page that uses Javascript. The error is as follows: Code: Message: 'Class' is undefined Line: 1 Char: 1 Code: 0 URI: http://stevehigham59.7host.com/final...//imageMenu.js The first line in the JS file is: var ImageMenu = new Class({ How could I resolve this error, please? Thanks. Steve Hi guys! My first post here! I was encountering a rather confusing error using the webinterface of the DVBViewer Recording Service. Unfortunately the author of this software passed away more than a year ago, so nobody at the forum have the skills to solve this bug. The webinterface has a timeline view of a TV EPG. There are two buttons that navigates back and forth in EPG time. The upcoming DST change on sunday 26th October has revealed a bug. There is no way to navigate passed sunday with the button. Pressing repatedly on the button trying to get mondays EPG. sundays EPG reloads after each button press. Its stuck so to say. I therefor wonder if anyone in here would feel like helping out? The current Recording Service developer pinpointed the error here in the timeline.js: Code: Line 42:
var ONE_DAY = 24*60*60*1000;
Line 686:
/**
* increments or decrements the date in the datepicker by the given amount
*/
function moveDate(offset) {
var currDate = datefield.datepicker("getDate");
currDate.setTime(currDate.getTime() + offset * ONE_DAY);
var now = new Date().getTime();
if (currDate.getTime() + 2*ONE_DAY < now || currDate.getTime() - 31*ONE_DAY > now) {
return;
}
datefield.datepicker("setDate", currDate);
guiactionform.submit();
}
Line 1298:
$('#nextday').click(function() {
moveDate(+1);
});
Unfortunately the timeline.js is too large to post in code box so i try to append it as a file: timeline.zip Best regards majstang Hello I was hoping to use JS with a progress bar ( which I got from he Percentage Loader) but IE (Developer Tool F12) pops up and gives me two errors so I am unable to see the progress bar on screen. The errors a {exception} Object doesn't support property or method 'percentageLoader' Unable to get property 'pingInterval' of undefined or null reference The JS, which I have in my <head> tags, came with some CSS and HTML and two separate JS files: 1) jquery.percentageloader-0.1.js and 2) jquery.percentageloader-0.1.min.js I have referenced them as follows in my <head> tags: Code: <script src="src/jquery.percentageloader-0.1.js"></script>
<script src="src/jquery.percentageloader-0.1.min.js"></script>
and the JS itself in my <head> tags looks like this: Code: <script>
$(function () {
var $topLoader = $("#topLoader").percentageLoader({
width: 256, height: 256, controllable: true, progress: 0.5, onProgressUpdate: function (val) {
$topLoader.setValue(Math.round(val * 100.0));
}
});
var topLoaderRunning = false;
$("#animateButton").click(function () {
if (topLoaderRunning) {
return;
}
topLoaderRunning = true;
$topLoader.setProgress(0);
$topLoader.setValue('0kb');
var kb = 0;
var totalKb = 999;
var animateFunc = function () {
kb += 17;
$topLoader.setProgress(kb / totalKb);
$topLoader.setValue(kb.toString() + 'kb');
if (kb < totalKb) {
setTimeout(animateFunc, 25);
} else {
topLoaderRunning = false;
}
}
setTimeout(animateFunc, 25);
});
});
</script>
When I check it in Google Chrome and Safari the animation doesn't work, either. I don't know where the Developer Tool is on Safari, but Chrome's Developer Tool (F12) gives me a weird message under its Console tab (screenshot). How would I rectify this, please? Thank you. Attached Thumbnails |
|||||||