Target attributes to control new page size

Ralph_Varney · October 3, 2015, 6:53pm

I have a website with a map. At certain spots I have a rollover image that links to a short video. Using target=" _blank" creates a new tab; using nothing has the video playing in the same size page.
Question? Can I define the size of the new page or tabbed page to something like 80% of parent page.
Thank you for your time and possible solution.

Code below is what I have that creates a same size tab

<div id="apDiv3"><a href="Fork at 57km.mp4" target="_blank" onmouseover="MM_swapImage('fork 57','','fork 57.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="Rollover blankBL.png" alt="Fork at 5.7 Km stay right" width="400" height="225" id="fork 57" /></a></div>

Gandalf · October 3, 2015, 7:01pm

You can use javascript to open a new window

function popup1(){
  popupWindow = window.open('new-page.htm','','scrollbars=yes,width=430,height=200'); 
}

Drummin · October 3, 2015, 9:56pm

I like using css modalDialog for these kinds of things. Very easy to add in loops by just incrementing the id. I use it often on calendars etc. Here’s a basic sample page called modaltestpage.html.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Sample</title>
<style type="text/css">

.modalinnerwrapper {
    display:block; 
    background: #FFFFFF; 
    overflow:hidden; 
    border-radius: 10px; 
    padding:5px 25px; 
    -moz-box-shadow: inset 0 0 8px #6C6C6C, 1px 1px 4px #4D4E4F; 
    -webkit-box-shadow: inset 0 0 8px #6C6C6C, 1px 1px 4px #4D4E4F; 
    box-shadow: inset 0 0 8px #6C6C6C, 1px 1px 4px #4D4E4F;
}
.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 2;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}
.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}

.modalDialog > div {
    width: 60%;
    position: relative;
    margin: 10% auto;
    padding: 45px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
    z-index: 2;
}
  
.modalDialog h1,.modalDialog h2,.modalDialog h3,.modalDialog h4{
    margin:.1em auto .5em auto;
}    
.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; 
}
</style>
</head>
<body>

<div id="apDiv1"><a href="modaltestpage.html#viewvideo1">Video One</a></div>

<div id="viewvideo1" class="modalDialog">
    <div>
        <a href="modaltestpage.html" title="Close" class="close">X</a>
        <h2>Viewing Video One</h2>
        <div class="modalinnerwrapper">
        My video One plays here
        </div>                    
    </div>
</div> 


<div id="apDiv2"><a href="modaltestpage.html#viewvideo2">Video Two</a></div>

<div id="viewvideo2" class="modalDialog">
    <div>
        <a href="modaltestpage.html" title="Close" class="close">X</a>
        <h2>Viewing Video Two</h2>
        <div class="modalinnerwrapper">
        My video Two plays here
        </div>                    
    </div>
</div> 

</body>
</html>

Ralph_Varney · October 4, 2015, 12:12am

I appreciate the time you spent making this response, This and the previous solution look interesting and I will try both of them to see which suits my needs best.
Thank you.

Ralph_Varney · October 4, 2015, 6:34pm

Thank you again Drummin… but
I like the idea you have proposed but am having difficulty in understanding and implementing it. Where is the association with #viewvideo1 and my Fork at 57km.mp4 come from? Do I need to define a list or something? How?? Do I change the name of modaltestpage.html?

Could I trouble you to edit your code to show where and how my sample would fit in?
Thank you so much for taking your time with this.

Drummin · October 4, 2015, 7:13pm

The name of the page doesn’t matter… just change it to the same in all instances. You don’t need to make a list but each reference id needs to be unique in the call url #video1, #video2 etc and have a matching id , e.g. <div id="video1" class="modalDialog">

In each of these divisions you define the popup as you like. If you wish to have the video title in the h2 tags you could do that or remove h2 tags. I would put the video player code in the wrapper <div class="modalinnerwrapper"> with whatever video is to play, e.g. Fork at 57km.mp4 or whatever.

So going with info I have it would be like this


<div id="apDiv3"><a href="modaltestpage.html#Forkat57" onmouseover="MM_swapImage('fork 57','','fork 57.jpg',1)" onmouseout="MM_swapImgRestore()"><img src="Rollover blankBL.png" alt="Fork at 5.7 Km stay right" width="400" height="225" id="fork 57" /></a></div>

<div id="Forkat57" class="modalDialog">
    <div>
        <a href="modaltestpage.html" title="Close" class="close">X</a>
        <h2>Fork at 57</h2>
        <div class="modalinnerwrapper">
        video player goes here playing Fork at 57km.mp4
        </div>                    
    </div>
</div>

Also note that the links section and modalDialog div’s don’t need to be in the same section as in my first example. So your “map” links section doesn’t need to change much besides changing the links and removing target. The modalDialog div’s can be defined in a different part of the page after displayed content. Using original example.

<div id="apDiv1"><a href="modaltestpage.html#viewvideo1">Video One</a></div>
<div id="apDiv2"><a href="modaltestpage.html#viewvideo2">Video Two</a></div>