|
JavaScript - Hover Effect / Mouseover Table - Painfully Slow In Ie
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)) Similar TutorialsHi everyone, i am looking for a tutorial or example file i can download that features the following mouseover effect: http://www.webdesignerwall.com/demo/...ed-hover2.html i have tried googling for tutorials and have tried to view source on the above page but when pasted into dreamweaver i cannot seem to get the effect to work. can anyone help??? thanks! 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 There is an effect I would like to do but I don't know how it is done. To see something like it go to: http://www.schillmania.com/ then mouseover the right side items under "most recently". It seems like there is a dt link which when mouseover occurs the dd data is presented. Any ideas on how it is done? I got this javascript Click sound effect to work - http://www.javascriptkit.com/script/...oundlink.shtml My question is how do I make it work on my iphone4 ? I tested the above site on my phone and there is no audio when I tap the screen. The html5 <audio> seems to work with my mobile device on this site - http://css-tricks.com/examples/SoundOnHover/ I am new to javascript thx Hi people ! I went to this page: http://www.javascriptkit.com/script/....shtml#current and I applied that script to my website, everything work perfectly. I only have a question about it: * What should I add to the code to avoid the sound activate even when I'm hovering over the margin of the image? * Would it be possible that the sound activate only when the mouse is hovered over the image and not the margin as well ? * Is the only solution; to insert every image in their own div and then letting the div handle the margin? this is the site www.blackbandanamovement.com the images I'm talking about are in the footer. thanks in advance Quick question, I need to get the hover effect that Templatemonster has, for example click here and hover over a template image see how you get that larger pop-up image that disappears instantly after you remove you mouse from the template thumbnail image. How would I get that effect? Thanks!!! Help, I have a navigation menu that has a flyin effect for each item using Javascript. Right now, The Javascript flys in a picture (in the same location) no matter what item you hover over. How can I get it to fly into a different position for each item. Here is my code: 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" xml:lang="en" lang="en">
<head>
<title>hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script src="hoverIntent.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#nav a").append("<em></em>");
$("#nav a").hoverIntent(function () {
$(this).find("em").animate({ opacity: "show", top: "-34" }, "fast");
var hoverText = $(this).attr("title");
$(this).find("em").text(hoverText);
}, function () {
$(this).find("em").animate({ opacity: "hide", top: "-43" }, "fast");
});
});
</script>
<style type="text/css">
body {
margin: 0px;
}
#nav
{
border-top: 2px solid #000;
border-bottom:2px solid #000;
width: 100%;
height: 36px;
line-height: 36px;
float: left;
background:url("images/OFF2.gif") repeat-x top left;
}
#nav ul {
list-style: none;
width: 900px;
margin: 0 auto;
padding: 0;
position:relative;
}
#nav li {
float: left;
}
#nav li em {
background: url(images/home.png) no-repeat;
width: 180px;
height: 45px;
position: absolute;
top: -43px;
left: 0px;
padding: 20px 12px 10px;
z-index: 1;
display: none;
}
#nav li a {
font-family:"Georgia", "Sans-Serif";
display: inline-block;
text-decoration: none;
font-size:medium;
padding: 0px 5px;
text-align:center;
color: #000;
width:110px;
height: 36px;
line-height: 36px;
background:transparent url("images/off.gif") no-repeat top right;
}
#nav li a:hover {
font-family:"Georgia", "Sans-Serif";
display: inline-block;
text-decoration: none;
font-weight:bold;
font-size:medium;
padding: 0px 5px;
width:110px;
height: 36px;
line-height: 36px;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
<li><a href="#">Item4</a></li>
</ul>
</div>
</body>
</html>
Thank you! Hi all, I am using the following script posted on this site: http://www.javascriptkit.com/script/...oundlink.shtml It works great, but I want to extend this script and mute the sound using a checkbox. This checkbox has the id: sound. If checked, I want to hear the sounds, when unchecked, no sounds should be heard. This is the code I currently have for the checkbox: Code: function playSound() {
if (document.getElementById('sound').checked){
-something needs to be added here to make it work?-
}
}
Anyone have an idea how to make this work? Many thanks ok I have this image and i want the image to change upon the mouse hovering over it. Which in it self is simple to do and I Google numerous different ways on how to do it. But each one i would be forced to use a <a href... in it. The thing is I don't want to use it cause i am already using HTML image map. I really need help on finding the code that would work... This is what I have Code: <html> <head> </head> <body> <p align="center"><img src="room.bmp" border="1" usemap="#maps" alt="Green room" /></p> <map name="maps"> <area shape="rect" coords="25,210,100,300" href="greenroom.html#energy" > <area shape="rect" coords="130,215,185,277" href="greenroom.html#water"> <area shape="rect" coords="80,11,263,149" href="greenroom.html#tv"> </map> ............. Hi everyone, Im new to the whole website thing as a whole but my mate got me onto joomla which has been great and iv got a site up im almost happy with and have learnt quite alot about coding etc. My problem is: Im utilising a vertical menu, just simple text as links, i want to add an effect on hover and clicking on that makes the text slide elegantly to the right about 16pixels. I have another unpublished template that iv bought (that doesnt quite work at all, module position all messed up etc) but it does this hover effect perfectly on the menu. So i have the .js file from that template and iv read some tutorials on how to add a js file to my template but its just not doing anything. Is it a good idea to try to add this file from a different template to my template or is there a easier way to do this (what i think is a) simple effect. Thanks. ps i can post the js code if wanted Hi all, Just a quick question please, i'm a javascript & jquery newbie and need a little advice to what is probably an easy problem to fix. I'm trying to get this jquery product rotator to work. It advances automatically every 5 seconds with the following code: (there's 8 buttons below and above the main content window, clicking a button swaps the divs in the content window) $(document).ready(function(){ $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs ("rotate", 5000, true); }); All i need it to do is to advance automatically as above but also advance the slider when a user hovers/mouse over a button, so the relevant content is displayed in the main window. The code to the whole slider is below, minus the CSS. A demo of the slider is he http://demo.webdeveloperplus.com/fea...ontent-slider/ Many thanks. <!-- Links to Jquery. Do not touch --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script> <div> <!-- This Week's Offer Product Viewer Code Starts Here --> <script> $(document).ready(function(){ $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs ("rotate", 5000, true); }); </script> <center> <div id="featured" > <ul class="ui-tabs-nav"> <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="/homepage/button1.jpg" width="187" height="125" alt="" /></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="/homepage/button2.jpg" width="187" height="125" alt="" /></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="/homepage/button3.jpg" width="187" height="125" alt="" /></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="/homepage/button4.jpg" width="187" height="125" alt="" /></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-5"><a href="#fragment-5"><img src="/homepage/button5.jpg" width="187" height="125" alt="" /></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-6"><a href="#fragment-6"><img src="/homepage/button6.jpg" width="187" height="125" alt="" /></a></li> <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-7"><a href="#fragment-1"><img src="/homepage/button7.jpg" width="187" height="125" alt="" /></a></li> <li class="ui-tabs-nav-item" id="nav-fragment-8"><a href="#fragment-8"><img src="/homepage/button8.jpg" width="187" height="125" alt="" /></a></li> </ul> <!-- First Content --> <div id="fragment-1" class="ui-tabs-panel" style=""> <img src="/homepage/trade-deals.jpg" width="760" height="500" alt="" /> </div> <!-- Second Content --> <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="/about-us-main.gif" width="760" height="500" alt="" /> </div> <!-- Third Content --> <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="/homepage/button3.jpg" width="760" height="500" alt="" /> <div class="info" > <center><h2>Content </h2></center> </div> </div> <!-- Fourth Content --> <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="/homepage/button4.jpg" width="760" height="500" alt="" /> </div> <!-- Fifth Content --> <div id="fragment-5" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="/homepage/trade-deals.jpg" width="760" height="500" alt="" /> </div> <!-- Sixth Content --> <div id="fragment-6" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="/homepage/button6.jpg" alt="" width="760" height="500" /> </div> <!-- Seventh Content --> <div id="fragment-7" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="/homepage/button7.jpg" alt="" width="760" height="500" /> </div> <!-- Third Content --> <div id="fragment-8" class="ui-tabs-panel ui-tabs-hide" style=""> <img src="/homepage/button8.jpg" alt="" width="760" height="500" /> </div> </div> I have gotten my script to do exactly what I want it to do with one exception. I have some thumbnail images that people can mouse over and the actual image is 100px by 75px. That is what I use for my thumbnail and they reside in www.website.com/images/thumbs/image1.jpg. I have the large version of the image that resides in www.website.com/images/image1.jpg. Its actual size is 640px by 480. When I mouse over my thumbnail, I don't want the thumbnail to appear for the larger image, I want the large image to appear instead? Let me know if you need ellaboration. Any help would be great! Thank you. Javascript Code: <script language="JavaScript">
function Change_Big_One(thumb){
document.getElementById('BigOne').src=thumb.src.replace("_th","")
}
</script>
HTML THUMBNAIL Code: <div><img src="https://www.website.com/images/thumbs/image1.jpg" class="thumb" onMouseOver="Change_Big_One(this)"></div> HTML LARGER IMAGE Code: <div><img src="" id="BigOne"></div> Hi all, I have a code that will fetch out the data from database OnMouseOver. But it is working fine if don't add table on the div which will come OnMouseOver. If i try to show the fetched data in table then the code doesn't work. Please someone help me with this. Here is my code: Code:
<script type="text/javascript" language="JavaScript">
var cX = 0; var cY = 0; var rX = 0; var rY = 0;
function UpdateCursorPosition(e){ cX = e.pageX; cY = e.pageY;}
function UpdateCursorPositionDocAll(e){ cX = event.clientX; cY = event.clientY;}
if(document.all) { document.onmousemove = UpdateCursorPositionDocAll; }
else { document.onmousemove = UpdateCursorPosition; }
function AssignPosition(d) {
if(self.pageYOffset) {
rX = self.pageXOffset;
rY = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop) {
rX = document.documentElement.scrollLeft;
rY = document.documentElement.scrollTop;
} else if (document.body) {
rX = document.body.scrollLeft;
rY = document.body.scrollTop;
}
if(document.all) {
cX += rX;
cY += rY;
}
d.style.left = (cX+10) + "px";
d.style.top = (cY+10) + "px";
}
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
dd.style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
if(dd.style.display == "none") { dd.style.display = "block"; }
else { dd.style.display = "none"; }
}
//-->
</script>
</head>
<body>
<table align="center" width="300px"/>
<tr>
<td>MakeID</td>
<td>Make</td>
<td>Veh Type</td>
</tr>
<?php
$conn = mysql_connect ('localhost', 'root', '');
mysql_select_db ('my_db', $conn);
function create_div($width, $height, $fields, $table, $w_field, $w_value, $unique) {
$f = implode("`, `", $fields);
$sql = "SELECT `$f` FROM `$table` WHERE `$w_field` = '$w_value'";
$res = mysql_query($sql) or die(mysql_error());
$div = "<div align=center id=\"data".$unique."\" style=\"display:none; position:absolute; border-style:solid; background-color:white; padding: 10px; width:".$width."px; height:".$height."px\" />\n";
$div .= '<table width="100%" cellpadding="4" cellspacing="2">';
$div .= '<tr><th>Serial</th><th>First Name</th><th>Email</th></tr>';
while($r = mysql_fetch_assoc($res)){
$div .= '<tr>';
$div .= '<td>'.$r['id'].'</td>';
$div .= '<td>'.$r['firstname'].'</td>';
$div .= '<td>'.$r['email'].'</td>';
$div .= "</tr>";
$div .= "</table>";
$div .= "</div>\n";
return $div;
}
$sql = "SELECT * FROM name";
$res = mysql_query($sql) or die(mysql_error());
$i=0;
$fields = array("id", "firstname", "email");
while($r = mysql_fetch_assoc($res)){
echo create_div("300", "200", $fields, "admin", "id", $r['id'], $i);
?>
<tr>
<td><?php echo $r['id']; ?></td>
<td><a onmouseover="ShowContent('data<?php echo $i; ?>'); return true;" onmouseout="HideContent('data<?php echo $i; ?>'); return true;" href="#"><?php echo $r['name'];?></a>
</td>
<td><?php echo $r['desc']; ?></td>
</tr>
<?php
$i++;
}
?>
</table>
</body>
</html>
I am not sure if this is a javascript problem or an html problem. I have posted the code below. The main two areas that I am interested in are 1) the area where the photo is shown in the larger size, and 2) the thumbnails below the larger picture. Right now in the img tag of the first image I have specified a height and width of 450px. The result is that when one hovers the mouse over the thumbnails, all pictures are shown at that size, regardless if they are larger or smaller than 450 x 450 pixels. I am not concerned about the larger images because I will use a script to scale those that someone on this forum was so kind enough to provide me with. The IMPORTANT PART IS HE I am concerned with smaller images. If you remove the height and width portion from the image tag, when you hover the mouse over a picture that's smaller than the others, such as the last one, which is smaller than all the others that are at 450 x 450, the thumbnails "move up". I would like the thumbnails to remain where they are at / for the top area where the photos are displayed to always be the same size, such as 450 x 450 px., and for the smaller pictures to be shown in the center in that area. How can this be done? Note: The entire portion of the stylesheet is not present. Let me know if something important is missing. Code: <html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>MouseOver-Images</title>
<style type="text/css">
td#kdwhdMAINPHOTO { width: 616px; vertical-align: top; }
table#kdwhdTHUMB { margin-top: 12px; }
td#kdwhdTHUMBNAILS { background-image:
url(http://www.sunandfuninoc.com/testingsites/gems4me/images/t_28.jpg);
width: 616px; height: 114px; text-align: center; }
td#kdwhdTHUMBNAILS img { border: 1px solid #696969; }
td#kdwhdTABLE { width: 296px; vertical-align: top; }
-->
</style>
</head>
<body>
<table style="width: 924px;" border="0" cellpadding="0"
cellspacing="0">
<tbody>
<tr>
<td id="kdwhdMAINPHOTO"
style="text-align: center; background-color: white;">
<!--Image 1--> <img
src="http://site.gems4me.com/images/red2.jpg" alt="Item photo"
name="swap" style="border: 0px solid rgb(105, 105, 105);"
height="450" width="450">
<table id="kdwhdTHUMB" border="0" cellpadding="0"
cellspacing="0" width="616">
<tbody>
<tr>
<td><img
src="http://www.sunandfuninoc.com/testingsites/gems4me/images/t_26.jpg"
alt="Click on the picture below to enlarge" height="25"
width="616"></td>
</tr>
<tr>
<td><img
src="http://www.sunandfuninoc.com/testingsites/gems4me/images/t_27.jpg"
alt="" height="10" width="616"></td>
</tr>
<tr>
<td id="kdwhdTHUMBNAILS"><!--Image 1--><img
src="http://site.gems4me.com/images/450by450.jpg"
alt="Item photo"
onmouseover="document.swap.src='http://site.gems4me.com/images/450by450.jpg';"
height="80">
<!--Image 2--> <img
src="http://site.gems4me.com/images/450by450-2.jpg"
alt="Item photo"
onmouseover="document.swap.src='http://site.gems4me.com/images/450by450-2.jpg';"
height="80">
<!--Image 3--> <img
src="http://site.gems4me.com/images/450by450.jpg"
alt="Item photo"
onmouseover="document.swap.src='http://site.gems4me.com/images/450by450.jpg';"
height="80">
<!--Image 4--> <img
src="http://site.gems4me.com/images/450by450-2.jpg"
alt="Item photo"
onmouseover="document.swap.src='http://site.gems4me.com/images/450by450-2.jpg';"
height="80">
<!--Image 5--> <img
src="http://site.gems4me.com/images/red2.jpg" alt="Item photo"
onmouseover="document.swap.src='http://site.gems4me.com/images/red2.jpg';"
height="80"></td>
</tr>
<tr>
<td><img
src="http://www.sunandfuninoc.com/testingsites/gems4me/images/t_29.jpg"
alt="" height="10" width="616"></td>
</tr>
</tbody>
</table>
</td>
<td><img
src="http://www.sunandfuninoc.com/testingsites/gems4me/images/spacer.gif"
alt="" height="1" width="12"></td>
<td id="kdwhdTABLE">
<table border="0" cellpadding="5" cellspacing="0"
width="296">
<tbody>
<tr>
<td colspan="2" id="kdwhdTABLETITLE">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR1C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR1C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff
</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
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, 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>
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. 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 |
|||||||