jQuery Forum

Unable to get a plugin configured properly - Please help !!
[5Replies]
- 08-Sep-2014 05:47 AM
- Forum: Using jQuery Plugins
Hi JAKE,

I have been desperately trying to configure a jquery plugin for a couple of days but no luck, I am not getting it configured right what it does is just to display an icon instead of an image gallery, I am getting no errors in firefox/firebug console so assuming that I am missing something which is not properly coded which I am unable to troubleshoot, therefore I will really really appreciate if you can kindly have a look at it.

I have created an html prototype for you with all the files required so you can test it yourself and rectify the code.

I am unable to attaché the tarball as it exceeds the permitted size, therefore please download it from :

http://tonyalepski.heliohost.org/test.tar.gz

The way its supposed to work is linked below :

https://0.s3.envato.com/files/17654472/content/index_playlistRightInside.html and check out the MISTIQUE_KEN BURNS category.

In my case I have just one category.

I am pretty sure you will get it to work in minutes !!!

Many many thanks JAKE !!

Tonya

Ken Burns Caption Slider - I want to play local video files with this jquery plugin
[2Replies]
- 04-Sep-2014 09:31 AM
- Forum: Using jQuery Plugins
Hi JAKE,

I am trying to play local video files on my server using the subject plugin but cannot get it to work, it starts downloading the video files instead of playing them, here is the code I am using to play local files :
1.                     <li data-transition="fade" data-startalign="center,top" data-zoom="in" data-zoomfact="1.6" data-endAlign="center,bottom" data-panduration="12" data-colortransition="4">
                          <img alt="" src="$dir/$image" data-bw="$dir/$blur" data-thumb="$dir/$thumb" data-thumb_bw="$dir/$thumb2">
                              <div class="video_container">
                                  <div class="video_container_wrap">
                                      <iframe class="video_clip" src="http://192.168.56.105/nwind/cgi-bin/$dir/$movie" height="320" width="569" type=""video/mp4"></iframe>
                                      <h2>$name</h2>
                                      <p>
                                          <strong>$description</strong>.
                                      </p>
                                      <div class="close"></div>
                                  </div>
                              </div>
                              <div class="creative_layer">
                                  <div class="caption_white wiperight" style="top:140px;left:180px;">$name</div>
                                  <div class="caption_transparent wipedown" style="top:220px;left:40px;">$description</div>
                                  <div class="caption_transparent minicap wipeup" style="top:300;left:75px;">Click the play button</div>
                              </div>
                      </li>
Here is the demo and code at : http://www.dreamtemplate.com/dreamcodes/documentation/sliders.html#prettyPhoto

It does not like the iframe tag, I have tried using video and embed tags as well does not work with it, since it plays the videos from youtube and vimeo, we should also be able to play the local vides - As its a jquery stuff I think you would have the better answer !!

Thank you very much !!

Tonay

Need assistance in getting a jauery plugin working
[3Replies]
- 26-Aug-2014 04:16 PM
- Forum: Using jQuery Plugins
Hi JAKE,

I have got yet another cool jquery pagination plugin, the documentation of which is located at :

http://webdesign.tutsplus.com/tutorials/extreme-makeover-jpaginator-css3-edition--webdesign-3620

As usual I need to set the onPageClicked function and cannot figure out how as its different from others :

Here is how we are supposed to call it :
2. < script type = "text/javascript" >
  
  // Initial call
  
  $(document).ready(function(){
  
  
  
       $("#pagination").jPaginator({
  
           nbPages:64,
  
           marginPx:5,
  
           length:8,
  
           overBtnLeft:'#over_backward',
  
           overBtnRight:'#over_forward',
  
           maxBtnLeft:'#max_backward',
  
           maxBtnRight:'#max_forward',
  
           onPageClicked: function(a,num) {
  
               $("#page").html("Page "+num);
  
           }
  
       });
  
  
  
  });
  
  
  
  </ script >
And I need to set it as under :
2. script type="text/javascript">
3. // Initial call
4. \$(document).ready(function(){
6. \$("#pagination").jPaginator({
7. nbPages:$lastpage,
8. marginPx:5,
9. length:8,
10. overBtnLeft:'#over_backward',
11. overBtnRight:'#over_forward',
12. maxBtnLeft:'#max_backward',
13. maxBtnRight:'#max_forward',
14. onPageClicked: function(a,num) {
15. ("vieword2.pl?").html("Page="+$page);
16. }
17. });
19. });
21. </script>
I am not sure what ".html" does there in between, but my loading page url should be like vieworde2.pl?page=$page where $page is the page number variable for example clicking on no.2 on the pagination counter will load url vieword2.pl?page=2
Your help would be appreciated !!

Many many thanks !!!

Tonya.

FileTree - I want to be able to download files shown in the File Tree
[2Replies]
- 12-Aug-2014 03:42 PM
- Forum: Using jQuery Plugins
Hi JAKE,

I have downloaded a File Tree plugin, the links for which are as under :

http://www.abeautifulsite.net/blog/2008/03/jquery-file-tree/

http://labs.abeautifulsite.net/archived/jquery-fileTree/demo/

What I want is to be able to download the file by clicking on it as shown in the picture attached.

According to the documentation is says :

QUOTE

When a file is selected, jQuery File Tree passes the filename back as a string. The easiest way to capture and handle this is by using an anonymous function. If you want to pass the selected filename to a function you create called openFile() , your code will look like this:
```
      
         
            copy
         
      
      
         
            text
         
      
      
         
            pop-up
         
      
   
```
```
 function openFile(file) {
    // do something with file
}
 
$(document).ready( function() {
    $('#container_id').fileTree({ [options] }, function(file) {
        openFile(file);
    });
});
```
UNQUOTE

What I am doing right now is as follows which opens an alert showing location and name of the file I want to change it download :

$('#fileTreeDemo_3').fileTree({ root: '/var/www/html/reports/', script: 'jqueryFileTree.php', folderEvent: 'click', expandSpeed: 750, collapseSpeed: 750, expandEasing: 'easeOutBounce', collapseEasing: 'easeOutBounce', loadMessage: 'Loading...' }, function(file) { alert(file); });

I am sure you can do that - PLEASE help !!!

Thanks JAKE !!

Rgds.

Tonya
Attachments
- treeview.jpg
  
  Size: 57.65 KB Downloads: 347

Need a simple function to store/get a variable/element value to/from a cookie
[16Replies]
- 08-Aug-2014 02:23 PM
- Forum: Using jQuery
Hi,

I have a jquiry/javascript the first line of which is :

document.writeln('<div class="dc-rnav"><a href="javascript:history.go(-1)" title="Go Back">Go Back</a> | <a href="login.pl" title="This will log you out">Log out</a> | <a href="" title="" >$user</a></div>');

You would have spoted $user which does not fit there, therefore what I would like to do is to add a function to this scrip which which will get the user name from the cookie as long as the session last.

I believe it will be done in two parts, initially when a user logs in, the $user value will be passed to a javascript from within the html through perl script like :

my $user = $q->param('user'); $user = "JAKE"; ........ then the javascript function or whatever which will read the $user variable and save it to a cookie under <script> tag within html like : <script> document.cookie = 'ppkcookie=logincookie; user=$user path=/' </script>

Then the function which will read the $user value from cookie which will be in the script I mentioned above which will be called throughout my application so I don't have to pass the $user value around to each and every script within my application.

function readCookie(name) { get the user name from the cookie pass it to the following line : document.writeln('<div class="dc-rnav"><a href="javascript:history.go(-1)" title="Go Back">Go Back</a> | <a href="login.pl" title="This will log you out">Log out</a> | <a href="" title="" >$user</a></div>'); }

I apologize for my English which is not upto the standard. But I hope I have made my point clear.

Many thanks for your help !!

Tonya

How to call onChange() function in the jquery plugin
[7Replies]
- 06-Aug-2014 03:47 AM
- Forum: Using jQuery Plugins
Hi,

I have a jquery pagination plug in in which I need to call the subject function, I have tried it as follows :

                <script src="js/jquery.paginate.js" type="text/javascript"></script>                 <script type="text/javascript">                 \$(function() {                                                 \$("#demo2").paginate({                                 count           : $pagenum,                                 start           : $current_page,                                 onChange        : function() {return true;}{                                      \$('vieword2.pl?page=')};,                                 display         : 28,                                 border                  : false,                                 text_color              : '#888',                                 background_color        : '#EEE',                                       text_hover_color        : 'black',                                 background_hover_color : '#CFCFCF'                         });                         });                 </script>

But it does not work, here is the relevant code piece from the plugin:

        $.fn.paginate.defaults = { count : 5, start : 12, display : 5, border : true, border_color : '#fff', text_color : '#8cc59d', background_color : 'black', border_hover_color : '#fff', text_hover_color : '#fff', background_hover_color : '#fff', rotate : true, images : true, mouse : 'slide', onChange : function(){return true;} };

The help on the web site says :

onChange : The callback function when clicking on a page. As argument the number of the page clicked can be used.

Here is the link to the website where I downloaded it from : http://tympanus.net/codrops/2009/11/17/jpaginate-a-fancy-jquery-pagination-plugin/

Please help,

Many thanks !!

Tonya

How to use the jQuery Cookie Plugin to make jQuery remember the page number after page reload
[0Replies]
- 01-Aug-2014 08:55 AM
- Forum: Using jQuery Plugins
Hi,
I am trying to configure a jquery plugin/script for pagination to use with my perl application, the problem is on page reload or refresh the pagination slider returns to 1 because there is no functionality in the script to remember the position of slider on page reload, so as to make slider to remember its position after page reload we will have to add some routines to the javascript using a jquery cookie plugin.

Here is the script

<code>

(function($){

var methods = {
  init: function(options) {
   var o = $.extend({
    items: 1,
    itemsOnPage: 1,
    pages: 0,
    displayedPages: 5,
    edges: 2,
    currentPage: 1,
    hrefTextPrefix: '?page=',
    hrefTextSuffix: '',
    prevText: 'Prev',
    nextText: 'Next',
    ellipseText: '…',
    cssStyle: 'light-theme',
    labelMap: [],
    selectOnClick: true,
    onPageClick: function(pageNumber, event) {
     // Callback triggered when a page is clicked
     // Page number is given as an optional parameter
    },
    onInit: function() {
     // Callback triggered immediately after initialization
    }
   }, options || {});

   var self = this;

   o.pages = o.pages ? o.pages : Math.ceil(o.items / o.itemsOnPage) ? Math.ceil(o.items / o.itemsOnPage) : 1;
   o.currentPage = o.currentPage - 1;
   o.halfDisplayed = o.displayedPages / 2;

   this.each(function() {
    self.addClass(o.cssStyle + ' simple-pagination').data('pagination', o);
    methods._draw.call(self);
   });

   o.onInit();

   return this;
  },

  selectPage: function(page) {
   methods._selectPage.call(this, page - 1);
   return this;
  },

  prevPage: function() {
   var o = this.data('pagination');
   if (o.currentPage > 0) {
    methods._selectPage.call(this, o.currentPage - 1);
   }
   return this;
  },

  nextPage: function() {
   var o = this.data('pagination');
   if (o.currentPage < o.pages - 1) {
    methods._selectPage.call(this, o.currentPage + 1);
   }
   return this;
  },

  getPagesCount: function() {
   return this.data('pagination').pages;
  },

  getCurrentPage: function () {
   return this.data('pagination').currentPage + 1;
  },

  destroy: function(){
   this.empty();
   return this;
  },

  drawPage: function (page) {
   var o = this.data('pagination');
   o.currentPage = page - 1;
   this.data('pagination', o);
   methods._draw.call(this);
   return this;
  },

  redraw: function(){
   methods._draw.call(this);
   return this;
  },

  disable: function(){
   var o = this.data('pagination');
   o.disabled = true;
   this.data('pagination', o);
   methods._draw.call(this);
   return this;
  },

  enable: function(){
   var o = this.data('pagination');
   o.disabled = false;
   this.data('pagination', o);
   methods._draw.call(this);
   return this;
  },

  updateItems: function (newItems) {
   var o = this.data('pagination');
   o.items = newItems;
   o.pages = methods._getPages(o);
   this.data('pagination', o);
   methods._draw.call(this);
  },

  updateItemsOnPage: function (itemsOnPage) {
   var o = this.data('pagination');
   o.itemsOnPage = itemsOnPage;
   o.pages = methods._getPages(o);
   this.data('pagination', o);
   methods._selectPage.call(this, 0);
   return this;
  },

  _draw: function() {
   var o = this.data('pagination'),
    interval = methods._getInterval(o),
    i,
    tagName;

   methods.destroy.call(this);

   tagName = (typeof this.prop === 'function') ? this.prop('tagName') : this.attr('tagName');

   var $panel = tagName === 'UL' ? this : $('<ul></ul>').appendTo(this);

   // Generate Prev link
   if (o.prevText) {
    methods._appendItem.call(this, o.currentPage - 1, {text: o.prevText, classes: 'prev'});
   }

   // Generate start edges
   if (interval.start > 0 && o.edges > 0) {
    var end = Math.min(o.edges, interval.start);
    for (i = 0; i < end; i++) {
     methods._appendItem.call(this, i);
    }
    if (o.edges < interval.start && (interval.start - o.edges != 1)) {
     $panel.append('<li class="disabled"><span class="ellipse">' + o.ellipseText + '</span></li>');
    } else if (interval.start - o.edges == 1) {
     methods._appendItem.call(this, o.edges);
    }
   }

   // Generate interval links
   for (i = interval.start; i < interval.end; i++) {
    methods._appendItem.call(this, i);
   }

   // Generate end edges
   if (interval.end < o.pages && o.edges > 0) {
    if (o.pages - o.edges > interval.end && (o.pages - o.edges - interval.end != 1)) {
     $panel.append('<li class="disabled"><span class="ellipse">' + o.ellipseText + '</span></li>');
    } else if (o.pages - o.edges - interval.end == 1) {
     methods._appendItem.call(this, interval.end++);
    }
    var begin = Math.max(o.pages - o.edges, interval.end);
    for (i = begin; i < o.pages; i++) {
     methods._appendItem.call(this, i);
    }
   }

   // Generate Next link
   if (o.nextText) {
    methods._appendItem.call(this, o.currentPage + 1, {text: o.nextText, classes: 'next'});
   }
  },

  _getPages: function(o) {
   var pages = Math.ceil(o.items / o.itemsOnPage);
   return pages || 1;
  },

  _getInterval: function(o) {
   return {
    start: Math.ceil(o.currentPage > o.halfDisplayed ? Math.max(Math.min(o.currentPage - o.halfDisplayed, (o.pages - o.displayedPages)), 0) : 0),
    end: Math.ceil(o.currentPage > o.halfDisplayed ? Math.min(o.currentPage + o.halfDisplayed, o.pages) : Math.min(o.displayedPages, o.pages))
   };
  },

  _appendItem: function(pageIndex, opts) {
   var self = this, options, $link, o = self.data('pagination'), $linkWrapper = $('<li></li>'), $ul = self.find('ul');

   pageIndex = pageIndex < 0 ? 0 : (pageIndex < o.pages ? pageIndex : o.pages - 1);

   options = {
    text: pageIndex + 1,
    classes: ''
   };

   if (o.labelMap.length && o.labelMap[pageIndex]) {
    options.text = o.labelMap[pageIndex];
   }

   options = $.extend(options, opts || {});

   if (pageIndex == o.currentPage || o.disabled) {
    if (o.disabled) {
     $linkWrapper.addClass('disabled');
    } else {
     $linkWrapper.addClass('active');
    }
    $link = $('<span class="current">' + (options.text) + '</span>');
   } else {
    $link = $('<a href="' + o.hrefTextPrefix + (pageIndex + 1) + o.hrefTextSuffix + '" class="page-link">' + (options.text) + '</a>');
    $link.click(function(event){
     return methods._selectPage.call(self, pageIndex, event);
    });
   }

   if (options.classes) {
    $link.addClass(options.classes);
   }

   $linkWrapper.append($link);

   if ($ul.length) {
    $ul.append($linkWrapper);
   } else {
    self.append($linkWrapper);
   }
  },

  _selectPage: function(pageIndex, event) {
   var o = this.data('pagination');
   o.currentPage = pageIndex;
   if (o.selectOnClick) {
    methods._draw.call(this);
   }
   return o.onPageClick(pageIndex + 1, event);
  }

};

$.fn.pagination = function(method) {

  // Method calling logic
  if (methods[method] && method.charAt(0) != '_') {
   return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
  } else if (typeof method === 'object' || !method) {
   return methods.init.apply(this, arguments);
  } else {
   $.error('Method ' + method + ' does not exist on jQuery.pagination');
  }

};

})(jQuery);

</code>

How to make jQuery remember the page number after page reload
[12Replies]
- 01-Aug-2014 06:23 AM
- Forum: Using jQuery Plugins
I am trying to configure a jquery plugin/script for pagination to use with my perl application, the problem is on page reload or refresh the pagination slider returns to 1 because there is no functionality in the script to remember the position of slider on page reload, so as to make slider to remember its position after page reload we will have to add some routines to the javascript using a jquery cookie plugin.

There is an example how to do that at: How to use the jQuery Cookie Plugin to make jQuery remember the animations after page reload but I don't know jquery therefore your help would be much appreciated.

Here is the script which I have download from http://www.htmldrive.net/items/show/1460/-simple-and-useful-jQuery-pagination-plugin

Many many thanks in advance.
<code> /** * simplePagination.js v1.6 * A simple jQuery pagination plugin. * http://flaviusmatis.github.com/simplePagination.js/ * * Copyright 2012, Flavius Matis * Released under the MIT license. * http://flaviusmatis.github.com/license.html */ (function($){ var methods = { init: function(options) { var o = $.extend({ items: 1, itemsOnPage: 1, pages: 0, displayedPages: 5, edges: 2, currentPage: 1, hrefTextPrefix: '?page=', hrefTextSuffix: '', prevText: 'Prev', nextText: 'Next', ellipseText: '…', cssStyle: 'light-theme', labelMap: [], selectOnClick: true, onPageClick: function(pageNumber, event) { // Callback triggered when a page is clicked // Page number is given as an optional parameter }, onInit: function() { // Callback triggered immediately after initialization } }, options || {}); var self = this; o.pages = o.pages ? o.pages : Math.ceil(o.items / o.itemsOnPage) ? Math.ceil(o.items / o.itemsOnPage) : 1; o.currentPage = o.currentPage - 1; o.halfDisplayed = o.displayedPages / 2; this.each(function() { self.addClass(o.cssStyle + ' simple-pagination').data('pagination', o); methods._draw.call(self); }); o.onInit(); return this; }, selectPage: function(page) { methods._selectPage.call(this, page - 1); return this; }, prevPage: function() { var o = this.data('pagination'); if (o.currentPage > 0) { methods._selectPage.call(this, o.currentPage - 1); } return this; }, nextPage: function() { var o = this.data('pagination'); if (o.currentPage < o.pages - 1) { methods._selectPage.call(this, o.currentPage + 1); } return this; }, getPagesCount: function() { return this.data('pagination').pages; }, getCurrentPage: function () { return this.data('pagination').currentPage + 1; }, destroy: function(){ this.empty(); return this; }, drawPage: function (page) { var o = this.data('pagination'); o.currentPage = page - 1; this.data('pagination', o); methods._draw.call(this); return this; }, redraw: function(){ methods._draw.call(this); return this; }, disable: function(){ var o = this.data('pagination'); o.disabled = true; this.data('pagination', o); methods._draw.call(this); return this; }, enable: function(){ var o = this.data('pagination'); o.disabled = false; this.data('pagination', o); methods._draw.call(this); return this; }, updateItems: function (newItems) { var o = this.data('pagination'); o.items = newItems; o.pages = methods._getPages(o); this.data('pagination', o); methods._draw.call(this); }, updateItemsOnPage: function (itemsOnPage) { var o = this.data('pagination'); o.itemsOnPage = itemsOnPage; o.pages = methods._getPages(o); this.data('pagination', o); methods._selectPage.call(this, 0); return this; }, _draw: function() { var o = this.data('pagination'), interval = methods._getInterval(o), i, tagName; methods.destroy.call(this); tagName = (typeof this.prop === 'function') ? this.prop('tagName') : this.attr('tagName'); var $panel = tagName === 'UL' ? this : $('<ul></ul>').appendTo(this); // Generate Prev link if (o.prevText) { methods._appendItem.call(this, o.currentPage - 1, {text: o.prevText, classes: 'prev'}); } // Generate start edges if (interval.start > 0 && o.edges > 0) { var end = Math.min(o.edges, interval.start); for (i = 0; i < end; i++) { methods._appendItem.call(this, i); } if (o.edges < interval.start && (interval.start - o.edges != 1)) { $panel.append('<li class="disabled"><span class="ellipse">' + o.ellipseText + '</span></li>'); } else if (interval.start - o.edges == 1) { methods._appendItem.call(this, o.edges); } } // Generate interval links for (i = interval.start; i < interval.end; i++) { methods._appendItem.call(this, i); } // Generate end edges if (interval.end < o.pages && o.edges > 0) { if (o.pages - o.edges > interval.end && (o.pages - o.edges - interval.end != 1)) { $panel.append('<li class="disabled"><span class="ellipse">' + o.ellipseText + '</span></li>'); } else if (o.pages - o.edges - interval.end == 1) { methods._appendItem.call(this, interval.end++); } var begin = Math.max(o.pages - o.edges, interval.end); for (i = begin; i < o.pages; i++) { methods._appendItem.call(this, i); } } // Generate Next link if (o.nextText) { methods._appendItem.call(this, o.currentPage + 1, {text: o.nextText, classes: 'next'}); } }, _getPages: function(o) { var pages = Math.ceil(o.items / o.itemsOnPage); return pages || 1; }, _getInterval: function(o) { return { start: Math.ceil(o.currentPage > o.halfDisplayed ? Math.max(Math.min(o.currentPage - o.halfDisplayed, (o.pages - o.displayedPages)), 0) : 0), end: Math.ceil(o.currentPage > o.halfDisplayed ? Math.min(o.currentPage + o.halfDisplayed, o.pages) : Math.min(o.displayedPages, o.pages)) }; }, _appendItem: function(pageIndex, opts) { var self = this, options, $link, o = self.data('pagination'), $linkWrapper = $('<li></li>'), $ul = self.find('ul'); pageIndex = pageIndex < 0 ? 0 : (pageIndex < o.pages ? pageIndex : o.pages - 1); options = { text: pageIndex + 1, classes: '' }; if (o.labelMap.length && o.labelMap[pageIndex]) { options.text = o.labelMap[pageIndex]; } options = $.extend(options, opts || {}); if (pageIndex == o.currentPage || o.disabled) { if (o.disabled) { $linkWrapper.addClass('disabled'); } else { $linkWrapper.addClass('active'); } $link = $('<span class="current">' + (options.text) + '</span>'); } else { $link = $('<a href="' + o.hrefTextPrefix + (pageIndex + 1) + o.hrefTextSuffix + '" class="page-link">' + (options.text) + '</a>'); $link.click(function(event){ return methods._selectPage.call(self, pageIndex, event); }); } if (options.classes) { $link.addClass(options.classes); } $linkWrapper.append($link); if ($ul.length) { $ul.append($linkWrapper); } else { self.append($linkWrapper); } }, _selectPage: function(pageIndex, event) { var o = this.data('pagination'); o.currentPage = pageIndex; if (o.selectOnClick) { methods._draw.call(this); } return o.onPageClick(pageIndex + 1, event); } }; $.fn.pagination = function(method) { // Method calling logic if (methods[method] && method.charAt(0) != '_') { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === 'object' || !method) { return methods.init.apply(this, arguments); } else { $.error('Method ' + method + ' does not exist on jQuery.pagination'); } }; })(jQuery); </code>

Response title

Attachments

jQuery Forum

Activity Trend