|
JavaScript - Site Slow In Ie7 - Advice?
Hey All,
I've got the following site that loads great in FF and Chrome (no surprise), but is terribly slow in IE7. It's even quick in IE6, but not 7. Here's the site: http://www.hanshawengines.com/ Now I'm using JQuery in a couple places, but it's by no means nothing crazy. The page is fairly simple. I thought of preloading the main content images, but even after they are loaded in the cycle, the loading time is still slow. Any suggestions on how I could improve this would be greatly appreciated. Thanks. Similar TutorialsHello Experts, I did a website & I am having trouble wit it. In IE8, FF& Chrome, the site works perfectly. But in IE7, the site slows down very much that even the link hover effect doesn't show properly. I believe its some kind of javascript or Ajax request which is causing such delay. Can you guys please help me sort this out.... Here is the site with functionality... http://tinyurl.com/3qkunvy Here is the site without functionality but just the gallery is integrated... http://tinyurl.com/439ejhk The speed was even better before the Ajax is applied for contents. Any solutions/fixes please... I'm trying to slow this image rotator down. I thought I would just change the setInterval part. But it's not working. Quote: $(function() { setInterval( "nextPage()", 7000 ); }); Below is the full script. Am I missing something? Code: // Global variable that controls billboard image rotation
var $rotate = 1;
// Load this script when page loads
$(document).ready(function(){
// Set up a listener so that when anything with a class of 'bbtab'
// is clicked, this function is run.
$('.bbtab').click(function () {
// Turn off autorotation.
$rotate = 0;
// Remove the 'bboard_page_active' class from the visible tab contents.
$('#bboard > ul > li.bboard_page_active').removeClass('bboard_page_active');
// Add the 'bboard_page_active' class to the associated tab contents.
$(this.rel).addClass('bboard_page_active');
return false; //stop the links default action
});
});
function nextPage() {
// id is expected to look like 'bbpage1'.
// We just need the number part at the end so that we can figure out which page is next in the rotation.
var $active_page = $('#bboard > ul > li.bboard_page_active').attr('id') || 'bbpage0';
var $next_page = parseInt($active_page.substring(6)) + 1;
if ($next_page > $('#bboard > ul > li').length) { $next_page = 1; }
if ($rotate == 1) {
// Remove the 'bboard_page_active' class from the active page.
$('#'+$active_page).removeClass('bboard_page_active');
// Add the 'bboard_page_active' class to the next page.
$('#bbpage'+$next_page).addClass('bboard_page_active');
// alert("Active page is " + $active_page + " of " + $total_pages + " and next is " + $next_page);
}
}
$(function() {
setInterval( "nextPage()", 7000 );
});
Heya guys. My gallery javascript is running very laggy in IE8. Here's an example: www.amex-trading.dk/pizzaovne.php It works fine in chrome, but it's slow when using IE. Any suggestions? hi guys I am looking at this template: http://www.csstemplatesfree.org/prev...ero/index.html I think the sliding at the top happens way too frequently. How can I slow it down? I think it would be better if the slides change once every 6 seconds. Hello guys, The title says it all, my javascript hover menu is running perfect in chrome, but really slow in IE. Take a look here - the menu is called "Produkter" Thanks in regard Hi, I am writing a basic app for a client where the customer puts in their order ID and phone number and press submit. When testing it on my PC it worked flawlessly. When I tested on a desktop PC where the screen was a touch screen as well as on Android devices, it seems the browser is a bit slow to respond. If you press each number slowly (waiting 0.5 second per press) it works fine. However if use it normal to fast then the browser does not catch every button press. Any and all advice is appreciated to heklp make this work. Code: <title>DLUX Order alert system</title>
<head>
<center><font color="blue"><b>DLUX Order alert system</b></font></center></br></br>
<body onload="empty_to_do();">
<script type="text/javascript">
function addOrderID(key){
var order_id = document.forms[0].order_id;
order_id.value = order_id.value + key;
}
function setToDo(key){
var to_do = document.forms[0].to_do;
to_do.value = key;
setTimeout(submitForm,100);
}
function addPhoneNumber(key){
var phone_number = document.forms[0].phone_number;
var phone_number_real = document.forms[0].phone_number_real;
phone_number.value = phone_number.value + key;
phone_number_real.value = phone_number_real.value + key;
phone_number_real.value = phone_number_real.value.substr(0,10);
if(phone_number_real.value.length <1){
phone_number.value = '';
}
if(phone_number_real.value.length >0 && phone_number_real.value.length < 3){
phone_number.value = '(' + phone_number_real.value.substr(0,3) ;
}
if(phone_number_real.value.length >2 && phone_number_real.value.length < 6){
phone_number.value = '(' + phone_number_real.value.substr(0,3) + ') ' + phone_number_real.value.substr(3,3);
}
if(phone_number_real.value.length > 5){
phone_number.value = '(' + phone_number_real.value.substr(0,3) + ') ' + phone_number_real.value.substr(3,3) + '-' + phone_number_real.value.substr(6,4);
}
}
function delOrderID(key){
var order_id = document.forms[0].order_id;
order_id.value = order_id.value.substring(0, order_id.value.length - 1);
}
function delPhoneNumber(key){
var phone_number = document.forms[0].phone_number;
var phone_number_real = document.forms[0].phone_number_real;
phone_number_real.value = phone_number_real.value.substring(0, phone_number_real.value.length - 1);
if(phone_number_real.value.length <1){
phone_number.value = '';
}
if(phone_number_real.value.length >0 && phone_number_real.value.length < 3){
phone_number.value = '(' + phone_number_real.value.substr(0,3) ;
}
if(phone_number_real.value.length >2 && phone_number_real.value.length < 6){
phone_number.value = '(' + phone_number_real.value.substr(0,3) + ') ' + phone_number_real.value.substr(3,3);
}
if(phone_number_real.value.length > 5){
phone_number.value = '(' + phone_number_real.value.substr(0,3) + ') ' + phone_number_real.value.substr(3,3) + '-' + phone_number_real.value.substr(6,4);
}
}
function resetOrderID(key){
var order_id = document.forms[0].order_id;
order_id.value = '';
}
function resetPhoneNumber(key){
var phone_number = document.forms[0].phone_number;
var phone_number_real = document.forms[0].phone_number_real;
phone_number.value = '';
phone_number_real.value = '';
}
function submitForm(){
document.forms[0].submit();
}
function emptyCode(){
document.forms[0].order_id.value = "";
document.forms[0].to_do.value = "";
document.forms[0].phone_number.value = "";
document.forms[0].phone_number_real.value = "";
}
function empty_to_do(){
document.forms[0].to_do.value = "";
}
function empty_order_id(){
document.forms[0].order_id.value = "";
}
function empty_phone_number(){
document.forms[0].phone_number.value = "";
document.forms[0].phone_number_real.value = "";
}
</script>
<style>
body {
text-align:center;
background-color:#D3D3D3;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
#keypad {margin:auto; margin-top:20px;}
#keypad tr td {
vertical-align:middle;
text-align:center;
border:1px solid #000000;
font-size:18px;
font-weight:bold;
width:180px;
height:160px;
cursor:pointer;
background-color:#666666;
color:#CCCCCC
}
#keypad tr td:hover {background-color:#999999; color:#FFFF00;}
.display {
width:130px;
margin:10px auto auto auto;
background-color:#000000;
color:#00FF00;
font-size:18px;
border:1px solid #999999;
}
#message {
text-align:center;
color:#009900;
font-size:14px;
font-weight:bold;
display:none;
}
#submit {
width: 10em;
height: 5em;
}
</style>
<form action="" method="post">
<font color="red"><b>Order ID: </b></font> <input type="text" name="order_id" value="9" maxlength="10" class="display"/>
<table id="DOVID_keypad" cellpadding="15" cellspacing="5">
<tr>
<td><input type="button" style="width:75;height:75" value="1" onclick="addOrderID('1');"></td>
<td><input type="button" style="width:75;height:75" value="2" onclick="addOrderID('2');"></td>
<td><input type="button" style="width:75;height:75" value="3" onclick="addOrderID('3');"></td>
</tr>
<tr>
<td><input type="button" style="width:75;height:75" value="4" onclick="addOrderID('4');"></td>
<td><input type="button" style="width:75;height:75" value="5" onclick="addOrderID('5');"></td>
<td><input type="button" style="width:75;height:75" value="6" onclick="addOrderID('6');"></td>
</tr>
<tr>
<td><input type="button" style="width:75;height:75" value="7" onclick="addOrderID('7');"></td>
<td><input type="button" style="width:75;height:75" value="8" onclick="addOrderID('8');"></td>
<td><input type="button" style="width:75;height:75" value="9" onclick="addOrderID('9');"></td>
</tr>
<tr>
<td><input type="button" style="width:75;height:75" value="RESET" onclick="resetOrderID('');"></td>
<td><input type="button" style="width:75;height:75" value="0" onclick="addOrderID('0');"></td>
<td><input type="button" style="width:75;height:75" value="BACK" onclick="delOrderID('');"></td>
</tr>
</table>
<br/>
<font color="red"><b>Phone Number: </b></font> <input type="text" name="phone_number" value="" maxlength="15" class="display"/><input type="hidden" name="phone_number_real" value="" maxlength="10" class="display"/></tr>
<table id="keypad" cellpadding="5" cellspacing="3">
<tr>
<td onclick="addPhoneNumber('1');">1</td>
<td onclick="addPhoneNumber('2');">2</td>
<td onclick="addPhoneNumber('3');">3</td>
</tr>
<tr>
<td onclick="addPhoneNumber('4');">4</td>
<td onclick="addPhoneNumber('5');">5</td>
<td onclick="addPhoneNumber('6');">6</td>
</tr>
<tr>
<td onclick="addPhoneNumber('7');">7</td>
<td onclick="addPhoneNumber('8');">8</td>
<td onclick="addPhoneNumber('9');">9</td>
</tr>
<tr>
<td onclick="resetPhoneNumber('');">RESET</td>
<td onclick="addPhoneNumber('0');">0</td>
<td onclick="delPhoneNumber('');">Back</br>Space</td>
</tr>
</table>
<br>
<table id="keypad" cellpadding="10" cellspacing="3">
<td onclick="setToDo('submit');">Submit</td>
</table>
<input type="hidden" name="to_do" value="" maxlength="100" readonly="readonly" /></tr>
</form>
</html>
Hi. I am using a mouseover dropdown menu within a rather large table. The script is only 1.6kb so I don't understand why it is going so slow. Mind you this effect is instant in Firefox, Chrome, Safari, Opera. However, in IE 7 it takes about 3-4 seconds. Any advice on how to get this time down in IE 7? Here is a quick sample of the code.
Code: var DDSPEED = 10;
var DDTIMER = 15;
// main function to handle the mouse events //
function ddMenu(id,d){
var h = document.getElementById(id + '-ddheader');
var c = document.getElementById(id + '-ddcontent');
clearInterval(c.timer);
if(d == 1){
clearTimeout(h.timer);
if(c.maxh && c.maxh <= c.offsetHeight){return}
else if(!c.maxh){
c.style.display = 'block';
c.style.height = 'auto';
c.maxh = c.offsetHeight;
c.style.height = '0px';
}
c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
}else{
h.timer = setTimeout(function(){ddCollapse(c)},50);
}
}
// collapse the menu //
function ddCollapse(c){
c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
}
// cancel the collapse if a user rolls over the dropdown //
function cancelHide(id){
var h = document.getElementById(id + '-ddheader');
var c = document.getElementById(id + '-ddcontent');
clearTimeout(h.timer);
clearInterval(c.timer);
if(c.offsetHeight < c.maxh){
c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
}
}
// incrementally expand/contract the dropdown and change the opacity //
function ddSlide(c,d){
var currh = c.offsetHeight;
var dist;
if(d == 1){
dist = (Math.round((c.maxh - currh) / DDSPEED));
}else{
dist = (Math.round(currh / DDSPEED));
}
if(dist <= 1 && d == 1){
dist = 1;
}
c.style.height = currh + (dist * d) + 'px';
c.style.opacity = currh / c.maxh;
c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
if((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)){
clearInterval(c.timer);
}
}
further reference: http://problemcorrected.com I am working on a demo for a movie site, and 90% of everything seems cool. Here I am doing php.flushes, .htaccess caching and using PNGs to help with performance. I might start using another sub site to grab all the scripting from to increase performance, but it seems a tad bit slow at the moment. - There are a few issues one being when you click on X-Men and look at the gallery the images seem to flicker sometimes going from image to image. I am using a fade script I found and then using setTimeout() to give the fade script time to do its thing then call for a new image. Code: FadeOpacity(main_img_id, 100, 0, 600, 12);
setTimeout("updateGallery('"+target_arr+"','"+main_img_id+"')", 600);
- Also in the same area I am checking clientHeight after each image modifying the marginTop. The thing with that is the clientHeight only seems to update after the second function call. I tried using a setTimeout() but that didn't nothing. Code: document.getElementById(main_img_id).src = "assets/movie_images/"+arr[i]; img_height = document.getElementById(main_img_id).clientHeight; Any suggestions with improving image load performance, the clientHeight issue or the image flickering issue would be appreciated. I heard that when we put javascript in website, then site takes time to open, is it correct ? If yes then which script is good for website.
I pretty sure just looking at this that there must be a simpler way of executing this. I have a number of objects (always varies) coming into the div tag #apply_row and has the class .rotate_color and .highlight Code: <div id="apply_row" class="rotate_color highlight"> milk </div> <div id="apply_row" class="rotate_color highlight"> coffee </div> <div id="apply_row" class="rotate_color highlight"> cheese </div> And I have the javascript written to give a different color for dd and :even and to add a highlight color when user puts the mouse over. Code:
$(document).ready(function()
{
//alternate div colors
$("div.rotate_color:odd").css("background-color", "#FFFFFF");
$("div.rotate_color:even").css("background-color", "#F9F5E8");
//highlight and return back to original color on mouseout
$("div.highlight").mouseover(function(){
$(this).css("background-color", "#F6E9D0");
$("div.highlight").mouseout(function(){
//clear background color to none
$(this).css("background-color", "");
//change back to original
$("div.rotate_color:odd").css("background-color", "#FFFFFF");
$("div.rotate_color:even").css("background-color", "#F9F5E8");
});
});
});
This does seem a bit excessive, but it does work except that it is *really slow to make the css changes. I couldn't really get .hover to work either with changing the background back to the original. The way the site is set up right now, it would be best to leave the background-color for these particular ID's and Classes out of the CSS file itelf (blah, too long to explain why). Any suggestions??? Thanks, Daniel Hi. I'm using a tooltip javascript from this website: http://sixrevisions.com/tutorials/ja...cript_tooltip/ This is what it looks like when it's working smoothly: http://sandbox.leigeber.com/tooltip/ To fix scrolling issues, I changed (near the lower bottom, under "pos:function(e)"): var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY; to: var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX; I'm using these tooltips for an image map that has 1,000 defined areas. In Firefox, everything works very smoothly. Everything works well and looks smooth/visually pleasing. But in IE, the tooltips are "choppy" and "staticy". They work well when I continuously move my mouse over the image map without stopping. But when I completely stop the cursor on a part of the image map for about 1 full second, and then move my mouse, the tooltip stays where it is even though the mouse has moved. It then takes between 1 - 2 seconds for the tooltip to "catch up" and move to be next to the mouse/cursor - where it is supposed to be. Also, I must note that when I only have a few (like 3 or 4) defined areas for the image map, the tooltip works perfectly fine and smoothly in IE. I'm very new to html and javascript, and so I'm finding myself at a bit of a loss as to why this is occuring. Can anyone offer any help as to how I can make this tooltip go smoothly between defined areas (not sure if that's the correct terminology) of the image map? I'm new to javascript, and so, unsure of which parts could be causing the problems. However, I think it might have to do with the part from pos:function(e) on. If needs be, I'd be happy to post the full javascript code. Code: pos:function(e){
var u = ie ? event.clientY + document.getElementById('bodyid').scrollTop : e.pageY;
var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
tt.style.top = (u - h) + 'px';
tt.style.left = (l + left) + 'px';
}
The left-hand (main) menu for my website (www.displaycentre.co.uk) is extremely slow on IE8 on some PCs yet fine on others. No problems with other browsers at all. I know that the menu is huge but cannot understand why the speed is fine on some (even low spec) PCs and yet it is painfully slow on others. It is slow on all of my work PCs (some with 512Mb RAM others have 2GB!) and also my PC at home (which is brand new this weekend, 2Gb RAM and only Windows XP + all updates loaded so far). Any body out there got any ideas? My developer is simply putting it down to the way in which IE8 copes with such huge menus? Thanks in anticipation. Chris I have a slow loading external JavaScript that displays a calendar widget. When I put it in my sidebar, while the page loads, it cuts off where the calendar should be until the JavaScript for it finishes. How can I make the script load after the page finishes loading? I tried creating a function at the end of the HTML and calling the function in the sidebar, but I think because the function was being called before the script was executed, it didn't work. I appreciate any and all help! So I am trying to create a scrolling device that will allow you to scroll tables left and right. Here is a link: http://thecaligarmo.com/test/work/move.html I have it working and it works pretty well, but I can't seem to get it to speed up. I want to be able to control the amount of time it takes, but I can't seem to make it take less than 10 seconds. The core of the moving js is: Code: var maxMove = 820;// Width of Table + margin on table 2
var duration = 1; // seconds
var mssTime = duration * 1000 / maxMove;
var mssLeft = (moveLeft)?0:(maxMove*-1);
function mssMoveDiv(){
moveDiv();
function moveDiv(){
if(mssLeft > 0 || mssLeft<maxMove*-1){finishMove(); return;};
if(moveLeft){mssLeft -= 1;} else {mssLeft += 1;}
divIn.style.left=mssLeft+'px';
setTimeout(moveDiv,mssTime);
}
function finishMove(){
document.getElementById('pagingTable').parentNode.removeChild(document.getElementById('pagingTable'));
divIn.style.left='0px'
newTable.id='pagingTable';
}
}
(Note that some parts have been left out [such as table generation and stuff] but all details can be found on the site link posted above) If you need more details/js/css/html just go to the link above to look at the whole thing. It was a lot so I didn't want to burden you all with EVERYTHING. Here are the links to the files: HTML: http://thecaligarmo.com/test/work/move.html JS: http://thecaligarmo.com/test/work/paging.js CSS: http://thecaligarmo.com/test/work/paging.css OK, so I've written a small timer at http://zeroerror.co.uk/public/cubetimer.php for general purpose timing. My first is that I cannot find a way to accurately time with the format 00:00.00, as the milliseconds seem to run too slowly. My second is that when the font size is set to a large size (for example, 200px or 300px) the timer runs even more slowly (just over half the speed it should). Is there any way to optimise the timer so it runs at a more accurate speed, or is this just a problem with my browser parsing the Javascript in time? Here's the code: Code: function timeIt()
{
init = 1;
if (countMsL == 9)
{
countMsL = 0;
if (countMsU == 9)
{
countMsU = 0;
if (countSecs == 59)
{
countSecs = 0;
countMins++;
}
else
{
countSecs++
}
}
else
{
countMsU++;
}
}
else
{
countMsL++;
}
displayMsL = countMsL;
displayMsU = countMsU;
if (countSecs < 10)
{
displaySecs = '0' + countSecs;
}
else
{
displaySecs = countSecs;
}
if (countMins < 10)
{
displayMins = '0' + countMins;
}
else
{
displayMins = countMins;
}
readout = displayMins + ':' + displaySecs + '.' + displayMsU + displayMsL;
timerDisplay.innerHTML = readout;
timerActual = setTimeout('timeIt()', 10);
}
Thanks in advance! Hi guys, any help will be greatly appreciated... The problem: Hover effect is painfully slow IE (only IE) and table mouseover causes very high processor usage When you move the mouse over table elements flash animation stutters/pauses (making flash banners impossible) You can se the page he fondovi (there's a flash animation on the right side of the page (light grey/blue color)) Hello everyone! Im new here so any help you can give would be great. I am a Designer, and some time AS3 programer. Teaching my self Javascript for a portfolio website. The Goal: I created a code that randomly creates and Populates Divs in a regular grid, then populates them with an image (using css backgroundImage property) or a print CMY(and Green) color. (eventually will include a shadow box and side scroller) The Problem: The creation and population works just fine, the first time around. if I "Refresh" the page (which i thought destroyed all vars and data) the page loads some times, or freezes. Some times it doesn't load at all! so its very unpredictable, obviously i need this to work the same way every time. Im pretty sure its something simple that i missed, a nuance of javascript or something. So if any one who is more experienced can help I would be super grateful!! here is the page on my website: designchangeseverything.com/beta/divpoptest.html here is the code (i included some of my comments so you can see how i was trying to debug): Code:
<SCRIPT LANGUAGE="JavaScript">
var Tborder = .05
var howmanyIMG = 15
var winHeight = Math.floor(window.innerHeight);
var winWidth = Math.floor(window.innerWidth);
var BoxHeight = Math.floor((winHeight * (1-Tborder)) / 3);
var BoxWidth = BoxHeight;
var howmanyx = Math.floor(winWidth / BoxWidth) + 1;
var howmanyy = 3;
var HowMany = howmanyx * howmanyy;
var used = new Array(howmanyIMG);
var CMYG = ["00AEEF","EC008C","FFF200","41AD49"]
function RNDy(numby){
return Math.floor(Math.random()*numby);
}
function getUniq(){
/* alert("run getuniq");*/
var n;
while ( used[ n = RNDy(howmanyIMG) ] ){}
used[ n ] = true;
return n;
}
function ColorRND() {
if (RNDy(4) ==1) {
return true;
}else{
return false;
}
}
function PlacePop (HMx,HMy){
var counter = 0;
var countc = 0;
for(x=0;x<=HMx;x++){
var countr = 0;
for(y=0;y<HMy;y++){
var divy = document.createElement("div");
var divyID = 'box' + counter;
divy.setAttribute('id', divyID)
divy.style.position="absolute";
divy.style.zIndex = counter + 3;
divy.style.visibility = 'visible';
divy.style.borderWidth = '1';
divy.style.borderColor = '#000000';
divy.style.pixelLeft= x * BoxWidth + (2 * countc);
divy.style.pixelTop= y * BoxHeight + (winHeight * Tborder) + (2 * countr);
divy.style.pixelWidth= BoxWidth;
divy.style.pixelHeight= BoxHeight;
if (ColorRND()){
/*divy.innerHTML = 'color';*/
divy.style.backgroundColor = "#" + CMYG[RNDy(4)];
}else{
/*divy.innerHTML = 'image';*/
divy.style.backgroundImage = "url(resourses/images/portfolio/" + getUniq() + ".png)";
divy.style.backgroundPosition = "center";
/*RNDy(100) + "% " + RNDy(100) + "%";*/
}
document.body.appendChild(divy);
counter++;
countr++;
}countc++;
}
/*
alert("ran" + counter + " times");*/
}
/* used = null;*/
</script>
THANKS FOR ANY HELP YOU CAN GIVE! I am trying to work out how to use Google Chrome DevTools to simulate a timeout on a JavaScript file on my site. I can use the 'Toggle Device Mode' to introduce throttling but that doesn't target a specific script. Is there a way to do this with DevTools? I am using Chrome 38. I'l not good in Javascript and I can't find anything about what I want.. . On a sports website there is a table with our ranking and results. On this site the content is changed weekly, but it stays in the same tables.. . Is it possible to make a javascript to get those tables and put them on my own website so the content will change on my site when the content is changed on the sports site? Please help me, it would save me lot of time.. . THx I currently have php site with a system of loading up 5 iframes on a page that target part of another website with recaptcha's so all 5 iframes auto scroll to the recaptcha box's. Now, my question is, is there any way to have it auto select the next iframe ready to type into the recaptcha box? Like, i have a list of 5 iframes & in iframe1 i type in the recaptcha words & press enter, then i want it to auto jump to the next iframe ready to type without having to click the text area box, is this possible & how? |
|||||||