I have a form using Janko At Warpseeds Form to Wizard Plugin alongside the ImagePicker plugin and I would like to make sure all the images are selected before being able to click Next.
I am currently using Bassassistance validation plugin.
Does anyone have any idea how I could implement this?
JSFiddle showing current working code and all javascript here http://jsfiddle.net/4Hkxy/
$(function () {
jQuery(function($){
var $signupForm = $( '#multipage' );
$signupForm.formToWizard({
submitButton: 'SaveAccount',
showProgress: true, //default value for showProgress is also true
nextBtnName: 'Forward >>',
prevBtnName: '<< Previous',
showStepNo: false,
validateBeforeNext: function() {
var selectedCount = $('.thumbnails.image_picker_selector:visible .selected').length;
var totalCount = $('.thumbnails.image_picker_selector:visible').length;
if(selectedCount != totalCount) {
alert('please select an image per selection');
}
}
});
});
$("select.image-picker").imagepicker({
hide_select: true,
show_label: true,
});
$("select.image-picker.show-labels").imagepicker({
hide_select: true,
show_label: true,
});
var container = $("select.image-picker.masonry").next("ul.thumbnails");
container.imagesLoaded(function () {
container.masonry({
itemSelector: "li",
});
});
Any help would be appreciated.
Try this:
//inside "next.onclick" handler
var selectedCount = $('.thumbnails.image_picker_selector:visible .selected').length;
var totalCount = $('.thumbnails.image_picker_selector:visible').length;
if(selectedCount != totalCount) {
alert('please select an image per selection');
}
Related
I tried to make a comment box, in which every user can delete their own comments.
Everything is good, less delete button. I can comment but when i click x button(delete btn), there is not posted data before success.
jquery-code
$(document).ready(function(){
$('.buton-stergere').each(function(){
var buton = this;
$(buton).click(function(){
stergere_com(buton.id);
});
});
});
function stergere_com(_id_comment){
$.post("/site/ajax/stergere_com.php", {
task: "stergere_com",
Serverside: true,
id_comment: _id_comment
}
).success(function(data)
{
console.log("succes");
});
}
php code
if(isset($_POST['task']) && $_POST['task'] == 'stergere_com'){
require_once $_SERVER['DOCUMENT_ROOT'].'/directoaredef.php';
echo "server side";
}
html btn
<ul>
<li id="<?php echo $comment->id_comment; ?>" class="buton-stergere">X</li>
</ul>
Try:
$(document).ready(function(){
$('.buton-stergere').each(function(){
var buton = $(this);
buton.click(function(){
stergere_com(buton.attr('id'));
});
});
});
function stergere_com(_id_comment){
$.post("/site/ajax/stergere_com.php", {
task: "stergere_com",
Serverside: true,
id_comment: _id_comment
}
).success(function(data)
{
console.log("succes");
});
}
and if you need var buton to be the Javascript this - instead of jQuery object $(this):
var buton = this;
use:
var buton = $(this)[0];
You don't need to use $.each, just use the button class for click event.
$(document).ready(function(){
$('.buton-stergere').click(function(){
stergere_com(this.id);
//stergere_com($(this).prop('id')); //you can use this also
});
});
function stergere_com(_id_comment){
$.post("/site/ajax/stergere_com.php", {
task: "stergere_com",
Serverside: true,
id_comment: _id_comment
}
).success(function(data)
{
console.log("succes");
});
}
I have a modal box that opens content from the footer of a page (a hidden div). I am trying to launch the modal and display the content of another .php file whilst passing a variable that can be used to SELECT from a DB Any ideas?
Here is the code:
The modal box link
Click Me For A Modal
The JS
(function($) {
$('a[data-reveal-id]').live('click', function(e) {
e.preventDefault();
var modalLocation = $(this).attr('data-reveal-id');
$('#'+modalLocation).reveal($(this).data());
});
The .php file with the modalbox content
<div id="myModal" class="reveal-modal">
<div>content called from DB using passed variable</div>
<p>more content</p>
<a class="close-reveal-modal">×</a>
Does anyone have any ideas please?
-----------------------------------------------------------------------------------
UPDATED!
Here is the full js file:
(function($) {
$('a[data-reveal-id').live('click', function(e)
{
e.preventDefault();
var modalLocation = $(this).attr('data-reveal-id');
$.ajax({
url: 'code.php',
data: '$varible',
type: 'GET',
error: function()
{
// If there's an issue, display an error...
},
success: function(output)
{
$('#' + modalLocation).innerHTML(output).reveal( $(this).data() );
}
});
})
$.fn.reveal = function(options) {
var defaults = {
animation: 'fadeAndPop', //fade, fadeAndPop, none
animationspeed: 300, //how fast animtions are
closeonbackgroundclick: true, //if you click background will modal close?
dismissmodalclass: 'close-reveal-modal' //the class of a button or element that will close an open modal
};
var options = $.extend({}, defaults, options);
return this.each(function() {
var modal = $(this),
topMeasure = parseInt(modal.css('top')),
topOffset = modal.height() + topMeasure,
locked = false,
modalBG = $('.reveal-modal-bg');
if(modalBG.length == 0) {
modalBG = $('<div class="reveal-modal-bg" />').insertAfter(modal);
}
//Entrance Animations
modal.bind('reveal:open', function () {
modalBG.unbind('click.modalEvent');
$('.' + options.dismissmodalclass).unbind('click.modalEvent');
if(!locked) {
lockModal();
if(options.animation == "fadeAndPop") {
modal.css({'top': $(document).scrollTop()-topOffset, 'opacity' : 0, 'visibility' : 'visible'});
modalBG.fadeIn(options.animationspeed/2);
modal.delay(options.animationspeed/2).animate({
"top": $(document).scrollTop()+topMeasure + 'px',
"opacity" : 1
}, options.animationspeed,unlockModal());
}
if(options.animation == "fade") {
modal.css({'opacity' : 0, 'visibility' : 'visible', 'top': $(document).scrollTop()+topMeasure});
modalBG.fadeIn(options.animationspeed/2);
modal.delay(options.animationspeed/2).animate({
"opacity" : 1
}, options.animationspeed,unlockModal());
}
if(options.animation == "none") {
modal.css({'visibility' : 'visible', 'top':$(document).scrollTop()+topMeasure});
modalBG.css({"display":"block"});
unlockModal()
}
}
modal.unbind('reveal:open');
});
//Closing Animation
modal.bind('reveal:close', function () {
if(!locked) {
lockModal();
if(options.animation == "fadeAndPop") {
modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
modal.animate({
"top": $(document).scrollTop()-topOffset + 'px',
"opacity" : 0
}, options.animationspeed/2, function() {
modal.css({'top':topMeasure, 'opacity' : 1, 'visibility' : 'hidden'});
unlockModal();
});
}
if(options.animation == "fade") {
modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
modal.animate({
"opacity" : 0
}, options.animationspeed, function() {
modal.css({'opacity' : 1, 'visibility' : 'hidden', 'top' : topMeasure});
unlockModal();
});
}
if(options.animation == "none") {
modal.css({'visibility' : 'hidden', 'top' : topMeasure});
modalBG.css({'display' : 'none'});
}
}
modal.unbind('reveal:close');
});
//Open Modal Immediately
modal.trigger('reveal:open')
//Close Modal Listeners
var closeButton = $('.' + options.dismissmodalclass).bind('click.modalEvent', function () {
modal.trigger('reveal:close')
});
if(options.closeonbackgroundclick) {
modalBG.css({"cursor":"pointer"})
modalBG.bind('click.modalEvent', function () {
modal.trigger('reveal:close')
});
}
$('body').keyup(function(e) {
if(e.which===27){ modal.trigger('reveal:close'); } // 27 is the keycode for the Escape key
});
function unlockModal() {
locked = false;
}
function lockModal() {
locked = true;
}
});//each call
}//orbit plugin call
})(jQuery);
Here is the html trigger:
<a class="big-link" href="#" data-reveal-id="myModal">Click Me to open modal</a>
Here is the code.php, file containing the modal:
<div id="myModal" class="reveal-modal"><div>content called from DB using passed variable</div><p>more content</p><a class="close-reveal-modal">×</a>
The issue at the minute is not passing the variable, but actually lauching the modal with the content of code.php
Thanks again for your time with this problem!
Without knowing what variables you're looking to pass, and what you're trying to grab, you can modify this. I haven't tested it so you may have to do some tweaking.
$('a[data-reveal-id').live('click', function(e)
{
e.preventDefault();
var modalLocation = $(this).attr('data-reveal-id');
$.ajax({
url: 'URL_TO_YOUR_PHP',
data: 'YOUR_VARIABLE', // Look at how to pass data using GET, or POST
type: 'GET' or 'POST', // Choose one, and pass the data above appropriately
error: function()
{
// If there's an issue, display an error...
},
success: function(output)
{
$('#' + modalLocation).innerHTML(output).reveal( $(this).data() );
}
});
})
-- EDIT --
Now the problem is that you don't have #myModal available in your HTML, yet. So, what you want to do is change the following line accordingly:
$('#' + modalLocation).innerHTML(output).reveal( $(this).data() );
-- BECOMES --
$("body").append(output).reveal( $(this).data() );
In your CSS you'll want to initially hide your modal box that way it's revealed appropriately.
I am usining masonry view to display content with infinite scrolling functionality.
Masonry view part is working fine. For infinite scroll I have tried infinitescroll js
or on the basis of scroll as I have written below code.
Problem :- After first scroll I am facing too much recursion problem.
jQuery(document).ready(function($) {
var $container = jQuery('.main_container');
$container.imagesLoaded(function(){
// options
$container.masonry({
itemSelector: '.pin',
isAnimated: true,
isFitWidth: true,
isAnimatedFromBottom: true
});
});
//for infinite scrollings
jQuery(window).scroll(function() {
if(jQuery(window).scrollTop() + jQuery(window).height() == jQuery(document).height()) {
alert("bottom!");
ajaxurl = "script url here";
var data = {start:startLimit,end:endLimit};
jQuery.get(ajaxurl, data, function(response) {
var $boxes = $(response);
$('.main_container').append( $boxes ).masonry( 'appended', $boxes );
});
}
});
});
I am trying this on wordpress admin section plugin.
After step-by-step checking I found solution , Cause of the problem I am using animate effect in masonry which is conflict some how with wordpress plugin view js.
$container.imagesLoaded(function(){
// options
$container.masonry({
itemSelector: '.pin',
isAnimated: false,
isFitWidth: true,
isAnimatedFromBottom: false
});
});
Ok this is my issue if anyone can help, please.
I have a href that div id to switch content - I would like to add another document ready function javascript without conflicting with make tab I have already.
Example of make tab already:
<script type="text/javascript">
{literal}
$(document).ready(function(){
function makeTabs(selector) {
var tabContainers = $(selector + ' > div');
tabContainers.removeClass("selected").filter(':first').addClass("selected");
galleryRendered = false;
$(selector + ' > ul a').click(function () {
tabContainers.removeClass("selected");
tabContainers.filter(this.hash).addClass("selected");
$(selector + ' > ul a').removeClass('selected');
$(this).addClass('selected');
if (this.hash == '#Pictures' && !galleryRendered)
{
var galleries = $('.pictures > .ad-gallery').adGallery({
effect : 'slide-hori',
enable_keyboard_move : true,
cycle : true,
animation_speed : 400,
slideshow: {
enable: false
},
callbacks: {
init: function() {
this.preloadImage(0);
this.preloadImage(1);
this.preloadImage(2);
}
}
});
galleryRendered = true;
}
if (this.hash == '#OnTheMap') document.getElementById("Map").map.onContainerChanged();
return false;
}).filter(':first').click();
}
makeTabs('.tabs');
});
{/literal}
</script>
Want to create a second one so I can create tabs inside of an existing div id area/content to switch from photo to video to youtube.
<div class=".tabs"><ul><li>[[Photo]]</li><li>[[Youtube]]</li><li>[[Video]]</li></ul><div id="photo">Test</div><div id="tube">Test</div><div id="vid">Test</div></div>
This will be inside a div id that already exist that uses the first tab creator shown above.
In jQuery you just have to do this:
$(function(){
// code here
});
$(function(){
// more code here
});
Every function declared like this will be executed on domready.
I am trying to convert the 'list pages' function in Wordpress into a dynamic select menu navigation (like the first example here: http://lab.artlung.com/dropdown/). I have tried converting wp_list_pages using js with this code:
$(function() {
$('ul.selectdropdown').each(function() {
var $select = $('<select />');
$(this).find('a').each(function() {
var $option = $('<option />');
$option.attr('value', $(this).attr('href')).html($(this).html());
$select.append($option);
});
$(this).replaceWith($select);
});
});
This works converting it, but doesn't allow me to insert the required:
onchange="window.open(this.options[this.selectedIndex].value,'_top')"
Am I able to drop this into the above function, or is there a better way of going about this?
Any help would be great.
<-- edit --> the below function works correctly:
$("ul.selectdropdown").show();
$(function() {
$('ul.selectdropdown').each(function() {
var $select = $('');
$(this).find('a').each(function() {
var $option = $('<option />');
$option.attr('value', $(this).attr('href')).html($(this).html());
$select.append($option);
$select.change(function() { window.open($select.find(':selected').val(), '_top'); });
});
$(this).replaceWith($select);
});
});
Why don't you use $select.change(function() { window.open($select.find(':selected').val(), '_top'); });?