|
JavaScript - Php And Js (mouseover Conflict) And Table Properties
Similar TutorialsHi Experts here, Pls help. I have written the html code like this: <a href="http://mypage.com/docfiles" target="_blank"> Click </a> But the problem is when ever the user click the click option complete url is displaying in two ways 1)on the buttom of the status bar 2)Right click on the option open the properties than also we are getting the complete url. But we don't want to see the complete url,How to hide the Url. Please give me solution I am struggling alot. Thanks and Regards, Srinivas yadav. I HAVE BEEN TRYING TO FIGURE OUT THE PARAMETERS IN THE FUNCTIONS, INCLUDING THE ARRAYS [i], [p], ["get_" + i], ["set_" + i] AND HOW THE METHODS ARE BEING CALLED IN RELATION TO i, p and val, so that I can make sense of this code. If possible can you explain the code also What I will like to know are the properties and methods of the objects generated in the following code? Also I want to know how I can use those methods to show and change the name and age for the emp2 object. this is the code: function Employee(properties) { for (var i in properties) { if (properties.hasOwnProperty(i) && typeof properties[i] != 'function') { this["get_"+i] = (function(p) { return function() { return properties[p]; }; })(i); this["set_"+i] = (function(p) { return function(val) { properties[p] = val; }; })(i); } } } var emp1 = new Employee({ name: "Bob", age: 35, foo: function() {} }); var emp2 = new Employee({ name: "Gary", age: 54 }); 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)) 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>
Heya there, I have been trying to run two Javascripts within the same page. The first is the Drop down menu Javascript, the second is the Picture Viewer (Click an image and it opens) Here is a copy of the webpage (the active version has been modified to reduce confusion for users) http://f1p.co.uk/saved%20pages/picture1.html I have tried a noconflict, but it didn't seem to work. As you can see, the Picture viewer works fine, but the drop down menu seems to be in conflict. Any help please? Hi Guys. I wish I could say I was a fellow coder but I'm not. I am a WYSISYGer that promised to help a friend and is lost. I'm making her a site that is based on a js template. I want to add a lightbox effect using jquery. Ive been trying to use a plugin called bumpbox because unlike lightbox it allows static html in the popup. When I implement the plugin in a very basic html doc, it works just fine. However when I use it in my js site, nothing happens. I really really don't understand what I am doing right or wrong, so if someone could take a look at code and help me out (with very basic instructions), I'd really appreciate it! Ive uploaded site to http://www.flashfollow.com/index.html click home>link saying seo it should open a lightbox...currently to developers site. THANKS SO MUCH Hi, I've done control in asp.net/javascript and it works on some pages of mine and as it often happens doesn't work on customer's pages . All pages are run in IE 6.0. After I run debugger I've found out that on my page offsetLeft/Top clientHeight properties have some non-zero values. I have <span id="listCLient" style="width:200px;">..</span> and on my test page elListClient.clientHeight = 200, but on customer's app's page it is 0x0 ? Same with other offsetXXX properties etc. But elListClient.style.height bears correct value. I use those properties everywhere. I think it is some settings somewhere ? or CSS styles ? Can anyone help ? Thanks a lot Vladislav Hi! I'm having problems with a thumbnail viewer. I have the Nivo slider installed in my website and now I added a thumbnail viewer called SmoothGallery and my Nivo Slider stopped working. They both are javascript. Once I added the source for the SmoothGallery in the header my Nivo Slider stopped working. Here is the code I entered for the SmoothGalery plugin: <script src="js/mootools-1.2.1-core-yc.js" type="text/javascript"></script> <script src="js/mootools-1.2-more.js" type="text/javascript"></script> <script src="js/jd.gallery.js" type="text/javascript"></script> Once that is entered, my Nivo slider stops working. My nivo slider requires these libraries: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script> Can anyone help me solve this issue? I am no expert on javascript and any help is appreciated! I cannot get these two scripts to run seamlessly in one .html file. Here is my 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" dir="ltr" lang="en-US"><head profile="http://gmpg.org/xfn/11"> <title>Supersized - Full Screen Background/Slideshow jQuery Plugin</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> <script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.core.js"></script> <script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.slide.js"></script> <script type="text/javascript" src="supersized.2.0.js"></script> <script type="text/javascript" src="jquery-.js"></script> <script type="text/javascript" src="accordion.js"></script> <script type="text/javascript"> $(function(){ $.fn.supersized.options = { startwidth: 640, startheight: 480, vertical_center: 1, slideshow: 1, navigation: 1, transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left pause_hover: 0, slide_counter: 1, slide_captions: 1, slide_interval: 3000 }; $('#supersize').supersized(); }); </script> <style type="text/css"> /* A few IE bug fixes */ * { margin: 0; padding: 0; } * html ul ul li a { height: 100%; } * html ul li a { height: 100%; } * html ul ul li { margin-bottom: -1px; } body { padding-left: 0; font-family: Arial, Helvetica, sans-serif; background-color: #0C3; } #theMenu { width: 200px; height: 350px; margin: 0px 0; padding: 0; } /* Some list and link styling */ ul li { width: 200px; } ul ul li { width: 200px; margin-bottom: 0; } ul ul li a { display:block; color: #fff; background: none; font-size: small; } ul ul li a:hover { display:block; color: #fff; background: none; font-size: small; } /* For the xtra menu */ ul ul ul li { width: 200px; margin-bottom: 0; } ul ul ul li a { display:block; color: #fff; background: none; font-size: small; } ul ul ul li a:hover { display:block; color: #fff; background: none; font-size: small; } li { list-style-type: none; } h2 { margin-top: 1.5em; } /* Header links styling */ h3.head a { color: #fff; display:block; border-top: 0px solid #36a; border-right: 0px solid #36a; background: none; background-position: 98% 50%; padding: 0px 0px; } h3.head a:hover { color: #fff; background: none; background-position: 98% 50%; } h3.selected a { background: none; background-position:98% 50%; color: #fff; padding: 0px 0px; } h3.selected a:hover { background: none; background-position:98% 50%; color: #fff; } /* Xtra Header links styling */ h4.head a { color: #fff; display:block; background: none; background-position: 98% 50%; padding: 0px 0px; } h4.head a:hover { color: #fff; background: none; background-position: 98% 50%; } h4.selected a { background: #000 url(up.gif) no-repeat; background-position:98% 50%; color: #fff; padding: 0px 0px; } h4.selected a:hover { background: none; background-position:98% 50%; color: #fff; } a{ color:#8FC2FF; text-decoration: none; outline: none; } a:hover{ text-decoration: underline; } img{ border:none; } body { overflow:hidden;/*Needed to eliminate scrollbars*/ background:#000; } #content{ margin:0px auto; height:100px; width:100%; bottom:5%; z-index: 3; background:#262626 no-repeat 90%; border-top:1px solid #000; border-bottom:1px solid #4F4F4F; position:absolute; } #contentframe{ overflow: hidden; border-top:solid 1px #4F4F4F; border-bottom:1px solid #000; height: 100%; text-align:left; z-index: 3; } #slidecounter{ float:left; color:#4F4F4F; font:50px "Helvetica Neue", Arial, sans-serif; font-weight:bold; margin:18px 20px; } #slidecaption{ overflow: hidden; float:left; color:#FFF; font:26px "Helvetica Neue", Arial, sans-serif; font-weight:bold; margin:33px 0; } /*Supersized Stamp*/ .stamp{ float: right; margin: 25px 20px 0 0; } /*Supersize Plugin Styles*/ #navigation{ background: url('images/navbg.gif') no-repeat; float: right; margin:22px 20px 0 0; } #loading { position: absolute; top: 49.5%; left: 49.5%; z-index: 3; width: 24px; height: 24px; text-indent: -999em; background-image: url(images/progress.gif); } #supersize{ position:fixed; } #supersize img, #supersize a{ height:100%; width:100%; position:absolute; z-index: 0; } #supersize .prevslide, #supersize .prevslide img{ z-index: 1; } #supersize .activeslide, #supersize .activeslide img{ z-index: 2; } </style> </head> <body> <div style=" position: absolute; left:150px; top:80px; z-index:3"> <ul id="theMenu"> <li> <h3 class="head"><a href="javascript:;">Competitions</a></h3> <ul> <li><a href="index-multi.php">Content 1 1</a></li> <li><a href="index-multi.php">Content 1 2</a></li> <li><a href="index-multi.php">Content 1 3</a></li> </ul> </li> <li> <h3 class="head"><a href="javascript:;">Residential</a></h3> <ul> <li><a href="index-multi.php">Content 3 1</a></li> <li><a href="index-multi.php">Content 3 2</a></li> <li><a href="index-multi.php">Content 3 3</a></li> </ul> </li> <li> <h3 class="head"><a href="javascript:;">Institutional</a></h3> <ul> <li><a href="index-multi.php">Content 3 1</a></li> <li><a href="index-multi.php">Content 3 2</a></li> <li><a href="index-multi.php">Content 3 3</a></li> </ul> </li> <li> <h3 class="head"><a href="javascript:;">HealthCare</a></h3> <ul> <li><a href="index-multi.php">Content 4 1</a></li> <li><a href="index-multi.php">Content 4 2</a></li> <li><a href="index-multi.php">Content 4 3</a></li> </ul> </li> <li> <h3 class="head"><a href="javascript:;">Photography</a></h3> <ul> <li><a href="index-multi.php">Content 5 1</a></li> <li><a href="index-multi.php">Content 5 2</a></li> <li><a href="index-multi.php">Content 5 3</a></li> </ul> </li> </ul> </div> <!--Loading display while images load--> <div id="loading"> </div> <!--Slides--> <div id="supersize"> <a href="http://interfacelift.com/wallpaper_beta/details/1819/bird_on_a_branch.html"><img src="images/bird.jpg" title="Bird On A Branch"/></a> <a href="http://interfacelift.com/wallpaper_beta/details/988/paradise_lost.html"><img src="images/paradise.jpg" title="Paradise Lost"/></a> <a href="http://interfacelift.com/wallpaper_beta/details/1864/morelia_viridis.html"><img src="images/snake.jpg" title="Morelia Viridis"/></a> </div> <!--Content area that hovers on top--> <div id="content"> <div id="contentframe"> <div id="slidecounter"><!--Slide counter--> <span class="slidenumber"></span>/<span class="totalslides"></span> </div> <div id="slidecaption"><!--Slide captions displayed here--></div> <!--Logo--> <a href="http://www.buildinternet.com" class="stamp"><img src="images/supersizedblackmini.gif"/></a> <!--Navigation--> <div id="navigation"> <a href="#" id="prevslide"><img src="images/back_dull.gif"/></a><a href="#" id="pauseplay"><img src="images/pause_dull.gif"/></a><a href="#" id="nextslide"><img src="images/forward_dull.gif"/></a> </div> </div> </div> </body> </html> If I delete the following line: src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> ...the menu works perfectly, and if i delete the other jquery line: <script type="text/javascript" src="jquery-.js"></script> ...the background images work perfectly. I cant get it to work. I feel like an f-ing idiot - Help! Howdy all, I have changed same function names, and have incorporated both maps in bodyOnload, but they are still conflicting. Map 1 works fine. Map 2 shows up, but doesn't change it's images at all onmouseover. You won't be able to test it, but I'm hoping someone can spot a conflict in the code structure. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</script>
<SCRIPT type=text/javascript>
// map # 1
var isLoad = false;
var pic0 = null;
var pic6 = null;
var pic7 = null;
var pic8 = null;
var pic9 = null;
var pic10 = null;
var pic11 = null;
var pic12 = null;
var pic13 = null;
function preLoad() {
// state maps
pic0 = new Image()
pic0.src="mapsv2/00_state_00.gif"
/*pic1 = new Image()
pic1.src="mapsv2/00_metro_01.gif"
pic2 = new Image()
pic2.src="mapsv2/00_metro_02.gif"
pic3 = new Image()
pic3.src="mapsv2/00_metro_03.gif"
pic4 = new Image()
pic4.src="mapsv2/00_metro_04.gif"
pic5 = new Image()
pic5.src="mapsv2/00_metro_05.gif"*/
pic6 = new Image()
pic6.src="mapsv2/00_metro.gif"
pic7 = new Image()
pic7.src="mapsv2/00_state_07.gif"
pic8 = new Image()
pic8.src="mapsv2/00_state_08.gif"
pic9 = new Image()
pic9.src="mapsv2/00_state_09.gif"
pic10 = new Image()
pic10.src="mapsv2/00_state_10.gif"
pic11 = new Image()
pic11.src="mapsv2/00_state_11.gif"
pic12 = new Image()
pic12.src="mapsv2/00_state_12.gif"
pic13 = new Image()
pic13.src="mapsv2/00_state.gif"
pic14 = new Image()
pic14.src="mapsv2/00_state_06.gif"
isLoad = true;
}
function changeImage(mFileName) {
if(isLoad) document.statemap.src = mFileName.src;
}
</SCRIPT>
<script type =text/javascript>
//map #2
var isLoaded = false;
var pic1 = null;
var pic2 = null;
var pic3 = null;
var pic4 = null;
var pic5 = null;
var pic6 = null;
function preLoadOne() {
// state maps
pic1 = new Image()
pic1.src="mapsv2/00_metro_01.gif"
pic2 = new Image()
pic2.src="mapsv2/00_metro_02.gif"
pic3 = new Image()
pic3.src="mapsv2/00_metro_03.gif"
pic4 = new Image()
pic4.src="mapsv2/00_metro_04.gif"
pic5 = new Image()
pic5.src="mapsv2/00_metro_05.gif"
pic6 = new Image()
pic6.src="mapsv2/00_metro.gif"
isLoaded = true;
}
function changeImg(pFileName) {
if(isLoaded) document.metromap.src = pFileName.src;
}
</script>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
</head>
<body>
<meta name="robots" content="noindex,nofollow">
</head>
<body onload="preLoad();preLoadOne()">
<h1> " "</h1>
<img src="banner_crest.gif" alt="crest logo"><br>
<!-- Map # 1 -->
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=pageDesc colSpan=2>
<P><IMG height=400 src="mapsv2/00_state.gif"
width=355 useMap=#mainmap border=0 name=statemap>
</P></TD></TR></TBODY></TABLE>
<div id="page">
<div id="map_section"><MAP name=mainmap>
<!--state_im_Map -->
<AREA
onmouseover=changeImage(pic0); onmouseout=changeImage(pic13); shape=POLY
rel="nofollow" target=_self alt="Metro & Hills"
COORDS="279,281, 275,294, 264,294, 268,276"
href="metro.html">
<AREA
onmouseover=changeImage(pic14); onmouseout=changeImage(pic13); shape=POLY
rel="nofollow" target=_self alt="Barossa"
COORDS="282,268, 278,283, 264,279, 259,267, 275,263"
href="section.asp?regionID=06">
<AREA
onmouseover=changeImage(pic7); onmouseout=changeImage(pic13); shape=POLY
rel="nofollow" target=_self alt="Fleurieu and Kangaroo Island"
COORDS="245,310, 255,314, 242,318, 214,315, 217,310, 242,307"
href="section.asp?regionID=07">
<AREA
onmouseover=changeImage(pic7); onmouseout=changeImage(pic13); shape=POLY
rel="nofollow" target=_self alt="Fleurieu and Kangaroo Island"
COORDS="281,296, 278,301, 275,306, 267,307, 255,305, 279,292"
href="section.asp?regionID=07">
<AREA
onmouseover=changeImage(pic8); onmouseout=changeImage(pic13); shape=POLY
rel="nofollow" target=_self alt="Eyre and Western"
COORDS="145,76, 139,117, 122,120, 131,149, 142,153, 146,157, 167,162, 160,190, 161,196, 173,206, 198,219, 218,226, 234,235, 243,221, 249,221, 247,225, 239,236, 229,248, 209,264, 199,275, 201,278, 199,285, 194,284, 185,274, 187,271, 173,245, 166,229, 155,226, 154,216, 157,211, 147,207,
144,202, 136,197, 127,199, 110,192, 101,195, 72,180, 57,183, 16,183, 15,77"
onclick="Populate('list1',EYRE_AND_WESTERN_JUNIOR_PRIMARY)">
<AREA
onmouseover=changeImage(pic9) ; onmouseout=changeImage(pic13); shape=POLY
rel="nofollow" target=_self alt="Far North"
COORDS="344,13, 330,225, 312,229, 309,233, 293,230, 289,229, 287,215, 278,211, 272,200, 267,203, 258,212, 253,214, 251,216, 248,213, 245,222, 236,229, 232,235, 223,231, 215,224, 208,221, 198,222, 184,218, 181,214, 172,203, 157,197, 161,190, 166,187, 162,159, 141,154, 137,150, 122,146,
126,116, 144,114, 140,73, 10,74, 10,12, 264,9"
onclick="Populate('list1',FAR_NORTH_PRIMARY)">
<AREA
onmouseover=changeImage(pic10); onmouseout=changeImage(pic13); shape=POLY
rel="nofollow" target=_self alt="Limestone Coast"
COORDS="326,317, 320,385, 307,377, 292,349, 296,339, 296,328, 302,324, 314,314"
href="section.asp?regionID=10">
<AREA
onmouseover=changeImage(pic11); onmouseout=changeImage(pic13); shape=POLY
rel="nofollow" target=_self alt="Murray and Mallee"
COORDS="332,227, 322,314, 314,319, 309,322, 303,326, 292,325, 282,305, 285,301, 277,284, 280,277, 286,267, 294,225, 311,226, 332,224"
href="section.asp?regionID=11">
<AREA
onmouseover=changeImage(pic12); onmouseout=changeImage(pic13); shape=POLY
rel="nofollow" target=_self alt="Yorke and Mid North"
COORDS="276,203, 284,214, 289,217, 285,267, 274,267, 257,265, 254,263, 241,291, 222,293, 229,284, 238,280, 245,249, 250,236, 253,230, 253,210, 266,201"
href="section.asp?regionID=12">
</MAP>
</div>
<!--Map #2-->
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD class=pageDesc colSpan=2>
</TD></TR>
<TR>
<TD class=section colSpan=2><BR>
<TR>
<TD class=section><BR>
<P><IMG height=400 src="mapsv2/00_metro.gif"
width=301 useMap=#state_im_Map border=0 name=metromap>
</P></TD></TR></TBODY></TABLE><MAP name=metromap>
<AREA
onmouseover=changeImage(pic1); onmouseout=changeImage(pic6); shape=POLY
rel="nofollow" target=_self alt="Eastern Adelaide"
COORDS="151,142, 136,158, 139,168, 139,175, 134,177, 129,186, 130,198, 123,194, 118,193, 84,187, 88,169, 90,144, 92,141, 98,143, 118,149, 125,139, 139,138, 152,138"
href="section.asp?regionID=01">
<AREA
onmouseover=changeImage(pic2); onmouseout=changeImage(pic6); shape=POLY
rel="nofollow" target=_self alt="Northern Adelaide"
COORDS="138,8, 141,21, 159,31, 177,9, 180,15, 188,25, 185,30, 208,47, 193,92, 174,95, 168,98, 167,108, 167,117, 164,137, 164,142, 150,138, 118,148, 111,150, 107,149, 88,132, 88,121, 79,110, 87,100, 84,88, 45,45, 40,39, 50,27, 62,18, 70,17, 124,12"
href="section.asp?regionID=02">
<AREA
onmouseover=changeImage(pic3); onmouseout=changeImage(pic6); shape=POLY
rel="nofollow" target=_self alt="Southern Adelaide"
COORDS="105,191, 118,193, 128,196, 128,204, 129,218, 129,226, 131,227, 136,274, 136,305, 132,323, 111,322, 90,355, 65,376, 41,389, 34,392, 21,389, 29,346, 33,324, 42,256, 57,219, 57,189, 74,192, 84,190"
href="section.asp?regionID=03">
<AREA
onmouseover=changeImage(pic4); onmouseout=changeImage(pic6); shape=POLY
rel="nofollow" target=_self alt="Western Adelaide"
COORDS="62,87, 64,88, 66,85, 70,97, 72,101, 67,101, 71,108, 70,110, 91,124, 87,182, 67,195, 52,180, 44,120, 49,102, 48,87, 59,82"
href="section.asp?regionID=04">
<AREA
onmouseover=changeImage(pic5); onmouseout=changeImage(pic6); shape=POLY
rel="nofollow" target=_self alt="Adelaide Hills"
COORDS="224,55, 238,63, 253,91, 256,94, 271,97, 286,115, 292,121, 277,133, 278,143, 264,161, 286,182, 283,192, 287,213, 285,260, 284,284, 276,289, 246,281, 237,292, 228,290, 221,296, 209,312, 204,316, 179,323, 173,327, 165,341, 141,332, 135,318, 139,299, 139,292, 129,256, 129,227, 127,221,
129,210, 130,198, 132,195, 131,178, 139,168, 134,158, 144,150, 158,137, 164,141, 166,119, 167,107, 169,99, 172,94, 183,89, 193,90, 198,69, 212,48, 222,56"
href="section.asp?regionID=05">
<!--<area shape="poly" href="default.asp" rel="nofollow" target="_self" alt="State Map"
COORDS="300,0, 300,400, 0,400, 24,392, 42,388, 87,357, 120,320, 137,327, 165,341, 172,329, 174,326, 187,319, 193,318, 197,316, 204,314, 217,303, 225,290, 235,291, 246,279, 251,276, 272,285, 280,287, 286,270, 284,230, 283,197, 284,183, 283,175, 263,155, 266,150, 275,139, 278,126, 289,117, 275,106,
270,97, 264,95, 252,91, 242,82, 242,79, 241,74, 231,59, 220,56, 214,53, 197,37, 184,29, 184,20, 177,13, 173,10, 153,32, 137,14, 135,6, 111,14, 85,16, 53,25, 36,33, 32,33, 29,15, 10,0">
-->
</MAP>
</body>
</html>
Cheers, Tom Hi, I wonder if any one has any ideas in what is causing this bug in I.E The main slide show is the javascript in question. I think the javascript conflicting or causing this issue is the show hide with the plus minus at the top left of the page just above the navigation. I think there is some Javascript conflict but it works sometimes and sometimes it doesnt. http://tinyurl.com/6ee5yk2 thanking you in advance. Hi, I am a beginner at web design and I have a conflict with a videobox javascript that is effecting the font javascript. I have narrowed it down that the <script type="text/javascript" src="js/mootools.js"></script> is causing the problem. Any help I would be grateful. Thanks. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!-- Title -->
<title>Portfolio</title>
<!-- Meta tags -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" media="screen, projection" href="css/screen.css" />
<link rel="stylesheet" type="text/css" media="screen, projection" href="css/facybox.css" />
<link rel="stylesheet" type="text/css" media="screen, projection" href="css/galleria.css" />
<link rel="stylesheet" type="text/css" media="screen, projection" href="css/color2.css" />
<link rel="stylesheet" type="text/css" media="screen, projection" href="css/master.css" />
<link rel="stylesheet" type="text/css" href="css/shadowbox.css">
<link href="css/slimbox2.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/videobox.css" type="text/css" media="screen" />
<!-- Scripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="js/cufon.js"></script>
<script type="text/javascript" src="js/Aller_400.font.js"></script>
<script type="text/javascript" src="js/facybox.js"></script>
<script type="text/javascript" src="js/jquery.galleria.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<script type="text/javascript" src="js/slimbox2.js"></script>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/videobox.js"></script>
Id like to control scrolling of two divs with one scrollbar as in this example here http://www.byenshjemmesider.dk/ At the same time i want to customize the scrollbar. Ive been using Flexcroll which work fine on a single div. But as soon as i insert flexcroll.js to head of document in the example, the sync of the two divs breaks and only the div with Flexcroll attached scrolls. Anyone know how to solve this? You can find the code im using in the example or i can post. I dont have to use Flexcroll, so if you know of any other application that can customize scrollbar and control scroll on two divs at the same time, id appreciate a link. Hello, I'm very very new to javascript and HTML but i've gotten pretty far untill i hit this problem. In my HTML i have 3 div's each of them has an Id. Now when i load the page all of them are hidden. The idea is that when you push a link (a thumbmail) the div (which is basically an embedded video) pops up. All of this worked fine with a small java function that changes the display setting in the CSS file from block to none and back again. The problem is that when you open a second div the first one doesn't disappear. I though i would try writing a very simple functions that hides every div besides the one you just clicked on. Even though I combined the functions in one master function, I can't get the hide part to work. Here's the HTML code Code:
<div id="blokReel" style="display:none;">
content
</div>
<div id="blokDiner" style="display:none;">
content
</div>
<div id="blokKitsune" style="display:none;">
content
</div>
<div id="bloklinks">
<p>(click once to open player click again to close)</p>
<p class="title">animation reel</p>
<ul id="galleryMOV">
<li>
<a href="javascript:void(0)";
onclick="Eval('blokReel','blokDiner','blokKitsune');">
<img src="img/stringsfini.jpg" alt="description"class="thumb"/>
<span class="caption">caption caption caption</span>
</a></li></ul>
<p class="title">full movies</p>
<ul id="galleryMOV">
<li>
<a href="javascript:void(0)";
onclick="Eval('blokDiner','blokReel','blokKitsune');">
<img src="img/stringsfini.jpg" alt="description"class="thumb"/>
<span class="caption">caption caption caption</span>
</a></li>
<li>
<a href="javascript:void(0)";
onclick="Eval('blokKitsune','blokReel','blokDiner');">
<img src="img/stringsfini.jpg" alt="description"class="thumb"/>
<span class="caption">caption caption caption</span>
</a></li></ul>
</div>
So 3 div and 3 thumbnail links that have an onclick event called Eval(). Here's the javascript code Code: function Eval(element1, element2, element3) {
ShowHide(element1);
Hide(element2);
Hide(element3);
}
function ShowHide(elementId)
{
var wijzig = document.getElementById(elementId);
if(wijzig.style.display != "block")
{
wijzig.style.display = "block";
}
else
{
wijzig.style.display = "none";
}
}
function Hide(blok)
{
var verborgen = document.getElementByld(blok);
verborgen.style.display = "none";
}
I'm viewing the html in safari 3.2.1 thanks for your time, W ***RESOLVED*** Ok folks on my form i use javascript on a dropdown box (months of the year) to show/hide following dropdown boxes using css i.e box1 = 1-28 days default hide this dropdown box2 = 1-30 days default hide this dropdown box3 = 1-31 days default show this dropdown the correct dropdown box will be shown and the others hidden according to the month selected this works fine. JavaScript Code: <script type="text/javascript">
<!--
// var small = 1-28 days
// var medium = 1-30 days
// var large = 1-31 days
function ToggleDays(id)
{
var small = document.getElementById('short');
var medium = document.getElementById('medium');
var large = document.getElementById('long');
var value = id.options[id.selectedIndex].value;
if(value == 2)
{
small.style.display = "inline";
medium.style.display = "none";
large.style.display = "none";
}
if( value==2 || value==4 || value==6 || value==9 || value==11 )
{
if(value == 2)
{
small.style.display = "inline";
medium.style.display = "none";
large.style.display = "none";
}
else
{
small.style.display = "none";
medium.style.display = "inline";
large.style.display = "none";
}
}
else
{
small.style.display = "none";
medium.style.display = "none";
large.style.display = "inline";
}
}
//-->
</script>
HTML form (part of) Code: <form name="feedback" action="newformverify.php" method="POST" onsubmit='return formValidator()'>
<fieldset>
<legend>Feedback</legend>
<p><label>Name</label>
<input id="name" type="text" name="name"/></p>
<p><label>Centre</label>
<input id="centre" type="text" name="centre"/></p>
<p><label>Date of meeting</label>
<select id="month" name="month" size="1" onchange="ToggleDays(this);">
<option value=0><?php echo date("F")?></option>
<option value=1>January</option>
<option value=2>February</option>
<option value=3>March</option>
<option value=4>April</option>
<option value=5>May</option>
<option value=6>June</option>
<option value=7>July</option>
<option value=8>August</option>
<option value=9>September</option>
<option value=10>October</option>
<option value=11>November</option>
<option value=12>December</option>
</select>
I want to use php to gather all info from form together and send in an email using the mail function. however when i post from the select it posts the option value and not the text is there any way to stop this? Code: <?php
session_start();
$month=$_POST['month'];
echo ("$month");
?>
Alright, I'm trying to get this website finished within the next 5 hours. I was designing it in such a way that I have some rollover buttons that take me to various parts of the site. Then, I have a gallery page, where I have a simple rollover galley. Adding the rollover gallery has stopped my buttons at the top from working. First, my .js file Code: function swap_image(name,source) {
document.images[name].src=source;
var argv=swap_image.arguments;
if(argv[2] && argv[3] && document.getElementById) {
element=document.getElementById(argv[2]);
element.innerHTML=argv[3];
}
}
if (document.images) {
image0 = new Image;
image1 = new Image;
image2 = new Image;
image0.src = '/images/male_fem.jpg';
image1.src = '/images/moon_wmn.jpg';
image2.src = '/images/mobydick.jpg';
} else {
image0 = '';
image1 = '';
image2 = '';
document.rollimg = '';
}
var cap = ['Picture One',
'Second Picture',
'Three'];
function rollover(n) {
document.rollimg.src = window['image'+n].src;
document.getElementById('caption').innerHTML = cap[n];
}
Now a portion of my html.. Code: <a onmouseover="swap_image('gallery','/images/galleryro.jpg')" onmouseout="swap_image('gallery','/images/galleryhl.jpg')">
<img style = "top:150px; left:160px;" border="0" id="gallery" src="/images/galleryhl.jpg"/> </a>
<a href="timeline.htm" onmouseover="swap_image('timeline','/images/timelinero.jpg')" onmouseout="swap_image('timeline','/images/timeline.jpg')">
<img style = "top:150px; left:175px;" border="0" id="timeline" src="/images/timeline.jpg"/> </a>
<a href="biography.htm"onmouseover="swap_image('biography','/images/biographyro.jpg')" onmouseout="swap_image('biography','/images/biography.jpg')">
<img style = "top:150px; left:190px;" border="0" id="biography" src="/images/biography.jpg"/> </a>
<a href="contact.htm" onmouseover="swap_image('contact','/images/contactro.jpg')" onmouseout="swap_image('contact','/images/contact.jpg')">
<img style = "top:150px; left:205px;" border="0" id="contact" src="/images/contact.jpg"/> </a>
<div class = "lrgimg">
<p align = "center">
<img style = "top:150px" src="images/male_fem.jpg" width="auto" height="auto" border="0" alt="large" name="rollimg" />
</p>
</div>
<div class = "imgbar">
<p align = "center"><span onmouseover="document.rollimg.src=image0.src;">
<img style = "top:250px" src="images/male_fem_sm.jpg" width="32" height="32" border="0"alt="malefem"/> </span>
<span onmouseover="document.rollimg.src=image1.src;">
<img style = "top:250px" src="images/moon_wmn_sm.jpg" width="32" height="32" border="0" alt="moonwmn"/></span>
<span onmouseover="document.rollimg.src=image2.src;">
<img style = "top:250px" src="images/mobydick_sm.jpg" width="32" height="32" border="0" alt="mobydick"/></span>
</p>
</div>
</div>
Any help to quickly resolve the conflict, would be greatly appreciated. I don't have a lot of time. Hi guys, Opening this up to the experts (of which I am not...yet) Have multiple scripts, some external, some on-page. Of all, there are 2 conflicting aand I need some assistance in finding a solution. Script 1 is at: http://upgrademycv.co.uk/wp-content/.../simpleCart.js It is this 2nd one which causes the conflict and I was hoping that someone could help me pinpoint how to correct please: http://www.upgrademycv.co.uk/fancydropdown.js Many thanks in advance. Phil Hi all, I'm sure this issue/question has been raised many times but need some help. I am trying to use two javascripts on one page but it doesnt seem to work, I can get one or the other but never both - believe this is whats know as a script conflict... Now Im lost when it comes to javascript so have no idea how to solve the issue: trying to use a vertical scroller on my images (this works) & would like to use a lightbox feature (that works when the above is removed)... This is my test page that is using the troublesome scripts - http://www.liam-sheridan.co.uk/portfolio_lightbox.html How can I solve this and use both features? thanks LiamS Hi All, I am simply trying to get 2 booking systems working on the 1 page but it seems that they have a conflict, they both access the exact sames files but whatever one is at the top get priority and works and the 2nd one below doesn't. See he http://www.albergodelsenato.it/test2.php How can I fix this? Please help ASAP. Thanks |
|||||||