Solved

Adding a menu section

Posted on 2016-10-24
13
35 Views
Last Modified: 2016-10-24
I have a webpage that for the life of me cannot figure out how to a few menus to a certain section.  If you look at the page I want to add the menus to the right in the darker grey area.

http://audiodigz.com/index.php?a=page&b=news

I am attaching the CSS file as well.
style.css
0
Comment
Question by:DS928
  • 6
  • 6
13 Comments
 
LVL 35

Expert Comment

by:Terry Woods
ID: 41857870
Inside the div with class body-content, and after the div with classes nine and columns, try adding code:
<div id="newmenu" class="three column" style="    color: white;">
  <ul><li>Menu item</li>
    <li>Another</li>
  </ul>
</div>

Open in new window

For me, that appears to the right of the existing content.

Note that if you give it a border you'll need to apply style box-sizing: border-box; or the border will make it wrap down the page.
0
 

Author Comment

by:DS928
ID: 41857886
I put it here and it ends up on the left side of the picture.

<div class="row-body{$content_class}">
	<div class="body-content">
		<div class="nine columns" id="messages">
        
        <div id="newmenu" class="three column" style="    color: white;">
  <ul><li>Menu item</li>
    <li>Another</li>
  </ul>
</div>
        
			<div class="page-container">
			<div class="page-content">
			<div class="page-header">{$header}</div>
				<div class="page-inner">
					<div class="row">

Open in new window


Click on explore at the top.  When the page opens thats where it should be.

If I put the code here.
<div class="three columns">
        
        
        Code
		</div>

Open in new window


it ends up at the bottom of the page
0
 
LVL 35

Expert Comment

by:Terry Woods
ID: 41857923
Sorry, I meant that you need to add the code after the closing tag of the nine columns div. ie
<div class="body-content">
  <div class="nine columns" id="messages">
    ...
  </div>
  <div id="newmenu" class="three columns" style="    color: white;">
    <ul><li>Menu item</li>
    <li>Another</li>
    </ul>
  </div>

Open in new window


Oh, and there was a typo in one of the classes for the code I provided: "three column" should read "three columns"
0
 

Author Comment

by:DS928
ID: 41857973
Still not working. Showing up at the bottom of the page...
<div id="newmenu" class="three columns" style="    color: white;">
    			<ul><li>Menu item</li>
    				<li>Another</li>
    			</ul>
  			</div>
 </div>
</div>

Open in new window

0
 
LVL 35

Expert Comment

by:Terry Woods
ID: 41857977
Hmm, just to confirm you're coding it as I expect, I'll share the entire page source with the change applied. When I make the above described change in Chrome dynamically, it displays correctly:
<!DOCTYPE html>
<htmlxmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">

<title>AudioDigz.com | Music for the masses - AudioDIGZ - Music for the masses</title><meta property="og:site_name" content="AudioDIGZ.com | Music for the masses" />
<meta property="og:title" content="AudioDIGZZ - Music for the masses" />
<meta property="og:description" content="AudioDIGZ is designed to help people find new music and promote new artists. Check out our music industry news as well" />
<meta property="og:image" content="http://www.audiodigztapsongz.com/uploads/2/5/7/1/25714712/1420836009.png" />
<meta property="og:url" content="http://www.audiodigz.com/" />
<meta http-equiv='cache-control' content='no-cache' />
<meta property="description" content="AudioDIGZ is a new Music Blog designed to help people find new music and promote new artists. Build your own playlist!  Share your music" />
<meta name="keywords" content="AudioDIGZ, AudioDIGZ Music Blog, AudioDIGZ Music, New Music Blog, AudioDIGZ interviews, AudioDIGZ Playlists, Artist Interviews, Find New Music, Music Blog" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--html lang="en">
<head>
<meta charset="UTF-8" />
<title>AudioDIGZ</title>
<meta name="description" content="Audio sharing platform">
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"-->


<link rel="shortcut icon" href="http://audiodigz.com/favicon.ico">
<link href="http://audiodigz.com/themes/custom/style.css" rel="stylesheet" type="text/css">

<script type="text/javascript">baseUrl = 'http://audiodigz.com'; token_id = '182ff95e26f77e23ad1df0b3515a97f6'; nowPlaying = viewed_id = 0; player_volume = 0.80;</script>
<script type="text/javascript" src="http://audiodigz.com/themes/custom/js/jquery.js"></script>
<script type="text/javascript" src="http://audiodigz.com/themes/custom/js/jquery.timeago.js"></script>
<script type="text/javascript" src="http://audiodigz.com/themes/custom/js/functions.js"></script>
<script type="text/javascript" src="http://audiodigz.com/themes/custom/js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="http://audiodigz.com/themes/custom/js/slider.js"></script>


<script type="text/javascript">
$(document).ready(function() {
	$("#sound-player").jPlayer({
		cssSelectorAncestor: '#sound-container',
		play: function() {
			// Verify if a view has been added already for this track
			if(viewed_id == nowPlaying) {
				return false;
			} else {
				updateTrackInfo(nowPlaying);
				prevnext(3);
			}
			// Add the play count
			viewed_id = nowPlaying;
			$.ajax({
				type: "POST",
				url: "http://audiodigz.com/requests/add_view.php",
				data: "id="+nowPlaying+"&token_id="+token_id, 
				cache: false
			});
		},
		ended: function () {
			// If repeat is not turned on, move to the next song
			if($('#repeat-song').html() == 0) {
				$('.current-seek').html($('#sound_ghost_player').html());
				$('.current-play').show();
				viewed_id = 0;
				nextSong(nowPlaying);
			}
		},
		swfPath: "http://audiodigz.com/themes/custom/js",
		supplied: "mp3,m4a",
		wmode: "window",
		volume: player_volume,
		smoothPlayBar: true,
		keyEnabled: true
	});
});
function updateTrackInfo(id) {
	// If there's a track id
	if(id > 0) {
		// Add the current song class
		$('#track'+id).addClass('current-song');

		// Add current play class to the Play button and hide it
		$('#play'+id).addClass('current-play');
		$('.current-play').hide();

		$('.jp-audio .jp-time-holder').show();

		// Add the active player to the current song
		$("#song-controls"+id).html($("#seek-bar-song").html());

		// Add the active player class to the current song
		$("#song-controls"+id).addClass('current-seek');

		// Set the play/pause button position (this is needed for mobile view in order for the play/pause button to be at the same height with the initial play button)
		$('#track'+id+' .jp-play , #track'+id+' .jp-pause').css({ 'margin-top' : '-' + $('.song-top', '#track'+id).outerHeight() + 'px' });

		prevnext();

		// Bind functionality to the new song selector
		$("#sound-player").jPlayer("option", "cssSelectorAncestor", '#sound-container');
	}
}
function playSong(song, id) {
	// If the user is on a mobile device, open the track in a new tab rather than playing it on the page
	/*if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
		window.location = 'http://audiodigz.com/uploads/tracks/'+song;
		return false;
	}*/
	
	// Remove the current-song class (if any)
	$('.current-song').removeClass('current-song');
	// Show the previously hidden Play button (if any)
	$('.current-play').show();
	$('.current-play').removeClass('current-play');
	
	// Remove the active player if exists and set the ghost player
	$('.current-seek').html($('#sound_ghost_player').html());
	
	// Remove the active player class
	$('.current-seek').removeClass('current-seek');
	
	// Define the current playing track
	nowPlaying = id;

	// Update the track listing
	updateTrackInfo(nowPlaying);
	prevnext(3);
	
	// Get the current song name, url and author
	var trackUrl = $('#song-url'+id).attr('href');
	var artwork = $('#song-art'+id).attr('src');
	var songName, shortSongName = songName = $('#song-name'+id).html();
	var songAuthor = $('#song-author'+id).text();
	var songAuthorUrl = $('#song-author'+id).attr('href');
	
	if(songName.length > 30) {
		var shortSongName = $('#song-name'+id).html();
	}
	
	$('#sw-song-name').html($('<a>', {text: shortSongName, href: trackUrl, title: songName, rel: 'loadpage'}));
	$('#sw-author-name').html($('<a>', {text: songAuthor, href: songAuthorUrl, title: songAuthor, rel: 'loadpage'}));
	
	$('#topbar-artwork').html($('<a>', {href: trackUrl, rel: 'loadpage', id: 'artwork-container'}));
	$('#artwork-container').html('<img src="'+artwork+'">');
	
	// Get the track extension
	var ext = getExtension(song)
	
	if(ext == 'mp3') {
		$("#sound-player").jPlayer("setMedia",{mp3:baseUrl+'/uploads/tracks/'+song}).jPlayer("play");
	} else if(ext == 'm4a') {
		$("#sound-player").jPlayer("setMedia",{m4a:baseUrl+'/uploads/tracks/'+song}).jPlayer("play");
	}
}
</script>


</head>
<body>

<div id="loading-bar"><dd></dd><dt></dt></div>
<div class="topbar">
	<div class="header">
		<a href="http://audiodigz.com/index.php?a=welcome" rel="loadpage"><div class="logo"></div></a>
		<a href="http://audiodigz.com/index.php?a=explore" class="menu-button" rel="loadpage" id="explore-button">Explore</a>
		<div class="search-input"><input type="text" id="search" placeholder="Search..." autocomplete="off"></div>
		<a onclick="connect_modal()" class="menu-btn" title="Connect">Connect</a>
	</div>
	<div class="search-container"></div>
	<div class="notification-container">
		<div class="notification-content">
			<div class="notification-inner">
				<span id="global_page_url"><a href="http://audiodigz.com/index.php?a=notifications" rel="loadpage">View More Notifications</a></span>
				<span id="chat_page_url"><a href="http://audiodigz.com/index.php?a=notifications&filter=chats" rel="loadpage">View More Messages</a></span>
				<a onclick="showNotification('close')" title="Close Notifications"><div class="close_btn"></div></a>
			</div>
			<div id="notifications-content"></div>
			<div class="notification-row"><div class="notification-padding"><a href="http://audiodigz.com/index.php?a=settings&b=notifications" rel="loadpage">Notifications Settings</a></div></div>
		</div>
	</div>
</div>


<div class="topbar_margin"></div>
<div id="content">
	<style type="text/css">
.NewsHeader {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
}
.NewsBody {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	
	/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color:#6FF;
}

/* selected link */
a:active {
    color: blue;
}

.textwrap {
	float:left;
	margin:10px;
}
</style>
<div class="row-body content-page">
	<div class="body-content">
		<div class="nine columns" id="messages">
        
        
        
			<div class="page-container">
			<div class="page-content">
			<div class="page-header">News</div>
				<div class="page-inner">
					<div class="row">
						<strong class="NewsHeader">Jessica Jarrell releases a new single!</strong>
                        <br />
						<br />
						<div>
                        <img src="/themes/custom/images/JessicaCloser.png" width="780" height="500" alt="Jessica Jarrell" />
                        <div/>
                        <br />
                        <br />
                        <div>
                        <span class="NewsBody">Jessica Jarrell is an American Pop and R&B singer, actress and model.  Her newest single, <strong>Come Closer</strong> is available at iTunes and Spotify</span>
                        <br/>
                        <br/>
                        <span class="NewsBody"><a href="https://www.youtube.com/watch?v=B5SUsrKmXs8&feature=youtu.be" title="Come Closer">Listen to Come Closer on YouTube</a>
                        </span>
                        <br />
                        <br />
                        <span class="NewsBody">Most recently, Jessica featured on Elephante’s latest single, “Hold,” which premiered in late August on Billboard.  Jessica will be in the video, scheduled to drop in late 2016, in time with a full push at radio. The new music marks a departure from the teen pop and social media star’s early success with tracks such as the Justin Bieber collaboration, “Overboard,” and “Key To My Heart,” from The Back-Up Plan Soundtrack.</span>
                        <br />
                        <br />
						<span class="NewsBody">Previously, Jessica made an impact with independent Urban AC releases “Getting Right,” and video releases <a href="https://www.youtube.com/watch?v=fy3lmwLZnBg" title="Gravity">"Gravity"</a>, and the moving art piece <a href="https://www.youtube.com/watch?v=HLzivdPiOCQ" title="Goldblooded">"Goldblooded"</a>. Each release scoring millions in views on YouTube.</span>
				</div> 
				</div>
				</div>
			</div>
		</div>
        </div>
		<div class="three columns">
        <div id="newmenu" class="three column" style="    color: white;">
  <ul><li>Menu item</li>
    <li>Another</li>
  </ul>
</div>
       	</div>
         
	</div>
</div>
</div>
<div id="connect" style="display: none;">
	<div class="modal-container">
		<div class="modal-title" id="share-title">
			<div class="modal-menu-container">
				<div class="modal-menu-item modal-menu-item-active" id="tab-login">Login</div>
				<div class="modal-menu-item" id="tab-register">Register</div>
				<div class="modal-loading"></div>
			</div>
		</div>
		<div class="divider"></div>
		<div class="tab-login">
			<div id="login-message"></div>
			<div class="modal-inner">
				<form id="login-form" method="post">
				<div class="modal-input modal-connect">	
					<input type="text" id="short" name="username" placeholder="Username or email">
					<input type="password" id="short" name="password" placeholder="Password">
				</div>
				<div class="modal-checkbox"><input type="checkbox" name="remember" value="1" id="remember-me"><label for="remember-me">Remember me</label></div>
				<input type="submit" style="display: none;"><!-- submit button used to enable the enter key -->
				</form>
				<div class="forgot-password"><a href="http://audiodigz.com/index.php?a=recover" rel="loadpage">Forgot your password?</a></div>
			</div>
			<div class="divider"></div>
			<div class="modal-menu">
				<div class="modal-btn modal-btn-active"><a id="login-button" onclick="connect(1)">Login</a></div><div class="modal-btn modal-btn-facebook"><a href="https://www.facebook.com/dialog/oauth?client_id=1695790404073323&redirect_uri=http://audiodigz.com/requests/connect.php?facebook=true&state=dfc5b70eac928a54464e3c4f1f231abd&scope=public_profile,email" class="facebook-button">Facebook</a></div>
			</div>
		</div>
		<div class="tab-register">
			<div id="register-message"></div>
			<div class="modal-inner">
				<div class="modal-input modal-connect">
					<form id="register-form" method="post">
					<input type="text" id="short" name="username" placeholder="Username">
					<input type="password" id="short" name="password" placeholder="Password">
					<input type="text" id="short" name="email" placeholder="Email">
					
					<input type="submit" style="display: none;"><!-- submit button used to enable the enter key -->
					</form>
				</div>
			</div>
			<div class="divider"></div>
			<div class="modal-menu">
				<div class="modal-btn modal-btn-active"><a id="register-button" onclick="connect(0)">Register</a></div><div class="modal-btn modal-btn-facebook"><a href="https://www.facebook.com/dialog/oauth?client_id=1695790404073323&redirect_uri=http://audiodigz.com/requests/connect.php?facebook=true&state=dfc5b70eac928a54464e3c4f1f231abd&scope=public_profile,email" class="facebook-button">Facebook</a></div>
			</div>
		</div>
	</div>
</div>
<div class="modal-background"></div>
<div class="row-body">
	<div class="footer">
		<div class="footer-container">
			<div class="footer-links">
				<a href="http://audiodigz.com/index.php?a=page&b=tos" rel="loadpage">Terms of Use</a> - 
				<a href="http://audiodigz.com/index.php?a=page&b=privacy" rel="loadpage">Privacy Policy</a> - 
				<a href="http://audiodigz.com/index.php?a=page&b=dmca" rel="loadpage">DMCA</a> - 
				<a href="http://audiodigz.com/index.php?a=page&b=contact" rel="loadpage">Contact</a> - 
				<a href="http://audiodigz.com/index.php?a=admin" rel="loadpage">Admin</a>
			</div>
			<div class="footer-languages">
				Language: <a href="http://audiodigz.com/index.php?lang=english">English</a>
			</div>
			<div class="footer-info">
				Copyright &copy; 2016 AudioDIGZ. All rights reserved
			</div>
		</div>
	</div>
</div>
<div class="bottombar">
	<div class="bottombar-container">
		<div id="sound-player" class="jp-jplayer"></div>
		<div id="sound-container" class="jp-audio top-player">
			<div class="player-nine">
				<div class="jp-type-single">
					<div class="jp-gui jp-interface">
						<div class="player-container-left">
							<a onclick="prevnext(1)" id="prev-button" class="prev-button" title="Previous track"></a>
							<a class="jp-play" tabindex="1" title="Play"></a>
							<a class="jp-pause" tabindex="1" title="Pause"></a>
							<a onclick="prevnext(2)" id="next-button" class="next-button" title="Next track"></a>
							
							<a class="jp-repeat" tabindex="1" title="Repeat" onclick="repeatSong(1)"></a>
							<a class="jp-repeat-off" tabindex="1" title="Repeat Off" onclick="repeatSong(0)"></a>
							<div style="display: none;" id="repeat-song">0</div>
							<div class="jp-current-time" id="current-time"></div>
						</div>
						<div class="player-container-middle">
							
							<div class="jp-progress">
								<div class="jp-seek-bar">
									<div class="jp-play-bar"></div>
								</div>
							</div>
							
						</div>
						<div class="player-container-right">
							<div class="jp-duration" id="duration-time"></div>
							<a class="jp-mute" tabindex="1" title="Mute"></a>
							<a class="jp-unmute" tabindex="1" title="Unmute"></a>
							
							<div class="jp-volume-bar" onclick="playerVolume()" title="Volume">
								<div class="jp-volume-bar-value"></div>
							</div>
						</div>
					</div>
				<div class="jp-no-solution"></div>
			</div>
			</div>
			<div class="player-three">
				<div id="topbar-track-info">
					<div id="topbar-artwork"></div>
					<div id="topbar-track-details">
						<div class="topbar-song-name" id="sw-song-name"></div>
						<div class="topbar-author-name" id="sw-author-name"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div id="seek-bar-song" style="display: none;">
	<div id="sound-container" class="jp-audio">
		<div class="jp-type-single">
			<div class="jp-gui jp-interface">
				<a class="jp-play">&nbsp;</a><a class="jp-pause">&nbsp;</a>
				<div class="jp-progress">
					<div class="jp-seek-bar">
						<div class="jp-play-bar"></div>
					</div>
				</div>
				<div class="jp-time-holder">
					<div class="jp-current-time"></div>
					<div class="jp-duration"></div>
				</div>
			</div>
		</div>
	</div>
</div>
<div id="sound_ghost_player" style="display: none;"><div class="jp-audio"><div class="jp-type-single"><div class="jp-gui jp-interface"><div class="jp-progress"><div class="jp-seek-bar"><div class="jp-play-bar"></div></div></div></div></div></div></div>

</body>
</html>

Open in new window

0
 
LVL 35

Expert Comment

by:Terry Woods
ID: 41857978
Screenshot:
screenshot
0
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 

Author Comment

by:DS928
ID: 41857987
I am doing the same exact thing.  Here is my code.....still a no show...

<!DOCTYPE html>
<htmlxmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">

<title>AudioDigz.com | Music for the masses - AudioDIGZ - Music for the masses</title><meta property="og:site_name" content="AudioDIGZ.com | Music for the masses" />
<meta property="og:title" content="AudioDIGZZ - Music for the masses" />
<meta property="og:description" content="AudioDIGZ is designed to help people find new music and promote new artists. Check out our music industry news as well" />
<meta property="og:image" content="http://www.audiodigztapsongz.com/uploads/2/5/7/1/25714712/1420836009.png" />
<meta property="og:url" content="http://www.audiodigz.com/" />
<meta http-equiv='cache-control' content='no-cache' />
<meta property="description" content="AudioDIGZ is a new Music Blog designed to help people find new music and promote new artists. Build your own playlist!  Share your music" />
<meta name="keywords" content="AudioDIGZ, AudioDIGZ Music Blog, AudioDIGZ Music, New Music Blog, AudioDIGZ interviews, AudioDIGZ Playlists, Artist Interviews, Find New Music, Music Blog" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--html lang="en">
<head>
<meta charset="UTF-8" />
<title>AudioDIGZ</title>
<meta name="description" content="Audio sharing platform">
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"-->


<link rel="shortcut icon" href="http://audiodigz.com/favicon.ico">
<link href="http://audiodigz.com/themes/custom/style.css" rel="stylesheet" type="text/css">

<script type="text/javascript">baseUrl = 'http://audiodigz.com'; token_id = '3b08fe7f6eaa7cc587ddf9da31b9f282'; nowPlaying = viewed_id = 0; player_volume = 0.80;</script>
<script type="text/javascript" src="http://audiodigz.com/themes/custom/js/jquery.js"></script>
<script type="text/javascript" src="http://audiodigz.com/themes/custom/js/jquery.timeago.js"></script>
<script type="text/javascript" src="http://audiodigz.com/themes/custom/js/functions.js"></script>
<script type="text/javascript" src="http://audiodigz.com/themes/custom/js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="http://audiodigz.com/themes/custom/js/slider.js"></script>


<script type="text/javascript">
$(document).ready(function() {
	$("#sound-player").jPlayer({
		cssSelectorAncestor: '#sound-container',
		play: function() {
			// Verify if a view has been added already for this track
			if(viewed_id == nowPlaying) {
				return false;
			} else {
				updateTrackInfo(nowPlaying);
				prevnext(3);
			}
			// Add the play count
			viewed_id = nowPlaying;
			$.ajax({
				type: "POST",
				url: "http://audiodigz.com/requests/add_view.php",
				data: "id="+nowPlaying+"&token_id="+token_id, 
				cache: false
			});
		},
		ended: function () {
			// If repeat is not turned on, move to the next song
			if($('#repeat-song').html() == 0) {
				$('.current-seek').html($('#sound_ghost_player').html());
				$('.current-play').show();
				viewed_id = 0;
				nextSong(nowPlaying);
			}
		},
		swfPath: "http://audiodigz.com/themes/custom/js",
		supplied: "mp3,m4a",
		wmode: "window",
		volume: player_volume,
		smoothPlayBar: true,
		keyEnabled: true
	});
});
function updateTrackInfo(id) {
	// If there's a track id
	if(id > 0) {
		// Add the current song class
		$('#track'+id).addClass('current-song');

		// Add current play class to the Play button and hide it
		$('#play'+id).addClass('current-play');
		$('.current-play').hide();

		$('.jp-audio .jp-time-holder').show();

		// Add the active player to the current song
		$("#song-controls"+id).html($("#seek-bar-song").html());

		// Add the active player class to the current song
		$("#song-controls"+id).addClass('current-seek');

		// Set the play/pause button position (this is needed for mobile view in order for the play/pause button to be at the same height with the initial play button)
		$('#track'+id+' .jp-play , #track'+id+' .jp-pause').css({ 'margin-top' : '-' + $('.song-top', '#track'+id).outerHeight() + 'px' });

		prevnext();

		// Bind functionality to the new song selector
		$("#sound-player").jPlayer("option", "cssSelectorAncestor", '#sound-container');
	}
}
function playSong(song, id) {
	// If the user is on a mobile device, open the track in a new tab rather than playing it on the page
	/*if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
		window.location = 'http://audiodigz.com/uploads/tracks/'+song;
		return false;
	}*/
	
	// Remove the current-song class (if any)
	$('.current-song').removeClass('current-song');
	// Show the previously hidden Play button (if any)
	$('.current-play').show();
	$('.current-play').removeClass('current-play');
	
	// Remove the active player if exists and set the ghost player
	$('.current-seek').html($('#sound_ghost_player').html());
	
	// Remove the active player class
	$('.current-seek').removeClass('current-seek');
	
	// Define the current playing track
	nowPlaying = id;

	// Update the track listing
	updateTrackInfo(nowPlaying);
	prevnext(3);
	
	// Get the current song name, url and author
	var trackUrl = $('#song-url'+id).attr('href');
	var artwork = $('#song-art'+id).attr('src');
	var songName, shortSongName = songName = $('#song-name'+id).html();
	var songAuthor = $('#song-author'+id).text();
	var songAuthorUrl = $('#song-author'+id).attr('href');
	
	if(songName.length > 30) {
		var shortSongName = $('#song-name'+id).html();
	}
	
	$('#sw-song-name').html($('<a>', {text: shortSongName, href: trackUrl, title: songName, rel: 'loadpage'}));
	$('#sw-author-name').html($('<a>', {text: songAuthor, href: songAuthorUrl, title: songAuthor, rel: 'loadpage'}));
	
	$('#topbar-artwork').html($('<a>', {href: trackUrl, rel: 'loadpage', id: 'artwork-container'}));
	$('#artwork-container').html('<img src="'+artwork+'">');
	
	// Get the track extension
	var ext = getExtension(song)
	
	if(ext == 'mp3') {
		$("#sound-player").jPlayer("setMedia",{mp3:baseUrl+'/uploads/tracks/'+song}).jPlayer("play");
	} else if(ext == 'm4a') {
		$("#sound-player").jPlayer("setMedia",{m4a:baseUrl+'/uploads/tracks/'+song}).jPlayer("play");
	}
}
</script>


</head>
<body>

<div id="loading-bar"><dd></dd><dt></dt></div>
<div class="topbar">
	<div class="header">
		<a href="http://audiodigz.com/index.php?a=welcome" rel="loadpage"><div class="logo"></div></a>
		<a href="http://audiodigz.com/index.php?a=explore" class="menu-button" rel="loadpage" id="explore-button">Explore</a>
		<div class="search-input"><input type="text" id="search" placeholder="Search..." autocomplete="off"></div>
		<a onclick="connect_modal()" class="menu-btn" title="Connect">Connect</a>
	</div>
	<div class="search-container"></div>
	<div class="notification-container">
		<div class="notification-content">
			<div class="notification-inner">
				<span id="global_page_url"><a href="http://audiodigz.com/index.php?a=notifications" rel="loadpage">View More Notifications</a></span>
				<span id="chat_page_url"><a href="http://audiodigz.com/index.php?a=notifications&filter=chats" rel="loadpage">View More Messages</a></span>
				<a onclick="showNotification('close')" title="Close Notifications"><div class="close_btn"></div></a>
			</div>
			<div id="notifications-content"></div>
			<div class="notification-row"><div class="notification-padding"><a href="http://audiodigz.com/index.php?a=settings&b=notifications" rel="loadpage">Notifications Settings</a></div></div>
		</div>
	</div>
</div>


<div class="topbar_margin"></div>
<div id="content">
	<style type="text/css">
.NewsHeader {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
}
.NewsBody {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	
	/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color:#6FF;
}

/* selected link */
a:active {
    color: blue;
}

.textwrap {
	float:left;
	margin:10px;
}
</style>
<div class="row-body content-page">
	<div class="body-content">
		<div class="nine columns" id="messages">
        
        
        
			<div class="page-container">
			<div class="page-content">
			<div class="page-header">News</div>
				<div class="page-inner">
					<div class="row">
						<strong class="NewsHeader">Jessica Jarrell releases a new single!</strong>
                        <br />
						<br />
						<div>
                        <img src="/themes/custom/images/JessicaCloser.png" width="780" height="500" alt="Jessica Jarrell" />
                        <div/>
                        <br />
                        <br />
                        <div>
                        <span class="NewsBody">Jessica Jarrell is an American Pop and R&B singer, actress and model.  Her newest single, <strong>Come Closer</strong> is available at iTunes and Spotify</span>
                        <br/>
                        <br/>
                        <span class="NewsBody"><a href="https://www.youtube.com/watch?v=B5SUsrKmXs8&feature=youtu.be" title="Come Closer">Listen to Come Closer on YouTube</a>
                        </span>
                        <br />
                        <br />
                        <span class="NewsBody">Most recently, Jessica featured on Elephante’s latest single, “Hold,” which premiered in late August on Billboard.  Jessica will be in the video, scheduled to drop in late 2016, in time with a full push at radio. The new music marks a departure from the teen pop and social media star’s early success with tracks such as the Justin Bieber collaboration, “Overboard,” and “Key To My Heart,” from The Back-Up Plan Soundtrack.</span>
                        <br />
                        <br />
						<span class="NewsBody">Previously, Jessica made an impact with independent Urban AC releases “Getting Right,” and video releases <a href="https://www.youtube.com/watch?v=fy3lmwLZnBg" title="Gravity">"Gravity"</a>, and the moving art piece <a href="https://www.youtube.com/watch?v=HLzivdPiOCQ" title="Goldblooded">"Goldblooded"</a>. Each release scoring millions in views on YouTube.</span>
				</div> 
				</div>
				</div>
			</div>
		</div>
        </div>
		<div class="three columns">
        <div id="newmenu" class="three column" style="    color: white;">
  <ul><li>Menu item</li>
    <li>Another</li>
  </ul>
</div>
       	</div>
         
	</div>
</div>
</div>
<div id="connect" style="display: none;">
	<div class="modal-container">
		<div class="modal-title" id="share-title">
			<div class="modal-menu-container">
				<div class="modal-menu-item modal-menu-item-active" id="tab-login">Login</div>
				<div class="modal-menu-item" id="tab-register">Register</div>
				<div class="modal-loading"></div>
			</div>
		</div>
		<div class="divider"></div>
		<div class="tab-login">
			<div id="login-message"></div>
			<div class="modal-inner">
				<form id="login-form" method="post">
				<div class="modal-input modal-connect">	
					<input type="text" id="short" name="username" placeholder="Username or email">
					<input type="password" id="short" name="password" placeholder="Password">
				</div>
				<div class="modal-checkbox"><input type="checkbox" name="remember" value="1" id="remember-me"><label for="remember-me">Remember me</label></div>
				<input type="submit" style="display: none;"><!-- submit button used to enable the enter key -->
				</form>
				<div class="forgot-password"><a href="http://audiodigz.com/index.php?a=recover" rel="loadpage">Forgot your password?</a></div>
			</div>
			<div class="divider"></div>
			<div class="modal-menu">
				<div class="modal-btn modal-btn-active"><a id="login-button" onclick="connect(1)">Login</a></div><div class="modal-btn modal-btn-facebook"><a href="https://www.facebook.com/dialog/oauth?client_id=1695790404073323&redirect_uri=http://audiodigz.com/requests/connect.php?facebook=true&state=d5e63e82d7a6a76b8857e6fd89f1516d&scope=public_profile,email" class="facebook-button">Facebook</a></div>
			</div>
		</div>
		<div class="tab-register">
			<div id="register-message"></div>
			<div class="modal-inner">
				<div class="modal-input modal-connect">
					<form id="register-form" method="post">
					<input type="text" id="short" name="username" placeholder="Username">
					<input type="password" id="short" name="password" placeholder="Password">
					<input type="text" id="short" name="email" placeholder="Email">
					
					<input type="submit" style="display: none;"><!-- submit button used to enable the enter key -->
					</form>
				</div>
			</div>
			<div class="divider"></div>
			<div class="modal-menu">
				<div class="modal-btn modal-btn-active"><a id="register-button" onclick="connect(0)">Register</a></div><div class="modal-btn modal-btn-facebook"><a href="https://www.facebook.com/dialog/oauth?client_id=1695790404073323&redirect_uri=http://audiodigz.com/requests/connect.php?facebook=true&state=d5e63e82d7a6a76b8857e6fd89f1516d&scope=public_profile,email" class="facebook-button">Facebook</a></div>
			</div>
		</div>
	</div>
</div>
<div class="modal-background"></div>
<div class="row-body">
	<div class="footer">
		<div class="footer-container">
			<div class="footer-links">
				<a href="http://audiodigz.com/index.php?a=page&b=tos" rel="loadpage">Terms of Use</a> - 
				<a href="http://audiodigz.com/index.php?a=page&b=privacy" rel="loadpage">Privacy Policy</a> - 
				<a href="http://audiodigz.com/index.php?a=page&b=dmca" rel="loadpage">DMCA</a> - 
				<a href="http://audiodigz.com/index.php?a=page&b=contact" rel="loadpage">Contact</a> - 
				<a href="http://audiodigz.com/index.php?a=admin" rel="loadpage">Admin</a>
			</div>
			<div class="footer-languages">
				Language: <a href="http://audiodigz.com/index.php?lang=english">English</a>
			</div>
			<div class="footer-info">
				Copyright &copy; 2016 AudioDIGZ. All rights reserved
			</div>
		</div>
	</div>
</div>
<div class="bottombar">
	<div class="bottombar-container">
		<div id="sound-player" class="jp-jplayer"></div>
		<div id="sound-container" class="jp-audio top-player">
			<div class="player-nine">
				<div class="jp-type-single">
					<div class="jp-gui jp-interface">
						<div class="player-container-left">
							<a onclick="prevnext(1)" id="prev-button" class="prev-button" title="Previous track"></a>
							<a class="jp-play" tabindex="1" title="Play"></a>
							<a class="jp-pause" tabindex="1" title="Pause"></a>
							<a onclick="prevnext(2)" id="next-button" class="next-button" title="Next track"></a>
							
							<a class="jp-repeat" tabindex="1" title="Repeat" onclick="repeatSong(1)"></a>
							<a class="jp-repeat-off" tabindex="1" title="Repeat Off" onclick="repeatSong(0)"></a>
							<div style="display: none;" id="repeat-song">0</div>
							<div class="jp-current-time" id="current-time"></div>
						</div>
						<div class="player-container-middle">
							
							<div class="jp-progress">
								<div class="jp-seek-bar">
									<div class="jp-play-bar"></div>
								</div>
							</div>
							
						</div>
						<div class="player-container-right">
							<div class="jp-duration" id="duration-time"></div>
							<a class="jp-mute" tabindex="1" title="Mute"></a>
							<a class="jp-unmute" tabindex="1" title="Unmute"></a>
							
							<div class="jp-volume-bar" onclick="playerVolume()" title="Volume">
								<div class="jp-volume-bar-value"></div>
							</div>
						</div>
					</div>
				<div class="jp-no-solution"></div>
			</div>
			</div>
			<div class="player-three">
				<div id="topbar-track-info">
					<div id="topbar-artwork"></div>
					<div id="topbar-track-details">
						<div class="topbar-song-name" id="sw-song-name"></div>
						<div class="topbar-author-name" id="sw-author-name"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div id="seek-bar-song" style="display: none;">
	<div id="sound-container" class="jp-audio">
		<div class="jp-type-single">
			<div class="jp-gui jp-interface">
				<a class="jp-play">&nbsp;</a><a class="jp-pause">&nbsp;</a>
				<div class="jp-progress">
					<div class="jp-seek-bar">
						<div class="jp-play-bar"></div>
					</div>
				</div>
				<div class="jp-time-holder">
					<div class="jp-current-time"></div>
					<div class="jp-duration"></div>
				</div>
			</div>
		</div>
	</div>
</div>
<div id="sound_ghost_player" style="display: none;"><div class="jp-audio"><div class="jp-type-single"><div class="jp-gui jp-interface"><div class="jp-progress"><div class="jp-seek-bar"><div class="jp-play-bar"></div></div></div></div></div></div></div>

</body>
</html>

Open in new window

0
 

Author Comment

by:DS928
ID: 41857992
Thank you.  We both have the same code.  Same browser.  Different results!  Did you add any CSS?
0
 
LVL 35

Accepted Solution

by:
Terry Woods earned 500 total points
ID: 41857999
Apologies... I used the View Source tool to view my code after I made the change, and it brought up your code instead. I saw it there and thought it was mine. Thus I copied and pasted the wrong code.

A copy and paste of the <div class="body-content"> element for my working code is:
<div class="body-content">
		<div class="nine columns" id="messages">
        
			<div class="page-container">
			<div class="page-content">
			<div class="page-header">News</div>
				<div class="page-inner">
					<div class="row">
						<strong class="NewsHeader">Jessica Jarrell releases a new single!</strong>
                        <br>
						<br>
						<div>
                        <img src="/themes/custom/images/JessicaCloser.png" width="780" height="500" alt="Jessica Jarrell">
                        <div>
                        <br>
                        <br>
                        <div>
                        <span class="NewsBody">Jessica Jarrell is an American Pop and R&amp;B singer, actress and model.  Her newest single, <strong>Come Closer</strong> is available at iTunes and Spotify</span>
                        <br>
                        <br>
                        <span class="NewsBody"><a href="https://www.youtube.com/watch?v=B5SUsrKmXs8&amp;feature=youtu.be" title="Come Closer">Listen to Come Closer on YouTube</a>
                        </span>
                        <br>
                        <br>
                        <span class="NewsBody">Most recently, Jessica featured on Elephante’s latest single, “Hold,” which premiered in late August on Billboard.  Jessica will be in the video, scheduled to drop in late 2016, in time with a full push at radio. The new music marks a departure from the teen pop and social media star’s early success with tracks such as the Justin Bieber collaboration, “Overboard,” and “Key To My Heart,” from The Back-Up Plan Soundtrack.</span>
                        <br>
                        <br>
						<span class="NewsBody">Previously, Jessica made an impact with independent Urban AC releases “Getting Right,” and video releases <a href="https://www.youtube.com/watch?v=fy3lmwLZnBg" title="Gravity">"Gravity"</a>, and the moving art piece <a href="https://www.youtube.com/watch?v=HLzivdPiOCQ" title="Goldblooded">"Goldblooded"</a>. Each release scoring millions in views on YouTube.</span>
				</div> 
				</div>
				</div>
			</div>
		</div>
        </div>
      
	</div>
</div>
          <div id="newmenu" class="three columns" style="    color: white;">
  <ul><li>Menu item</li>
    <li>Another</li>
  </ul>
</div>

</div>

Open in new window

0
 
LVL 35

Expert Comment

by:Terry Woods
ID: 41858000
You can see the extra div with class="three columns" (with an s in columns!) is near the end, just before the closing div for the div class="body-content" element.

No extra css was added.
0
 

Author Comment

by:DS928
ID: 41858001
BINGO!  You did it! Thank you!
0
 

Author Closing Comment

by:DS928
ID: 41858002
Thank you!  Works great!  So many DIV'S!
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now