|
JavaScript - Restrict Div Hover Position
I'm currently generating some tooltips to display data for certain items in a game. The tooltips and stats work great, however, for certain items, the tooltip gets long and will extend pass the viewable range for the user. Here are the links:
test page: http://cory.wellen.googlepages.com/Build_Hover_Test.htm javascript: http://cory.wellen.googlepages.com/hover.js css (for hover div only): http://cory.wellen.googlepages.com/affe.css If you hover over the links of items (like villages, barracks, etc.) a tooltip will pop up to show you the stats. But if you notice, for items like castles, the tooltip can extend past the viewable range for the user. Any suggestions are greatly appreciated. Similar TutorialsHi all, I tried to create a mouse over effect using jquery. When user hovers #box1_trigger link, the #service_box1 div should change it's background position. The code i created is the following it's not working for some reason. html: Code: <div class="service_box box1" id="service_box1">
<a href="#" id="box1_trigger">
<h3>bla bla</h3>
<p>bla bla bla bla bla</p>
</a>
</div>
javascript: Code: <script type="text/javascript">
$(document).ready(function() {
$("#box1_trigger").hover(
function() {
$("#service_box1").stop().animate({backgroundPosition:"(0 -250px)"}, "slow");
},
function() {
$("#service_box1").stop().animate({backgroundPosition: "0 0"}, "slow");
}
);
});
</script>
css: Code: #service_box1{
width:318px; height:282px;
float:left;
background:url(images/services_panel.png) 0 0 no-repeat;
}
a#box1_trigger{
width:100%; height:100%;
float:left;
display:block;
}
Could you help me fix this please?? Sorry if I'm describing this wrong. But I was wondering if there was any premade dropdown menu which opens based on what position you are on the page. For example, when I'm on the top of the page and hover the mouse over the dropdown menu, the menu opens upward instead of downward because the navigation is mid-screen. But if I was to be more than halfway across the screen and still see the navigation as it was on top of the screen and hover the mouse over it, the dropdown menu opens downward as oppose to up. I hope I explained that right or at least if it sounds right to someone. Any help would be greatly appreciated. If you could direct me to a resource you may know of. Thank you for your time. I'm new to javascript and am not sure why this works in firefox and not chrome. I am trying to create a script that keeps an object fixed horizontally while bing positioned absolute vertically. if I replace the toPP variable in document.getElementById('fire').style.top = toPP; with say '50px' it will move the element down 50 pxs, but how I have it currently it doesn't do anything in chrome Code: <script type="text/javascript" >
window.onscroll = function()
{
if( window.XMLHttpRequest ) {
var x = 0 -document.documentElement.scrollTop;
var toP = String(x);
var toPP = toP + "px";
document.getElementById('fire').style.position = 'fixed';
document.getElementById('fire').style.top = toPP;
}
}
</script>
Hi all. I have the form below... Code: <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<form action="thankyou.php" method="get">
<td width="16%"><b>Your Name</b></td>
<td width="84%"<input type="name" size="50" name="name" id="name"</td>
</tr>
<tr>
<td width="16%"><b>Your E-mail</b></td>
<td width="84%"<input type="text" size="50" name="email" id="email"</td>
</tr>
<tr>
<td width="16%"><b>Text Area</b><br>Limit 50,000 characters<br>X amount characters left</td>
<td width="84%"><textarea name="summary" id="summary" cols="50" rows="10"></textarea></td>
</tr>
<tr>
<td><b>Video URL</b></td>
<td><input type="text" size="50" name="video" id="video"></td>
</tr>
<tr>
<td><b>Upload Image</b></td>
<td><input type="file" size="50" name="image" id="image"></td>
</tr>
<tr>
<td><br><input type="submit"></form> </td>
<td</td>
</tr>
</table>
I would like to change it so... When somebody submits a Video URL, the Upload Image input box is disabled When somebody does an Upload Image, the Video URL field is disabled If somebody enters more than 1,000 characters in the Text Area, then both Video URL and Upload Image fields are disabled. When somebody enters a Video URL or does an Upload image, the Text Area is limited to 1,000 characters For the words "Limit 50,000 characters" to change to "Limit 1,000 characters" if somebody enters a Video URL or Upload Image Where it says X amount characters left, it should changing depending on the amount of characters a user has typed in. Can anybody please help me achieve this above using JavaScript? It would be infinitely appreciated. Thank you. i want to restrict refresh option for online examination can any one give me solution as early as possible .....please I have written below script for timer when i refresh the page timer is reset again. <script type="text/javascript"> var settimmer = 0; $(function(){ window.setInterval(function() { var timeCounter = $("b[id=show-time]").html(); var updateTime = eval(timeCounter)- eval(1); $("b[id=show-time]").html(updateTime); if(updateTime == 0){ $("div[id=my-timer]").html("").html("Page redirecting........"); window.location = ("welcome.php"); } }, 1000); }); </script> // Body Part <div id="my-timer"> Page Will Redirect with in <b id="show-time">1800</b> seconds </div> Thank You ...! I need to convert a position:fixed element to position:absolute when the user resize their browser window below 1000px. Right now it does nothing. The element always keeps the fixed positioning even after resizing the window. Here's what I have right now: Code: <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<base href="http://www.area51entertainment.co/" />
<title>Emoto <?php echo "$section"; ?></title>
<meta charset="UTF-8" />
<meta name="verify-v1" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="Andrew McCarrick" />
<meta name="robots" content="index, follow" />
<style type="text/css">
body,html {
background: #FFFFFF; /* Old browsers */
color: #000000;
font-family: Verdana;
margin-right:auto;
margin-left:auto;
max-width:1000px;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
</style>
<link rel="stylesheet" href="emoto/style.css" media="screen" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="http://www.area51entertainment.co/TouchIcon.png" />
<link rel="apple-touch-icon-precomposed" href="http://www.area51entertainment.co/TouchIcon.png" />
<link rel="image_src" href="./logo.png" />
<script language="javascript" src="emoto/float.js"></script>
</head>
<body>
<div class="wrapper">
<div id="header_float">
<div class="header_wrapper">
<div class="logo">
Picture
</div>
<div class="links">
Home | Settings | Notifications | Requests | Messages | Search Bar
</div>
<div class="links_right">
Profile Link/Sign-Out
</div>
</div>
</div>
<div class="content_wrapper">
Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2
Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2
Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2
Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 T
est2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2
</div>
</div>
</body>
</html>
style.css Code: a:link {color: #FFFFFF; text-decoration: none;}
a:visited {color: #FFFFFF; text-decoration: none;}
a:active {color: #FFFFFF; text-decoration: none;}
a:hover {color: #3399FF; text-decoration: none;}
.wrapper{
min-height: 2000px;
min-width: 1000px;
}
#header_float{
width: 100%;
min-width: 1000px;
height: 35px;
left:0;
right:0;
top:0;
position: fixed;
background: #49963A;
z-index: 1000;
}
.header_wrapper{
width: 1000px;
height: 35px;
margin-right:auto;
margin-left:auto;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
color: #FFFFFF;
}
.logo{
float: left;
width: 150px;
height: 25px;
font-size: 26px;
position: relative;
top: -1px;
left: 8px;
}
.links{
float: left;
width: 670px;
height: 25px;
position: relative;
top: 7px;
}
.links_right{
float: right;
width: 180px;
height: 25px;
position: relative;
top: 7px;
}
.content_wrapper{
position: relative;
top: 35px;
width: 995px;
min-height: 450px;
}
img{
border: 0px;
}
float.js Code: if (screen.availWidth<=999)
document.getElementById('header_float').style.position = 'absolute';
else
document.getElementById('header_float').style.position = 'fixed';
What is "lb-position" and how is it used? It's used in a lightbox tutorial, and in looking for an explanation I've found it in a handful of places, but I don't know what it is or what it does. Thank you.
Hi, i am simply trying to alert the left position of a css layer. Javascript: Code: var Element = document.getElementById('box');
alert(Element.style.left);
CSS Code: #box {position:absolute;
left:150px;
top:150px;
background-color:blue;
height:100;
width:100;}
HTML Code: <div id="box"> </div> The problem is the alert is blank and i can't understand why. thanks 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!!! I have a quick search box in my home page that I can't seem to get working properly. When the user types in the input field and hits the "Add" button, the word they typed in appears in a box below the "Add" button. I got that, no problem. The issue arises because I want the user to be able to hover over any of the words they typed in, see some visual change (like text color changing), and be able to click the word to delete it. Right now, when the user hits the "Add" button, a function is called and the word is stored to an array. Then I have a for() loop to display the contents of the array, but the for() is only displaying one word on the screen and it is the most recent word that was added. How can I make this right? HTML Form: Code: <form> <table> <th>Recipe Quick Search</th> <tr> <td class="quickSearchHeader">Ingredient:</td> </tr> <tr> <td><input type="text" name="quicksearch" size="18" id="quickSearchInput"/></td> </tr> <tr> <td class="quickSearchAddButton" name="quickSearchAddButton" id="quickSearchAddButton"><input type="image" src="images/quickAddButton.png" name="quicksearchadd" alt="Add" onclick="insert(this.form.quicksearch.value);show();this.form.quicksearch.value='';return false;"/></td> </tr> <tr> <td class="quickSearchIngList" id="quickSearchIngList" valign="top"></td> </tr> <tr> <td class="QSSubmit"><input type="submit" name="quickSearchSubmit" value="Search!"></td> </tr> </table> </form> Javascript Code: Code: <script type="text/javascript">
var array = new Array();
function insert(val)
{
if(val != "")
{
array.push(val);
}
}
function show()
{
if(array.length > 0)
{
for(i = 0; i < array.length; i++)
{
document.getElementById('quickSearchIngList').innerHTML = "<p id='quickList'>" + array[i] + "</p>";
}
}
}
</script>
Rather than post everything here, I'll give a link to my stackoverflow post, which didn't receive a good answer. Note: I have a different function that uses toggleClass on these same elements One person suggested using CSS. That worked very well, until I went to toggle my elements the second time (remove the added class). Then, the new "transition" line in my CSS caused the jQuery transition to perform very quickly. html - Using jquery .hover, with $this - Stack Overflow How can I get hover to work? Or better, use css transition, which I prefer - without ruining my jQuery toggleclass' animate time? Thanks. Instead of loading the data when the page loads (thus making the page load slower) I wanna make it load when you hover over the tool tip so how would I change this? PHP Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Test Screenname</title> <style type="text/css"> body {color:#000;background-color:#FFF; font-family:Arial, Helvetica, sans-serif;} /*tooltip*/ div.tooltip { width: 200px; color: #fff; text-align: center; } div.tooltip h4 { color: #fff; font-weight: bold; text-shadow: 2px 2px 1px #222; margin: 0; padding: 13px 10px 5px; background: url(img/balloon.png) top left no-repeat !important; background: url(img/balloon.gif) top left no-repeat; font-size: 11px; } div.tooltip p { margin: 0; padding: 0 10px 15px; text-shadow: 2px 2px 1px #222; background: url(img/balloon.png) bottom left no-repeat !important; background: url(img/balloon.gif) bottom left no-repeat; font-size: 10px; } </style> <script type="text/javascript" src="mootools.js"></script> <script type="text/javascript"> window.onload=function() { /* setup tooltips */ var as = []; $S('a').each(function(a){ if (a.getAttribute('title')) as.push(a); }); new Tips(as, {maxOpacity: 0.9, maxTitleChars: 25}); } </script> </head> <body> <a href="#" title=" <?php $url = "http://www.blockstatus.com/aim/status-checker/index.php"; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL,$url); curl_setopt($ch, CURLOPT_POST, 1); curl_setopt($ch, CURLOPT_POSTFIELDS,"aimac=screenname"); curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_USERAGENT, $_SERVER['HTTP_USER_AGENT']); $result2 = curl_exec ($ch); curl_close ($ch); $data = $result2; $pattern = '/Status:<\/b>(.*?)<br.*?><\/td>/i'; preg_match($pattern, $data, $status); $output = str_replace("Status: ", "", $status[1]); $aimstatus = trim($output); echo "$aimstatus"; ?> ">Test tooltip</a> </body> </html> Hi guys. How would I implement this css: Code: .story-wrap:hover .dates This obviously allows the .dates div to react when I hover over the .story-wrap div. How would I select the same in javascript with this code: Code: $(".story-wrap .dates").hover(function () {
Because currently it just reacts when .dates is hovered over. Cheers! I have two divs, one is the triggering and the other is the hidden one. Hovering the first div will show the hidden div. To hide the div the user must "mouseout" from this div, however if the user "mouseout" from the first div nothing will happend and that is the problem because if there are another group next to them, and the user pass from one triggering div to the next this will show the two hidden divs stacking over one another. This is for a horizontal menu (something like www.oracle.com). The actual code is this: Code: <div id="option_a"><p>FIRST OPTION</p>
<div id="option_a_menu">
**HERE ARE LIST, DIVS, IMGS**
</div>
</div>
<div id="option_b"><p>SECOND OPTION</p>
<div id="option_b_menu">
**HERE ARE LIST, DIVS, IMGS**
</div>
</div>
The JS: Code: function init() {
oOptionA=document.getElementById("option_a");
oOptionAmenu=document.getElementById("option_a_menu");
oOptionB=document.getElementById("option_b");
oOptionBmenu=document.getElementById("option_b_menu");
//behaviors
addEvent(oOptionA,'mouseover',goOptionA);
addEvent(oOptionAmenu,'mouseout',outOptionAmenu);
addEvent(oOptionB,'mouseover',goOptionB);
addEvent(oOptionBmenu,'mouseout',outOptionBmenu);
}
function goOptionA() {
oOptionAmenu.style.visibility="visible";
}
function outOptionAmenu() {
oOptionAmenu.style.visibility="hidden";
}
function goOptionB() {
oOptionBmenu.style.visibility="visible";
}
function outOptionBmenu() {
oOptionBmenu.style.visibility="hidden";
}
The user will hide the option A menu only when his mouse clears the div that showed up. However is he hover the triggering div and go just to the next triggering div (The second div) will trigger the visibility of their menu, but the previously menu will still on stage, stacking the two menus. I was trying this to solve the problem: Code: ...addEvent(oOptionA,'mouseout',goOptionA);
function goOptionA() {
if (oOptionAmenu!=hover) {
oOptionAmenu.style.visibility="hidden";
} else {
oOptionAmenu.style.visibility="visible";
}
}
However, this is not working, something is wrong with the "oOptionAmenu!=hover" but how can I do this ? Thanks in advanced hi! i would just like to say first of all, that i only use forums for help unless i've exacerbated all other forms of help as i am such a javascript noob! so please bear with my while i try to explain my problem... i've isolated the javascripts to this page > http://nang-nang.net/tumblr/blog/help.html in this example the plant image is using lightbox 2 and the bird.gif is using prototip2 to create a tooltip (that displays my latest tweet) (i should mention that these scripts will be used to pimp out my tumblr blog/portfolio http://bubblejam.tumblr.com eventually) the problem: i need the tooltip to stay put! i've managed to put the bird in a <div style="position:fixed..." etc so that's fine. but the tooltip isn't fixed and moves as the page scrolls down! can anyone take a look at what javascript i've got so far and fingers crossed there's a simple solution! thanks!! I am creating calander control for the 1 year using javascript.the day in which click a table is pop up at absloute position . i want table is popup at relative position where selected date is click. Here is my code <script language="javascript" type="text/javascript"> var k=0; var month; var pagedata; var check=0; var tabledata = ''; var counter = 0; var editVal=0; var editRow=0; var selecteditemcode=""; var counter=0; function day_title(day_name) { mycurrent_cell = document.createElement("td"); currenttext = document.createTextNode(String(day_name)); mycurrent_cell.appendChild(currenttext); } function makeArray(n) { this.length=n; for (var i = 1; i <= n; i++) this[i] = 0 return this } var flag=false; var index; var tempdata; var mybody ; var rowData = new Array(); var colData = new Array(); var mytable function fill_table(m_name,m_length,mm) { counter+=1; if(k==0) { alert(this_month); k=this_month; } else { alert(k); k +=1; if(k>12) { alert(k); alert(this_year); if(flag==false) { this_year+=1; flag=true; alert("IN "+k); alert("IN "+this_year); } } } mybody = document.getElementById('showtb'); mytable= document.createElement("table"); mytable.setAttribute("id",+String(m_name)+"_"+String(this_year)); mytablebody = document.createElement("tbody"); head_row = document.createElement("tr"); head_cell = document.createElement("td"); headtext = document.createTextNode(String(m_name)+"_"+String(this_year)); head_cell.appendChild(headtext); head_cell.setAttribute('colSpan','7'); head_row.appendChild(head_cell); head_cell.setAttribute('className','titlebar'); head_row.appendChild(head_cell); mytablebody.appendChild(head_row); mycurrent_row = document.createElement("tr"); counter+=1; mycurrent_row.setAttribute("id",String(counter)); mycurrent_cell = document.createElement("td"); currenttext = document.createTextNode("Sun"); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); mycurrent_cell = document.createElement("td"); currenttext = document.createTextNode("Mon"); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); mycurrent_cell = document.createElement("td"); currenttext = document.createTextNode("Tue"); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); mycurrent_cell = document.createElement("td"); currenttext = document.createTextNode("Wed"); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); mycurrent_cell = document.createElement("td"); currenttext = document.createTextNode("Thu"); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); mycurrent_cell = document.createElement("td"); currenttext = document.createTextNode("Fri"); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); mycurrent_cell = document.createElement("td"); currenttext = document.createTextNode("Sat"); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); mytablebody.appendChild(mycurrent_row); day=1 if(m_name=="February" ) { if((this_year%4)==0) { m_length +=1; } } pagedata=''; var ddl; counter +=2; mycurrent_row = document.createElement("tr"); mycurrent_row.setAttribute("id",counter); for (var i=1;i<start_day;i++) { if(start_day<8) { mycurrent_cell = document.createElement("td"); currenttext = document.createTextNode(" "); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); mycurrent_cell.setAttribute('className','promptbox'); mycurrent_row.appendChild(mycurrent_cell); } } var blnFlagFirstline=false; for (var i=start_day;i<8;i++) { blnFlagFirstline=true; alert("this_day "+ this_day+ " i "+ i); if(blgFlagButtons==false) { if(this_day <=day) { mycurrent_cell = document.createElement("td"); currenttext = document.createElement("a"); currenttext.setAttribute("href", "javascript:fnDivertedFlight();"); currenttext.setAttribute("onClick","this.blur();"); var txt = document.createTextNode(""+String(day)); currenttext.appendChild(txt); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); blgFlagButtons=true; } else { if(blgFlagButtons==false) { mycurrent_cell = document.createElement("td"); currenttext = document.createTextNode(""+String(day)); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); } else { mycurrent_cell = document.createElement("td"); currenttext = document.createElement("a"); currenttext.setAttribute("href", "javascript:fnDivertedFlight();"); currenttext.setAttribute("onClick","this.blur();"); var txt = document.createTextNode(""+String(day)); currenttext.appendChild(txt); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); } } } else { mycurrent_cell = document.createElement("td"); currenttext = document.createElement("a"); currenttext.setAttribute("href", "javascript:fnDivertedFlight();"); currenttext.setAttribute("onClick","this.blur();"); var txt = document.createTextNode(""+String(day)); currenttext.appendChild(txt); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); } day++; } if(blnFlagFirstline==true) { mytablebody.appendChild(mycurrent_row); } counter+=1; mycurrent_row = document.createElement("tr"); mycurrent_row.setAttribute("id",counter); while (day <= m_length) { for (var i=1;i<=7 && day<=m_length;i++) { if(blgFlagButtons==false) { if(this_day <=day) { mycurrent_cell = document.createElement("td"); currenttext = document.createElement("a"); currenttext.setAttribute("href", "javascript:fnDivertedFlight();"); currenttext.setAttribute("onClick","this.blur();"); var txt = document.createTextNode(""+String(day)); currenttext.appendChild(txt); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); blgFlagButtons=true; } else { mycurrent_cell = document.createElement("td"); currenttext = document.createTextNode(String(day)); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); } } else { mycurrent_cell = document.createElement("td"); currenttext = document.createElement("a"); currenttext.setAttribute("href", "javascript:fnDivertedFlight();"); currenttext.setAttribute("onClick","this.blur();"); var txt = document.createTextNode(""+String(day)); currenttext.appendChild(txt); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); } day++ } mytablebody.appendChild(mycurrent_row); counter+=1; mycurrent_row = document.createElement("tr"); mycurrent_row.setAttribute("id",counter); } mytable.appendChild(mytablebody); mybody.appendChild(mytable); mytable.setAttribute("border", "10"); //mytable.style.background="aliceblue"; mytable.style.fontFamily="Verdana"; //mytable.style.width="1000px"; mytable.setAttribute("className","promptbox"); mytable.style.fontSize="10pt"; start_day = i } var blgFlagButtons; function fnCalender() { blgFlagButtons=false; month=new makeArray(12) month[1]="January" month[2]="February" month[3]="March" month[4]="April" month[5]="May" month[6]="June" month[7]="July" month[8]="August" month[9]="September" month[10]="October" month[11]="November" month[12]="December" month_length = new makeArray(12) month_length[1]=31 month_length[2]=28 month_length[3]=31 month_length[4]=30 month_length[5]=31 month_length[6]=30 month_length[7]=31 month_length[8]=31 month_length[9]=30 month_length[10]=31 month_length[11]=30 month_length[12]=31 today = new Date() today= new Date("July 13, 2008");//'Wed Oct 29 00:00:00 UTC+530 2008' this_day = today.getDate() this_month = today.getMonth()+1 this_year = today.getYear() this_year = (this_year< 1000) ? this_year + 1900 : this_year; begin_date = new Date("July 01, "+this_year) if((this_year%4)==0) { start_day = begin_date.getDay()+1 } else { start_day = begin_date.getDay()+1 } var MhVal; if(this_day>1) { MhVal=this_month; for(var i=1; i<=13;i++) { mon[i]=month[MhVal]; monlen[i]=month_length[MhVal] MhVal +=1 if(MhVal==13) { MhVal=1; } } } else { MhVal=this_month; for(var i=1; i<=12;i++) { mon[i]=month[MhVal]; monlen[i]=month_length[MhVal] MhVal +=1 if(MhVal==13) { MhVal=1; } } } if (start_day == 1){ start_day = 8 } if(this_day>1) { for (var m = 1;m<=13;m++){ //alert('month[m] - '+mon[m]+' month_length[m] - '+monlen[m]+' m - ' +m); fill_table(mon[m],monlen[m],m) // tabledata += "id"+counter+"="+pagedata; } } else { for (var n = 1;n<=12;n++){ fill_table(mon[n],monlen[n],n) } } } </script> <script language="javascript" type="text/javascript"> function fnDivertedFlight() { prompt3('', 'Roster','Diverted Flight Detail </B>', 'fnDivertedValues'); } function prompt3(promptpicture, prompttitle, message, sendto) { var posx = 0; var posy = 0; var e = window.event; if(e!=null) { if (e.pageX || e.pageY) { posx = e.pageX; posy = e.pageY; } else if (e.clientX || e.clientY) { posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } } else { posx = 100; posy = 100; } promptbox = document.createElement('div'); promptbox.setAttribute ('id' , 'prompt') document.getElementsByTagName('body')[0].appendChild(promptbox) promptbox = eval("document.getElementById('prompt').style") promptbox.position = 'absolute' promptbox.top = posy promptbox.left = posx promptbox.width = 430 promptbox.border = 'outset 1 #bbbbbb' //Here I am open popup Tabletable } function fnDivertedValues(value1,value2,value3,value4,value6,value7,value5) { alert(value1+" , "+ value2+" , "+value3+" , "+value4+" , "+value5); Hello I am hoping to position some JavaScript on a Web page. Would I use something like this: CSS Code: #diagram {
margin-left: 200px;
margin-top: 100px;
}
HTML
<script>JavaScript code here</script>
<div id="diagram"
</div>
Thanks for any advice. Theoretically this code was supposed to be ok isn't it? But nothing is happening! help! This code works great for splitting value to textbox.. However; It quits working in example 2 when I move the select outside the form tags Code: <!-- EXAMPLE 1 WORKS-->
<script type="text/javascript">
function Split(sel,first)
{
if (sel.selectedIndex == 0 ) return;
var temp = sel.value.split(",");
sel.form["F"+first].value = temp[0];
sel.form["F"+(first+1)].value = temp[1];
sel.form["F"+(first+2)].value = temp[2];
}
</script>
<form method='post'>
<input type="text" name="F1" value="" >
<input type="text" name="F2" value="" >
<input type="text" name="F3" value="" >
<select onChange="Split(this,1)">
<option> ===Select Color ==== </option>
<option value='000,000,000'>black</option>
<option value='169,169,169'>grey</option>
<option value='000,000,255'>blue</option>
<option value='153 102,255'>aqua</option>
</select>
</form>
Help with the onChange to work outside the form tags. Code: <!-- EXAMPLE 2 NEED HELP-->
<script type="text/javascript">
function Split(sel,first)
{
if (sel.selectedIndex == 0 ) return;
var temp = sel.value.split(",");
sel.form1["F"+first].value = temp[0];
sel.form1["F"+(first+1)].value = temp[1];
sel.form1["F"+(first+2)].value = temp[2];
}
</script>
<form method='post' name="form1">
<input type="text" name="F1" value="" >
<input type="text" name="F2" value="" >
<input type="text" name="F3" value="" >
</form>
<!-- NEED TO MODIFY THE ONCHANGE TO WORK IN THIS POSITON?? -->
<select onChange="Split(this.form1.value,1)">
<option> ===Select Color ==== </option>
<option value='000,000,000'>black</option>
<option value='169,169,169'>grey</option>
<option value='000,000,255'>blue</option>
<option value='153 102,255'>aqua</option>
</select>
Hi, Im trying to change the position of a div when a button is clicked. The js is: Code: function curPos() {
objDivStrip = document.getElementById('thumbview');
return objDivStrip.style.top;
}
function up(pos) {
//get objects
objImgStrip = document.getElementById('str');
objDivStrip = document.getElementById('thumbview');
//Get End position
var totImg = (objImgStrip.height - 100) / 130;
var endpos = totImg * 130;
if (pos=endpos)
{
return false;
}
else
{
objDivStrip.style.top = pos - 130;
}
}
and the html on the button is Code: <img id="arrow" src="images/arrow_up.jpg" onclick="up(curPos());" /> The code doesnt work but if anyone could point me in the direction to get it to work your help is greatly appreciated. Cheers Sol |
|||||||