Search jQuery

jQuery Forum

Screen name:
soraze

soraze's Profile

8 Posts

3 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

change the color of each li : in my custom css
[2Replies]
- 23-Mar-2012 10:59 PM
- Forum: jQuery Mobile
Hi,

i'm trying to change the color of a "ul" or "li" in my theme (i copied and paste the css from "a" to "z" (i changed the class names to "z"), but i can't find out where the change for the color has to be made : looking at the source code, it seems that each "li" has the class : "ui-btn" but i can't find it in the css file.

The thing is, each theme has its color in background, so it must be in this part of the code, but i can't see where... here's the code from "a" (which is the one i copied and paste to "z" in my code) :
2. /* A
3. -----------------------------------------------------------------------------------------------------------*/
5. .ui-bar-a {
6. border: 1px solid #2A2A2A /*{a-bar-border}*/;
7. background: #111111 /*{a-bar-background-color}*/;
8. color: #ffffff /*{a-bar-color}*/;
9. font-weight: bold;
10. text-shadow: 0 /*{a-bar-shadow-x}*/ -1px /*{a-bar-shadow-y}*/ 1px /*{a-bar-shadow-radius}*/ #000000 /*{a-bar-shadow-color}*/;
11. background-image: -webkit-gradient(linear, left top, left bottom, from( #3c3c3c /*{a-bar-background-start}*/), to( #111 /*{a-bar-background-end}*/)); /* Saf4+, Chrome */
12. background-image: -webkit-linear-gradient(#3c3c3c /*{a-bar-background-start}*/, #111 /*{a-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */
13. background-image: -moz-linear-gradient(#3c3c3c /*{a-bar-background-start}*/, #111 /*{a-bar-background-end}*/); /* FF3.6 */
14. background-image: -ms-linear-gradient(#3c3c3c /*{a-bar-background-start}*/, #111 /*{a-bar-background-end}*/); /* IE10 */
15. background-image: -o-linear-gradient(#3c3c3c /*{a-bar-background-start}*/, #111 /*{a-bar-background-end}*/); /* Opera 11.10+ */
16. background-image: linear-gradient(#3c3c3c /*{a-bar-background-start}*/, #111 /*{a-bar-background-end}*/);
17. }
18. .ui-bar-a,
19. .ui-bar-a input,
20. .ui-bar-a select,
21. .ui-bar-a textarea,
22. .ui-bar-a button {
23. font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
24. }
25. .ui-bar-a .ui-link-inherit {
26. color: #fff /*{a-bar-color}*/;
27. }
29. .ui-bar-a .ui-link {
30. color: #7cc4e7 /*{a-bar-link-color}*/;
31. font-weight: bold;
32. }
34. .ui-bar-a .ui-link:hover {
35. color: #2489CE /*{a-bar-link-hover}*/;
36. }
38. .ui-bar-a .ui-link:active {
39. color: #2489CE /*{a-bar-link-active}*/;
40. }
42. .ui-bar-a .ui-link:visited {
43. color: #2489CE /*{a-bar-link-visited}*/;
44. }
45. .ui-body-a,
46. .ui-dialog.ui-overlay-a {
47. border: 1px solid #2A2A2A /*{a-body-border}*/;
48. background: #222222 /*{a-body-background-color}*/;
49. color: #fff /*{a-body-color}*/;
50. text-shadow: 0 /*{a-body-shadow-x}*/ 1px /*{a-body-shadow-y}*/ 0 /*{a-body-shadow-radius}*/ #000 /*{a-body-shadow-color}*/;
51. font-weight: normal;
52. background-image: -webkit-gradient(linear, left top, left bottom, from( #666 /*{a-body-background-start}*/), to( #222 /*{a-body-background-end}*/)); /* Saf4+, Chrome */
53. background-image: -webkit-linear-gradient(#666 /*{a-body-background-start}*/, #222 /*{a-body-background-end}*/); /* Chrome 10+, Saf5.1+ */
54. background-image: -moz-linear-gradient(#666 /*{a-body-background-start}*/, #222 /*{a-body-background-end}*/); /* FF3.6 */
55. background-image: -ms-linear-gradient(#666 /*{a-body-background-start}*/, #222 /*{a-body-background-end}*/); /* IE10 */
56. background-image: -o-linear-gradient(#666 /*{a-body-background-start}*/, #222 /*{a-body-background-end}*/); /* Opera 11.10+ */
57. background-image: linear-gradient(#666 /*{a-body-background-start}*/, #222 /*{a-body-background-end}*/);
58. }
59. .ui-body-a,
60. .ui-body-a input,
61. .ui-body-a select,
62. .ui-body-a textarea,
63. .ui-body-a button {
64. font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
65. }
66. .ui-body-a .ui-link-inherit {
67. color: #fff /*{a-body-color}*/;
68. }
70. .ui-body-a .ui-link {
71. color: #2489CE /*{a-body-link-color}*/;
72. font-weight: bold;
73. }
75. .ui-body-a .ui-link:hover {
76. color: #2489CE /*{a-body-link-hover}*/;
77. }
79. .ui-body-a .ui-link:active {
80. color: #2489CE /*{a-body-link-active}*/;
81. }
83. .ui-body-a .ui-link:visited {
84. color: #2489CE /*{a-body-link-visited}*/;
85. }
87. .ui-btn-up-a {
88. border: 1px solid #222 /*{a-bup-border}*/;
89. background: #333333 /*{a-bup-background-color}*/;
90. font-weight: bold;
91. color: #fff /*{a-bup-color}*/;
92. text-shadow: 0 /*{a-bup-shadow-x}*/ -1px /*{a-bup-shadow-y}*/ 1px /*{a-bup-shadow-radius}*/ #000 /*{a-bup-shadow-color}*/;
93. background-image: -webkit-gradient(linear, left top, left bottom, from( #555 /*{a-bup-background-start}*/), to( #333 /*{a-bup-background-end}*/)); /* Saf4+, Chrome */
94. background-image: -webkit-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* Chrome 10+, Saf5.1+ */
95. background-image: -moz-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* FF3.6 */
96. background-image: -ms-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* IE10 */
97. background-image: -o-linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/); /* Opera 11.10+ */
98. background-image: linear-gradient(#555 /*{a-bup-background-start}*/, #333 /*{a-bup-background-end}*/);
99. }
100. .ui-btn-up-a a.ui-link-inherit {
101. color: #fff /*{a-bup-color}*/;
102. }
103. .ui-btn-hover-a {
104. border: 1px solid #000 /*{a-bhover-border}*/;
105. background: #444444 /*{a-bhover-background-color}*/;
106. font-weight: bold;
107. color: #fff /*{a-bhover-color}*/;
108. text-shadow: 0 /*{a-bhover-shadow-x}*/ -1px /*{a-bhover-shadow-y}*/ 1px /*{a-bhover-shadow-radius}*/ #000 /*{a-bhover-shadow-color}*/;
109. background-image: -webkit-gradient(linear, left top, left bottom, from( #666 /*{a-bhover-background-start}*/), to( #444 /*{a-bhover-background-end}*/)); /* Saf4+, Chrome */
110. background-image: -webkit-linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/); /* Chrome 10+, Saf5.1+ */
111. background-image: -moz-linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/); /* FF3.6 */
112. background-image: -ms-linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/); /* IE10 */
113. background-image: -o-linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/); /* Opera 11.10+ */
114. background-image: linear-gradient(#666 /*{a-bhover-background-start}*/, #444 /*{a-bhover-background-end}*/);
115. }
116. .ui-btn-hover-a a.ui-link-inherit {
117. color: #fff /*{a-bhover-color}*/;
118. }
119. .ui-btn-down-a {
120. border: 1px solid #000 /*{a-bdown-border}*/;
121. background: #3d3d3d /*{a-bdown-background-color}*/;
122. font-weight: bold;
123. color: #fff /*{a-bdown-color}*/;
124. text-shadow: 0 /*{a-bdown-shadow-x}*/ -1px /*{a-bdown-shadow-y}*/ 1px /*{a-bdown-shadow-radius}*/ #000 /*{a-bdown-shadow-color}*/;
125. background-image: -webkit-gradient(linear, left top, left bottom, from( #333 /*{a-bdown-background-start}*/), to( #5a5a5a /*{a-bdown-background-end}*/)); /* Saf4+, Chrome */
126. background-image: -webkit-linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/); /* Chrome 10+, Saf5.1+ */
127. background-image: -moz-linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/); /* FF3.6 */
128. background-image: -ms-linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/); /* IE10 */
129. background-image: -o-linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/); /* Opera 11.10+ */
130. background-image: linear-gradient(#333 /*{a-bdown-background-start}*/, #5a5a5a /*{a-bdown-background-end}*/);
131. }
132. .ui-btn-down-a a.ui-link-inherit {
133. color: #fff /*{a-bdown-color}*/;
134. }
135. .ui-btn-up-a,
136. .ui-btn-hover-a,
137. .ui-btn-down-a {
138. font-family: Helvetica, Arial, sans-serif /*{global-font-family}*/;
139. text-decoration: none;
140. }
Thanks for your help

dimension problem while loading images... (jquery mobile)
[0Replies]
- 08-Mar-2012 02:39 PM
- Forum: jQuery Mobile
Hi,

i load some images from flickr, everything works well, except the "first" time i get to the page : jquery does not recognize the width and height of my first image :
2. function call_imgs(index){
4. $.when(preload_imgs(index)).done(function(){
5. var win = $(window).width();
6. var cont = $('.container');
7. var img = cont.find('img').eq(0);
9. if (img.width()>win){
10. img.css('width', win-marginRight);
11. }
12. img.show();
13. cont.css({
14. 'width':img.width(), // = 0 the first time
15. 'height':img.height() // = 0 the first time
16. });
17. cont.css({"margin":"0 auto", "text-align":"center"});
18. });
19. }
and i call this function when we first get to the website : (it might be the source of my problem, but how should i do differently? )
2. $(function(){
3. //...
4. call_imgs(0);
so this is the very same code when i use the select list to choose the album (the following code works well, the container takes the right dimension of each image) :
2. $("#select-choice-1").change(function(){
3. var index = $("#select-choice-1").prop("selectedIndex");
4. call_imgs(index);
5. });
but the first time i call the url, the container does not recognize the dimensions of my image...

It ends up with the image being shown in the container, but the image is not centered properly because the dimensions of the container are "width:0" "height:0" (then, if i choose another album, the thing works, with the same code...)
Do you know how to fix this? i can't find any good way (even min-height is not a good solution, because the height of each image is always different )

Thanks for your help

inset borders on image with jquery mobile
[3Replies]
- 08-Mar-2012 05:17 AM
- Forum: jQuery Mobile
Hi,

i would like to use an image without the (invisible) inset borders that are automatically added by jquery mobile. I tried :
1. <img src="pic.jpg" data-fullscreen="true" data-inset="false"/>
but it's not working. I also tried to put "width:100%" to the css, it's better because it scales the image to fit the screen size, but it lets the inset borders though. Would you know how to do this?

Thanks

select an "option" in a list from jquery mobile (it works with "jquery", not "jquery mobile")
[2Replies]
- 07-Mar-2012 05:05 PM
- Forum: jQuery Mobile
Hi,

i can't select an "option" in a select list from jquery mobile, although i manage to do it in a regular jquery page.

i've got a placeholder at the beginning :
2. <select name="select-choice-1" id="select-choice-1">
3. <option>Loading...</option>
4. </select>
then i load the titles from flickr :
2. function preload_titles() {
3. return $.Deferred(function(dfd) {
4. //...
5. dfd.resolve();
6. }).promise();
7. }
9. $.when(preload_titles()).done(function(){
10. //alert("ok");
11. $("#select-choice-1 option:eq(2)").prop("selected",true);
12. });
but i still have "loading" even after the alert is launched.

Isn't it possible to select an option from a select list in jquery mobile?

Thanks for your answer

background image plugin : it doesn't respond...
[0Replies]
- 15-Feb-2011 06:42 PM
- Forum: Developing jQuery Plugins
hello !

i made a plugin to switch the background image with a mouseover/out , but it doesn't respond, actually i've got no errors, but nothing happen on the page. I'm not sure how to call the 'div' with the class 'article' with my plugin :
could you please have a look to see if something is wrong with the code?

here is the plugin :
```
(function($) {
 
 $.fn.fond = function (newClass) {
 
 return this.each(function() {
 
 $(this).mouseover(function(){
 $(this).addClass(newClass);
 });
 $(this).mouseout(function(){
 $(this).removeClass(newClass);
 });
 });
}})(jQuery);
```
here i call this plugin with the following line in my jquery file (here i'm not sure : can i write it like that to specify 'the div with the class 'article' ?) :
```
$(function () {
 $('.article').fond(bgHover);
});
```
and finally in my php page, the div with the classname "article" :
```
<div class="article"> //the content here is an image
<div class="title"> //the content here is the title of the image 
</div>
</div>

and the result should be a color image in the background...

Do you see anything?

Thanks f!
```

how to make a "while" function to replace code?

[0Replies]

15-Feb-2011 06:08 PM
Forum: Using jQuery

(Edit: for moderators: sorry i forgot the "insert code" link in the last (same) topic, my mistake)

hello !

i try to use ajax with jquery, but i have a problem to make a "while" function inside my jquery file, to replace the former content of a div with the new one :

at the beginning i load all the content through php, with a "while" function and then i create the links :

<div id="blocus">
<?php
while ($donnees = $req ->fetch()) {
$get_id = $donnees['id'];
echo '<a href="articles.php?id= '.$get_id.' "> '.$get_nom.'</a>' ;
echo '<img src= '.$get_image.' /><br/>' ;
?>

then i try to catch the result of the POST method with Ajax, but i need to re-write the "while" function because i looked for a new kind of content in my database, and now i would like to post it on the page. So i wrote here the data result, but can you please tell me how i can tell jquery "for each line you will receive, write every time the <a> link followed by data.id, and data.nom etc... ?

here is the code to send the request and catch the return data :

$.post (url, { action:filter, filtre:id }, function (data) {
if (data.result=="ok"){
 $(".fiche").empty()
 .append('<a href="articles.php?id='data.id' > 'data.nom'</a>'
            <img src= 'data.image' /><br/>' data.nom </div>');
}, "json");

Thanks for your help !

how to make a "while" function with jquery, to replace the code with new content?

[1Reply]

15-Feb-2011 06:06 PM
Forum: Using jQuery

hello !

i try to use ajax with jquery, but i have a problem to make a "while" function inside my jquery file, to replace the former content of a div with the new one :

at the beginning i load all the content through php, with a "while" function and then i create the links :

<div id="blocus"> 
<?php while ($donnees = $req ->fetch()) { 
$get_id = $donnees['id'];
echo '<a href="articles.php?id= '.$get_id.' "> '.$get_nom.'</a>' ; 
echo '<img src= '.$get_image.' /><br/>' ; 
?>

then i try to catch the result of the POST method with Ajax, but i need to re-write the "while" function because i looked for a new kind of content in my database, and now i would like to post it on the page. So i wrote here the data result, but can you please tell me how i can tell jquery "for each line you will receive, write every time the <a> link followed by data.id, and data.nom etc... ?

here is the code to send the request and catch the return data :

$.post (url, { action:filter, filtre:id }, function (data) { 
if (data.result=="ok"){ 
$(".fiche").empty()
.append('<a href="articles.php?id='data.id' > 'data.nom'</a>'<img src= 'data.image' /><br/>' data.nom </div>'); }, 
"json");

Thanks for your help !

jquery and simple ajax doesn't respond?
[0Replies]
- 15-Feb-2011 05:50 PM
- Forum: Using jQuery
Hello!

i would like to use ajax with jquery, i tried to use the post method but i have no result, or error : i would like to have an "alert" when i click on a link from the pagination line :

this is from my main page, it's the pagination (the links to click on afterwards) :
1. echo '<div id="numbers">'; for ($i = 1 ; $i <= $nombreDePages ; $i++) { echo '<a href="index.php?page=' . $i . '" title="'.$i.'">' . $i . '</a>'; } echo '</div>
then the Jquery file :
1. $(function () { var url = "pageTest.php", numbers = $('#numbers').find('a'); numbers.each (function () { var t = $(this), id = t.attr("title"); t.click (function() { $.post (url, { action:"page", infos:id }, function (data) { alert(data.nom); }, "json"); }); }); });
and finally the file that works with the jquery file, and assumed to return the "d" array :
1. <?php require("connect.php"); $d =array(); if ( $_POST['action']=="page") { $d['verif']="ok"; $d['test']="allo? oui cest bon ca marche ! "; print_r($d); } echo json_encode($d); ?>
But when i click on any of those links, the "alert" method doesn't appear, the link work to call a new page, but the alert won't show up... Does anyone have the solution :) ?

Thanks a lot for your help !

Soraze

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend