Search jQuery

jQuery Forum

Screen name:
frantzs

frantzs's Profile

8 Posts

7 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Randomize ul li content on page load
[2Replies]
- 20-Feb-2014 09:58 AM
- Forum: Using jQuery
I've tried to do this several times, and so far I can only get my content slide to randomize the order in which the slides are displayed to the user. What i mean by that is that it keeps the same order, but just displays them randomly. I actually need the ORDER of the slides randomized on page load. For example, I have a ul like so:
1. <ul class="rotator">
2. <li>Slide 1</li>
3. <li>Slide 2</li>
4. <li>Slide 3</li>
5. <li>Slide 4</li>
6. <li>Slide 5</li>
7. </ul>
And then a pager that is created on the fly below it that allows the user to go back and forth between slides
1. <div class="rotatorNavigation>
2. <a href="#" name="1">1</a>
3. <a href="#" name="2">2</a>
4. <a href="#" name="3">3</a>
5. <a href="#" name="4">4</a>
6. <a href="#" name="5">5</a>
7. </div>
I want the pager order to remain the same, as in 1-5, but the slides I want those to be random. So when you load the page, your order could be like 2,5,3,4,1 OR if you refresh again, your order could be 3,5,1,2,4 etc...
Right now, the jquery we have is like so:
2. /**
3. * Prepare a rotator
4. * @return null
5. */
6. (function($)
7. {
8. $.fn.prepRotator = function()
9. {
10. return this.each(function()
11. {
12. // Set the navigation
13. var count = $(this).children().length;
14. for (i = 1; i <= count; i++)
15. {
16. $(this).siblings('#rotatorNavigation').append("<a href='#' name='" + i + "'>" + i + "</a>");
17. $(this).children(':eq(' + (i-1) + ')').attr('name', i);
18. }
19. $(this).children().preload();
20. $(this).siblings('#rotatorNavigation').find('a:first').addClass('active');
23. // Set the rotation
24. function rotate()
25. {
27. if ($('.rotator li.active').next('li').length > 0)
28. $('.rotator li.active').next('li').showRotatorItem();
29. else
30. $('.rotator li:first').showRotatorItem();
31. globals.RotatorTimeout = setTimeout(function(){ rotate(); }, 5000);
32. }
33. globals.RotatorTimeout = setTimeout(function(){ rotate(); }, 5000);
36. // Set the buttons
37. $('#rotatorNavigation a').unbind('click').click(function()
38. {
39. $(".rotator").find("li[name='" + $(this).attr('name') + "']").showRotatorItem();
40. clearTimeout(globals.RotatorTimeout);
41. globals.RotatorTimeout = setTimeout(function(){ rotate(); }, 5000);
42. return false;
43. });
44. });
45. };
46. })(jQuery);
49. /**
50. * Show the given rotator item
51. * @return null
52. */
53. (function($)
54. {
55. $.fn.showRotatorItem = function()
56. {
57. return this.each(function()
58. {
59. $(this).siblings('.active').removeClass('active').fadeOut();
60. $(this).fadeIn().addClass('active');
61. $('#rotatorNavigation a.active').removeClass('active');
62. $('#rotatorNavigation').find("a[name='" + $(this).attr('name') + "']").addClass('active');
63. var num = Number($(this).attr('name'));
64. $('#rotatorNavigation span.triangle').animate(
65. {
66. left: $('#rotatorNavigation a.active').position().left + (num > 9 ? 14 : 11)
67. }, 'fast');
68. });
69. };
70. })(jQuery);
How would I randomize this?

Slide Out Menu loop
[1Reply]
- 12-Sep-2013 03:45 PM
- Forum: Using jQuery
I think maybe loop is the wrong term, but I am trying to cycle through a series of sliding divs, based on what link is clicked inside the divs. If you click the following path:

Menu button (which I have to click twice for some reason)
More articles >
then the back << arrows at the top
and then try and click More articles > again it doesnt work, its like it doesnt reset..

here is a fiddle with what I have so far.. any help would be great - as well as explanations so I can learn from this...
http://jsfiddle.net/j4N38/

Adding FadeIn/FadeOut to jQuery UI Tabs
[2Replies]
- 30-May-2013 03:32 PM
- Forum: Using jQuery UI
I feel like I've tried everything, but I'm not sure how to make my tab transition fade content in and out... Here is my code..
2. <script type="text/javascript">
3. jQuery(document).ready(function ($) {
4. $('.kb-home-sort').tabs();
5. });
6. </script>
And the HTML
2. <div class="kb-home-sort">
4. <ul class="kb-home-sort-nav">
5. <li><a href="#tabCat">SORT BY CATEGORY</a></li>
6. <li>   |   </li>
7. <li><a href="#tabRecent">SORT BY MOST RECENT</a></li>
8. </ul>
10. <div id="tabCat">
11. 
12. <?php
13. $categories = get_terms('section', 'orderby=name&order=DESC&hide_empty=1&exclude=60,59&showposts=5');
14. foreach( $categories as $category ):
15. ?>
16. <h3 class="kb-cat-title"><?php echo $category->name; // Prints the cat/taxonomy group title ?></h3>
17. <div class="kb-single-border"></div>
18. <?php
19. $posts = get_posts(array(
20. 'post_type' => 'knowledgebase',
21. 'taxonomy' => $category->taxonomy,
22. 'term' => $category->slug,
23. 'nopaging' => true,
24. ));
25. $count = 0;
26. foreach($posts as $post): ?>
28. <?php setup_postdata($post); //enables the_title(), the_content(), etc. without specifying a post ID
32. if ($count == 0) { ?>
33. <div class="kb-home-big">
34. <?php if (has_post_thumbnail() ) {
35. the_post_thumbnail('kb-home-thumb', array('class' => 'kb-home-thumb-small'));
36. }?>
37. <h2><?php the_title();?></h2>
38. <span class="theExcerpt"><?php echo excerpt(8);?></span>
39. <a class="link" href="<?php the_permalink();?>">Read More</a>
40. </div>
41. <?php } else { ?>
42. <div class="kb-home-list">
43. <h2><a href="<?php the_permalink();?>"><?php the_title();?></a></h2>
44. </div>
46. <?php } ?>
47. <?php $count ++; endforeach; ?>
48. <div class="clear"></div>
49. <?php endforeach; ?>
50. </div>
54. <div id="tabRecent">
55. 
56. <ul class="post-list">
57. <?php query_posts('post_type=knowledgebase&showposts=10&offset=7&orderby=date'); ?>
58. <?php while (have_posts()) : the_post(); ?>
59. <li>
60. <div class="post-list-item">
61. <?php if (has_post_thumbnail() ) {
62. the_post_thumbnail('kb-home-thumb', array('class' => 'kb-home-thumb-small'));
63. }?>
64. <span class="theDate">
65. <?php the_time('F j, Y');?>
66. </span>
67. <div class="details">
68. <?php echo my_get_the_term_list( $post->ID, 'section', '', ', ', '', array(60) ); ?>
69. </div>
70. <h2><?php the_title();?></h2>
71. <div class="theExcerpt">
72. <?php echo excerpt(34);?>
73. </div>
74. <a class="link" href="<?php the_permalink();?>">Read More</a>
75. </div>
76. </li>
77. <?php endwhile;?>
78. </ul>
79. </div>
81. </div>

Toggle Tab Content on Click Issues
[1Reply]
- 16-Apr-2013 03:58 PM
- Forum: Using jQuery
Having some issues with my click/toggle function for my tabs. We are doing a "tabbed" navigation which also does "next/previous" to go back and fourth between the tabs. The tabs should open when clicked, and close when clicked - however they should remain open when you click on different tabs if you have one tab open already.

It seems really shotty and I think its because the function 1) I'm not great at jquery and 2) I think its getting confused when you click on a tab while a tab is already open. The page also seems to be dropping down to the "anchor" location. The link is here and my code for the tabs and next/prev and the toggle for the tab content is below
2. $('#tab-buttons-container').easytabs();
4. var $tabContainer = $('#tab-buttons-container'),
5. $tabs = $tabContainer.data('easytabs').tabs,
6. $tabPanels = $(".tab-buttons-panel")
7. totalSize = $tabPanels.length;
9. $tabPanels.each(function(i){
10. if (i != 0) {
11. prev = i - 1;
12. $(this).prepend("<a href='#' class='prev-tab btn success' rel='" + prev + "'>« Prev Page</a>");
13. } else {
14. $(this).prepend("<span class='prev-tab btn'>« Prev Page</span>");
15. }
16. if (i+1 != totalSize) {
17. next = i + 1;
18. $(this).prepend("<a href='#' class='next-tab btn success' rel='" + next + "'>Next Page &raquo</a>");
19. } else {
20. $(this).prepend("<span class='next-tab btn'>Next Page &raquo</span>");
21. }
22. });
24. $('.next-tab, .prev-tab').click(function() {
25. var i = parseInt($(this).attr('rel'));
26. var tabSelector = $tabs.children('a:eq(' + i + ')').attr('href');
27. $tabContainer.easytabs('select', tabSelector);
28. return false;
29. });
31. $('.click').click(function() {
32. $('.panel-container').toggle('fast', function() {
33. // Animation complete.
34. });
35. });
Any help would be AMAZING!

Adding a Next/Prev that moves images in a "carousel" fasion.
[0Replies]
- 24-Jan-2013 09:15 AM
- Forum: Using jQuery
We have a lightbox slider on our website, and it contains a little carousel at the bottom with clickable images. When you click one, it displays larger in the center of the lightbox.

I'm trying to add next/prev actions to the thumbnail carousel slider, so that a user can click next, and see 5 more thumbnails they could potentially click on.. if that makes sense.

Right now the script tied to the carousel is
2. /**
3. * Set the gallery thumbnails
4. */
5. (function($)
6. {
7. $.fn.setThumbnailData = function( gallery_id, photo_id )
8. {
9. // The data we're working with
10. var data = suprflickr[gallery_id].photos;
13. // The string to set
14. var str = "";
15. for ( p in data )
16. {
17. if (photo_id == data[p].id)
18. str += "<a href='#' gallery_id='" + gallery_id + "' photo_id='" + data[p].id + "' class='thumb current'>";
19. else
20. str += "<a href='#' gallery_id='" + gallery_id + "' photo_id='" + data[p].id + "' class='thumb'>";
21. str += "<span class='img'><img src='" + data[p].url_sq + "' /></span>";
22. str += "</a>";
23. }
26. // Set the content
27. $(this).find('.slider').html( str );
30. // Set the actions on the thumbnails
31. $(this).find('.thumb').unbind('click').click(function()
32. {
33. var t = $('#suprflickrGallery .list .content a[photo_id="' + $(this).attr('photo_id') + '"]');
34. $('#suprflickrLB').setLightboxData($(t), 'fade');
35. $('#suprflickrGallery .list .content a.current').removeClass('current');
36. $(this).addClass('current');
37. $(t).addClass('current');
38. $(this).parent().setThumbnailSliderPosition();
39. return false;
40. });
43. // Set the width of the thumbnail container
44. $(this).find('.slider').setThumbnailSliderPosition();
45. }
46. })(jQuery);
You can see the example here : http://d.perich.com/grand-hotel/2013/index.php/named-rooms#72157623652852736&7160479178
Any help would be greatly appreciated.

mobile swiping carousel images on gallery
[0Replies]
- 04-Jan-2013 10:24 AM
- Forum: jQuery Mobile
I have a hopefully quick question about using the mobile swipe function for mobile jquery. We have a gallery here http://www.grandhotel.com/the-hotel#72157623428872151&7142284101 and I've got it so that the larger image swipes left and right, BUT I also want those thumbnail images to be "swipeable" too.. the code that controls the thumbnails is:
1. $(this).find('.thumb').unbind('click').click(function()
2. {
3. var t = $('#suprflickrGallery .list .content a[photo_id="' + $(this).attr('photo_id') + '"]');
4. $('#suprflickrLB').setLightboxData($(t), 'fade');
5. $('#suprflickrGallery .list .content a.current').removeClass('current');
6. $(this).addClass('current');
7. $(t).addClass('current');
8. $(this).parent().setThumbnailSliderPosition();
9. return false;
10. });
When a thumbnail is clicked on the larger version of that photo becomes the "current" photo and = is faded in/out etc.. you can see via the link about how it all works.

I know I need to add a "swipeleft" and "swiperight" in there, but the code was developed by a pervious developer and I can't seem to get it in the right order think.
Any help would be great.

adding swipe event to a click event
[4Replies]
- 18-Dec-2012 08:45 AM
- Forum: Using jQuery
I'm trying to achieve the same effect that a click gives a person on a computer, but do it ALSO via swiping on an ipad/iphone. This is currently what my function looks like (this is for an image slider)

// Set the previous and next buttons
$('#suprflickrLB .lbImage .lbLeft').bind('click').click(function()
{
$('#suprflickrLB').setLightboxData( 'prev', 'fade' );
return false;
});
$('#suprflickrLB .lbImage .lbRight').bind('click').click(function()
{
$('#suprflickrLB').setLightboxData( 'next', 'fade' );
return false;
});

I basically want people to be able to "swipe" their finger across the screen and have the same transition happen as "click" if that makes sense. I've tried a few jquery plugins to achieve the concept, but I'm not very fluent with jquery so I can' t seem to get this working.

Suggestions? Thank you in advance

jQuery slider issues on viewport resize
[0Replies]
- 23-Oct-2012 11:12 AM
- Forum: Getting Started
I hopefully have a simple question. We have a jquery slider, which is more fo a carousel, that consumes the entire height/width of the page. The slider works great on page load, however, when you adjust your viewport's height after the first initial slide, the div containing the content moves out of place and the slide arrows move around.

I'm wondering if there is a simple solution to this to have the sizes all adjust on page load AND window resize..

javascript file is here http://pastie.org/5103964
example is here http://d.perich.com/ternes/12714/

Any help would be greatly appreciated!

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend