[jQuery] FCKEditor Plugin and Validation Plugin
http://www.fyneworks.com/jquery/FCKEditor/ The FCKEditor home page mentioned it support the Validation Plugin, but when I use both of it, but even I type many words on the textarea which replaced by the FCKEditor via FCKEditor Plugin, it's always shows the error message that the field is empty, how to make it work?
[jQuery] Wrap question
I want to make a div
div id=myDiv
become
table border=1trtd1/tdtd2/tdtd3/td/trtrtd4/
tdtddiv id=myDiv/tdtd6/td/trtrtd7/tdtd8/
tdtd9/td/tr/table
This is my solution, but I want to ask for better one.
/**
* Wrap Table
*/
(function() {
$.fn.dramaWrapTable = function($obj) {
var $tbl = 'table
border=1trtd1/tdtd2/tdtd3/td/
trtrtd4/tdtd/tdtd6/td/trtrtd7/tdtd8/
tdtd9/td/tr/table';
return this.each(function() {
$(this)
.before($tbl)
.clone(true)
.prependTo($(this).prev().find('td').eq(4))
.end()
.end()
.remove();
});
}
})(jQuery)
script
$(function() {
$('#myDiv').dramaWrapTable();
});
/script
[jQuery] customize uplodify
http://www.uploadify.com/
This is the best jQuery upload plugin I ever used, I want to add one
function when upload
jQuery(queue).append('div id=' + jQuery(this).attr('id') + ID + '
class=uploadifyQueueItem\
input type=text /
div class=cancel\
.
..
I add a input field in it's js code, and I hope the value will be send
with the file when uploading, is it doable?
[jQuery] Ajax response back question
ul
li id=1/li
li id=2/li
li id=3/li
/ul
$(function() {
$('li').each(function() {
var $id = $(this).attr('id');
$.post('getImg.php', {id: $id}, function($data) {
// How to do it?
});
});
});
I want to let each li use ajax load their own image and put into
thierself, the result shold like below, but if I user $.post, I don't
know how to put it to the right li.
ul
li id=1img src=1.jpg/li
li id=2img src=2.jpg/li
li id=3img src=3.jpg/li
/ul
[jQuery] Can't get the image width
1.
img src=xxx style=display: none; id=img1
alert($('#img1').width());
2.
div style=display: none;
img src=xxx style=display: none id=img2
/div
alert($('#img2').width());
case 1 can get the width of the image, but case 2 will fail, how to
solve this problem?
[jQuery] Can't get image's dimension under a hidden object
1.
img src=xxx id=img1 style=display: none; /
$(window).load(function() {
alert($('#img1').width());
});
2.
div style=display: none;
img src=xxx id=img2 style=display: none; /
/div
$(window).load(function() {
alert($('#img2').width());
});
case 1 can get the dimension, but case 2 can't, how to get it?
[jQuery] slider question
http://www.switchonthecode.com/tutorials/using-jquery-slider-to-scroll-a-div If use jQuery slider directly, the handle box will not fit the slider track but in that website, it's totally fit the slider, and I didn't see anything particular in his code how to do that?
[jQuery] How to check is the object with the css property?
div/div
div style=position: absolute/div
$('div').each(function() {
// How to know the div have position property or not?
});
[jQuery] How to print tag name
The code below show [ td ], can I got the tagName like td?
table
trtd1/td/tr
/table
console.log($('table:first tr').find(':first-child'));
[jQuery] Re: How to combine event?
fantastic
On 9月25日, 下午9時22分, Karl Swedberg k...@englishrules.com wrote:
Hi David,
You can combine events with a space in the first argument
of .bind(): .bind('type1 type2 type3', function(event) { /*do
something*/});
Pass the event object into the anonymous function and then determine
which event was triggered with event.type. Here is an example:
$('a#cursor')
.css({cursor: 'url(hand.cur), default'})
.click(function() {
return false;
})
.bind('mousedown mouseup mouseout', function(event) {
var myCursor = (event.type == 'mousedown') ? 'url(grab.cur),
default' : 'url(hand.cur), default';
$(this).css({cursor: myCursor});
});
Hope that helps.
--Karl
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Sep 25, 2009, at 1:48 AM, David .Wu wrote:
event mousedown and mouseup and mouseout actually do the same thing,
how to combine it?
$('a#cursor')
.css({cursor: 'url(hand.cur), default'})
.click(function() {
return false;
})
.mousedown(function() {
$(this).css({cursor: 'url(grab.cur), default'});
})
.mouseup(function() {
$(this).css({cursor: 'url(hand.cur), default'});
})
.mouseout(function() {
$(this).css({cursor: 'url(hand.cur), default'});
});
[jQuery] Re: How to combine event?
If I want to preload the image, I can use $('img').attr('src',
'xxx.jpg'), how to proload cur file?
On 9月25日, 下午9時22分, Karl Swedberg k...@englishrules.com wrote:
Hi David,
You can combine events with a space in the first argument
of .bind(): .bind('type1 type2 type3', function(event) { /*do
something*/});
Pass the event object into the anonymous function and then determine
which event was triggered with event.type. Here is an example:
$('a#cursor')
.css({cursor: 'url(hand.cur), default'})
.click(function() {
return false;
})
.bind('mousedown mouseup mouseout', function(event) {
var myCursor = (event.type == 'mousedown') ? 'url(grab.cur),
default' : 'url(hand.cur), default';
$(this).css({cursor: myCursor});
});
Hope that helps.
--Karl
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Sep 25, 2009, at 1:48 AM, David .Wu wrote:
event mousedown and mouseup and mouseout actually do the same thing,
how to combine it?
$('a#cursor')
.css({cursor: 'url(hand.cur), default'})
.click(function() {
return false;
})
.mousedown(function() {
$(this).css({cursor: 'url(grab.cur), default'});
})
.mouseup(function() {
$(this).css({cursor: 'url(hand.cur), default'});
})
.mouseout(function() {
$(this).css({cursor: 'url(hand.cur), default'});
});
[jQuery] How to combine event?
event mousedown and mouseup and mouseout actually do the same thing,
how to combine it?
$('a#cursor')
.css({cursor: 'url(hand.cur), default'})
.click(function() {
return false;
})
.mousedown(function() {
$(this).css({cursor: 'url(grab.cur), default'});
})
.mouseup(function() {
$(this).css({cursor: 'url(hand.cur), default'});
})
.mouseout(function() {
$(this).css({cursor: 'url(hand.cur), default'});
});
[jQuery] Re: ajax xml question
Yup, it will be correct, so weird, why does Google's character wrong.
On 9月18日, 下午7時44分, lanxiazhi lanxia...@gmail.com wrote:
you may request the a.php directly in the browser ,and see if the charactors
display correctly.
2009/9/18 David .Wu chan1...@gmail.com
it's not work actually.
On 9月18日, 下午6時19分, lanxiazhi lanxia...@gmail.com wrote:
Now you will need to change the header:
header('Content-Type: text/xml; charset=UTF-8');
[jQuery] Re: ajax xml question
terrific!!! thanks a lot
On 9月17日, 下午5時57分, lanxiazhi lanxia...@gmail.com wrote:
specify content type to xml:
header(Content-type: text/xml);
if ($_GET['weather']) {
...
[jQuery] Re: ajax xml question
But I got one more question
http://www.google.com/ig/api?hl=zh-twweather=Changhua
This is the weather condition that response by my language, and the
value become garbage characters exclude English, any solution?
On 9月18日, 下午2時06分, David .Wu chan1...@gmail.com wrote:
terrific!!! thanks a lot
On 9月17日, 下午5時57分, lanxiazhi lanxia...@gmail.com wrote:
specify content type to xml:
header(Content-type: text/xml);
if ($_GET['weather']) {
...
[jQuery] Re: ajax xml question
I am using utf-8 too.
On 9月18日, 下午2時27分, Steven Yang kenshin...@gmail.com wrote:
I think you might have to check the encoding that google is usingI think
google should be using UTF-8. check the encoding on your side.
On Fri, Sep 18, 2009 at 2:11 PM, David .Wu chan1...@gmail.com wrote:
But I got one more question
http://www.google.com/ig/api?hl=zh-twweather=Changhua
This is the weather condition that response by my language, and the
value become garbage characters exclude English, any solution?
On 9月18日, 下午2時06分, David .Wu chan1...@gmail.com wrote:
terrific!!! thanks a lot
On 9月17日, 下午5時57分, lanxiazhi lanxia...@gmail.com wrote:
specify content type to xml:
header(Content-type: text/xml);
if ($_GET['weather']) {
...
[jQuery] Re: ajax xml question
As the matter of fact, I execute the weather.php like weather.php?
weather=1
and the character was right, so the problem is happend when ajax
delivery.
On 9月18日, 下午2時39分, David .Wu chan1...@gmail.com wrote:
I am using utf-8 too.
On 9月18日, 下午2時27分, Steven Yang kenshin...@gmail.com wrote:
I think you might have to check the encoding that google is usingI think
google should be using UTF-8. check the encoding on your side.
On Fri, Sep 18, 2009 at 2:11 PM, David .Wu chan1...@gmail.com wrote:
But I got one more question
http://www.google.com/ig/api?hl=zh-twweather=Changhua
This is the weather condition that response by my language, and the
value become garbage characters exclude English, any solution?
On 9月18日, 下午2時06分, David .Wu chan1...@gmail.com wrote:
terrific!!! thanks a lot
On 9月17日, 下午5時57分, lanxiazhi lanxia...@gmail.com wrote:
specify content type to xml:
header(Content-type: text/xml);
if ($_GET['weather']) {
...
[jQuery] Re: ajax xml question
it's not work actually.
On 9月18日, 下午6時19分, lanxiazhi lanxia...@gmail.com wrote:
Now you will need to change the header:
header('Content-Type: text/xml; charset=UTF-8');
[jQuery] ajax xml question
This is the source code that I want to get the weather from Google
API, Firefox, Safari, Opera will work, but IE can't get the value, so
I did some test, and I found the reason
xml structure in php page
$.get({a.php}, '', function() {}, html); // all browser work
besides IE
$.get({a.php}, '', function() {}, xml); // all browser not work
xml structure in xml page
$.get({a.xml}, '', function() {}, html); // all browser work
$.get({a.xml}, '', function() {}, xml); // all browser work
How to make IE accept xml that the file extension name is not xml?
?php
if ($_GET['weather']) {
echo file_get_contents('http://www.google.com/ig/api?
weather=Taipei');
exit;
}
?
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
titleweather/title
script type=text/javascript src=js/jquery-1.3.2.min.js/script
/head
body
div id=res/div
input type=button id=btn value=btn /
/body
/html
script
$(function() {
$('#btn').click(function() {
$.get('weather.php?weather=1', '', function(data) {
$('#res').html($(data).find('current_conditions').find
('condition').attr('data'));
});
});
});
/script
[jQuery] Re: Ajax get contents question
it's funny that I can use find to get res2's html, why?
filter res get res2 failed
find res failed res2 get
On 9月3日, 下午12時11分, David .Wu chan1...@gmail.com wrote:
This is my testing php code, I found if I use filter, I can only get
the content from first level of object, for example
div id=res1div id=res22/div/div
I can get res's contents by filter, but I can't get res2's contents,
is that possible that get any thing I want through ajax?
?php
if (isset($_POST['g'])) {
echo 'div id=res1div id=res22/div/div';
exit;}
?
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
titleget/title
script type=text/javascript src=js/jquery-1.3.2.min.js/script
/head
body
div id=show/div
input type=button id=btn1 value=btn1 /
input type=button id=btn2 value=btn2 /
script
$(function() {
$('#btn1').click(function() {
$.post('get.php', {g: 1}, function(data) {
var data = $(data).filter('#res').html();
$('#show').html(data);
});
});
$('#btn2').click(function() {
$.post('get.php', {g: 1}, function(data) {
var data = $(data).filter('#res2').html();
$('#show').html(data);
});
});});
/script
/body
/html
[jQuery] Ajax get contents question
This is my testing php code, I found if I use filter, I can only get
the content from first level of object, for example
div id=res1div id=res22/div/div
I can get res's contents by filter, but I can't get res2's contents,
is that possible that get any thing I want through ajax?
?php
if (isset($_POST['g'])) {
echo 'div id=res1div id=res22/div/div';
exit;
}
?
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
titleget/title
script type=text/javascript src=js/jquery-1.3.2.min.js/script
/head
body
div id=show/div
input type=button id=btn1 value=btn1 /
input type=button id=btn2 value=btn2 /
script
$(function() {
$('#btn1').click(function() {
$.post('get.php', {g: 1}, function(data) {
var data = $(data).filter('#res').html();
$('#show').html(data);
});
});
$('#btn2').click(function() {
$.post('get.php', {g: 1}, function(data) {
var data = $(data).filter('#res2').html();
$('#show').html(data);
});
});
});
/script
/body
/html
[jQuery] save to pdf
Is there any plugin can let me save the part of pag as pdf?
[jQuery] Re: How to hide pop is blur
How to declare other thing?
On 8月13日, 下午7時28分, Jon Banner banali...@googlemail.com wrote:
$('#show').click(function(){
$('#popup').fadeIn(slow, function(){
$(other things).click(function(){
$('#popup, #show').hide();
});
});
});
2009/8/13 David .Wu chan1...@gmail.com
There is a button control a div show or not, I want when you click
other things then the div will disappear too exclude div itself and
also the show button, how to do that?
[html]
html
.
input type=button id=show value=show
div id=popup style=display: none;
..
/div
/html
[JavaScript]
script
$('#show').click(function(){
$('#popup').toggle();
});
/script
[jQuery] How to hide pop is blur
There is a button control a div show or not, I want when you click
other things then the div will disappear too exclude div itself and
also the show button, how to do that?
[html]
html
.
input type=button id=show value=show
div id=popup style=display: none;
..
/div
/html
[JavaScript]
script
$('#show').click(function(){
$('#popup').toggle();
});
/script
[jQuery] How to get variable from iframe?
a.php iframe src=b.php/iframe .. script var a = 123; /script Can I catch variable a in b.php?
[jQuery] Re: Does IE support live?
got it, I need to define it again after I use ajax, it will be more
safe.
On 7月31日, 下午3時25分, rupak mandal rupakn...@gmail.com wrote:
hi David, you have to bind jump in load callback function.
$(function() {
$.ajaxSetup({
cache: false
});
$('#btn').click(function() {
$('div:first').load('b.html',function(){loadCallback();});
});
});
function loadCallback()
{
$('#jump').live('change', function() {
alert(1);
});
}
I think this will fulfill your requirement .
On Fri, Jul 31, 2009 at 12:28 PM, David .Wu chan1...@gmail.com wrote:
If I load b.html in firefox, alert(1) will work, but ont work in IE.
page a.html
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
titlelive/title
script type=text/javascript src=js/jquery-1.3.2.min.js/script
/head
body
div style=width: 300px; height: 300px; border: 1px solid red;/
div
input type=button id=btn value=btn /
script
$(function() {
$.ajaxSetup({
cache: false
});
$('#btn').click(function() {
$('div:first').load('b.html');
});
$('#jump').live('change', function() {
alert(1);
});
});
/script
/body
/html
page b.html
select id=jump
option value=11/option
option value=22/option
/select
[jQuery] a select question
if I have 3 div, how to filter the div without class abc? div/div div class=abc/div div/div
[jQuery] Re: a select question
thanks a lot, this is exactly what I want :)
On 8月3日, 下午9時44分, Liam Potter radioactiv...@gmail.com wrote:
I think he just wants to select anything without a certain class
eg
$(div:not('.abc'))
Michael Lawson wrote:
mmm a little more information in regards to what exactly you want to
do but
$('div').eq(i); where i is the index of the div you want to access
alternatively you could also do $('div:eq(i)');
cheers
Michael Lawson
Development Lead, Global Solutions, ibm.com
Phone: 1-276-206-8393
E-mail: mjlaw...@us.ibm.com
'Whether one believes in a religion or not,
and whether one believes in rebirth or not,
there isn't anyone who doesn't appreciate kindness and compassion..'
Inactive hide details for David .Wu ---08/03/2009 09:37:41 AM---if I
have 3 div, how to filter the div without class abc?David .Wu
---08/03/2009 09:37:41 AM---if I have 3 div, how to filter the div
without class abc?
From:
David .Wu chan1...@gmail.com
To:
jQuery (English) jquery-en@googlegroups.com
Date:
08/03/2009 09:37 AM
Subject:
[jQuery] a select question
if I have 3 div, how to filter the div without class abc?
div/div
div class=abc/div
div/div
[jQuery] Re: a select question
thanks a lot, this is exactly what I want :)
On 8月3日, 下午9時44分, Liam Potter radioactiv...@gmail.com wrote:
I think he just wants to select anything without a certain class
eg
$(div:not('.abc'))
Michael Lawson wrote:
mmm a little more information in regards to what exactly you want to
do but
$('div').eq(i); where i is the index of the div you want to access
alternatively you could also do $('div:eq(i)');
cheers
Michael Lawson
Development Lead, Global Solutions, ibm.com
Phone: 1-276-206-8393
E-mail: mjlaw...@us.ibm.com
'Whether one believes in a religion or not,
and whether one believes in rebirth or not,
there isn't anyone who doesn't appreciate kindness and compassion..'
Inactive hide details for David .Wu ---08/03/2009 09:37:41 AM---if I
have 3 div, how to filter the div without class abc?David .Wu
---08/03/2009 09:37:41 AM---if I have 3 div, how to filter the div
without class abc?
From:
David .Wu chan1...@gmail.com
To:
jQuery (English) jquery-en@googlegroups.com
Date:
08/03/2009 09:37 AM
Subject:
[jQuery] a select question
if I have 3 div, how to filter the div without class abc?
div/div
div class=abc/div
div/div
[jQuery] Does IE support live?
If I load b.html in firefox, alert(1) will work, but ont work in IE.
page a.html
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
titlelive/title
script type=text/javascript src=js/jquery-1.3.2.min.js/script
/head
body
div style=width: 300px; height: 300px; border: 1px solid red;/
div
input type=button id=btn value=btn /
script
$(function() {
$.ajaxSetup({
cache: false
});
$('#btn').click(function() {
$('div:first').load('b.html');
});
$('#jump').live('change', function() {
alert(1);
});
});
/script
/body
/html
page b.html
select id=jump
option value=11/option
option value=22/option
/select
[jQuery] Re: fn question
totally understand, thanks a lot
On 7月30日, 上午7時39分, Jules jwira...@gmail.com wrote:
From the jquery pluginhttp://docs.jquery.com/Plugins/Authoring
Your method must return the jQuery object, unless explicity noted
otherwise.
$('input#btn').btnClick().css(background-color,blue) won't work
for your 1st case but works for the 2nd one.
On Jul 30, 3:14 pm, David .Wu chan1...@gmail.com wrote:
I found these both work, so what is return for?
script
$.fn.btnClick = function() {
this.click(function() {
alert('test');
});
}
$('input#btn').btnClick();
/script
script
$.fn.btnClick = function() {
return this.click(function() {
alert('test');
});
}
$('input#btn').btnClick();
/script
[jQuery] fn question
I found these both work, so what is return for?
script
$.fn.btnClick = function() {
this.click(function() {
alert('test');
});
}
$('input#btn').btnClick();
/script
script
$.fn.btnClick = function() {
return this.click(function() {
alert('test');
});
}
$('input#btn').btnClick();
/script
[jQuery] Can I catch the property of CSS filter?
the image is like
img style=filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='aa.png') ...
$('img').css('filter') will get
progid:DXImageTransform.Microsoft.AlphaImageLoader(src='aa.png')
Can I get the aa.png directly?
[jQuery] image resize issue
我今天有兩個放大縮小按鈕，想讓user按放大時用js把一個100x72的圖片 以寬為主每次加4px等比放大，反之亦然，但不知道小數位數該如何取才能正確控制高度 等比放大的公式為 I have two button to let user enlarge or reduce a 100px x 72px image immediately on the page, 4px enlarge or reduce one time by width, but I don't know how to control the height to make resize proportionally. resize formula is below: enlarge (height/width)*(width+4) reduce (height/width)*(width-4) I try to use xnview software to get the resize information, you can see, the height will not resize proportionally after few clicks, for example, if I click reduce 10 times, and click enlarge 10 times, the image should be origin size 100x72, but it's not, how to do it right? xnview reduce 100 72 96 69 92 66 88 63 84 60 80 58 76 55 JS reduce 100 72 96 69.12 92 66.125 88 63.130434782608695 84 60.13636363636364 80 57.142857142857146 76 54.15 xnview enlarge 100 72 104 75 108 78 112 81 116 84 120 86 124 89 JS enlarge 100 72 104 74.88 108 77.88461538461539 112 80.89 116 83.89285714285714 120 86.89655172413794 124 89.89
[jQuery] Re: remove question
Nice trick.
On 6月13日, 上午9時36分, brian bally.z...@gmail.com wrote:
On Fri, Jun 12, 2009 at 2:37 PM, amuhlouamysch...@gmail.com wrote:
putting it all together, you'd get something like:
$('#div1').replaceWith($('#div2')).remove();
first you find div1, then replace it with div2, then remove div1
There's no need for remove() because it will have been replaced already.
[jQuery] Re: jQuery, ajax, json, php
Actually I want need server side doing work, and I don't know how php
get json, nothing to do with client side.
On 6月12日, 下午4時55分, Anish cani...@gmail.com wrote:
What you get while trying $json['name'] ??
Why don't you try getJSON instead of calling usual ajax call ??
Regards,
Anish**
On Jun 11, 4:40 pm, David .Wu chan1...@gmail.com wrote:
If I send a json format to php, how to get the value from php? for
example
front page
script
var jsonStr = '{name: David, age, 23}';
$.ajax({
url: 'json.php',
type: 'POST',
cache: false,
data: {json: jsonStr},
success: function(data) {
alert(data);
}});
/script
php page
?php
$json = $_POST['json'];
// it's get {name:David,age: 23}, but how to gete name?
?
[jQuery] json question.
This the html file
I want to catch the object property inside obj and make them a json
string like
'{div: [{name: div1, w: 100, h: 100}, {name: div2,
w: 200, h: 200 }], img: [{name:, img1, w: 50, h:
50}]}';
any suggestion to accomplish it?
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
titlejson question/title
script type=text/javascript src=js/jquery-1.3.2.min.js/script
/head
body
div id=obj
img src=1.jpg width=50 height=50 status=img id=img1 /
div id=div1 status=div style=width: 100px; height: 100px;/
div
div id=div2 status=div style=width: 200px; height: 200px;/
div
/div
/body
/html
[jQuery] Re: How to flip the image?
Thanks for your kindly response, but I only want to make a image horizontal flip by click a button, no need animation. On 6月11日, 下午5時01分, Michael Smith smi...@gmail.com wrote: If you're trying to do what I think you're trying to do then I think you can do it with the jquery cycle plugin by transitioning to an identical image. I did this on the right hand image on this example: http://dev2.savingforchildren.co.uk/mjs/curtain2.epl Perhaps there's an easier way but I don't know of it. Michael On Wed, Jun 10, 2009 at 1:27 PM, David .Wuchan1...@gmail.com wrote: Can I make image vertical or horizontal flip by jQuery?
[jQuery] jQuery, ajax, json, php
If I send a json format to php, how to get the value from php? for
example
front page
script
var jsonStr = '{name: David, age, 23}';
$.ajax({
url: 'json.php',
type: 'POST',
cache: false,
data: {json: jsonStr},
success: function(data) {
alert(data);
}
});
/script
php page
?php
$json = $_POST['json'];
// it's get {name:David,age: 23}, but how to gete name?
?
[jQuery] remove question
Can I remove div1 but div2 keep there? div id=1 div id=2/div /div
[jQuery] Re: jQuery, ajax, json, php
it's work, cool.
On 6月11日, 下午11時58分, Tomáš Kavalek tomas.kava...@gmail.com wrote:
Maybe you should use json_decode($json, true); in case of you have a
problem with json_decode($json);
On 11 čvn, 14:17, Chris Chen cdcc...@gmail.com wrote:
$json = $_POST['json'];
$user = json_decode($json);
echo $user['name'];
2009/6/11 Val Cartei val.car...@gmail.com
with data.name (data is the json object you pass to your success
function). Like:
success: function(data) {
alert(data.name);
}
Val
On Thu, Jun 11, 2009 at 12:40 PM, David .Wuchan1...@gmail.com wrote:
If I send a json format to php, how to get the value from php? for
example
front page
script
var jsonStr = '{name: David, age, 23}';
$.ajax({
url: 'json.php',
type: 'POST',
cache: false,
data: {json: jsonStr},
success: function(data) {
alert(data);
}
});
/script
php page
?php
$json = $_POST['json'];
// it's get {name:David,age: 23}, but how to gete name?
?
--
Valentina Cartei
Telephone Numbers:
University +44 (0) 1273 877560
Work +44 (0) 1273 206306
Mobile +44 (0)796 6882820
--
Chris
[jQuery] How to flip the image?
Can I make image vertical or horizontal flip by jQuery?
[jQuery] How to get option's position
if I have a menu, how to get the position of the option after I select one of it? for example, if I choose b, and the position should b 2. select optiona/option optionb/option optionc/option /select
[jQuery] How to get file name
img src=images/xxx.gif
$('img').attr('src') - This will get images/xxx.gif
How to get xxx.gif by jQuery?
[jQuery] Re: How to get file name
If I use split, how to get the last array?
On 4月28日, 下午6時39分, Remon Oldenbeuving r.s.oldenbeuv...@gmail.com
wrote:
I dont think there's a real jQuery way, you could use regular
expressions, or maybe split the string with .split('/')
On 28 apr 2009, at 10:36, David .Wu chan1...@gmail.com wrote:
img src=images/xxx.gif
$('img').attr('src') - This will get images/xxx.gif
How to get xxx.gif by jQuery?
[jQuery] Re: How to get file name
I got it, thanks everyone.
$('img').attr('src').split('/').pop();
On 4月28日, 下午6時39分, Remon Oldenbeuving r.s.oldenbeuv...@gmail.com
wrote:
I dont think there's a real jQuery way, you could use regular
expressions, or maybe split the string with .split('/')
On 28 apr 2009, at 10:36, David .Wu chan1...@gmail.com wrote:
img src=images/xxx.gif
$('img').attr('src') - This will get images/xxx.gif
How to get xxx.gif by jQuery?
[jQuery] How to catch mouse position inside an area?
If I got a 400px width div, can I get the offset left distance from mouse to the div in where I click?
[jQuery] How to customize scroll bar
I use jQuery slider ui, and I want to customize the scroll bar http://penta.twnoc.com/product_detail.php?type=1sub=1 almost done, but only one thing, when you scroll handle box to right, the box will over the scroll bar, and I don't know how to fix it.
[jQuery] A filter question
If I have 5 div, have the same name but different rel, div name=myDiv rel=1 style=display:block;/div div name=myDiv rel=1 style=display:none;/div div name=myDiv rel=2 style=display:block;/div div name=myDiv rel=2 style=display:none;/div div name=myDiv rel=2 style=display:none;/div how to find out the div which hidden and rel is 2?
[jQuery] Re: How to find a div's which have background-img?
I made a function, but I hope I can do it by jquery selectors.
$(function() {
$('div').each(function() {
var $bk = $(this).css('background-image');
if ($bk.match('png')) {
console.log('yes');
} else {
console.log('no');
}
});
});
On 2月25日, 下午12時53分, David .Wu chan1...@gmail.com wrote:
I have hundred or css class need that, I am afraid that it's better to
search which has the property.
On 2月25日, 下午12時18分, Steven Yang kenshin...@gmail.com wrote:
according to your case
use$(.box)
or
$(div .box)
since all elements with class box will have background image
[jQuery] How to find a div's which have background-img?
for example
.box {
background-image: url(images/png_back.png);
}
div class=box/div
Can I filter the div which have backround-image?
[jQuery] Re: How to find a div's which have background-img?
I have hundred or css class need that, I am afraid that it's better to search which has the property. On 2月25日, 下午12時18分, Steven Yang kenshin...@gmail.com wrote: according to your case use$(.box) or $(div .box) since all elements with class box will have background image
[jQuery] Disaster with Png fix
IE6 doesn't support transparent png file, so people usually use javascript to fix it. This is what I choose http://www.twinhelix.com/css/iepngfix/ but when I use it with ui such as $.dialog() in IE6, the effect become pretty slow for example http://www.yuri.com.tw/member_register.php This is a member registration page, 出生年月日 means birthday, I put ui datepicker here, in IE7 or Firefox or any other browser works well, but in IE6 it's like a disaster does any one have better solution to make it6 use both png fix and jQuery ui well?
[jQuery] ajax question
if we want to transfer some variable to another page by ajax, we use
data: {a: 1, b: 2}
and it will send like xxx.php?a=1b=2
but if a is not a constant variable, such as
var $a = x
data: {$a: 1} I want it become xxx.php?x=1
var $a = y
data: {$a: 1} I want it become xxx.php?y=1
how to do that?
[jQuery] blockUI issue
I found it's not work in IE7 with flash, is it?
[jQuery] Re: blockUI issue
this is demo page. http://www.yuri.com.tw/debug/blockui.php On 2月21日, 上午1時56分, David .Wu chan1...@gmail.com wrote: I found it's not work in IE7 with flash, is it?
[jQuery] clone form information
sometimes we have two form that almost the same fields, so we will
give client a clone button if the information is complete the same,
this is how I do now, is there any easy way to accomplish that?
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
titleclone form/title
style type=text/css
!--
body {
font-size: 12px;
}
div.box {
width: 500px;
border: 1px solid #00;
padding: 6px;
margin: 0 0 6px 0;
}
--
/style
script type=text/javascript src=js/jquery-1.3.1.js/script
/head
body
div class=box
form method=post name=form1 id=form1
label for=namename/label
input name=name type=text id=name value=David /
br /
label
input name=gender type=radio id=gender_0 value=1
checked=checked /
male/label
br /
label
input type=radio name=gender value=0 id=gender_1 /
female/label
br /
input type=checkbox id=clone /label
for=cloneclone/label
/form
/div
div class=box
form method=post name=form2 id=form2
label for=name2name2/label
input type=text name=name2 id=name2 /
label
br /
input type=radio name=gender2 value=1
id=gender2_0 /
male/label
br /
label
input type=radio name=gender2 value=0
id=gender2_1 /
female/label
br /
/form
/div
script language=javascript
!--
$(function() {
/*if click checkbox clone*/
$('input#clone').click(function() {
$name = $('form#form1 input#name');
$gender = $('form#form1 input[name=gender]');
$name2 = $('form#form2 input#name2');
$gender2 = $('form#form2 input[name=gender2]');
/*
* check if it been checked
* if checked clone the information
* if not checked clear form2's value
*/
if ($(this).is(':checked')) {
$name2.val($name.val());
$gender.each(function() {
if ($(this).is(':checked')) {
$gender2.eq($gender.index(this)).attr('checked', true);
}
});
} else {
$name2.val('');
$gender2.attr('checked', false);
}
});
});
--
/script
/body
/html
[jQuery] Re: How to find the biggest value?
thanks a lot.
On 2月12日, 下午4時23分, Stephan Veigl stephan.ve...@gmail.com wrote:
Hi David,
var max = null;
$(#box div).each(function() {
if ( !max || max.height() $(this).height() )
max = $(this);
});
// flash max div
max.fadeOut().fadeIn();
by(e)
Stephan
2009/2/12 David .Wu chan1...@gmail.com:
for example, how to find biggest div height under box.
div id=box
div./div
div./div
div./div
/div
[jQuery] How to find the biggest value?
for example, how to find biggest div height under box. div id=box div./div div./div div./div /div
[jQuery] Re: please help me for the performance
I think so, but it's the requirement, so maybe there is another way to achieve it, I still figure on it. On 2月7日, 下午3時23分, jQuery Lover ilovejqu...@gmail.com wrote: Removing image reflection might improve performance... Read jQuery HowTo Resource - http://jquery-howto.blogspot.com On Sat, Feb 7, 2009 at 2:58 AM, David .Wu chan1...@gmail.com wrote: url:http://chan.idv.tw:90/test/marquee/marquee.html rar:http://chan.idv.tw:90/test/marquee/marquee.rar Hi, this is a image marquee to display the product, I feel a little bit lag when mouse over the image from left to right at the same time, please help me to improve the performance.
[jQuery] How to make hyperlink failed
If I got a hyperlink a href=http://xxx.com; id=xx/a
$(function() {
$('#xxx').click(function() {
.
..//do something
});
})
I want to make the link doing something if browser opened javascript,
and if not, it go to the page it referred.
[jQuery] Re: How to make hyperlink failed
yup, that's what I want, thank you very much.
On 2月9日, 下午3時27分, Geuis geuis.te...@gmail.com wrote:
I think you're asking, how do you prevent a link from doing anything
when the browser has javascript enabled.
$('#xxx').click(function(){
//your stuff
return false;
}
On Feb 8, 11:22 pm, David .Wu chan1...@gmail.com wrote:
If I got a hyperlink a href=http://xxx.com; id=xx/a
$(function() {
$('#xxx').click(function() {
.
..//do something
});
})
I want to make the link doing something if browser opened javascript,
and if not, it go to the page it referred.
[jQuery] please help me for the performance
url: http://chan.idv.tw:90/test/marquee/marquee.html rar: http://chan.idv.tw:90/test/marquee/marquee.rar Hi, this is a image marquee to display the product, I feel a little bit lag when mouse over the image from left to right at the same time, please help me to improve the performance.
[jQuery] Re: How to enlarge size proportionally
Sorry for my bad explanation, I make a sample online
http://chan.idv.tw/animate/enlarge.html
On 2月3日, 下午11時11分, Eric Garside gars...@gmail.com wrote:
Hmm. Lets say you need it to grow 100px. Would:
$('#anim').animate({paddingLeft: 50, width: 50});
work? It's hard to say what would help without a better idea of what
the element you want to grow looks like.
On Feb 3, 9:34 am, David .Wu chan1...@gmail.com wrote:
animate function can change object's size by control css, such as
width and height,
if if we want to increase the width, the width increased to right
-
how to do it like below
- -
[jQuery] Re: How to enlarge size proportionally
yup, I tried, but still not know to to do it proportionally. sigh..
On 2月4日, 上午12時43分, Eric Garside gars...@gmail.com wrote:
Try the jQuery UI Scaling effect.
http://docs.jquery.com/UI/Effects/Scale
On Feb 3, 11:21 am, David .Wu chan1...@gmail.com wrote:
Sorry for my bad explanation, I make a sample
onlinehttp://chan.idv.tw/animate/enlarge.html
On 2月3日, 下午11時11分, Eric Garside gars...@gmail.com wrote:
Hmm. Lets say you need it to grow 100px. Would:
$('#anim').animate({paddingLeft: 50, width: 50});
work? It's hard to say what would help without a better idea of what
the element you want to grow looks like.
On Feb 3, 9:34 am, David .Wu chan1...@gmail.com wrote:
animate function can change object's size by control css, such as
width and height,
if if we want to increase the width, the width increased to right
-
how to do it like below
- -
[jQuery] Re: How to enlarge size proportionally
thanks, this plugin is really cool. On 2月4日, 上午1時50分, Mike Alsup mal...@gmail.com wrote: yup, I tried, but still not know to to do it proportionally. sigh.. Look at the technique used in this plugin: http://www.malsup.com/jquery/hoverpulse/
[jQuery] Re: How to enlarge size proportionally
but is that mean I have to write lots code to do what I want? actually I know the trick, just want to know can it complete through jQuery effect by only set the options. On 2月4日, 上午1時55分, David .Wu chan1...@gmail.com wrote: thanks, this plugin is really cool. On 2月4日, 上午1時50分, Mike Alsup mal...@gmail.com wrote: yup, I tried, but still not know to to do it proportionally. sigh.. Look at the technique used in this plugin: http://www.malsup.com/jquery/hoverpulse/
[jQuery] How to enlarge size proportionally
animate function can change object's size by control css, such as width and height, if if we want to increase the width, the width increased to right - how to do it like below - -
[jQuery] Re: How to enlarge size proportionally
I got it, thanks. On 2月4日, 上午9時07分, Mike Alsup mal...@gmail.com wrote: but is that mean I have to write lots code to do what I want? actually I know the trick, just want to know can it complete through jQuery effect by only set the options. No, I only wanted you to see that to achieve that effect you need to animate both the size *and* the position. As the width animates you also animate the 'left' property so that it appears to grow in both directions. As Ricardo showed, you can do it with one call to animate. Mike
[jQuery] how to do '++' in jQuery
some times we want to do some animation we use xxx.width++
in jQuery we give value like this $('xx').width(value)
how to do ++ thing in this way?
[jQuery] Re: how to do '++' in jQuery
yup, it's cool, but how about scrollLeft()++?
On 1月21日, 下午9時22分, Liam Potter radioactiv...@gmail.com wrote:
This I didn't know, could be useful.
Balazs Endresz wrote:
Moreover, as of 1.3 this works like .css, so there's no animation at
all:
$(xx).animate({ width: +=10px }, 0);
(In 1.2 if you set the duration to 0 then the default value is used.)
On Jan 21, 1:00 pm, Liam Potter radioactiv...@gmail.com wrote:
like this
$(xx).animate({ width: +=10px },1000);
this will add 10 pixels to the width, in a second.
Kean wrote:
Probably there's a better way. Doesn't look elegant.
$('xx').width($('xx').width()++) ;
On Jan 21, 2:05 am, David .Wu chan1...@gmail.com wrote:
some times we want to do some animation we use xxx.width++
in jQuery we give value like this $('xx').width(value)
how to do ++ thing in this way?
[jQuery] Images resize problem with Aajx
My process is
1. load images from other php file
2. put the response thing into a div
3. check all image sizes
4. resize image if the size over the restriction
the problem is sometimes images resize failed, how to make sure the
resize process work.
html code
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
titledemo/title
style
!--
div#slide
{
width:100px;
height:50px;
overflow:hidden;
}
div#slide ul
{
margin:0px;
padding:0px;
list-style:none;
}
div#slide li
{
float:left;
}
--
/style
script type=text/javascript src=js/jquery-1.2.6.js/script
/head
body
div id=slide/div
script language=javascript
!--
$(document).ready(function()
{
$.ajax(
{
url:'ajax.php',
type:'get',
cache:false,
success:function(data)
{
/*
data will response html
ul
liimg src=1.jpg/li
liimg src=2.jpg/li
liimg src=3.jpg/li
/ul
*/
$('div#slide').html(data);
},
complete:function()
{
$h = 40; /* images hight restriction */
/* resize the image */
$('div#slide img').each(function()
{
if($(this).height() $h)
$(this).height($h);
});
}
});
});
//--
/script
/body
/html
[jQuery] Re: Images resize problem with Aajx
please tell me more tips, I don't really understand what to do.
On 1月17日, 下午9時21分, jQuery Lover ilovejqu...@gmail.com wrote:
If the image is not loaded by the time you call .height() function it
returns 0. Since your code is run right after the ajax request is
completed browser has no idea what is the size of that images.
Tip: You could bind a .load() event to your images and change the size
of that particular image on its load.
Read jQuery HowTo Resource - http://jquery-howto.blogspot.com
On Sat, Jan 17, 2009 at 5:34 PM, David .Wu chan1...@gmail.com wrote:
My process is
1. load images from other php file
2. put the response thing into a div
3. check all image sizes
4. resize image if the size over the restriction
the problem is sometimes images resize failed, how to make sure the
resize process work.
html code
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
titledemo/title
style
!--
div#slide
{
width:100px;
height:50px;
overflow:hidden;
}
div#slide ul
{
margin:0px;
padding:0px;
list-style:none;
}
div#slide li
{
float:left;
}
--
/style
script type=text/javascript src=js/jquery-1.2.6.js/script
/head
body
div id=slide/div
script language=javascript
!--
$(document).ready(function()
{
$.ajax(
{
url:'ajax.php',
type:'get',
cache:false,
success:function(data)
{
/*
data will response html
ul
liimg src=1.jpg/li
liimg src=2.jpg/li
liimg src=3.jpg/li
/ul
*/
$('div#slide').html(data);
},
complete:function()
{
$h = 40; /* images hight restriction */
/* resize the image */
$('div#slide img').each(function()
{
if($(this).height() $h)
$(this).height($h);
});
}
});
});
//--
/script
/body
/html
[jQuery] Re: Images resize problem with Aajx
aha, I understand, it's work, thanks :)
$img1.load(function()
{
$(this).each(function()
{
if($(this).height() $h) $(this).height($h);
});
});
On 1月17日, 下午9時21分, jQuery Lover ilovejqu...@gmail.com wrote:
If the image is not loaded by the time you call .height() function it
returns 0. Since your code is run right after the ajax request is
completed browser has no idea what is the size of that images.
Tip: You could bind a .load() event to your images and change the size
of that particular image on its load.
Read jQuery HowTo Resource - http://jquery-howto.blogspot.com
On Sat, Jan 17, 2009 at 5:34 PM, David .Wu chan1...@gmail.com wrote:
My process is
1. load images from other php file
2. put the response thing into a div
3. check all image sizes
4. resize image if the size over the restriction
the problem is sometimes images resize failed, how to make sure the
resize process work.
html code
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
titledemo/title
style
!--
div#slide
{
width:100px;
height:50px;
overflow:hidden;
}
div#slide ul
{
margin:0px;
padding:0px;
list-style:none;
}
div#slide li
{
float:left;
}
--
/style
script type=text/javascript src=js/jquery-1.2.6.js/script
/head
body
div id=slide/div
script language=javascript
!--
$(document).ready(function()
{
$.ajax(
{
url:'ajax.php',
type:'get',
cache:false,
success:function(data)
{
/*
data will response html
ul
liimg src=1.jpg/li
liimg src=2.jpg/li
liimg src=3.jpg/li
/ul
*/
$('div#slide').html(data);
},
complete:function()
{
$h = 40; /* images hight restriction */
/* resize the image */
$('div#slide img').each(function()
{
if($(this).height() $h)
$(this).height($h);
});
}
});
});
//--
/script
/body
/html
[jQuery] Re: Images resize problem with Aajx
I got one more question, actually I need to clone the result of $td1
into another $td2, how to do it after the load function finish.
$img1.load(function()
{
$(this).each(function()
{
if($(this).height() $h) $(this).height($h);
});
});
$tbl1.clone().prependTo($td2);
On 1月18日, 上午12時43分, David .Wu chan1...@gmail.com wrote:
aha, I understand, it's work, thanks :)
$img1.load(function()
{
$(this).each(function()
{
if($(this).height() $h) $(this).height($h);
});
});
On 1月17日, 下午9時21分, jQuery Lover ilovejqu...@gmail.com wrote:
If the image is not loaded by the time you call .height() function it
returns 0. Since your code is run right after the ajax request is
completed browser has no idea what is the size of that images.
Tip: You could bind a .load() event to your images and change the size
of that particular image on its load.
Read jQuery HowTo Resource - http://jquery-howto.blogspot.com
On Sat, Jan 17, 2009 at 5:34 PM, David .Wu chan1...@gmail.com wrote:
My process is
1. load images from other php file
2. put the response thing into a div
3. check all image sizes
4. resize image if the size over the restriction
the problem is sometimes images resize failed, how to make sure the
resize process work.
html code
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
titledemo/title
style
!--
div#slide
{
width:100px;
height:50px;
overflow:hidden;
}
div#slide ul
{
margin:0px;
padding:0px;
list-style:none;
}
div#slide li
{
float:left;
}
--
/style
script type=text/javascript src=js/jquery-1.2.6.js/script
/head
body
div id=slide/div
script language=javascript
!--
$(document).ready(function()
{
$.ajax(
{
url:'ajax.php',
type:'get',
cache:false,
success:function(data)
{
/*
data will response html
ul
liimg src=1.jpg/li
liimg src=2.jpg/li
liimg src=3.jpg/li
/ul
*/
$('div#slide').html(data);
},
complete:function()
{
$h = 40; /* images hight restriction */
/* resize the image */
$('div#slide img').each(function()
{
if($(this).height() $h)
$(this).height($h);
});
}
});
});
//--
/script
/body
/html
[jQuery] Re: Images resize problem with Aajx
I got one more question, actually I need to clone the result of $td1
into another $td2, how to do it after the load function finish.
$img1.load(function()
{
$(this).each(function()
{
if($(this).height() $h) $(this).height($h);
});
});
$tbl1.clone().prependTo($td2);
On 1月18日, 上午12時43分, David .Wu chan1...@gmail.com wrote:
aha, I understand, it's work, thanks :)
$img1.load(function()
{
$(this).each(function()
{
if($(this).height() $h) $(this).height($h);
});
});
On 1月17日, 下午9時21分, jQuery Lover ilovejqu...@gmail.com wrote:
If the image is not loaded by the time you call .height() function it
returns 0. Since your code is run right after the ajax request is
completed browser has no idea what is the size of that images.
Tip: You could bind a .load() event to your images and change the size
of that particular image on its load.
Read jQuery HowTo Resource - http://jquery-howto.blogspot.com
On Sat, Jan 17, 2009 at 5:34 PM, David .Wu chan1...@gmail.com wrote:
My process is
1. load images from other php file
2. put the response thing into a div
3. check all image sizes
4. resize image if the size over the restriction
the problem is sometimes images resize failed, how to make sure the
resize process work.
html code
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
titledemo/title
style
!--
div#slide
{
width:100px;
height:50px;
overflow:hidden;
}
div#slide ul
{
margin:0px;
padding:0px;
list-style:none;
}
div#slide li
{
float:left;
}
--
/style
script type=text/javascript src=js/jquery-1.2.6.js/script
/head
body
div id=slide/div
script language=javascript
!--
$(document).ready(function()
{
$.ajax(
{
url:'ajax.php',
type:'get',
cache:false,
success:function(data)
{
/*
data will response html
ul
liimg src=1.jpg/li
liimg src=2.jpg/li
liimg src=3.jpg/li
/ul
*/
$('div#slide').html(data);
},
complete:function()
{
$h = 40; /* images hight restriction */
/* resize the image */
$('div#slide img').each(function()
{
if($(this).height() $h)
$(this).height($h);
});
}
});
});
//--
/script
/body
/html
[jQuery] Re: Images resize problem with Aajx
I mean, I want to clone the image to another place with the image
resize finished, for example
I load three images by ajax
1.jpg height 200px
2.jpg height 350px
3.jpg height 400px
and my restriction is 180, therefore, images will resize to my rule
successfully, and I want to clone it in another table at the same
page, so I use jQuery clone function, the first three images resize
successful but the clone one become the origin size, I guess it clone
the image before it's resized, so how do I do the clone function after
the resize function truly be executed.
On 1月18日, 上午1時07分, jQuery Lover ilovejqu...@gmail.com wrote:
Didn't get exactly what you meant, but if you want to do something
when loading has finished then put it into the load() function.
.load(function(){
// your code
});
Read jQuery HowTo Resource - http://jquery-howto.blogspot.com
On Sat, Jan 17, 2009 at 9:53 PM, David .Wu chan1...@gmail.com wrote:
I got one more question, actually I need to clone the result of $td1
into another $td2, how to do it after the load function finish.
$img1.load(function()
{
$(this).each(function()
{
if($(this).height() $h) $(this).height($h);
});
});
$tbl1.clone().prependTo($td2);
On 1月18日, 上午12時43分, David .Wu chan1...@gmail.com wrote:
aha, I understand, it's work, thanks :)
$img1.load(function()
{
$(this).each(function()
{
if($(this).height() $h) $(this).height($h);
});
});
On 1月17日, 下午9時21分, jQuery Lover ilovejqu...@gmail.com wrote:
If the image is not loaded by the time you call .height() function it
returns 0. Since your code is run right after the ajax request is
completed browser has no idea what is the size of that images.
Tip: You could bind a .load() event to your images and change the size
of that particular image on its load.
Read jQuery HowTo Resource - http://jquery-howto.blogspot.com
On Sat, Jan 17, 2009 at 5:34 PM, David .Wu chan1...@gmail.com wrote:
My process is
1. load images from other php file
2. put the response thing into a div
3. check all image sizes
4. resize image if the size over the restriction
the problem is sometimes images resize failed, how to make sure the
resize process work.
html code
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
titledemo/title
style
!--
div#slide
{
width:100px;
height:50px;
overflow:hidden;
}
div#slide ul
{
margin:0px;
padding:0px;
list-style:none;
}
div#slide li
{
float:left;
}
--
/style
script type=text/javascript src=js/jquery-1.2.6.js/script
/head
body
div id=slide/div
script language=javascript
!--
$(document).ready(function()
{
$.ajax(
{
url:'ajax.php',
type:'get',
cache:false,
success:function(data)
{
/*
data will response html
ul
liimg
src=1.jpg/li
liimg
src=2.jpg/li
liimg
src=3.jpg/li
/ul
*/
$('div#slide').html(data);
},
complete:function()
{
$h = 40; /* images hight restriction */
/* resize the image */
$('div#slide img').each(function()
{
if($(this).height() $h)
$(this).height($h);
});
}
});
});
//--
/script
/body
/html
[jQuery] How to get sum of children element's width
This is the way I got the size now, is there any function can do the
same thing?
Html code
div
img src=..
img src=..
img src=..
/div
script
$(function()
{
$sum = 0;
$('div img').each(function()
{
$sum += $(this).width();
});
console.log($sum);
});
/script
[jQuery] Re: How to get sum of children element's width
yup, that's right.
On 1月18日, 上午6時49分, MorningZ morni...@gmail.com wrote:
One problem is you have to wait for all the images to actually be
loaded (something that is not guarenteed inside document.ready
so switch
$(function()
to
$(window).load(function()
and you'll get the results
On Jan 17, 3:27 pm, David .Wu chan1...@gmail.com wrote:
This is the way I got the size now, is there any function can do the
same thing?
Html code
div
img src=..
img src=..
img src=..
/div
script
$(function()
{
$sum = 0;
$('div img').each(function()
{
$sum += $(this).width();
});
console.log($sum);
});
/script
[jQuery] Re: Can I get the contents from respose by ajax
it's work, thanks
On 1月12日, 下午5時03分, Balazs Endresz balazs.endr...@gmail.com wrote:
Use filter with $.ajax:
$('#response').html($(res).filter('#a').text());
On Jan 12, 9:30 am, David .Wu chan1...@gmail.com wrote:
And I found the load is not work either, because it still get the
construct not the value
for example
div id=test/div
$(document).ready(function)
{
$('#test').load('ajax.php #a');
});
and the result was
div id=testdiv id=a123/div/div, what I exactly want is
div id=test123/div
On 1月11日, 下午8時13分, Balazs Endresz balazs.endr...@gmail.com wrote:
As jQuery parses this html the output will contain three elements:
title, meta, and the div instead of the single html. So .find() won't
work because it will search in the descendant elements, but filter
will return '#a' because it's an element of the current jQuery object.
$('html/html') doesn't work either, I guess it's not possible to
create an html element so easily.
You can also try setting the dataType option to html (or maybe xml).
On Jan 11, 11:13 am, David .Wu chan1...@gmail.com wrote:
I tried all your suggestion, but got some weired result.
ajax.html
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
titleajax/title
script type=text/javascript src=js/jquery-1.2.6.js/script
/head
body
div id=response/div
input name=btn type=button value=ajax id=btn /
script language=javascript
!--
$(document).ready(function()
{
$('#btn').click(function()
{
$.ajax(
{
url:'ajax.php',
cache:false,
success:function(res)
{
$('#response').html($('#a',res).text()); //got nothing
$('#response').html($(res + '
#a').text()); //got ajaxtest
contents
$('#response').html($(res).find('#a').text()); //got nothing
}
});
});
});
//--
/script
/body
/html
ajax.php
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
titleajax/title
/head
body
div id=atest contents/div
/body
/html
On 1月10日, 上午2時11分, dropcube ronnyh...@gmail.com wrote:
is there any way to get the value 123 straight from div?
yes, just apply a jQuery selector to the response content and get
whatever you need. In this example:
$('#a', res).text();
OR
$(res).find('#a').text();
You can also try with $.load that allows you to specify a jQuery
selector in the URL.
[jQuery] Re: Can I get the contents from respose by ajax
nope, it's doesn't work, I type the wrong character but something
interesting happened
$('#response').html($(res).filter('#a').text()); - it's not work
$('#response').html($(res).filter('$a').text()); - it's give me 123,
but not truly work,
$('#response').html($(res).text()); - it's not work the same meaning
like above, it response text part from responseText
On 1月12日, 下午5時03分, Balazs Endresz balazs.endr...@gmail.com wrote:
Use filter with $.ajax:
$('#response').html($(res).filter('#a').text());
On Jan 12, 9:30 am, David .Wu chan1...@gmail.com wrote:
And I found the load is not work either, because it still get the
construct not the value
for example
div id=test/div
$(document).ready(function)
{
$('#test').load('ajax.php #a');
});
and the result was
div id=testdiv id=a123/div/div, what I exactly want is
div id=test123/div
On 1月11日, 下午8時13分, Balazs Endresz balazs.endr...@gmail.com wrote:
As jQuery parses this html the output will contain three elements:
title, meta, and the div instead of the single html. So .find() won't
work because it will search in the descendant elements, but filter
will return '#a' because it's an element of the current jQuery object.
$('html/html') doesn't work either, I guess it's not possible to
create an html element so easily.
You can also try setting the dataType option to html (or maybe xml).
On Jan 11, 11:13 am, David .Wu chan1...@gmail.com wrote:
I tried all your suggestion, but got some weired result.
ajax.html
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
titleajax/title
script type=text/javascript src=js/jquery-1.2.6.js/script
/head
body
div id=response/div
input name=btn type=button value=ajax id=btn /
script language=javascript
!--
$(document).ready(function()
{
$('#btn').click(function()
{
$.ajax(
{
url:'ajax.php',
cache:false,
success:function(res)
{
$('#response').html($('#a',res).text()); //got nothing
$('#response').html($(res + '
#a').text()); //got ajaxtest
contents
$('#response').html($(res).find('#a').text()); //got nothing
}
});
});
});
//--
/script
/body
/html
ajax.php
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
titleajax/title
/head
body
div id=atest contents/div
/body
/html
On 1月10日, 上午2時11分, dropcube ronnyh...@gmail.com wrote:
is there any way to get the value 123 straight from div?
yes, just apply a jQuery selector to the response content and get
whatever you need. In this example:
$('#a', res).text();
OR
$(res).find('#a').text();
You can also try with $.load that allows you to specify a jQuery
selector in the URL.
[jQuery] Re: Can I get the contents from respose by ajax
never mind, it's really work now, filter is great, thanks.
On 1月13日, 下午7時19分, David .Wu chan1...@gmail.com wrote:
nope, it's doesn't work, I type the wrong character but something
interesting happened
$('#response').html($(res).filter('#a').text()); - it's not work
$('#response').html($(res).filter('$a').text()); - it's give me 123,
but not truly work,
$('#response').html($(res).text()); - it's not work the same meaning
like above, it response text part from responseText
On 1月12日, 下午5時03分, Balazs Endresz balazs.endr...@gmail.com wrote:
Use filter with $.ajax:
$('#response').html($(res).filter('#a').text());
On Jan 12, 9:30 am, David .Wu chan1...@gmail.com wrote:
And I found the load is not work either, because it still get the
construct not the value
for example
div id=test/div
$(document).ready(function)
{
$('#test').load('ajax.php #a');
});
and the result was
div id=testdiv id=a123/div/div, what I exactly want is
div id=test123/div
On 1月11日, 下午8時13分, Balazs Endresz balazs.endr...@gmail.com wrote:
As jQuery parses this html the output will contain three elements:
title, meta, and the div instead of the single html. So .find() won't
work because it will search in the descendant elements, but filter
will return '#a' because it's an element of the current jQuery object.
$('html/html') doesn't work either, I guess it's not possible to
create an html element so easily.
You can also try setting the dataType option to html (or maybe xml).
On Jan 11, 11:13 am, David .Wu chan1...@gmail.com wrote:
I tried all your suggestion, but got some weired result.
ajax.html
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
titleajax/title
script type=text/javascript src=js/jquery-1.2.6.js/script
/head
body
div id=response/div
input name=btn type=button value=ajax id=btn /
script language=javascript
!--
$(document).ready(function()
{
$('#btn').click(function()
{
$.ajax(
{
url:'ajax.php',
cache:false,
success:function(res)
{
$('#response').html($('#a',res).text()); //got nothing
$('#response').html($(res + '
#a').text()); //got ajaxtest
contents
$('#response').html($(res).find('#a').text()); //got nothing
}
});
});
});
//--
/script
/body
/html
ajax.php
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
titleajax/title
/head
body
div id=atest contents/div
/body
/html
On 1月10日, 上午2時11分, dropcube ronnyh...@gmail.com wrote:
is there any way to get the value 123 straight from div?
yes, just apply a jQuery selector to the response content and get
whatever you need. In this example:
$('#a', res).text();
OR
$(res).find('#a').text();
You can also try with $.load that allows you to specify a jQuery
selector in the URL.
[jQuery] Re: Can I get the contents from respose by ajax
And I found the load is not work either, because it still get the
construct not the value
for example
div id=test/div
$(document).ready(function)
{
$('#test').load('ajax.php #a');
});
and the result was
div id=testdiv id=a123/div/div, what I exactly want is
div id=test123/div
On 1月11日, 下午8時13分, Balazs Endresz balazs.endr...@gmail.com wrote:
As jQuery parses this html the output will contain three elements:
title, meta, and the div instead of the single html. So .find() won't
work because it will search in the descendant elements, but filter
will return '#a' because it's an element of the current jQuery object.
$('html/html') doesn't work either, I guess it's not possible to
create an html element so easily.
You can also try setting the dataType option to html (or maybe xml).
On Jan 11, 11:13 am, David .Wu chan1...@gmail.com wrote:
I tried all your suggestion, but got some weired result.
ajax.html
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
titleajax/title
script type=text/javascript src=js/jquery-1.2.6.js/script
/head
body
div id=response/div
input name=btn type=button value=ajax id=btn /
script language=javascript
!--
$(document).ready(function()
{
$('#btn').click(function()
{
$.ajax(
{
url:'ajax.php',
cache:false,
success:function(res)
{
$('#response').html($('#a',res).text()); //got nothing
$('#response').html($(res + '
#a').text()); //got ajaxtest
contents
$('#response').html($(res).find('#a').text()); //got nothing
}
});
});
});
//--
/script
/body
/html
ajax.php
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
titleajax/title
/head
body
div id=atest contents/div
/body
/html
On 1月10日, 上午2時11分, dropcube ronnyh...@gmail.com wrote:
is there any way to get the value 123 straight from div?
yes, just apply a jQuery selector to the response content and get
whatever you need. In this example:
$('#a', res).text();
OR
$(res).find('#a').text();
You can also try with $.load that allows you to specify a jQuery
selector in the URL.
[jQuery] Re: Can I get the contents from respose by ajax
I tried all your suggestion, but got some weired result.
ajax.html
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
titleajax/title
script type=text/javascript src=js/jquery-1.2.6.js/script
/head
body
div id=response/div
input name=btn type=button value=ajax id=btn /
script language=javascript
!--
$(document).ready(function()
{
$('#btn').click(function()
{
$.ajax(
{
url:'ajax.php',
cache:false,
success:function(res)
{
$('#response').html($('#a',res).text()); //got nothing
$('#response').html($(res + '
#a').text()); //got ajaxtest
contents
$('#response').html($(res).find('#a').text()); //got nothing
}
});
});
});
//--
/script
/body
/html
ajax.php
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
titleajax/title
/head
body
div id=atest contents/div
/body
/html
On 1月10日, 上午2時11分, dropcube ronnyh...@gmail.com wrote:
is there any way to get the value 123 straight from div?
yes, just apply a jQuery selector to the response content and get
whatever you need. In this example:
$('#a', res).text();
OR
$(res).find('#a').text();
You can also try with $.load that allows you to specify a jQuery
selector in the URL.
[jQuery] offset question
Hi
the offset function will find the first matched element and show the
offset
but in this case, the ul offset should be 0 to div#demo, but in
firefox it's 8, and in IE is 10
why is that?
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=http://www.w3.org/1999/xhtml;
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
titleoffset/title
style type=text/css
!--
body { font-size: 12px; }
ul
{
list-style:none;
margin:0px;
padding:0px;
position:absolute;
}
li
{
float:left;
margin:0 4px 0 0;
border:1px solid red;
width:50px;
height:50px;
}
#demo
{
overflow:scroll;
width:130px;
height:80px;
position:relative;
padding:0px;
}
#test
{
width:200px;
height:50px;
border:1px solid blue;
}
--
/style
script type=text/javascript src=js/jquery-1.2.6.js/script
/head
body
div id=test/div
div id=demo
ul
li1/li
li2/li
li3/li
li4/li
div style=clear:both;/div
/ul
/div
br /
input type=button id=btn value=btn /
script language=javascript
!--
$(document).ready(function()
{
var $sum = 0;
var $demo = $('div#demo');
var $ul = $('ul',$demo);
var $test = $('div#test');
$('ul li').each(function()
{
$sum += $(this).outerWidth(true);
});
$('ul').css('width',$sum + 'px');
$('#btn').click(function()
{
$test.html($ul.offset().left);
});
});
//--
/script
/body
/html
[jQuery] Re: question about each
wow, thanks for your help, it's really useful to me.
On 1月4日, 上午2時56分, Ricardo Tomasi ricardob...@gmail.com wrote:
Everytime you change the src attribute of an image, the browser will
fire a request to the server. That's one of the reasons why img roll-
overs have been replaced with CSS hover a long time ago, this is a
waste of scripting. Something like this is much more effective (and
semantically correct):
(X)HTML:
ul class=nav
lia href=#about class=aboutAbout/a/li
lia href=#product class=productProduct/a/li
lia href=#skill class=skillSkill/a/li
/ul
CSS:
.nav a {
display:block;
text-indent:-px;
overflow: hidden;
width: 100px;
height: 30px;
background-repeat: no-repeat;
}
.about { background-image:url(images/nav/nav_skill.jpg) }
.product { background-image:url(images/nav/nav_skill.jpg) }
.skill { background-image:url(images/nav/nav_skill.jpg) }
.nav a:hover { background-position: 0 -30px }
...
Then all you need is 60px high images with both button states, one on
top of each other. No preloading, no image swapping, all simple :) A
search on google for css rollovers or something alike will give you
endless examples.
If you still want to do it with javascript, there's a much shorter
way:
$.each
(['about','product','skill','service','news','member','recruit'],
function(i, val){
$('img/').attr('src', 'images/nav/nav_' + val + '.jpg')
.appendTo(?)
.hover(function(){
var $this = $(this);
$this.attr('src', $this.attr('src').replace('.jpg',
'_over.jpg') );
}, function(){
var $this = $(this);
$this.attr('src', $this.attr('src').replace('_over','') );
});
});
You could implement your cacheing with data() there but I think the
performance penalty is likely irrelevant.
cheers,
- ricardo
On Jan 3, 12:26 pm, David .Wu chan1...@gmail.com wrote:
Part1
var navPath = 'images/nav/';
var navArr = new Array
('nav_about','nav_product','nav_skill','nav_service','nav_news','nav_member','nav_recruit');
var navArrLen = navArr.length;
for(i=0;inavArrLen;i++)
{
$(document.createElement('img')).attr('src',navPath +
navArr[i] +
'_over.jpg');
}
Part2
$('#nav img:gt(0):lt(7)').each(function(i)
{
$(this).data('btnOver',navPath + navArr[i] + '_over.jpg');
$(this).data('btnOut',$(this).attr('src'));
$(this).hover(function()
{
$(this).attr('src',$(this).data('btnOver'));
},
function()
{
$(this).attr('src',$(this).data('btnOut'));
});
});
Part 1 is about to pre load the images
Part 2 is to give each image a data property; and do the swap image
function when mouse over and out
my question is, the image pre load succeed, but when I mouse over the
image, the browser will connect to server to require something, is
that mean the code do
$(this).data('btnOver',navPath + navArr[i] + '_over.jpg');
$(this).data('btnOut',$(this).attr('src'));
these tow lines again and again when mouse over?
[jQuery] Re: question about each
by the way, do you have more sample that css substitute for js?
On 1月5日, 下午2時33分, David .Wu chan1...@gmail.com wrote:
wow, thanks for your help, it's really useful to me.
On 1月4日, 上午2時56分, Ricardo Tomasi ricardob...@gmail.com wrote:
Everytime you change the src attribute of an image, the browser will
fire a request to the server. That's one of the reasons why img roll-
overs have been replaced with CSS hover a long time ago, this is a
waste of scripting. Something like this is much more effective (and
semantically correct):
(X)HTML:
ul class=nav
lia href=#about class=aboutAbout/a/li
lia href=#product class=productProduct/a/li
lia href=#skill class=skillSkill/a/li
/ul
CSS:
.nav a {
display:block;
text-indent:-px;
overflow: hidden;
width: 100px;
height: 30px;
background-repeat: no-repeat;
}
.about { background-image:url(images/nav/nav_skill.jpg) }
.product { background-image:url(images/nav/nav_skill.jpg) }
.skill { background-image:url(images/nav/nav_skill.jpg) }
.nav a:hover { background-position: 0 -30px }
...
Then all you need is 60px high images with both button states, one on
top of each other. No preloading, no image swapping, all simple :) A
search on google for css rollovers or something alike will give you
endless examples.
If you still want to do it with javascript, there's a much shorter
way:
$.each
(['about','product','skill','service','news','member','recruit'],
function(i, val){
$('img/').attr('src', 'images/nav/nav_' + val + '.jpg')
.appendTo(?)
.hover(function(){
var $this = $(this);
$this.attr('src', $this.attr('src').replace('.jpg',
'_over.jpg') );
}, function(){
var $this = $(this);
$this.attr('src', $this.attr('src').replace('_over','') );
});
});
You could implement your cacheing with data() there but I think the
performance penalty is likely irrelevant.
cheers,
- ricardo
On Jan 3, 12:26 pm, David .Wu chan1...@gmail.com wrote:
Part1
var navPath = 'images/nav/';
var navArr = new Array
('nav_about','nav_product','nav_skill','nav_service','nav_news','nav_member','nav_recruit');
var navArrLen = navArr.length;
for(i=0;inavArrLen;i++)
{
$(document.createElement('img')).attr('src',navPath +
navArr[i] +
'_over.jpg');
}
Part2
$('#nav img:gt(0):lt(7)').each(function(i)
{
$(this).data('btnOver',navPath + navArr[i] + '_over.jpg');
$(this).data('btnOut',$(this).attr('src'));
$(this).hover(function()
{
$(this).attr('src',$(this).data('btnOver'));
},
function()
{
$(this).attr('src',$(this).data('btnOut'));
});
});
Part 1 is about to pre load the images
Part 2 is to give each image a data property; and do the swap image
function when mouse over and out
my question is, the image pre load succeed, but when I mouse over the
image, the browser will connect to server to require something, is
that mean the code do
$(this).data('btnOver',navPath + navArr[i] + '_over.jpg');
$(this).data('btnOut',$(this).attr('src'));
these tow lines again and again when mouse over?
[jQuery] question about each
Part1
var navPath = 'images/nav/';
var navArr = new Array
('nav_about','nav_product','nav_skill','nav_service','nav_news','nav_member','nav_recruit');
var navArrLen = navArr.length;
for(i=0;inavArrLen;i++)
{
$(document.createElement('img')).attr('src',navPath + navArr[i]
+
'_over.jpg');
}
Part2
$('#nav img:gt(0):lt(7)').each(function(i)
{
$(this).data('btnOver',navPath + navArr[i] + '_over.jpg');
$(this).data('btnOut',$(this).attr('src'));
$(this).hover(function()
{
$(this).attr('src',$(this).data('btnOver'));
},
function()
{
$(this).attr('src',$(this).data('btnOut'));
});
});
Part 1 is about to pre load the images
Part 2 is to give each image a data property; and do the swap image
function when mouse over and out
my question is, the image pre load succeed, but when I mouse over the
image, the browser will connect to server to require something, is
that mean the code do
$(this).data('btnOver',navPath + navArr[i] + '_over.jpg');
$(this).data('btnOut',$(this).attr('src'));
these tow lines again and again when mouse over?
[jQuery] Does jQuery do the encode thing
My default character set is utf8, should I use encodeURI when use ajax
sending the data to server?
for example
$username = $('#username').val()
$.ajax(
{
url:'xxx.php',
data:{username:encodeURI($username)}
..
...
...
});
[jQuery] Re: Hot to remove or replace onclick function
thanks a lot, I figure it out this morning too. :)
On Dec 8, 11:44 pm, ricardobeat [EMAIL PROTECTED] wrote:
Much better now :D
jQuery version of your script:
script type=text/javascript !-- the 'language' attribute is
deprecated in XHTML --
$(document).ready(function(){
$('#set').click(function(){ //registers the event handler for #set
$('#btn').click(function(){ //registers the event handler
for #btn
alert('test');
});
});
$('#cancel').click(function(){
$('#btn').unbind('click');
});
});
/script
click() is just a shortcut for bind('click',fn):
$('#btn').bind('click', function(){...});
Bear in mind that if you click the 'set' button multiple times, you'll
add multiple event handlers to #btn, clicking on 'cancel' will remove
all of them at once.
See the docs for more detailed info: docs.jquery.com/Events
- ricardo
On Dec 7, 8:22 pm, David .Wu [EMAIL PROTECTED] wrote:
let me explain more clear
if I want to cancel function in JavaScript, I can do something like
this, but how to do the same thing in jQuery?
input type=button name=btn id=btn value=btn /
input type=button name=setBtn id=setBtn value=setBtn /
input type=button name=cancel id=cancel value=cancel /
script language=javascript
!--
var btn = document.getElementById('btn');
var set = document.getElementById('setBtn');
var cancel = document.getElementById('cancel');
function test()
{
console.log('test');
}
window.onload = function()
{
set.onclick = function()
{
btn.onclick = function()
{
test();
}
}
cancel.onclick = function()
{
btn.onclick = null;
}
}
//--
/script
On Dec 7, 9:50 am, David .Wu [EMAIL PROTECTED] wrote:
HTML
-
div id=navBoxdiv/div/div
ul
liimg src=images/nav/nav_left.jpg //li
liimg src=images/nav/btn_nav1.jpg alt=�P於新�]和�I //li
liimg src=images/nav/btn_nav2.jpg alt=�a品展示 //li
liimg src=images/nav/btn_nav3.jpg alt=技能培��中心 //li
liimg src=images/nav/btn_nav4.jpg alt=服�� //li
liimg src=images/nav/btn_nav5.jpg alt=要�� //li
lia href=member/member_login.phpimg src=images/nav/
btn_nav6.jpg alt=���T���^ //a/li
liimg src=images/nav/btn_nav7.jpg alt=人才招聘 //li
liimg src=images/nav/nav_right.jpg //li
div class=clear/div
/ul
/div
script language=javascript
!--
$(document).ready(function()
{
/*navigation initial*/
navInitial();
});
//--
/script
CSS
-
#nav
{
position:relative;
cursor:pointer;}
#nav img
{
border:0px;}
#nav ul
{
margin:0px;
padding:0px;
list-style:none;}
#nav li
{
float:left;}
.clear
{
clear:both;}
#navBox
{
position:absolute;
width:120px;
height:44px;
border:1px solid #00;
overflow:hidden}
#navBox div
{
background-color:#F8965A;
width:120px;
height:44px;
}
Javascript
-
function navInitial()
{
var $nb = $('#navBox');
$('#navBox div').css('opacity',0.3);
$arr = {'b1':60,'b2':179,'b3':300,'b4':420,'b5':540,'b6':660,'b7':
780};
$('#nav li:gt(0):lt(7)').mouseover(function()
{
var index = $('#nav li').index(this);
var move = $arr['b'+index] + 'px';
$nb.stop().animate({left:move});
if(index == 6)
{
$nb.click(function()
{
window.location = 'member/member_login.php';
});
}
else
{
$nb.click(function()
{
window.location = '';
});
}
});
}
Hi, I use li and image for navigation button, and the script means,
when I mouse over any button, there will be a transparent div slide
above the button, but the div will cover the button, therefore, I
can't click the button to go to the page, so I write another code to
give the div
[jQuery] Re: Hot to remove or replace onclick function
let me explain more clear
if I want to cancel function in JavaScript, I can do something like
this, but how to do the same thing in jQuery?
input type=button name=btn id=btn value=btn /
input type=button name=setBtn id=setBtn value=setBtn /
input type=button name=cancel id=cancel value=cancel /
script language=javascript
!--
var btn = document.getElementById('btn');
var set = document.getElementById('setBtn');
var cancel = document.getElementById('cancel');
function test()
{
console.log('test');
}
window.onload = function()
{
set.onclick = function()
{
btn.onclick = function()
{
test();
}
}
cancel.onclick = function()
{
btn.onclick = null;
}
}
//--
/script
On Dec 7, 9:50 am, David .Wu [EMAIL PROTECTED] wrote:
HTML
-
div id=navBoxdiv/div/div
ul
liimg src=images/nav/nav_left.jpg //li
liimg src=images/nav/btn_nav1.jpg alt=�P於新�]和�I //li
liimg src=images/nav/btn_nav2.jpg alt=�a品展示 //li
liimg src=images/nav/btn_nav3.jpg alt=技能培��中心 //li
liimg src=images/nav/btn_nav4.jpg alt=服�� //li
liimg src=images/nav/btn_nav5.jpg alt=要�� //li
lia href=member/member_login.phpimg src=images/nav/
btn_nav6.jpg alt=���T���^ //a/li
liimg src=images/nav/btn_nav7.jpg alt=人才招聘 //li
liimg src=images/nav/nav_right.jpg //li
div class=clear/div
/ul
/div
script language=javascript
!--
$(document).ready(function()
{
/*navigation initial*/
navInitial();
});
//--
/script
CSS
-
#nav
{
position:relative;
cursor:pointer;}
#nav img
{
border:0px;}
#nav ul
{
margin:0px;
padding:0px;
list-style:none;}
#nav li
{
float:left;}
.clear
{
clear:both;}
#navBox
{
position:absolute;
width:120px;
height:44px;
border:1px solid #00;
overflow:hidden}
#navBox div
{
background-color:#F8965A;
width:120px;
height:44px;
}
Javascript
-
function navInitial()
{
var $nb = $('#navBox');
$('#navBox div').css('opacity',0.3);
$arr = {'b1':60,'b2':179,'b3':300,'b4':420,'b5':540,'b6':660,'b7':
780};
$('#nav li:gt(0):lt(7)').mouseover(function()
{
var index = $('#nav li').index(this);
var move = $arr['b'+index] + 'px';
$nb.stop().animate({left:move});
if(index == 6)
{
$nb.click(function()
{
window.location = 'member/member_login.php';
});
}
else
{
$nb.click(function()
{
window.location = '';
});
}
});
}
Hi, I use li and image for navigation button, and the script means,
when I mouse over any button, there will be a transparent div slide
above the button, but the div will cover the button, therefore, I
can't click the button to go to the page, so I write another code to
give the div a hyper link, here comes the question, some button do not
have hyper link, because it got sub menu, I will do another effect
when mouse over those button, that's mean I need to cancel if the div
move to the button which have hyper link, how to do that?
[jQuery] Hot to remove or replace onclick function
HTML
-
div id=navBoxdiv/div/div
ul
liimg src=images/nav/nav_left.jpg //li
liimg src=images/nav/btn_nav1.jpg alt=�P於新�]和�I //li
liimg src=images/nav/btn_nav2.jpg alt=�a品展示 //li
liimg src=images/nav/btn_nav3.jpg alt=技能培��中心 //li
liimg src=images/nav/btn_nav4.jpg alt=服�� //li
liimg src=images/nav/btn_nav5.jpg alt=要�� //li
lia href=member/member_login.phpimg src=images/nav/
btn_nav6.jpg alt=���T���^ //a/li
liimg src=images/nav/btn_nav7.jpg alt=人才招聘 //li
liimg src=images/nav/nav_right.jpg //li
div class=clear/div
/ul
/div
script language=javascript
!--
$(document).ready(function()
{
/*navigation initial*/
navInitial();
});
//--
/script
CSS
-
#nav
{
position:relative;
cursor:pointer;
}
#nav img
{
border:0px;
}
#nav ul
{
margin:0px;
padding:0px;
list-style:none;
}
#nav li
{
float:left;
}
.clear
{
clear:both;
}
#navBox
{
position:absolute;
width:120px;
height:44px;
border:1px solid #00;
overflow:hidden
}
#navBox div
{
background-color:#F8965A;
width:120px;
height:44px;
}
Javascript
-
function navInitial()
{
var $nb = $('#navBox');
$('#navBox div').css('opacity',0.3);
$arr = {'b1':60,'b2':179,'b3':300,'b4':420,'b5':540,'b6':660,'b7':
780};
$('#nav li:gt(0):lt(7)').mouseover(function()
{
var index = $('#nav li').index(this);
var move = $arr['b'+index] + 'px';
$nb.stop().animate({left:move});
if(index == 6)
{
$nb.click(function()
{
window.location = 'member/member_login.php';
});
}
else
{
$nb.click(function()
{
window.location = '';
});
}
});
}
Hi, I use li and image for navigation button, and the script means,
when I mouse over any button, there will be a transparent div slide
above the button, but the div will cover the button, therefore, I
can't click the button to go to the page, so I write another code to
give the div a hyper link, here comes the question, some button do not
have hyper link, because it got sub menu, I will do another effect
when mouse over those button, that's mean I need to cancel if the div
move to the button which have hyper link, how to do that?
[jQuery] Re: Can I make image change only by part of it?
Hi, my question is, there are maybe many area in one map, how to show
different pictures when mouse over each of them.
On 11月14日, 上午12時42分, livefree75 [EMAIL PROTECTED] wrote:
I couldn't get your link to load, but it sounds like you may need to
do something similar to the following. The image you're mapping would
need to be either relative or absolutely positioned.
Note that #map_area is the map area you're mousing over.
#bg_image is the image the map is on.
Not sure if this would work - you may need to get the top/left/width/
height of the map area some other way.
$(#map_area).mouseover(function() {
var bg_image = $(#bg_image);
var hover_img = document.createElement(img);
$(hover_img).css({
position: 'absolute',
top : $(this).css('top'),
left : $(this).css('left'),
zIndex : (bg_image.css(z-index) + 1)
}).
width($(this).width()).
height($(this).height()).
mouseout(function() {
$(this).remove();
}).
insertAfter(bg_image);
});
Jamie
[jQuery] Can I make image change only by part of it?
http://www.dominos.com.tw/located/located_map.asp like the map on this website, when your mouse over a part of it, it only change the same area.
[jQuery] How to do anything after animate finished
Hi everybody
This my testing gallery slider, it will count image's amount, and
prevent it not to outside the wrapper, but I got one problem, if user
click button after the animation finished, it's done well, but if user
click too fast, the js will not catch the left property in time
correctly, how to fix the bug?
CSS
style type=text/css
!--
body { font-size: 12px; }
#wrapper
{
height: 50px;
width: 50px;
overflow: hidden;
position: relative;
border:1px #FF solid;
}
ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
position: absolute;
white-space:nowrap;
}
li
{
display:inline;
margin:0 -3px 0 0;
width:50px;
height:50px;
overflow:hidden;
}
--
/style
HTML
div id=wrapper
ul
liimg src=1.jpg border=0 //li
liimg src=2.jpg border=0 //li
liimg src=3.jpg border=0 //li
/ul
/div
input type=button name=left id=left value=left /
input type=button name=right id=right value=right /
JavaScript
script language=javascript
!--
$(document).ready(function()
{
var wrapper = $('#wrapper');
var ul = $('ul',wrapper);
var itemsWidth = $('li',ul).outerWidth();
var itemsLen = $('li',ul).size();
var maxMove = (itemsLen - 1) * itemsWidth;
var minMove = 0;
var right = $('#right');
var left = $('#left');
right.click(function()
{
if(ul.css('left') != (maxMove * -1) + 'px')
{
ul.animate({left:'-=50px'});
}
});
left.click(function()
{
if(ul.css('left') != minMove + 'px')
{
ul.animate({left:'+=50px'});
}
});
});
//--
/script
[jQuery] Re: document Ready function in the Ajax Response
could you pose some of your code? On Tue, Nov 11, 2008 at 6:30 PM, ravithokala [EMAIL PROTECTED] wrote: Hi, I have an issue with document.ready. I have a page which will make an ajax call. The response on the ajax call contains script which contains document.ready. The content in document.ready is getting executed successfully in ie7 but not in ff3. Please tell how to solve this in FF.
[jQuery] Re: How to do anything after animate finished
ooops, I got another problem,
in FF3, CSS property white-space will make image have 3px padding, but in
IE, it's not, any good suggestion?
On Tue, Nov 11, 2008 at 7:54 PM, Alexandre Plennevaux
[EMAIL PROTECTED]wrote:
my pleasure :)
On Tue, Nov 11, 2008 at 12:53 PM, David Wu [EMAIL PROTECTED] wrote:
Fantastic, thanks a lot
On Tue, Nov 11, 2008 at 7:32 PM, Alexandre Plennevaux
[EMAIL PROTECTED]
wrote:
activate the button in a callback function after the animate
var isClickable = true;
right.click(function()
{
if(ul.css('left') != (maxMove * -1) + 'px'
isClickable)
{
isClickable = false;
ul.animate({left:'-=50px'},function(){
isClickable = true;
});
}
});
On Tue, Nov 11, 2008 at 11:06 AM, David .Wu [EMAIL PROTECTED] wrote:
Hi everybody
This my testing gallery slider, it will count image's amount, and
prevent it not to outside the wrapper, but I got one problem, if user
click button after the animation finished, it's done well, but if user
click too fast, the js will not catch the left property in time
correctly, how to fix the bug?
CSS
style type=text/css
!--
body { font-size: 12px; }
#wrapper
{
height: 50px;
width: 50px;
overflow: hidden;
position: relative;
border:1px #FF solid;
}
ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
position: absolute;
white-space:nowrap;
}
li
{
display:inline;
margin:0 -3px 0 0;
width:50px;
height:50px;
overflow:hidden;
}
--
/style
HTML
div id=wrapper
ul
liimg src=1.jpg border=0 //li
liimg src=2.jpg border=0 //li
liimg src=3.jpg border=0 //li
/ul
/div
input type=button name=left id=left value=left /
input type=button name=right id=right value=right /
JavaScript
script language=javascript
!--
$(document).ready(function()
{
var wrapper = $('#wrapper');
var ul = $('ul',wrapper);
var itemsWidth = $('li',ul).outerWidth();
var itemsLen = $('li',ul).size();
var maxMove = (itemsLen - 1) * itemsWidth;
var minMove = 0;
var right = $('#right');
var left = $('#left');
right.click(function()
{
if(ul.css('left') != (maxMove * -1) + 'px')
{
ul.animate({left:'-=50px'});
}
});
left.click(function()
{
if(ul.css('left') != minMove + 'px')
{
ul.animate({left:'+=50px'});
}
});
});
//--
/script
[jQuery] Re: How to do anything after animate finished
Fantastic, thanks a lot
On Tue, Nov 11, 2008 at 7:32 PM, Alexandre Plennevaux
[EMAIL PROTECTED]wrote:
activate the button in a callback function after the animate
var isClickable = true;
right.click(function()
{
if(ul.css('left') != (maxMove * -1) + 'px'
isClickable)
{
isClickable = false;
ul.animate({left:'-=50px'},function(){
isClickable = true;
});
}
});
On Tue, Nov 11, 2008 at 11:06 AM, David .Wu [EMAIL PROTECTED] wrote:
Hi everybody
This my testing gallery slider, it will count image's amount, and
prevent it not to outside the wrapper, but I got one problem, if user
click button after the animation finished, it's done well, but if user
click too fast, the js will not catch the left property in time
correctly, how to fix the bug?
CSS
style type=text/css
!--
body { font-size: 12px; }
#wrapper
{
height: 50px;
width: 50px;
overflow: hidden;
position: relative;
border:1px #FF solid;
}
ul
{
margin: 0px;
padding: 0px;
list-style-type: none;
position: absolute;
white-space:nowrap;
}
li
{
display:inline;
margin:0 -3px 0 0;
width:50px;
height:50px;
overflow:hidden;
}
--
/style
HTML
div id=wrapper
ul
liimg src=1.jpg border=0 //li
liimg src=2.jpg border=0 //li
liimg src=3.jpg border=0 //li
/ul
/div
input type=button name=left id=left value=left /
input type=button name=right id=right value=right /
JavaScript
script language=javascript
!--
$(document).ready(function()
{
var wrapper = $('#wrapper');
var ul = $('ul',wrapper);
var itemsWidth = $('li',ul).outerWidth();
var itemsLen = $('li',ul).size();
var maxMove = (itemsLen - 1) * itemsWidth;
var minMove = 0;
var right = $('#right');
var left = $('#left');
right.click(function()
{
if(ul.css('left') != (maxMove * -1) + 'px')
{
ul.animate({left:'-=50px'});
}
});
left.click(function()
{
if(ul.css('left') != minMove + 'px')
{
ul.animate({left:'+=50px'});
}
});
});
//--
/script
