Search jQuery

jQuery Forum

Screen name:
mauricederegt

mauricederegt's Profile

30 Posts

46 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Adding a DIV, but with flip animation (partly working)
[6Replies]
- 22-Feb-2017 07:45 AM
- Forum: Using jQuery
Hi all,
Please see this fiddle: https://jsfiddle.net/8rou42z0/
I am adding a div using jquery. This is the front side of a card (in the original code this is randomly generated so you never know what card you will get). The back side is already there. Now when adding this front card DIV by clicking the turned card, I want it to flip over from the back side to this newly added front side.
The problem atm is that it shows the new DIV immediately and then flips it away. I want it the other way around ofcourse. What am I doing wrong here?

Thanks

Upgrading code from jQuery UI 1.7 to 1.8 failing

[2Replies]

29-Aug-2016 06:41 AM
Forum: Using jQuery UI

I have some old jquery (UI) code that I want to upgrade to todays standards. Since my code was written for jQuery UI 1.7.3 I've decided to upgrade the code release by release. A release list is found here: https://jqueryui.com/upgrade-guide/

So if I open 1.8 Upgrade Guide I can see what was changed. So far so good. As far as I can see, the following changes apply to my code:

Renamed _init() to _create()
Renamed _setData() to _setOption()
Removed _getData() since it should never be overridden
$.widget() now accepts a base widget to extend as the second parameter; defaults to $.Widget

Unfortunately I am not sure what to do with _getData(). Must I replace this with _Option or _getOption?. This is not clear in the guide.

Nevertheless, changing my code results in a nonworking application. I hope someone can help me out.

This is (partly) my old code:

_init: function () {
      var index = this.options.index;
      var num_ranks = this._RANKS.length;
      var suit = parseInt(index/num_ranks);
      this._setData('suit', suit);
      this._setData('rank', index - (suit * num_ranks));
      this.element.addClass('container')
               .append('<div class="downturned">');
    },
    _suit: function () { return this._getData('suit'); },
    _rank: function () { return this._getData('rank'); },

And further in the code:

   $.widget('ui.card', Card); //Create the widget
   $ui.card.getter = "is_downtunred";

The above I've changed (using the guide) to:

_create: function () {
      var index = this.options.index;
      var num_ranks = this._RANKS.length;
      var suit = parseInt(index/num_ranks);
      this._setOption('suit', suit);
      this._setOption('rank', index - (suit * num_ranks));
      this.element.addClass('container')
               .append('<div class="downturned">');
    },
    _suit: function () { return this._getOption('suit'); },
    _rank: function () { return this._getOption('rank'); },

And further in the code (did not change anything here):

   $.widget('ui.card', Card); //Create the widget
   $ui.card.getter = "is_downtunred";

But this brakes the application. Anyone knows why? What am I missing?

Thanks for the help

Using .animate with :lt() Selector
[1Reply]
- 18-Dec-2015 08:11 AM
- Forum: Getting Started
Hi all,

I have the following working code which is executed onclick:
1. $waste.append($stock
2. .children('.container:lt(3)')
3. .css( 'left', function(i) {return ['0rem', '2rem', '4rem'][i];})
4. );
It shows 3 div's positioned 0, 2 and 4 rem from a left div border. This all shows up correct.

BUT....I don't want these 3 DIVs just to appear on their given location, I want to move them to that location. How to do this? I've tried things like:
1. $waste.append($stock
2. .children('.container:lt(3)')
3. .animate( left: function(i) {return ['0rem', '2rem', '4rem'][i];}, 200)
4. );
But this doesn't seem to work. Anyone has an idea how to achieve this?

Thanks a lot

Disable draggable for each element using :lt(3) Selector

[6Replies]

04-Nov-2015 04:03 AM
Forum: Getting Started

Hi,

I have the following working code:

$stock.click(function () {
    $waste.append($stock.children('.container:lt(3)').card('upturn').droppable('disable').css( "left", function(i) {return ["0rem", "2rem", "4rem"][i];}) ); //3 divs
  });

This code adds several classes to 3 div's, except the for the css. Each div gets a different left property using:

.css( "left", function(i) {return ["0rem", "2rem", "4rem"][i];})

This all works, but I also want to disable the draggable option for the first 2 div's.
I've tried things like (1):
.draggable('disable', function(i) {return ["true", "true", "false"][i];})
and (2)
.draggable(function(i) {return ['disable', 'disable', 'enable'][i];})
but try (1) disables all the 3 divs, not just the first 2 and try (2) doesn't work at all.
How can I achieve this?
Thanks a lot

positionLeft = $(this).css('left'); returns pixels instead of rem
[3Replies]
- 28-Oct-2015 11:49 AM
- Forum: Getting Started
Hi,

I have the a div with following CSS:
1. style =" z-index: 3; left: 12rem;
With jQuery I want to grab the left value. I am using this code for it:
1. positionLeft = $(this).css('left');
But this returns the pixel value (144px) instead of the original 12rem
What can I do to get the 12rem instead of the 144px I get returned now?

Thanks

.onclick turn 3 cards (divs) instead of 1
[11Replies]
- 19-Oct-2015 06:14 PM
- Forum: Getting Started
Hi all,

I am trying to make a solitaire like game. When I click the cards (read: divs) that are stacked on the deck pile, the top card will turn and move to the left. This all works great. I am using the following code:
1. var z = 1;
2. $('#deck .card.flipped').on('click', function () {
3. if (!$(this).hasClass('dropped')) {
4. $('.card').removeClass('ui-front');
5. $(this)
6. .addClass('ui-front')
7. .addClass('on-discard-pile')
8. .addClass('dropped')
9. .css({'z-index': z++})
10. .animate({left: '8rem'}, 200)
11. .draggable({ disabled: false})
12. .removeClass('flipped');
14. if (!$(this).is(':first-child')) {
15. $('.card').removeClass('under-card');
16. $(this).next().addClass('under-card');
17. } else {
18. $('.card').removeClass('under-card');
19. }
20. }
21. });
Now I want not to turn 1 card from the deck when I click it, but the top 3 cards. Also the first top card will move 8rem to the left (using .animate({left: '8rem'}, 200) ) but the second card should move 10rem to the left en the third and last card 12rem

How can I do this?

I have tried :lt() and stuff but can't get it working

See my fiddle: http://jsfiddle.net/hy2dvL1u/35/

Can't drag dynamically added DIV

[4Replies]

02-Feb-2015 04:02 PM
Forum: Using jQuery UI

I have a DIV with id: TEST that I can drag using jQuery UI. All works, but as soon as I remove it and load the DIV into the HTML dynamically (well to specify more: using SSE to load the DIV into the HTML), the DIV can't be dragged. This is because the jQuery is loaded before the DIV is. How to fix this? Since I use SSE, the DIV is loaded several times over a period of time and must stay draggable.

The DIV looks like this in the TXT file (which is loaded into the HTML)

<div id="TEST" class="chatmsg" style="left: 200px; top: 200px;"><b>Bami</b>: Pangang<br/></div>

This DIV (with ID: TEST) is loaded into another DIV called dragZone

<div id="dragZone" name="dragZone"> [div TEST is loaded here] </div>

The jquery code in the HTML:

 $(function() {
      $( "#TEST" ).draggable({ 
         containment: "parent"             
      }).css({'cursor': 'all-scroll', 'z-index': '5'});
 });

The JS code that loads the SSE (which pushes the content of txt file everytime it changes):

//HTML5 SSE(Server Sent Event) initilization
     this.initSevr=function(){
          sevr = new EventSource('test.php');
          sevr.onmessage = function(e){ 
              if(oldata!=e.data){
                  dragZone.innerHTML+=e.data;
                  oldata = e.data;
              }
          };     
     };
So how can I drag the DIV again everytime the DIV is "pushed" into the HTML?

I've tried putting the jquery part into the SSE part, but that had no effect

auto submit form when trigger/function fires
[0Replies]
- 25-Nov-2011 08:16 AM
- Forum: Using jQuery
Hi all,

I have the following working form:
1. <div id="player_won">
2. <form action="insert.php" method="post">
3. Firstname: <input type="text" name="firstname" />
4. Lastname: <input type="text" name="lastname" />
5. Score: <input type="text" name="score" />
6. <input type="submit" />
7. </form>
8. </div>
When clicking submit, it will submit the data to my database. All works great. The only downside is that it will show this insert.php file after a succesfull submit.

Now I also have the following trigger:
1. function gameWon(){
2. var $game_board = $("#game_board_container");
3. var $player_won = $("#player_won");
4. $player_won.show();
5. $game_board = $player_won = null;
6. };
When this happens, it will show the div where the form is in. Since all the fields are already pre-filled, I also want to submit the form at the same time, automaticly, without needing to press the submit button. (but still show the form/div ofcourse)

How to do this? In addition, I also don't want to be forwarded to the insert.php file. I just want the div to pop-up when triggert, submit the form at the same time, and do nothing else (The user can close the pop-up div himself if needed).

Hope you guys can help me out!

Kind regards,
Mauirce

after script integration/modification, mouse coordinates are a bit off
[2Replies]
- 25-Jun-2011 06:51 PM
- Forum: Using jQuery
Hi there,

I was using this script (which works perfectly) to show the mouse coordinates just above the mouse when clicked. I didn't want to use the .click to show the coordinates (or depend on a div area), but have this happen an a event (using .bind). I also included this code into a bigger js file.

This is the working code I put together (with some help):
1. $(function(){
2. var mousePos = [0, 0];
3. $(document).mouseover(function(e) {
4. mousePos = [e.pageX, e.pageY];
5. })
6. .bind('found_match', function() {
7. $('#status2')
8. .html(mousePos[0] + ', ' + mousePos[1])
9. .hide()
10. .css({
11. top: mousePos[1] -10,
12. left: mousePos[0] -20,
13. opacity: 1,
14. marginTop: 0
15. })
16. .show()
17. .stop()
18. .delay(200)
19. .animate({'marginTop':-75, opacity: 0},1000);
20. });
21. });
This works, just like the first code, but the div with the coordinates now shows randomly around, under or on top of the mouse and not just like the first code. For example, now with a match, the div appears just right of the mouse and sometimes under the mouse, or over it, it's random where it shows the div. It does however show it near the mouse, but never at the same position (lets say always above the mouse). I would expect the div to always show at the same position of the mouse itself. What is going wrong and how to fix this?

Many thanks

Where to put my missing .mouseover() to get the mouse position?
[3Replies]
- 23-Jun-2011 11:22 AM
- Forum: Using jQuery
Hi,

After some reading from this tutorial, I have the following partly working code:
1. $(document).bind ("found_match", function(e){
2. $('#status2').html(e.pageX +', '+ e.pageY);
3. });
When the event: "found_match happens", it should show the mouse coordinates in the div: "status2" , but it doesn't. Obviously because I am missing the .mousover(). But where to put this in my code to make it work so that it wil show the mouse coordinates on this event?

Many thanks

adding a score counting to my javascript
[1Reply]
- 26-Mar-2011 01:12 PM
- Forum: Using jQuery
Hi there,

I am trying to add some sort of score system to my script, but I have no idea how to get this working. I have two files 1php and 1 javascript (which gets implemented in the php file)

What do I need?
I want to add a score system to my script.

In the javascript there is this part of code:
1. function foundMatchingBlocks(event, params){
2. var $elements = params.elements;
3. $elements.remove();
This removes 2 blocks from a board. When this happens I want to ad +100 points to my score and show this updated score in my php file. (every time 2 blocks get removed it must update the score)

But how to do this? Score starts with 0 ofcourse. I think its very easy to put this in, but I was unsuccesfull

Kind regards,

How to remove jquery tools: apple overlay effect and use jquery's default fadeIn?
[2Replies]
- 13-Mar-2011 10:00 AM
- Forum: Using jQuery
Hi there,

I am currently using jQuery tools plugin to show a div on a triggerd event. Only I want to remove this plugin and use jQuery's default fadeIn function. Only I don't get it to work...

The jquery tools code:
2. $(document).bind("game_over.overlay", function(){
3. if ( $('#lost_overlay_trigger').data("overlay") ){
4. $('#lost_overlay_trigger').data("overlay").load();
5. } else {
6. $('#lost_overlay_trigger').overlay({
7. effect: 'apple',
8. load: true
9. });
10. }
11. });
14. $(document).bind("game_won.overlay", function(){
15. if ( $('#won_overlay_trigger').data("overlay") ){
16. $('#won_overlay_trigger').data("overlay").load();
17. } else {
18. $('#won_overlay_trigger').overlay({
19. effect: 'apple',
20. load: true
21. });
22. }
24. });
25. $("#game_over_shuffle").bind("click.overlay", closeOverlay);
26. $("a.again").bind("click", closeOverlay);
I have the following divs:
2. <div id="player_won_container" class="achievements">
3. <div id="player_won"></div>
4. <br />
5. <a class="again" href="#" onclick="return false">Click here to play again</a>
6. </div>
8. <div id="player_lost_container" class="achievements">
9. <div id="player_lost">
10. <h3>No more moves - GAME OVER</h3>
11. <a class="again" href="#" onclick="return false">Click here to play again</a> / <a id="game_over_shuffle" href="#" onclick="return false">Or shuffle the board</a>
12. </div>
13. </div>
14. <a href="#" rel="#player_won_container" id="won_overlay_trigger" onclick="return false"></a>
15. <a href="#" rel="#player_lost_container" id="lost_overlay_trigger" onclick="return false"></a>
So how to replace this so I wont need jQuery Tools anymore? I was playing around with:
1. $(".player_lost_container").fadeIn("slow");
But had no luck

Kind regards

use url to hide a div. Is this possible?
[11Replies]
- 10-Mar-2011 05:54 PM
- Forum: Using jQuery
Hi,

I have a php page (intro.php) that loads a div. This div is a menu and contains 2 links:

link 1: intro.php?layout=classic

link 2: intro.php

Currently when clicking these links, the page will refresh and the menu re-appears. This is not what I want. When clicking these menu links I want the page to load, but the menu div to be hidden. I think this is possible to use something in the link like: intro.php#hidediv???? And how to do this? Other solutions are also welcome!

I hope it's clear what I want.

Demo: http://www.mauricederegt.nl/test/intro.php

Code:
2. <!DOCTYPE html>
3. <html>
4. <head>
6. <style>
8. .menu{
9. position:absolute;
10. background:#pink;
11. left:150px;
12. top:150px;
13. width:760px;
14. height:500px;
15. }
17. .menuholder{
18. position:relative;
19. background:#green;
20. left:260px;
21. top:10px;
22. width:240px;
23. height:360px;
24. }
26. .menuholder ul{
27. list-style:none;
28. position:absolute;
29. right:0px;
30. top:0px;
31. margin-top:6px;
32. z-index:555555;
33. }
35. .menuholder ul li a{
36. width:230px;
37. float: right;
38. clear:both;
39. font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
40. text-decoration:none;
41. text-align: center;
42. text-transform:uppercase;
43. letter-spacing:-1px;
44. display:block;
45. height:52px;
46. line-height:52px;
47. background-color:#222;
48. margin:1px 3px 1px 0px;
49. opacity:0.7;
50. color:#f0f0f0;
51. font-size:20px;
52. border:2px solid #000;
53. outline:none;
54. text-shadow:-1px 1px 1px #000;
55. -moz-border-radius:10px 0px 0px 20px;
56. -webkit-border-top-left-radius:10px;
57. -webkit-border-bottom-left-radius:20px;
58. border-top-left-radius:10px;
59. border-top-right-radius:10px;
60. border-bottom-left-radius:20px;
61. border-bottom-right-radius:20px;
62. }
64. .menuholder ul li a:hover{
65. background-color:#black;
66. }
69. </style>
71. <script src="http://code.jquery.com/jquery-1.5.js"></script>
72. <script type="text/javascript">
73. 
74. $(document).ready(function() {
75. $("a.transition").click(function(event){
76. event.preventDefault();
77. linkLocation = this.href;
78. $("body").fadeOut(1000, redirectPage);
79. });
81. function redirectPage() {
82. window.location = linkLocation;
83. }
84. });
85. </script>
86. <style type="text/css">
88. .block img{
89. display: none;
90. }
91. </style>
93. <script type="text/javascript">
94. $(document).ready(function() {
95. $("body").css("display", "none");
97. $("body").fadeIn(2000);
99. $("a.transition").click(function(event){
100. event.preventDefault();
101. linkLocation = this.href;
102. $("body").fadeOut(1000, redirectPage);
103. });
105. function redirectPage() {
106. window.location = linkLocation;
107. }
108. });
109. </script>
110. </head>
111. <body onload="startstop();">
113. <div id="outer">
114. <div id="inner">
115. <div id="container">
116. <div id="game-start">
118. <div id="game_board_container">
120. </div>
123. </div>
124. </div>
125. </div>
126. </div>
128. <div class="menu" id="menu" >
129. <div class="menuholder">
130. <ul id="rotmenu">
131. <li>
132. <a href="intro.php?layout=classic" class="transition">With ? in the link</a>
133. </li>
134. <li>
135. <a href="intro.php" class="transition">Plain php link</a>
136. </li>
137. </ul>
138. </div>
139. </div>
141. </body>
142. </html>
Kind regards,

Maurice

Where to put the .fadeIn(); in this tab-script?
[3Replies]
- 05-Mar-2011 08:05 PM
- Forum: Using jQuery
Hi there,

Currently I am using this very simple tab-script. Took it from: http://jqueryfordesigners.com/jquery-tabs/

All works fine, but I want to use the .fadeIn(); option, so that (when I switch tabs) this goes nice and smooth. But where to put this .fadeIn();?

The code:
2. <script type="text/javascript">
3. 
4. $(function () {
5. var tabContainers = $('div.tabs > div');
6. tabContainers.hide().filter(':first').show();
8. $('div.tabs ul.tabNavigation a').click(function () {
9. tabContainers.hide();
10. tabContainers.filter(this.hash).show();
11. $('div.tabs ul.tabNavigation a').removeClass('selected');
12. $(this).addClass('selected');
13. return false;
14. }).filter(':first').click();
15. });
16. </script>
Thanks!

Kind regards

ps: if anyone knows how to reduce the gabs between the tabs, please let me know too :)

.animate() question, can this be with pause?

[2Replies]

28-Feb-2011 06:37 AM
Forum: Using jQuery

Hi there,

I have the following code form the api example:

<!DOCTYPE html> <html> <head> <style> div { position:absolute; background-color:#abc; left:50px; width:90px; height:90px; margin:5px; } </style> <script src="http://code.jquery.com/jquery-1.5.js"></script> </head> <body> <button id="left">&laquo;</button> <button id="right">&raquo;</button> <div class="block"></div> <script> $("#right").click(function(){ $(".block").animate({"left": "+=250px"}, "slow"); }); $("#left").click(function(){ $(".block").animate({"left": "-=250px"}, "slow"); }); </script> </body> </html>

This moves the div 250px to the right (or left) when clicking the button. Now is the following also possible?

I want it so that when I click the button the div moves to the right (250px) then waits for 5 sec and then moves another 250px to the right (whitout needing to click again). And how to do that?

Thanks

How to replace hex bg colors to use images instead in JavaScript?
[3Replies]
- 04-Jan-2011 06:06 AM
- Forum: Getting Started
Hi there,

I have the following code lines in my JavaScript code:
1. var colors = ["#F08", "#0B8", "#04F", "#FD0", "#808", "#F20"];
This sets the bg colors of my divs. This var is only used here:
2. function activateItems(callback) {
3. var itemsActivated = false;
4. for (var i=0;i<cfg.rows;++i) for (var j=0; j<cfg.cols; ++j) {
5. var item = itemAt(i,j);
6. if(!item) continue;
7. if (item.deleted>0) {
8. item.style.background=colors[Math.floor(Math.random()*colors.length)];
9. itemsActivated = true;
10. }
11. }
12. if (itemsActivated)
13. animateAppear(callback ? callback : findPatterns);
14. }
and here:
2. function animateDecor() {
3. if(state == 'init' || state == 'game') return;
4. for (var i=0;i<cfg.rows;++i) for (var j=0;j<cfg.cols;++j) {
5. var item = document.getElementById("decor_"+i+"_"+j)
6. if(!item) continue;
7. item.style.background=colors[Math.floor(Math.random()*colors.length)];
8. }
9. animation = setTimeout(animateDecor, 120);
10. }
This all works great, only I don't want to use hex (#) colors as background, I want to use images. These are located for example in: images/blue.png, images/red.png, etc. But how to pull this off? Tried several stuff including backgroundImage:url and so, but these where unsuccessful. I am just starting to learn this so some corrected code examples with comments will really help.

I think the solution is very simple, but I just don't see it (yet)...

Many thanks

need some help with .live()
[6Replies]
- 30-Sep-2010 06:38 PM
- Forum: Using jQuery
Hi all,

I have a script, but it's slowing down when using it. Inside the display(elem) function I'm binding event handlers using click(). These event handlers get installed multiple times, which will ultimately cause delays and animation bugs. To solve this I want to use live() to install event handlers at the very beginning, preventing the slow down.

The problem is, where do I put this .live() in the script. Tried some options myself, but this resulted in a non working script OR no change at all and the script kept delaying. I would appreciate if someone can show me where to put this .live() or have another (better?) solution to prevent the delays.

Any help is appreciated!

The script:
1. <script type="text/javascript">
  $(function() {
  /* the index of the current list element */
  var current = 1;
  
  /* function to iterate through all the list elements */
  var iterate = function(){
  var i = parseInt(current+1);
  var lis = $('#rotmenu').children('li').size();
  if(i>lis) i = 1;
  display($('#rotmenu li:nth-child('+i+')'));
  }
  
  /* Initially display the first one */
  display($('#rotmenu li:first'));
  
  /* if the User clicks on one list item, the auto slider stops */
  $('#rotmenu li').bind('click',function(e){
  display($(this));
  e.preventDefault();
  });
  
  /* displays each element associated to the "elem" list element */
  function display(elem){
  var $this = elem;
  var repeat = false;
  if(current == parseInt($this.index() + 1))
  repeat = true;
  
  /* slide in the current one (li-menu) */
  if(!repeat)
  $this.parent()
  .find('li:nth-child('+current+') a')
  .stop(true,true)
  .animate({'marginRight':'-20px'},300,function(){
  $(this).animate({'opacity':'0.7'},700);
  });
  
  current = parseInt($this.index() + 1);
  
  var elem = $('a',$this);
  
  /* slide out the clicked or next one */
  elem.stop(true,true).animate({'marginRight':'0px','opacity':'1.0'},300);
  
  /* the heading and description will slide out, change the content and slide back in */
  var info_elem = elem.next();
  $('#rot1 .heading').animate({'left':'-420px'}, 500,'easeOutCirc',function(){
  $('h1',$(this)).html(info_elem.find('.info_heading').html());
  $(this).animate({'left':'0px'},400,'easeInOutQuad');
  });
  
  $('#rot1 .description').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
  $('p',$(this)).html(info_elem.find('.info_description').html());
  $(this).animate({'bottom':'0px'},400,'easeInOutQuad');
  });
  
  /* open by click */
  $('#clickme').click(function() {
  $('#rot1 .close').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
  });
  
  $('#rot1 .menu').animate({'left':'600px'}, 500,'easeOutCirc',function(){
  $('h1',$(this)).html(info_elem.find('.info_heading').html());
  $(this).animate({'right':'0px'},400,'easeInOutQuad');
  });
  $('#rot1 .title').animate({'left':'-420px'}, 500,'easeOutCirc',function(){
  $('h1',$(this)).html(info_elem.find('.info_heading').html());
  $(this).animate({'left':'0px'},400,'easeInOutQuad');
  });
  $('#rot1 .content').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
  $('p',$(this)).html(info_elem.find('.info_description').html());
  $(this).animate({'bottom':'0px'},400,'easeInOutQuad');
  });
  
  });
  /* close by click */
  $('#2').click(function() {
  $('#rot1 .close').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
  $('p',$(this)).html(info_elem.find('.info_close').html());
  $(this).animate({'bottom':'0px'},400,'easeInOutQuad');
  });
  $('#rot1 .title').animate({'left':'-420px'}, 500,'easeOutCirc',function(){
  });
  $('#rot1 .menu').animate({'left':'850px'}, 500,'easeOutCirc',function(){
  });
  $('#rot1 .content').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
  });
  
  });
  }
  });
  </script>

HELP, my javascript is slowing down each time I use it!
[0Replies]
- 21-Sep-2010 04:36 PM
- Forum: Using jQuery
Hi,

Using jquery, I have some divs sliding into my web-page when clicking a link. When this is done, I can click another link so that the divs slide out again. This all works, but every time I press the links, it seems that the sliding time (time when the divs start to slide in) is delayed by every click/use.

For example:
Click link 1: divs slide in (1 sec delay before slide in starts)
pressing some other (child) divs to slide in out
Click link 2: divs slide out(1 sec delay before slide out starts)

then I click them again:
Click link 1: divs slide in (2 sec delay before slide in starts)
pressing some other (child) divs to slide in out
Click link 2: divs slide out(2 sec delay before slide out starts)

And again:
then I click them again:
Click link 1: divs slide in (3 sec delay before slide in starts)
pressing some other (child) divs to slide in out
Click link 2: divs slide out(3 sec delay before slide out starts)

etc etc

This ONLY happens when using the other sliding options in the divs (children) that slide in them selves (in the code I think thats this part: /* the heading and description will slide out, change the content and slide back in */). So only clicking the slide in/out links themselves does not slow down the script. As soon as I used another div sliding in to the already slided in div, the slowing begins.

Any ideas on how to fix this? I think the other slide in somehow counts/adds his delay to the other slide out/in div, but no idea how to prevent this.

This is the part of javascript that is handling the div slide in/out of the web-page:

/* open by click */
$('#clickme').click(function() {
$('#rot1 .close').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
});

$('#rot1 .menu').animate({'left':'600px'}, 500,'easeOutCirc',function(){
$('h1',$(this)).html(info_elem.find('.info_heading').html());
$(this).animate({'right':'0px'},400,'easeInOutQuad');
});
$('#rot1 .title').animate({'left':'-420px'}, 500,'easeOutCirc',function(){
$('h1',$(this)).html(info_elem.find('.info_heading').html());
$(this).animate({'left':'0px'},400,'easeInOutQuad');
});
$('#rot1 .content').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
$('p',$(this)).html(info_elem.find('.info_description').html());
$(this).animate({'bottom':'0px'},400,'easeInOutQuad');
});

});
/* close by click */
$('#2').click(function() {
$('#rot1 .close').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
$('p',$(this)).html(info_elem.find('.info_close').html());
$(this).animate({'bottom':'0px'},400,'easeInOutQuad');
});
$('#rot1 .title').animate({'left':'-420px'}, 500,'easeOutCirc',function(){
});
$('#rot1 .menu').animate({'left':'850px'}, 500,'easeOutCirc',function(){
});
$('#rot1 .content').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
});

});
This works perfect when not having the other animate option used. This is the complete js code:
<script type="text/javascript">
$(function() {
/* the index of the current list element */
var current = 1;

/* function to iterate through all the list elements */
var iterate = function(){
var i = parseInt(current+1);
var lis = $('#rotmenu').children('li').size();
if(i>lis) i = 1;
display($('#rotmenu li:nth-child('+i+')'));
}

/* Initially display the first one */
display($('#rotmenu li:first'));

/* if the User clicks on one list item, the auto slider stops */
$('#rotmenu li').bind('click',function(e){
display($(this));
e.preventDefault();
});

/* displays each element associated to the "elem" list element */
function display(elem){
var $this = elem;
var repeat = false;
if(current == parseInt($this.index() + 1))
repeat = true;

/* slide in the current one (li-menu) */
if(!repeat)
$this.parent()
.find('li:nth-child('+current+') a')
.stop(true,true)
.animate({'marginRight':'-20px'},300,function(){
$(this).animate({'opacity':'0.7'},700);
});

current = parseInt($this.index() + 1);

var elem = $('a',$this);

/* slide out the clicked or next one */
elem.stop(true,true).animate({'marginRight':'0px','opacity':'1.0'},300);

/* the heading and description will slide out, change the content and slide back in */
var info_elem = elem.next();
$('#rot1 .heading').animate({'left':'-420px'}, 500,'easeOutCirc',function(){
$('h1',$(this)).html(info_elem.find('.info_heading').html());
$(this).animate({'left':'0px'},400,'easeInOutQuad');
});

$('#rot1 .description').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
$('p',$(this)).html(info_elem.find('.info_description').html());
$(this).animate({'bottom':'0px'},400,'easeInOutQuad');
});

/* open by click */
$('#clickme').click(function() {
$('#rot1 .close').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
});

$('#rot1 .menu').animate({'left':'600px'}, 500,'easeOutCirc',function(){
$('h1',$(this)).html(info_elem.find('.info_heading').html());
$(this).animate({'right':'0px'},400,'easeInOutQuad');
});
$('#rot1 .title').animate({'left':'-420px'}, 500,'easeOutCirc',function(){
$('h1',$(this)).html(info_elem.find('.info_heading').html());
$(this).animate({'left':'0px'},400,'easeInOutQuad');
});
$('#rot1 .content').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
$('p',$(this)).html(info_elem.find('.info_description').html());
$(this).animate({'bottom':'0px'},400,'easeInOutQuad');
});

});
/* close by click */
$('#2').click(function() {
$('#rot1 .close').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
$('p',$(this)).html(info_elem.find('.info_close').html());
$(this).animate({'bottom':'0px'},400,'easeInOutQuad');
});
$('#rot1 .title').animate({'left':'-420px'}, 500,'easeOutCirc',function(){
});
$('#rot1 .menu').animate({'left':'850px'}, 500,'easeOutCirc',function(){
});
$('#rot1 .content').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
});

});

/* the image will fade out and another will fade in */
$('#rot1').prepend(
$('<img/>',{
style : 'opacity:0',
className : 'bg'
}).load(
function(){
$(this).animate({'opacity':'1'},600);
$('#rot1 img:first').next().animate({'opacity':'0'},700,function(){
$(this).remove();
});
}
).attr('src','images/'+info_elem.find('.info_image').html()).attr('width','800').attr('height','300')
);
}
});
</script>
Any ideas?? Why is my script (sliding) slowing down? I am just learning this stuff, so please bare with me.

Kind regards,

Maurice

a timer in jquery, how did this guy do this?
[1Reply]
- 02-Sep-2010 05:43 PM
- Forum: Using jQuery
Hi guys,

While surfing the net I've found this cool sudoku game. It also has a timer counting the seconds while you are playing the game. In this counter I am interested. How did he create it? I want a similar thing on my site with the same functionality.

Here is the game:
http://www.anti.ro/games/sudoku/

Click: play game and see the counter/timer in the lower left corner

Also when you press pause, the timer will stop. When clicking resume game, it will continue.

Well how did he do this and how can I get it something exactly like this? I've tried copying the js files but didn't got the timer to work.

Any help is appreciated

Kind regards,

Maurice

swap/toggle the clicked "divs" (works), but how to get this animated?
[0Replies]
- 22-Jun-2010 04:37 PM
- Forum: Using jQuery UI
Hi there,

I'll try to explain what I need.

Say we have the following 3 divs:

[1] [2] [3]

When I click div 2 it gets selected, then I click div 1 and they swap getting this:

[2] [1] [3]

The thing is, I want this animated so that the divs slide gently over each other to the new position. But how to do this?

Kind regards,

Some code parts:
1. var lastselected = false;
  gamearea.selectable({
  filter: '.jewel',
  selected: function(event, ui){
  var s = $(ui.selected);
  if ( lastselected && lastselected.neighbor(s) ) {
  s.exchange(lastselected);
  
  var m = [], match;
  m[0] = connectCheck(s);
  m[1] = connectCheck(lastselected);
  if ( m[0] || m[1] ) {
  grade.resetCombo();
  matchHandle(m);
  
  $('.ui-selected').removeClass('ui-selected');
  lastselected = false;
  return;
  } else {
  s.exchange(lastselected);
  }
  
  }
  $('.ui-selected').not(ui.selected).removeClass('ui-selected');
  lastselected = s;
  },
  unselected: function(event, ui) {
  if ( $('.ui-selecting').size() == 0)
  lastselected = false;
  }
  });
1. jQuery.fn.neighbor = function( another ) {
  var thispos = this.getPosition(),
  anotpos = another.getPosition(),
  displace = {'i': Math.abs( thispos.i - anotpos.i ),
  'j': Math.abs( thispos.j - anotpos.j )};
  if ( ( displace.i == 1 && displace.j == 0 ) || ( displace.i == 0 && displace.j == 1) )
  return true;
  return false;
  }
  
  jQuery.fn.changeColor = function ( color ) {
  return this.css({'background-color': colors[color]}).data('color',color);
  }
  
  jQuery.fn.exchange = function ( another ) {
  var p = this.parent(),
  j,
  jcolor = another.data('color');
  j = another.replaceWith(this)
  p.empty().append(j.data('color', jcolor));
  }
  
  jQuery.fn.getPosition = function( ) {
  return this.parent().data('position');
  }

How to make a button disabled after 3 clicks?
[3Replies]
- 06-Jun-2010 09:02 AM
- Forum: Using jQuery
Hi,

I have a button and I want it to be disabled (not clickable) after 3 clicks. Also the button text must change at each click.

Example:
Test (3) <- button with text
-click-
Test (2) <- button text changed
-click-
Test (1) <- button text changed
-click-
Test (0) <- button can't be clicked anymore (non active button now)

How to do this?

Thanks

how to prevent draggables to move through each other?
[16Replies]
- 05-Jun-2010 05:41 PM
- Forum: Using jQuery UI
Hi guys,

I have made a div and within this div I've put some draggables. These draggables can only move horizontally or vertically within the box. All is fine and all works.

The only problem is that these draggables can overlap each other. How to prevent this? I want it so that when a draggable is blocked in its path by another draggable, it can't move further. At the moment the draggable can move through to other draggable, I want to prevent this.

A demo:
http://mauricederegt.nl/test/blocks.htm

Kind regards,

Maurice

[jQuery] should I use .txt or a database to retrieve data from it every second
[2Replies]
- 19-May-2009 08:24 AM
- Forum: Using jQuery
Hi all,
To learn some jquery, I am writing some sort of chatbox. My questions
is: what can I use best to store and retrieve the chat text?? Is it
good to store the chat text in the database, or is it better to save
it into a txt file? Ofcourse only new added chat lines will be taken
and displayed underneeth the old ones.
If you don't have much chatters, a database option is ok, but when you
ahve 1000 chatters (as an excample) trying to get new lines from the
database every second (every second a check for new text is done and
displayed if they are), the database will get slow. Then a txt file
would be better? Or doesn't it realy matter what to choose? A txt file
can get big too.
Does anyone has some experience with this and what is the best
approach: .txt or database?
Kind regards,

[jQuery] if serialize(s) returns empty, show: 0
[0Replies]
- 13-Jul-2008 02:31 AM
- Forum: Using jQuery
Hi,
I have the following function:
function serialize(s)
{
serial = $.SortSerialize(s);
document.getElementById('serial').value=serial.hash.replace(/sort3\
[\]=/gi, '').replace(/&/g, ',');
};
This returns a string like: 1,2,4,6,8
It is possible that there is nothing to sortserialze, so it returns
nothing. When this is the case, I want it to return a "0" instead of "
", but how to do this?
So if there is nothing to serialze return: 0
Thanks

[jQuery] jCarousel with text
[1Reply]
- 04-May-2008 12:00 AM
- Forum: Using jQuery
Hi,
I am trying to get some text underneeth each image. I thought it would
work with the excample profided in de zip (php excample), but I cant
seem to get it to work.
This is the code the php file must gather:
<ul>
<div class="imgLM">
    <?
        // lets see if there is an image for this listing
        if($iresult = $phprealty->getIntTableRows($fields="*",
$from="prop_img", $where="p_id=".$res['id']." AND def=1", $sort="",
$dir="", $limit="1", $push=true)){
    ?>
        <li><a href="<? echo $viewPropURL."&propID=".$res['id']; ?>"
title="<? echo ucwords($res['address']).ucwords($res['city']).",
".ucwords($res['state'])." ".$res['zip']; ?>"><img src="<? echo
$phprealty->IMGWWW."th_".$iresult[0]['fn']; ?>" border="0" /><br /><?
echo ucwords($res['address']);?><br /><? echo$cf-

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend