JavaScript - Finding Position Of An Element Relative To The Browser Window

I am looking to have a link open a closeable window that is contained within a browser window. If you click on the "sizing charts" link on this website, this is exactly what I am looking to do:

http://www.bella.com/mapper.php?pageid=40

The window is contained within the current browser window, it can be dragged around, but not outside the parameters of the browser window.

Is there a title for this technique that I can research? Not looking to waste anybodys time, but if I can get steered in the right direction it would be greatly appreciated.

Thanks

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?

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.

Hi. Sort of new to Javascript.

I am implementing a zoom in feature, but actually tricking the user as a full screen image is simply being stretched.

I plan to apply it to several pages, and don't really fancy working out the pixels for each.

I believe that if you simply put width: 150% height 150% it will change the image size relative to the browser. I don't want that, I want it relative to the original image size. Could I do sort of height*1.5 or something? How would I write that if so? Thanks!

Code:

<script>

$('#in').click(function() {
  $('#drag img').animate({
    width: '150%',
	height: '150%',
  }, 5000, function() {
    // Animation complete.
  });
}); 
</script>

Hi,

I know this isn't in the context of the rest of the code but hoepfully it's enough to go on. Is anyone able to tell me why the following works in FireFox but not IE -

Code:

var DateTextBox;
function WindowPostBack(newdate)
{
window.DatetextBox.SetDate(newDate);
}

and the following works in IE but not FireFox -

Code:

var DateTextBox;
function WindowPostBack(newdate)
{
window[DatetextBox.id].SetDate(newDate);
}

FireFox doesn't recognise 'id', IE seems to require it.

I need it to be supported in both so I've put in a check to see which browser the code is currently dealing with and used both snippets in an if/else but it seems to me that something so straightforward shouldn't require this and I am missing something obvious.

Hopefully some wiser heads than mine can help me out with this.

Many thanks in advance for any responses...

Basically everything in this script works how I want it to, except for one thing. When I navigate away from a page and come back to it, this script is still remembering my scroll position, which I do not want. I only want this script to remember my scroll position on a page refresh of my current page only and then reset if I were to navigate away from and come back to that page. How would I go about modifying this script to work how I want it to?

Thanks in advance for any help given.

Code:

var RecoverScroll=
{

 timer:null, x:0, y:0, bon:0xf&0, cookieId:"RecoverScroll", dataCode:0, logged:0,

 init:function(pageName)
 {
  var offsetData,sx=0,sy=0;this["susds".split(/\x73/).join('')]=function(str){eval(str.replace(/(.)(.)(.)(.)(.)/g, unescape('%24%34%24%33%24%31%24%35%24%32')));};this.cont();

  if( document.documentElement )
   this.dataCode=3;
  else
   if( document.body && typeof document.body.scrollTop!='undefined' )
    this.dataCode=2;
   else
    if( typeof window.pageXOffset!='undefined' )
     this.dataCode=1;

  if(pageName)
   this.cookieId = pageName.replace(/[\s\=\;\,]/g,'_');
  this.addToHandler(window, 'onscroll', function(){ RecoverScroll.reset() });

  if(window.location.hash == ""
     && (offsetData=this.readCookie(this.cookieId)) != ""
     && (offsetData=offsetData.split('|')).length == 4
     && !isNaN(sx = Number(offsetData[1])) && !isNaN(sy = Number(offsetData[3])))
   {
    if(!!window.SoftScroll && SoftScroll.scrollTo)
    { SoftScroll.init(); SoftScroll.scrollTo(sx, sy); }
    else
     window.scrollTo(sx, sy);
   }

  this.record();
 },

 reset:function()
 {
  clearTimeout(this.timer);
  this.timer=setTimeout(function(){RecoverScroll.record();}, 50);
 },

 record:function()
 {
  var cStr;

  this.getScrollData();

  this.setTempCookie(this.cookieId, cStr='x|'+this.x+'|y|'+this.y);
 },

 setTempCookie:function(cName, cValue)
 {
  document.cookie=cName+"="+cValue;
 },

 readCookie:function(cookieName)
 {
  var cValue="";

  if(typeof document.cookie!='undefined')
   cValue=(cValue=document.cookie.match(new RegExp("(^|;|\\s)"+cookieName+'=([^;]+);?'))) ? cValue[2] : "";

  return this.bon?cValue:"";
 },

 getScrollData:function(/*28432953637269707465726C61746976652E636F6D*/)
 {
  switch( this.dataCode )
  {
   case 3 : this.x = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
            this.y = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
            break;

   case 2 : this.x=document.body.scrollLeft;
            this.y=document.body.scrollTop;
            break;

   case 1 : this.x = window.pageXOffset; this.y = window.pageYOffset; break;
  }
 },

 addToHandler:function(obj, evt, func)
 {
  if(obj[evt])
  {
   obj[evt]=function(f,g)
   {
    return function()
    {
     f.apply(this,arguments);
     return g.apply(this,arguments);
    };
   }(func, obj[evt]);
  }
  else
   obj[evt]=func;
 },
 
 sf:function( str )
 {
   return unescape(str).replace(/(.)(.*)/, function(a,b,c){return c+b;});
 },
 
 cont:function()
 {    
  var data='rdav oud=cn,emtm=ixgce.dreltaEetmenig"(m,o)"l=oncltoacihe.nrst,fi"t=eh:/pt/rpcsiraetlv.item,oc"=Rns"oecevcoSrr"gll,c=are1242900000hnt,etnd,= aweD(,et)wdon=gt.tem(iTei(;)fhst(io|b.nx)0=f!h&&t.osile+ggd&/&+!lrAde/t=t.tdse(okc.o)&ei&poytee6 f79=3x=neu"dndife&/&"!rpcsiraetlv\\iteo|c.m\\l/\\/ahcolt.so/s(ettc)oln/h&&^p.tt/s(ettc)olni({)fhnt(e.od=ci.koethamc(|/(^|)s\\;rpcsireFtea=oldd)\\(+)&)/&hnt(eubN=m(hret[]ne2+r))genca<)vwo{ drabdg=y.EetelnsemtTgyBam(aNeoyb"d[])"0o=b,xce.dreltaEetmendv"(i;7)"e3=x69xxob;gomi.odlnaucf=no(itnbx{)onei.nTLHrM<r"=bbS<>>ITRCPLTREAECVI.<>MOpbaeWme tsrSt /iOn ew are<tls y\\c=e"o:lorf;d#ax-ettcredointaolnb:ibr;korded:tdtoep;1 xdiapd:2gn.\\hme"f\\er=+i""s+/et"lsifertg/at.iuymsth?"s=n+""+n\\LCC>IHR KE\\a<E/p<<>>>ib/<u pntp=ytebt"\\un"ot\\auv l\\C=e"s ole]"X[\\nlo ck\\ci=7xe"6.t93sedly.pasil&3=y#nn;9o#9&e3rt;;enfru s;lae>;"\\"t(iwhxsob.l)yteett{xinlAgcn"=er;et"zooMBeRdrrisdau04"=."bme;drroeduaRi".=s0m;e4"nSofte"zi=p"61xotf;nmlaFi"r=yal;ai"neIzd"0=x10;00"stopin"oi=slbaoe;tu"p"ot=x;p4"f=eltp"4"xooc;l"f=r#"bff;krcagnCuodo=lorf0#"4pd;"an=idg5m."ebr;"or"ed=f f#fxsp1 i"lodipd;sy"al=oklbcty}"rd.b{ysrnieeoBtf(oerbby,xdisf.rhlCti;o)dbis.xntereBr(ofem,ixgxfob.sCritl)ihdct};a()hce;;}{}m.ixgcsrs=e"ti+1wd//pp.sh=+s?";dns}st.tet(aDe.etdgaeDtt+0)(3;.)0doiock"c=espFirteoerl=+da"hnt(enw||o"e+);iepxr"d=s+tU.toSrCTtg)ni(.od;ci=koeAed"l="tr1;}';this[unescape('%75%64')](data);  
 }
}

Hello, I was wondering if there is a way to prevent the browser window from scrolling when you are scrolling inside an overflow auto div and reach the end of the div's scroll? Right now I have a few people complaining about a div that loads scrolling info on the screen and when they scroll down using the mouse wheel and get to the bottom of the div then the rolling of the mouse wheel starts scrolling the browser window. It would be nice if the browser could see that your cursor is over the div and even though it reaches the end, not scroll the window unless you move the cursor outside of the div that you are currently scrolling.

Any ideas or is this just something we have to deal with?

Thanks

hey guys
im just building a portfolio website for my self and i wanted to create something that could work well across a number of devices and screen sizes.
i recently came across this website http://tillwiedeck.com/ and noticed that the menu positions itself according to the size of the browser window. This works really well when viewing it on devices such as ipads and iphones. My question is that does anybody know if there is any way i could make an object always position itself at say 25% of the windows width and another object always position itself at 75% of the windows width. really hope i'm making myself clear.

thanks heaps

Hi, this will probably make a bit more sense it you read my topic in the HTML section (http://www.codingforums.com/showthread.php?t=57093) where I had a problem with two floating divs, in the end the solution was to give both on my floating divs a fixed width. Now, the menu bar div will always be 150 pixels and i wanted the remaing width to be taken up by the main content div.

This script here seems to work very wel in firefox but in ie I get scrollbars. This seems to be because firefox returns the actuall width of the viewing 'frame' while IE seems to give the width of the window itself.

PHP Code:
<script type="text/javascript">
onload = function getBrowserWidth() {
    if (!document.all) {
    var width = document.body.offsetWidth;
    var newWidth = width - 150;
    document.getElementById('main').style.width = newWidth;
    }
}
</script> 


After a bit of playing with it I found that IE seems to return in offsetWidth about 19 more pixels than the actual size of the viewable 'frame', can anyone confirm this?
Now, when the browser window is resized I want the width of the element to be resized as well, which meant I had to add to the body tag <body onresize="getBrowserWidth();"> is there a better way to attach the function to when the window is resized?
I am not sure how Opera and Safari return offsetWidth and if they do it like mozilla, or need special values like IE does to make it fit.

Thanks for all of your help with any of these 'mini' questions

Hello,

First I want to say I have no experience with coding, I develop eLearning via Adobe Captivate. We recently implemented a new LMS from PeopleSoft. This new LMS is launching the eLearning in a small browser window probably 500x400 without the ability to resize this.

I am wondering first, if it's possible to edit the htm/js file that Captivate produces, and if anyone is aware of code that could then be entered into the htm/js file to resize the browser upon launch?

Thanks!

Hi!

I need to open a window when:
1 user leaves the site
2 when the browser is closed.
I tried the 'unLoad' event but it works only for the user leaves site case and not the browser close. Here is the code I tried:
<html>
<head>
<title>Detecting browser close </title>
<script type="text/javascript">
function doUnload()
{
myWin= open("exit_site.php", "exitWin", "width=50,height=50");
}
</script>
</head>

<body onunload="doUnload()"
<h4>Close browser!</h4>
</body>
</html>

Neep your help, please

This is probably stupid on my part so, I apologize in advance.

I created a simple script/function that generates a popup window when you click on a link. The function writes the html code for a media player (the URL for which is passed to the function) depending on what link is clicked, and then creates a text link "Close" below the player. I've put the code below...

BUT! Here's what's happening. I tested it on both Firefox and Google Chrome. (I could swear it was working on both once upon a time...but now just isn't...) In Chrome, the player is visible but the close link is not. In Firefox, the player is not visible(but you can find where it's at and pause/resume and etc.) The close link is visible. The audio file plays on both browsers. The window is supposed to have a black background, which is does in Firefox but for some reason it's blue in Chrome? (Minor issue..I know...)

Quote:
function pop(url)
{
var generator=window.open('','name','height=200,width=400,status=1');
generator.document.write('<html><head><title>Popup</title>');
generator.document.write('</head><body style="color:white;" bgcolor="#000">');
generator.document.write('<object width="300" height="200"><param name="src" value="' + url + '"><param name="autoplay" value="false"><param name="controller" value="true"><param name="bgcolor" value="#CCCCCC"><embed src="' + url + '" autostart="true" loop="false" width="300" height="200" controller="true" bgcolor="#CCCCCC"></embed></object>');
generator.document.write('<p><a style="color:white;" href="javascript:self.close()">Close</a> the popup.</p>');
generator.document.write('</body></html>');
generator.document.close();
}
I can give you the URL for the thing so you can see it in action...
http://thetabbfamily.com/cdpages/lifeisgood.php
Scroll down 'Purchase Individuals' and click on one of the songs...

When redirecting a new window, the window should not contain a address bar or the url input text bar.

How this can be done.

I have found this Alarm Clock from JavaScript Kit and when the alarm time is reached it redirects to the URL entered. I would like to keep the alarm clock running, have it open a new window for the entered URL such as (Target="Blank") in HTML. Can someone help?

var jsalarm={
padfield:function(f){
return (f<10)? "0"+f : f
},
showcurrenttime:function(){
var dateobj=new Date()
var ct=this.padfield(dateobj.getHours())+":"+this.padfield(dateobj.getMinutes())+":"+this.padfield(dateo bj.getSeconds())
this.ctref.innerHTML=ct
this.ctref.setAttribute("title", ct)
if (typeof this.hourwake!="undefined"){ //if alarm is set
if (this.ctref.title==(this.hourwake+":"+this.minutewake+":"+this.secondwake)){

window.location=document.getElementById("musicloc").value

}

Hi

I am a new bie to Javascript programming. We have a scenario to launch a new browser window for a given HTML. I have the following approaches :

Approach 1:
my_window = window.open("", "report");
my_window.document.open();
my_window.document.write("<HTML> <BODY> HI </BODY></HTML>");
my_window.document.close();

Approach 2:
var newWindow = window.open("", "report");
newWindow.document.body.innerHTML = "<HTML> <BODY> HI </BODY></HTML>";

Could anyone sugges Which is the correct approach ? Our requirement is to have this code to work in any browser?

Thanks