I have a simple dropdown that I use for my web clients that loads the modules for their site into an iframe for easy access (vs. having to remember a couple different logins). I would like to add quick links to their hosting company/etc. in the drop down as well, but I would want those to open in a new tab. Is there a way to do this?
Here is my current code:
<!DOCTYPE html>
<html>
<head>
<title>Easy Admin</title>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
</head>
<body>
<style type="text/css">
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background:url(images/body_bg.jpg);
margin: 0;
padding: 0;
color: #000;
}
a:link {
color: #FF0004;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #DC7F81;
}
a:hover {
text-decoration: none;
color: #FD5F61;
}
a:active {
text-decoration: none;
}
.infolink:hover{ color:#ff1e00;opacity:0.7; filter: alpha(opacity=75);}
/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
width: 960px;
background: #FFF;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
background:url(images/body_bg.jpg);
padding: 0px;
}
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
*/
.content {
padding: 10px 0;
}
/* ~~ This controls the border above/below the iframe ~~ */
.frame
{
border: 3px red;
border-style: solid none;
}
.dropdown
{
float: left
margin-right: 8px;
margin-top: 10px;
padding-top: 20px;
}
.logo
{
float: left
margin-right: 8px;
margin-top: 5px;
}
/* ~~ The footer ~~ */
.footer {
background:url(images/body_bg.jpg);
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 20px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
-->
</style>
<script type="text/javascript">
function setIframeSource() {
var theSelect = document.getElementById('location');
var theIframe = document.getElementById('preview-frame');
var theUrl;
theUrl = theSelect.options[theSelect.selectedIndex].value;
theIframe.src = theUrl;
}
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
#preview-frame {width: 100%;background-color: #fff;}</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var calcHeight = function() {
$('#preview-frame').height($(window).height());
}
$(document).ready(function() {
calcHeight();
});
$(window).resize(function() {
calcHeight();
}).load(function() {
calcHeight();
});
</script>
</head>
<body>
<div class="container">
<div class="header">
<div class="wrapper">
<div class="fltlft"><img src="images/easyadminlogo.png" width="180" height="57" margin="30px" padding-top="10px" alt="Easy Admin"/></div>
<div class="dropdown">
<form id="form1" name="form1" method="post" action="">
<label>
<select name="location" id="location" onchange="setIframeSource()">
<option value="https://saviodesigns.com/EasyAdmin/">Select a Module...</option>
<optgroup label="Your Site's Modules:">
<option value="../admin_cms/">PowerCMS</option>
<option value="../webadmin/">Gallery Manager Pro</option>
<optgroup label="Your Hosting Account:">
<option value="https://login.ionos.com/" target="_blank">IONOS Hosting</option>
</optgroup>
</select>
</label>
<span class="fltrt"><a href="https://saviodesigns.com/support.php" target="_blank" class="infolink"><img src="images/getsupport.png" border="0" style="padding-right: 15px; padding-bottom: 19px" /></a></span>
</form> <div class="clearfloat"></div></div>
</div>
</div>
</div>
<!-- end .header -->
<div class="frame" align="center" >
<iframe id="preview-frame" src="https://saviodesigns.com/EasyAdmin/" frameborder="0" noresize="noresize" scrolling="yes"></iframe>
<!-- end .content --></div>
</body>
</html>
I tried a few different things target="_blank" in the option values, but I believe the js needs tweaking and I am not sure how to specify that some options would be the iframe, others would open the page in a new tab.
to open links in new tab you need to make a few changes.
Update the setIframeSource() function to check if the selected option is an external link or a module link. If it's an external link, open it in a new tab using window.open().
Modify the value of the external link option in the dropdown to include the target="_blank" attribute.
Here is the updated code
<!DOCTYPE html>
<html>
<head>
<title>Easy Admin</title>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<style type="text/css">
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: url(images/body_bg.jpg);
margin: 0;
padding: 0;
color: #000;
}
a:link {
color: #FF0004;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #DC7F81;
}
a:hover {
text-decoration: none;
color: #FD5F61;
}
a:active {
text-decoration: none;
}
.infolink:hover {
color: #ff1e00;
opacity: 0.7;
filter: alpha(opacity=75);
}
/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
width: 960px;
background: #FFF;
margin: 0 auto;
/* the auto value on the sides, coupled with the width, centers the layout */
}
/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
background: url(images/body_bg.jpg);
padding: 0px;
}
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
*/
.content {
padding: 10px 0;
}
/* ~~ This controls the border above/below the iframe ~~ */
.frame {
border: 3px red;
border-style: solid none;
}
.dropdown {
float: left margin-right: 8px;
margin-top: 10px;
padding-top: 20px;
}
.logo {
float: left margin-right: 8px;
margin-top: 5px;
}
/* ~~ The footer ~~ */
.footer {
background: url(images/body_bg.jpg);
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {
/* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft {
/* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 20px;
}
.clearfloat {
/* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear: both;
height: 0;
font-size: 1px;
line-height: 0px;
}
/* Add your CSS styles here */
</style>
<script type="text/javascript">
function setIframeSource() {
var theSelect = document.getElementById('location');
var theIframe = document.getElementById('preview-frame');
var theUrl = theSelect.options[theSelect.selectedIndex].value;
if (theUrl.startsWith('http') || theUrl.startsWith('https')) {
window.open(theUrl, '_blank');
} else {
theIframe.src = theUrl;
}
}
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
#preview-frame {
width: 100%;
background-color: #fff;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var calcHeight = function() {
$('#preview-frame').height($(window).height());
}
$(document).ready(function() {
calcHeight();
});
$(window).resize(function() {
calcHeight();
}).load(function() {
calcHeight();
});
</script>
</head>
<body>
<div class="container">
<div class="header">
<div class="wrapper">
<div class="fltlft">
<img src="images/easyadminlogo.png" width="180" height="57" margin="30px" padding-top="10px" alt="Easy Admin" />
</div>
<div class="dropdown">
<form id="form1" name="form1" method="post" action="">
<label>
<select name="location" id="location" onchange="setIframeSource()">
<option value="https://saviodesigns.com/EasyAdmin/">Select a Module...</option>
<optgroup label="Your Site's Modules:">
<option value="https://stackoverflow.com/">PowerCMS</option>
<option value="https://www.youtube.com/">Gallery Manager Pro</option>
</optgroup>
<optgroup label="Your Hosting Account:">
<option value="https://login.ionos.com/" target="_blank">IONOS Hosting</option>
</optgroup>
</select>
</label>
<span class="fltrt">
<a href="https://saviodesigns.com/support.php" target="_blank" class="infolink">
<img src="images/getsupport.png" border="0" style="padding-right: 15px; padding-bottom: 19px" />
</a>
</span>
</form>
<div class="clearfloat"></div>
</div>
</div>
</div>
<div class="frame" align="center">
<iframe id="preview-frame" src="https://saviodesigns.com/EasyAdmin/" frameborder="0" noresize="noresize" scrolling="yes"></iframe>
</div>
</div>
</body>
</html>I have changed the option values in the Power CMS option and Gallery manager pro to Stackoverflow and youtube for example.
Hope this solves your problem.