Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 85
  • Last Modified:

Adding a menu section

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
DS928
Asked:
DS928
  • 6
  • 6
1 Solution
 
Terry WoodsIT GuruCommented:
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
 
DS928Author Commented:
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
 
Terry WoodsIT GuruCommented:
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
DS928Author Commented:
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
 
Terry WoodsIT GuruCommented:
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
 
Terry WoodsIT GuruCommented:
Screenshot:
screenshot
0
 
DS928Author Commented:
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
 
DS928Author Commented:
Thank you.  We both have the same code.  Same browser.  Different results!  Did you add any CSS?
0
 
Terry WoodsIT GuruCommented:
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
 
Terry WoodsIT GuruCommented:
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
 
DS928Author Commented:
BINGO!  You did it! Thank you!
0
 
DS928Author Commented:
Thank you!  Works great!  So many DIV'S!
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 6
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now