JavaScript - Adjusting Window Size

Hi,

I'm creating web application that picks out a randomly chosen image from google, and displays it in the browser window every time it is refreshed. What I'm struggling with is that I want the browser window to resize automatically to exactly fit the image displayed.

I know how to resize a browser window, but I want it done dynamically. Can anyone help me with this?

I hope someone can help me with this or point towards a published code.

I have a PHP page which displays a list summarising database records. When users click on an icon, another window pops up with further information from the record. They can keep clicking through the list, showing each new record in the SAME popup window.

Obviously when the popup first appears, the window must be sized to fit within the user's screen and also to one side so that people can still see the main list. But if they resize the window (maybe because they have a very large screen), I want each new display of the window to retain the user's new size.

To summarise, the first time the window opens, its dimensions are set to a default size (based on screen size), but from then on it retains the user-defined size.

Thanks in advance.

Does anyone know the default size of a popup window when using window.open()?

Thanks

Hey all,

I have set up a cookie that redirects the visitor if they have visited the page before. However, I'd like to make some adjustments to it to where if they have cookies turned off, it automatically redirects them to a page that requests them to turn on cookies. Any ideas?

Code:

<script>
num_days = 24;
function ged(noDays){
    var today = new Date();
    var expr = new Date(today.getTime() + noDays*60*60*1000);
    return  expr.toGMTString();
}

function readCookie(cookieName){
    var start = document.cookie.indexOf(cookieName);
    if (start == -1){ 
        document.cookie = "seenit=yes; expires=" + ged(num_days);
    } else {
        window.location = go_to;
    }
}

var go_to = "/index.php?module=article&id=310";

readCookie("seenit");
</script>

Hi,

I currently have a SLN file which need's adjusting slightly.

Please could someone help me adjust this code in this file

http://www.2shared.com/file/7072761/...nal_csf11.html


From :

Sr.WriteLine("Cars = UF1");

To :

Sr.WriteLine("Cars = XFG");


Thanks

Matty

Problem Solved

Hi I have this snippet of code which shows an image based on what radio button is selected, problem is that the names, id's, values etc are dynamically created via the admin panel of my cart so what happens is that the buttons are not recognised as being 'checked' if I make them 'checked'...

I can sort of see where its trying to check if 'checked' but quite sure how to make it suit my radio button without changing the buttons id's.

here my code:
Code:

<div id="Tabdoc_content3" class="Tabdoc_tabdivcontent" style="background-image:url('/images/back-sweets.png');background-repeat:no-repeat;background-position:center bottom;background-size:100%;" >
 <div class="wrapperAttribsOptions">
  <table width="100%" cellspacing="0" cellpadding="0" border="0">
  <tr valign="top">
  <td>
<script language="javascript"> 
function toggle1(showHideDiv, switchImgTag) {
        var ele = document.getElementById(showHideDiv);
        var imageEle = document.getElementById(switchImgTag);
        if(ele.style.display == "block") {
                ele.style.display = "none";
		imageEle.innerHTML = '<img src="/images/tabs/button_open_sweet1.gif">';
        }
        else {
                ele.style.display = "block";
                imageEle.innerHTML = '<img src="/images/tabs/button_close_sweet1.gif">';
        }
}
function toggle2(showHideDiv, switchImgTag) {
        var ele2 = document.getElementById(showHideDiv);
        var imageEle2 = document.getElementById(switchImgTag);
        if(ele2.style.display == "block") {
                ele2.style.display = "none";
		imageEle2.innerHTML = '<img src="/images/tabs/button_open_sweet2.gif">';
        }
        else {
                ele2.style.display = "block";
                imageEle2.innerHTML = '<img src="/images/tabs/button_close_sweet2.gif">';
        }
}
function toggle3(showHideDiv, switchImgTag) {
        var ele3 = document.getElementById(showHideDiv);
        var imageEle3 = document.getElementById(switchImgTag);
        if(ele3.style.display == "block") {
                ele3.style.display = "none";
		imageEle3.innerHTML = '<img src="/images/tabs/button_open_sweet3.gif">';
        }
        else {
                ele3.style.display = "block";
                imageEle3.innerHTML = '<img src="/images/tabs/button_close_sweet3.gif">';
        }
}
</script>
   <table cellpadding="0" cellspacing="0" border="0" width="100%">
   <tr valign="top">
    <td align="center" width="33%">
<script type="text/javascript">
// For: http://www.codingforums.com/showthread.php?p=1107835#post1107835
var picFile0 = ['sweet1.png','sweet2.png','sweet3.png','sweet4.png','sweet5.png','sweet6.png','sweet7.png','sweet8.png','sweet9.png','sweet10.png','sweet11.png','sweet12.png','sweet13.png','sweet14.png','sweet15.png','sweet16.png','sweet17.png','sweet18.png'];  // each can be expanded with more images
var picFile1 = ['sweet1.png','sweet2.png','sweet3.png','sweet4.png','sweet5.png','sweet6.png','sweet7.png','sweet8.png','sweet9.png','sweet10.png','sweet11.png','sweet12.png','sweet13.png','sweet14.png','sweet15.png','sweet16.png','sweet17.png','sweet18.png'];
var picFile2 = ['sweet1.png','sweet2.png','sweet3.png','sweet4.png','sweet5.png','sweet6.png','sweet7.png','sweet8.png','sweet9.png','sweet10.png','sweet11.png','sweet12.png','sweet13.png','sweet14.png','sweet15.png','sweet16.png','sweet17.png','sweet18.png'];
var imgPtr = [
//  [current_image,baseURL,filenames,display_image]
    [0,"/images/tabs/",'imgSrc0'],
    [0,"/images/tabs/",'imgSrc1'],
    [0,"/images/tabs/",'imgSrc2']  // No comma after last entry
];
// Create function to load image
function loadImg(imgGroup) {
  var picFile = [];  
  var imgID = imgPtr[imgGroup][2];
  switch (imgGroup) {
    case '0' : picFile=[].concat(picFile0); break;
    case '1' : picFile=[].concat(picFile1); break;
    case '2' : picFile=[].concat(picFile2); break;
    default  : alert('Invalid assignment\n'+imgGroup); break;
  }
  var ptr = imgPtr[imgGroup][0];
  if (ptr < 0) { ptr = 0; }
  if (ptr > picFile.length-1) { ptr = picFile.length-1; }
  document.getElementById(imgID).src = imgPtr[imgGroup][1]+picFile[ptr];
  imgPtr[imgGroup][0] = ptr;
  var rbtn = 'rg'+imgGroup+ptr;  // alert(rbtn);
  document.getElementById(rbtn).checked = true;
}
// Create link function to switch image backward
function prev(imgGroup) {
  imgPtr[imgGroup][0]--;
  loadImg(imgGroup);
}
// Create link function to switch image forward
function next(imgGroup){
  imgPtr[imgGroup][0]++;
  loadImg(imgGroup);
}
// Load function after page loads
onload = function() { 
  loadImg('0');
  loadImg('1');
  loadImg('2');
}
</script>
<div style="width:230px;text-align:center;">
<img name="imgSrc0" id="imgSrc0" src="/images/tabs/sweet1.png">
</div>
<div id="headerDivImg">
    <div id="titleTextImg"></div>
    <a id="imageDivLink" href="javascript:toggle1('contentDivImg', 'imageDivLink');">
    <img src="/images/tabs/button_open_sweet1.gif"></a>
   </div>
<div id="contentDivImg" class="sweetlist" style="display: none;">
<p>BOILED SWEETS - STANDARD</p>
<input name="id[18]" value="81" id="attrib-18-81" type="radio" onclick="imgPtr[0][0]=12;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-81"> Kola Cubes</label><br />
<input name="id[18]" value="82" id="attrib-18-82" type="radio" onclick="imgPtr[0][0]=13;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-82"> Pineapple Cubes</label><br />
<input name="id[18]" value="79" id="attrib-18-79" type="radio" onclick="imgPtr[0][0]=10;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-79"> Rhubarb and Custard</label><br />
<input name="id[18]" value="80" id="attrib-18-80" type="radio" onclick="imgPtr[0][0]=11;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-80"> Strawberry and Cream</label><br /><br />
<p>BOILED SWEETS - SPECIAL</p>
<input name="id[18]" value="76" id="attrib-18-76" type="radio" onclick="imgPtr[0][0]=7;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-76"> Fizzy Blueberry</label><br />
<input name="id[18]" value="61" checked="checked" id="attrib-18-61" type="radio" onclick="imgPtr[0][0]=0;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-61"> Fruits of the Forest</label><br />
<input name="id[18]" value="74" id="attrib-18-74" type="radio" onclick="imgPtr[0][0]=5;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-74"> Lemon and Lime</label><br />
<input name="id[18]" value="62" id="attrib-18-62" type="radio" onclick="imgPtr[0][0]=1;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-62"> Pear Drops</label><br />
<input name="id[18]" value="77" id="attrib-18-77" type="radio" onclick="imgPtr[0][0]=8;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-77"> Sour Cherry</label><br />
<input name="id[18]" value="73" id="attrib-18-73" type="radio" onclick="imgPtr[0][0]=4;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-73"> Wild Strawberry</label><br /><br />
<p>GUMMY SWEETS - ORGANIC</p>
<input name="id[18]" value="85" id="attrib-18-85" type="radio" onclick="imgPtr[0][0]=16;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-85"> Organic Fruit Cocktail</label><br />
<input name="id[18]" value="86" id="attrib-18-86" type="radio" onclick="imgPtr[0][0]=17;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-86"> Organic Jelly Bears</label><br />
<input name="id[18]" value="83" id="attrib-18-83" type="radio" onclick="imgPtr[0][0]=14;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-83"> Organic Sour Worms</label><br />
<input name="id[18]" value="84" id="attrib-18-84" type="radio" onclick="imgPtr[0][0]=15;loadImg('0')"><label class="attribsRadioButton zero" for="attrib-18-84"> Organic Sugar Bears</label><br />
</div>
    </td>
    <td align="center" width="33%">
<div style="width:230px;text-align:center;">
<img name="imgSrc1" id="imgSrc1" src="/images/tabs/sweet14.png">
</div>
<div id="headerDivImg2">
    <div id="titleTextImg2"></div>
    <a id="imageDivLink2" href="javascript:toggle2('contentDivImg2', 'imageDivLink2');"><img src="/images/tabs/button_open_sweet2.gif"></a>
   </div>
<div id="contentDivImg2" class="sweetlist" style="display: none;">
<p>BOILED SWEETS - STANDARD</p>
<input name="id[19]" value="99" id="attrib-19-99" type="radio" onclick="imgPtr[1][0]=12;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-99"> Kola Cubes</label><br />
<input name="id[19]" value="100" id="attrib-19-100" type="radio" onclick="imgPtr[1][0]=13;loadImg('1')" ><label class="attribsRadioButton zero" for="attrib-19-100"> Pineapple Cubes</label><br />
<input name="id[19]" value="97" id="attrib-19-97" type="radio" onclick="imgPtr[1][0]=10;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-97"> Rhubarb and Custard</label><br />
<input name="id[19]" value="98" id="attrib-19-98" type="radio" onclick="imgPtr[1][0]=11;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-98"> Strawberry and Cream</label><br /><br />
<p>BOILED SWEETS - SPECIAL</p>
<input name="id[19]" value="94" id="attrib-19-94" type="radio" onclick="imgPtr[1][0]=7;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-94"> Fizzy Blueberry</label><br />
<input name="id[19]" value="87" checked="checked" id="attrib-19-87" type="radio" onclick="imgPtr[1][0]=0;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-87"> Fruits of the Forest</label><br />
<input name="id[19]" value="92" id="attrib-19-92" type="radio" onclick="imgPtr[1][0]=5;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-92"> Lemon and Lime</label><br />
<input name="id[19]" value="88" id="attrib-19-88" type="radio" onclick="imgPtr[1][0]=1;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-88"> Pear Drops</label><br />
<input name="id[19]" value="95" id="attrib-19-95" type="radio" onclick="imgPtr[1][0]=8;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-95"> Sour Cherry</label><br />
<input name="id[19]" value="91" id="attrib-19-91" type="radio" onclick="imgPtr[1][0]=4;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-91"> Wild Strawberry</label><br /><br />
<p>GUMMY SWEETS - ORGANIC</p>
<input name="id[19]" value="103" id="attrib-19-103" type="radio" onclick="imgPtr[1][0]=16;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-103"> Organic Fruit Cocktail</label><br />
<input name="id[19]" value="104" id="attrib-19-104" type="radio" onclick="imgPtr[1][0]=17;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-104"> Organic Jelly Bears</label><br />
<input name="id[19]" value="101" id="attrib-19-101" type="radio" onclick="imgPtr[1][0]=14;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-101"> Organic Sour Worms</label><br />
<input name="id[19]" value="102" id="attrib-19-102" type="radio" onclick="imgPtr[1][0]=15;loadImg('1')"><label class="attribsRadioButton zero" for="attrib-19-102"> Organic Sugar Bears</label><br />
</div>
    </td>
    <td align="center" width="33%">
<div style="width:230px;text-align:center;">
<img name="imgSrc2" id="imgSrc2" src="/images/tabs/sweet11.png">
</div>
<div id="headerDivImg3">
    <div id="titleTextImg3"></div>
    <a id="imageDivLink3" href="javascript:toggle3('contentDivImg3', 'imageDivLink3');"><img src="/images/tabs/button_open_sweet3.gif"></a>
   </div>
<div id="contentDivImg3" class="sweetlist" style="display: none;">
<p>BOILED SWEETS - STANDARD</p>
<input name="id[20]" value="117" id="attrib-20-117" type="radio" onclick="imgPtr[2][0]=12;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-117"> Kola Cubes</label><br />
<input name="id[20]" value="118" id="attrib-20-118" type="radio" onclick="imgPtr[2][0]=13;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-118"> Pineapple Cubes</label><br />
<input name="id[20]" value="115" id="attrib-20-115" type="radio" onclick="imgPtr[2][0]=10;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-115"> Rhubarb and Custard</label><br />
<input name="id[20]" value="116" id="attrib-20-116" type="radio" onclick="imgPtr[2][0]=11;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-116"> Strawberry and Cream</label><br /><br />
<p>BOILED SWEETS - SPECIAL</p>
<input name="id[20]" value="112" id="attrib-20-112" type="radio" onclick="imgPtr[2][0]=7loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-112"> Fizzy Blueberry</label><br />
<input name="id[20]" value="105" checked="checked" id="attrib-20-105" type="radio" onclick="imgPtr[2][0]=0;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-105"> Fruits of the Forest</label><br />
<input name="id[20]" value="110" id="attrib-20-110" type="radio" onclick="imgPtr[2][0]=5;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-110"> Lemon and Lime</label><br />
<input name="id[20]" value="106" id="attrib-20-106" type="radio" onclick="imgPtr[2][0]=1;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-106"> Pear Drops</label><br />
<input name="id[20]" value="113" id="attrib-20-113" type="radio" onclick="imgPtr[2][0]=8;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-113"> Sour Cherry</label><br />
<input name="id[20]" value="109" id="attrib-20-109" type="radio" onclick="imgPtr[2][0]=4;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-109"> Wild Strawberry</label><br /><br />
<p>GUMMY SWEETS - ORGANIC</p>
<input name="id[20]" value="121" id="attrib-20-121" type="radio" onclick="imgPtr[2][0]=16;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-121"> Organic Fruit Cocktail</label><br />
<input name="id[20]" value="122" id="attrib-20-122" type="radio" onclick="imgPtr[2][0]=17;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-122"> Organic Jelly Bears</label><br />
<input name="id[20]" value="119" id="attrib-20-119" type="radio" onclick="imgPtr[2][0]=14;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-119"> Organic Sour Worms</label><br />
<input name="id[20]" value="120" id="attrib-20-120" type="radio" onclick="imgPtr[2][0]=15;loadImg('2')"><label class="attribsRadioButton zero" for="attrib-20-120"> Organic Sugar Bears</label><br />
</div>
    </td>
   </tr>
   </table>
   <br class="clearboth" />
  </td>
  </tr>
  </table>
 </div>

 <div class="forward Tabdoc_pointer" style="margin-top:20px;margin-right:20px;position:relative;z-index:99;">
  <img src="images/tabs/button_continue.gif" alt="CONTINUE"  onclick="Tabdoc_ManageDisplay(4)">
 </div>
 <div class="back Tabdoc_pointer" style="margin-top:20px;margin-left:20px;position:relative;z-index:99;">
  <img src="images/tabs/button_back.gif" alt="BACK"  onclick="Tabdoc_ManageDisplay(2)">
 </div>
 <div class="clearboth">
  <img src="images/back-sweets.png" alt=" " style="width:970px;margin:-71px 0 0 0;"/>
 </div>
</div>

The part I think is the problem is:
Code:

  var rbtn = 'rg'+imgGroup+ptr;  // alert(rbtn);
  document.getElementById(rbtn).checked = true;

P.S. Sorry about the mixture of 'divs' and 'tables', i'm still sorting out the styling.
P.S.S. If you need a visual representation please PM me and I will send you link

I have a javascript sound board that I've made for a Church skit but I'm wanting to be able to smoothly fade out the longer SFX without having to do it manually with the volume slider.

The Object:
Code:

<span id="player_holder"><embed id="player" hidden="true" autostart="true" loop="false" volume="100"/></span>

How do I modify the volume value from:
Code:

document.getElementById('player')

Any ideas?

Hi,

I have a search function which works when I only want to have only one search per page, but as it involves a string call I'm not sure how to modify it to multiple search requests on a page.

The below works fine for one call:
Code:

<script type="text/javascript">
function showHint(str){
if (str.length==0){
	document.getElementById("txtHint").innerHTML="";
	return;
	}
if (window.XMLHttpRequest){
	xmlhttp=new XMLHttpRequest();
	}
	else{
	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}

xmlhttp.onreadystatechange=function(){
	if (xmlhttp.readyState==4 && xmlhttp.status==200){
		document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
		}
	}

xmlhttp.open("GET","getName.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
				<label>Search by name: </label>
					<input type="text" id="txt1" class="input" onkeyup="showHint(this.value)" />
	<br />
	<p>Suggestions: <span id="txtHint"></span></p>
	<br />

But if I want to do mulitple I have tried changing it to:
Code:

<script type="text/javascript">
function showHint(File,ID){
if (str.length==0){
	document.getElementById(ID).innerHTML="";
	return;
	}
if (window.XMLHttpRequest){
	xmlhttp=new XMLHttpRequest();
	}
	else{
	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}

xmlhttp.onreadystatechange=function(){
	if (xmlhttp.readyState==4 && xmlhttp.status==200){
		document.getElementById(ID).innerHTML=xmlhttp.responseText;
		}
	}

xmlhttp.open("GET",File,true);
xmlhttp.send();
}
</script>
</head>
<body>
				<label>Search by firstname: </label>
					<input type="text" id="txt1" class="input" onkeyup="showHint('GetFirstName.php?q='+str,'txtHint')" />
	<br />
	<p>Suggestions: <span id="txtHint"></span></p>
	<br />				<label>Search by surname: </label>
					<input type="text" id="txt1" class="input" onkeyup="showHint('getLastName.php?q='+str,'txtHintSn')" />
	<br />
	<p>Suggestions: <span id="txtHintSn"></span></p>
	<br />

The above doesn't work and I am not sure what do about the showHint(str) as clearly I am not representing it properly in my attempt to modify the script.

Hello all, and thank you for your coments,

I want to preserve a 16/9 aspect ratio to the window after any resize, making the width a function of the height.

As I have a window.resizeTo() inside the window.onresize event function, the infinite loop is served. How may I quit it?


Code:

<html><head><title>Title</title><script languaje="javascript">

const c_ra=16/9;
window.onresize = function WindowReSize() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
//  myWidth = window.innerWidth;
	myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
//    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  }

myWidth = Math.floor(myHeight*c_ra);
window.resizeTo(myWidth,myHeight); // ** CAUTION resize event in a onresize event handler !
};  

</script></head><body><p>Hello World</p></body></html>

i have this code i need to close the parent.html window when the child window opened, i need the code for that working well in IE and Firefox


Parent.html


<HTML>

<SCRIPT TYPE="text/javascript">
function sendTo()
{
window.open('child.html','_blank','resizable=yes,width='+(screen.width-500)+',height='+(screen.height-500)+'');

}



</SCRIPT>



<BODY >
<form name="form">

<input type="text" value="" name="text1" id="pdetails1">
<input type="text" value="" name="text1" id="pdetails2">
</br>


<input type="submit" value="submit" onClick="sendTo()">

</BODY>
</HTML>


child.html

<html>
<body>
<form>
<input type=text name="text5" value="">
<input type=submit name="submit"value="submit">
</form>
</body>
</html>

Here is the program: http://www.1728.com/newwindow.htm
Basically, I want to input a number in the input box, which assigns a number to the variable numval located at document.box1.b1.

When clicking on the "new window" button, an alert displays the input box value, then another window opens and displays the integers 1 through 12 and the amount squared.

I would like the new window to obtain the number from the previous window so that the new window will display integers (and their squares) from 1 to the value of numval.

hello everybody
i need your help and experience for having code to show ( overlay / modal window ) to the user when closing or navigating away from the page ( i want put in this window facebook share to make the user to share the page in his facebook ) ,
bytheway i wanna use it in my wordpress in every post
could it be happen ?

Thanks for helping

After following the instructions from the answer below:
http://bytes.com/topic/javascript/an...arent-document

I was able to have the child window perform the function defined in the parent window.

The function was to only have an alert window pop up as the child page was loading.

I easily modified this to my intention which was to have a parent function performed when the child window was clicked.

Using the body tag:

Code:

<body onclick="parent.FUNCTION NAME HERE()">

I first change the method in which the function would be triggered, all went well there. then I tried to change which function would be triggered. (Basically use the function I wanted to happen on click of the child window rather then the function from the test). Once I did this switch, nothing happens.

The site this is being used on is:


http://tylerpanesar.ca/

What I want is when the menu bar is open in the parent window, the user chooses a link and the menu closes and goes to that link in the child window.
This already works.
However if the user opens the menu bar and then changes there mind and continues with the page the are currently on (clicks any content in the child window), the menu stays open.

Currently the menu "hides" only when you choose one of the menu items, but it does not "hide" when you CLICK on child document. If you could figure out how to get it to "hide" on a "mouse out" that would be the better option.

I attempted this method however i could only get it to "toggle" the menu on "mouse out". This method does however create an annoying flicker when you hover over the menu items (as it is toggling the open menu command I guess). If I had it "hide" the menu on "mouse out" it would "hide" as soon as you moved off of the main button. The viewer doesn't even have a chance to click a link. or at least that is what happens when I did it. You may have a better method to achieve this.

The script that tells it to hide on click is within a jQuery function:

Code:

menua
.click(
function(){
menu.hide();

the code I used for the mouseout toggle was:

Code:

menu
.mouseout(
function(){
menu.toggle();

Here is the script that I am currently using for the menu to open and the "click" hide feature.

This menu feature comes from the following help:

http://www.bennadel.com/blog/1740-Bu...-FaceBook-.htm

Code:

<script type="text/javascript">
        jQuery(function( $ ){
            var menuRoot = $( "#menu-root" );
            var menu = $( "#menu" );
            var menua = $( "#menu a" );
            // Hook up menu root click event.
            menuRoot
                .attr( "href", "javascript:void( 0 )" )
                .click(
                    function(){
                        // Toggle the menu display.
                        menu.toggle();
                        // Blur the link to remove focus.
                        menuRoot.blur();
                        // Cancel event (and its bubbling).
                        return( false );
                    }
                )
            ;
            menua
                .click(
                    function(){
                        // Toggle the menu display.
                        menu.hide();
                    }
                )
            ;
            // Hook up a click handler on the document so that
            // we can hide the menu if it is not the target of
            // the mouse click.
            $( document ).click(
                function( event ){
                    // Check to see if this came from the menu.
                    if (
                        menu.is( ":visible" ) &&
                        !$( event.target ).closest( "#menu" ).size()
                        ){
                        // The click came outside the menu, so
                        // close the menu.
                        menu.hide();
                     }
                }
            );
         });
 </script>

I've tried adding the click to "hide" menu feature to the child document but there is now menu in that document for it to "hide".

What I was trying to was have the child document execute a function from the parent document and have that function executed IN the parent document. I've tried the technique from the link in my very first post but I believe it only calls the function from the parent and executes it IN the child. Which does not work for me as the menu is not in the child.

There should be a way to make the child execute a function FOR the parent.

I apologize for this very wordy post, but I am extremely frustrated with this now as I have been trying to get this to work for a few weeks now.

Any help would be greatly appreciated.
Thanks in advance,
Tyler

I have the code below in my popup window which currently brings up a blank page in the background as the main window. Instead I want the popup to come up but the original page I left is in the background as the main window. Does anyone know how I can do that with the code I currently have.
Code:

<html>
<head>
 <title>JavaScript Popup Example 3</title>
</head>
<script type="text/javascript">
function poponload()
{
    testwindow = window.open("", "mywindow", "location=0,status=0,scrollbars=0,width=350,height=400");
    testwindow.moveTo(0, 0);
  testwindow.document.write('<h1>Get outta here!</h1><a href="javascript:void(0);" onclick="window.opener.history.go(-1); self.close();">Parent back button</a>');
testwindow.focus();
}
</script>
<body onload="javascript: poponload()">
</body>
</html>