jQuery Forum

problem in carousel
[0Replies]
- 24-May-2013 03:39 AM
- Forum: Using jQuery UI
Hi

I have a dynamic carousel. in which item varies from 2 to 14.

Now if i have 2 items, then i want to show as soon as i load the carousel the right arrow disabled. How wud i show it on loading the carousel itself.

Below is the code to handle the carousel arrows.
1. function filterArrowButtonWasClicked(event) {
2. var content = $('carousel_content');
3. var offset = parseInt(content.readAttribute('data-offset'), 10);
4. var no_of_products = parseInt(ACProductBrowser.products.products.length, 10);
5. var remainingProducts = Math.floor(no_of_products % 6);
6. var totalWidth = 138.5 * remainingProducts;
7. var slideTo = totalWidth + 830;
9. var initialWidth = 830;
10. if (no_of_products <= 6 || no_of_products < 12 ) {
11. initialWidth = totalWidth;
12. slideTo = totalWidth;
13. } else {
14. initialWidth = 830;
15. }
17. if (event.target.id == 'right_arrow') {
18. $('left_arrow').removeClassName('disabled');
19. offset = Math.max(offset - initialWidth, -slideTo);
20. if (offset == -slideTo) {
21. $('right_arrow').addClassName('disabled');
22. }
23. } else {
24. $('right_arrow').removeClassName('disabled');
25. offset = Math.min(offset + initialWidth, 0);
26. if (offset == 0) {
27. $('left_arrow').addClassName('disabled');
28. }
29. }
31. content.writeAttribute('data-offset', offset);
32. content.style.webkitTransform = 'translateX(' + offset + 'px)';
33. content.style.MozTransform = 'translateX(' + offset + 'px)';
34. content.style.OTransform = 'translateX(' + offset + 'px)';
35. content.style.msTransform = 'translateX(' + offset + 'px)';
36. content.style.left = offset + 'px';
37. }
But this function will be called only when i click any arrow. in case of two items, the arrows shud be disabled right away. how to do this?

using jquery autocomplete widget with json
[2Replies]
- 19-Apr-2013 04:47 AM
- Forum: Using jQuery UI
hi

i am not able to understand how to get my json picked in autocomplete UI widget.
1. for(var i=0, l = data.itemisedBill.length; i<l;i+=1){
2. var itemLength=data.itemisedBill[i].item;
3. $(itemLength).autocomplete({
4. source: $[data.itemisedBill]
5. });
7. }
It is giving exception in the source part? how should i give my json here. I json file is separate.

Thanks

my json is not getting parsed through query.
[1Reply]
- 18-Apr-2013 08:08 AM
- Forum: Using jQuery
Hi

My json is not getting available. both are in same folder. Please tell where i am wrong. I am pasting both html and json here:
1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2. <html>
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5. <title>Table</title>
6. <script type="text/javascript" src="./jquery-1.8.2.js"></script>
7. <script type="text/javascript" src="./table.json"></script>
8. <script type="text/javascript">
9. $.getJSON('table.json', function(data){
10. alert(data);
11. $(data.ItemisedBill).each(function(index,element){
12. $('#tableData').append('<tr><td><input type="checkbox" name="chk"/></td><td>1</td><td><input type="text"/></td>');
13. });
15. });
17. </script>
18. </head>
19. <body>
20. <input type="button" value="Add Row" id="addRow" />
21. <input type="button" value="Delete Row" id="deleteRow" />
22. <table id="tableData" width="550px" border="1">
23. <tr>
24. <th>CheckBox</th>
25. <th>Serial No.</th>
26. <th>Item</th>
27. <th>Price</th>
28. <th>Quantity</th>
29. <th>SubTotal</th>
30. </tr>
31. </table>
32. </body>
33. </html>
Json:
1. var ItemisedBill= [{
2. "item":"name1",
3. "price":"20",
4. "quantity":2
5. },
6. {
7. "item":"name2",
8. "price":"30",
9. "quantity":1
10. },
11. {
12. "item":"name3",
13. "price":"40",
14. "quantity":3
15. },
16. {
17. "item":"name4",
18. "price":"14",
19. "quantity":1
20. },
21. {
22. "item":"name5",
23. "price":"44",
24. "quantity":4
25. }
26. ];
Thanks!

delete a row when the checkbox is checked and clicked on delete link
[1Reply]
- 17-Apr-2013 04:56 AM
- Forum: Using jQuery
Hi

I want to delete the checked row when i am clicking on delete. For now it just removes the checkbox instead of whole text as well. Please let me know where i am wrong here.
1. <script type="text/javascript">
2. $(document).ready(function(){
3. $("#checkAll").click(function(){
4. $("input").attr("checked", true);
5. });
7. $("#uncheck").click(function(){
8. $("input").attr("checked", false);
9. });
11. $("#delete").click(function(){
12. $("input:checkbox:checked").remove();
13. });
14. });
16. </script>
1. <body>
2. <a href="#" id="checkAll">Check All</a>
3. <a href="#" id="delete">Delete</a>
4. <a href="#" id="uncheck">Uncheck All</a><br/>
5. <input type="checkbox"/>My Name is abcdexcv<br/>
6. <input type="checkbox"/>My Name is abcdexcv <br/>
7. <input type="checkbox"/>My Name is abcdexcv <br/>
8. <input type="checkbox"/>My Name is abcdexcv <br/>
9. <input type="checkbox"/>My Name is abcdexcv <br/>
10. <input type="checkbox"/>My Name is abcdexcv <br/>
11. <input type="checkbox"/>My Name is abcdexcv <br/>
12. </body>

order of the divs in html
[5Replies]
- 25-Mar-2013 07:44 AM
- Forum: Getting Started
Hi

I have a ques here. Like if i have a big html. In that html, i have defined orders of the divs appearing in it.

like:

<div1>
<div2>
<div3>

i have styled these divs thru css and have given css acc to their current position. But now if my data is dynamic now and i cant' say which div will come at which place. like it is kind of caraousel.

how can i handle this? is there any way?

help required filtering in jquery
[2Replies]
- 15-Mar-2013 03:17 AM
- Forum: Using jQuery
Hi,

i want to use filter in jquery but not gtting how to proceed with it. i have written below script.

actually i want to do is, on click of .leftSelect i want to hide the current div and show previous. but only if parent is talkNowOptionsSkip i want to show some other div. this is not working which i have written below:
1. $(".leftSelect").click(function(){
2. $(this).closest('.closed').hide();
3. $(this).closest('.pushLeftPressed').prev().show();
4. });
6. $(".talkNowOptionsSkip .leftSelect").click(function(){
7. $(this).closest('.closed').hide();
8. $(".talkNowOptionsCheck").show();
9. });

need to iterate thru json
[2Replies]
- 12-Mar-2013 04:54 AM
- Forum: Using jQuery
hi..

in the below json i need to get the value of the id==8, but some better way. not thru data[1].children
2. [
3. {
4. "id" : 1,
5. "name" : "a",
6. "children" : [
7. {
8. "id" : 2,
9. "name" : "b",
10. "children" : [
11. {
12. "id" : 3,
13. "name" : "c",
14. "children" : [
15. {
16. "id" : 4,
17. "name" : "d",
18. "children" : [
19. {
20. "id" : 5,
21. "name" : "e",
22. "children" : [
23. {}
24. ]
25. }
26. ]
27. }
28. ]
29. }
30. ]
31. }
32. ]
33. },
34. {
35. "id" : 6,
36. "name" : "f",
37. "children" : [
38. {
39. "id" : 7,
40. "name" : "g",
41. "children" : [
42. {
43. "id" : 8,
44. "name" : "h",
45. "children" : [
46. {
47. "id" : 9,
48. "name" : "i",
49. "children" : [
50. {
51. "id" : 10,
52. "name" : "j",
53. "children" : [
54. {}
55. ]
56. }
57. ]
58. }
59. ]
60. }
61. ]
62. }
63. ]
64. }
65. ]

want to know how to do looping in query
[4Replies]
- 28-Feb-2013 07:09 AM
- Forum: Using jQuery
Hi,

Below is the scenario:
1. <div4 class="abc">
2. <div1 class="clickMeTalkNow">
3. </div>
4. </div>
6. <div5 class="talkNowOptions">
7. <div2 class="clickMeTalkNow">
8. </div>
9. </div>
10. <div6 class="talkNowOptions">
11. <div3 class="clickMeTalkNow">
12. </div>
13. </div>
on click of div1, div5 should open, on click of div2 ,div6 should open.
something like this should be done. But i am nt getting exact way: should each() be used?
1. $(".clickMeTalkNow").click(function(){
2. $(this).closest('.closed').hide();
3. index = $('.clickMeTalkNow').index(this);
4. $('#talkNowOptions').hide().eq(0).show();
5. $('#talkNowOptions').hide().eq(1).show();
6. });

clicking on image should take me to the previous div using query- help needed
[3Replies]
- 28-Feb-2013 12:51 AM
- Forum: Using jQuery
Hi,

my scenario is like,

there is an image in a div:
1. <div class="leftSelect" >
2. <img class="pushToLeft" src="./images/arrow-sched-left-none.png" alt="arrow-sched-left-none.png"/>
3. </div>
this image is present in different parent divs with different ids.

now i have below scenario:
1. <div1>
1. <div class="leftSelect" >
2. <img class="pushToLeft" src="./images/arrow-sched-left-none.png"alt="arrow-sched-left-none.png"/>
3. </div>
4. </div1>
similarly another div:
1. <div2>
1. <div class="leftSelect" >
2. <img class="pushToLeft" src="./images/arrow-sched-left-none.png"alt="arrow-sched-left-none.png"/>
3. </div>
4. </div2>
now whenevr i press image in div2 it should take me div1.. i have more same divs below. so i want to generalize it.

that clicking on this image should take me to the previous div and the clicked div should hide.

how can i do this?

i have written this script but it is not generalized:
2. $(".pushToLeft").click(function(){
3. $(this).closest('.closed').hide();
4. $("#showMe").show();
5. });

need help in query
[6Replies]
- 27-Feb-2013 04:08 AM
- Forum: Using jQuery
hi i have below situation:
1. <div id="1">
2. <img class="close">
3. </div>
4. <div id="2">
5. <img class="close">
6. </div>
like this multiple divs which have same image.

now i want to write a jquery function, the divs which has these image, on clicking of the image, divs should hide.

i want generalize function.. $(this) wont work.so what should i give here..
1. $(".close").click(function() {
2. $(this).hide();
3. });

hi need help here .. writing a function using query
[4Replies]
- 26-Feb-2013 04:54 AM
- Forum: Using jQuery
i have below scenario:

<div1> <div2> <div3>

all are clickable

<div1> click -> <div4> opens, <div5>should hide

<div2> click -> <div5> opens, <div4> should hide

now on clicking <div4>, <div6> opens everything else should hide.

i have written jquery for this, but in separate functons using all div ids separately.. i want to club this up and make a single function..

please tell me hw to do so..
thanks!

Question for Jake
[7Replies]
- 17-Feb-2013 09:41 PM
- Forum: Using jQuery
Jake, u helped me that json part.

but the css which i had written for that html, is not getting applied now. why is that?

not able to access json data
[9Replies]
- 17-Feb-2013 12:09 PM
- Forum: Using jQuery
HI,

i am not able to access the json data through query. Please let me know why.. i have tried so may ways.

below is my script:
1. $(document).ready(
2. function () {
3. $.getJSON("new.json",function(data)
4. {
5. var html = "";
6. alert(data[0].content[1].css);
7. for(var i=0,size=data.length;i<size;i++){
8. alert("pallavi" +data.length);
9. html += '<div class='+data[0].content[i].css+' id='+data[0].content[i].id+'></div>';
10. }
11. $('#clickCall').append(html);
12. });
13. });
below is my json:
1. [
2. {
3. {
4. "content": [
5. {
6. "content": [
7. {
8. "content": [
9. {
10. "content": {
11. "attrs": {
12. "alt": "",
13. "src": "../images/callnow.png"
14. },
15. "type": "img"
16. }
17. },
18. {
19. "content": {
20. "content": {
21. "text": "Call"
22. },
23. "css": "labelBox1",
24. "type": "h3"
25. }
26. },
27. {
28. "content": {
29. "content": {
30. "text": "Talk us now or later. You can also share screens with an advisor."
31. },
32. "type": "p"
33. }
34. }
35. ],
36. "css": "box2",
37. "id": "box2"
38. },
39. {
40. "content": [
41. {
42. "content": {
43. "attrs": {
44. "alt": "",
45. "src": "../common/images/service.jpg"
46. },
47. "css": "box3img",
48. "type": "img"
49. }
50. },
51. {
52. "content": {
53. "content": {
54. "text": " Take in for Service"
55. },
56. "css": "labelBox2",
57. "type": "h3"
58. }
59. },
60. {
61. "content": {
62. "content": {
63. "text": "Find a local Apple Authorized Service Provider or make an reservation at the Genius Bar. "
64. },
65. "type": "p"
66. }
67. }
68. ],
69. "css": "box3"
70. },
71. {
72. "content": [
73. {
74. "content": {
75. "attrs": {
76. "alt": "",
77. "src": "../images/icon_carrier.png"
78. },
79. "type": "img"
80. }
81. },
82. {
83. "content": {
84. "content": {
85. "text": "Contact Carrier"
86. },
87. "css": "labelBox3",
88. "type": "h3"
89. }
90. },
91. {
92. "content": {
93. "content": {
94. "text": "Temper incididunt ut labore et dolore magna eliqua"
95. },
96. "type": "p"
97. }
98. }
99. ],
100. "css": "box4"
101. }
102. ],
103. "css": "wrapperbox1",
104. "id": "clickCall"
105. }
106. ]
108. }
109. }
110. ]
Thanks!

Need urgent help on this.
[1Reply]
- 14-Feb-2013 10:59 AM
- Forum: Using jQuery
hi

i am trying to create a plugin. there are two divs as below:

<div class="wrapperbox1" id="clickCall">
...something inside
</div>
<div class="clickShow" data-role="content" id="showMe">
     ...something inside
</div>

if i click on #clickCall, the #showMe should fade in. Initially, #showMe is display:none. i wrote the script for this. but now for plugin, i want to generalize this. coz it will be used widely in my app.

below is the plugin i tried to write but not wring:

(function($) {
$.fn.pal = function(options) {
  return this.each(function() {
  var clickcall = $(this);
clickcall.click(onClick);
});
};

  function onClick() {
$(this).fadeIn('fast');
  return false;
}
})(jQuery);

now if i call this plugin in my html like below:
<script>
$(document).ready(
   function () {
$("#clickCall").pal('#showMe');

   }
);
</script>

nothing is working. and i want to use options. but i am not able to understand how. please help.

query in creating a customized fade in plugin
[5Replies]
- 14-Feb-2013 09:11 AM
- Forum: Developing jQuery Plugins
hi

i am trying to create a plugin. there are two divs as below:

<div class="wrapperbox1" id="clickCall">
...something inside
</div>
<div class="clickShow" data-role="content" id="showMe">
...something inside
</div>

if i click on #clickCall, the #showMe should fade in. Initially, #showMe is display:none. i wrote the script for this. but now for plugin, i want to generalize this. coz it will be used widely in my app.

below is the plugin i tried to write but not wring:

(function($) {

$.fn.pal = function(options) {

return this.each(function() {

var clickcall = $(this);

clickcall.click(onClick);

});

};

function onClick() {

$(this).fadeIn('fast');

return false;

}

})(jQuery);

now if i call this plugin in my html like below:
<script>

$(document).ready(

function () {
$("#clickCall").pal('#showMe');

}

);

</script>

nothing is working. and i want to use options. but i am not able to understand how. please help.

Need help asap. Jquery mobile. Not taking $ . need to get this asap. Help plz
[7Replies]
- 07-Feb-2013 02:26 AM
- Forum: jQuery Mobile
below is my html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>pal.html</title>
<meta name="generator" content="BBEdit 16.0" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

<link rel="stylesheet" href="navigation.css" />
<script>

$(document).on( "mobileinit", function() {
$.mobile.defaultPageTransition = "slide";
});

$( document ).on( "pageinit", "[data-role='page'].demo-page", function() {
$(document).on('expand', '.ui-collapsible', function() {
$(this).children().next().hide();
$(this).children().next().slideDown();

});
});
</script>
<style>
div.static{
float: left;
width: 31%;
height: 80%;
box-shadow: 2px 2px 2px rgba(121, 112, 107, 0.6);
border: 1px solid rgba(121, 112, 107, 0.6);
border-radius: 8px;
margin-left: 100px;
margin-right: 80px;
margin-top: 20px;
margin-bottom: 20px;
border-image: initial;
}

div img{
display:inline-block;
}

div ul{
display:inline-block;
}

}
</style>
</head>
<body>
<div data-role="page">
<div data-role="content">
<div data-role="collapsible" id="my-collapsible">
<div class="static" id="click">
<div>
<img src="Diamond Round.gif" alt="Diamond Round.gif" width="48" height="48"/>
<ul>
<li>Text1</li>
<li>Text2</li>
<li>Text3</li>
</ul>
<div>
</div>
</div>

</div>
</div>

<div data-role="page">
<div data-role="content">
<div id="slidedown" class="static" data-role="collapsible">
<div>
<img src="Diamond Round.gif" alt="Diamond Round.gif" width="48" height="48"/>
<ul>
<li>Text1</li>
<li>Text2</li>
<li>Text3</li>
</ul>
<div>
</div>
</div>
</div>
</body>
</html>

Need to click on div and show the panel
[3Replies]
- 07-Feb-2013 01:07 AM
- Forum: jQuery Mobile
Hi

Need help on this one. I want to click on the box and then show a panel kind. But i am getting both divs. I am not able to get slidedown functionality.Please help.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>pal.html</title>
<meta name="generator" content="BBEdit 16.0" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
<script>
$(document).on('expand', '.ui-collapsible', function() {
$(this).children().next().hide();
$(this).children().next().slideDown();

});
</script>
<style>
div.static{
width:348px;
height:196px;
border: 1px solid black;
}

div img{
display:inline-block;
}

div ul{
display:inline-block;
}

</style>
</head>
<body>
<div data-role="page">
<div data-role="content">
<div data-role="collapsible" id="my-collapsible">
<div class="static" id="click">
<div>
<img src="Diamond Round.gif" alt="Diamond Round.gif" width="48" height="48"/>
<ul>
<li>Text1</li>
<li>Text2</li>
<li>Text3</li>
</ul>
<div>
</div>
<div id="slidedown" class="static">
<div>
<img src="Diamond Round.gif" alt="Diamond Round.gif" width="48" height="48"/>
<ul>
<li>Text1</li>
<li>Text2</li>
<li>Text3</li>
</ul>
<div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Jquery Mobile

[3Replies]

04-Feb-2013 06:32 AM
Forum: jQuery Mobile

This is my below html. i want to implement Swipe gesture. But when i try to run in FF, i am getting Error loading. Please tell where im going wrong:

<!DOCTYPE html> <html> <head> <title>Test</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script> <script> $(function(){ $("#home").bind('swipeleft',function(event, ui){ $.mobile.changePage("../index.html", { transition: "slide" }); }); }); </script> </head> <body> <div data-role="page" id="home"> <div data-role="header"> <h1>Main Page</h1> </div> <div data-role="content"> <p>Slide finger left</p> </div> </div> </body> </html>

Hi. Please let me know where i am going wrong
[10Replies]
- 25-Nov-2012 01:10 PM
- Forum: Using jQuery
on click of a button i want to change the background color:

$(document).ready(function(){
$.ajax({
type:'GET',
url:'blue.json',
dataType:'json',
success:function(){
$("button").click(function(){

result = $("body").css("background-color",data.color);
return result;

});
}
});
});

this script is not working

Response title

Attachments

jQuery Forum

Activity Trend