crE

Hi all I need to create some animations for some web banners. I am required to animate like this video here: https://vid.me/JI4g"]https://vid.me/JI4g I've done CSS animation before, such as fading in, moving left, right, rotating etc. But is this something that can be done with CSS alone? Or is there some other way to go about this? I have all the SVG images, so they don't need to be created. Any point in the right direction would be helpful Thanks crE

Hi fisicx, There isn't a slider implemented at the moment, the DIVs are just sitting beaneath eachother.

Hi everyone, I'm wondering if anyone has any advice! Here is the page in question: http://185.116.213.24/~demotester/brochure-test/ I would like be able to scroll through those 4 (or more) DIVs with the use of a Next and Previous button. Which I have done in the past with absolute positioning. But, I have the prerequisite of those DIVs maintaining an aspect ratio as you can see if you resize the page. I have tried 2 or 3 available sliders but they all fall down when getting them to maintain aspect ratio like you can see on the page. I would also like a small portion of the other DIVs to be shown on screen so the user can see there are more DIVs they can slide to. Is this possible to do with Jquery? On a side note - there will also be several of these sliders on the page as you scroll down - I'm not sure if this would raise an issue.

I posted this in the wrong sub-forum I think, so I've reintroduced it here... Here is a screencast of the issue to make it clearer.... http://screencast.com/t/KXD8U1oA0yU6 Hello again, still working on the same page! This is my first project where I'm trying to get my head round AJAX so I am running into a few stumbling blocks. I have a datatable that loads user details from a JSON output via AJAX. There is a "Deactivate" button which deactivates the user account. I have applied the popconfirm id to each row... <script type="text/javascript"> $(document).ready(function() { $('#user_list').DataTable( { stateSave: true, "pageLength": 20, "ajax": { "url": "data/JSON_users_list.php", "dataSrc": "", }, "columns": [ { "data": "profile_photo_path" }, { "data": "namebulk" }, { "data": "email" }, { "data": "active" }, { "data": "id"} ], "columnDefs": [ { sClass: "hidden-xs hidden-sm", "targets": [ 0 ] }, { sClass: "user-name", "targets": [ 1 ] }, { sClass: "hidden-xs hidden-sm", "targets": [ 2 ] }, { sClass: "action-links", "targets": [ 3 ] }, { "width": "1%", "targets": 0 }, { "targets": [ 4 ], "visible": false, "searchable": false } ], "fnRowCallback": function( nRow, aData, iDisplayIndex ) { $('td:eq(0)', nRow).html('<div style="background: url(\''+aData.profile_photo_path+'\');" class="image-circle-50" id="'+aData.id+'-img"></div>'); $('td:eq(1)', nRow).html('<a onclick="$(\'#menu\').load(\'USERS_edit.php?id='+aData.id+'\');" class="name edit" id="showmenu"><span id="'+aData.id+'-first_name">'+aData.first_name+'</span> <span id="'+aData.id+'-last_name">'+aData.last_name+'</span></a><span id="'+aData.id+'-username">'+aData.username+'</span>'); $('td:eq(3)', nRow).html('<a onclick="$(\'#menu\').load(\'USERS_edit.php?id='+aData.id+'\');" id="showmenu" class="edit"><i class="linecons-pencil"></i>Edit</a><a class="delete" id="deactivate"><i class="linecons-trash"></i>Deactivate</a>'); return nRow; }, } ); var myTable = $('#user_list').DataTable(); yadcf.init(myTable, [ {column_number : 0, filter_type: 'none'}, {column_number : 1, filter_type: 'text'}, {column_number : 2, filter_type: 'text'} ]); } ); </script> Which is on the line <a class="delete" id="deactivate"><i class="linecons-trash"></i>Deactivate</a> The popconfirm JS is found here: https://github.com/Ifnot/PopConfirm Here is the code to initialise popconfirm on anything with the ID of "deactivate": <script type="text/javascript"> $(document).ready(function() { // Custom Title, Content and Placement $("#deactivate").popConfirm({ title: "Are you sure?", content: "All previous records of this user will be maintained on the system for consistency", placement: "left", noBtn: "Cancel" }); }); </script> I have tried changing it to: $('#main-content').ready(function() { and $('body').ready(function() { to make sure it is initialised for anything that appears in the body or the main-content DIV, but still no luck.... Am I missing something simple here, or is popconfirm natively not going to work like this? Thanks

Thanks for the advice guys, I will look into that I tried to install grunt on my machine at work (where I do all the web dev stuff), but due to restrictions on the network I was unable to get it to work :/

Here is a screencast of the issue to make it clearer.... http://screencast.com/t/KXD8U1oA0yU6 Hello again, still working on the same page! This is my first project where I'm trying to get my head round AJAX so I am running into a few stumbling blocks. I have a datatable that loads user details from a JSON output via AJAX. There is a "Deactivate" button which deactivates the user account. I have applied the popconfirm id to each row... <script type="text/javascript"> $(document).ready(function() { $('#user_list').DataTable( { stateSave: true, "pageLength": 20, "ajax": { "url": "data/JSON_users_list.php", "dataSrc": "", }, "columns": [ { "data": "profile_photo_path" }, { "data": "namebulk" }, { "data": "email" }, { "data": "active" }, { "data": "id"} ], "columnDefs": [ { sClass: "hidden-xs hidden-sm", "targets": [ 0 ] }, { sClass: "user-name", "targets": [ 1 ] }, { sClass: "hidden-xs hidden-sm", "targets": [ 2 ] }, { sClass: "action-links", "targets": [ 3 ] }, { "width": "1%", "targets": 0 }, { "targets": [ 4 ], "visible": false, "searchable": false } ], "fnRowCallback": function( nRow, aData, iDisplayIndex ) { $('td:eq(0)', nRow).html('<div style="background: url(\''+aData.profile_photo_path+'\');" class="image-circle-50" id="'+aData.id+'-img"></div>'); $('td:eq(1)', nRow).html('<a onclick="$(\'#menu\').load(\'USERS_edit.php?id='+aData.id+'\');" class="name edit" id="showmenu"><span id="'+aData.id+'-first_name">'+aData.first_name+'</span> <span id="'+aData.id+'-last_name">'+aData.last_name+'</span></a><span id="'+aData.id+'-username">'+aData.username+'</span>'); $('td:eq(3)', nRow).html('<a onclick="$(\'#menu\').load(\'USERS_edit.php?id='+aData.id+'\');" id="showmenu" class="edit"><i class="linecons-pencil"></i>Edit</a><a class="delete" id="deactivate"><i class="linecons-trash"></i>Deactivate</a>'); return nRow; }, } ); var myTable = $('#user_list').DataTable(); yadcf.init(myTable, [ {column_number : 0, filter_type: 'none'}, {column_number : 1, filter_type: 'text'}, {column_number : 2, filter_type: 'text'} ]); } ); </script> Which is on the line <a class="delete" id="deactivate"><i class="linecons-trash"></i>Deactivate</a> The popconfirm JS is found here: https://github.com/Ifnot/PopConfirm Here is the code to initialise popconfirm on anything with the ID of "deactivate": <script type="text/javascript"> $(document).ready(function() { // Custom Title, Content and Placement $("#deactivate").popConfirm({ title: "Are you sure?", content: "All previous records of this user will be maintained on the system for consistency", placement: "left", noBtn: "Cancel" }); }); </script> I have tried changing it to: $('#main-content').ready(function() { and $('body').ready(function() { to make sure it is initialised for anything that appears in the body or the main-content DIV, but still no luck.... Am I missing something simple here, or is popconfirm natively not going to work like this? Thanks

I figured a workaround which is probably better... I simply reloaded the datatable! $('#user_list').DataTable().ajax.reload();

On a side note - I just tried putting "serverside": true - this actually fixed the issue of JSON data being undefined (not that error message about an unknown parameter though), however I don't want to be using server side for this.

Hi again all, I have a datatable which lists users, and on that same page is an "add user" form which gets submitted via ajax and processed with PHP, it then sends back a success variable, plus more variables such as "username", "first_name", "email" etc. It passes these back as well so I can add this new entry into the datatable without having to refresh the page. This worked fine until I changed the way I populate the datatable. Originally I populated it rather messily with a PHP while loop and iterated through the table rows, so I decided to run it less messy like this.... <script type="text/javascript"> $(document).ready(function() { $('#user_list').DataTable( { stateSave: true, "pageLength": 20, "ajax": { "url": "data/JSON_users_list.php", "dataSrc": "", }, "columns": [ { "data": "profile_photo_path" }, { "data": "namebulk" }, { "data": "email" }, { "data": "active" }, { "data": "id"} ], "columnDefs": [ { sClass: "hidden-xs hidden-sm", "targets": [ 0 ] }, { sClass: "user-name", "targets": [ 1 ] }, { sClass: "hidden-xs hidden-sm", "targets": [ 2 ] }, { sClass: "action-links", "targets": [ 3 ] }, { "width": "1%", "targets": 0 }, { "targets": [ 4 ], "visible": false, "searchable": false } ], "fnRowCallback": function( nRow, aData, iDisplayIndex ) { $('td:eq(0)', nRow).html('<div style="background: url(\''+aData.profile_photo_path+'\');" class="image-circle-50" id="'+aData.id+'-img"></div>'); $('td:eq(1)', nRow).html('<a onclick="$(\'#menu\').load(\'USERS_edit.php?id='+aData.id+'\');" class="name edit" id="showmenu"><span id="'+aData.id+'-first_name">'+aData.first_name+'</span> <span id="'+aData.id+'-last_name">'+aData.last_name+'</span></a><span id="'+aData.id+'-username">'+aData.username+'</span>'); $('td:eq(3)', nRow).html('<a onclick="$(\'#menu\').load(\'USERS_edit.php?id='+aData.id+'\');" id="showmenu" class="edit"><i class="linecons-pencil"></i>Edit</a><a href="#" class="delete"><i class="linecons-trash"></i>Deactivate</a>'); return nRow; }, } ); var myTable = $('#user_list').DataTable(); yadcf.init(myTable, [ {column_number : 0, filter_type: 'none'}, {column_number : 1, filter_type: 'text'}, {column_number : 2, filter_type: 'text'} ]); } ); </script> This works a lot better for a few reasons... pagination works for one! Anyway... I've discovered upon changing the datatable that when I add a new user, the JSON data that gets passed back comes up as undefined when using the following code... <script type="text/javascript"> jQuery(document).ready(function($) { // Validation and Ajax action $("form#useradd").validate({ rules: { username: { required: true, minlength: 2 }, password: { required: true, minlength: 5 }, first_name: { required: true }, last_name: { required: true }, email: { required: true, email: true } }, messages: { username: { required: 'Please enter the username.' }, password: { required: 'Please enter a password.' }, first_name: { required: 'Please enter a first name.' }, last_name: { required: 'Please enter a last name.' }, email: { required: 'Please enter an email address.' } }, // Form Processing via AJAX submitHandler: function(form) { $.ajax({ url: "data/USER_add.php", method: 'POST', dataType: 'json', data: { post_it: true, photo_path: $(form).find('#photo_path').val(), username: $(form).find('#username').val(), password: $(form).find('#password').val(), first_name: $(form).find('#first_name').val(), last_name: $(form).find('#last_name').val(), email: $(form).find('#email').val() }, success: function(resp) { show_loading_bar({ delay: .5, pct: 100, finish: function(){ } }); // Remove any alert $(".errors-container .alert").slideUp('fast'); // Show errors if(resp.done == false) { $(".errors-container").html('<div class="alert alert-danger">\ <button type="button" class="close" data-dismiss="alert">\ <span aria-hidden="true">×</span>\ <span class="sr-only">Close</span>\ </button>\ ' + resp.errors + '\ </div>'); $('html, body').animate({ scrollTop: 0 }, 'slow'); }else{ $(".errors-container").html('<div class="alert alert-success">\ <button type="button" class="close" data-dismiss="alert">\ <span aria-hidden="true">×</span>\ <span class="sr-only">Close</span>\ </button>\ ' + resp.successes + '\ </div>'); $('#useradd').trigger("reset"); $('html, body').animate({ scrollTop: 0 }, 'slow'); // Add this user to the user list dynamically $('#user_list').dataTable().fnAddData( [ "<div style=\"background: url('"+resp.photo_path+"');\" class=\"image-circle-50\" id=\""+resp.userID+"-img\"></div>", "<a href=\"USERS_edit.php?id="+resp.userID+"\" data-slidepanel=\"panel\" class=\"name edit\"><span id=\""+resp.userID+"-first_name\">"+resp.first_name+"</span> <span id=\""+resp.userID+"-last_name\">"+resp.last_name+"</span></a><span id=\""+resp.userID+"-username\">"+resp.username+"</span>", "<span class=\"email\" id=\""+resp.userID+"'-email\">"+resp.email+"</span>", "<a href=\"USERS_edit.php?id="+resp.userID+"\" data-slidepanel=\"panel\" class=\"edit\"><i class=\"linecons-pencil\"></i>Edit</a><a href=\"#\" class=\"delete\"><i class=\"linecons-trash\"></i>Deactivate</a>" ] ); } } }); } }); }); </script> I also get the following error (which doesn't hinder the datatable in any way) Anyway... if I alert(resp.userID); before using the fnAddData function, it shows me the user id - so I know I'm getting a JSON response. But when putting the JSON variables inside fnAddData I just get "undefined". Is there something silly I'm missing here?

Thanks rallport! With this: $(document).ready(function() { var first = true; // Hide menu once we know its width $('body').on('click', '#showmenu', function() { var $menu = $('.cb_slide_panel'); if ($menu.is(':visible')) { // Slide away $menu.animate({right: -($menu.outerWidth() + 10)}, function() { $menu.hide(); }); } else { // Slide in $menu.show().css("right", -($menu.outerWidth() + 10)).animate({right: 0}); } }); }); Plus this... $('td:eq(3)', nRow).html('<a onclick="$(\'#menu\').load(\'USERS_edit.php?id='+aData.id+'\');" id="showmenu" class="edit"><i class="linecons-pencil"></i>Edit</a><a href="#" class="delete"><i class="linecons-trash"></i>Deactivate</a>'); And some css fiddling, I made it work. Thanks for the advice on building up from scratch

Hi all, I've got a page which calls users from a JSON file loaded via ajax. It uses datatables, which is something nice I've discovered and am very impressed with it. <script type="text/javascript"> $(document).ready(function() { $('#user_list_deactive').DataTable( { stateSave: true, "pageLength": 20, "ajax": { "url": "data/JSON_users_list_deactive.php", "dataSrc": "", }, "columns": [ { "data": "profile_photo_path" }, { "data": "first_name" }, { "data": "email" }, { "data": "active" }, { "data": "id"} ], "columnDefs": [ { sClass: "user-name", "targets": [ 1 ] }, { sClass: "action-links", "targets": [ 3 ] }, { "width": "1%", "targets": 0 }, { "targets": [ 4 ], "visible": false, "searchable": false } ], "fnRowCallback": function( nRow, aData, iDisplayIndex ) { $('td:eq(0)', nRow).html('<div style="background: url(\''+aData.profile_photo_path+'\');" class="image-circle-50" id="'+aData.id+'-img"></div>'); $('td:eq(1)', nRow).html('<a href="USERS_edit.php?id='+aData.id+'" data-slidepanel="panel" class="name edit"><span id="'+aData.id+'-first_name">'+aData.first_name+'</span> <span id="'+aData.id+'-last_name">'+aData.last_name+'</span></a><span id="'+aData.id+'-username">'+aData.username+'</span>'); $('td:eq(3)', nRow).html('<a href="USERS_edit.php?id='+aData.id+'" data-slidepanel="panel" class="edit"><i class="linecons-pencil"></i>Edit</a><a href="#" class="delete"><i class="linecons-trash"></i>Deactivate</a>'); return nRow; }, } ); var myTable = $('#user_list_deactive').DataTable(); yadcf.init(myTable, [ {column_number : 0, filter_type: 'none'}, {column_number : 1, filter_type: 'text'}, {column_number : 2, filter_type: 'text'} ]); } ); </script> <!-- Hide main search box--> <style type="text/css"> .dataTables_filter { display: none; } </style> <table class="table table-hover members-table middle-align" id="user_list_deactive"> <thead> <tr class="replace-inputs"> <th class="hidden-xs hidden-sm" style="background:#FFF"></th> <th>Name and Username</th> <th class="hidden-xs hidden-sm">Email</th> <th style="vertical-align:top;background:#FFF">Settings</th> </tr> </thead> </table> However, next to each use I have an "Edit" button, which calls a panel which appears from the right hand side of the page. <script type="text/javascript"> $(document).ready(function(){ $('[data-slidepanel]').slidepanel({ orientation: 'right', mode: 'overlay', static: false }); }); </script> This button works fine when put statically into the page but doesn't function when its included in the datatable, it simply opens up the page normally instead of pushing it to the sliding panel. Here is the static code for that link, which is what is replicated in the datatable code, but doesn't work due to the ajax call... <a href="USERS_edit.php?id=20" data-slidepanel="panel" class="edit"><i class="linecons-pencil"></i>Edit</a> I've done a screencast of the issue... first it shows the page not loading in the panel, then I click the static link outside of the datatable and the panel shows correctly. http://screencast.com/t/K8OEQi4oLP I'm presuming its because the ajax is loading AFTER the page has been loaded so it is not binding to those links, but I am unsure as to how to fix it. I've read countless times to use .on , but that didn't fix a thing, it stopped it working completely. Here is the jquery plugin for the slidepanel I'm using.... http://codebomber.com/jquery/slidepanel/ Any words of advice to point me in the right direction would be much appreciated

That worked immediately! Thank you so much Lyndsey, and Nock D4Y0

Hmmm. This worked. But I have encountered a new problem. When changing the HTML via... $("#photo").html('<img src="' + resp.changePhoto + '" class="droppable-area dz-clickable" id="advancedDropzone" style="min-height: 200px">'); The dropzone no longer functions. I click the image but I do not get shown a file browser.

Wow, thanks guys. Due to you introducing me properly to the chrome dev options I figured this out. My image processing PHP was throwing up a warning due to this... if(@!in_array(end(explode(".", strtolower($file['name']))), $allowedExtensions)) { } I supressed the error for the time being with @, and it works great. Thank you all

Thanks for the help with this by the way. (I can only make 19 more posts today, darn)