opening page in new window and different size

hi guys,

is there a way I can set so when people click "listen here" it uses this <iframe src="http://iradionortheast.com/newPlayer/" width="386" height="718"></iframe> and it opens it in a new window?

In wordpress there is an option, but only an option to set the url and it brings you toa  different window
jonathanduane2010Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
Like this:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
</style>
<script>
$(function(){
	$('#listenHere').click(function(){
		var src = $('#listenFrame').attr('src');
		$('#listenFrame').remove();
		window.open(src, 'listen', 'height=718,width=386,menubar=no,titlebar=no,resizable=yes,status=no');
	});
});
</script>
</head>

<body>
<button id="listenHere">Listen Here</button>
<iframe id="listenFrame" src="http://iradionortheast.com/newPlayer/" width="386" height="718"></iframe>	
</body>
</html>

Open in new window

0
jonathanduane2010Author Commented:
I have tried this

(this is the whole header.php) and its showing the player if you see here now http://iradionortheast.com


<!doctype html>
<!--[if IE 8]> <html class="no-js lt-ie9" <?php language_attributes(); ?>> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" <?php language_attributes(); ?>> <!--<![endif]-->
<head>

	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php do_action( 'after_open_body_tag' ); ?>

<div id="page">
	<div id="mobile-bar">
		<a class="menu-trigger" href="#mobilemenu"><i class="fa fa-bars"></i></a>
		<h1 class="mob-title"><?php bloginfo('name'); ?></h1>
	</div>

	<header id="header">
		<div class="container">
			<div class="row">
				<div class="col-md-4 col-sm-3">
					<?php ci_e_logo('<h1 class="site-logo ' . get_logo_class() . '">', '</h1>'); ?>
				</div>
				<div class="col-md-8 col-sm-9">
					<?php if ( has_nav_menu( 'ci_secondary_menu' ) OR woocommerce_enabled() ) : ?>
						<nav class="nav-secondary-wrap">
							<ul class="nav-secondary">
								<?php
									wp_nav_menu( array(
										'theme_location' => 'ci_secondary_menu',
										'fallback_cb'    => '',
										'container'      => '',
										'menu_id'        => '',
										'menu_class'     => '',
										'items_wrap'     => '%3$s'
									));
								?>

								<?php if ( woocommerce_enabled() ) : ?>
									<?php global $woocommerce; ?>
									<li>
										<div class="cart-head">
											<?php _e('Shopping Bag', 'ci_theme'); ?>:
											<a href="<?php echo $woocommerce->cart->get_cart_url(); ?>">
												<b><?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->get_cart_contents_count(), 'ci_theme'), $woocommerce->cart->get_cart_contents_count()); ?></b>	<span class="cart-price"><?php echo $woocommerce->cart->get_cart_total(); ?></span>
											</a>
										</div>
									</li>
								<?php endif; ?>
							</ul>
						</nav>
					<?php endif; ?>

					<nav id="nav">
						<?php 
							wp_nav_menu( array(
								'theme_location' => 'ci_main_menu',
								'fallback_cb'    => '',
								'container'      => '',
								'menu_id'        => 'navigation',
								'menu_class'     => 'group'
							) );
						?>
					</nav>

					<div id="mobilemenu"></div>
				</div>
			</div>
		</div>
	</header>
	<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
</style>
<script>
$(function(){
	$('#listenHere').click(function(){
		var src = $('#listenFrame').attr('src');
		$('#listenFrame').remove();
		window.open(src, 'listen', 'height=718,width=386,menubar=no,titlebar=no,resizable=yes,status=no');
	});
});
</script>
</head>

<body>
<button id="listenHere">Listen Here</button>
<iframe id="listenFrame" src="http://dev.mixer.im/newiRadio/" width="386" height="718"></iframe>	
</body>
</html>

Open in new window

0
Tom BeckCommented:
This may work for a header.php, but I have no way to test.
<!doctype html>
<!--[if IE 8]> <html class="no-js lt-ie9" <?php language_attributes(); ?>> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" <?php language_attributes(); ?>> <!--<![endif]-->
<head>

	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<?php wp_head(); ?>
    <script>
	$(function(){
		$('#home-slider div.slide-content a.btn').click(function(){
			var src = 'http://iradionortheast.com/newPlayer/';
			window.open(src, 'listen', 'height=718,width=386,menubar=no,titlebar=no,resizable=yes,status=no');
		});
	});
	</script>
</head>

<body <?php body_class(); ?>>
<?php do_action( 'after_open_body_tag' ); ?>

<div id="page">
	<div id="mobile-bar">
		<a class="menu-trigger" href="#mobilemenu"><i class="fa fa-bars"></i></a>
		<h1 class="mob-title"><?php bloginfo('name'); ?></h1>
	</div>

	<header id="header">
		<div class="container">
			<div class="row">
				<div class="col-md-4 col-sm-3">
					<?php ci_e_logo('<h1 class="site-logo ' . get_logo_class() . '">', '</h1>'); ?>
				</div>
				<div class="col-md-8 col-sm-9">
					<?php if ( has_nav_menu( 'ci_secondary_menu' ) OR woocommerce_enabled() ) : ?>
						<nav class="nav-secondary-wrap">
							<ul class="nav-secondary">
								<?php
									wp_nav_menu( array(
										'theme_location' => 'ci_secondary_menu',
										'fallback_cb'    => '',
										'container'      => '',
										'menu_id'        => '',
										'menu_class'     => '',
										'items_wrap'     => '%3$s'
									));
								?>

								<?php if ( woocommerce_enabled() ) : ?>
									<?php global $woocommerce; ?>
									<li>
										<div class="cart-head">
											<?php _e('Shopping Bag', 'ci_theme'); ?>:
											<a href="<?php echo $woocommerce->cart->get_cart_url(); ?>">
												<b><?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->get_cart_contents_count(), 'ci_theme'), $woocommerce->cart->get_cart_contents_count()); ?></b>	<span class="cart-price"><?php echo $woocommerce->cart->get_cart_total(); ?></span>
											</a>
										</div>
									</li>
								<?php endif; ?>
							</ul>
						</nav>
					<?php endif; ?>

					<nav id="nav">
						<?php 
							wp_nav_menu( array(
								'theme_location' => 'ci_main_menu',
								'fallback_cb'    => '',
								'container'      => '',
								'menu_id'        => 'navigation',
								'menu_class'     => 'group'
							) );
						?>
					</nav>

					<div id="mobilemenu"></div>
				</div>
			</div>
		</div>
	</header>

Open in new window

0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

jonathanduane2010Author Commented:
ok thats uploaded...but no luck, would putting this line in functions.php help?

$(function(){
            $('#home-slider div.slide-content a.btn').click(function(){
                  var src = 'http://iradionortheast.com/newPlayer/';
                  window.open(src, 'listen', 'height=718,width=386,menubar=no,titlebar=no,resizable=yes,status=no');
            });
      });
0
Tom BeckCommented:
The javascript can be injected to the page through functions.php but it would need to be wrapped in a php function and called through Wordpress. I can show you how but that is not the current problem. The header.php I provided is working to place the script in the head section of the page. The click event is not being triggered however. Try this new version.
<!doctype html>
<!--[if IE 8]> <html class="no-js lt-ie9" <?php language_attributes(); ?>> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" <?php language_attributes(); ?>> <!--<![endif]-->
<head>

	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<?php wp_head(); ?>
    <script>
	$(function(){
		$('body').on('click', '#home-slider div.slide-content a.btn', (function(e){
                       e.preventDefault();
			var src = 'http://iradionortheast.com/newPlayer/';
			window.open(src, 'listen', 'height=718,width=386,menubar=no,titlebar=no,resizable=yes,status=no');
		});
	});
	</script>
</head>

<body <?php body_class(); ?>>
<?php do_action( 'after_open_body_tag' ); ?>

<div id="page">
	<div id="mobile-bar">
		<a class="menu-trigger" href="#mobilemenu"><i class="fa fa-bars"></i></a>
		<h1 class="mob-title"><?php bloginfo('name'); ?></h1>
	</div>

	<header id="header">
		<div class="container">
			<div class="row">
				<div class="col-md-4 col-sm-3">
					<?php ci_e_logo('<h1 class="site-logo ' . get_logo_class() . '">', '</h1>'); ?>
				</div>
				<div class="col-md-8 col-sm-9">
					<?php if ( has_nav_menu( 'ci_secondary_menu' ) OR woocommerce_enabled() ) : ?>
						<nav class="nav-secondary-wrap">
							<ul class="nav-secondary">
								<?php
									wp_nav_menu( array(
										'theme_location' => 'ci_secondary_menu',
										'fallback_cb'    => '',
										'container'      => '',
										'menu_id'        => '',
										'menu_class'     => '',
										'items_wrap'     => '%3$s'
									));
								?>

								<?php if ( woocommerce_enabled() ) : ?>
									<?php global $woocommerce; ?>
									<li>
										<div class="cart-head">
											<?php _e('Shopping Bag', 'ci_theme'); ?>:
											<a href="<?php echo $woocommerce->cart->get_cart_url(); ?>">
												<b><?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->get_cart_contents_count(), 'ci_theme'), $woocommerce->cart->get_cart_contents_count()); ?></b>	<span class="cart-price"><?php echo $woocommerce->cart->get_cart_total(); ?></span>
											</a>
										</div>
									</li>
								<?php endif; ?>
							</ul>
						</nav>
					<?php endif; ?>

					<nav id="nav">
						<?php 
							wp_nav_menu( array(
								'theme_location' => 'ci_main_menu',
								'fallback_cb'    => '',
								'container'      => '',
								'menu_id'        => 'navigation',
								'menu_class'     => 'group'
							) );
						?>
					</nav>

					<div id="mobilemenu"></div>
				</div>
			</div>
		</div>
	</header>

Open in new window

You should also remove the href values from the "Listen Here" anchors and replace with "#".
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jonathanduane2010Author Commented:
no, that didnt seem to like it either....

I changed the href to "#"
0
Tom BeckCommented:
There was a typo. Try this.
<!doctype html>
<!--[if IE 8]> <html class="no-js lt-ie9" <?php language_attributes(); ?>> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" <?php language_attributes(); ?>> <!--<![endif]-->
<head>

	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<?php wp_head(); ?>
    <script>
	$(function(){
		$('body').on('click', '#home-slider div.slide-content a.btn', function(e){
                       e.preventDefault();
			var src = 'http://iradionortheast.com/newPlayer/';
			window.open(src, 'listen', 'height=718,width=386,menubar=no,titlebar=no,resizable=yes,status=no');
		});
	});
	</script>
</head>

<body <?php body_class(); ?>>
<?php do_action( 'after_open_body_tag' ); ?>

<div id="page">
	<div id="mobile-bar">
		<a class="menu-trigger" href="#mobilemenu"><i class="fa fa-bars"></i></a>
		<h1 class="mob-title"><?php bloginfo('name'); ?></h1>
	</div>

	<header id="header">
		<div class="container">
			<div class="row">
				<div class="col-md-4 col-sm-3">
					<?php ci_e_logo('<h1 class="site-logo ' . get_logo_class() . '">', '</h1>'); ?>
				</div>
				<div class="col-md-8 col-sm-9">
					<?php if ( has_nav_menu( 'ci_secondary_menu' ) OR woocommerce_enabled() ) : ?>
						<nav class="nav-secondary-wrap">
							<ul class="nav-secondary">
								<?php
									wp_nav_menu( array(
										'theme_location' => 'ci_secondary_menu',
										'fallback_cb'    => '',
										'container'      => '',
										'menu_id'        => '',
										'menu_class'     => '',
										'items_wrap'     => '%3$s'
									));
								?>

								<?php if ( woocommerce_enabled() ) : ?>
									<?php global $woocommerce; ?>
									<li>
										<div class="cart-head">
											<?php _e('Shopping Bag', 'ci_theme'); ?>:
											<a href="<?php echo $woocommerce->cart->get_cart_url(); ?>">
												<b><?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->get_cart_contents_count(), 'ci_theme'), $woocommerce->cart->get_cart_contents_count()); ?></b>	<span class="cart-price"><?php echo $woocommerce->cart->get_cart_total(); ?></span>
											</a>
										</div>
									</li>
								<?php endif; ?>
							</ul>
						</nav>
					<?php endif; ?>

					<nav id="nav">
						<?php 
							wp_nav_menu( array(
								'theme_location' => 'ci_main_menu',
								'fallback_cb'    => '',
								'container'      => '',
								'menu_id'        => 'navigation',
								'menu_class'     => 'group'
							) );
						?>
					</nav>

					<div id="mobilemenu"></div>
				</div>
			</div>
		</div>
	</header>

Open in new window

0
jonathanduane2010Author Commented:
yes,

this is the header.php

<!doctype html>
<!--[if IE 8]> <html class="no-js lt-ie9" <?php language_attributes(); ?>> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" <?php language_attributes(); ?>> <!--<![endif]-->
<head>

	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<?php wp_head(); ?>
    <script>
	$(function(){
		$('body').on('click', '#home-slider div.slide-content a.btn', function(e){
                       e.preventDefault();
			var src = 'http://iradionortheast.com/newPlayer/';
			window.open(src, 'listen', 'height=718,width=386,menubar=no,titlebar=no,resizable=yes,status=no');
		});
	});
	</script>
</head>

<body <?php body_class(); ?>>
<?php do_action( 'after_open_body_tag' ); ?>

<div id="page">
	<div id="mobile-bar">
		<a class="menu-trigger" href="#mobilemenu"><i class="fa fa-bars"></i></a>
		<h1 class="mob-title"><?php bloginfo('name'); ?></h1>
	</div>

	<header id="header">
		<div class="container">
			<div class="row">
				<div class="col-md-4 col-sm-3">
					<?php ci_e_logo('<h1 class="site-logo ' . get_logo_class() . '">', '</h1>'); ?>
				</div>
				<div class="col-md-8 col-sm-9">
					<?php if ( has_nav_menu( 'ci_secondary_menu' ) OR woocommerce_enabled() ) : ?>
						<nav class="nav-secondary-wrap">
							<ul class="nav-secondary">
								<?php
									wp_nav_menu( array(
										'theme_location' => 'ci_secondary_menu',
										'fallback_cb'    => '',
										'container'      => '',
										'menu_id'        => '',
										'menu_class'     => '',
										'items_wrap'     => '%3$s'
									));
								?>

								<?php if ( woocommerce_enabled() ) : ?>
									<?php global $woocommerce; ?>
									<li>
										<div class="cart-head">
											<?php _e('Shopping Bag', 'ci_theme'); ?>:
											<a href="<?php echo $woocommerce->cart->get_cart_url(); ?>">
												<b><?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->get_cart_contents_count(), 'ci_theme'), $woocommerce->cart->get_cart_contents_count()); ?></b>	<span class="cart-price"><?php echo $woocommerce->cart->get_cart_total(); ?></span>
											</a>
										</div>
									</li>
								<?php endif; ?>
							</ul>
						</nav>
					<?php endif; ?>

					<nav id="nav">
						<?php 
							wp_nav_menu( array(
								'theme_location' => 'ci_main_menu',
								'fallback_cb'    => '',
								'container'      => '',
								'menu_id'        => 'navigation',
								'menu_class'     => 'group'
							) );
						?>
					</nav>

					<div id="mobilemenu"></div>
				</div>
			</div>
		</div>
	</header>

Open in new window

0
jonathanduane2010Author Commented:
but still no joy?
0
Tom BeckCommented:
One more time?
<!doctype html>
<!--[if IE 8]> <html class="no-js lt-ie9" <?php language_attributes(); ?>> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" <?php language_attributes(); ?>> <!--<![endif]-->
<head>

	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<?php wp_head(); ?>
    <script>
	jQuery(function(){
		jQuery('body').on('click', '#home-slider div.slide-content a.btn', function(e){
                       e.preventDefault();
			var src = 'http://iradionortheast.com/newPlayer/';
			window.open(src, 'listen', 'height=718,width=386,menubar=no,titlebar=no,resizable=yes,status=no');
		});
	});
	</script>
</head>

<body <?php body_class(); ?>>
<?php do_action( 'after_open_body_tag' ); ?>

<div id="page">
	<div id="mobile-bar">
		<a class="menu-trigger" href="#mobilemenu"><i class="fa fa-bars"></i></a>
		<h1 class="mob-title"><?php bloginfo('name'); ?></h1>
	</div>

	<header id="header">
		<div class="container">
			<div class="row">
				<div class="col-md-4 col-sm-3">
					<?php ci_e_logo('<h1 class="site-logo ' . get_logo_class() . '">', '</h1>'); ?>
				</div>
				<div class="col-md-8 col-sm-9">
					<?php if ( has_nav_menu( 'ci_secondary_menu' ) OR woocommerce_enabled() ) : ?>
						<nav class="nav-secondary-wrap">
							<ul class="nav-secondary">
								<?php
									wp_nav_menu( array(
										'theme_location' => 'ci_secondary_menu',
										'fallback_cb'    => '',
										'container'      => '',
										'menu_id'        => '',
										'menu_class'     => '',
										'items_wrap'     => '%3$s'
									));
								?>

								<?php if ( woocommerce_enabled() ) : ?>
									<?php global $woocommerce; ?>
									<li>
										<div class="cart-head">
											<?php _e('Shopping Bag', 'ci_theme'); ?>:
											<a href="<?php echo $woocommerce->cart->get_cart_url(); ?>">
												<b><?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->get_cart_contents_count(), 'ci_theme'), $woocommerce->cart->get_cart_contents_count()); ?></b>	<span class="cart-price"><?php echo $woocommerce->cart->get_cart_total(); ?></span>
											</a>
										</div>
									</li>
								<?php endif; ?>
							</ul>
						</nav>
					<?php endif; ?>

					<nav id="nav">
						<?php 
							wp_nav_menu( array(
								'theme_location' => 'ci_main_menu',
								'fallback_cb'    => '',
								'container'      => '',
								'menu_id'        => 'navigation',
								'menu_class'     => 'group'
							) );
						?>
					</nav>

					<div id="mobilemenu"></div>
				</div>
			</div>
		</div>
	</header>

Open in new window

0
jonathanduane2010Author Commented:
woohoo!

brilliant!

thank you so much
0
Tom BeckCommented:
You're welcome. It only took me five tries. Thanks for the points.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.