How to Center the jPlayer Circle.Player

[iwato]

BACKGROUND:  What I thought would be an easy task through the use of a <div> wrapper has proven very difficult, if not impossible.  Whoever built this nifty GUI either knows a lot more than I about positioning and placement, or they built this widget totally oblivious to potential user implementation.  Please understand that I have gone through a lot of trouble to get it to work, am loathe to abandon it at such a late stage, but definitely will abandon it, if I cannot learn to place it at my will.

DILEMMA and QUESTION:  I would very much like to center the audio player displayed on the following page, but cannot seem to accomplish the task.  Have you any suggestions short of rebuilding the entire graphical interface pixel by pixel?

 

VIEWING STEPS:

Step One:  Open to Sender Proxy and click on the link entitled Proxy Link in the bottom-left corner.

Step Two:  When the page open click on the words Click and Listen.  The image that appears is what I would like to center beneath the words Click and Listen.

The pages necessary to understand the structural and formatting aspects are provided below:

 

SOURCE PAGES:

The Template:  http://www.grammarcaptive.com/podcasting/template/template.html
You must open the page in source code to make any sense of it.  The portion of this page that forms the template begin and ends with the following two <div> tags: 

Start Tag:  <div id='podcast_insert'>
End Tag:    </section><!-- end section_summary --> 

The CSS: http://www.grammarcaptive.com/_utilities/lbrary/jPlayer-2.9.2/lib/circle-player/skin/circle.player.css

The Javascript:  http://www.grammarcaptive.com/_utilities/lbrary/jPlayer-2.9.2/lib/circle-player/js/circle.player.js
I offer this Javascript only  for the sake of completeness.  As  a well-formatted jQuery product, the CSS is truly a separate issue.

 

HOST PAGE JAVASCRIPT USED to INITIALIZE the PLAYER

<script>
$("#click_listen").mouseenter(function() {
    $(this).css({'cursor':'pointer','color':'#5a4149'});
    $(this).click(function(){
        $("#cp_container_1").show();
        var myCirclePlayer = new CirclePlayer("#jquery_jplayer_1",
        {
            m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
            oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
        },
        {
            cssSelectorAncestor: "#cp_container_1",
            swfPath: "_utilities/library/jPlayer-2.9.2/dist/jplayer/",
            wmode: "window",
            keyEnabled: true
        });	
    });				
})
.mouseout(function() {
    $(this).css({'cursor':'none','color':'#fff'});
});
</script>

Roddy
 

[dsonesuk]

Was this code provided by jwplayer? Cause from what i see everytime a mouseenter happens, a on click event is applied to same element, which can happen multiple times.

[iwato]

What is inside the click function was supplied by jPlayer.  Everything else was written by me and is not yet complete.  Surely this is not the source of the centering problem, however.

Roddy

[dsonesuk]

To centre like the text, the outer container should be set to inline as in display: inline-block; this will allow this element to be centred as text, as well as enabling and setting width, which a display: inline; wouldn't allow.

Also because the element is by default a block element, and has a width set, you could also use margin: 0 auto;

[iwato]

Thank you for your suggestions.  The following decidedly works, but I am not sure why.

				<div style='text-align:center;'>
					<h1 id='click_listen'>Click and Listen</h1>
<!-- The jPlayer div must not be hidden. Keep it at the root of the body element to avoid any such problems. -->
					<div id="jquery_jplayer_1" class="cp-jplayer"></div>
<!-- The container for the interface can go where you want to display it. Show and hide it as you need. -->
					<div id="cp_container_1" class="cp-container" style='display:inline-block;margin: 0 auto;text-align: center;'>
						<div class="cp-buffer-holder"> <!-- .cp-gt50 only needed when buffer is > than 50% -->
							<div class="cp-buffer-1"></div>
							<div class="cp-buffer-2"></div>
						</div>
						<div class="cp-progress-holder"> <!-- .cp-gt50 only needed when progress is > than 50% -->
							<div class="cp-progress-1"></div>
							<div class="cp-progress-2"></div>
						</div>
						<div class="cp-circle-control"></div>
						<ul class="cp-controls">
							<li><a class="cp-play" tabindex="1">play</a></li>
							<li><a class="cp-pause" style="display:none;" tabindex="1">pause</a></li>
		<!-- Needs the inline style here, or jQuery.show() uses display:inline instead of display:block -->
						</ul>
					</div><!-- end div#cp_container_1 -->
					<p style="font-family:'Bradley Hand', cursive;font-size:1.6em;">Did you learn from it?<br />Did you like it?</p>
					<div id='share'></div>
					<p style="font-family:'Bradley Hand', cursive;font-size:1.6em;">Now, teach and share it!</p>
				</div>

Is it because the <div> tag into which it is being inserted is itself being treated as text?

Roddy

 

Edited December 2, 2017 by iwato

[dsonesuk]

inline elements such as span, strong act how text acts when alignment is used, they shrink to content so height and width can't be used. Block elements by default fill the width available to them, and by adding text-align to this block element which fills the available width, any inline elements within it or child block elements along with text will be aligned to the specified text-align: left/center/right; of this parent element.

The player container div is a block element, with fixed set width, by default it will position itself left as it not defined as a inline/inline-block element. In this current state a block element with fixed width will only centre itself if margin: 0 auto; is used.

IF the player container because it has a fixed width was defined as display: inline-block; would be set to defined width and align as text would, following the text-align: rule set out on parent container.