|
JavaScript - Need To Slow Down Javascript Slide
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. Similar TutorialsHeya 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? 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 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.
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 used the slideshow technique described here and was successful: http://www.javascriptkit.com/howto/show2.shtml But when I try to repeat the process to add additional images to the show, it doesn't work. It sticks to the three original images. Any tips as to how to add to this? thanks!! Hy every one, i need help .I have a program made in visual c++ witch detect motion and makes a file.jpg every time when detects something. I would like to make a web pages witch makes the autorefresh with the last image generated by this program. How do i do that with javascript? I think i must declare a golbal variable witch kepps the path to the most younger file, or to make a list witch keeps all the images and sort it ascended but i don't know how to make this in java script. Can enyone help me ?Thanks in advance hi all hope someone can help me out here. The code below i found online and it works well but I would like it to slide rather than jump into posistion. Anyone know how I can adapt this or have another way of doing it?? what i like about this script is that it wont allow you to go beyond the bounds of the content when pressing the forward and back links but the transition needs a nice slide!!!. Example of how it works here Link Code: <head>
<style>
#contents{ position: relative; top: 0; left: 0; width: 786px; height: auto;}
#scrollable{ overflow: hidden; width: 786px; height: 400px; border: 1px
solid black;}
</style>
<script>
var t = 0;
function myback()
{
t += 786;
with(document.getElementById("contents"))
{
if (t > 0)
t = 0;
if(style)
style.left = t + "px";
else
setAttribute("style", "left: " + t + "px");
}
}
function myforward()
{
t -= 786;
with(document.getElementById("contents"))
{
if(t < -clientWidth)
t = -clientWidth;
if(style)
style.left = t + "px";
else
setAttribute("style", "left: " + t + "px");
}
}
</script>
</head>
<body>
<table>
<tr>
<td rowspan="2">
<div id="scrollable"><div id="contents">
<table width="1572" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="776" valign="top" bgcolor="#FFFF99">Some text!!!</td>
<td width="776" valign="top" bgcolor="#66FFFF"> Some Text!!!</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
<a href="javascript:void(0)" onclick="myback()">back</a>
<a href="javascript:void(0)" onclick="myforward()">forward</a>
</body>
Hope this is clear. Thanks. I'm making an JS accordion and I just miss the final step. That is - say: I click menu 1, content 1 slides down (shows up). After that, I click menu 2, content 2 slides down but content 1 of menu 1 just display: none (abruptly disappers) but not slides up. For the slide up effect, I wrote a function called cutHeight(). The cutHeight function works perfectly independently but not coherent with the accordion function. Is there anything wrong with my scripts? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
function accordion(openAccordionID){
document.getElementById("content"+openAccordionID).style.display =
(document.getElementById("content"+openAccordionID).style.display == "none")
? "block" : "none" ;
var sumAccordion;
if(document.all){
sumAccordion = document.body.getElementsByTagName("div").length/2;
}
else {sumAccordion = document.getElementsByClassName("content").length;}
for(var closeAccordionID=1; closeAccordionID<=sumAccordion; closeAccordionID++){
if(closeAccordionID == openAccordionID){continue;}
document.getElementById("content"+closeAccordionID).style.display = "none";
}
addHeight(openAccordionID);
cutHeight(closeAccordionID);
}
var h=0;
var t;
function addHeight(openAccordionID){
clearInterval(t);
document.getElementById("content"+openAccordionID).style.height = h+"px";
h+=1;
t = setInterval("addHeight('"+openAccordionID+"')",10);
if(h==100){clearInterval(t);h=0;}
}
var T;
function cutHeight(closeAccordionID){
var h=100;
clearInterval(T);
document.getElementById("content"+closeAccordionID).style.height = h+"px";
h-=1;
T = setInterval("cutHeight('"+closeAccordionID+"')",10);
if(h==0){clearInterval(T);}
}
</script>
<style>
.menu {
background-color: #6F6;
width: 200px;
height: 50px;}
.content {
display: none;
background-color: yellow;
width: 200px;
height:0px;
overflow: hidden;}
</style>
</head>
<body>
<div onclick="accordion(1)" class="menu">Menu 1</div>
<div id="content1" class="content">Content 1</div>
<div onclick="accordion(2)" class="menu">Menu 2</div>
<div id="content2" class="content">Content 2</div>
<div onclick="accordion(3)" class="menu">Menu 3</div>
<div id="content3" class="content">Content 3</div>
</body>
</html>
Hi all, I'm having an issue with a slide out menu and would appreciate some assistance. I feel like its most likely an easy fix which has escaped me over the last couple of days. Basically, I'm using tabbed navigation panes in the center column of a 3-column CSS layout. I'm wanting to place a functional slide out menu in EACH tab. As of now, I have one working perfectly in the intial tab, but I'm unable to achieve the same functionality in the remaining tabs. I can get the content loaded, but it is completely expanded...losing the collapsing/slide out action(s). I have added code for the content to be loaded into the 2nd tab, but have left the rest blank. I figure if the issue for tab 2 is resolved, I can apply it to the rest of the tabs. I am 99% sure the issue resides in the slide-out-menu-new.js file, but I can't seem to figure out where the functionality is being lost. Please assist if you would like. It would be GREATLY appreciated...this is the last hurdle I have before adding real content to the site. Please find the zip file containing all associated code/files by visiting the link below (a quick page posted for storage purposes only). http://www.truckerslifeline.com/siteHelp Thanks! i want to create a slide show with javascript, but i don't know how to write a code, i have try full screen image slideshow in javascriptkit.com, but i don't know how to resize, not full screen because i want to insert another think, not only a slide show. how can i make an edit with full screen image slideshow coding?or is there someone can help me with the slide show in javascript, but with fadingtime, not an instant change?
Hi People, I've used the Concertina Menu from Stu Nicholls on one of my websites and am trying to get the Menu slider to slide up automatically after a certain time. Currently it only slides up on a mouseclick. The working link can be found at www.atomwhale.com/share/clients/branch/website/home.html Hope someone can help me in getting this to work. thanks, Jeriel. I have a background slide show from codelifter.com that normally runs in the body - I would like to use it as the background in a table cell. Thanks in advance for any help, Cyber-guys Here is the code: [CODE] <html> <head> <style> body{ background-repeat: no-repeat; background-position: 200 100;} </style> <script language="JavaScript"> <!-- // (C) 2006 CodeLifter.com var speed = 3000; var crossFadeDuration = 2; var Pic = new Array(); Pic[0] = 'slideshow1_1.jpg'; Pic[1] = 'slideshow1_2.jpg'; Pic[2] = 'slideshow1_3.jpg'; Pic[3] = 'slideshow1_4.jpg'; Pic[4] = 'slideshow1_5.jpg'; var t; var j = 0; var p = Pic.length; var preLoad = new Array(); for (i = 0; i < p; i++){ preLoad[i] = new Image(); preLoad[i].src = Pic[i];} function runSlideShow(){ if (document.all){ document.body.style.filter="blendTrans(duration=crossFadeDuration)"; document.body.filters.blendTrans.Apply(); document.body.filters.blendTrans.Play();} if (document.body){ document.body.background = Pic[j]; j = j + 1 if (j > (p-1)) j=0 t = setTimeout('runSlideShow()', speed)} } //--> </script> <title> CodeLifter.com :: Background Image Slideshow With Crossfade </title> </head> <body onload="runSlideShow()" bgcolor="#000000"> <table border="0" width="444" cellpadding="0" cellspacing="0"> <tr> <td> <font size="2" face="Verdana,Arial" color="#FFFFFF"> Lorem ipsum dolor situm amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer... </font> </td> </tr> </table> </body> </html> Hi, I'm a complete novice using javascript. I'm trying to get a mootools plugin to work with a slide in/slide out javascript using multiple divs. Here's the page: http://pawsdogs.com/test/Site/work2.htm The mootools code (Noobslide) slides a main image on the right when you click thumbnails on the left, which are wrapped in a thumb mask using CSS. The first row of thumbnails works perfectly, but when it's passed on to the next div the mask isn't passed on and the effect breaks down. Thanks so much if anyone can help! Here's the html: Code: <li><a href="#" id="slidecontrol_2" class="slidecontrol">Click Here</a>
<div id="slidedisplay_2" style="display:none;">
<div id="thumbs7">
<div class="thumbs">
<div><img src="images2/img4.jpg" alt="Photo Thumb" /></div>
<div><img src="images2/img5.jpg" alt="Photo Thumb" /></div>
<div><img src="images2/img6.jpg" alt="Photo Thumb" /></div>
</div>
<div id="thumbs_mask7"></div>
<p id="thumbs_handles7">
<span></span>
<span></span>
<span></span>
</p>
</div>
</div></li>
<li><a href="#" id="slidecontrol_3" class="slidecontrol">asdf</a>
<div id="slidedisplay_3" style="display:none;">
<div id="thumbs7">
<div class="thumbs">
<div><img src="images2/img2.jpg" alt="Photo Thumb" /></div>
<div><img src="images2/img3.jpg" alt="Photo Thumb" /></div>
</div>
<div id="thumbs_mask7"></div>
<p id="thumbs_handles7">
<span></span>
<span></span>
</p>
</div>
</div>
The javascript: Code: $(document).ready(function () {
$('a.slidecontrol').click(function(){
var $this = $(this);
var divID = $this.attr("id").replace("slidecontrol_", "slidedisplay_");
var $div = $('#'+divID);
if ($div.is(':visible')) {
$div.slideUp(500);
} else {
$div.slideDown(500);
}
return false;
});
});
The CSS: Code: #thumbs7{
position:relative;
width:200px;
clear:both;
height:41px;
overflow:hidden;
}
#thumbs7 .thumbs, #thumbs_handles7, #thumbs_mask7{
position:absolute;
top:0;
width:100%;
height:41px;
}
#thumbs7 .thumbs div, #thumbs_handles7 span{
display:block;
width:60px;
height:41px;
margin:0;
float:left;
cursor:pointer;
}
#thumbs7 .thumbs div img{
width:54px;
float:right;
}
#thumbs_handles7 span{
background:url(../images2/thumb_invisible.gif) no-repeat;
}
#thumbs_mask7{
width:1200px;
background:url(../images2/thumbs_mask.gif) no-repeat center top;
}
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 );
});
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. 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>
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. 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';
}
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 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 |
|||||||