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?
 
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
 
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
Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

 
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
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.