|
JavaScript - Changing The Element Position
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. 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. 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? hey there. im currently working on a page that has three links in the left element that all bring up different content in the right. its a two column page. ive looked into achieving this and while innerHTML is mentioned extensively, its only cited for simple changes (a name, a date, etc) and not necessarily for more involved ones. ive actually tried just plugging in the markup in its entirety in the innerHTML property, but the script seems to quit working after the markup becomes too comprehensive. for instance. Code: function ourReach() {
document.getElementById('rightpane').innerHTML = '<img src="ourreach.gif"'>
}
while Code: function ourReach() {
document.getElementById('rightpane').innerHTML = '
<div id="rightpane">
<ul style="position:absolute; top:-15px; left:-30px">
<li class="header" style="margin-top:-10px; margin-bottom:20px">AS A COMPANY</li>
<li class="header" style="margin-bottom:5px">What we do</li>
<li style="width:500px" class="font1">View Scan Labs is a company founded under the singular belief that the quality of its product
not come at the cost of its integrity.
</li>
<li class="header" style="margin-bottom:5px; margin-top:15px">Who we are</li>
<li class="font1" style="width:400px; color:grey">
Content
</li>
<li style="margin-left:0px; margin-top:30px;color:grey;" class="header" onclick="environment()"><a href="#">Environmental Goals</a></li>
<li style="margin-left:0px;margin-top:2px; color:grey " class="header"><a href="#">Our Reach</a></li>
</ul>
<div style="position:absolute; top:340px; left:30px; width:600px;">
<p class="header" style="position:absolute; left:-20px; top:-75px" >Mailing Address:</span></p>
<ul style="margin-left:-59px;margin-top:-40px">
<li class="font1">Bleh Bleh Bleh</li>
<li class="font1">309 Bleecker St.</li>
<li class="font1">Brooklyn, New York 11231</li>
<li class="font1">USA, +1 1339 6525</li>
</ul> </div>'
}
does not. is there a better way to handle this than the innerHTML property. can i put the markup in a separate script and just have that script called up in innerHTML, if anything just so it looks more succinct. thanks. 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. ok so here is the problem in more detail i have a dropdown menu wrapped in a div attached to this div is the onmouseout event which hides the div this is working the problem however is when moving from 1 link to the next in the dropdown the onmouseout event of the wrapper div is firing and hiding the div prematurely see it live relevant code: Code: <div id="roster_drop" class="drop_menu" style="left: 128px;" onmouseout="this.style.display = 'none';"> <a href="roster.php">Superstars</a> <a href="champions.php">Champions</a> <a href="titlehistory.php">Title History</a> </div> how do i make the event only trigger when your mouse leaves the div itself and not crossing onto a link 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, (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 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, 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 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.
I'm trying to add an input element to all forms using appendChild. The script first searches for input elements with the name of "myinput". If it finds an input element with that name, it assigns the value "myvalue". If it can't find an input element with that name, it tries to create a new one for all forms. Code:
if (document.getElementsByName('myinput')) {
var testcode = document.getElementsByName('myinput');
for (var i=0; i < testcode.length; i++){
testcode[i].value = "myvalue";}
}
else {
var z = document.createElement("input");
z.type = "hidden";
z.name = "myinput";
z.value = "myvalue";
z.id = "mycode";
var d = document.getElementsByTagName('form');
for (var i=0; i < d.length; i++){
d.appendChild(z);}
}
What's wrong with my code? Thanks! greetings everyone! this is my first time trying to join this javascript community. Well then, now I'm telling about my miss-understanding of this keywords of javascript here... here's the html Code: <fieldset > <legend>Attachment</legend>
<table id="attachment" style="height: 50px;" width="200" border="0">
<th width="19%">Title</th>
<th width="26%">File</th>
<th width="41%">Description</th>
<th width="6%">Upload</th>
<th width="6%">More File</th>
<tr>
<td><input name="title" type="text" value="- none -" size="33" maxlength="50"></td>
<td><input name="filepath" type="file" size="33"></td>
<td><input name="description" type="text" value="- none -" size="60" maxlength="200"></td>
<td><input name="upload" type="button" value=" Upload " onclick="upload(this)"> </td>
<td><div align="center">
<input onclick="addMoreFile()" type="button" value="+">
</div></td>
</tr>
</table>
<!-- end Attachment --> </fieldset>
the aim is that the upload button would eventually changed into image and then changed back to a link. That one is already done here's the javascript Code: var attRow;
function upload(obj){
// obtain the table pointer
var attTable = document.getElementById('attachment');
// post file into the jsp file
// changing the image
// get parent pointer of this element
var par = obj.parentNode;
var loImage = document.createElement('img');
loImage.setAttribute('src', 'images/loading1.gif');
par.innerHTML = '';
par.appendChild(loImage);
// create the removal link
var text = document.createTextNode('remove');
var liRem = document.createElement('a');
liRem.setAttribute('href','javascript:removeFile(this)');
liRem.appendChild(text);
par.innerHTML = '';
par.appendChild(liRem);
}
function removeFile(obj){
// post fileid
// change the image
}
function addMoreFile(){
// create fully file upload row
// consist of two text elements, file element, and 1 button.
var nFileTitle = document.createElement('input');
nFileTitle.setAttribute('name','title');
nFileTitle.setAttribute('type','text');
nFileTitle.setAttribute('size', '33');
nFileTitle.setAttribute('value','- none -');
nFileTitle.setAttribute('maxlength','50');
var nFilePath = document.createElement('input');
nFilePath.setAttribute('name', 'filepath');
nFilePath.setAttribute('type', 'file');
nFilePath.setAttribute('size', '33');
var nDesc = document.createElement('input');
nDesc.setAttribute('name', 'description');
nDesc.setAttribute('type', 'text');
nDesc.setAttribute('value','- none -');
nDesc.setAttribute('size', '60');
nDesc.setAttribute('maxlength', '200');
var nUpButton = document.createElement('input');
nUpButton.setAttribute('name', 'upload');
nUpButton.setAttribute('type', 'button');
nUpButton.setAttribute('value', ' Upload ');
nUpButton.setAttribute('onclick', 'upload(this)');
// empty element
var ksg = document.createTextNode(' ');
// obtain the table pointer
var attTable = document.getElementById('attachment');
attRow = attTable.rows.length;
alert(attRow);
var nextRow = attTable.insertRow(attRow);
var ceL = nextRow.insertCell(0);
ceL.appendChild(nFileTitle);
ceL = nextRow.insertCell(1);
ceL.appendChild(nFilePath);
ceL = nextRow.insertCell(2);
ceL.appendChild(nDesc);
ceL = nextRow.insertCell(3);
ceL.appendChild(nUpButton);
ceL = nextRow.insertCell(4);
ceL.appendChild(ksg);
}
the problem arise when I try to use the removeFile() function using this keywords. into these; Code: function removeFile(obj){
// post fileid
// change the image back
// get parent pointer of this element
var par = obj.parentNode;
var loImage = document.createElement('img');
loImage.setAttribute('src', 'images/loading1.gif');
}
I try to apply the same approach as the upload() function. But instead the this object which is pointing at the parent node seems unreliable. Is there any missing point i haven't observed? Hi all Not sure how to tackle this. I haven't done any DOM manipulation and this is a tag within a tag. Another thing is submit is Ajax and therefore can be hit many times --- so I guess I need to also check if element already exists. The result comes back from PHP and I think wipes out anything in the result area. I want to create this: Code: <span id="loading"><img src="loading.gif" /></span> Code: <div id="results">which should populate here</div>
<script type="text/javascript">
function loading(){
?
</script>
<input type="button" name="submit" id="submit" onclick="loading();"/>
How do I begin this? Help appreciated. LT oh this is my Ajax just in case what i'm trying to do should be done from here. Code: <script type="text/javascript">
$(document).ready(function() {
$('#submit').click(function(){
//Get the values
var amount = $('#amount').val();
var from = $('#from').val();
var to = $('#to').val();
var params = "amount=" + amount + "&from=" + from + "&to=" + to;
$.ajax({
type: "POST",
url: "change.php",
data: params,
success: function(data){
$('#results').html(data).fadeIn("slow");
}
});
});
});
</script>
I know for sure that lastRowTD_s[i] does not have "textarea" element ! The whole page is html valid. Code: else if (lastRowTD_s[i].getElementsByTagName('textarea'))
{
alert(lastRowTD_s[i].id);
//checked, it is the row that does not have "textarea" element.
alert(lastRowTD_s[i].getElementsByTagName('textarea'));
// gives me [Object HTML collection] !?
alert(lastRowTD_s[i].getElementsByTagName('textarea')[0]);
//gives me "undefined", heh where has it gone since previous line ?
}
Hi I have DropdwonList with elements, 1,2,3 and 4.. and I have another DropdownList with options Normal, Standard, Emegency, and Expendited. Can you help me with a code, so that when I select "1" option on the first dropdown, the "Emegency" option on the second dropdown is set/selected. Thanks in advance Alright, I need a little help with my javascript. I'm a bit of a novice when it comes to programming so I apologize if this appears trivial. I have an element ID that begins with bb + a randomized number between 1-100,000. This number changes after every action so what I need is a way to retrieve this new value each time and implement it into my code. I can view the number using firebug but I need a way to automate this process. Do any of you have some advice about how I could approach this problem? |
|||||||