Link to home
Start Free TrialLog in
Avatar of jonathanduane2010
jonathanduane2010

asked on

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
Avatar of Tom Beck
Tom Beck
Flag of United States of America image

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

Avatar of jonathanduane2010
jonathanduane2010

ASKER

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

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

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');
            });
      });
ASKER CERTIFIED SOLUTION
Avatar of Tom Beck
Tom Beck
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
no, that didnt seem to like it either....

I changed the href to "#"
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

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

but still no joy?
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

woohoo!

brilliant!

thank you so much
You're welcome. It only took me five tries. Thanks for the points.