I'm trying to use jplayer to play mp3 files added in custom fields. So when I click on the mp3 file in the post jplayer grab the mp3 files, but so far it only show the name of the file and the artist, but I can't get it to actually play the file.
I use this code on single.php:
<div class="mp3jplayer-track">
<a class="playprogram" href='javascript:initMp3("<?php echo $mp3_url; ?>", "<?php echo $mp3_name; ?> - <?php /*if there is an artist specified for each mp3, we get it, otherwise we get the taxonomie Artists*/ if ($mp3_artists != ''){ echo 'Artist(s): '.$mp3_artists;} else { echo 'Artist(s): '.$artists_names; } ?>")'>Play <br><span class="mp3_name"><i class="icon-music icon-white"></i><span class="mp3_name_text"><?php echo $mp3_name ?></span></span></a> </div>
The jplayer looks like this in my footer:
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
<li>stop</li>
</ul>
<!--
<ul class="jp-toggles">
<li>repeat</li>
<li>repeat off</li>
</ul>
-->
<div class="jp-progress-group">
<div class="jp-current-time"></div>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-duration"></div>
</div>
<div class="jp-volume-group">
mute
unmute
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
max volume
</div>
<div class="jp-time-holder">
</div>
</div>
<div class="jp-title">
<ul>
<li></li>
</ul>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your Flash plugin.
</div>
</div>
</div>
And the javascript to load the mp3:
function initMp3(mp3file, mp3info){
jQuery.noConflict()(function($){
/* DEBUG
window.alert(mp3file);
window.alert(mp3info);
*/
$("#jp_container_1").css("display","block");
$("#jquery_jplayer_1").jPlayer( "clearMedia" );
$("#jquery_jplayer_1").jPlayer( "setMedia" , {
mp3:mp3file
});
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
mp3:mp3file
}).jPlayer("play");
},
swfPath: "js",
supplied: "mp3",
wmode: "window"
})
$(".jp-title ul li").text(mp3info);
$("#jquery_jplayer_1").jPlayer("play");
});
};
I really searched but I can't find why it doesn't work, any idea?
Ok I fixed the issue, my swf path was broken and for some reason, firefox cannot us the html player...
Related
I need to make reactive a class inside a const (exported from a module).
export const messageControls = '
<div id="controls"">
<i id="idcont" class="{{starred}}"></i>
</div>
'
This class belongs to an HTML block who's inserted as innerHTML of a createElement.
var newElement = document.createElement('div');
newElement.id = i._id;
newElement.className = "single_message";
newElement.innerHTML = messageControls;
document.getElementById('conversation_details').appendChild(newElement);
The {{helper}} below is not rendering anything :
starred: function () {
return 'bob';
},
<i id="idcont" class="{{starred}}"></i> gives {{starred}} in plain text
<i id="idcont" class=" ' + {{starred}} + ' "></i> breaks all
Any idea?
Update - full Blaze template as requested
<template name="inbox">
<div class="searchmessages">
<input type="text" name="searchmessages" id="searchmessages" placeholder=" any word / any date">
</div>
<div class="row">
<div class="col-xs-4 l-O list_messages">
<div id="gridreceived" class="gridmessages">
{{#each incoming_all}}
<div id="{{_id}}" class="item {{readornot}}">
<div class="item-content">
<div class="task_inlist">
<div class="task_from">
{{{from}}}
</div>
<div class="task_date">
{{initialdate}}
</div>
<div class="task_subject">
{{{subject}}}
</div>
<div class="task_content">
{{{htmlbody}}}
</div>
</div>
</div>
</div>
{{/each}}
</div>
<div class="grid_nomatch">{{grid_noresult}}</div>
</div>
<div id="conversation_details" class="col-xs-8" media="print">
<!--
here are each selected message details
-->
</div>
</div>
</template>
You're trying to inject spacebars template markup directly into the DOM but meteor-blaze wants to use spacebars to build the DOM. It doesn't watch the DOM for arbitrary changes and then make template substitutions inside of it!
You can instead use Meteor's reactivity to automatically insert new items into the DOM for you based on changes to the underlying data. In your case it looks like you're trying to show the details of a message that's been clicked on. You probably have a template event handler already to catch the click. In that template handler you can set a Session variable which indicates which message is currently selected and then use that Session variable inside the helper that renders the message details.
For example:
<template name="inbox">
<div class="searchmessages">
<input type="text" name="searchmessages" id="searchmessages" placeholder=" any word / any date">
</div>
<div class="row">
<div class="col-xs-4 l-O list_messages">
<div id="gridreceived" class="gridmessages">
{{#each incoming_all}}
<div id="{{_id}}" class="item {{readornot}}">
// render summary of each message
</div>
{{/each}}
</div>
<div class="grid_nomatch">{{grid_noresult}}</div>
{{#with selectedMessage}}
<div id="conversation_details" class="col-xs-8" media="print">
// render selected message details
</div>
{{/with}}
</div>
</template>
Your js:
Template.inbox.events({
'click .item'(ev) {
Session.set('selectedMessageId',this._id);
}
});
Template.inbox.helpers({
selectedMessage() {
return Messages.findOne(Session.get('selectedMessageId'));
}
});
Now to your follow-up question about how to reactively style an element. Let's say your message* object has aisStarredboolean key. In the message detail section we've set the data context using{{#with currentMessage}}` so any key of the current message can be used directly in our spacebars template. Where you are displaying the message details you can do:
<div id="controls"">
<i id="idcont" class="{{#if isStarred}}starred{{/if}}"></i>
</div>
Depending on whether or not the message is starred this will render as class="" or class="starred".
I'm having a little bit of a problem. My page.php seems to be overriding WooCommerce's cart page. The page is already created (generated by WooCommerce with the shortcode intact) named Cart.
I know that my page.php is overriding it, but I don't know how to stop that. Here is the code for my page.php page:
<?php
get_header();
if ( have_posts() ) {
//Work with us page
$workwithuspage = "work with us";
$pitch = "pitch an idea";
$cart = "cart";
if($workwithuspage == strtolower(get_the_title()))
{
//Page stuff here!
$image = wpse_get_images();
?>
</div>
<div class="hero">
<div class="container heroImage" style="background-image:url('<?php echo $image->guid;?>');">
<div class="col-md-7"></div>
<div class="col-md-5">
<div class="pageText">
Work with Us
</div>
<div class="subText">
<?php echo $image->post_content; ?>
</div>
</div>
</div>
</div>
<div class="bodyBg">
<div class="container">
<div class="col-md-6">
<div class="box-style">
<div class="box-header">
Got a comic idea and want it published?
</div>
<div class="box-text">
Tell us your desires, so we can slap it on a comic book and sell it for millions. Ya dig?
</div>
<div class="box-button-container">
<?php
$pitch = get_page_by_title('pitch an idea');
?>
<div class="button large">Pitch an Idea</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="box-style">
<div class="box-header">
Want to work on one of our great titles?
</div>
<div class="box-text">
Tell us your desires, so we can slap it on a comic book and sell it for millions. Ya dig?
</div>
<div class="box-button-container">
<div class="button large">Find Jobs</div>
</div>
</div>
</div>
</div>
</div>
<div id="ourstandards">
<div class="coloroverlay">
<div class="container">
<div class="col-md-6">
<div class="pageHeaderText">
Our Standards
</div>
<div class="bodyTxt">
<p>
At On Target Network, we strive to promote consistency,
communication and passion in all areas of work and we expect the same of our artists.
</p>
<p>
We understand the nature of creators and seek to raise ourselves to higher and higher standards. To do that, we vet and
review series pitches with a carefully selected panel of writers and artists.
</p>
<br /><br />
<p>
Got questions? We'll be happy to help.
</p>
<div id="sendUsQ" class="secondaryBtn">
Send us your questions
</div>
</div>
</div>
<div class="col-md-6"></div>
</div>
</div>
</div>
<div class="container">
<?php
}
else if($pitch == strtolower(get_the_title()))
{
?>
</div>
<div id="pitchImg" class="hero">
<div class="container">
<div class="col-md-7"></div>
<div class="col-md-5">
<div class="pageText">
Pitch an Idea
</div>
<div class="subText">
<?php echo $image->post_content; ?>
</div>
</div>
</div>
</div>
<div class="bodyBg">
<div class="container">
<div class="col-md-12">
<div class="pageHeaderText dark">
Start your pitch here
</div>
</div>
<div class="col-md-9">
<?php
if ( isset($si_contact_form) ) {
echo $si_contact_form->si_contact_form_short_code( array( 'form' => '1' ) );
}
?>
</div>
</div>
</div>
<?php
}
}
get_footer();
?>
I have conditional ifs for pages I wanted to customize, but I fear in doing that, it has overridden (somehow) the cart page.
WooCommerce adds the cart using shortcodes; shortcodes get displayed as part of the page content. WP uses the the_content() function to display the content for a particular page or post. You've removed the_content() from your page template, therefore the cart doesn't display.
Looking at your page template, you've removed the_content() and inlined all your content directly into the template rather than fetching it from the database. This is atypical of a WP site in general, but I understand that sometimes a site starts off static and you just want to get it 'into' WP.
You're also using a bunch conditionals to display different chunks of content, which runs against the idea of using templates. My suggestion would be to create separate page templates for your 'pitch' and 'work with us' pages, and make page.php just a default page template that has the_content(). This way you have a generic template you can use for any page, including the cart page.
Check the codex for more info on creating custom page templates, but in a nutshell, you add a comment to the top of the file:
<?php
/*
Template Name: My Custom Page
*/
Then save your file in your theme folder. Common practice is to name it along the line of page-pitch.php so you can easily identify it. Then in the admin area you can assign the template to any page you want simply by selecting it from the drop down menu.
Splitting your different content into separate templates has a couple of benefits; namely you no longer have to use conditionals for checking the page titles (which can vary from install to install) and makes it much easier for you to debug things.
I am working on a social media network, and in my posts, I am trying to add the glyphicons found in Bootstrap 3 to the posts. Now, I have managed to the the icons on the same line as the username, but I can't work out how to get the username first, and then the glyphicons. Below is my code:
<div class="media well single-post" id="post-<?php echo $post['post_id'];?>">
<div class="avatar large pull-left">
<?php if ($this->profile_type === 'page' || $post['post_wall_profile_type'] === 'page'):?>
<a href="<?php echo $this->baseUrl()?>/<?php echo $post['post_wall_name'];?>">
<img src="<?php echo $this->GetStorageUrl('avatar') . $post['post_wall_avatar'];?>">
</a>
<?php elseif ($this->profile_type === 'feed' && $post['post_wall_profile_type'] === 'group'):?>
<a href="<?php echo $this->baseUrl()?>/<?php echo $post['post_wall_name'];?>">
<img src="<?php echo $this->GetStorageUrl('avatar') . $post['post_wall_avatar'];?>">
</a>
<?php else:?>
<div class="pull-right"><?php if (isset($post['author_meta']['badges'])):?>
<div class="network-badges vertical">
<?php echo $this->partial('/partial/badges.phtml', array('badges' => $post['author_meta']['badges']));?>
</div>
<?php endif;?><div class="pull-left"><a href="<?php echo $this->baseUrl()?>/<?php echo $post['user_name'];?>"></div></div>
<div class="pull-left"><img src="<?php echo $this->GetStorageUrl('avatar') . $post['user_avatar'];?>">
</a></div>
<?php endif;?>
</div>
Here is what it currently looks like: http://www.startrekrisa.com/Picture1.png
I know it's gonna be a simple fix, but I cannot work out how to do it.
Thanks in advance
[Edit] See this jsfiddle based on the fixed markup below and the /partial/badges.phtml code you gave in a comment; obviously your global css is not there, but you can see it properly puts the avatar left and the glyphicons to the right of it [/Edit]
The HTML you generate with that piece of code doesn't seem quite right, and considering your question only relates to html/css, it would have been better to strip your code sample down to a piece of html+css, without the php logic.
From what I can see, your question directlly concern the else part of your main logic, when the inner if is true. In that case I believe your code will generate
<div class="media well single-post" id="post-1234">
<div class="avatar large pull-left">
<div class="pull-right">
<div class="network-badges vertical">
<!-- content of /partial/badges.phtml with the user bages -->
</div>
<div class="pull-left"><a href="http://example.org/users/username"></div>
</div>
<div class="pull-left"><img src="http://example.org/avatars/username">
</a>
</div>
</div>
You can see here you have html problems:
your pull-left div is closed before the link inside is closed; the link inside is closed further on
you have a mismatch between open and close tags for your div
I believe the html you'd want would be more like
<div class="media well single-post" id="post-1234">
<div class="avatar large pull-left">
<div class="pull-right">
<div class="network-badges vertical">
<!-- content of /partial/badges.phtml with the user bages -->
</div>
</div>
<div class="pull-left">
<a href="http://example.org/users/username">
<img src="http://example.org/avatars/username">
</a>
</div>
</div>
</div>
Mixing php logic with your html like that is not terrific and will lead you to more similar problems where you end up not generating the markup you imagined.
P.S. It usually a good practice when working on the interface to first work without any logic behind and just static data, to ensure you get the markup you want and need, and then only merge this with your logic (but it's still better to have your logic separated from the ui though)
I'm using bootstrap tab shortcodes on my Wordpress site. I want to link from another page to tab2. Can anyone advise how this is done?
My page code (chopped a bit):
[bootstrap_tab name="TAB1" link="tab1-slug" active="active"]
TAB 1 Content
[/bootstrap_tab]
[bootstrap_tab name="TAB2" link="tab2-slug"]
More content
[/bootstrap_tab]
[bootstrap_tab name="TAB3" link="tab3-slug"]
Yep. Even more content.
[/bootstrap_tab]
[bootstrap_tab name="TAB4" link="tab4-slug"]
Yep. Even more content.
[/bootstrap_tab]
[end_bootstrap_tab]
The code it produces:
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="tabs active">
<a data-toggle="tab" href="#tab1-slug">TAB1</a>
</li>
<li class="tabs ">
<a data-toggle="tab" href="#tab2-slug">TAB2</a>
</li>
<li class="tabs ">
<a data-toggle="tab" href="#tab3-slug">TAB3</a>
</li>
<li class="tabs ">
<a data-toggle="tab" href="#tab4-slug">TAB4</a>
</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div id="tab1-slug" class="tab-pane active">
<p></p>
<h2>header</h2>
<p><strong>bold</strong></p>
<p>content</p>
<p></p>
</div>
<div id="tab2-slug" class="tab-pane ">
<p></p>
<h2>TAB2</h2>
<p><strong>These are usually two day</strong></p>
</div>
<div id="tab3-slug" class="tab-pane ">
<p></p>
<h2>TAB3</h2>
<p>1 to 2 day events</p><p></p>
</div>
<div id="tab4-slug" class="tab-pane ">
<p>
<h2>TAB4</h2>
<p><strong>5 to 10 day courses</strong></p>
</div>
</div>
Though not in WordPress, this seems to be the definitive solution to linking to Bootstrap tabs:
Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink
That being said, I wrote a WordPress plugin that will do this. Activate the plugin, then you'll be able to use the tab's href as the hash.
If your tab looks like this:
<li>Profile</li>
You can link to it and activate/open it using a link like this:
Link to my tab
The plugin will also allow you to link directly to content on the tabs, using a sort of a two-step link:
Step 1 Activate the proper tab
Step 2 Scroll to the content on the tab.
It does this using only a single hash in the URL.
For example: http://www.example.com/mypage/#content
This will take you to "mypage" and the HTML element with id="content", whether it's on an active/inactive Bootstrap tab or just on the page somewhere.
Hope this helps:
Here's the plugin on GitHub: https://github.com/marinersmuseum/WP-Tab-Anchors/blob/master/wp-tab-anchors.zip
Supposing that jQuery is being loaded and that the link URL is something like
http://example.com/page-with-tabs/?tab=NUMBER
We print some conditional script at the footer:
add_action( 'wp_footer', 'active_tab_so_19576232' );
function active_tab_so_19576232()
{
# Query var not set in URL, bail out
if( !isset( $_GET['tab'] ) )
return;
# Change the active tab
$tab = '#tab'. $_GET['tab'] .'-slug';
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('div.tab-pane.active').removeClass('active');
$('<?php echo $tab; ?>').addClass('active');
});
</script>
<?php
}
Should be a plugin, but you can drop the code in your theme functions.php.
I use this code for navigation in my front page:
<h13><div class="navigation">
<div class="next-posts">
<div id="image_left"><?php next_posts_link('<img src="IMG URL"/>') ?></div>
<div id="posts_left"><h12><?php next_posts_link('Older Stuff') ?></h12></div>
</div>
<div class="prev-posts">
<div id="posts_right"><h12><?php previous_posts_link('Newer Stuff') ?></h12></div>
<div id="image_right"><?php previous_posts_link('<img src="IMG URL"/>') ?></div>
</div>
I want the same navigation for my single post view but I can't get it to work, I made the changes for PHP functions but in Codex I only found a vay to display posts from the same category.
Also, I don't want the link to display previous/next post's title, only text that I define.
One last thing, I can't get the image navigation to work at all in single view, but it does work flawlessly in my home page.
This is my code at the moment:
<h13><div class="navigation">
<div class="next-post">
<div id="img_left"><?php next_post_link('<img src="IMG URL"/>') ?></div>
<div id="post_left"><h12><?php next_post_link('%link', 'Next post', TRUE); ?></h12></div>
</div>
<div class="prev-post">
<div id="post_right"><h12><?php previous_post_link('%link', 'Previous post', TRUE); ?></h12></div>
<div id="img_right"><?php previous_post_link('<img src="IMG URL"/>') ?></div>
</div>
h13 and h12? I didn't know headers went up that high!
I'm guessing you already read the Codex Page for the next_post_link() function. But did you make sure to include the call in the loop? Also, try adding in the extra parameters to the functions. Sometimes they get confused.