I have a playlist for the flowplayer on the page. I am having problems with tracks having titles that include special characters. Currently I have the code below that works fine:
$(function(){
$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
clip: {
baseUrl: "http://localhost/gbc/"
},
playlist: [
{ url: "media/20140724_agoodsong.mp3",
name: "20140724_agoodsong.mp3",
title: "this title works",
class: "audio",
id: "3"
}
]
});
$f("player").playlist("div.playlist:first", {loop:true});
});
However, the second I put a special character in the title it does not work such as title: "this doesn't work". There are no errors that I can tell; there's nothing in the developer tools console or in the Apache server logs. Everything displays fine, just when I click on the song to play the player goes black and nothing happens. I have tried putting back slashes in front of it to escape it like this title: "this still doesn\'t work" but it does not change anything. That's what made me think it has something to do with the way the Flowplayer Playlist plugin handles it. Since it takes those values in the JavaScript and inserts them into a template in the html like the following:
<div class="playlist">
<ul class="${class}">
<li>
<img data-name="${name}" class="audio" src="images/delete.png" id="${id}" />
<a href="${url}">
${title}
</a>
</li>
</ul>
</div>
Here is a FIDDLE that shows the problem. Currently it works, but add a special character of any kind in the title and it stops working. Even adding html codes like ' for an apostrophe stops it from working.
Does anyone know how I can include a title that has special characters?
So I ended up getting it to work by escaping the special characters with unicode. So for an apostrophe I used \u2019 in this case.
$(function(){
$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
clip: {
baseUrl: "http://localhost/gbc/"
},
playlist: [
{ url: "media/20140724_agoodsong.mp3",
name: "20140724_agoodsong.mp3",
title: "this title work\u2019s",
class: "audio",
id: "3"
}
]
});
$f("player").playlist("div.playlist:first", {loop:true});
});
You can see the above code working in this FIDDLE.
While that fixed my initial problem, these titles are user inputs in my case so I had to find a way to find and convert the special characters to their unicode equivalents. After much googling I didn't really find anything that was concrete so I tried a different approach. I did away with using the template that the flowplayer documentation uses and just printed the playlist out in the html myself. So now in the JavaScript I just set the base url for flowplayer and instantiate the playlist plugin.
$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
clip: {
baseUrl: 'http://localhost/gbc/'
}
});
$f("player").playlist("div.playlist:first", {loop:true});
And then in my PHP script I loop through and create each playlist item myself using the same format as the template I started with.
while ($row = mysqli_fetch_assoc($result))
{
$id = $row['id'];
$name = $row['name'];
$title = stripslashes($row['title']);
$type = $row['type'];
$class = "audio";
if (strpos($type,'video') !== false) {
$class = "video";
}
print "<ul class='$class'>
<li>
<img data-name='$name' class='deleteAudio' src='images/delete.png' id='$id' />
<a href='media/$name'>
$title
</a>
</li>
</ul>";
}
And then in the page file I just include this script to print out the playlist.
<div class="playlist">
<?php include "phpscripts/getAudio.php"; ?>
</div>
Not sure if this is the best way to do it, but it worked for me! Hopefully this will save someone else some time and frustration.
Related
I have been trying to save the source code of a section of a webpage using PHP. When I extract the content of whole webpage, the source code order is preserved but when I try to get part of the document using
$dom = new DOMDocument;
$dom->loadHTML($webpage);
$xpath = new DOMXPath($dom);
$query_tag = "//div[contains(#class, 'class-name')]";
$result = $dom->saveHTML($xpath->query($query_tag)->item(0));
The script tag gets messed up. Until now, this is the only website where this issue occurred. Are there some limitations of saveHTML function that I am not aware of?
This is what I should be receiving:
<div id="sponsored-category-header" class="page-header sponsored-category-header clear"> <script type="text/javascript">jQuery(document).ready(function($) {
var cat_head_params = {"sponsor":"SEO PowerSuite","sponsor_logo":"https:\/\/www.searchenginejournal.com\/wp-content\/plugins\/abm-sej\/includes\/category-images\/SPS_128.png","sponsor_text":"<div class=\"taxonomy-description\">Dominate Google local search results with ease! Get your copy of SEO PowerSuite and keep <a rel=\"nofollow\" href=\"http:\/\/sejr.nl\/PowerSuite-2016-5\" onClick=\"__gaTracker('send', 'event', 'Sponsored Category Click Var 1', 'Local Search', 'SEO PowerSuite');\" target=\"_blank\">your local SEO strategy<\/a> up to par.<\/div>","logo_url":"http:\/\/sejr.nl\/PowerSuite-2016-5","ga_labels":["Local Search","SEO PowerSuite"]}
$('#sponsored-category-header').append('<div class="sponsored-category-logo"></div>');
$('#sponsored-category-header .sponsored-category-logo').append(' <a rel="nofollow" href="'+cat_head_params.logo_url+'" onClick="__gaTracker(\'send\', \'event\', \'Sponsored Category Click Var 1\', \''+cat_head_params.ga_labels[0]+'\', \''+cat_head_params.ga_labels[0]+'\');" target="_blank"><img class="nopin" src="'+cat_head_params.sponsor_logo+'" width="96" height="96" /></a>');
$('#sponsored-category-header').append('<div class="sponsored-category-details"></div>');
$('#sponsored-category-header .sponsored-category-details').append('<h3 class="page-title sponsored-category-title">'+cat_head_params.sponsor+'</h3>');
$('#sponsored-category-header .sponsored-category-details').append(cat_head_params.sponsor_text);
});</script> </div>
This is what I actually get:
<div id="sponsored-category-header" class="page-header sponsored-category-header clear"> <script type="text/javascript">jQuery(document).ready(function($) {
var cat_head_params = {"sponsor":"SEO PowerSuite","sponsor_logo":"https:\/\/www.searchenginejournal.com\/wp-content\/plugins\/abm-sej\/includes\/category-images\/SPS_128.png","sponsor_text":"<div class=\"taxonomy-description\">Dominate Google local search results with ease! Get your copy of SEO PowerSuite and keep <a rel=\"nofollow\" href=\"http:\/\/sejr.nl\/PowerSuite-2016-5\" onClick=\"__gaTracker('send', 'event', 'Sponsored Category Click Var 1', 'Local Search', 'SEO PowerSuite');\" target=\"_blank\">your local SEO strategy<\/a> up to par.<\/div>","logo_url":"http:\/\/sejr.nl\/PowerSuite-2016-5","ga_labels":["Local Search","SEO PowerSuite"]}
$('#sponsored-category-header').append('<div class="sponsored-category-logo"></script>
</div>');
$('#sponsored-category-header .sponsored-category-logo').append(' <a rel="nofollow" href="'+cat_head_params.logo_url+'" onclick="__gaTracker(\'send\', \'event\', \'Sponsored Category Click Var 1\', \''+cat_head_params.ga_labels[0]+'\', \''+cat_head_params.ga_labels[0]+'\');" target="_blank"><img class="nopin" src="'+cat_head_params.sponsor_logo+'" width="96" height="96"></a>');
$('#sponsored-category-header').append('<div class="sponsored-category-details"></div>');
$('#sponsored-category-header .sponsored-category-details').append('<h3 class="page-title sponsored-category-title">'+cat_head_params.sponsor+'</h3>');
$('#sponsored-category-header .sponsored-category-details').append(cat_head_params.sponsor_text);
}); </div>
In case you missed it, the ending script tag has moved up a few lines.
Just to be clear, I am not talking about rendered HTML. I am talking about the actual source code that I get after making the request. Any help on how to resolve this issue will be appreciated.
I know that the function saveHTML is causing the issue because when I echo the whole page through PHP, every tag is in the right place.
First of all, your code should be triggering a good bunch of warnings like these:
Warning: DOMDocument::loadHTML(): htmlParseEntityRef: expecting ';' in
Entity Warning: DOMDocument::loadHTML(): Unexpected end tag :
strong in Entity Warning: DOMDocument::loadHTML(): Tag header
invalid in Entity
This is to expect with on-the-wild HTML (and this page's code is nor particularly bad) but you haven't even mentioned it, what makes me suspect that you might not have error reporting enabled in your development box.
Additionally, the page has huge amounts of JavaScript and DOMDocument is just an HTML parser.
With that, we can get a clear picture of what's happening. Since DOMDocument is not a full-fledged browser it doesn't understand JavaScript code. That means that it detects the <script> tag but it doesn't handle its contents as JavaScript—it merely looks for a closing tag and the first one he finds is this:
$('#sponsored-category-header').append('<div class="sponsored-category-logo"></div>');
^^^^^^
It doesn't know that it's a JavaScript string and should be ignored. Instead, it thinks the wrong tag is being closed so it attempts to fix what's technically invalid HTML and adds the missing </script> tag.
For this precise reason, the <script>...</script> tag set has traditionally been written this way:
<script type="text/javascript"><!--
var foo = '<p>Escaped end tag<\/p>';
//--></script>
... so user agents that are unaware of JavaScript can safely ignore the whole tag (hey, it's nothing but a good old HTML comment). However, nowadays it's almost universally considered bad practice because "all browsers understand JavaScript".
Final note: the DOM extension is probably aware of the <script> tag and knows it isn't allowed to have other tags inside. That explains why inner opening tags are not considered.
Really struggling to think of a solution to this problem. I have thought anchor links might help (using the #example on the end of a link to scroll to a position on the page) but not sure how best to implement them.
So on the homepage of my site I have a list of links, that correlate to tabs on another page.
The links on the homepage:
(What is e-Bate, What are rebates etc.)
Links
When you click one of the tabs on the other page, it activates a script which shows a certain div below:
Tabs
This is how the tabs are shown:
HTML:
<div class="page-links">
<ul>
<li>What is e-Bate?</li>
<li>What are rebates?</li>
<li>e-Bate features</li>
<li>How e-Bate works</li>
<li>Case studies</li>
</ul>
</div>
<div class="page-contents">
<div id="whatebate" class="hideshowdiv">
<?php echo CFS()->get('whatisebate'); ?>
</div>
<div id="whatrebate" class="hideshowdiv">
<?php echo CFS()->get('what_are_rebates'); ?>
</div>
<div id="ebatefeat" class="hideshowdiv">
<?php echo CFS()->get('e_bate_features'); ?>
</div>
<div id="howebate" class="hideshowdiv">
<?php echo CFS()->get('how_e_bate_works'); ?>
</div>
<div id="casestud" class="hideshowdiv">
<?php echo CFS()->get('case_studies'); ?>
</div>
</div>
jQuery:
jQuery(document).ready(function() {
jQuery(".page-contents div.hideshowdiv").hide();
// Show chosen div, and hide all others
jQuery("a").click(function (e)
{
//e.preventDefault();
jQuery("#" + jQuery(this).attr("class")).fadeIn().siblings('div.hideshowdiv').hide();
});
});
So when one of the links is clicked on the homepage, for instance, the 'What is e-Bate?' link, I want it to go to the other page, and click the corresponding tab, showing the content for that section. Is this possible? Thanks in advance.
This is very possible and you had half the equation with the anchors. Now you just need to write a small function to parse out the URL and check for a certain tag.
So something like this:
$(function(){
if (location.href.indexOf("#example") != -1) {
//This is where you put your function to show the tab
}
if (location.href.indexOf("#anotherexample") != -1) {
//This is where you put your function to show the tab
}
})
Well, if you can use PHP, then it is indeed pretty easy:
First, you need to create a PHP file, obvious with an input parameter, preference, two GET variables, the first one being the link of the page you want to visit and the second one can be, well that depends on how you want it to be, it can be a div id, or a div class or pretty much id of anything you want to click on the second site (You MUST KNOW which button/link you want to click on the second site)
Then first in your php code, store these two things into variables, Let us take $Path and $DivToClick,
Now, use this PHP function:
file_get_contents(path,include_path,context,start,max_length)
Here, the path is an required field, rest is all optional.. and then after that, echo a JQuery code which will do something like this
function ClickTheButton ()
{
$('#divId').click ();
}
Now, let me explain what we are doing here... First, you are sending link to a php script that get all the contents of that webpage and display it on my screen, and then when you are echo-ing the JQuery code, you are telling browser, that yes, this is the part of the page, execute it and simulate the action of click on this page, and thus the click action is simulated and things are done as per your need...
Hope this helps... :)
I'm trying to customize facebook share. I'm using this fantastic app;https://github.com/kni-labs/rrssb to do this. I tried meta tags facebook provide, and it's not working for me. but with java-script, it kinda works.
<ul class="rrssb-buttons clearfix">
<li class="rrssb-facebook">
facebook-share
</li>
</ul>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('.rrssb-buttons').rrssb({
// required:
title: 'email',
url: 'http://www.reddit.com/',
});
});
</script>
this shows the picture of reddit, description of reddit, etc..
so I thought I should put the domain user is trying to share in url instead of reddit url. I googled around, and I saw how some people post images and description in url...so my question is how do I put the url user is trying to share in the url? how do I put image there?
You can use window.location.href as URL to use current page's URL. To specify image you just need to add image key when initializing rrssb. As if you see source code of rrssb.js you will see what parameters it supports when initializing. Which are
// Settings that $.rrssb() will accept.
var settings = $.extend({
description: undefined,
emailAddress: undefined,
emailBody: undefined,
emailSubject: undefined,
image: undefined,
title: undefined,
url: undefined
}, options );
So your code will change to
jQuery(document).ready(function ($) {
$('.rrssb-buttons').rrssb({
title: 'email',
url: window.location.href,
image: your_image_url
});
});
Edit (Only URL is being used not image):
I don't think that you can use image for facebook or twitter. As if you see source code of rrssb.js you will see that only URL is shared to facebook. URL and description are shared to twitter. So some of the settings are shared to some of the social sites.
Also in the readme.md of the rrssb.js if you see facebook sharing example
<li class="rrssb-facebook">
<!-- Replace with your URL. For best results, make sure you page has the proper FB Open Graph tags in header: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/ -->
<a href="https://www.facebook.com/sharer/sharer.php?u=http://kurtnoble.com/labs/rrssb/index.html" class="popup">
<span class="rrssb-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 29"><path d="M26.4 0H2.6C1.714 0 0 1.715 0 2.6v23.8c0 .884 1.715 2.6 2.6 2.6h12.393V17.988h-3.996v-3.98h3.997v-3.062c0-3.746 2.835-5.97 6.177-5.97 1.6 0 2.444.173 2.845.226v3.792H21.18c-1.817 0-2.156.9-2.156 2.168v2.847h5.045l-.66 3.978h-4.386V29H26.4c.884 0 2.6-1.716 2.6-2.6V2.6c0-.885-1.716-2.6-2.6-2.6z"/></svg></span>
<span class="rrssb-text">facebook</span>
</a>
</li>
in the comment you can see stated that
For best results, make sure you page has the proper FB Open Graph tags
in header
Which means, facebook will pick image information from FB Open Graph meta tags of the header section of the page.
I'm trying to give all "posts" title in a specific page. So If someone clicks on that posts, it's content must be toggle below the title and if some clicks the title again then the content must hide.
I solved half of the problem with the help of WP-Archives Plugin. And my page is looking like this Check this image here.. So these are
"Archives" titles links. And if someone clicks on it, it will take to the that.. I want the content in the particular posts to be in the same page in the form of toggle (in abvoe image..). Is it possible?
It sounds like you're describing an accordion function. Wordpress offers a bunch of accordion plugins. Here are a few:
http://wordpress.org/plugins/tags/accordion
If you're looking for something with a little more control you might want to look straight into the jquery accordion widget. See information here: http://jqueryui.com/accordion/
EDIT
To add the accordion plugin to your list, you'll need to apply the following changes. Add the following to your head tag:
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
In your wp-archives plugin modify the following line:
echo "<div class='list'><ul>\n";
to this:
echo "<div class='list'><ul id=\"unique_id_of_your_choice\">\n";
As for the content that should follow each post title, You will need to update the plugin once again to include the archive post content(either the entire post or a snippet, whichever you choose). It should look something like this if the database field holding the content were named "post_content".
$arcresults2 = $wpdb->get_results("SELECT ID, post_date, post_title, post_content, comment_status FROM " . $wpdb-> posts . " WHERE post_date LIKE '$thisyear-$thismonth-%' AND $current_posts AND post_status='publish' AND post_password='' ORDER BY post_date DESC");
...
...
$arc_title = $arcresult2->post_title;
$arc_content = $arcresult2->post_content;
...
...
echo "<li class='list'>" . wptexturize($text) . "\n";
echo"<ul><li>".$arc_content."</li></ul></li>\n";
This is possible with an accordion script like jQueryUI Accordion, but if you want to apply this to your posts page, you will also have to edit your page template.
Here is one simple method (see source):
1) Add the following to your theme's functions.php
function add_accordion_script() {
wp_enqueue_script('acc', get_template_directory_uri() . '/acc.js', array('jquery-ui-accordion'));
}
add_action('wp_enqueue_scripts', 'add_accordion_script');
2) Create acc.js in your themes directory thus:
jQuery(document).ready(function($) {
$( "#accordion" ).accordion({
header: "div.accordion-header",
collapsible: true,
active:false });
});
3) Finally modify your theme page to something like this:
<?php if (have_posts()): ?>
<div id="accordion">
<?php while (have_posts()) : the_post();?>
<div class="accordion-header">
<h1><?php the_title();?></h1>
<?php the_excerpt();?>
</div>
<div><?php the_content();?></div>
<?php endwhile; ?>
</div>
<?php else:?>
<p><?php _e('No posts'); ?></p>
<?php endif;?>
Depending on your wordpress template this may be more complicated to implement than is outlined above... in which case you'd have to provide more information.
Another alternative would be to use some sort of plugin specifically designed for this purpose. I found three that might work for you, but they do not seem to be well supported/maintained... so the above method may still be your best option:
Wordpress jQuery Accordion Plugin
WP Post Accordion
Read More Right Here Plugin
Collapse-O-Matic Plugin for wordpress is another alternative for this which is working like a charm for my website but only if I'm changing it to default theme of Wordpress :(. Seems like there is any glitch in my theme. Anyways, thanks for all the responses posted above.
I tried adding a social share script inside index template, when i click share burron i want to get the URL of Individual post.I defined the structure inside javascript.
<a class="fb-share" href="javascript:void(0)" onclick="facebook('Link of the post', 'Title of the post','Excerpt of the post','Thumbnail of featured image');"></a>
I tried using link of the post http://www.dreamstopixels.com/%postname% and failed. I need some suggestions Thanks.
You need to add some code inside The Loop on your index template to get the data and generate the link. Put the following inside the while loop after the_post(); is called:
<?php
$url = get_permalink();
$title = get_the_title();
$excerpt = get_the_excerpt();
$image = get_the_post_thumbnail(get_the_ID(), 'thumbnail');
?>
That sets up all the data you need, then you just build the anchor tag that calls the script and passes the data to facebook: (still within the loop)
<?php
$fbonclick = "facebook('".$link."','".$title."','".$excerpt."','".$image."');";
?>
Then to create the link itself:
<a class="fb-share" href="javascript:void(0)" onclick="<?php echo $fbonclick; ?>"></a>
To be honest I'm not sure why you need to do it this way though, there are a thousand social share plugins out there. Just use AddThis or something.
Try using thoses function:
http://codex.wordpress.org/Function_Reference/get_permalink
http://codex.wordpress.org/Function_Reference/get_the_title
http://codex.wordpress.org/Function_Reference/get_the_excerpt
There is a lot of docs on WORDPRESS CODEX.
You should always keep it open when developping a wordpress template.
LAL.