How to do start date selected in jquery datepicker using Ajax call

Hey friends sharing information regarding Facing the issues of jQuery date picker object where date not selected by start date in ajax call.

jquery date picker to set start date while in ajax call and getting data from server script. While changing the drop down of course I want to set that course start date in calender view of jquery date picker.Please find below attached screenshotsfor more graphically.

Step 1 : HTML for change start date based on course you have selected. I will show you the below example of slider that need to show images and video where rotate the slider after 3 seconds.

Select Course *




 Select 
Cambridge International AS & A Level Business
Cambridge International AS & A Level Economics




From *





 
 

Step 2: Add js and Css of jquery date picker

Step3 : Call server script using Ajax Call as below. You need to remove or distroy the object of datepicker while you change dropdown value.Get date of javascript format from server side script Ex. var d = new Date(2016,02,12); // Javascript date object consider this format.YYYY-MM-DD. From server side script I will crate string as "2016,02,12" which passed into date object of JavaScript.

Step4 : PHP server side script Ajax call pass to ajax_get_startdate.php script where based on course id got the start date using select query of mysql

public function ajax_get_startdate() {
 $course_id = $_POST['course_id'];
 $result = $this->courses_model->_get_course_options($course_id); //get course start date
 if (!$result) {
  echo 'false';
 } else {
  $datev = $result->start_date;
  $d = explode('-',$datev);
  $day = $d[2];
  $month = $d[1];
  $year = $d[0];
  echo $year.','.$month.','.$day; 
 }
}

How to remove top menu and statusbar option from tinymce editor.

Display text colour, alignment and font size etc. need to apply in content in front end.You need to configure menu bar false in tinymce initialization.

Tinymce editor applied in textarea and if menu is added in textarea using tinymce editor then UI not coming properly in front end and facing the issue of design of the page and for solving alignment of page issues want to remove top menu toolbar option from tinymce editor.

Before removing menu in tinymce editor screenshorts is below

Removing toolbar in the tinymce script you need add menubar:false and for statusbar remove you need to add statusbar:false for removing menu and statusbar of tinymce editor.
After removing the top menu option in tinymce editor screenshorts is below

Following tinymce editor script for removing main top menu options in configuration.

tinymce.init({
    selector: "textarea",
 menubar : false,
        statusbar:false,
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});

Jquery bxslider- Display Image and video in Responsive jQuery Slider

How to display video and image in slider. I did R&D and based on that I have found jquery bxslider is best example for displaying content video and image slider.

Jquery bxslider providing responsive behavior with different browser and It also support in android and iPhone.Using jquery bxslider also feasible to display video in slider and we can play and pause video during slide transition.


I will show you the below example of slider that need to show images and video where rotate the slider after 3 seconds.

Step1: Add CSS and JS of bxslider

Step2: HTML for slider as below with image and video. For display video I have used video tag of html5

Step3: Initialize bxslider js using below code where I set auto Delay:300 set. It will be delay 3 seconds between slide rotation or transition.

Tinymce editor - How to remove image and video menu option in tinymce

Editor is most feature in any web application for clean and formatted contain.

So lets talk about tinymce editor and customization for same.

For display formatted contain on front side to require use proper text colour, alignment and font size etc.

Tinymce editor is popular and integrated with many open source framework. So the reason behind I was working on one of the project and faced some issues with contain format and design.

I have goggling and found the good solution so the reason I want share with you and save your time.

Tinymce editor applied in textarea and if image is added in textarea using tinymce editor then UI not coming properly in front end.

After addition image and contain will be display with image on front end side but facing some issues of design of the page related image.

So for resolution of alignment of page issue. want to remove option for insert images, video from tinymce editor.


Before removing Insert menu of image/video upload in tinymce editor screenshots is below.

Removing media link in the tinymce script you need remove link media from menu->insert option of tinymce editor.

After removing the Insert option for insert image and insert video in tinymce editor screenshorts is below

Following tinymce editor script for removing insert option and other option using menu options in configuration.

tinymce.init({ selector: "textarea",

 menubar : false,

    menu : { // this is the complete default configuration

        file   : {title : 'File'  , items : 'newdocument'},

        edit   : {title : 'Edit'  , items : 'undo redo | cut copy paste pastetext | selectall'},

        insert : {title : 'Insert', items : 'template hr'}, //link media remove it

        view   : {title : 'View'  , items : 'visualaid'},

        format : {title : 'Format', items : 'bold italic underline strikethrough superscript subscript | formats | removeformat'},

        table  : {title : 'Table' , items : 'inserttable deletetable | cell row column'},

        tools  : {title : 'Tools' , items : 'spellchecker code'}

    },   

    plugins: [

        "advlist autolink lists link image charmap print preview anchor",

        "searchreplace visualblocks code fullscreen",

        "insertdatetime media table contextmenu paste"

    ],

    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"

});

How to change progress bar process colour - HTML5 progress tag.

Facing the issues of how to change progress bar process colour in HTML5 progress tag.

How to change the colour of progress bar demo not shown in any demo examples. I got trouble at UI level due to that my site colour button was in light red colour and progress bar colour needed in light red colour.

So I have applied progress bar colour but it was working in Firefox only and facing the issues in chrome browser that processing colour not changed.

Just refer the my previous post for uploading video/file using ajax.Where I need to implement this feature like when upload the video need to display progress bar with preferred colour of theme.

For uploading video displaying progress bar of html5 latest tag of process tag.

While uploading video displaying process bar for progress of how much time left for completion of upload the video.

You can refer previous post whole HTML with ajax call for video upload with progress bar.

For progress bar processing colour you need to set colour code(#ff5a5f) in background colour please apply below css and check it is working in all browser.

Please find attached image of progress colour.

CSS for progress bar

progress {background:#ccc; border: 1px solid #ff5a5f; border-radius: 5px; color: #ff5a5f; font-size: 0.6em; height: 3.8em;line-height: 1.5em;text-indent: 0.5em;}
progress[value]::-webkit-progress-bar {background-color:#ff5a5f;}
progress::-moz-progress-bar { background:#ff5a5f; }
progress::-webkit-progress-value { background:#ff5a5f; }
progress { color:#ff5a5f; }

/* Background Colors  */ 
progress,                          /* Firefox  */ 
progress[role][aria-valuenow] {    /* Polyfill */
   background: #ccc !important; /* !important is needed by the polyfill */
}
/* Chrome */
progress::-webkit-progress-bar {
    background: #ccc !important;
}
/* Foreground Colors   */ 
/* IE10 */
progress {
    color:#ff5a5f;
}
/* Firefox */
progress::-moz-progress-bar { 
    background: #ff5a5f;   
}
/* Chrome */
progress::-webkit-progress-value {
    background:#ff5a5f;
}
/* Polyfill */
progress[aria-valuenow]:before  {
    background: #ff5a5f;
}