I have a web page where I'm using turn.js and wish to destroy and re-initialize the plug-in if a user resizes the page to below a certain threshold. I'm testing this as follows:
$(window).resize(function() {
if (Modernizr.mq('(min-width: 764px)')) {
$("#flipbook").turn("destroy");
}
});
However I'm not sure how to re-initialize turn.js subsequently?
You are close: Just one more thing needed was to add $( window ).unbind( 'keydown' ); and then re-initialize by adding .turn() again;
$( '#book' ).turn( 'addpage', element, pageNo ); is the proper way of doing it but I don't want to return just a block of HTML. I prefer reloading the entire div. So what worked for me was:
// data is html ajax response
// destroy any previous bindings'
if ( $( '#book' ).turn( 'is' ) ) {
$( '#book' ).turn( 'destroy' );
$( window ).unbind( 'keydown' );
}
$( '#book' ).html( data );
// load the book
$( '#book' ).turn({
display: 'double'
, acceleration: true
, gradients: !$.isTouch
, elevation:50
});
Related
I have a complex Gravity Form built, it has 10 pages. I am using fields to build a "string" that I then match to a CPT name to get meta data from to display a selection, based on user choices in the form.
One field I have is not holding its value in POST. I can see it when I select the value on the page, then when I click to next page the value is still there. However, after two pages the value ( and field ) disappear from POST.
This is the function I have put together that builds my product string.
add_filter( 'gform_pre_render_12', 'display_choice_result' );
function display_choice_result( $form ) {
$current_page = GFFormDisplay::get_current_page( $form['id'] );
$html_content = "";
$prod_string = "";
if ( $current_page >= 10 ) {
foreach ( $form['fields'] as &$field ) {
// Check for a class of "product-builder-item" on the field
// I use this as another way to denote what fields to add to string
if ( strpos( $field->cssClass, 'product-builder-item' ) === false ) {
continue;
}
//gather form data to save into html field (Field ID 14 on Form ID 12)
//exclude page break and any hidden fields
if ( $field->id != 14 && $field->type != 'page' ) {
$is_hidden = RGFormsModel::is_field_hidden( $form, $field, array() );
$populated = rgpost( 'input_' . $field->id );
// Make sure the field we are getting the value from is not hidden and has a value
if ( !$is_hidden && $populated !='' ) {
$html_content .= '<li>' . $field->label . ': ' . rgpost( 'input_' . $field->id ) . '</li>';
$prod_string .= rgpost( 'input_' . $field->id );
}
}
}
// Do a bunch of stuff here with the $prod_string variable
// ...
// ...
// ...
}
return $form;
}
Screenshots showing the POST disappearing..The POST field in question is input_22 with a value of 18000
This is one page after I choose from the field
This is two pages after,
Anyone run into this before or have any idea why it would be disappearing?
Thank you.
I was having the same exact issue as you described. I realized that a jQuery function was interfering with Gravity Form process. The jQuery function was set to change a zip code field from type text to tel so the number pad would open up on mobile devices. This is what was causing my issue.
I am rewriting this question to make it specific:
The requirement of the webpage is
Read the rules from a file and populate the text-boxes when the webpage is loaded
An add button to add additional textboxes
A save button to save the rules ( including the additionally added ones back to the file)
A delete button to delete the textboxes which are checked so that the rules in them are not stored back to the file.
My approach :
Use "read_rules" submodule to read the rules from the webpage and if its non empty then use "rule" submodule to print them on webpage. Here each line in the file is read and split with spaces and put in a array of hash and prints on the webpage ("rules" module).
When the sumit button is pressed sumodule "save_rules" is called which saves the rules. The reverse way as in read_rules.
An add button will add additional text areas.
A delete button should delete the text areas which are checked and reload the page so when the page is reloaded the text areas which were checked wont appear and hence when save button is pressed they are not saved in file ??? (this I have to implement)
The code blocks of each submodule I have mentioned are below.
This submodule to print the text boxes and checkbox:
sub rule {
my($num,$rule) = #_;
return join "\n",
"<tr><td><br>",
hidden(
-name => "idx$num",
-default => $rule->{idx},
),
checkbox(
-name => "checkbox$num",
-label => "",
-value => "on",
),
"<td>",
textfield(
-name => "repository$num",
-size => 30,
-default => $rule->{'repo'},
),
"<td>",
textfield(
-name => "branch$num",
-size => 30,
-default => $rule->{'branch'},
),
"<td>",
textfield(
-name => "file$num",
-size => 30,
-default => $rule->{'file'},
),
}
This sumodule to read the rules from file
sub read_rules {
my $rule;
#rules = ..# read the rules from a file, each line is read as an element of an array
for $rule (#rules){
my $rec = {};
($re,$br,$fi) = split (' ', $rule);
$rec->{'repo'} = $re;
$rec->{'branch'} = $br;
$rec->{'file'} = $fi;
push #config, $rec;
}
}
The sumodule to save the rule on webpage ( in text area) back to the file
sub save_rules {
for ($i = 1; param("repository$i"); $i++) {
$repo1 = param("repository$i");
$branch1 = param("branch$i");
$file1 = param("file$i");
my $record = {};
# save back $myrec->{'repo1'} $myrec->{'branch1'} $myrec->{'file1'} to file
}
}
Main function
print start_form();
read_rules();
Delete_all();
my $i = 0;
if (#config) {
foreach $conf (#config) {
$i++;
print rule($i,$conf);
}
print $table_header_string;
if (param("action") eq "Add") {
print(br,rule(++$i),hr);
}
print p( submit (-name => "action" , -value => "Add"));
print p( submit (-name => "action" , -value => "Save"));
print p( submit (-name => "action" , -value => "Delete"));
print end_form();
exit 0;
Delete_rule submodule below has to be coded !!
sub delete_rule(){
#................
}
I would appreciate if some one tells me how to use javascript in cgi so I don't have to load webpage every time a button is pressed.
Edited to address more specific question
Given that you don't want to reload the page each time the button is clicked, you are going to want to use JavaScript to do this. I'll explain how here, and you can click here to see a working jsfiddle example.
<!doctype html>
<html>
<head>
<title>Remove Element On Button Click</title>
</head>
<body>
<input type="text" id="myTextBox" value="something here">
<input type="button" id="btnDelete">
</body>
<script>
document.getElementById('btnDelete').onclick = function ()
{
var textbox = document.getElementById('myTextBox');
textbox.parentNode.removeChild(textbox);
}
</script>
</html>
Notice that I changed the type of input element from submit to button. This automatically prevents the page from reloading.
If you absolutely must use a submit input element (and the jsFiddle example does), you can prevent form submission by changing the Javascript thusly:
document.getElementById('btnDelete').onclick = function (evt)
{
if (!evt) var evt = window.event;
if (evt.preventDefault) { evt.preventDefault(); } else { evt.returnValue = false; }
var textbox = document.getElementById('myTextBox');
textbox.parentNode.removeChild(textbox);
}
The JavaScript can be placed in an external file, if prefered. It's placed at the end of the HTML here so as to ensure that the DOM had fully loaded (and hence the button was available in the DOM) prior to attempting to attach an event handler.
It was unclear to me whether there would be one or multiple 'Delete' buttons in your output, or if there would be one or multiple fields that would need to be removed, but this should point you in the right direction.
This is a pure JavaScript solution. As #vol7ron correctly pointed out, there are JavaScript frameworks, like jQuery, that could be used to do this as well, and if you are already using such a framework it would be advantageous to utilize it, however no such framework is in anyway required to accomplish this.
I want to auto publish all articles of my WP blog on Facebook without using any plugin.
I wrote some working code to do that and it's OK... but I also need to invoke this code only when I publish a new article (not for revisions or autosave).
That's the part of my function.php file that you need to see:
add_action( 'save_post', 'koolmind_facebook_post_article',3 );
function koolmind_facebook_post_article( $post_id ) {
/* configuration of facebook params */
....
....
/* end config */
if ( !wp_is_post_revision( $post_id ) && !wp_is_post_autosave( $post_id ) ) {
/* retrieve some data to publish */
/* invoke my code to publish on facebook */
}
}
My code is invoked as soon as I click on "add new article", and an empty draft is sent to my Facebook page.
In add, as soon as I insert a single char on my article body, autosave is triggered and a new post (almost empty) is sent again to facebook.
I just want to block this automatic publishing and send my data to facebook only when I press the PUBLISH button.
Is that possible?
UPDATE
Finally I've found the problem. There was an error inside my fb code.
Problem now is avoiding multiple pubblication when updating my post.
Here's the code now:
add_action('pending_to_publish', 'koolmind_facebook_post_article');
add_action('draft_to_publish', 'koolmind_facebook_post_article');
add_action('new_to_publish', 'koolmind_facebook_post_article');
function koolmind_facebook_post_article( $post_id ) {
require_once 'facebook/facebook.php';
/* some code here */
//verify post is not a revision
if ( !wp_is_post_revision( $post_id ) ) {
$post_title = get_the_title( $post_id );
$post_url = get_permalink( $post_id );
$post_excerpt = get_the_excerpt();
$post_image = 'http://.../default.jpg'; //default image
if( $thumb_id = get_post_thumbnail_id( $post_id ) ){
$image_attributes = wp_get_attachment_image_src( $thumb_id );
$post_image = $image_attributes[0];
}
/* some code here */
}
}
Let me explain the issue:
If I use these 3 hooks I have no problem, but the code is executed before my featured image is stored into the database, so $post_image is always equals to the default image.
If I use publish_post hook instead, featured image is set properly (maybe because this hook is called after all data have been saved), but I cannot avoid data sending to Facebook if I update my post (wp_is_post_revision seems not to be fired).
Hope you have a good idea... now the code is almost OK! :)
The 'save_post' hook 'Runs after the data is saved to the database'. This means you can do this validation:
//WP hook
//the last parameter 2 means you pass 2 variables to the callback:
//the ID and the post WP object
add_action( 'save_post', 'koolmind_facebook_post_article',3,2 );
//Callback
function koolmind_facebook_post_article( $post_id, $post ) {
// Validation:
//If current WP user has no permissions to edit posts: exit function
if( !current_user_can('edit_post', $post_id) ) return;
//If is doing auto-save: exit function
if( defined('DOING_AUTOSAVE') AND DOING_AUTOSAVE ) return;
//If is doing auto-save via AJAX: exit function
if( defined( 'DOING_AJAX' ) && DOING_AJAX ) return;
//If is a revision or an autosave version or anything else: exit function
if( $post->post_status != 'publish') return;
/* configuration of facebook params */
/* invoke my code to publish on facebook */
}
It worked for me.
Try using:
add_action('publish_post', 'koolmind_facebook_post_article');
I'm writing plugin and in there I need to check if one widget in use or not. If the widget is in use that's great, but if it isn't I want to show error message.
The code what I tried is like this, but it isn't working. I don't get either message.
function my_widgie_detect() {
if ( false === is_active_widget( 'testimonial' )) {
// do something here if the widget isn't active;
echo '<div id="message" class="updated fade"><p>No active</p></div>';
} else {
echo '<div id="message" class="updated fade"><p>Active</p></div>';
}
}
add_action( 'wp_head', 'my_widgie_detect' );
So how to recognize whether the widget is on, and if not wordpress will show a message?
I have a client of mine who wanted to check if there's search widget activated into the sidebar or not from the template file so here's code, I guess this what you need! and I hope it will help others too!
<?php if(is_active_widget(false,false,'search')){
echo "Search Widget is activated"; //We don't need to place the search box here, since we have already into the sidebar.
}else{
get_search_form();
}
?>
Got it working like this:
function check_widget() {
if( is_active_widget( '', '', 'testimonial' ) ) { // check if search widget is used
//yay! active
} else { echo '<div id="message" class="updated fade"><p><strong>Widget is not active! Remembet to activate it here!</p></div>'; }
}
add_action( 'init', 'check_widget' );
You are using wp_head action, so your message div will be in head section and won't display... Take a look at http://codex.wordpress.org/Plugin_API/Action_Reference to use another action, or simply modify your template.
Is there any fix to make Jquery-ui sortable work on touch devices based on Android or IOS?
I suggest jQuery UI Touch Punch. I've tested it on iOS 5 and Android 2.3 and it works great on both.
The other answer is great but unfortunately it will only work on iOS devices.
Also there was is a breakage caused by later versions of jquery.ui that meant that _touchEnd events were not correctly resetting an internal flag (mouseHandled) in mouse.ui and this was causing exceptions.
Both of these problems should now be fixed with this code.
/*
* Content-Type:text/javascript
*
* A bridge between iPad and iPhone touch events and jquery draggable,
* sortable etc. mouse interactions.
* #author Oleg Slobodskoi
*
* modified by John Hardy to use with any touch device
* fixed breakage caused by jquery.ui so that mouseHandled internal flag is reset
* before each touchStart event
*
*/
(function( $ ) {
$.support.touch = typeof Touch === 'object';
if (!$.support.touch) {
return;
}
var proto = $.ui.mouse.prototype,
_mouseInit = proto._mouseInit;
$.extend( proto, {
_mouseInit: function() {
this.element
.bind( "touchstart." + this.widgetName, $.proxy( this, "_touchStart" ) );
_mouseInit.apply( this, arguments );
},
_touchStart: function( event ) {
if ( event.originalEvent.targetTouches.length != 1 ) {
return false;
}
this.element
.bind( "touchmove." + this.widgetName, $.proxy( this, "_touchMove" ) )
.bind( "touchend." + this.widgetName, $.proxy( this, "_touchEnd" ) );
this._modifyEvent( event );
$( document ).trigger($.Event("mouseup")); //reset mouseHandled flag in ui.mouse
this._mouseDown( event );
return false;
},
_touchMove: function( event ) {
this._modifyEvent( event );
this._mouseMove( event );
},
_touchEnd: function( event ) {
this.element
.unbind( "touchmove." + this.widgetName )
.unbind( "touchend." + this.widgetName );
this._mouseUp( event );
},
_modifyEvent: function( event ) {
event.which = 1;
var target = event.originalEvent.targetTouches[0];
event.pageX = target.clientX;
event.pageY = target.clientY;
}
});
})( jQuery );
is this meant to replace the mouse.ui js code or to be called after that javascript is loaded? I am unable to get it to work for me on an Android tablet.
EDIT for anyone finding this in the future - got this to work for a Samsung Galaxy Android tablet with the following code:
/iPad|iPhone|Android/.test( navigator.userAgent ) && (function( $ ) {
var proto = $.ui.mouse.prototype,
_mouseInit = proto._mouseInit;
$.extend( proto, {
_mouseInit: function() {
this.element
.bind( "touchstart." + this.widgetName, $.proxy( this, "_touchStart" ) );
_mouseInit.apply( this, arguments );
},
_touchStart: function( event ) {
/* if ( event.originalEvent.targetTouches.length != 1 ) {
return false;
} */
this.element
.bind( "touchmove." + this.widgetName, $.proxy( this, "_touchMove" ) )
.bind( "touchend." + this.widgetName, $.proxy( this, "_touchEnd" ) );
this._modifyEvent( event );
$( document ).trigger($.Event("mouseup")); //reset mouseHandled flag in ui.mouse
this._mouseDown( event );
//return false;
},
_touchMove: function( event ) {
this._modifyEvent( event );
this._mouseMove( event );
},
_touchEnd: function( event ) {
this.element
.unbind( "touchmove." + this.widgetName )
.unbind( "touchend." + this.widgetName );
this._mouseUp( event );
},
_modifyEvent: function( event ) {
event.which = 1;
var target = event.originalEvent.targetTouches[0];
event.pageX = target.clientX;
event.pageY = target.clientY;
}
});
})( jQuery );
I finally found a solution that works with drag handles.
Go to this page.
In Downloads, grab the "altfix" version, which only applies touch handling to the elements you specify.
Add a script tag for the downloaded JS file.
Add touch handling for your drag handles in your document ready handler; e.g. $('.handle').addTouch()
I'm using this snippet below in conjunction with jquery-sortable which does allow the drag sort to happen on my iPhone. I am having a problem after I finish the first sort however as any scrolling on the list at all is detected as a drag.
EDIT - see here as well http://bugs.jqueryui.com/ticket/4143
EDIT 2 - I was able to get this working if I use the entire row as the handle. It also fixed a problem I was having where the offset was incorrect after scrolling.
/*
* A bridge between iPad and iPhone touch events and jquery draggable, sortable etc. mouse interactions.
* #author Oleg Slobodskoi
*/
/iPad|iPhone/.test( navigator.userAgent ) && (function( $ ) {
var proto = $.ui.mouse.prototype,
_mouseInit = proto._mouseInit;
$.extend( proto, {
_mouseInit: function() {
this.element
.bind( "touchstart." + this.widgetName, $.proxy( this, "_touchStart" ) );
_mouseInit.apply( this, arguments );
},
_touchStart: function( event ) {
if ( event.originalEvent.targetTouches.length != 1 ) {
return false;
}
this.element
.bind( "touchmove." + this.widgetName, $.proxy( this, "_touchMove" ) )
.bind( "touchend." + this.widgetName, $.proxy( this, "_touchEnd" ) );
this._modifyEvent( event );
this._mouseDown( event );
return false;
},
_touchMove: function( event ) {
this._modifyEvent( event );
this._mouseMove( event );
},
_touchEnd: function( event ) {
this.element
.unbind( "touchmove." + this.widgetName )
.unbind( "touchend." + this.widgetName );
this._mouseUp( event );
},
_modifyEvent: function( event ) {
event.which = 1;
var target = event.originalEvent.targetTouches[0];
event.pageX = target.clientX;
event.pageY = target.clientY;
}
});
})( jQuery );
This worked a lot better for me than the selected answer, so I hope this helps other people:
http://code.google.com/p/rsslounge/source/browse/trunk/public/javascript/addtouch.js?r=115.
The other code behaves weird, when you drag an element the potential dropping position is very far from were it should be.
Using Touch Punch is as easy as 1, 2…
Just follow these simple steps to enable touch events in your jQuery UI app:
Include jQuery and jQuery UI on your page.
Include Touch Punch after jQuery UI and before its first use.
Please note that if you are using jQuery UI's components, Touch Punch must be included after jquery.ui.mouse.js, as Touch Punch modifies its behavior.
There is no 3. Just use jQuery UI as expected and watch it work at the touch of a finger.
$('#widget').draggable();
Tested on iPad, iPhone, Android and other touch-enabled mobile devices.