|
JavaScript - Matching Top Css Position With Another Element
So I have created a simple calendar (http://www.akapa.org/newsite/events/calendar.htm) and I have a bunch of "More Info" buttons I made from cells. In a table cell to the right are a bunch of hidden DIV's that all appear when you rollover a "More Info" button, obviously giving more details about the calendar date/event.
My problem is that I have to give an exact "top" css position to every one of these hidden div's every single time I add a new event to the calendar. I want to dynamically tell each hidden div to match the "top" css position to match the top position of each "More Info" button. How do I do that? Similar TutorialsHello, I've been trying the find the (x,y) co-ordinates of an element. I've been using; Code: document.getElementById(element).style.top document.getElementById(element).style.left However this doesn't always work in my script. Now, I've googled how to find the position of an element. And come accross many scripts which supposedly all find the position of any object. Some are very long scripts and some are very short all using a variety of methods. Incidently none of which work, they all return (0,0). I have a question, why would someone create a script to do what one line of code can do? Am I missing something. If I understand why it may help me work out why my script isn't working. Thank you. hi all, I was wondering if someone could help me about my problem I want to change the position of my div when the user scroll the page. Example: <div style="position:absolute;bottom:10px;> Scrolling text </div> I want to change the position to fixed when the user scroll the page using javascript. hope you could help. I have a floating div that stays at the bottom of the browser window while the user scrolls down a long page. The div reads "scroll down for more". How can I determine the current position of the div in relation to the top of the page, not the top of the browser window. I need to determine this because I would like to hide the div when the user scrolls to the top of the last page. I have looked at offsetParent, offsetHeight, scrollHeight, etc. I have the code for everything except determining the position of the div, or the distance of the div from the top of the page. I need to find the position of an element on the page relative to the browser window. Its part of a popup calendar script (and no, they don't want to change it so please don't suggest jQuery date-picker etc) The script uses these functions http://www.mattkruse.com/javascript/...on/source.html to find the position of the anchor to pop up the calendar next to it. Now the client wants to make the calendar fixed when the user scrolls so that it always stays on screen. The most graceful solution is using css position:fixed (I'm aware it doesn't work in IE6 - that's not a problem) I've been using the getAnchorWindowPosition function to get the coordinates but the numbers its giving are wrong (to different degrees depending on the browser) It was only 200px out in the Y axis in Firefox but in IE7&8 its off the screen. I've tried googling for an answer but I can't seem to find a workable solution, mostly I've been coming up with absolute position scripts or 'just use jquery' answers. The bit of code in bold in the code below is giving me this error in IE: Error: Code: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; Tablet PC 2.0; InfoPath.2; OfficeLiveConnector.1.4; .NET CLR 3.0.30729; OfficeLivePatch.1.3; MSN OptimizedIE8;ENGB) Timestamp: Tue, 16 Mar 2010 15:07:11 UTC Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917) Line: 0 Char: 0 Code: 0 URI: http://www.mateinastate.co.uk/users/mateinastate Code: Code: if(document.getElementById('msn1').innerHTML=="")
{
document.getElementById('msn1').style.display='none';
}
if(document.getElementById('yahoo1').innerHTML=="")
{
document.getElementById('yahoo1').style.display='none';
}
if(document.getElementById('skype1').innerHTML=="")
{
document.getElementById('skype1').style.display='none';
}
if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,18)=='<a href="http://">')
{
document.getElementById('facebook1').style.display='none';
}
else if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,11)=='<a href="">')
{
document.getElementById('facebook1').style.display='none';
} else
{
document.getElementById('fbook-add').innerHTML='Facebook Profile';
}
What it's saying isn't actually true (I don't think)... this is how the section is laid out: Code: <div id="submenu1" class="anylinkcss"> <ul> <li class="contact-pm"><a href="/index.php?do=pm&act=new&to=$RateViewProfileUserName$&returnurl=$ReturnURL$">PM me</a></li> <li class="contact-email"><a href="/index.php?do=email&id=$RateViewProfileUserId$">E-mail me</a></li> <li class="contact-msn" id="msn1">$RateViewProfileUser-profile_msn$</li> <li class="contact-yahoo" id="yahoo1">$RateViewProfileUser-profile_yahoo$</li> <li class="contact-skype" id="skype1">$RateViewProfileUser-profile_skype$</li> <li class="contact-facebook" id="facebook1"><a href="$RateViewProfileUser-profile_facebook$"><span id="fbook-add"></span></a></li> </ul> </div> <script type="text/javascript" src="/html_1/js/contact-information.js"></script> Does anyone know why this might error in just IE? 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, I'm relativly new to JS and brand new to the forum so you might need to dumb down your replys for my slightly lacking knowledge. That being said I do have a very solid grasp of html, css and am getting there with JS and its various frameworks. I'm integrating wordpress into an existing site for a friend and currently have the main blog page appear in a DIV. This is the best way to integrate in this case due to many reasons mostly of way the site is constructed. Code: <div class="scroll-pane" id="scrollbox"> WORDPRESS BLOG </div> My issue is that links within that DIV, in the blog, when clicked redirect the page. The simple answer to this would be to have them just open in a new page, which I can easily do with the below code. Code: function Init()
{
// Grab the appropriate div
theDiv = document.getElementById('scrollbox');
// Grab all of the links inside the div
links = theDiv.getElementsByTagName('a');
// Loop through those links and attach the target attribute
for (var i=0, len=links.length; i < len; i++) {
// the _blank will make the link open in new window
links[i].setAttribute('target', '_blank');
}
}
window.onload = Init;
But what I'd rather it do is have any link clicked inside the DIV to reload in that same DIV, similar to an iframe, but obviously without using an iframe, due to it's compatibility issues. Is this possible by editing the above code? If not what do I need? Thanks in advance for any help! 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';
Hi all, I'm trying to match two passwords to one another. The user enters the password into two fields and onblur from the second field, the function runs. Here is my code: Code: function validatePassword(inputField, inputField2, helpText, helpMessage) {
// First see if the input value contains data
if (!validateNonEmpty(inputField, helpText))
return false;
var inputField = document.getElementById('inputField').firstChild.nodeValue
var inputField2 = document.getElementById ('inputField2').firstChild.nodeValue
}
if (inputField !== inputField2) {
// The data is invalid, so set the help message and return false
if (helpText != null)
helpText.innerHTML = helpMessage;
}
else {
// The data is OK, so clear the help message and return true
if (helpText != null)
helpText.innerHTML = "";
}
};
Code: document.getElementById('password2').onblur = function() {
validatePassword(this, document.getElementById('password'), document.getElementById('password2_help'), "<p>Passwords don't match</p>'");
};
I am passing a help text to a span element inside the form: Code: <div class="fieldset"> <label for="password2">Confirm:</label> <input type="password" id="password2" name="password2" /> <span id="password2_help" class="help"></span><br/> </div><!--fieldset--> What's going on here? As far as I can tell it this should be working. Thanks, Andrew Hi All, Following pattern in bold is present in a variable bigvar which has around 100 characters. Variable test may vary var test = CONFIG_ID CONFIG_ID="_N/D1/N1/S4/P1/E1%231.1.1/T 3" Here is what I have tried: var RE = new RegExp (test+"=[A-Za-z0-9_%\"\.\/]+\s{2}[0-9]+"); var matched_val = bigvar.match(RE); alert(matched_val); It is giving null as match. Can anyone help me on this ? Thanks, Vinay I'm writing a matching game. I have uploaded an example. I want to be able to read the current image rather than the default image as a variable to compare in an IF statement. http://www.mediafire.com/file/8nq4s5...a/matching.zip I have an autocomplete script but it's currently returning results in a character is in the name anywhere at all, what I need it to do is only return matches if the characters are in sequence only. Example of how it is now if you type S it will return: Science Host Pass What I need it to do is only return a match if the first character is an S, and so on down the line in order. So if you type sam it should only return matches where the first 3 letter are sam in the order it's typed. Here's how the regexp is now: return value.replace(new RegExp("(?![^&;]+(?!<[^<>]*)(" + term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+", "gi"), "<strong>$1</strong>"); I have the code for the page below that has form with a text box for a email address. I am doing this exercise trying to understand the concepts of pattern matching in a function. ***My expression on needs to tests for *** 1. One or more word characters= /\w+ 2. one period= \.\ 3. one hyphen sign= \-\ 4. two or more characters that a-z, A-Z, 0-9, period or hyphen= \W+\. I have a alert message that display when the user has returned a invalid address. I don't need regex for testing an entire email address that is out of the scope that I am studying. I have wrote a function but to honest I am not sure where I have gone wrong and not exactly where I need to go to execute it correctly. <!DOCTYPE html> <html> <head> <title>Lab 2 Part 3</title> <meta charset="UTF-8" /> <body> <script> function validation(address) { var ok= address.search(/\w+\.\-\@\W+); if (ok==0) return true; else alert("please enter a valid email address"!!) return false; } </script> <form action="http://yahoo.com/formtest.php" method="post" onsubmit="return validation();"> <p> <label> Email Address: <input type="text" name="address" size="30"/> </label> </p> <input type="submit" value="Submit" /> </form> </body> </html> Here's another problem I'm having, I have to validate credit card types. My code worked originally. I simply checked the prefix for each type then verified the length with an if statement. However, I decided to change the code so that only numbers would work after the prefix (as the old code would have allowed any character). This is the code I have: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Credit Card Validation</title>
<link rel="stylesheet" type="text/css" href="default.css" />
<script type="text/javascript">
function checkCC(myForm)
{
var ccType;
var ccLength;
var ccNum = myForm.cardNum.value;
if (myForm.cardType.selectedIndex == 0)
{
ccType = "Visa";
}
else if (myForm.cardType.selectedIndex == 1)
{
ccType = "MasterCard"
}
else if (myForm.cardType.selectedIndex == 2)
{
ccType = "AmericanExpress"
}
switch(ccType)
{
case "Visa":
{
valid = /^4\d{12}(?:\d{3})?$/;
if (valid.test(myForm.cardNum.value))
{
alert("This is a Valid Visa Card");
return true;
}
else
{
alert("This Card Number is Invalid For Visa");
return false;
}
break;
}
case "MasterCard":
{
valid = /^5[1-5]\d{14}$/;
if (valid.test(myForm.cardNum.value))
{
alert("This is a Valid MasterCard Card");
}
else
{
alert("This Card Number is Invalid For MasterCard");
}
break;
}
case "AmericanExpress":
{
valid = /^3[47]\d{13}$/;
if (valid.test(myForm.cardNum.value))
{
alert("This is a Valid American Express Card");
//return true;
}
else
{
alert("This Card Number is Invalid For American Express");
//return false;
}
break;
}
default:
myForm.cardNum.value = null;
alert("Card type not found");
return false;
}
}
</script>
</head>
<body>
<h1>Credit Card Validator</h1>
<table>
<form name="creditCard">
<tr>
<td><span class="labels">Card Type:</span></td>
<td>
<select name="cardType" size="3">
<option name="visa">Visa</option>
<option name="mc">Master Card</option>
<option name="amex">American Express</option>
</select>
</td>
<tr>
<td><span class="labels">Card Number:</span></td>
<td><input name="cardNUm" type="text" size=30 value="" /></td>
</tr>
<tr><td colspan="2"> </td></tr>
<tr>
<td>
<input type="button" value="Death to All"
style="background-color:#666666 !important"
onclick="return(checkCC(this.form,))" />
</td>
</tr>
</form>
</table>
</body>
</html>
Upon pressing the button nothing happens, I'm completely unsure where I went wrong as all the code seems valid... Please help. Thanks in advance. Hello! I'm in need to be able to create a matching picture game, in which I have rougly 9 images to be able to match, but 18 in total. I have started with a thought of having a button that; when pressed it will disappear and show the image that is within the function. Progress; I am able to press the button and let the image load, but in this case everything goes fine (image resized, not sure about the id though) but the image doesn't show, it just shows an [X] yet when I just put Code: <script language="Javascript" type="text/javascript">
function callImage(){
document.write("<img src=\"images/truck0.jpg">")
}
</script>
The function works fine when I press the button. Any tips? Thank you! Full Code so Far: Code: <head>
<script language="Javascript" type="text/javascript">
function callImage(){
document.write("<img src=\"images/truck0.jpg id=\"pic\" width=\"150\" height=\"150\">")
}
</script>
</head>
<body>
<form>
<input type="button" value="Display" onClick="callImage()"/>
</form>
</body>
Hi Having a small problem with writing out the matches from an array using a For loop. I have two arrays, lets say arrayA and arrayB. In arrayB are numbers which are a number of miles, ie 1,2,6,4,5,6,6. And in arrayA are the days of the week. Each day of the week is associated with a mileage, ie Mon = 1, Tues = 2 etc. My script has found the largest mileage in arrayB. Next I have to find the days of the week that match this highest mileage and write these out, along the lines of "The highest mileage was 6 run on Wed, Sat, Sun." I have managed to get a For loop to work with this BUT..... I can only get it to write out the first instance of the day the match is found. ie "The highest mileage was 6 run on Wed," Pointers in the right direction to help me solve this problem would be much appreciated. [CODE] maximumDistanceIndex = 0; for (var distance = 1; distance < distanceArray.length; distance = distance + 1) { if (distanceArray[distance] > distanceArray[maximumDistanceIndex] ) { maximumDistanceIndex = distance document.write ('The maximum distance was ' + maximumDistance + ' km' + ' run on ' + dayArray[maximumDistanceIndex] ); } } [CODE] Hi I am currently writing a program to analyse (to a degree), the points scored in a dance contest. The program mainly works so far. However I am struggling to conclude the program end. Using an if statement, I would like to compute if a dance-off is required, looping through the combinedPointsArray and determining if 2 or more numbers hold the higest score and are equal. The aim is to provide: Maximum number of combined points The couples and their combined points The couples names with the highest points If two or more couples have equal highest combined points - output whether a dance-off is required. This is my program so far: Code: <HTML>
<HEAD>
<LINK REL="shortcut icon" TYPE="image/x-icon" HREF="favicon.ico">
<TITLE>
Latin Dancing Contest
</TITLE>
<SCRIPT LANGUAGE = "JavaScript">
var contestantNamesArray = ['Tom and Nazia', 'Pat and Dan', 'Sandra and Kofi', 'Ian and Adele', 'Paul and Costas'];
var judgesPointsArray = [2,1,5,4,3];
var audiencePointsArray = [4,5,2,3,1];
var combinedPointsArray = new Array (judgesPointsArray.length)
for (x=0;x<combinedPointsArray.length;x++)
{
combinedPointsArray[x] = parseInt( judgesPointsArray[x] + audiencePointsArray[x] );
}
var biggest = 0;
var values = new Array();
for (x=0;x<combinedPointsArray.length;x++)
{
if (combinedPointsArray[x] >= biggest )
{
values[biggest]++;
biggest = parseInt(combinedPointsArray[x]);
}
}
if ( values == biggest )
{
document.write('A Dance-off is required <BR><BR> ');
}
document.write('The biggest score was : ' + (biggest));
</script>
<BR><BR>
<table border="1">
<tr><th>Names</th><th>Combined Points</th></tr>
<script language="JavaScript">
<!--
// Use a for loop to step through the two arrays and print
// the values in the table.
for (var i=0; i<contestantNamesArray.length; i++)
{
document.write("<tr><td>" + contestantNamesArray[i] + "</td>");
document.write("<td>" + combinedPointsArray[i] + "</td></tr>");
}
//-->
</script>
</HEAD>
<BODY>
</BODY>
</HTML>
Any help would be really appreciated. I have spent so long on this; consequently I am pulling my hair out. Regards hyp3r Hey, I'm writing a piece of code, using a given code as an example, but few things are confusing to me, if you could just explain me step by step what it does, I would really appreciated. Code: function getGeneticCodeString (type) {
if ((type.toLowerCase() == "standard") || (type.toLowerCase() == "transl_table=1"))
{
return "/gc[acgturyswkmbdhvn]/=A," +
// Here I know that the three letter combination HAS to begin with 'gc'
// can be followed by a,c,t,g or u.
// What do the other letter represent?
"/[tu]g[ctuy]/=C," +
// Begins with either 't' or 'u', middle symbol is 'g'
// third symbol can be c, t, or u ('u' can be used only if it begins with 'u'.
// what is the 'y' for in the second square brackets for??
"/ga[agr]/=E " ;
// Must start with 'ga' followed by 'a' or 'g'.
// What is 'r' for?
}
}
Hope, I didn't confuse anybody. Thank you. I have the following code Code: <div class="thdnrml"> <td><a href="somelink">fonfof</a></td> </div> what i want to do is this: Code: <div class="thdnrml"> <td><a href="somelink">fonfof</a><a href="anotherlink">another_link</a></td> </div> how can i go about achieving this? Hi, (new to javascript) Code: digAudio = document.createElement("audio");
digAudio.setAttribute('src',hypeDocument.documentName()+'_Resources/'+'digging.m4a');
digAudio.id = "diggingAudio";
newAudio = document.getElementById("diggingAudio"); //returns null
the audio element is added (I can play the audio) but I can't get it by its id ? thank you |
|||||||