|
JavaScript - Detect Mouseover And Mouseout & Show Coordinates
This is what my code is supposed to do:
1. create a select list that changes the photo showing, (which I have) 2. create script so that when the user hovers over the image it shows a div 3. when the users mouse is off the image/div shows the coordinates where it last left 4. on mouseout hides the div again (this is the part I'm stuck on) This is my html: Code: <style>
#selectdiv
{
position:absolute;
left:10px;
top:10px;
width:400px;
height:400px;
}
#mylist
{
position: absolute;
left: 200px;
top: 100px;
width:inherit;
height:inherit;
}
#myyellow
{
position: absolute;
left: 600px;
top: 100px;
width:300px;
height:200px;
background-color:#FF3;
}
</style>
<body>
<div id="selectdiv">
<h1 style="font-size:28px">Select a Beatle</h1>
<select name="beatles" size="1" id="myselect" onchange="showDiv();">
<option value="-">-</option>
<option value="J">John</option>
<option value="P">Paul</option>
<option value="G">George</option>
<option value="R">Ringo</option>
</select>
</div>
<div id="mylist" style="display:none" onmouseover="showYellow(event);" onmouseout="showpixels(event)"></div>
<div id="John" style="display:none">
<img src="beatles_john.jpg" />
</div>
<div id="Paul" style="display:none">
<img src="beatles_paul.jpg" />
</div>
<div id="George" style="display:none">
<img src="beatles_george.jpg" />
</div>
<div id="Ringo" style="display:none">
<img src="beatles_ringo.jpg" />
</div>
<div id="myyellow" style="display:none"></div>
<div id="msg"></div>
</body>
This is my script: Code: function showDiv()
{
var mySelect = document.getElementById("myselect");
var myList = document.getElementById("mylist");
switch (mySelect.value)
{
case 'J':
myDiv = document.getElementById("John");
myList.innerHTML = myDiv.innerHTML;
myList.style.display = "block"; //Makes div viewable
break;
case 'P':
myDiv = document.getElementById("Paul");
myList.innerHTML = myDiv.innerHTML;
myList.style.display = "block"; //Makes div viewable
break;
case 'G':
myDiv = document.getElementById("George");
myList.innerHTML = myDiv.innerHTML;
myList.style.display = "block"; //Makes div viewable
break;
case 'R':
myDiv = document.getElementById("Ringo");
myList.innerHTML = myDiv.innerHTML;
myList.style.display = "block"; //Makes div viewable
break;
}
}
function showYellow(event)
{
var myyellow = document.getElementById("myyellow");
myyellow.style.display = "block";
}
function showpixels(event)
{
x=event.clientX
y=event.clientY
var myMsg = document.getElementById("msg");
myMsg.innerHTML = "X coords: " + x + ", Y coords: " + y;
}
Any feed back is greatly appreciated. Similar TutorialsThe following piece of codes work like this: When mouse pointer is moved over the Button, the text of the button changes; When it is moved out of the button, the background color of the button changes. <html> <head> <script type="text/javascript"> function over(e) { if(e.toElement){ if(e.toElement.tagName.toLowerCase() == "input"){ e.toElement.value="IE New"; } } } function out(event) { if (event.srcElement){ if(event.srcElement.tagName.toLowerCase() == "input"){ event.srcElement.style.background= "green"; } } } </script> </head> <body> <div id="1">aaaaaaaaaaaaaaaaaa </div> <input type="button" value="Button 1" onmouseout="out(event)" onmouseover="over(event)" /> </body> </html> This sequence works fine, until the following case: First let's see the direction of the button: (left) <--------> BUTTON <--------> (right) Now, move the mouse over to the button, from the right side of the button, both the text and the background color of the button are changed. Obviously, the mousemoveout event is also triggered. I believe in this case, only the mousemoveover event should be triggered. What caused this? Thanks Scott 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 I am trying to make it so when I mouseover on one div another div appears. And when I mouse out, the div disappears again. Here's what I have, it's not working. Both divs are always showing. Code: <script>
function mover(){
document.getElementById("visiblediv").style.display="block"
}
function mout() {
document.getElementById("visiblediv").style.display="none"
}
</script>
<div id = "div1" onmouseover="mover()" onmouseout="mout()">
Show the div
</div>
<div id = "visiblediv" style="visibility:visible;border:1px dotted black">
This div is visible
</div>
Any way I can make this work any better? Am I supposed to have something in my main.css file? I have a concatenated list of member names, with corresponding profile pics. I am trying to implement something similar to Facebook, where when you mouseover the picture or member name, another div appears, such as an "x" or "delete link" which lets you click to delete that member. I tried to implement the a show/hide with the following, but this won't work with me since my list is concatenated, and since you can only have one id per div- this method won't cut it. So, how can I make this happen? Non-working Code: Code: HTML
<div >
<div id="showhide">
Line 1
</div>
<div id="visiblediv" style="display: none;">
Line 2
</div>
</div>
<div >
<div id="showhide">
Line 3
</div>
<div id="visiblediv" style="display: none;">
Line 4
</div>
</div>
<div >
<div id="showhide">
Line 5
</div>
<div id="visiblediv" style="display: none;">
Line 6
</div>
</div>
Javascript:
<script>
function mover(){
document.getElementById("visiblediv").style.display="block"
}
function mout() {
document.getElementById("visiblediv").style.display="none"
}
document.getElementById('showhide').onmouseover=mover;
document.getElementById('showhide').onmouseout=mout;
</script>
CSS:
#visiblediv {
visibility:visible;
border:1px dotted black;
}
Hi I am trying to implement a hide/show div, such that when you mouse over a div, another div pop's up below it. Here's what I have so far, but for some reason, only the first div set is working. That is when I mouse over div 1, div 2 shows up. So why isnt it working for divs 3,4 and 5,6? Here's my code: Code:
HTML
<div >
<div id="showhide">
Line 1
</div>
<div id="visiblediv" style="display: none;">
Line 2
</div>
</div>
<div >
<div id="showhide">
Line 3
</div>
<div id="visiblediv" style="display: none;">
Line 4
</div>
</div>
<div >
<div id="showhide">
Line 5
</div>
<div id="visiblediv" style="display: none;">
Line 6
</div>
</div>
Javascript:
<script>
function mover(){
document.getElementById("visiblediv").style.display="block"
}
function mout() {
document.getElementById("visiblediv").style.display="none"
}
document.getElementById('showhide').onmouseover=mover;
document.getElementById('showhide').onmouseout=mout;
</script>
CSS:
#visiblediv {
visibility:visible;
border:1px dotted black;
}
Any ideas, as to why it's not working? I am creating a page on which I have several div's. They contain an image as background. When I do a mouseover on a div, I want a div (with an image semitransparant), to be placed ontop of it's hovered div. When mouseout the semitransparant div should be hidden. Now I have the following code, it does work, but sometimes on mouseout the semitransparant div isn't hidden (when the mouse moves to quick). Is there a solution for it? PHP Code: echo '<div id="block-'.$BlockNums.'" class="blok '.$BlockStyle.'" onmouseover="document.getElementById(\'message\').style.display=\'block\';" ><img src="images/'.$BlockImg.'.png" width="181"/></div>'; echo '<a href="'.$BlockLink.'" style="display:block;cursor:pointer;"><div id="message" class="disMessage" style="display:none;" onmouseout="document.getElementById(\'message\').style.display=\'none\';"><p>'.$BlockMouse.'</p></div></a>'; And the css: Code: .disMessage
{
width: 163px;
height: 168px;
z-index: 1000;
position: absolute;
padding: 10px 10px 10px 10px;
text-align: center;
background-image: url("../images/hoverTrans.png");
}
.blok
{
width: 181px;
height: 186px;
/*border: 1px solid #FE7701;*/
background-image: url("../images/blok.png");
padding: 1px 9px 9px 1px;
}
Thanks I have an iFrame on which I wish to display scrollbars ONLY when the mouse is over the iFrame AND the source of the iFrame is larger than the iFrame can display I am using the following code for the iFrame but believe that I need to add some script to make it work: Code: <iframe src="http://www.mhgoebel.com" frameborder="0" id="frame" width="320" height="356" scrolling="no">
onmouseover="setScrolling('auto')" onmouseout="setScrolling('no')"
</iframe>
Hello I was looking for a javascript code to show an image in full size on moueover, I use this script on the site Code: function ShowPicture(id,Source) {
if (Source=="1"){
if (document.layers) document.layers[''+id+''].visibility = "show"
else if (document.all) document.all[''+id+''].style.visibility = "visible"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
}
else
if (Source=="0"){
if (document.layers) document.layers[''+id+''].visibility = "hide"
else if (document.all) document.all[''+id+''].style.visibility = "hidden"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
}
}
CSS code i use: Code: <style type="text/css">
#Style {
position:absolute;
visibility:hidden;
border:solid 1px #CCC;
padding:5px;
}
</style>
On the site to to body I put this html code: Code: <a href="#" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Click Here To Show Image</a>
<div id="Style"><img src="/sites/default/files/peroulades.jpg"></div>
When Im hovering over the link image is shown full size, Problem: if you take a look: http://www.online-dovolenka.sk/dovolenka_korfu if hover over both links "Click Here To Show Image" you will see same image, but I put two different images? where is the problem? any ideas? Code: <a href="#" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Click Here To Show Image</a>
<div id="Style"><img src="/sites/default/files/peroulades.jpg"></div>
<a href="#" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Click Here To Show Image</a>
<div id="Style"><img src="/sites/default/files/pantokrator.jpg"></div>
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>
So after a great deal of work I finally get my code working... Main hurdle was clearing the setTimeOut... A simple example: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE">
<head>
<script type="text/javascript" src="js1.3.js"></script>
<style>
.windowcht {
position:absolute;
top:30%;
width:150px;
height:150px;
right:50%;
background:yellow;
}
</style>
<script>
$(function() {
//mouse hover effects
$('.windowcht').fadeTo('slow', 0.1);
$('.windowcht').mouseenter(function() {
$(this).fadeTo('fast', 1);
});
$('.windowcht').mouseleave(function() {
var hov = this;
var timeout;
timeout = setTimeout(function() {
$(hov).fadeTo('slow', 0.1);
}, 2000);
$('.windowcht').mouseenter(function() {
clearTimeout(timeout);
});
});
});
</script>
</head>
<body>
<div class="windowcht">
This is my text
</div>
</body>
</html>
I would love any suggestions for my code to be less resource hungrey, I mean pure js code, not jquery. Suggestion?? I think this is a simple problem, but lets see... As the title suggests, I'm building a menu where when the user clicks on their username, a menu slides down. That part is easy. Using jQuery, I'm using slideToggle so when they click it again it moves back up. But what I'd also like to do is make it so if they leave the menu "area" (eg, are not on the username or the menu) I'd like the menu to slide back up. I tried Code: $('#userLink, #userMenu').mouseout(function () {
$('#userMenu').slideUp('fast');
});
But there is the obvious flaw of when they mouse from the username to the menu, they leave the username and the menu closes back up. Anyone have thoughts on how this is/can be done? Is there a way to check what element the mouse is on at any given time? My other thought was to have a function set on timeout that would check if its on one of the accepted elements, and if not, close the menu and disengage the timeout. Hello, I found the javascript for triggering audio on mouseOver (on the page link below) very helpful. Question is - how to stop the audio on mouseout? http://www.javascriptkit.com/script/....shtml#current I want a mouseout event to trigger only when I leave the parent element not when I mouseover a child element. I've been using the script from quirksmode but it can be hard to get working. Code: function doSomething(e) {
if (!e) var e = window.event;
var tg = (window.event) ? e.srcElement : e.target;
if (tg.nodeName != 'DIV') return;
var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
while (reltg != tg && reltg.nodeName != 'BODY')
reltg= reltg.parentNode
if (reltg== tg) return;
// Mouseout took place when mouse actually left layer
// Handle event
}
I have a function that needs to work only when the parent is moused out of. I didn't make this script. It's called by ondblclick="transition(document.getElementById('select1'),0,800,20)" in the html Code: function transition(ele,dirflag) {
if((ele.dirflag == dirflag) && ele.intrans) return; // stops function being called multiple times
var totDur = arguments[2] || 1000; // third argument, or one seconds
var numSteps = arguments[3] || 30; // fourth argument, or thirty steps (video quality, 30fps)
var intrval = totDur/numSteps; // renamed so it can't conflict
ele.sopac = 0; // we start at 0
ele.shght = 50; // we start at 50px
ele.eopac = 1; // we end at 1
ele.ehght = 140; // we end at 140px
ele.iopac = (ele.eopac-ele.sopac)/numSteps; // how much to increment opac
ele.ihght = (ele.ehght-ele.shght)/numSteps; // how much to increment hght
ele.copac = parseFloat(ele.copac,10) || ele.style.opacity || ele.sopac; // a val for current
ele.chght = ele.chght || parseInt(ele.style.height,10) || ele.shght; // a val for current
ele.dirflag = dirflag; // changed name to dirflag, stored for reference
if(ele.intrans) clearInterval(ele.intrans); // clear timeout if already running...
if(dirflag) { // 1 or true = increment
// alter visibility here to make an invisible item visible before starting
ele.style.display='block';
ele.intrans= setInterval(function() {
if(ele.copac<ele.eopac ) { // if mods needed
ele.copac=parseFloat(ele.copac,10)+parseFloat(ele.iopac,10); // increment
if(ele.copac>ele.eopac) ele.copac=ele.eopac; // error correction
ele.chght=parseFloat(ele.chght,10)+parseFloat(ele.ihght,10); // increment
if(ele.chght>ele.ehght) ele.chght=ele.ehght; // error correction
// set styles accordingly
ele.style.opacity = ele.copac;
ele.style.filter = 'alpha(opacity='+parseInt(ele.copac*100,10)+')';
ele.style.height = ele.chght+'px';
} else {
clearInterval(ele.intrans); // we're done -- clear timeout
}
},intrval); // do it on intrval timeline
} else {
// 0 or false = decrement
ele.intrans= setInterval(function() {
if(ele.copac>ele.sopac || ele.chght>ele.shght) { // if mods needed
ele.copac=parseFloat(ele.copac,10)-parseFloat(ele.iopac,10); // decrement
if(ele.copac<ele.sopac) ele.copac=ele.sopac; // error correction
ele.chght=parseFloat(ele.chght,10)-parseFloat(ele.ihght,10); // decrement
if(ele.chght<ele.shght) ele.chght=ele.shght; // error correction
// set styles accordingly
ele.style.opacity = ele.copac;
ele.style.MozOpacity = ele.copac;
ele.style.KhtmlOpacity = ele.copac;
ele.style.filter = 'alpha(opacity='+parseInt(ele.copac*100,10)+')';
ele.style.height = ele.chght+'px';
} else {
clearInterval(ele.intrans); // we're done -- clear timeout
// and make the item disappear here since it's done transitioning.
ele.style.display='none';
}
},intrval); // do it on intrval timeline
}
} // all done!
I tried to do this: Code: function transition(ele,dirflag,e){
if (!e) var e = window.event;
var tg = (window.event) ? e.srcElement : e.target;
if (tg.nodeName != 'DIV') return;
var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
while (reltg != tg && reltg.nodeName != 'BODY')
reltg= reltg.parentNode
if (reltg== tg) return;
// Mouseout took place when mouse actually left layer
// Handle event
if((ele.dirflag == dirflag) && ele.intrans) return; // stops function being called multiple times
var totDur = arguments[2] || 1000; // third argument, or one seconds
var numSteps = arguments[3] || 30; // fourth argument, or thirty steps (video quality, 30fps)
var intrval = totDur/numSteps; // renamed so it can't conflict
ele.sopac = 0; // we start at 0
ele.shght = 50; // we start at 50px
ele.eopac = 1; // we end at 1
ele.ehght = 140; // we end at 140px
ele.iopac = (ele.eopac-ele.sopac)/numSteps; // how much to increment
........
With this in the html onmouseout="transition(document.getElementById('select1'),1,800,20,event) but it doesn't work. the event isn't getting passed to the function. i have tried to move the event before document.getElementById and put e before ele in the function but it still doesn't work. Nothing fires at all. I've just added the quirksmode script to other functions in the past and had them work. I know this won't be the last time I need to stop problems with mouseover so can you give me some tips on what is going wrong. and please no script librarys. I have a navigation menu. When you mouseover, there's a sub-menu that appears. It remaining until you mouseout from the submenu or that "top level" item you mousedover in the first place. I want to change the mouseout function so it does nothing until you mousover another top-level item in the navigation. Example Shown he http://www.courage.ca Code: startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace
(" over", "");
}
}
}
}
}
window.onload=startList;
Using a css dropdown menu with javascript work-around for ie. Sorry to post yet again on this subject, but I couldn't find a solution in previous threads. My problem (in IE): I'm using the workaround as detailed in the "suckerfish" article http://htmldog.com/articles/suckerfish/dropdowns/ . Works great to drop my menu down, but when I mouse out the menu remains. On checking back with the original article, they have the same problem so I tried adapting the mouseout line in different ways. Still can't figure it out. Here is my site: http://www.centraloregonfoodnetwork.com/indexx.html Drop down menu only exists for the "producers directory". Thanks Can anyone help me set coordinates for an image I want to add to my page? I have the center coords where I want it to be places x is 400 and y is 90. I've searched all over the internet trying to find a solution.
Hey guys/gals, do ya know an efficient way to get the coordinates of a pictures so that I can use them to create a map? It is a rectangle. Here is the code I set up for a page: Code: <HTML>
<HEAD>
<TITLE>Cyrus</TITLE>
</HEAD>
<BODY BGCOLOR=black>
<div align="center">
<table border="0"; cellspacing="0"; cellpadding="0">
<tr>
<td><img src="http://i732.photobucket.com/albums/ww329/Chrishick/pageheadername.png"; width=900px; hieght=160px;></td>
</tr>
<tr>
<td><img src="http://i732.photobucket.com/albums/ww329/Chrishick/navbar.png" width=900px; border="none" usemap="#navbar"></td>
</tr>
<tr>
<td> <br>
<br>
<table border="0"; width=900px>
<tr>
<td>
<div align="left"><img src="http://i732.photobucket.com/albums/ww329/Chrishick/appearance-2.png"; width=466px; hieght=320px></div>
</td>
<td>
<div align="right"><img src="http://i732.photobucket.com/albums/ww329/Chrishick/equipment.png">
<br><br>
<img src="http://i732.photobucket.com/albums/ww329/Chrishick/personality.png">
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>
<div align="center"><img src="http://i732.photobucket.com/albums/ww329/Chrishick/brought.png"></div></td>
</tr>
</table>
</div>
<map name="navbar">
<area shape="rect" coords="247,185,445,220" href="http://www.roleplayandwritinghaven.com/forum.htm" alt="Forum" />
</map>
</BODY>
</HTML>
Hi Guys. Trying to pass variables from the javascript into my php script and into my SQL query so i can track the location of the iphone. So far i have... Code: <script type="text/javascript">
function getGPS() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showGPS, gpsError);
} else {
gpsText.innerText = "No GPS Functionality.";
}
}
long = position.coords.longitude;
lat = position.coords.latitude;
function gpsError(error) {
alert("GPS Error: "+error.code+", "+error.message);
}
function showGPS(position) {
gpsText.innerHTML = "<?php $long = "".$_GET['long'].""; $lat = "".$_GET['lat'].""; $sqldel = "INSERT INTO `location` (`id` ,`user_id` ,`long` ,`lat`) VALUES (NULL , '$user', '$long','$lat' );"; mysql_query($sqldel) or die(mysql_error()); echo "$long"; echo "$lat"; ?>";
}
</script>
This gets the coordinates in javascript and the php runs and i get a new record in the database but it doesnt pass the variables from java to php. Anyone know a workaround to get the variables from the iphone to sql on a single page? I want this to run in the background and refresh every now and then so i can track users location. thanks. Adam. Hi, I would like to get the Lat/Lng coordinates into teh values in my form but instead I get N/E values, Can anyone please help? Here is my page: http://www.nakedsloth.com/where/default.php here is my code: Code: <?php
include_once("common.php");
$markers = mysql_query("SELECT * FROM wheremarkers1");
while($row1 = mysql_fetch_array($markers))
{
// echo 'Lat: '.$row1['rslat'];
// echo 'Long: '.$row1['rslon'];
// echo 'Email: '.$row1['rsemail'];
// echo 'Name: '.$row1['rsname'];
// echo 'Desc: '.$row1['rsdesc'];
}
// $lat = $_REQUEST['lat'];
// $lng = $_REQUEST['lng'];
// if($lat != 51.464960 && $lng != -1.40625){
// $lat = $_POST['lat'];
// $lng = $_POST['lng'];
// }
?>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/navbar-fixed-top.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="js/ie-emulation-modes-warning.js"></script>
</head>
<style>
body{
font-family: arial;
font-size: 13px;
width:100%;
}
#container{
width:100%;
}
#mapCanvas {
width: 70%;
height: 80%;
float: left;
}
#infoPanel {
width: 400px;
float: left;
margin-left: 10px;
}
#infoPanel div {
margin-bottom: 5px;
}
#markerStatus { display:none; }
#info { display:none; }
#geot { display:none; }
body { font: normal 10pt Helvetica, Arial; }
ul#topmenu { height:30px; width:100%; margin-top:0px;}
ul#topmenu li { display:block; float:left; margin-right:10px; margin-top:14px; }
.telephone { display:none; }
.website { display:none; }
</style>
<body style="margin:0px; border:0px; padding:0px;">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();
$( document ).ready(function() {
});
$( document ).ready(function() {
$("#rscategory").change(function(){
var id = $(this).find("option:selected").attr("id");
switch (id){
case "poi":
$(".telephone").css( "display","block" );
$(".website").css( "display","block" );
$('input[name="rswebsite"]').val('n/a');
$('input[name="rstelephone"]').val('0');
break;
case "hiddenmsg":
$(".telephone").css( "display","none" );
$(".website").css( "display","none" );
$('input[name="rswebsite"]').val('n/a');
$('input[name="rstelephone"]').val('0');
break;
case "landmark":
$(".telephone").css( "display","none" );
$(".website").css( "display","none" );
$('input[name="rswebsite"]').val('n/a');
$('input[name="rstelephone"]').val('0');
break;
case "pub":
$(".telephone").css( "display","none" );
$(".website").css( "display","none" );
break;
case "cafe":
$(".telephone").css( "display","none" );
$(".website").css( "display","none" );
break;
case "GreatView":
$(".telephone").css( "display","none" );
$(".website").css( "display","none" );
$('input[name="rswebsite"]').val('n/a');
$('input[name="rstelephone"]').val('0');
break;
}
});
});
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
updateMarkerCity(responses[6].formatted_address);
updateMarkerCountry(responses[7].formatted_address);
} else {
updateMarkerAddress('Cannot determine address at this location.');
}
var country;
for (i=0;i<results[0].address_components.length;i++){
for (j=0;j<results[0].address_components[i].types.length;j++){
if(results[0].address_components[i].types[j]=="Region")
country = results[0].address_components[i].long_name
}
}
var city;
city = results[1].address_component['rsCity']
});
}
function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');
latDir = "N";
lngDir = "E";
if(latLng.lat() < 0){
latDir = "S";
}
if(latLng.lng() < 0){
lngDir = "W";
}
qlat = Math.abs(latLng.lat());
ilat = Math.floor(qlat);
xlat = ((qlat - ilat)*60);
qlng = Math.abs(latLng.lng());
ilng = Math.floor(qlng);
xlng = ((qlng - ilng)*60);
xlat = Math.round(xlat*1000)/1000;
xlng = Math.round(xlng*1000)/1000;
d2 = xlat.toFixed(3);
e2 = xlng.toFixed(3);
d1 = ilat.toString();
d2 = d2.toString();
e1 = ilng.toString();
e2 = e2.toString();
n = Math.abs(latLng.lat()); // Change to positive var decimal = n - Math.floor(n)
var decimal = n - Math.floor(n);
document.getElementById('geot').innerHTML = [
latDir + ' ' + d1 + ' ' + d2,
lngDir + ' ' + e1 + ' ' + e2
].join(', ');
document.form1.rsLat.value = [
latLng.lat()];
document.form1.rsLong.value = [
latLng.lng()];
document.form1.rsLat.value = [
latDir + ' ' + d1 + ' ' + d2];
document.form1.rsLong.value = [
lngDir + ' ' + e1 + ' ' + e2];
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
function updateMarkerCity(city) {
document.getElementById('city').innerHTML = city;
}
function updateMarkerCountry(country) {
document.getElementById('country').innerHTML = country;
}
function centerPosition(newgeo,newzoom) {
// document.getElementById('mcenter').innerHTML = [newgeo];
// document.getElementById('mzoom').innerHTML = [newzoom];
// document.form2.mcenter2.value = [newgeo];
// document.form2.mzoom2.value = [newzoom];
document.form1.mcenter1.value = [newgeo];
document.form1.mzoom1.value = [newzoom];
}
function initialize() {
var latLng = new google.maps.LatLng(51.507222, -0.1275);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 4,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latLng,
title: 'Point A',
map: map,
draggable: true
});
// Update current position info.
updateMarkerPosition(latLng);
geocodePosition(latLng);
// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function() {
updateMarkerAddress('Dragging...');
updateMarkerCity('');
updateMarkerCountry('');
});
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerStatus('Dragging...');
updateMarkerPosition(marker.getPosition());
});
google.maps.event.addListener(marker, 'dragend', function() {
updateMarkerStatus('Drag ended');
geocodePosition(marker.getPosition());
});
google.maps.event.addListener(map, 'bounds_changed', function(){
var newgeo = map.get('center');
var newzoom = map.get('zoom');
centerPosition(newgeo,newzoom);
});
}
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li class="active"><a href="./">Fixed top</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a>
</p>
<p>
<ul id="topmenu">
<li><a href="default.php">Add marker</a></li>
<li><a href="default2.php">View markers</a></li>
</ul>
<div id="container">
<div id="mapCanvas"></div>
<div id="infoPanel">
<br />
<div id="markerStatus"></div>
<div id="info"></div>
<div id="geot"></div>
<form id="form1" name="form1" action="add.php" method="post">
<input type="hidden" name="newcenter" id="mcenter1" value="mcenter1">
<input type="hidden" name="newzoom" id="mzoom1" value="mzoom1">
<input type="hidden" id="rsLat" name="rsLat" size="18"> <br />
<input type="hidden" id="rsLong" name="rsLong" size="18"> <br />
Name:
<input type="text" id="rsname" name="rsPubName"><br />
<b>Category:</b> <select id="rscategory" name="rscategory">
<option id="GreatView" value="Great View">Great view</option>
<option id="cafe" value="Cafe">Cafe</option>
<option id="pub" value="Pub">Pub</option>
<option id="restaurant" value="Restaurant">Restaurant</option>
<option id="theatre" value="Theatre">Theatre</option>
<option id="venue" value="Venue">Venue</option>
<option id="landmark" value="Landmark">Landmark</option>
<option id="poi" value="Place of Interest">Place of Interest</option>
<option id="hiddenmsg" value="Hidden Message">Hidden Message</option>
<option id="secretspot" value="Secret Spot">Secret Spot</option>
<option id="hiking" value="Hiking">Hiking</option>
<option id="hiking" value="Camping">Camping</option>
<option id="dogfriendly" value="Dog Friendly">Dog Friendly</option>
<option id="valueformoney" value="Value for money">Value for money</option>
<option id="streetview" value="Street View">Interesting street view</option>
</select>
<br />
Description:
<textarea id="desc" name="rsdesc" ></textarea>
Address:
<textarea id="address" name="rsAddress" ></textarea>
<input type="hidden" id="wlat" name="rslat" size="10"><br />
<input type="hidden" id="wlon" name="rslng" size="10"><br />
City:
<textarea id="city" name="rsTown" ></textarea><br />
<textarea id="country" name="rsCounty" ></textarea><br />
<div class="telephone">
Telephone:
<input type="text" name="rsTel">
</div>
<div class="website">
Website:
<input type="text" name="rsWebsite">
</div>
<input type="submit" name="submit" value="Pin Your Location">
</form>
<br /><br />
<!--
<b>Current map center:</b>
<div id="mcenter"></div>
<div style="float:left;"><b>Current map zoom level: </b></div><div id="mzoom" style="float:left;"></div>
<div style="clear:both;"></div>
-->
<!--
<form id="form2" name="form2" method="post" action="center.php">
<input type="hidden" name="newcenter" id="mcenter2" value="mcenter2">
<input type="hidden" name="newzoom" id="mzoom2" value="mzoom2">
<input type="submit" name="submit" value="Center Marker On Map">
</form>
<div style="width:300px; font-size:10pt; color:#999; text-align:justify;">'Center Marker On Map' ... This uses cookies to remember location and zoom level.</div>
-->
</div>
</div>
</p>
</div>
</div> <!-- /container -->
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
Hello, I'm more looking for advice but any helpful examples would be great. So basically what I need to accomplish is a grid, that I can drop objects into, then save the coordinates. So let's say I have a 3x3 set of tiles which will represent "floor tiles", and I load from my MySql database a users "furniture", what's the best method of being able to take these dynamic items drop them on a tile which can be then saved in an xml file or something. What are the best j/s libraries for this? I know jQuery and mootools have drag and drop functions but can they accomplish what I'm looking for? Any feedback will help, I'm comfortable coding in js but I want to do it effeciently and there's got to be people who have done similar things. |
|||||||