jQuery Forum

JqueryUI Slider disable dragging and allow click on ui-slider
[0Replies]
- 15-May-2013 07:57 AM
- Forum: Using jQuery UI
My purpose is: Allow user click on slider and ui-handle will jump to that point and i can get value at that point, but do not allow user dragging the ui-handle. In my code below, i trying to return false at slide function of slider to prevent user drag but i can not click on slider, second method that i use is set disabled to true and then i can not do anything on slider. Please give me some suggestion. Thanks in advance !
1. $('.bar_blue', slide).slider({
2. step: 0.001,
3. max: 100,
4. start: function slider_start(event, ui) {
5. video.media.pause();
6. },
7. slide: function slider_slide(event, ui) {
8. return false; // this code not allow to dragging
9. },
10. stop: function slider_stop(event, ui) {
11. console.log('stop', ui.value); // but value here
13. },
14. });

how to fix my problem for plugin of cloud carousel ?
[0Replies]
- 20-Apr-2012 12:40 AM
- Forum: Developing jQuery Plugins
Hello all,

I have found this plugin on the internet and used it for my task, but it have a problem for example i have 4 image of flag, cloud carousel plugin will make these flag turn around in circle, but when it stop the front flag and the back flag do not stop at center, i mean the position of 4 flag is not correct, i do not know how to talk about it more clearly but please look the image you will understand the problem i got. In addition, i am not good at math, i do not know how to calculate like the plugin does. Please have a look a suggest me some solution. Thanks in advance !

here is image of problem :

http://www.mediafire.com/i/?onvaklt5kbqgxt8

or

http://imageshack.us/photo/my-images/4/imgproblem.png/

here is an correct example :

http://www.mediafire.com/i/?uqk4c1ndyeo50q2

or

here is html code :
2. <div class="circle" id="carousel">
3. <img class="cloudcarousel" src="images/flag_spain.png" title="Treatment with Baraclude was generally well tolerated and no patients discontinued treatment due to AEs.1"
4. alt="ORIENTE Study (n=190)" />
5. <img class="cloudcarousel" src="images/flag_italy.png" title="No major safety issues were recorded; none of the patients had to stop or reduce the dose during the study.2 "
6. alt="Italian Cohort (n=418) " />
7. <img class="cloudcarousel" src="images/flag_eu.png" title="[Baraclude] was safe and didn’t affect renal function or cause lactic acidosis.3"
8. alt="VIRGIL Study - Naïve cohort (n=243)" />
9. <img class="cloudcarousel" src="images/flag_hongkong.png" title="There were no serious adverse events related to the drug.4"
10. alt="Hong Kong Study (n=222)" />
11. <p id="title-box">
12. </p>
13. <div id="all-box">
14. </div>
15. <span id="alt-box"></span>
16. </div>
here is css code :
2. .circle {
3. background:url(../images/circle.png) no-repeat;
4. /*width:445px;
5. height:138px;
6. position:absolute;
7. top:315px;
8. left:288px;*/
9. width:650px;
10. height:475px;
11. position:absolute;
12. top:165px;
13. left:185px;
14. }
17. #title-box {
18. background-image:url(../images/title_bg.png);
19. color: #000;
20. font-size: 2em;
21. height: 100px;
22. padding: 24px 20px 20px 20px;
23. text-align: center;
24. width: 610px;
25. }
27. #alt-box
28. {
29. bottom: 0;
30. height: 25px;
31. left: 0;
32. position: absolute;
33. width: 650px;
34. }
36. .cloudcarousel {
37. opacity: 0;
38. }
here is plugin's code that i edit some.
2. //////////////////////////////////////////////////////////////////////////////////
3. // CloudCarousel V1.0.5
4. // (c) 2011 by R Cecco. <http://www.professorcloud.com>
5. // MIT License
6. //
7. // reflection code based on plugin by Christophe Beyls <http://www.digitalia.be>
8. //
9. // Please retain this copyright header in all versions of the software
10. //////////////////////////////////////////////////////////////////////////////////
12. (function ($) {
14. // START reflection object.
15. // Creates a reflection for underneath an image.
16. // IE uses an image with IE specific filter properties, other browsers use the Canvas tag.
17. // The position and size of the reflection gets updated by updateAll() in controller.
18. function reflection(img, reflHeight, opacity) {
20. var reflect, cntx, imageWidth = img.width, imageHeight = img.width, gradient, parent;
22. parent = $(img.parentNode);
23. this.element = reflect = parent.append("<canvas class='reflection' style='position:absolute'/>").find(':last')[0];
24. if (!reflection.getContext && $.browser.msie) {
25. this.element = reflection = parent.append("<img class='reflection' style='position:absolute'/>").find(':last')[0];
26. reflect.src = img.src;
27. reflect.style.filter = "flipv progid:DXImageTransform.Microsoft.Alpha(opacity=" + (opacity * 100) + ", style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=" + (reflHeight / imageHeight * 100) + ")";
29. } else {
30. cntx = reflection.getContext("2d");
31. try {
34. $(reflect).attr({ width: imageWidth, height: reflHeight });
35. cntx.save();
36. cntx.translate(0, imageHeight - 1);
37. cntx.scale(1, -1);
38. cntx.drawImage(img, 0, 0, imageWidth, imageHeight);
39. cntx.restore();
40. cntx.globalCompositeOperation = "destination-out";
41. gradient = cntx.createLinearGradient(0, 0, 0, reflHeight);
42. gradient.addColorStop(0, "rgba(255, 255, 255, " + (1 - opacity) + ")");
43. gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
44. cntx.fillStyle = gradient;
45. cntx.fillRect(0, 0, imageWidth, reflHeight);
46. } catch (e) {
47. return;
48. }
49. }
50. // Store a copy of the alt and title attrs into the reflection
51. $(reflect).attr({ 'alt': $(img).attr('alt'), title: $(img).attr('title') });
53. } //END reflection object
55. // START item object.
56. // A wrapper object for items within the carousel.
57. var item = function (imgIn, options) {
58. this.orgWidth = imgIn.width;
59. this.orgHeight = imgIn.height;
60. this.image = imgIn;
61. this.reflection = null;
62. this.alt = imgIn.alt;
63. this.title = imgIn.title;
64. this.imageOK = false;
65. this.options = options;
67. this.imageOK = true;
69. if (this.options.reflHeight > 0) {
70. this.reflection = new reflection(this.image, this.options.reflHeight, this.options.reflOpacity);
71. }
72. $(this.image).css('position', 'absolute'); // Bizarre. This seems to reset image width to 0 on webkit!
73. }; // END item object
76. // controller object.
77. // This handles moving all the items, dealing with mouse clicks etc.
78. var controller = function (container, images, options) {
80. var items = [], funcSin = Math.sin, funcCos = Math.cos, ctx = this;
81. this.controlTimer = 0;
82. this.stopped = false;
83. //this.imagesLoaded = 0;
84. this.container = container;
85. this.xRadius = options.xRadius;
86. this.yRadius = options.yRadius;
87. this.showFrontTextTimer = 0;
88. this.autoRotateTimer = 0;
89. if (options.xRadius === 0) {
90. this.xRadius = ($(container).width() / 2.3);
91. console.log(this.xRadius);
92. }
93. if (options.yRadius === 0) {
94. this.yRadius = ($(container).height() / 6);
95. }
97. this.xCentre = options.xPos;
98. this.yCentre = options.yPos;
99. this.frontIndex = 0; // Index of the item at the front
101. // Start with the first item at the front.
102. this.rotation = this.destRotation = Math.PI / 2;
103. this.timeDelay = 1000 / options.FPS;
105. // Turn on the infoBox
106. if (options.altBox !== null) {
107. $(options.altBox).css('display', 'block');
108. $(options.titleBox).css('display', 'block');
109. }
110. // Turn on relative position for container to allow absolutely positioned elements
111. // within it to work.
112. $(container).css({ position: 'relative', overflow: 'hidden' });
114. $(options.buttonLeft).css('display', 'inline');
115. $(options.buttonRight).css('display', 'inline');
117. // Setup the buttons.
118. $(options.buttonLeft).bind('mouseup', this, function (event) {
119. event.data.rotate(-1);
120. return false;
121. });
122. $(options.buttonRight).bind('mouseup', this, function (event) {
123. event.data.rotate(1);
124. return false;
125. });
127. // You will need this plugin for the mousewheel to work: http://plugins.jquery.com/project/mousewheel
128. // if (options.mouseWheel) {
129. // $(container).bind('mousewheel', this, function (event, delta) {
130. // event.data.rotate(delta);
131. // return false;
132. // });
133. // }
134. $(container).bind('click', this, function (event) {
136. clearInterval(event.data.autoRotateTimer); // Stop auto rotation if mouse over.
137. var text = $(event.target).attr('alt');
138. // If we have moved over a carousel item, then show the alt and title text.
140. if (text !== undefined && text !== null) {
142. clearTimeout(event.data.showFrontTextTimer);
143. //if (event.type == 'click') {
144. $(options.altBox).html(($(event.target).attr('alt')));
145. $(options.titleBox).html(($(event.target).attr('title')));
146. //}
148. //if (options.bringToFront && event.type == 'click') {
149. if (options.bringToFront) {
150. var idx = $(event.target).data('itemIndex');
151. var frontIndex = event.data.frontIndex;
152. //var diff = idx - frontIndex;
153. var diff = (idx - frontIndex) % images.length;
154. if (Math.abs(diff) > images.length / 2) {
155. diff += (diff > 0 ? -images.length : images.length);
156. }
157. event.data.rotate(-diff);
158. console.log(-diff);
159. }
160. }
161. });
163. $(options.specialBox).bind('click', this, function (event) {
164. event.data.rotate(0.5);
165. });
167. // If we have moved out of a carousel item (or the container itself),
168. // restore the text of the front item in 1 second.
169. // $(container).bind('mouseout', this, function (event) {
170. // var context = event.data;
171. // clearTimeout(context.showFrontTextTimer);
172. // context.showFrontTextTimer = setTimeout(function () { context.showFrontText(); }, 1000);
173. // context.autoRotate(); // Start auto rotation.
174. // });
176. // Prevent items from being selected as mouse is moved and clicked in the container.
177. $(container).bind('mousedown', this, function (event) {
178. event.data.container.focus();
179. return false;
180. });
181. container.onselectstart = function () { return false; }; // For IE.
183. this.innerWrapper = $(container).wrapInner('<div style="position:absolute;width:100%;height:100%;"/>').children()[0];
185. // Shows the text from the front most item.
186. this.showFrontText = function () {
187. if (items[this.frontIndex] === undefined) { return; } // Images might not have loaded yet.
188. $(options.titleBox).html($(items[this.frontIndex].image).attr('title'));
189. $(options.altBox).html($(items[this.frontIndex].image).attr('alt'));
190. };
192. this.go = function () {
193. if (this.controlTimer !== 0) { return; }
194. var context = this;
195. this.controlTimer = setTimeout(function () { context.updateAll(); }, this.timeDelay);
196. };
198. this.stop = function () {
199. clearTimeout(this.controlTimer);
200. this.controlTimer = 0;
201. };
204. // Starts the rotation of the carousel. Direction is the number (+-) of carousel items to rotate by.
205. this.rotate = function (direction) {
206. this.frontIndex -= direction;
207. this.frontIndex %= items.length;
208. this.destRotation += (Math.PI / items.length) * (2 * direction);
209. this.showFrontText();
210. this.go();
211. };
214. this.autoRotate = function () {
215. if (options.autoRotate !== 'no') {
216. var dir = (options.autoRotate === 'right') ? 1 : -1;
217. this.autoRotateTimer = setInterval(function () { ctx.rotate(dir); }, options.autoRotateDelay);
218. }
219. };
221. // This is the main loop function that moves everything.
222. this.updateAll = function () {
223. var minScale = options.minScale; // This is the smallest scale applied to the furthest item.
224. var smallRange = (1 - minScale) * 0.4;
225. var w, h, x, y, scale, item, sinVal;
227. var change = (this.destRotation - this.rotation);
228. var absChange = Math.abs(change);
230. this.rotation += change * options.speed;
231. if (absChange < 0.001) { this.rotation = this.destRotation; }
232. var itemsLen = items.length;
233. var spacing = (Math.PI / itemsLen) * 2;
234. //var wrapStyle = null;
235. var radians = this.rotation;
236. var isMSIE = $.browser.msie;
238. // Turn off display. This can reduce repaints/reflows when making style and position changes in the loop.
239. // See http://dev.opera.com/articles/view/efficient-javascript/?page=3
240. this.innerWrapper.style.display = 'none';
242. var style;
243. var px = 'px', reflHeight;
244. var context = this;
245. for (var i = 0; i < itemsLen; i++) {
246. item = items[i];
248. sinVal = funcSin(radians);
250. scale = ((sinVal + 1) * smallRange) + minScale;
252. x = this.xCentre + (((funcCos(radians) * this.xRadius) - (item.orgWidth * 0.5)) * scale);
253. y = this.yCentre + (((sinVal * this.yRadius)) * scale);
255. if (item.imageOK) {
256. var img = item.image;
258. //w = img.width = item.orgWidth * scale;
259. //h = img.height = item.orgHeight * scale;
260. img.style.webkittransition = 'transform 0.5s linear, left 0.5s linear, top 0.5s linear';
261. img.style.webkitTransform = 'scale(' + scale + ')';
262. w = item.orgWidth * scale;
263. h = item.orgHeight * scale;
264. //x = x == 214 ? 235 : x;
265. //x = x == 249 ? 235 : x;
266. if (i == 0) {
267. console.log('x : ' + x);
268. console.log('absChange : ' + absChange);
269. }
270. img.style.left = x + px;
271. img.style.top = y + px;
272. img.style.zIndex = "" + (scale * 100) >> 0; // >>0 = Math.foor(). Firefox doesn't like fractional decimals in z-index.
274. if (item.reflection !== null) {
275. reflHeight = options.reflHeight * scale;
276. style = item.reflection.element.style;
277. style.left = x + px;
278. style.top = y + h + options.reflGap * scale + px;
279. style.width = w + px;
280. if (isMSIE) {
281. style.filter.finishy = (reflHeight / h * 100);
282. } else {
283. style.height = reflHeight + px;
284. }
285. }
286. }
287. radians += spacing;
288. }
289. // Turn display back on.
290. this.innerWrapper.style.display = 'block';
292. // If we have a preceptable change in rotation then loop again next frame.
293. if (absChange >= 0.001) {
294. this.controlTimer = setTimeout(function () { context.updateAll(); }, this.timeDelay);
295. } else {
296. // Otherwise just stop completely.
297. this.stop();
298. }
299. }; // END updateAll
301. // Create an item object for each image
302. // func = function(){return;ctx.updateAll();} ;
304. // Check if images have loaded. We need valid widths and heights for the reflections.
305. this.checkImagesLoaded = function () {
307. var i;
308. for (i = 0; i < images.length; i++) {
309. if ((images[i].width === undefined) || ((images[i].complete !== undefined) && (!images[i].complete))) {
310. return;
311. }
312. }
313. for (i = 0; i < images.length; i++) {
314. items.push(new item(images[i], options));
315. $(images[i]).data('itemIndex', i);
316. }
317. // If all images have valid widths and heights, we can stop checking.
318. clearInterval(this.tt);
319. this.showFrontText();
320. this.autoRotate();
321. this.updateAll();
323. for (i = 0; i < images.length; i++) {
324. images[i].style.opacity = 1;
325. }
326. };
328. this.tt = setInterval(function () { ctx.checkImagesLoaded(); }, 50);
329. }; // END controller object
331. // The jQuery plugin part. Iterates through items specified in selector and inits a controller class for each one.
332. $.fn.CloudCarousel = function (options) {
334. this.each(function () {
336. options = $.extend({}, {
337. reflHeight: 0,
338. reflOpacity: 0.5,
339. reflGap: 0,
340. minScale: 0.5,
341. xPos: 0,
342. yPos: 0,
343. xRadius: 0,
344. yRadius: 0,
345. specialBox: null,
346. altBox: null,
347. titleBox: null,
348. FPS: 30,
349. autoRotate: 'no',
350. autoRotateDelay: 1500,
351. speed: 0.2,
352. mouseWheel: false,
353. bringToFront: false
354. }, options);
355. // Create a controller for each carousel.
356. $(this).data('cloudcarousel', new controller(this, $('.cloudcarousel', $(this)), options));
357. });
358. return this;
359. };
361. })(jQuery);
363. // this is my code that implement the plugin above
365. $(document).bind('ready', function () {
367. $("#carousel").CloudCarousel({
368. minScale: 0.4,
369. xPos: 280,
370. yPos: 0,
371. xRadius: 260,
372. yRadius: 0,
373. FPS: 50,
374. specialBox: '#all-box',
375. titleBox: '#title-box',
376. altBox: '#alt-box',
377. autoRotate: 'no',
378. autoRotateDelay: 1200,
379. speed: 0.1,
380. bringToFront: true
381. });
382. });

how to use Jquery writing a click event ? Which way is correct ?

28-Jul-2011 05:36 AM
Forum: Using jQuery

I'm new in Jquery. I have a problem in my code, i'm very confused that which way is correct when writing jquery code for click event. Please help me and explain thanks in advance !

first method :

<script type="text/javascript">

$('a').click(function(){ 
    alert('you clicked a tag !!! ');
});

</script>

and second method :

<script type="text/javascript">
        $(document).ready(function(){
            $('a').click(function(){ 
                alert('you clicked a tag !!! ');
            });
        });

</script>

when i write 2 method for testing, just the second one is successful and display a alert, but the first one do nothing. In addition i review on http://api.jquery.com/click/ the first one is the way they write sample but it run successfully, that make me confused .

<script>
    $("p").click(function () { 
      $(this).slideUp(); 
    });
    $("p").hover(function () {
      $(this).addClass("hilite");
    }, function () {
      $(this).removeClass("hilite");
    });
</script>

Help me, check my code, It's not work
[2Replies]
- 20-Jul-2011 05:34 AM
- Forum: Using jQuery
Hello Everyone,

Please check my code for me, It do not work but when i tested on http://jsfiddle.net/F8GkG/8/, it check my code is valid but, my code do not work. Thank in advance !

HTML :
1. <div class="slide-wrapper">
    <div class="slide-inner">
    <ul class="news-slide">
    <li>
    <img class="news-image" src="Images/news_slide_img_1.png" alt="" align="left" />
    <p class="news-date">
    news & event | 03.24.2011</p>
    <h4 class="news-title">
    Bentley Continental Flying Spur</h4>
    <p class="news-intro">
    The Bentley Continental Flying Spur is the fastest four-door in the company's ...</p>
    </li>
    <li>
    <img class="news-image" src="Images/news_slide_img_2.png" alt="" align="left" />
    <p class="news-date">
    news & event | 03.24.2011</p>
    <h4 class="news-title">
    Honda CR-Z Mugen Concept</h4>
    <p class="news-intro">
    Mugen Euro has developed a highly-tuned version of the Honda CR-Z</p>
    </li>
    <li>
    <img class="news-image" src="Images/news_slide_img_3.png" alt="" align="left" />
    <p class="news-date">
    news & event | 03.24.2011</p>
    <h4 class="news-title">
    Chevrolet Colorado Rally Concept</h4>
    <p class="news-intro">
    At the 2011 Buenos Aires International Auto Show, Chevrolet revealed the Colorado
    Rally</p>
    </li>
    <li>
    <img class="news-image" src="Images/news_slide_img_4.png" alt="" align="left" />
    <p class="news-date">
    news & event | 03.24.2011</p>
    <h4 class="news-title">
    Audi Q5 Hybrid quattro</h4>
    <p class="news-intro">
    The Audi Q5 hybrid quattro combines the performance of a six-cylinder with the...</p>
    </li>
    </ul>
    </div>
    </div>
CSS :
1. div.slide-wrapper
  {
    background-color: #050607;
    bottom: 87px;
    height: 70px;
    left: 0;
    position: absolute;
    overflow: hidden;
    z-index: 10;
    width: 1280px;
  }
  
  div.slide-inner
  {
    height: 70px;
    overflow: hidden;
    position: relative;
  }
  
  ul.news-slide
  {
    background-color: #050607;
    bottom: 0;
    height: 70px;
    left: 0;
    list-style: none;
    position: absolute;
    z-index: 10;
    width: 100%;
  }
  
  ul.news-slide li
  {
    border-right: 1px solid #212121;
    float: left;
    height: 50px;
    margin-left: 15px;
    padding: 10px 25px 10px 0;
    text-align: left;
    width: 375px;
  }
  
  ul.news-slide li img.news-image
  {
    border: 1px solid #797b7f;
    margin-right: 10px;
    text-align: left;
    vertical-align: middle;
  }
  ul.news-slide li .news-date
  {
    color: #9a9a9b;
    font-size: 0.7em;
  }
  ul.news-slide li .news-title
  {
    color: #cdcdcd;
    font-size: 0.75em;
    font-weight: bold;
    margin-bottom: 5px;
    text-transform: uppercase;
  }
  ul.news-slide li .news-intro
  {
    color: #696a6a;
    font-size: 0.7em;
    text-transform: uppercase;
  }
Jquery :
1. $(document).ready(function() {
  
    var maxWidth = ($('.news-slide li').length + 1) * $('.news-slide li').outerWidth();
    $('.slide-inner').css('width', maxWidth);
    var move = 0;
    var slider = {
  
    init: function(options) {
    var self = this;
    },
  
    slide: function() {
    move = move + $('.news-slide li:first').outerWidth();
    if (move == (maxWidth - move)) {
    move = 0;
    }
    $('.slide-inner').animate({
    "margin-left": -move
    }, 800, "easeInOutSine");
    },
  
    run: function() {
    setInterval(self.slide(), 2000);
    },
  
    stop: function() {
    clearInterval(self.slide());
    }
    };
  
    slider.run();
  
    $('.news-slide').hover(function() {
    slider.stop();
    }, function() {
    slider.run();
    });
  });

Jquery mouseover do not work properly

[0Replies]

11-Jul-2011 12:46 PM
Forum: Using jQuery

I have been write a jquery code for slide to previous or next image in <UL> element when hover the first or last <LI> image but it not work properly, it just slide one time but not smoothly at first mouseover and after that it not slide any more when i mouseover again on it. please take a look and find out what happen in my code, why dont it slide smoothly ? and why do it slide when i mouseover again ? thanks in advance .
Here is my code :

HTML code :

<div id="slide-wrapper">
        <ul class="slide-container">
            <li class="first">
                <img alt="img slide movie" src="Images1.png" /></li>
            <li>
                <img alt="img slide movie" src="Images2.png" /></li>
            <li>
                <img alt="img slide movie" src="Images3.png" /></li>
            <li>
                <img alt="img slide movie" src="Images9.png" /></li>
            <li>
                <img alt="img slide movie" src="Images8.png" /></li>
            <li>
                <img alt="img slide movie" src="Images7.png" /></li>
            <li class="last">
                <img alt="img slide movie" src="Images6.png" /></li>
            <li>
                <img alt="img slide movie" src="Images5.png" /></li>
            <li>
                <img alt="img slide movie" src="Images4.png" /></li>
            <li>
                <img alt="img slide movie" src="Images3.png" /></li>
            <li>
                <img alt="img slide movie" src="Images2.png" /></li>
            <li>
                <img alt="img slide movie" src="Images1.png" /></li>
        </ul>
    </div>

CSS code :

#slide-wrapper
{
    position:relative;
    overflow:hidden;
    height:183px;
    padding-top: 1px;
}
 
#slide-wrapper ul.slide-container
{
    overflow:hidden;
    position:absolute;
    width:100%;
    height:183px;
}
 
ul.slide-container li
{
    cursor: pointer;
    display: block;
    float: left;
    height: 183px;
    padding-right: 1px;
    width: 145px;
}
 
ul.slide-container li img
{
    border: none;
    height: 183px;
    width: 145px;
}
 
ul.slide-container li.last
{
    padding-right: 0;
}

Jquery code :

(function ($) {
 
    var isAnimating = false;
    var methods = {
        init: function (options) {
            var self = this;
        },
 
        display: function () {
             
            methods.slide();
        },

        slide: function () {
            $(".slide-container li.last").mouseover(function () {
                methods._next(".slide-container", -147);
            });
            $(".slide-container li.first").mouseover(function () {
                methods._prev(".slide-container", 147);
            });
        },
 
        _next: function (target, move) {
            var base = parseInt($(target).css("margin-left"));
            var maxLeng = ($("ul.slide-container li").length * $("ul.slide-container li").not("first").innerWidth()) - (7 * $("ul.slide-container li").not("first").innerWidth());
            if (base == maxLeng || isAnimating) {
                return false;
            }
 
            isAnimating = true;
            base = base + move;

            $(target).find("li.last").next("li").addClass("last");
            $("#slide-wrapper")
                .animate({
                    "margin-left": base
                }, 600, "easeInOutSine", function () {
                    isAnimating = false;
                    $(target).find("li.last:first").removeClass("last");
                    $(target).find("li.first").removeClass("first").next("li").addClass("first");
                });
        },
 
        _prev: function (target, move) {
            var base = parseInt($(target).css("margin-left"));
            if (isAnimating || base == 0) {
                return false;
            }
 
            base = base + move;
            isAnimating = true;
            $(target).find("li.first").prev("li").addClass("first");
            $("#slide-wrapper")
                .animate({
                    "margin-left": base
                }, 600, "easeInOutSine", function () {
                    isAnimating = false;
                    $(target).find("li.last").removeClass("last").prev("li").addClass("last");
                    $(target).find("li.first").removeClass("first");
                });
        }
    };
    $(window).ready(function () {
        methods.display();
    })
 
})(jQuery);

Jquery SlideUp, SlideDown not work smothy

[3Replies]

03-Jun-2011 12:41 AM
Forum: Using jQuery

Hi all,
I'm using Jquery API slideUp and slideDown for my site when i click on a group of channel, a list of it's detail will appear as slideDown slowly and the others will disappear slowly. At first element i click it work fine, but from the second element it just disappear and appear not slide up or slide down. You can see it at URL : http://www.ltm.uniquedesign.vn/TVGuide.html . Please help me. thanks in advance .

Here is my HTML code :

<div class="schedule-channels">
            <a id="schedule-0"><span class="title-channels-1">PHIM THUẦN VIỆT</span> <span class="title-channels-2">
                PHIM</span> <span class="title-channels-3">ÂM NHẠC</span> <span class="title-channels-4">
                    DU LỊCH & CUỘC SỐNG</span> <span class="title-channels-5">GIA ĐÌNH</span> <span class="title-channels-6">
                        PHỤ NỮ</span> <span class="title-channels-7">HTVC</span> </a>
            <table id="0" class="current">
                <tr>
                    <td>
                        <span class="time">5:20</span><span class="name">Reporter</span>
                    </td>
                    <td>
                        <span class="time">04:05</span><span class="name">CSI: Miami</span>
                    </td>
                    <td>
                        <span class="time">04:05</span><span class="name">CSI: Miami</span>
                    </td>
                    <td>
                        <span class="time">04:05</span><span class="name">CSI: Miami</span>
                    </td>
                    <td>
                        <span class="time">04:05</span><span class="name">CSI: Miami</span>
                    </td>
                    <td>
                        <span class="time">04:05</span><span class="name">CSI: Miami</span>
                    </td>
                    <td>
                        <span class="time">04:05</span><span class="name">CSI: Miami</span>
                    </td>
                </tr>
                
            </table>
            <a id="schedule-1"><span class="title-channels-1">HTV2</span> <span class="title-channels-2">
                HTV3</span> <span class="title-channels-3">HTV4</span> <span class="title-channels-4">
                    HTV7</span> <span class="title-channels-5">VTV1</span> <span class="title-channels-6">
                        VTV2</span> <span class="title-channels-7">VTV3</span> </a>
            <table id="1">
                <tr>
                    <td>
                        <span class="time">5:20</span><span class="name">Reporter</span>
                    </td>
                    <td>
                        <span class="time">04:05</span><span class="name">CSI: Miami</span>
                    </td>
                   
                </tr>
                
            </table>
        </div>

And this is my script :

$(document).ready(function(){

$('.schedule-channels').find('a').click(function () {
                var table = $(this).next('table');
                var otherTables = $('.schedule-channels').find('table').not(table);
                if (table.css('display') != 'block') {
                    table.slideDown("slow", function () {
                        $(this).addClass("current");
                    });
                    otherTables.slideUp("slow", function () {
                        $(this).removeClass("current");
                    });
                }
                return false;

});

Using prettyPhoto_3.1 but the slide show do not display center of the screen

[0Replies]

20-Apr-2011 01:33 AM
Forum: Using jQuery Plugins

I'm using PrettyPhoto plugin version 3.1 but when it display image, i do not change anything in prettyPhoto.css , the div holder do not display at center of screen. please help me fix it. thanks in advance.

Here is My CSS and MY HTML code:

html
{
    *overflow: auto;
    *overflow-x: hidden;
}
 
a {text-decoration: none;}
 
body
{
    float: left;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 10pt;
    left: 50%;
    *left: 0;
    position: relative;
    width: 1200px;
    overflow-x: hidden;
}
 
#Wrapper
{
    float: left;
    height: auto;
    padding: 0;
    margin: 0;
    right: 50%;
    *right: 0;
    position: relative;
    width: 1200px;
    z-index: 0;
}

.services-content
{
    float: left;
    height: auto;
    position: relative;
    width: 435px;
}

.services-content p.intro-services
{
    color: #7b7b79;
    font-family: Times New Roman;
    font-size: 1.25em;
    font-style: italic;
    margin-top: 25px;
}

.services-content p.content-services
{
    color: #7b7b79;
    font-family: Times New Roman;
    font-size: 1.4em;
    font-style: italic;
    font-weight: bold;
    margin-bottom: 20px;
}

p.content-services a
{
    border: none;
    text-decoration: none;
} 

p.content-services img
{
    border: none;
    margin: 15px 30px 10px 0;
}

.services-content p.note-services
{
    color: #7b7b79;
    font-family: Times New Roman;
    font-size: 1.05em;
    font-style: italic;
}

.main-content div.services-photo
{
    background: url(../Images/Bg_employee_info.png) repeat-y left top;
    float: left;
    height: auto;
    margin-top: 25px;
    margin-left: 15px;
    padding: 25px 15px;
    position: relative;
    width: 440px;
}

div.services-photo .services-photo-title
{
    color: #af7813;
    border-bottom: 1px solid #dcddd9;
    float: left;
    font-size: 1.25em;
    height: auto;
    padding-bottom: 10px;
    text-transform: uppercase;
    width: 425px;
}

div.services-photo .folder-img
{
    border-bottom: 5px solid #ebebe5;
    border-top: 5px solid #ebebe5;
    border-left: 7px solid #ebebe5;
    border-right: 7px solid #ebebe5;
    float: left;
    height: 120px;
    margin: 15px 15px 5px 0;
    position: relative;
    width: 115px;
}

.folder-img .img
{
    border: none;
}

<div class="services-photo">

    <span id="ctl00_ContentPlaceHolder1_Services_Photo1_services_photo_title" class="services-photo-title">MEMORY LOUNGE PHOTO GALLERY</span>
    
    <p class="paging-top">
        
        &nbsp;
        <span id="ctl00_ContentPlaceHolder1_Services_Photo1_lblCurrentPageTop" class="selected"> 1 </span>
        <span id="ctl00_ContentPlaceHolder1_Services_Photo1_lblTotalPageTop" class="totalPage">of 4</span>
        &nbsp;
        <a id="ctl00_ContentPlaceHolder1_Services_Photo1_cmdNextTop" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Services_Photo1$cmdNextTop','')">Next</a>

    </p>
    
        
            <div class="folder-img">
                <a href='Images/Uploads/_TKD4200.jpg' rel="prettyPhoto[galleries]">
                    <img class="img" alt="Lounge Memory Galleries" src='Images/Uploads/_TKD4200.jpg' width="115px"
                        height="120px" />
                </a>
            </div>
        
            <div class="folder-img">
                <a href='Images/Uploads/_TKD4201 copy.JPG' rel="prettyPhoto[galleries]">
                    <img class="img" alt="Lounge Memory Galleries" src='Images/Uploads/_TKD4201 copy.JPG' width="115px"
                        height="120px" />

                </a>
            </div>
        
            <div class="folder-img">
                <a href='Images/Uploads/_TKD4202 copy.JPG' rel="prettyPhoto[galleries]">
                    <img class="img" alt="Lounge Memory Galleries" src='Images/Uploads/_TKD4202 copy.JPG' width="115px"
                        height="120px" />
                </a>
            </div>
        
            <div class="folder-img">
                <a href='Images/Uploads/_TKD4238 copy.JPG' rel="prettyPhoto[galleries]">

                    <img class="img" alt="Lounge Memory Galleries" src='Images/Uploads/_TKD4238 copy.JPG' width="115px"
                        height="120px" />
                </a>
            </div>
        
            <div class="folder-img">
                <a href='Images/Uploads/_TKD4243 copy.JPG' rel="prettyPhoto[galleries]">
                    <img class="img" alt="Lounge Memory Galleries" src='Images/Uploads/_TKD4243 copy.JPG' width="115px"
                        height="120px" />
                </a>
            </div>
        
            <div class="folder-img">

                <a href='Images/Uploads/_TKD4254.jpg' rel="prettyPhoto[galleries]">
                    <img class="img" alt="Lounge Memory Galleries" src='Images/Uploads/_TKD4254.jpg' width="115px"
                        height="120px" />
                </a>
            </div>
        
            <div class="folder-img">
                <a href='Images/Uploads/_TKD4471.jpg' rel="prettyPhoto[galleries]">
                    <img class="img" alt="Lounge Memory Galleries" src='Images/Uploads/_TKD4471.jpg' width="115px"
                        height="120px" />
                </a>
            </div>

        
            <div class="folder-img">
                <a href='Images/Uploads/_TKD4480.jpg' rel="prettyPhoto[galleries]">
                    <img class="img" alt="Lounge Memory Galleries" src='Images/Uploads/_TKD4480.jpg' width="115px"
                        height="120px" />
                </a>
            </div>
        
            <div class="folder-img">
                <a href='Images/Uploads/_TKD4485.jpg' rel="prettyPhoto[galleries]">
                    <img class="img" alt="Lounge Memory Galleries" src='Images/Uploads/_TKD4485.jpg' width="115px"
                        height="120px" />
                </a>

            </div>
        
            <div class="folder-img">
                <a href='Images/Uploads/_TKD4489.jpg' rel="prettyPhoto[galleries]">
                    <img class="img" alt="Lounge Memory Galleries" src='Images/Uploads/_TKD4489.jpg' width="115px"
                        height="120px" />
                </a>
            </div>
        
            <div class="folder-img">
                <a href='Images/Uploads/_TKD4496.jpg' rel="prettyPhoto[galleries]">
                    <img class="img" alt="Lounge Memory Galleries" src='Images/Uploads/_TKD4496.jpg' width="115px"
                        height="120px" />

                </a>
            </div>
        
            <div class="folder-img">
                <a href='Images/Uploads/_TKD4497.jpg' rel="prettyPhoto[galleries]">
                    <img class="img" alt="Lounge Memory Galleries" src='Images/Uploads/_TKD4497.jpg' width="115px"
                        height="120px" />
                </a>
            </div></div>

Jquery Accordion Not work on IE 7
[6Replies]
- 01-Apr-2010 03:17 AM
- Forum: Using jQuery UI
when i use FF to view is it work fine, but in on IE 7 Jquery Accordion do not work anymore . How i can correct this problem ?

Problem with Jquery UI Accordion
[0Replies]
- 01-Apr-2010 03:03 AM
- Forum: Using jQuery UI
default state of accordion is open first tab when page is load. what if i wanna close all tab in default when page is load, it just show when i click on it. how can i do ? help me, thanks in advance.

First time using JqueryUI Accordion have an issue
[0Replies]
- 31-Mar-2010 12:53 AM
- Forum: Using jQuery UI
Jquery Accordion is default open the first tab, but i want it default closed all the tab, just open when i click or hover on some tabs ? how can i do that ? help me, thank in advance.
Ne7ven

Response title

Attachments

jQuery Forum

Activity Trend