JavaScript is disabled! Please enable JavaScript in your web browser!

Freestyle Academy of Communication Arts & Technology

1299 Bryant Ave, Mt. View, CA 94040 T 650-940-4680   F 650-961-1346
2 Required Classes: English and Design 3rd/Elective Class:  + Animation or Digital Media or Film

Font Size

+

-

Reset

Back to list of all examples

Useful Stuff About:

Auto Centering Vertically Pop Up Window for a WIDE Diptych

Click me to reveal a pop-up window that centers itself to the user's monitor screen for a WIDE Diptych

(assumes the large diptych image is 650 px tall and you are using an <h1> heading above the large image)

How do you do this? Paste the following JavaScript in the <head>


<script type="text/javascript">
function openPopUpDiptych(newPage,w,h) {
    //Set values to variables
    var windowName='diptych';
    var popUpX=0;//sets pop up left edge to left edge of screen
    var popUpY=(screen.height-h)/2;//sets pop up vertical middle to middle of screen
    var features='width='+screen.width;
    features=features+', height='+h;
    features=features+', top='+popUpY+', left='+popUpX;
  features=features+', scrollbar=yes';
   
    //You can change the the following if you wish
    features=features+', resizeable=no';
    features=features+', toolbar=no';
    features=features+', location=no';
    features=features+', menubar=no';
    features=features+', status=no';

    window.open(newPage,windowName,features);//This actually opens the pop up wth correct dimensions
}
</script>

The text or image link needs to be as such below - you can change the 775 depending if the vertical scroll bar shows up on your pop-up window because the link below assumes the large diptych image is 650 px tall and you are using an <h1> heading above the large image:


<a href="#"
onclick="openPopUpDiptych('Diptych_Large.html','','775')"
>               
Text or <img> tag in here
</a>