I am a beginner in wordpress then in my code below, I have an Array of video ids and I use integrated vimeo videos on a page.
The video starts playing as soon as the page is open and when the first video has finished, the second one starts.
Now, I want to add a text field in my wordpress to give permission to user to edit the ids if he want to change the videos.
Any ideas ?
<div id="headervideo" class="videoClass"></div>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var videos = [ '240466644', '146661000']; //Array videos ids
var options = {
id: videos[0],//first element
width: 700,
height: 500,
loop: false
};
player = new Vimeo.Player('headervideo', options);
player.play()
playMovie(videos, 0, true)
})
var playMovie = function(videos, currentVideoIdx, first) {
if (!first) {
player.loadVideo(videos[currentVideoIdx % videos.length]).then(function(id) {
player.play()
}).catch(function(error) {});
player.on('ended', function() {
playMovie(videos, ++currentVideoIdx, false)
});
}
</script>
Have you considered writing this functionality as a custom shortcode? Then, you can allow your administrative user to change the video ID's by modifying the shortcode attributes.
For example, let's say you put your functionality in a shortcode, and that shortcode was accessed with the value: two_videos
You could modify your functionality to allow for user input/modification of your shortcode, so your end shortcode would look like:
[two_videos video1='240466644' video2='146661000']
That way, your admin user could just change the values of parameters video1 and video2, and you can achieve your desired result.
You can't allow the user to edit ID and due to security reasons, in simple no one does it. But you can call a string function get user input and then push the string value to the function(i.e., the id array) by calling it. But, not sure until you give more details. What you are trying to achieve.
Related
I've got a WP portfolio site using isotope to filter and sort. It works well; however, one thing I want to do is just not working.
When I hover over an image on the portfolio page, I want it to highlight all other images that are in that category. I can do it by adding each category manually using jQuery. The person whose portfolio it will be will be adding a lot more categories and won't be able to go in and fiddle with the .js file every time he adds something.
I'm sure there's a way, I just don't know how to write code. I've got this and it works nicely, but I'd rather it be able to work dynamically and not have to define the category specifically.
$('.portfolio_categories-mood-images').bind('hover', function(e){
$('.portfolio_categories-mood-images').each(function(i){
$(this).toggleClass('highlight-all');
}, function() { $(this).removeClass('highlight-all'); }); });
I'm not sure if I'm making sense. I'm still fairly new with jQuery and Javascript, so thanks in advance for your patience.
REDO:
Based on your response regarding what your <div> code looks like per image, see if this revision works better. I have notated for clarity:
<script>
// Use a more general selection type that will grab portfolio images
$(".portfolio_item").hover(
function() {
// Get the data contained in category
var ThisData = $(this).data('category');
// Split it with spaces since there are multiple space-separated tags
var GetClass = ThisData.split(" ");
// Since you have same-name classes as the array value 0 (presumably)
// you can just use the category value 0 for class name
$("."+GetClass[0]).addClass('highlight-all');
},
function() {
// Just remove the class from all elements
$(".portfolio_item").removeClass('highlight-all');
});
</script>
I'm trying to create a metabox in WordPress that allows the user to select a PDF file to attach to the post he/she is creating. So far, the metabox shows well, and the media uploader works as expected to certain extent.
The problem is that when the user clicks in the browse button, the default media uploader will show first. If I close that one and click the button again, then the custom uploader will show up and work as expected. Here is the JS code I'm using...
jQuery(document).ready(function($){
// Instantiates the variable that holds the media library frame.
var pdf_file_frame;
// Runs when the image button is clicked.
$('#pdf-lesson-url-button').click(function(e){
// Prevents the default action from occurring.
e.preventDefault();
// If the frame already exists, re-open it.
if ( pdf_file_frame ) {
pdf_file_frame.open();
return;
}
// Sets up the media library frame
pdf_file_frame = wp.media.frames.file_frame = wp.media({
title: pdf_meta.title,
button: { text: pdf_meta.button },
library: { type: 'application/pdf' },
multiple: false
});
// Runs when an image is selected.
pdf_file_frame.on('select', function(){
// Grabs the attachment selection and creates a JSON representation of the model.
var media_attachment = pdf_file_frame.state().get('selection').first().toJSON();
// Sends the attachment URL to our custom image input field.
$('#pdf-lesson-url').val(media_attachment.url);
});
// Opens the media library frame.
wp.media.editor.open();
});
});
I have googled the issue but no satidfactory results came out. I might be using the wrong search phrase, but the truth is that I have no idea of what is happening here, especially when once you get the custom dialog to show it works OK.
Any help is highly appreciated.
Thanks to all who read this post.
Try adding .unbind('click') before .click(function()):
$('#pdf-lesson-url-button').unbind('click').click(function(e){
That may work, unbinding the default click function before running your custom one.
I finally solved it and as almost always, it was not that difficult. I copied the code from an example and while they are using a custom media uploader, in the last line of my code the default one is open instead. Changed the line from...
wp.media.editor.open();
to...
pdf_file_frame.open();
and that did it.
Thanks go to #Calvin for making me rethink.
Is there a plugin or another way...
Basically in the backend of wordpress I want the user to be able to select a file or page from a drop down list and then it displays the URL so they can copy and paste it into the content filed for easy linking?
Example:
they select a file
document.pdf
and in a box below it displays the URL
/wp-content/uploads/2013/10/document.pdf
so then they can copy and paste that URL into their content?
Been looking for a while to figure this out but no luck as of yet!
I'm also using Advanced Custom Fields if this can help?
Basically this is what I have so far.. I have two fields in the back end, a page_link select field & a text field. The page_link lists all linkable objects (pages, attachments, images..etc) and in the functions.php file I have this code..
function add_jquery_data() {
global $parent_file;?>
<script>
jQuery(document).ready(function () {
jQuery("#acf-field-select_content").change(function() {
var str = "";
jQuery("option:selected", this).each(function() {
str += jQuery(this).val();
});
jQuery("#acf-field-show_content_url").val(str);
})
.trigger("change");
});
</script>
<?php }
add_filter('admin_head', 'add_jquery_data');
What this is doing is grabbing the value of the option in the select field and placing it in the text field.. but wordpress only puts the object ID in the value! So all im getting is a number not a full URL.. Any ideas?
http://img545.imageshack.us/img545/1472/5zy2.png
Here's a screenshot for a better understanding
I've been struggling for 2 hours now, searching all over for a solution to this.
I'm working with a Zen-Cart installation, and I've decided to thrown on some dynamic banners. Basically I use jQuery.get() to load a URL from banner1.php - banner1.php has an array of a few urls (which are product pages), and it echoes out a random url from the array.
Once the random URL is loaded by jQuery, I then use the jQuery.load() function to load the image of the product, the price of the product and the name of the product.
All this works absolutely fine, but the problem is that it seems the load() function is interfering with my Zen-Cart "redirect" function. Say if you are viewing a product, let's call it "Product A" - and you decide to log in from that page by clicking the "Login" button - what happens is that you are taken to the Login page, you enter your login details, and hit "Submit". The standard outcome is that if you are logged in successfully, you are taken back to the "Product A" page. But with my little dynamic jQuery banner concoction, instead of redirecting back the "Product A", it loads one of the pages that the jQuery.load() used to generate the random banner. I have 3 banners, each dynamically loading a random url, but here is an example of Banner 1:
<script type="text/javascript">
$.get("banner1.php", function(getbannerlink1) {
$( document ).ready(function() {
$("#banner1").load(getbannerlink1+ " #globalproductimage");
$('#banner1name').load(getbannerlink1+ " #productName", function(result) {
var banner1text = $('#banner1name').html();
banner1text = jQuery(banner1text).text();
$("#banner1name").html(banner1text);
});
$('#banner1price').load(getbannerlink1+ " #productPrices", function(result) {
var banner1prices = $('#banner1price').html();
banner1prices = jQuery(banner1prices ).text();
$("#banner1price").html(banner1prices );
});
var bannerlink1 = $("<a>").attr("href", getbannerlink1);
$("#banner1name").wrap(bannerlink1);
$("#banner1price").wrap(bannerlink1);
$("#banner1").wrap(bannerlink1);
});
});
</script>
The thing is I'm not too concerned about the wrongful redirection once a customer logs in, the problem also occurs most disappointingly when the customer once to actually Checkout. For instance, if they were to have products in their shopping basket, click the Checkout button, which then asks them to login, and once they login, instead of continuing with the standard shopping cart function of taking them to the first step of the checkout process, it redirects them to one of the pages that the dynamic banner has loaded. I don't know how to sort this out, I tried some weird things to no avail. For the sake of reference, this might be needed, this is the Zen-Cart function that handles redirection after a login:
if (sizeof($_SESSION['navigation']->snapshot) > 0) {
// $back = sizeof($_SESSION['navigation']->path)-2;
//if (isset($_SESSION['navigation']->path[$back]['page'])) {
// if (sizeof($_SESSION['navigation']->path)-2 > 0) {
$origin_href = zen_href_link($_SESSION['navigation']->snapshot['page'], zen_array_to_string($_SESSION['navigation']->snapshot['get'], array(zen_session_name())), $_SESSION['navigation']->snapshot['mode']);
// $origin_href = zen_back_link_only(true);
$_SESSION['navigation']->clear_snapshot();
zen_redirect($origin_href);
} else {
zen_redirect(zen_href_link(FILENAME_DEFAULT, '', $request_type));
}
Please help! Perhaps there is an easier way I should be doing this :/
I noticed that the page it loads is always the last banner that jQuery.load() loaded. Like I mentioned there are 3 banners in total, so if Banner 2's price was the last one to load, that's the URL that's loaded in the redirection.
Edit:
banner1.php (this simply generates a random url from an array, but currently for testing purposes I only have one URL in the array):
<?php
$strings = array('http://example.com/index.php?main_page=product_info&cPath=3&products_id=104');
echo $strings[array_rand($strings)];
?>
It appears that the banner page is setting the snapshot href. I assume you are including some of the Zen cart libraries in your banner urls that are setting the Session navigation snapshot. You maybe able to set something to ignore your url for the snapshot.
Adding the banner code may help solve this issue.
Although I would not recommend it, you could add logic to not redirect to certain pages after login.
I have had a look at sticky notes with php and jquery and jStickyNote, and while both seem to look pretty nifty they lack some elements I am after. I haven't been able to find a way to allow particular users to modify the stickies they create, nor have I found a good way to save their stickies into my database. I am, and would like to keep using php, mysql and jquery. I have thought with the first link that I could just save the image created into a folder and save the url into that database but then I cannot go back and allow the user to change the content of the sticky. With the second link there does not seem to be support for saving the sticky at all. I'd also like to create a function where adding stickies to a message board (for everyone to see) does so in a randomly placed way that looks natural. Any ideas for either of these problems?
Here is some javascript that should help:
// Called when the edit (A) button is pressed
function edit(event, editButton)
{
// Get existing title and change element to textarea
var stickyTitle = $(editButton).parent().find('p.stickyTitle');
var textareaTitle = $(document.createElement('textarea')).addClass('textareaTitle');
$(textareaTitle).text(stickyTitle.html());
// Get existing description and change element to textarea
var stickyDescription = $(editButton).parent().find('p.stickyDescription');
var textareaDescription = $(document.createElement('textarea')).addClass('textareaDescription');
$(textareaDescription).text(stickyDescription.html());
// Create save button
var saveButton = $(document.createElement('div')).addClass('jSticky-create');
// Add save button, then replace title, then replace description, then remove edit button
$(editButton).before(saveButton);
$(editButton).parent().find('p.stickyTitle').before(textareaTitle).remove();
$(editButton).parent().find('p.stickyDescription').before(textareaDescription).remove();
$(editButton).remove();
// Set description textarea focus and set button actions
textareaTitle.focus();
setActions();
}
// Called when the save (tick) button is pressed
function save(event, saveButton)
{
// Get existing title and change element to paragraph
var textareaTitle = $(saveButton).parent().find('textarea.textareaTitle');
var stickyTitle = $(document.createElement('p')).addClass('stickyTitle');
var newTitleValue = textareaTitle.val();
$(stickyTitle).html(newTitleValue);
// Get existing description and change element to paragraph
var textareaDescription = $(saveButton).parent().find('textarea.textareaDescription');
var stickyDescription = $(document.createElement('p')).addClass('stickyDescription');
var newDescriptionValue = textareaDescription.val();
$(stickyDescription).html(newDescriptionValue);
// Create edit button
var editButton = $(document.createElement('div')).addClass('jSticky-edit');
// Add edit button, then replace title, then replace description, then remove save button
$(saveButton).before(editButton);
$(saveButton).parent().find('textarea.textareaTitle').before(stickyTitle).remove();
$(saveButton).parent().find('textarea.textareaDescription').before(stickyDescription).remove();
$(saveButton).remove();
// Set button actions
setActions();
// Add the object to the ads div
$('#ads').append(object);
// Update your database here
// by calling the saveAd.php
}
function setActions()
{
// call these after changes are made to anything
$('.jSticky-create').unbind('click').click(function(e)
{
save(e, this);
});
$('.jSticky-edit').unbind('click').click(function(e)
{
edit(e, this);
});
$('.jSticky-delete').unbind('click').click(function(e)
{
remove(e, this);
});
}
function remove(event, deleteButton)
{
var stickyMaster = $(deleteButton).parent();
$(stickyMaster).remove();
//then call savead.php with delete parameter
}
Have you looked at any of the code? I took a really quick look at jStickyNote.
Basically, the "sticky note" is a css-styled, text area (that is surround by a div element).
If you want users to be able to save sticky notes/edit past notes, here's what I'd recommend:
Add some button to each note that says "Save" or with a similar meaning.
When a user clicks the "Save" button, you'll need to grab the text from that specific textarea element and then save that text to a database.
With that said, you'll probably need to design some sort of database with a user table and sticknote table. The sticknote table can have a foreign key to the user table.
You'll also want to add some sort of login functionality to your site and then load the correct sticky notes for the authenticated user.
Good Luck!
You can have a look at http://sticky.appspot.com - the code has been released by the google appengine team.
Sorry for not going into specifics, but you could modify the plugin code to load a php script whenever a save button is clicked (or the box is moved, or even on keyup) with $.ajax(), passing it the horizontal and vertical positions and content of the note ( say, $("#note-content").text() ) and have the script plug those things into a database with a MySQL query. Just serialize your data and send it away. This gets more complicated if you want let your users have multiple notes, but start with one. Where is you hangup, exactly? I would be more specific, but I'm not sure what you already know.
I was thinking earlier about adding this feature to an app I'm working on. The thing is, I don't like those plugins. It should be very simple to write your own though. Let me know if you need help with something specifically.