Solved

Adding a menu section

Posted on 2016-10-24
13
65 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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
 

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

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

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 …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

732 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