[jQuery] Re: bugs
I think you will find that you need to use what is commonly referred
to as a 'preloader'. Take a look at Ariel's Preload plugin (Link mode,
with onComplete)
On Jun 20, 5:55 pm, Luke [EMAIL PROTECTED] wrote:
I new to jquery. my first srcipt is a tab browsing galley for images.
this script works fine expect for certain mysterious bug:
in firefox sometimes, very rarely, image resize doesn't get executed
on first load. upon refresh it works.
in safari it loads fine first time but upon refresh image resize and
positioning gets messed up. I close the browser window and open a
new
one load the page and it looks fine.
in IE6, it just gives up on image resize. it sets the first 2-3
images
correctly and then gives up on the rest of the images. as if it can
not loop through all the images.
any help appreciated!
luke
here is my code:
// create gallery images
$(document).ready(function(){
var max_width = 310;
var max_height = 310;
var selector = 'img.medium';
$(selector).each(function() {
var width = $(this).width();
var height = $(this).height();
if (height width) {
var ratio = (width / height);
var new_height = max_height;
var new_width = (new_height * ratio);
var position = Math.floor((max_width -
new_width)/2);
$(this).css(width,new_width);
$(this).css(height,new_height);
$(this).css(position,relative);
$(this).css(left,position);
} else {
var ratio = (height / width);
var new_width = max_width;
var new_height = (new_width * ratio);
var position = Math.floor((max_height -
new_height)/2);
$(this).css(width,new_width);
$(this).css(height,new_height);
$(this).css(position,relative);
$(this).css(top,position);
}
});
});
// create thumbs
$(document).ready(function(){
var max_width = 100;
var max_height = 100;
var selector = 'img.thumb';
$(selector).each(function() {
var width = $(this).width();
var height = $(this).height();
if (height width) {
var ratio = (width / height);
var new_height = max_height;
var new_width = (new_height * ratio);
var position = Math.floor((max_width -
new_width)/2);
$(this).height(new_height).width(new_width);
$(this).css(position,relative);
$(this).css(left,position);
} else {
var ratio = (height / width);
var new_width = max_width;
var new_height = (new_width * ratio);
var position = Math.floor((max_height -
new_height)/2);
$(this).height(new_height).width(new_width);
$(this).css(position,relative);
$(this).css(top,position);
}
});
});
//create complete tabbed gallery
$(document).ready(function () {
var tabContainers = $('div.tabs div.gallery div');
$('div.tabs span.tabNavigation a').click(function () {
tabContainers.hide('slow').filter(this.hash).toggle('slow');
$('div.tabs span.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
[jQuery] Re: Checkboxes, difference in browsers
Is the id createNewAccount unique within the page?
On Jun 20, 9:02 pm, Ariel Flesler [EMAIL PROTECTED] wrote:
Your code should work.
You didn't close the input tag correctly but that shouldn't matter.
Do you have a demo online ?
--
Ariel Fleslerhttp://flesler.blogspot.com
On 19 jun, 12:07, [EMAIL PROTECTED]
[EMAIL PROTECTED] wrote:
Hello.
I have this JQuery code which works absolutely fine in Firefox:
if ($(#createNewAccount).is(:checked)){
// do stuff
}
The variable 'createNewAccount' is defined as follows:
input type=checkbox name=createNewAccount id=createNewAccount
But this simply will not work in IE. What am I doing wrong please?
[jQuery] Re: Can jQuery compare 2 ul and remove li's that are duplicates?
Assuming that your list elements are simple text nodes...
//list on screen...
var listOnScreen = [];
$('ul#listOnScreen li').each(function(){
listOnScreen.push($(this).text());
});
//function, returns true if text argument found in list on screen...
var inListOnScreen = function(txt){
var len = listOnScreen.length, rtn = false;
while(!rtn len--){
//straighforward case-sensitive, exact match...
rtn = (txt == listOnScreen[len]);
}
return rtn;
};
//check each text of new list against list on screen...
$('ul#newList li').each(function(){
var me = $(this);
//remove if already on screen...
if(inListOnScreen(me.text())) me.remove();
});
This could undoubtedly be simplified, and it works on the principle
that you are doing a post-check of an already-constructed new list,
whereas it might make more sense to not add an already-existing item
to the new list in the first place.
But, it gives you a starting point (I hope).
[btw it's untested!]
On Jun 5, 11:02 am, jfaulky [EMAIL PROTECTED] wrote:
Can jQuery compare 2 ul and remove li's that are duplicates?
Essentially I use jQuery to populate an unordered list with new
values, and I
have an existing unordered list already on the screen.
I'd like to remove any elements in the newly loaded list that already
exist in
the current list.
I hope this makes sense, and thanks in advance.
Cheers,
jfaulky
[jQuery] Re: Reflesh page after change DOM
If you add new elements (*any* new elements, not just LI's!) to a page using core jQuery, they will only have whatever properties/events/ whatever that you assign/attach to them once they have been added to the DOM. In other words, it's down to you to ensure that the new elements have the required events attached to match those already existing. There are, however, plugins that are capable of looking after this sort of thing for you - LiveQuery being one. On Jun 5, 9:51 am, xiaohc.net [EMAIL PROTECTED] wrote: dear one, I'm from China,i have a question about jQuery. When i add some elements to page,example add some li to ul,the new li don't have event that initiatory li had. I means that how to reflesh the page let all li has same event when dom changed? sorry,My poor English skills！ Chinese: 当DOM结构改变以后，新加入的元素怎么才能获得原来同类元素的事件？ 比如页面开始时每个LI有DRAGDROP事件，当异步AJAX添加一个LI时，怎么让这个添加的LI也有DRAGDROP事件？
[jQuery] Re: text box keeps focus when another element type is clicked ?
Try adding...
$(':text').bind('focus', function(){
hasFocus = $(this);
});
On Jun 5, 7:43 pm, paulj [EMAIL PROTECTED] wrote:
Wizzud, thank you for your help.
Your code worked perfectly if the user had entered the text box by
*clicking* on it.
But, if the user has *tabbed* to the text box (and then clicks on
another element) the focus is returned to the text box that was last
*clicked* on.
This can be seen in my example HTML.
Thank you (or others) for any fine-tuning on this.
Paul
On 5 Jun, 09:54, Wizzud [EMAIL PROTECTED] wrote:
Any good for you ... ?
$(document).ready(function(){
var hasFocus = $(':text:first').focus();
$(document).bind('click', function(event){
var ev = $(event.target);
if(ev != hasFocus){
if (ev.is(':text')){
hasFocus = ev;
}
hasFocus.focus();
}
});
});
On Jun 5, 2:30 am, paulj [EMAIL PROTECTED] wrote:
Hi,
When a text box has the focus, I would like it to keep the focus even
when another element type (not another text box) is clicked. eg after
clicking this other element type, the user can press a key(s) and the
text box will accept this key input without the user having to click
back into the text box.
Hope this makes sense.
Karl gave me some info. the other day and I was pretty sure I would be
able to fine-tune it for my app. but the best I could come up with
is :
$(document).ready(function()
{
$(':text').blur(function(event)
{
if (!$(event.target).is(':text'))
{ $(this).focus() }
});
});
Thanks for any help
Paul
Here is the full code :
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/
TR/html4/strict.dtd
html
head
title/title
meta http-equiv=Content-Type content=text/html;
charset=ISO-8859-1
style type=text/css
input { width : 700px ; }
/style
script type = text/javascript src=jquery.js/script
script type = text/javascript
$(document).ready(function()
{
$(':text').blur(function(event)
{
if (!$(event.target).is(':text'))
{ $(this).focus() }
});
});
/script
/head
body
ul
liclick here/li
lior click here/li
/ul
br br
form
input type='text' class='test' value='these text boxes should retain
the focus when another element type is clicked' brbr
input type='text' value='these text boxes should retain the focus
when another element type is clicked' brbr
input type='text' value='these text boxes should retain the focus
when another element type is clicked' id='focusHere' br
/form
/body
/html
[jQuery] Re: Thickbox on 1.2.6 or best alternative?
or http://mjijackson.com/shadowbox/ On Jun 6, 1:52 am, Rey Bango [EMAIL PROTECTED] wrote: Shane, Check out this one: http://leandrovieira.com/projects/jquery/lightbox/ Rey Shane Graber wrote: What are people using today to create effects like thickbox or lightbox on jQuery 1.2.6? Thickbox is broken on the 1.2.x release and I'm stuck with an old version of jQuery until I find a suitable replacement. What are others using?
[jQuery] Re: Can Jquery Send variable value to external php
window.location.href = 'myprog.php?doctitle=' + myvar; [might need encoding - depends on title] On Jun 8, 11:36 am, Maddy [EMAIL PROTECTED] wrote: Is it possible to send a variable value to external php. how it can be done code: var myvar = document.title; how to send this particular variable to a php script plz help
[jQuery] Re: text box keeps focus when another element type is clicked ?
Any good for you ... ?
$(document).ready(function(){
var hasFocus = $(':text:first').focus();
$(document).bind('click', function(event){
var ev = $(event.target);
if(ev != hasFocus){
if (ev.is(':text')){
hasFocus = ev;
}
hasFocus.focus();
}
});
});
On Jun 5, 2:30 am, paulj [EMAIL PROTECTED] wrote:
Hi,
When a text box has the focus, I would like it to keep the focus even
when another element type (not another text box) is clicked. eg after
clicking this other element type, the user can press a key(s) and the
text box will accept this key input without the user having to click
back into the text box.
Hope this makes sense.
Karl gave me some info. the other day and I was pretty sure I would be
able to fine-tune it for my app. but the best I could come up with
is :
$(document).ready(function()
{
$(':text').blur(function(event)
{
if (!$(event.target).is(':text'))
{ $(this).focus() }
});
});
Thanks for any help
Paul
Here is the full code :
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/
TR/html4/strict.dtd
html
head
title/title
meta http-equiv=Content-Type content=text/html;
charset=ISO-8859-1
style type=text/css
input { width : 700px ; }
/style
script type = text/javascript src=jquery.js/script
script type = text/javascript
$(document).ready(function()
{
$(':text').blur(function(event)
{
if (!$(event.target).is(':text'))
{ $(this).focus() }
});
});
/script
/head
body
ul
liclick here/li
lior click here/li
/ul
br br
form
input type='text' class='test' value='these text boxes should retain
the focus when another element type is clicked' brbr
input type='text' value='these text boxes should retain the focus
when another element type is clicked' brbr
input type='text' value='these text boxes should retain the focus
when another element type is clicked' id='focusHere' br
/form
/body
/html
[jQuery] Re: Clicking on the whole div area.. not just the small icon image.
Try giving the div a background color.
On Jun 2, 4:17 pm, Danjojo [EMAIL PROTECTED] wrote:
I am trying to get a click event on the whole div area around the
image that toggles a menu.
In FireFox I can click on the whole div and my functionality works.
In IE7 I have to click only on the tiny arrow icon.
How do I allow the whole div to control the event?
$(document).ready(function() {
$('ul.linkContainer:not(:first)').hide();
$('div.arrowToggle').click(function() {
var $nextUL = $(this).next();
var $visibleSiblings = $nextUL.siblings('ul:visible');
if ($visibleSiblings.length ) {
$visibleSiblings.slideUp('fast', function() {
$nextUL.slideToggle('fast');
});
} else {
$nextUL.slideToggle('fast');
}
});
});
div class=arrowToggle style=position: absolute; width:
30px; height: 13px; left: 185px; border: 1px solid red;
img style=width: 12px; height: 12px; float: right;
src=/images/arrow_right.png/
/div
[jQuery] Re: don't animate elements which are in progress of animation?
An alternative is to look at it the other way round and say whatever
animation is in progress, stop it and do what is now required, eg...
$(document).ready(function() {
$(#control_panel li a).hover(
function(){
$(this).stop().animate({paddingLeft: 50px},
200);
},
function(){
$(this).stop().animate({paddingLeft: 0px},
500);
});
});
On Jun 1, 3:00 am, duck! [EMAIL PROTECTED] wrote:
Perhaps you want to use .queue() to see if there is an animation already in
progress before triggering a new one.
untested, but something like this in the hover functions might be the go:
if ($(this).queue(fx).length 1) ...etc
http://docs.jquery.com/Effects/queuefor more info
next wrote:
how can i animate only static elements?
My code:
$(document).ready(function() {
$(#control_panel li a).hover(
function(){
$(this).animate({paddingLeft: 50px}, 200);
},
function(){
$(this).animate({paddingLeft: 0px}, 500);
});
});
This script slides hovered links to the right in my navigation list,
the problem is that if animation is still in progress jQuery still
registers hovering which causes unnecessary animation. You can test
this code with the follwing html:
ul id=control_panel
li # View Statistics /li
li # Create Counter /li
li # Embed Code /li
li # Help /li
li # About /li
li # Options /li
li # Log-Out /li
/ul
If you play around with hovering those elements you'll get a better
understanding of my problem.
Thanks.
--
View this message in
context:http://www.nabble.com/don%27t-animate-elements-which-are-in-progress-...
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: expand-refs
Untested...
function expand_refs (context) {
$(xref,context||document).each(function (i) {
var rpl = defs[$(this).attr(ref)]||0;
if(rpl){
var cntxt = $(rpl).insertAfter(this);
$(this).remove();
expand_refs(cntxt);
}
});
}
expand_refs();
On May 31, 11:43 pm, Andy Chambers [EMAIL PROTECTED]
wrote:
Hi,
I'm generating some code that looks like the snippet below. Embedded
within the html are some xref elements. I want to expand each one
according to the corresponding property of the defs object.
My naive attempt is as follows
function expand_refs () {
$(xref).each(function (i) {
$(this).replaceWith(defs[$(this).attr(ref)]);
});
}
...but this only replaces the first level (i.e. it doesn't expand the
D2488 xref). Can anyone help out?
Cheers,
Andy
?xml version=1.0 encoding=utf-8 standalone=yes?
html
head
title
/title
script type='text/javascript' src='/js/jquery.js'/script
script type='text/javascript' src='/js/openair.js'/script
script type='text/javascript'defs = { A : div id=\\'A\
\'xref ref=\\'D2488\\'/xref/div ,
D2488 : div id=\\'D2488\\'span id=\\'S2489\\'andy/spanxref
ref=\\'D2490\\'/xref/div ,
D2490 : div id=\\'D2490\\'span id=\\'S2491\\'chambers/span/
div };
/script
style type='text/css'/style
/head
body
div id='banner'
h1
/h1
/div
div id='content'
div id='A'
xref ref='D2488'/xref
/div
/div
/body
/html
[jQuery] Re: Newbie Q: Insert last paragraph just before fourth paragraph?
Or
$('p:eq(3)').before($('p:last'));
On Jun 1, 6:49 pm, Jason Huck [EMAIL PROTECTED] wrote:
Here's one way, no last class required, though it probably could be
improved upon:
$($('p').get(3)).before($('p:last'));
- jason
On Jun 1, 9:02 am, swortis [EMAIL PROTECTED] wrote:
Hi all-
I suspect this is ridiculously easy.. but I'm lost..
I'm looking for a jquery way of taking the last paragraph (with
class=last) of a many paragraph page and 'inserting' it just before
the fourth paragraph (which does not have a class).
So:
psomething/p
psomething/p
psomething/p
psomething/p
psomething/p
p class=lastsomething/p
Is actually seen as:
psomething/p
psomething/p
psomething/p
p class=lastsomething/p
psomething/p
psomething/p
Anyone have a cool way of doing this?
Thanks!
-S
[jQuery] Re: Why report handler.apply is not a function
You're passing a string into mouseover() instead of function name
$('a.Brand').mouseover(checkBrand);
(assuming that the function checkBrand() does actually exist!)
James Hang wrote:
in html:
script type=text/javascript src=/new/js/jquery-1.2.6.min.js/
script
script type=text/javascript src=/new/js/cms.js/script
a class=Brand href=#img src=check.gif//a
in cms.js:
checkDeleteBrand = function(){
window.confirm(Really want to check this brand?);
}
readyFunction = function(){
$('a.Brand').mouseover(checkBrand);
$(document).ready(readyFunction);
When I move my mouse on the check.gif, it will report a error message:
handler.apply is not a function in firefox Error console, line
number is 26 in the jquery file.
Can you help to sort it out?
Thanks!
[jQuery] Re: trouble passing href
To get the href you either access the property of the element
directly, or use the attr() function on the jQuery object.
Eg.
(note : I'm using $('a', this) instead of $(this).children()...)
alert( $('a', this)[0].href ); //the [0] retrieves the actual element
or
alert( $('a', this).attr('href') );
On May 30, 12:40 am, eid [EMAIL PROTECTED] wrote:
try getAttribute('href')
On 30 Maj, 00:46, Kierhon [EMAIL PROTECTED] wrote:
Hi all, new to JQ. I'm trying to pass the href from the a tag to the
ajax load function. I believe i've selected the child properly but for
some reason it's not pulling in the href. Any help is greatly
appreciated!
site: new-age-design.com
code:
?php include('includes/header.php'); ?
div id=header
div class=container
h1a href=index.phpSite In Development/a/h1
ul
lia href=# style=color:#000;Link/a/li
lia href=#Link/a/li
lia href=#Link/a/li
lia href=#Link/a/li
lia href=#Link/a/li
lia href=#Link/a/li
/ul
/div
/div
div class=container
script type=text/javascript
function passURL(url){
var ajaxURL = document.getElementById(test).href;
alert (ajaxURL);
};
if(typeof sIFR == function) {
sIFR.replaceElement(
named({
sSelector: h1 , dt a span,
sFlashSrc:
flash/bleeding_cowboys.swf,
sColor: ?php
echo($h1_color); ?,
sLinkColor: ?php
echo($h1_color); ?,
sHoverColor:?php echo($h1_hover);
?,
sWmode: transparent,
nPaddingTop:0,
nPaddingBottom: 0
})
);
};
$(document).ready(function(){
// $(dd:not(:first)).hide();
$(dt).click(function(){
// $(dd:visible).slideUp(slow);
alert ($(this).children().href);
$(this).next().load(test.xml).slideDown(slow);
return false;
});
});
/script
Currently, in Saint Johns, MI the weather is: ?php
echo($weather); ?
dl
dta id=test href=test.xmlspanDiv1/span/a/dt
ddTest Info/dd
dta href=/discuss/Div2/a/dt
dd
Test Infobr /br /
/dd
dta href=/dev/Div3/a/dt
dd
Test Infobr /br /
/dd
/dl
/div
div id=footer/div
/body
/html
[jQuery] Re: Opera IE Issue
Is fusionSlider.panelPositions an array or a string?
If it's an array, then using indexOf() on it is wrong.
If it's a string then I can't work out what it that statement is
intended to achieve ... but indexOf() should take a string as its
input, not a number!
On May 29, 2:41 am, Keri Henare [EMAIL PROTECTED] wrote:
Opera 9.27 throws up this error:
Event thread: click
Error:
name: TypeError
message: Statement on line 80: Type mismatch (usually a non-object
value used where an object is required)
Backtrace:
Line 81 of linked script
file://localhost/Users/kerihenare/Sites/adhub2/skin/js/functions.js
$(this).animate({left :
(fusionSlider.panelPositions.indexOf(position) - 1) * $
(fusionSlider._slider).width()}, 300);
CODE:
panelArrange : function(x) {
$(fusionSlider._slider).children(fusionSlider._panels).show();
x = x + 1;
if (x == fusionSlider.panelPositions.length) x = 0;
$(fusionSlider._slider).children(fusionSlider._panels + ':eq('+
x +')').hide();
$(fusionSlider._slider).children(fusionSlider._panels).each(
function(i) {
var position = i - 1;
if (position 0) position =
fusionSlider.panelPositions.length - 1;
$(this).animate({ left:
(fusionSlider.panelPositions.indexOf(position) - 1) * $
(fusionSlider._slider).width()}, '300'); // -- LINE 80
}
);
}
[jQuery] Re: Do something, ONLY if parent has children
Can you be a bit more explicit about what it is that you want to do?
eg.
hide H1 where next element does not have class 'fred'
or
hide DIV, H1 and H6 where first child is not (DIV.dynamo)
or
hide P, H1 thru H6 where next element is not (P.kiev) or is (P.kiev
having a child of A.hideme)
Then we can stop trying to second guess what it is that you need.
On May 29, 3:37 am, hubbs [EMAIL PROTECTED] wrote:
Thank you. So, if I wanted to check to see if there even were any p
tags after an h1 tag, and I wanted to hide the h1 tag, I would do the
following?
$('h1 + p:not(:has(*))').hide();
On May 28, 7:22 pm, Hamish Campbell [EMAIL PROTECTED] wrote:
Don't forget to check the jQuery documentation:http://docs.jquery.com/
The selector you want is 'prev +
next':http://docs.jquery.com/Selectors/next#prevnext
Eg, if I wanted to highlight in blue every paragraph object that comes
after a h1 heading:
$('h1 + p').css('color', 'blue');
On May 29, 2:06 pm, hubbs [EMAIL PROTECTED] wrote:
Hey guys,
I realized that I misstated my problem. I realized that the item I
want to check for is NOT a child, but the element that comes AFTER a
specific element. So, I have a list of specific elements, and if an
element with a specific class does not come after the first element,
hide the first element.
Sorry this sounds strange. I am trying to create a work around for my
CMS.
On May 28, 5:53 pm, Hamish Campbell [EMAIL PROTECTED] wrote:
You can do it with selectors:
$('#main:not(:has(*))').hide();
Ie - 'select the element with the id main that does _not_ contain
any other element'.
Note that this is different from $('#main:empty') which includes text
nodes.
On May 29, 12:10 pm, Michael Geary [EMAIL PROTECTED] wrote:
I would do it by checking the DOM directly, just because it's
reasonably
straightforward and very efficient:
var $main = $('#main');
if( $main[0] $main[0].firstChild ) $main.hide();
-Mike
I am wondering how I could check if a parent element has
children, and it it does not, I would like to hide the parent.
I was looking at something like the following, but I am not
sure how to get it to work how I want:
$(#main *).hide;- Hide quoted text -
- Show quoted text -- Hide quoted text -
- Show quoted text -
[jQuery] Re: beginner variable problem
$(document).ready(function(){
var parags = $(#contests ul li p);
$(#contests ul li span a).each(function(i){
var parag_count = i;
$(this).toggle(
function(){
parags.eq(parag_count).css(background, yellow);
return false;
},
function(){
parags.eq(parag_count).css(background, none);
return false;
}
);
});
});
An alternative (just one of many) ...
$(document).ready(function(){
var paras = $(#contests ul li)
.find('span a').each(function(i){
var indx = i;
$(this).toggle(
function(){ return paraBg(indx, 'yellow'); }
, function(){ return paraBg(indx, 'none'); } );
}).end().find('p')
, paraBg = function(indx, bg){
paras.eq(indx).css(background, bg);
return false;
};
});
(untested)
On May 27, 5:12 pm, bobh [EMAIL PROTECTED] wrote:
hi,
I'm encountering a problem with a variable in a toggle event.
see my example online here:http://www.allnighters.net/jq-issue/
my js code:
$(document).ready(function(){
$(#contests ul li span a).toggle(
function(){
var parag_count = $(#contests ul li span
a).index(this);
alert(parag_count);
$(#contests ul li p:eq(+ parag_count
+)).css(background,
yellow);
return false;
},
function(){
$(#contests ul li p:eq(+ parag_count
+)).css(background,
none);
return false;
}
);
});
and my html:
div id=contests style=width: 400px; margin-left: 20px;
ul
li class=uneven
spana href=#4x2 Karma Hotel Tickets/a/span
pDeze wedstrijd loopt af op 23 April om 23u./p
/li
li class=even
spana href=#5x2 F*uck Lany... Here's Stephan
Bodzin/a/span
pDeze wedstrijd loopt af op 23 April om 23u./p
/li
...
/ul
/div
the problem is that I don't know how to pass the 'parag_count'
variable on to the 2nd function of the toggle event.
thanks in advance.
[jQuery] Re: How can I either clone just one class and children or append better html code
Not entirely clear what is required to be cloned - the code you have
shouldn't really be cloned 'as is' because it has ids in it, which
would require a fair amount of manipulation to make it valid.
If you simply want to format it into a more readable/maintainable form
then, as an example...
var code = [
'div id=block'
, 'h1BITE ME! /h1'
, 'div class=eplist'
, 'table'
,'th'// should this be a tr?
, 'tdTitle/td'
, 'tdEpisodenumber/td'
// ... etc, etc ...
, 'h2Remove ep from list/h2'
, '/a'
, '/div'
].join('');
But, yes you can clone just one instance of a class, eg ...
$('.class:first').clone()
On May 27, 10:06 pm, tripdragon [EMAIL PROTECTED] wrote:
have this code that works! But looks like butt. As well as that this
is a recipe for hell every-time I need to update it.
I had clone working on the generated html code from the Rails server
code. But in my simple tests the clone was cloning the class or id and
it then more just make clones of the clones. Woot. So it became a
power of 2 which as you know. ...
From my short reading I cannot find any tools to fix jquery to paste
code cleaner due to javascript restriction spacing..
script type=text/javascript
$(document).ready(function(){
$('#addmore').click(function() {
$('#block').append('div id=blockh1BITE ME! /h1 div
class=eplisttable th tdTitle/td tdEpisodenumber/td
tdStatus/td tdWatched/td tdHave/td tdNext/td
tdPublished/td /thtr td input
id=episode_episode_attributes__title
name=episode[episode_attributes][][title] size=30 type=text / /
td td input id=episode_episode_attributes__episodenumber
name=episode[episode_attributes][][episodenumber] size=30
type=text / /td td select
id=episode_episode_attributes__status
name=episode[episode_attributes][][status]option
value=1Watching it/option option value=2Saw it/option/
select /td td input id=episode_episode_attributes__watched
name=episode[episode_attributes][][watched] type=checkbox
value=1 /input name=episode[episode_attributes][][watched]
type=hidden value=0 / /td td input
id=episode_episode_attributes__have name=episode[episode_attributes]
[][have] type=checkbox value=1 /input
name=episode[episode_attributes][][have] type=hidden value=0 /
/td td input id=episode_episode_attributes__next
name=episode[episode_attributes][][next] type=checkbox value=1 /input
name=episode[episode_attributes][][next] type=hidden
value=0 / /td td input
id=episode_episode_attributes__published
name=episode[episode_attributes][][published] type=checkbox
value=1 /input name=episode[episode_attributes][][published]
type=hidden value=0 / /td/tr/table h2Notes/h2 p
textarea cols=100 id=episode_episode_attributes__notes
name=episode[episode_attributes][][notes] rows=2/textarea /
pa href=# class=pukh2Remove ep from list/h2/a/div');
});
$('.puk h2')
.livequery('click', function(event) {
$(this).parents('.eplist').remove();
return false;
});
});
/script
[jQuery] Re: Loss of focus hotkey giving error
Have you tried simply setting focus to one of the divs?
$('div:first')[0].focus();
On May 24, 4:40 pm, brassica [EMAIL PROTECTED] wrote:
hi all, i seem to have a problem with using Hotkeys and intercept
I would appreciate it very much if someone would explain why the error
is occurring and a solution ty in advance
OK the scenario
I have a (series of ) AJAX call(s) after which i am populating a DIV
with other DIVS arranged like a matrix . The user can use arrow keys
to move between the DIVS or use letter keys to fill a DIV with the
corresponding letter. A user can also click on a DIV to make it the
active DIV to receive input.
What is happening is that a user has to click on a DIV in order for
the various functions to kick in.
If after the html is rendered a user presses a letter or an arrow key
WITHOUT clicking a box first an error is generated (from HotKeys)
that.all[element] has no properties (line 82)
[Break on this error] var cbMap =
that.all[element].events[type].callbackMap;
What i want is a user to be able to start typing or using arrow keys
straight away. i have tried to use trigger to emulate a click but that
doesnt seem to work. I think it something to do with focus. Can anyone
help me please?
Thank you
[jQuery] Re: Show/hide toggle hides form too...bah!
Ok.
Couple of things.
I put a 'return false;' at the end of the click handler (sorry - tends
to be a reflex action!) when it doesn't actually need it. Either shift
it up to be within the 'if...' statement block, or remove it
altogether. It prevents focussing on the input element and activating
the link. eg.
$('div#homepage_boxes div.col').click(function(event) {
// only toggle if it was div.col or its H2 that was clicked...
if ( this==event.target || $(event.target).is('h2') ){
$(this).siblings('.selected').andSelf().toggleClass('selected');
return false;
}
});
Secondly, you don't have a 'submit' input type : I'm not that clued up
on validator, but I can see that you set a submit handler (to
alert(...)) but without a 'submit' type to attach it to, or a
specified replacement, I can't see what will handle clicking on the Go
apart from the div.col handler.
Basically I can only see one click handler - the div.col one - for
handling *any* click on *any* element within div.col, so if you want
to catch the form submission you probably need to add some other
handler somewhere.
On May 24, 2:17 am, Ridge [EMAIL PROTECTED] wrote:
Oooh SO close Wizzud! Followed your instructions carefully, and set
the height of the form equal to the height of div.col.
The forms now toggle correctly, stay on when the user is inputting
their zip, BUT (taking For Your Home, for example) doesn't submit when
the Go button is clicked. It also doesn't produce a form validation
error message when nothing is clicked. But weirdly, if you enter less
than 5 digits and hit Go, it DOES error check. Also, the Get access
to your account link below doesn't work. Any ideas?
Nearly there, and thank you so much to all of you for your help!
On May 23, 7:00 pm, Wizzud [EMAIL PROTECTED] wrote:
$('div#homepage_boxes div.col').click(function(event) {
// only toggle if it was div.col or its H2 that was clicked...
if ( this==event.target || $(event.target).is('h2') ){
$(this).siblings('.selected').andSelf().toggleClass('selected');
}
return false;
});
And you should ensure that your form covers div.col entirely.
On May 23, 5:29 pm, Ridge [EMAIL PROTECTED] wrote:
Karl, thanks.
I modifed your line slightly to give it the same specificity as the
preceding declaration (it wasn't working at all when it was just
'form'), and now the form isn't appearing at all on click!
Here's the whole section:
// Show/hide forms
$('div#homepage_boxes form').hide();
$('div#homepage_boxes div.col').click(function(event) {
var $tgt = $(event.target);
if (!$tgt.is('div#homepage_boxes form')) { //don't toggle
when
clicking the form!
$
(this).siblings('.selected').andSelf().toggleClass('selected').end().end();
}
});
I may be getting my selectors confused. Oh, honestly I don't know what
I'm doing wrong at this point...!
On May 23, 10:24 am, Karl Swedberg [EMAIL PROTECTED] wrote:
This line:
if ($tgt.not('form')) { //don't toggle when clicking the form!
should be :
if (!$tgt.is('form')) { //don't toggle when clicking the form!
The first always returns the jQuery object, so it's always truthy.
The second returns a boolean. Will be true if the target element is
not a form.
--Karl
_
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On May 23, 2008, at 10:27 AM, Ridge wrote:
Hm. Replaced my code with yours, and it's still toggling the form when
its clicked. :(
On May 22, 5:29 pm, Pyrolupus [EMAIL PROTECTED] wrote:
You need to have your event handler handle things differently
depending upon the specific child element that was clicked.
For example:
$('div#homepage_boxes div.col').click(function(event) {
var $tgt = $(event.target);
if ($tgt.not('form')) { //don't toggle when clicking the form!
$
(this
).siblings
('.selected').andSelf().toggleClass('selected').end().end();
}
});
Seehttp://www.learningjquery.com/2008/03/working-with-events-part-1
for more complete coverage of this. It's where I learned it. :)
~Pyro
On May 22, 3:55 pm, Ridge [EMAIL PROTECTED] wrote:
I have this page:http://tinyurl.com/5hascg. I'm using JQuery for a
few things - :hover on the main content blocks, form validation, and
show/hide.
By themselves, everything is working great! But it's the
interoperability of the last two that are causing me a headache.
When
you click anywhere in the For your home box, the content appears.
There's a form in that div. However, when you try to focus in that
div by clicking, the form hides.
So, what I'd like to know is how to show the div contents by
clicking
[jQuery] Re: Select attribute by checking more than one value
jQuery('.entry a:not(.download):has( img )
.filter(function(){ return /\.(jpg|gif|png)$/.test(this.ref);
}).attr('rel','popupgallery').addClass('something');
On May 24, 12:55 am, leggo-my-eggo [EMAIL PROTECTED] wrote:
Hi, I'm new here, so forgive me if I'm missing something obvious, or
violating etiquette.
I'm trying the following code:
jQuery('.entry a:has( img )[href$={.jpg || .gif ||
.png}]').not('.download').attr('rel',
'popupgallery').addClass('something');
What I want it to do is to find in .entry all the a tags with imgs
inside them, but I only want a tags with href attributes whose
values end in .jpg, .gif, or .png. And I want only those a tags
which do not have a class of 'download'.
So, in other words I want to find all the links that link to a larger
version of the image they contain (so, for instance a thumbnail which
links to a larger version).
It works except for the {.jpg || .gif || .png} bit. How do I
check the href value against multiple possibilities?
Thanks!
[jQuery] Re: Select attribute by checking more than one value
hmph ... sorry about the typos! Must get into the habit of actually
wearing my glasses!
On May 24, 4:46 pm, leggo-my-eggo [EMAIL PROTECTED] wrote:
Wizzud,
So helpful, thank you!
Just to have the record here complete, there were two small syntax
things in that that I had to change, and the working version is:
jQuery('.entry a:not(.download):has( img )')
.filter(function(){ return /\.(jpg|gif|png)$/.test(this.href);
}).attr('rel','popupgallery').addClass('something');
The two changes are the closing of the single quote and paren at the
end of the selector, and changing this.ref to this.href
Works perfectly!
On May 24, 6:42 am, Wizzud [EMAIL PROTECTED] wrote:
jQuery('.entry a:not(.download):has( img )
.filter(function(){ return /\.(jpg|gif|png)$/.test(this.ref);
}).attr('rel','popupgallery').addClass('something');
On May 24, 12:55 am, leggo-my-eggo [EMAIL PROTECTED] wrote:
Hi, I'm new here, so forgive me if I'm missing something obvious, or
violating etiquette.
I'm trying the following code:
jQuery('.entry a:has( img )[href$={.jpg || .gif ||
.png}]').not('.download').attr('rel',
'popupgallery').addClass('something');
What I want it to do is to find in .entry all the a tags with imgs
inside them, but I only want a tags with href attributes whose
values end in .jpg, .gif, or .png. And I want only those a tags
which do not have a class of 'download'.
So, in other words I want to find all the links that link to a larger
version of the image they contain (so, for instance a thumbnail which
links to a larger version).
It works except for the {.jpg || .gif || .png} bit. How do I
check the href value against multiple possibilities?
Thanks!
[jQuery] Re: Show/hide toggle hides form too...bah!
$('div#homepage_boxes div.col').click(function(event) {
// only toggle if it was div.col or its H2 that was clicked...
if ( this==event.target || $(event.target).is('h2') ){
$(this).siblings('.selected').andSelf().toggleClass('selected');
}
return false;
});
And you should ensure that your form covers div.col entirely.
On May 23, 5:29 pm, Ridge [EMAIL PROTECTED] wrote:
Karl, thanks.
I modifed your line slightly to give it the same specificity as the
preceding declaration (it wasn't working at all when it was just
'form'), and now the form isn't appearing at all on click!
Here's the whole section:
// Show/hide forms
$('div#homepage_boxes form').hide();
$('div#homepage_boxes div.col').click(function(event) {
var $tgt = $(event.target);
if (!$tgt.is('div#homepage_boxes form')) { //don't toggle when
clicking the form!
$
(this).siblings('.selected').andSelf().toggleClass('selected').end().end();
}
});
I may be getting my selectors confused. Oh, honestly I don't know what
I'm doing wrong at this point...!
On May 23, 10:24 am, Karl Swedberg [EMAIL PROTECTED] wrote:
This line:
if ($tgt.not('form')) { //don't toggle when clicking the form!
should be :
if (!$tgt.is('form')) { //don't toggle when clicking the form!
The first always returns the jQuery object, so it's always truthy.
The second returns a boolean. Will be true if the target element is
not a form.
--Karl
_
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On May 23, 2008, at 10:27 AM, Ridge wrote:
Hm. Replaced my code with yours, and it's still toggling the form when
its clicked. :(
On May 22, 5:29 pm, Pyrolupus [EMAIL PROTECTED] wrote:
You need to have your event handler handle things differently
depending upon the specific child element that was clicked.
For example:
$('div#homepage_boxes div.col').click(function(event) {
var $tgt = $(event.target);
if ($tgt.not('form')) { //don't toggle when clicking the form!
$
(this
).siblings
('.selected').andSelf().toggleClass('selected').end().end();
}
});
Seehttp://www.learningjquery.com/2008/03/working-with-events-part-1
for more complete coverage of this. It's where I learned it. :)
~Pyro
On May 22, 3:55 pm, Ridge [EMAIL PROTECTED] wrote:
I have this page:http://tinyurl.com/5hascg. I'm using JQuery for a
few things - :hover on the main content blocks, form validation, and
show/hide.
By themselves, everything is working great! But it's the
interoperability of the last two that are causing me a headache.
When
you click anywhere in the For your home box, the content appears.
There's a form in that div. However, when you try to focus in that
div by clicking, the form hides.
So, what I'd like to know is how to show the div contents by
clicking anywhere in the div, but only hide it by clicking on the
header (which I've temporarily given a background color of green to
make it stand out).
For reference, here's the contents of my $(document).ready section
which is linked from the page above. Thanks!:
$(document).ready(function(){
// Add class to shift background images on load
$('#box_home').addClass('pageload');
$('#box_business').addClass('pageload');
$('#box_account').addClass('pageload');
// Show/hide forms
$('div#homepage_boxes form').hide();
$('div#homepage_boxes div.col').click(function() {
$
(this
).siblings
('.selected').andSelf().toggleClass('selected').end().end()
//.next('form').slideToggle('fast')
//.siblings('form:visible').slideUp('fast');
});
// Add homepage box hover effect for IE6
$('div#homepage_boxes .col').hover(function() {
$(this).addClass('ie6boxhover');
}, function() {
$(this).removeClass('ie6boxhover');
});
// Form validation
$.validator.setDefaults({
submitHandler: function() { alert(submitted!); }
});
$(#homeform).validate({
rules: {
txtZipcode: {
required: true,
minlength: 5
}
},
messages: {
txtZipcode: {
required: To continue processing your request, we need a
5-digit zip code. Please re-type the zip code of your service
address.,
minlength: Your zip code must be 5-digits long. Please
re-
type the zip code of your service address.
}
}
});
});
[jQuery] Re: Digging through wrapper DIVs
$('span.bullet').parent().filter(function(){
return !$(this).parents('div:has(span.bullet)').length;
});
On May 22, 9:54 pm, EdMartin [EMAIL PROTECTED] wrote:
I have a setup like this
div id=container
div class=wrapper
div class=wrapper
divspan class=bulletBullet/span
!-- other stuff, potentially inner divs also containing bullets --
/div
/div
/div
/div
where there is an unknown number of wrapping wrapper divs. I want to
select the uppermost divs that contain a span.bullet, regardless of
the amount of wrapping. All such uppermost span.bullet-containg divs
will be wrapped to the same depth. But any or all of them may contain
other span.bullet-containing divs -- I don't want to select such non-
uppermost divs.
In practice, the depth of wrapping is probably only 0, 1, 2, or 3. So
I could deal with each of those separately, like this:
$( '#container' ).children().filter( ':has( span.bullet )' ) // no
wrapping
$
( '#container' ).children().filter( '.wrapper' ).children().filter( ':has(
span.bullet )' ) //
1 layer of wrapping
and so on. But surely there has to be a more elegant way.
Any suggestions?
[jQuery] Re: hiding a div when another div becomes empty?
$('#hiddenleft a').livequery('click', function() {
var $this = $(this);
$('#'+$this.attr('class')).show();
$this.remove();
if(!$('#hiddenleft a').length){
$('#hiddenleft,#hiddencontent').hide();
}
});
On May 20, 3:52 pm, thekman [EMAIL PROTECTED] wrote:
Hi all,
I am removing links from a div when they are clicked on using the code
below:
$('#hiddenleft a').livequery('click', function() {
var $this = $(this).attr(class);
$('#'+$this).show();
$(this).remove();
});
when all links are removed, i want hide that div the div above it -
hiddencontent .
the links are displayed in the following divs:
div id=hiddencontenthidden items/div
div id=hiddenitemsdiv id=hiddenleft ...links.../div/div
any ideas on how i would do it?
[jQuery] Re: MooTools to Query
As with most things, there are different ways to achieve what you
want. This is just one of them...
Assumption: you have some styles defined along the lines of:
style type='text/css'
#demo-wrapper {height:250px; overflow:hidden;}
.scrolling-content {height:250px;}
/style
(actual values are not relevant, and overflow could be auto, but
without something similar there is no point to the scroll!)
Include the following scripts:
- jQuery
- the Easing plugin (for jQuery)
- the ScrollTo plugin (for jQuery)
Script:
jQuery(document).ready( function($){
$('#buttons a').bind('click', function(){
this.blur();
var n = this.id.match(/(\d+)$/);
if(n){
$('#demo-wrapper').stop().scrollTo( '#content' + n[1],
{duration:1000, easing:'easeInOutQuad'} );
}
return false;
});
});
The above has been tested and works, and does not require changing the
html.
On May 20, 8:23 pm, Ariel Flesler [EMAIL PROTECTED] wrote:
jQuery.LocalScroll:
http://flesler.blogspot.com/2007/10/jquerylocalscroll-10.html
--
Ariel Fleslerhttp://flesler.blogspot.com
On 20 mayo, 08:27, Michael [EMAIL PROTECTED] wrote:
Hi,
I have a coda slider working using mootools, but want to use JQuery as
my main library.
I have this code for my slider:
window.addEvent('domready', function(){
var scroll = new Fx.Scroll('demo-wrapper', {
wait: false,
duration: 1000,//Speed to slide
transition: Fx.Transitions.Quad.easeInOut
});
$('link1').addEvent('click', function(event) {
event = new Event(event).stop();
scroll.toElement('content1');
});
$('link2').addEvent('click', function(event) {
event = new Event(event).stop();
scroll.toElement('content2');
});
$('link3').addEvent('click', function(event) {
event = new Event(event).stop();
scroll.toElement('content3');
});
$('link4').addEvent('click', function(event) {
event = new Event(event).stop();
scroll.toElement('content4');
});
$('link5').addEvent('click', function(event) {
event = new Event(event).stop();
scroll.toElement('content5');
});
});
The slider works fine with mootools.v1.1.js, but want it to work with
jquery (I've tried putting it with jquery.1.2.3.pack.js) but it
doesn't work. What 'mootools' code is in the above javascript and what
would be the jquery equivalent?
And the HTML:
div id=demo-wrapper
div id=demo-inner
div id=content1 class=scrolling-content
div id=user1
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat
/div
/div
div id=content2 class=scrolling-content
div id=user2
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat
/div
/div
div id=content3 class=scrolling-content
div id=user3
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat
/div
/div
div id=content4 class=scrolling-content
div id=user4
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat
/div
/div
div id=content5 class=scrolling-content
div id=user5
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat
[jQuery] Re: selectors question
I, also, am not entirely sure what the end requirement is, but this
might help ...
$(document).ready(function() {
var inputUpdate = $('input.listcomplete').next('ul').find('li')
.bind('click', function(){
//this only works when a space is a valid separator, ie no LI
//text contains spaces!
var curVal = inputUpdate.val().split(/\s+/)
, liText = $.trim($(this).text())
, indx = $.inArray(liText, curVal);
if(indx 0){
curVal.push(liText);
}else{
curVal = $.grep(curVal, function(v,i){ return (v!=liText); });
}
inputUpdate.val($.trim(curVal.join(' ')));
}).end().end();
});
On May 20, 9:32 pm, Scott Sauyet [EMAIL PROTECTED] wrote:
nos wrote:
input name=Categories class=listcomplete value=Cat1 Cat2 Cat3
ul
liCat1/li
liCat2/li
liCat3/li
liCat4/li
liCat5/li
/ul
I'm not quite sure what you're looking to do, and this markup is part of
the issue. There is no type attribute on your input tag. Is this
just a text field? Also, the tag is also not closed. Is the ul
element supposed to somehow be embedded in the input element?
-- Scott
[jQuery] Re: hiding a div when another div becomes empty?
It's just usage.
'$this' is commonly used to indicate that the variable holds the
jQuery object of 'this'. Personally I tend not to use variable names
beginning with '$' because it confuses me, but a lot of people do, and
that tends to be the convention they use, ie.
var $this = $(this);
var $elem = $(elem);
var $me = $(me);
etc,etc.
In your particular code, you were setting...
var $this = $(this).attr('class');
...which puts a string into $this, so $this is not a jQuery object,
and *might* be more conventionally written...
var klass = $(this).attr('class'); //or whatever variable name you
choose
The only (very, very, very slight) advantage to my code is that it
saves converting 'this' into a jQuery object twice - once to find the
class, and then again to remove itself.
On May 21, 9:52 am, thekman [EMAIL PROTECTED] wrote:
Hi Wizzud,
Just wondering if there is any performance/browser compatibility or
any other reason you changed:
var $this = $(this).attr(class);
$('#'+$this).show();
to
var $this = $(this);
$('#'+$this.attr('class')).show();
On May 21, 9:38 am, thekman [EMAIL PROTECTED] wrote:
Thank you Wizzud, works a treat...
On May 21, 9:26 am, Wizzud [EMAIL PROTECTED] wrote:
$('#hiddenleft a').livequery('click', function() {
var $this = $(this);
$('#'+$this.attr('class')).show();
$this.remove();
if(!$('#hiddenleft a').length){
$('#hiddenleft,#hiddencontent').hide();
}
});
On May 20, 3:52 pm, thekman [EMAIL PROTECTED] wrote:
Hi all,
I am removing links from a div when they are clicked on using the code
below:
$('#hiddenleft a').livequery('click', function() {
var $this = $(this).attr(class);
$('#'+$this).show();
$(this).remove();
});
when all links are removed, i want hide that div the div above it -
hiddencontent .
the links are displayed in the following divs:
div id=hiddencontenthidden items/div
div id=hiddenitemsdiv id=hiddenleft ...links.../div/div
any ideas on how i would do it?
[jQuery] Re: .show() Question
If you put a background-color on #workContainer you will see that actually they both expand the same - one from the top-right corner, one from the top-left corner. It only appears to be different because of the different type of content. On May 21, 3:56 pm, Jason [EMAIL PROTECTED] wrote: Hey all, Working on my graduation portfolio and I am not quite sure why things are behaving in the fashion that they are. Here is the test site to use as reference (I apologize for the gross code and long load time, only a test page). http://www.design72.net/d72_root/javascript_test.html I have two elements show when the work link is clicked. Both elements respond differently. The left hand element slides in from right to left, where the right element reveals from the top left corner. The left element functions in the way I intended it to, but the right does not. I want it to have the same style of sliding animation as in the left but only from left to right so that it is coming from my vertical divider. Anyone know why they are interacting differently or have a solution? Thanks!
[jQuery] Re: bind click event equal to mouseover
So you've got a hover on the A, and the A is the sole content of the
LI, and you want a hover on the LI to do the same as the hover on the
A?
Sounds to me like you might just need to make the A a block element -
li a{display:block;width:100%;} - then you wouldn't need a hover on
the LI.
On May 21, 7:06 pm, Ariel Flesler [EMAIL PROTECTED] wrote:
Something like this ?
$('li').mouseover(function(){
$(this).find('a').click();
});
--
Ariel Fleslerhttp://flesler.blogspot.com
On 21 mayo, 12:07, paragasu [EMAIL PROTECTED] wrote:
On Tue, May 20, 2008 at 6:13 AM, Wizzud [EMAIL PROTECTED] wrote:
One way is to make the LI's mouseover add a class, the mouseout remove
that class, then set css to do what you want to the A element...
$('li').hover( function(){ $(this).addClass('x') }
, function(){ $(this).removeClass('x') } );
style...
li.x a {color:#ff9900;}
On May 19, 1:34 pm, paragasu [EMAIL PROTECTED] wrote:
is it possible i make one event equal to another event
for example, if i put a mouseover on a li/li tags. automaticly,
the a mouseover activated?
so if i have a tags like lia href=#link here /a/li
the link will be highlighted regardless of user put a mouserover on a
tags or li tags?
actually there is an event triggered when the mouse over at a tags.
what i want is, when the use mouse over at li the a event will be
triggered.
the a tags is a child of li... thanks- Ocultar texto de la cita -
- Mostrar texto de la cita -
[jQuery] Re: jqDock can embed flash/video object?
Not at present ... and to be honest it hasn't been considered. On May 19, 4:53 am, Davis [EMAIL PROTECTED] wrote: Hi all, Beside img object, is it possible to embed a flash/video object? eg swf or youtube video ? Thanks/Davis.
[jQuery] Re: bind click event equal to mouseover
One way is to make the LI's mouseover add a class, the mouseout remove
that class, then set css to do what you want to the A element...
$('li').hover( function(){ $(this).addClass('x') }
, function(){ $(this).removeClass('x') } );
style...
li.x a {color:#ff9900;}
On May 19, 1:34 pm, paragasu [EMAIL PROTECTED] wrote:
is it possible i make one event equal to another event
for example, if i put a mouseover on a li/li tags. automaticly,
the a mouseover activated?
so if i have a tags like lia href=#link here /a/li
the link will be highlighted regardless of user put a mouserover on a
tags or li tags?
[jQuery] Re: jqDock doesn't do anything?
Do you have a web-accessible example I can look at?
On May 16, 3:40 am, Davis [EMAIL PROTECTED] wrote:
wizzud,
thanks for your help.
now im using coefficient: 1 and
#menu img {padding:0px 2px 0px 0px; }
it is work fine in FF2, but still no luck from IE, so you quoted
(a) be aware that for any coefficient other than 1 (linear) this can
(will) throw out calculation of the leading edge of the menu
(b) use a DOCTYPE, otherwise IE will get the spacing wrong
may I know anything wrong of my CSS ?
Many thanks/Davis.
On May 16, 7:32 am, Wizzud [EMAIL PROTECTED] wrote:
@Davis
Yes you can pad the images, and the bottom horizontal menu on the demo
page -http://www.wizzud.com/jqDock/-has 4px (left/right) padding
applied to it. Please be aware of the limitations though (see the
Example CSS).
On May 15, 10:07 am, Davis [EMAIL PROTECTED] wrote:
Thanks very much for above suggestion, I got the same problem that
what make me headache a while, now can sloved it..THANKS.
now i am using horizontal menu option, so can i ask if anyhow to pad
some space between each image? following is my CSS, but it seems
#menu img {padding:0px 5px 0px 0px;} didnt take effect at all.
I also tried hardcode in this way, it take effect, but some of the
image are break down another line instead of the same line ( ie i show
10 image per line, but 8 in a line, another 2 in 2nd line )
img src=img.gif title='xxx'' style=margin:0px 5px 0px 0px;/
=== CSS
#menu {position:absolute; top:50px; left:10px;}
#menu div.jqDock {border:0px none;}
#menu img {padding:0px 5px 0px 0px;}
#menu div.jqDockLabel {
background-color:transparent;
border:0px none;
color:white;
font-size:12px;
font-style:italic;
font-weight:bold;
padding:0px 4px;
white-space:nowrap;
}
#menu div.jqDockLabelLink {cursor:pointer;}
#menu div.jqDockLabelImage {cursor:default;}
Appreicate your help.
Thanks/Davis.
On May 15, 7:20 am, Wizzud [EMAIL PROTECTED] wrote:
Try placing your script inside the 'document ready' function...
jQuery(document).ready(function(){
// Your code here
});
eg.
script type=text/javascript
jQuery(document).ready(function(){
var opts = { align: 'bottom'
, size: 150
, distance: 60
, coefficient: 1.5
, labels: false
, duration: 500
, source:false
};
jQuery('#icons').jqDock(opts);
});
/script
On May 14, 4:53 pm, JohnieKarr [EMAIL PROTECTED] wrote:
Hello,
I'm trying to find some support for this problem I'm having and there
isn't much on google regarding jqDock.
I have created just a basic test page using jqDock, but nothing
happens. My images appear as normal, but nothing happens when I mouse
over them (except the title shows as normal). All my paths are
correct, and no errors are displayed. I have tried in both IE 6 and
FireFox, and both have the same result. It is an intranet site at
work, so I can't link to it, but here is my source:
html
head
script type=text/javascript src=http://ksar.corp.cox.com/
CustomerCare/CSI/FieldOps/includes/jquery-1.2.3.js/script
script type=text/javascript src=http://ksar.corp.cox.com/
CustomerCare/CSI/FieldOps/includes/jquery.jqDock.js/script
script type=text/javascript
var opts = { align: 'bottom'
, size: 150
, distance: 60
, coefficient: 1.5
, labels: false
, duration: 500
, source:false
};
jQuery('#icons').jqDock(opts);
/script
/head
body
br/br/br/br/
div id=icons name=icons
img src='http://ksar.corp.cox.com/CustomerCare/CSI/FieldOps/images/
Mailmed.png' title='Click Here To Send Out A Communication'/
img src='http://ksar.corp.cox.com/CustomerCare/CSI/FieldOps/images/
Printmed.png' title='Click Here To Print This Page'/
img src='http://ksar.corp.cox.com/CustomerCare/CSI/FieldOps/images/
QuestionMarkmed.png' title='Click Here For Information About This
Website'/
/div
/body
/html
If anyone has any idea why this doesn't work as expected that would be
great.
I do use other jquery plugins on other pages and they work fine.
Thanks,
Johnie Karr- Hide quoted text -
- Show quoted text -- Hide quoted text -
- Show quoted text -
[jQuery] Re: Expanding the clickable region of a checkbox
No, you can lose the 'cb = ', it was left over from my testing ...
sorry.
On May 16, 2:55 pm, Andiih [EMAIL PROTECTED] wrote:
Thanks guys. That's (give or take an '=' sign) perfect :-)
I presme I can acutally lose the 'cb = ' or is there a reason for
needing that assignment ?
Andrew
On May 16, 12:10 am, Wizzud [EMAIL PROTECTED] wrote:
Eg.
$('td').bind('click', function(e){
if(e.target===this){
cb = $(this).children(':checkbox').trigger('click');
return false;
}
});
On May 15, 4:16 pm, Richard D. Worth [EMAIL PROTECTED] wrote:
The click callback gets the event object as the first parameter. Check the
event.target property. That will be the DOMElement actually clicked on. In
your case, simply make sure it's a TD (ignoring the click on the checkbox,
as that one's handled by the browser default).
- Richard
On Thu, May 15, 2008 at 10:36 AM,Andiih[EMAIL PROTECTED] wrote:
Hi
I have some checkboxes in table cells. I would like a click anywhere
in the td to trigger the toggle of the checkbox.
I thought something like this would do it (obviously with more
specific selectors for the real world)
$(td).click(function(){
$(this).children(input).each(function(){
if (this.checked) { $(this).attr('checked',''); }
else { $(this).attr('checked','true'); }
});
});
this works for a click on the table cell, but stops the action of
clicking on the checkbox itself from working - presumably because its
running the above plus the standard HTML toggle, and therefore
canceling itself out. Any ideas ?- Hide quoted text -
- Show quoted text -
[jQuery] Re: How do I write this jquery expression?
var visID = $('div.subNav:visible').attr('id');
On May 15, 10:28 pm, [EMAIL PROTECTED]
[EMAIL PROTECTED] wrote:
Hi,
I have a number of DIVs with class = subNav. How do I write a
Jquery expression to tell me the ID of the DIV with class subNav
whose display element is not none (i.e. block)?
Thanks, - Dave
[jQuery] Re: Expanding the clickable region of a checkbox
Eg.
$('td').bind('click', function(e){
if(e.target===this){
cb = $(this).children(':checkbox').trigger('click');
return false;
}
});
On May 15, 4:16 pm, Richard D. Worth [EMAIL PROTECTED] wrote:
The click callback gets the event object as the first parameter. Check the
event.target property. That will be the DOMElement actually clicked on. In
your case, simply make sure it's a TD (ignoring the click on the checkbox,
as that one's handled by the browser default).
- Richard
On Thu, May 15, 2008 at 10:36 AM, Andiih [EMAIL PROTECTED] wrote:
Hi
I have some checkboxes in table cells. I would like a click anywhere
in the td to trigger the toggle of the checkbox.
I thought something like this would do it (obviously with more
specific selectors for the real world)
$(td).click(function(){
$(this).children(input).each(function(){
if (this.checked) { $(this).attr('checked',''); }
else { $(this).attr('checked','true'); }
});
});
this works for a click on the table cell, but stops the action of
clicking on the checkbox itself from working - presumably because its
running the above plus the standard HTML toggle, and therefore
canceling itself out. Any ideas ?
[jQuery] Re: jqDock doesn't do anything?
@Davis
Yes you can pad the images, and the bottom horizontal menu on the demo
page - http://www.wizzud.com/jqDock/ - has 4px (left/right) padding
applied to it. Please be aware of the limitations though (see the
Example CSS).
On May 15, 10:07 am, Davis [EMAIL PROTECTED] wrote:
Thanks very much for above suggestion, I got the same problem that
what make me headache a while, now can sloved it..THANKS.
now i am using horizontal menu option, so can i ask if anyhow to pad
some space between each image? following is my CSS, but it seems
#menu img {padding:0px 5px 0px 0px;} didnt take effect at all.
I also tried hardcode in this way, it take effect, but some of the
image are break down another line instead of the same line ( ie i show
10 image per line, but 8 in a line, another 2 in 2nd line )
img src=img.gif title='xxx'' style=margin:0px 5px 0px 0px;/
=== CSS
#menu {position:absolute; top:50px; left:10px;}
#menu div.jqDock {border:0px none;}
#menu img {padding:0px 5px 0px 0px;}
#menu div.jqDockLabel {
background-color:transparent;
border:0px none;
color:white;
font-size:12px;
font-style:italic;
font-weight:bold;
padding:0px 4px;
white-space:nowrap;
}
#menu div.jqDockLabelLink {cursor:pointer;}
#menu div.jqDockLabelImage {cursor:default;}
Appreicate your help.
Thanks/Davis.
On May 15, 7:20 am, Wizzud [EMAIL PROTECTED] wrote:
Try placing your script inside the 'document ready' function...
jQuery(document).ready(function(){
// Your code here
});
eg.
script type=text/javascript
jQuery(document).ready(function(){
var opts = { align: 'bottom'
, size: 150
, distance: 60
, coefficient: 1.5
, labels: false
, duration: 500
, source:false
};
jQuery('#icons').jqDock(opts);
});
/script
On May 14, 4:53 pm, JohnieKarr [EMAIL PROTECTED] wrote:
Hello,
I'm trying to find some support for this problem I'm having and there
isn't much on google regarding jqDock.
I have created just a basic test page using jqDock, but nothing
happens. My images appear as normal, but nothing happens when I mouse
over them (except the title shows as normal). All my paths are
correct, and no errors are displayed. I have tried in both IE 6 and
FireFox, and both have the same result. It is an intranet site at
work, so I can't link to it, but here is my source:
html
head
script type=text/javascript src=http://ksar.corp.cox.com/
CustomerCare/CSI/FieldOps/includes/jquery-1.2.3.js/script
script type=text/javascript src=http://ksar.corp.cox.com/
CustomerCare/CSI/FieldOps/includes/jquery.jqDock.js/script
script type=text/javascript
var opts = { align: 'bottom'
, size: 150
, distance: 60
, coefficient: 1.5
, labels: false
, duration: 500
, source:false
};
jQuery('#icons').jqDock(opts);
/script
/head
body
br/br/br/br/
div id=icons name=icons
img src='http://ksar.corp.cox.com/CustomerCare/CSI/FieldOps/images/
Mailmed.png' title='Click Here To Send Out A Communication'/
img src='http://ksar.corp.cox.com/CustomerCare/CSI/FieldOps/images/
Printmed.png' title='Click Here To Print This Page'/
img src='http://ksar.corp.cox.com/CustomerCare/CSI/FieldOps/images/
QuestionMarkmed.png' title='Click Here For Information About This
Website'/
/div
/body
/html
If anyone has any idea why this doesn't work as expected that would be
great.
I do use other jquery plugins on other pages and they work fine.
Thanks,
Johnie Karr- Hide quoted text -
- Show quoted text -
[jQuery] Re: jqDock doesn't do anything?
@JohnieKarr
Yep, if it works, that correctPNG() script will definitely prevent
jqDock() doing anything.
On May 15, 3:22 pm, JohnieKarr [EMAIL PROTECTED] wrote:
Wizzud,
Thanks for the help. Once I inclosed the script inside the document
ready function it worked great.
It quit working however, once I inserted this script into my header:
!--[if lt IE 7.]
script defer type=text/javascript src=http://ksar.corp.cox.com/
CustomerCare/CSI/FieldOps/includes/pngfix.js/script
![endif]--
The images do appear, they just don't do anything.
Of course this script corrects the transparent png issue found in ie6.
Any suggestions would be greatly appreciated.
Below is pngfix.js code:
function correctPNG() // correctly handle PNG transparency in Win IE
5.5 6.
{
var arVersion = navigator.appVersion.split(MSIE)
var version = parseFloat(arVersion[1])
if ((version = 5.5) (document.body.filters))
{
for(var i=0; idocument.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) ==
PNG)
{
var imgID = (img.id) ? id=' + img.id + ' :
var imgClass = (img.className) ? class=' + img.className
+ ' :
var imgTitle = (img.title) ? title=' + img.title + '
: title=' + img.alt + '
var imgStyle = display:inline-block; +
img.style.cssText
if (img.align == left) imgStyle = float:left; +
imgStyle
if (img.align == right) imgStyle = float:right; +
imgStyle
if (img.parentElement.href) imgStyle = cursor:hand; +
imgStyle
var strNewHTML = span + imgID + imgClass + imgTitle
+ style=\ + width: + img.width + px; height: +
img.height + px; + imgStyle + ;
+
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
+ (src=\' + img.src + \', sizingMethod='scale');\/
span
img.outerHTML = strNewHTML
i = i-1
}
}
}}
window.attachEvent(onload, correctPNG);
Thanks,
On May 14, 6:20 pm, Wizzud [EMAIL PROTECTED] wrote:
Try placing your script inside the 'document ready' function...
jQuery(document).ready(function(){
// Your code here
});
eg.
script type=text/javascript
jQuery(document).ready(function(){
var opts = { align: 'bottom'
, size: 150
, distance: 60
, coefficient: 1.5
, labels: false
, duration: 500
, source:false
};
jQuery('#icons').jqDock(opts);
});
/script
On May 14, 4:53 pm, JohnieKarr [EMAIL PROTECTED] wrote:
Hello,
I'm trying to find some support for this problem I'm having and there
isn't much on google regarding jqDock.
I have created just a basic test page using jqDock, but nothing
happens. My images appear as normal, but nothing happens when I mouse
over them (except the title shows as normal). All my paths are
correct, and no errors are displayed. I have tried in both IE 6 and
FireFox, and both have the same result. It is an intranet site at
work, so I can't link to it, but here is my source:
html
head
script type=text/javascript src=http://ksar.corp.cox.com/
CustomerCare/CSI/FieldOps/includes/jquery-1.2.3.js/script
script type=text/javascript src=http://ksar.corp.cox.com/
CustomerCare/CSI/FieldOps/includes/jquery.jqDock.js/script
script type=text/javascript
var opts = { align: 'bottom'
, size: 150
, distance: 60
, coefficient: 1.5
, labels: false
, duration: 500
, source:false
};
jQuery('#icons').jqDock(opts);
/script
/head
body
br/br/br/br/
div id=icons name=icons
img src='http://ksar.corp.cox.com/CustomerCare/CSI/FieldOps/images/
Mailmed.png' title='Click Here To Send Out A Communication'/
img src='http://ksar.corp.cox.com/CustomerCare/CSI/FieldOps/images/
Printmed.png' title='Click Here To Print This Page'/
img src='http://ksar.corp.cox.com/CustomerCare/CSI/FieldOps/images/
QuestionMarkmed.png' title='Click Here For Information About This
Website'/
/div
/body
/html
If anyone has any idea why this doesn't work as expected that would be
great.
I do use other jquery plugins on other pages and they work fine.
Thanks,
Johnie Karr- Hide quoted text -
- Show quoted text -
[jQuery] Re: jqDock doesn't do anything?
Try placing your script inside the 'document ready' function...
jQuery(document).ready(function(){
// Your code here
});
eg.
script type=text/javascript
jQuery(document).ready(function(){
var opts = { align: 'bottom'
, size: 150
, distance: 60
, coefficient: 1.5
, labels: false
, duration: 500
, source:false
};
jQuery('#icons').jqDock(opts);
});
/script
On May 14, 4:53 pm, JohnieKarr [EMAIL PROTECTED] wrote:
Hello,
I'm trying to find some support for this problem I'm having and there
isn't much on google regarding jqDock.
I have created just a basic test page using jqDock, but nothing
happens. My images appear as normal, but nothing happens when I mouse
over them (except the title shows as normal). All my paths are
correct, and no errors are displayed. I have tried in both IE 6 and
FireFox, and both have the same result. It is an intranet site at
work, so I can't link to it, but here is my source:
html
head
script type=text/javascript src=http://ksar.corp.cox.com/
CustomerCare/CSI/FieldOps/includes/jquery-1.2.3.js/script
script type=text/javascript src=http://ksar.corp.cox.com/
CustomerCare/CSI/FieldOps/includes/jquery.jqDock.js/script
script type=text/javascript
var opts = { align: 'bottom'
, size: 150
, distance: 60
, coefficient: 1.5
, labels: false
, duration: 500
, source:false
};
jQuery('#icons').jqDock(opts);
/script
/head
body
br/br/br/br/
div id=icons name=icons
img src='http://ksar.corp.cox.com/CustomerCare/CSI/FieldOps/images/
Mailmed.png' title='Click Here To Send Out A Communication'/
img src='http://ksar.corp.cox.com/CustomerCare/CSI/FieldOps/images/
Printmed.png' title='Click Here To Print This Page'/
img src='http://ksar.corp.cox.com/CustomerCare/CSI/FieldOps/images/
QuestionMarkmed.png' title='Click Here For Information About This
Website'/
/div
/body
/html
If anyone has any idea why this doesn't work as expected that would be
great.
I do use other jquery plugins on other pages and they work fine.
Thanks,
Johnie Karr
[jQuery] Re: Why does this not preload an image correctly?
You could simply change it around a bit...
- create the image
- assign a load handler, with a callback to append the image to the
div and show the div
- set the image src
eg
$('img /').load(function(){
$(this).appendTo('#someDivId').parent(show);
})
.attr('src', $('src[0]', data).text());
NB Not all browsers like jQuery's load() as an image preloader; you
might want to check out Ariel Flesler's preload plugin?
On May 11, 11:44 pm, Giant Jam Sandwich [EMAIL PROTECTED] wrote:
I seem to be having a problem with some code similar to the pseudo-
code below. Assume that I am getting an XML document that has nodes
called src that hold image source urls, and that someDivId has a
display property of none set in the CSS.
- - -
$(function(){
$.get( doc.xml, function( data ) {
$(#someDivId).append( img src=' + $(src[0], data).text()
+ ' / );
$(#someDivId img).load(function(){
$(#someDivId).css(display, block);
});
}
});
- - -
In my code, the DIV is displaying before the image is loaded. However,
if I hard code the image into the HTML, give it an ID, and then attach
the load event to that, it works just fine. Thanks!
[jQuery] Re: Checkbox confusion
Firstly, you were placing a click handler on the LI, not on the INPUT
(the checkbox), so inside the click handler 'this' refers to the
relevant LI whose checkbox has been clicked.
That's fine for retrieving the text, but the LI doesn't know whether
the checkbox is checked or not (as a result of being clicked), so
testing the 'checked' property of the LI is not going to tell you
anything about the state of the contained checkbox.
My solution simply places the click handler on the INPUT (the
checkbox) itself, then retrieves the text from the parent LI. Because
the click handler is attached to the INPUT, 'this' refers to the
clicked checkbox, and I can test the 'checked' property. The text
retrieval from parent() only works because all the checkboxes are
immediate children of the LI holding the desired text. If more
elements were placed between the LI(s) and the checkbox(es) then
obviously parent() would have to be changed to something else.
You don't need preventDefault() unless you want to stop what would
normally happen happening - if you see what I mean. In your case, you
are not trying to prevent the checkbox being checked/unchecked when
clicked, simply record whether it has become checked/unchecked as a
result of being clicked - so you don't want to prevent the natural
behaviour of the browser. Hence no need to preventDefault().
On May 12, 5:30 pm, Chris Cotton [EMAIL PROTECTED] wrote:
Wow!! that worked!!! thanks
Next question. . .Why? I am not seeing the flaw in the logic of my broken
and obviously less elegant solution.
And how did you get away with not having to use event.preventDefault() ???
Also i don't understand why var item = $(this).parent().text(); returns
what I want and not bChecklist.
Teach, oh wise friend. Teach indeedafter a week of playing with jquery I
must have missed a key concept or 3.
On Thu, May 8, 2008 at 1:43 AM, Wizzud [EMAIL PROTECTED] wrote:
Try this...
$(#bChecklist input:checkbox).click(function(event){
var item = $(this).parent().text();
alert ( (this.checked ? '' : 'Un') + 'Checked = ' + item);
});
On May 8, 1:38 am, mr4d [EMAIL PROTECTED] wrote:
Hi all,
Can't quite get the the following functionality to work:
1. when I click on an un-checked checkbox, I want the box to be
checked AND to raise an alert showing the text of the item which has
just been checked.
2. Similarly if the user unchecks the box I want to raise an
unchecked alert and then have the box unchecked.
I have been trying to do this for about an hour but the behavior is:
a. I am getting the Checked alert for clicks on both checked
and unchecked checkboxes
b. Once the user checks a box I get the Checked alert but the
box never actually gets checked.
The code is:
$(#bChecklist li).click(function(event){
var item = $(this).text();
// get the label value
if ($(this).not(':checked')){
event.preventDefault();
alert ('Checking = '+ item)
this.checked = true; // my attempt to
force an unchecked box to be true
// after
using event.preventDefault
}
else if ($(this).is(':checked')) {
event.preventDefault();
alert ('UnChecking = '+item)
}
});
form id=myForm name=myForm action=/cm/BaB/create/
method=post
.
div class=row id=div2
fieldset id=bundleFields !-- Add dynamically --
legend id=bundleLegend Bundle Task/legend
ul class=bChecklist id=bChecklist
lilabel for=o1input id=o1 name=o1
type=checkbox
class=bundleItem /MYTHINGY 1/label/li
lilabel for=o2input id=o2 name=o2
type=checkbox
class=bundleItem /MYTHINGY 2/label/li
lilabel for=o3input id=o3 name=o3
type=checkbox
class=bundleItem /MYTHINGY 3/label/li
/ul
/fieldset
/divbr clear=all/
/form
Not quite sure what I am doing wrong. .
[jQuery] Re: fastest way to edit a select
I suppose it just depends whether it's faster to find and hide all
then filter some or all and show them, or to selectively hide/show
each of a known set?
Haven't tested so not sure.
On May 10, 4:22 am, Dave Methvin [EMAIL PROTECTED] wrote:
How about this?
$('#hotel_paese').change(function(){
$('#hotel_destinazione option').hide()
.filter(this.value? (.+this.value) : *).show();
});
I think I got that right...if not you can probably tell what I meant.
[jQuery] Re: fastest way to edit a select
Correct.
It's the same principle as the more recognisable...
var x = {one:'A', two:'B'};
var y = x.one;
var z = x['one'];
// y == z == 'A'
...except that in this case x.one (or x['one']) happens to be assigned
with a function instead of a string.
On May 10, 3:35 pm, andrea varnier [EMAIL PROTECTED] wrote:
thank you very much to the both of you!
I'll try and let you know :)
just a question for Wizzud: what is this? O_o
me[sel_val=='' || me.is('.'+sel_val) ? 'show' : 'hide']();
if I get it, writing
me.show();
or
me['show']();
is the same? I didn't know.
thanks
andrea
[jQuery] Re: Does a control like this exist?
Something along these lines? ...
$(document).ready(function() {
var maxPt = 20
, curPt = 0
, trgts = $('input')
;
trgts.attr({readonly:'readonly'}).val(0).each(function(i){
var me = this, x = i, pv = trgts[i-1], nx = trgts[i+1];
$(this).nextAll('.add:first').bind('click', function(){
var u = pv ? (1*pv.value) : 0, v = (1*me.value);
if(curPt maxPt (!x || (x u v))){
me.value = v+1;
++curPt;
}
}).end()
.nextAll('.sub:first').bind('click', function(){
var u = nx ? (1*nx.value) : 0, v = (1*me.value);
if(curPt 0 v 0 v u){
me.value = v-1;
--curPt;
}
})
});
});
/script
div
input type='text' value='0' name='inp_A' size='2' /
span class='add'+/spannbsp;/nbsp;span class='sub'-/span
/div
div
input type='text' value='0' name='inp_B' size='2' /
span class='add'+/spannbsp;/nbsp;span class='sub'-/span
/div
div
input type='text' value='0' name='inp_C' size='2' /
span class='add'+/spannbsp;/nbsp;span class='sub'-/span
/div
On May 10, 7:56 pm, Chris Hall [EMAIL PROTECTED] wrote:
Hello all,
I'm looking for a very odd control, but I'm betting something like
this exists.
The control is a simple + and - (or even and ) that will increment
or decrement a field, but my catch is allowing the increment is
conditional.
For example, you have field A, field B, and field C and you have 20
points to add to these fields. You can only have as many points in
field B as you do in field A, and likewise, you can only have as many
points in field C as in field B.
So your first selection must be 1 point in field A. Then you can
either put your next point also in field A or in field B.
Does a form control even remotely like this exist?
Many thanks for all the help!
[jQuery] Re: New object based on existing / Or understanding $.extend
There's a bit of an oddity here (actually I think it's a bug, but
still...).
Starting with what you need to do - specifically, to be able to add
items to dupe.list):
var dupe = $.extend(true, {list:[]}, $.fn.test.orig);
Then dupe.list.push(...) will not change $.fn.test.orig.
Why?
Setting the first argument to extend() as the boolean 'true' tells
extend() to do a so-called 'deep' extend.
But don't get too excited because it's not really a deep extend at
all!
In non-deep mode, extend() does a shallow 'clone' - one level only, so
if the original object contains arrays/objects they get copied by
reference.
In deep mode, extend() will go one level further (ie. 2 levels, but no
more!). *However* there's a big gotcha here, in that in order for the
second level 'cloning' to work, the target object *must already
contain* the first level item!
So, as an example...
var x = {one:'fred',two:['a','b']};
var y = $.extend(true,{}, x); // boolean as first arg means 'deep'
y.two.push('c'); // changes x.two as well!
//so the 'deep' didn't help, so let's try...
var z = $.extend(true, {two:[]}, x);
z.two.push('d'); // leaves x.two as ['a', 'b', 'c'] - yes!
Conclusion:
- if your original object contains objects/arrays, you can't extend()
it into an empty object - you have to extend() into a 'prepared'
object
- 'deep' isn't really deep at all, simply one extra level
On May 9, 6:48 am, boermans [EMAIL PROTECTED] wrote:
Stretching my grasp of JavaScript here...
Please view source of this for
context:http://static.fusion.com.au/ollie/jquery/extend/test.html
$.fn.test = function() {
// Creating what I thought was a new object
var dupe = $.extend({},$.fn.test.orig);
// Adding item to array in my 'new' object
dupe.list.push('item');
// Success
console.log(dupe.list);
// but... I didn’t intend to add the list item to my original
console.log($.fn.test.orig.list);
return this;
};
$.fn.test.orig = {
list : []
};
I have created an object based on another object. (At least I thought
I did...)
When I attempt to manipulate my new object I discover the original
object has also been changed.
Therefore I presume my new object is actually a reference to the
original.
If not $.extend, how would I add the empty 'list' array (in reality a
bunch of properties) to my 'dupe' as a new separate object that can be
manipulated independent of the original?
[jQuery] Re: Getting Parent Element using this
If there is as little control over the markup as is implied then a
more generic solution might be applicable (untested!)?
function updateQuote(el){
//$('form') could be cached, and may not need to store parentForm...
var parentForm = $('form').filter(function(){
var i = this.elements.length;
while((i--) this.elements[i] !== el){}
return (i = 0);
});
parentForm.attr('action', ''); //whatever...
}
select onchange='updateQuote(this);'
Since there seems to be concern over HTML changing (without due care
and attention?) then it's possible that the structure could be changed
to place the select within one (or more) tables within the form, or
even just to make the markup valid!, which would nullify one or other
function call in parents('table:first').children('form:first').
One can only go so far, to protect other people from themselves.
On May 9, 1:54 am, Michael Geary [EMAIL PROTECTED] wrote:
With markup as invalid as that, it's no surprise that elements are not where
you expect them in to be in the DOM. A FORM element can't be sandwiched in
between a TABLE and TR like that. So the browser tries to turn this into
something it can work with. It may shuffle things around, or just put up
with the incorrect structure, or whatever. And yeah, it may be different
from one browser to another.
But I think you mentioned that you're stuck with working with the HTML as it
is, so lucky you, you get to deal with the aftermath. :-(
-Mike
ok, i'm not sure if this is the easiest way, however, this is
how I got the form action in the following HTML:
table width=460 border=0 cellspacing=0 cellpadding=0
tr valign=top
td
table width=100% border=0
cellpadding=0 cellspacing=0
tr
td valign=top colspan=2
table
border=0 cellspacing=1 cellpadding=3 width=100%
form
Method=Post Action=phoenix.zhtml?c=69181p=IROL-
irhomet=SwitchQuote
tr class=modBgQuoteShrtTicker
td colspan=4 nowrap=nowrap
span class=modQuoteShrtTicker
Select name=control_Symbol
ONCHANGE=updateQuote(this);
option value=1
SELECTED=opt 1/option
option value=2opt 2/option
/Select
/span
/td
/tr
/form
I used:
var formAction = $
(elm).parents('table:first').children(form:first).attr(action);
For some reason, it misses the form object on the way back
using parents so i move forward after hitting the FORM's
parent to get the form. Not sure if this is browser
specific, but definitely a headache. (and the terrible HTML
syntax doesn't help either)
[jQuery] Re: fastest way to edit a select
An alternative...
var destOpts = $('#hotel_destinazione option');
$('#hotel_paese').change(function(){
var sel_val = $(this).val() || '';
destOpts.each(function(){
var me = $(this);
me[sel_val=='' || me.is('.'+sel_val) ? 'show' : 'hide']
();
});
});
On May 9, 11:57 am, andrea varnier [EMAIL PROTECTED] wrote:
Hi :)
what is the fastest way to edit a select item?
I need to show some option's and hide some others, depending on the
value of another select.
let's say if the user selects a country for his holiday, in the
'#hotel_paese' select, the '#hotel_destinazione' select will show only
the hotels of that country.
problem is that the '#hotel_destinazione' select has already got its
values, so I'm using the class attribute to keep track of the country.
so if, say, egypt has code '001', then sharm el sheik, abu simbel,
aswan, luxor, and so on will all have class '001'.
the .show() and .hide() methods seem to be a little too slow.
or maybe is my code?
// this is the select
$('#hotel_paese').change(function(){
var $this = $(this);
var sel_val = $this.val();
$('#hotel_destinazione option').show()
if (sel_val != '') $('#hotel_destinazione option').not('.' +
sel_val).hide();
});
thank you very much :)
[jQuery] Re: beginner question on show/hide and reusing functions
Something like this?...
$(document).ready(function() {
var sp = $('.searchpanel').hide() //hide boxes initially
, so = $('#searchoptions')
, anim = false //prevents fast clicking of second option
;
// shows all
$('a.showall', sp).click(function() {
anim = true;
//hide the visible search box...
sp.filter(':visible').hide();
//show the options...
so.show('slow', function(){ anim = false; });
return false;
});
// show and hide
$('a', so).click(function() {
if(!anim){ //only act on the first option clicked...
anim = true;
//get the target from the clicked option's href...
var t = $('#'+this.href.split('#')[1]);
//hide the options...
so.hide('slow', function(){ //when options are hidden...
//...show the target searchbox...
t.show('slow', function(){ anim = false; });
});
}
return false;
});
});
On May 8, 1:52 am, illtron [EMAIL PROTECTED] wrote:
I'm new to (writing anything myself with) jQuery, so bear with me if
this is a boneheaded question.
I'm trying to build a box that starts with six options, then if you
click one of them, that content fades out, and is replaced with the
content for that option. (You're given a different search box for each
one).
This is the code I have to show and hide. It sort-of works. It's
certainly not optimal. In the actual code I have five more of that
second function, each one specific to the div that is revealed. I know
there has got to be a way to reuse the code.
Based on the HTML below, can you help me optimize the jQuery code so I
don't have to repeat things six times?
Also, what I have here does work, but it's hella choppy in IE. Is
there a better way to fade out and then fade in?
script type=text/javascript
$(document).ready(function() {
// hides the boxes before the page loads
$('.searchpanel').hide();
// show and hide
$('a.show').click(function() {
$('#searchoptions').hide('slow');
$('#musicsearch').show('slow');
return false;
});
//
// And five more just like the one above
//
// shows all
$('a.showall').click(function() {
$('#searchoptions').show('slow');
$('.searchpanel').hide();
return false;
});
});
/script
Here's the HTML I'm working with.
div id=listings
div id=searchoptions
h3What are you looking for?/h3
ul id=searches
lia href=#musicsearch
class=showmusicspanMusic/span/
a/li
lia href=#eventsearch
class=showeventsspanEvents/span/
a/li
lia href=#restaurantsearch
class=showfoodspanRestaurants/span/a/li
lia href=#barsearch
class=showbarsspanBars amp; Clubs/
span/a/li
lia href=#hotelsearch
class=showhotelsspanPlaces to
stay/span/a/li
lia href=#recreationsearch
class=showrecspanAttractions
amp; recreation/span/a/li
/ul
/div
div id=searchboxes
div id=musicsearch class=searchpanel
h3Search for Music/h3
pform goes here/p
pa href=#searchbox class=showalllaquo; Start
Over/a/p
/div
-- and five more just like the one above -
div
/div
[jQuery] Re: Checkbox confusion
Try this...
$(#bChecklist input:checkbox).click(function(event){
var item = $(this).parent().text();
alert ( (this.checked ? '' : 'Un') + 'Checked = ' + item);
});
On May 8, 1:38 am, mr4d [EMAIL PROTECTED] wrote:
Hi all,
Can't quite get the the following functionality to work:
1. when I click on an un-checked checkbox, I want the box to be
checked AND to raise an alert showing the text of the item which has
just been checked.
2. Similarly if the user unchecks the box I want to raise an
unchecked alert and then have the box unchecked.
I have been trying to do this for about an hour but the behavior is:
a. I am getting the Checked alert for clicks on both checked
and unchecked checkboxes
b. Once the user checks a box I get the Checked alert but the
box never actually gets checked.
The code is:
$(#bChecklist li).click(function(event){
var item = $(this).text();
// get the label value
if ($(this).not(':checked')){
event.preventDefault();
alert ('Checking = '+ item)
this.checked = true; // my attempt to
force an unchecked box to be true
// after
using event.preventDefault
}
else if ($(this).is(':checked')) {
event.preventDefault();
alert ('UnChecking = '+item)
}
});
form id=myForm name=myForm action=/cm/BaB/create/
method=post
.
div class=row id=div2
fieldset id=bundleFields !-- Add dynamically --
legend id=bundleLegend Bundle Task/legend
ul class=bChecklist id=bChecklist
lilabel for=o1input id=o1 name=o1 type=checkbox
class=bundleItem /MYTHINGY 1/label/li
lilabel for=o2input id=o2 name=o2 type=checkbox
class=bundleItem /MYTHINGY 2/label/li
lilabel for=o3input id=o3 name=o3 type=checkbox
class=bundleItem /MYTHINGY 3/label/li
/ul
/fieldset
/divbr clear=all/
/form
Not quite sure what I am doing wrong. .
[jQuery] Re: Expression/Selector question...
In the docs, where 'expr' as stated as being either a 'string' or an
'expression' it means that it is a selector expression, ie. a string
that would be acceptable as a selector in $(selector).
In all the examples you have given - filter, find, parent, etc - the
expected argument is a selector expression (and possibly a function
but that's beside the point).
The exception you found for find() is simply the code being kind(?) to
you. Running find(DOMelement) could be considered a waste of time
because you're trying to find() something you already have. So the
code actually doesn't do a find() at all, it simply returns (in a
jQuery object) the element you supplied, regardless of whether or not
that element was actually within the context of the initial jQuery
object.
Eg.
var b = $('body');
$('ul li').find(b[0]) == b;
(This may be considered strange behaviour, seeing as 'body' is well
outside the context of 'ul li', but then this is actually a misuse of
find() and so shouldn't be particularly surprising.)
There is nothing strange about not() and filter(). They both accept a
selector expression; however, not() will *also* accept an element, or
array thereof, whereas filter() won't (but will accept a function
instead).
Knocking a known element out of a set using not(DOMelement) is
reasonable; reducing a set to a known element using filter(DOMelement)
is not - the result is part of query!
On May 8, 3:21 pm, Dan G. Switzer, II [EMAIL PROTECTED]
wrote:
Karl,
Yeah, it's also strange that while this doesn't work:
$(body ul li).filter($li[0]);
this does:
$(body ul li).not($li[0]);
I'm a little lost by your parents example, though. Not sure exactly
what you're trying to get (esp. since you don't show where you've
declared $el and $parent.
Let's say you have:
ul
li id=1
Parent 1
ul
li id=2
Child 1
/li
/ul
/li
/ul
What I want to do is see if Child 1 has Parent 1 somewhere in it's
parent path. I don't really care if Child 1 would be a child of a child of
a child, just that at some point Parent 1 was actually in the parent path.
So, I would expect to be able to do:
var $p = $(#1);
$(#2).parents($p);
Well this does work:
$(#2).parents(#1);
It doesn't work for me, since the actually expression I need to check
against a jQuery object that can't be reliable queried through a pure
CSS-style selector.
couldn't you do something like
$el.parent() ?
or $el.parent('.someclass') ?
or $el.parents('.someclass:first') ?
(just using class in the parents filter because not sure what you're
after).
As I stated, using a CSS expression doesn't work for me because I'm actually
checking to see if another jQuery object is somewhere in the parent's tree.
-Dan
[jQuery] Re: Best way to do Lightbox-like modal windows?
There's Shadowbox too (http://mjijackson.com/shadowbox/). On May 8, 12:06 am, Adwin Wijaya [EMAIL PROTECTED] wrote: I use JQuery UI Dialog ...easy and elegant :) enough for simple to complex dialog box. for displaying error/warning/info I use jqalert() as replacement of alert box by browser. On May 8, 4:36 am, Kyrre Nygård [EMAIL PROTECTED] wrote: Hello! What's the best way to do a Lightbox-like modal windows? jqModal? Facebox? Thickbox? There are so many options out there, so many of them look so bloated and really getting confused. Maybe you guys with experience and all could show me the right way? I'm looking for the simplest, most elegant alternative where I can do stuff like newsletter signups, logins, etc. Much obliged, Kyrre
[jQuery] Re: Dynamically Filter List
Depends what you want the list to finally contain (as opposed to being
visible, that is).
Here's an alternative...
$(document).ready(function() {
var arr = ['C+
+','D','HTML','CSS','C#','PHP','Python','XML','JavaScript','Photoshop']
, alc = []
, list = $('#list');
$.each(arr, function(i,v){
list.append('li'+v+'/li');
alc[i] = v.toLowerCase();
});
list = $('li', list);
$('#filter').keyup(function(){
var v = this.value ? this.value.toLowerCase() : 0;
list.each(function(i){
$(this)[v alc[i].indexOf(v) == -1 ? 'hide' : 'show']();
});
});
});
This doesn't change the list contents, simply hides those elements not
relevant to the value of the filter input box. It also stores the
lowercase options up front, and stores the object of all the list
elements so that the keyup handler doesn't have to go find them each
time it runs.
Mark wrote:
Hi... so I'm new to jQuery. I'm using it to dynamically filter a
list... I'm wondering if this is the best/most efficient method to go
about doing it:
html
head
titlejquery test/title
script type=text/javascript src=js/jquery-1.2.3.min.js/
script
script type=text/javascript
$(document).ready(function() {
var arr = ['C+
+','D','HTML','CSS','C#','PHP','Python','XML','JavaScript','Photoshop'];
for(i=0; iarr.length; ++i) {
$('#list').append('li'+arr[i]+'/li');
}
$('[EMAIL PROTECTED]').keyup(function() {
$('#list').empty();
for(i=0; iarr.length; ++i) {
if($
('[EMAIL PROTECTED]').attr('value')==undefined||
arr[i].toLowerCase().indexOf($
('[EMAIL PROTECTED]').attr('value').toLowerCase())!=-1)
{
$('#list').append('li'+arr[i]
+'/li');
}
}
});
});
/script
/head
body
ul id=list/ul
input name='filter' id=filter/
/body
/html
See it in action: http://mechaflora.com/programming/filter
Any suggestions on how I can do this better would be appreciated :) Or
feel free to use the code for your own purposes if you think it's good.
[jQuery] Re: strange behaviour: multiple selectors responding
The problem is the context of 'this' within the ajaxStart() and
ajaxStop() functions.
try this instead...
$(#contests ul li span a).toggle(
function(){
//store ref to toggling element for use in ajax callbacks...
var lnk = $(this);
var url_title = lnk.html();
lnk.ajaxStart(function(){
lnk.html(loading...);
}).ajaxStop(function(){
lnk.html(url_title);
});
$(.contest-form- + this.name).load(this.href).show();
return false;
},
function(){
$(.contest-form- + this.name).hide(fast);
return false;
}
);
On May 5, 2:26 pm, bobh [EMAIL PROTECTED] wrote:
hi,
I'm trying to change the innerHtml of an anchor to loading for the
duration of an ajax load with this code:
$(#contests ul li span a).toggle(
function(){
var url_title = $(this).html();
$(this).ajaxStart(function(){$
(this).html(loading...);}).ajaxStop(function(){$
(this).html(url_title);});
$(.contest-form- + this.name).load(this.href).show();
return false;
},
function(){
$(.contest-form- + this.name).hide(fast);
return false;
}
);
both the ajax load and the text replacing work fine. the problem
however is that all links that have been clicked are getting the
loading innerHtml. in stead of only the one that is clicked on. for
clarification I've put an example page online here:http://allnighters.net/jq/.
try clicking a few different links.
thanks
[jQuery] Re: JQuery Selector
Ah, sorry. I was looking at it wrt the literal elements, not as the representation of an external structure. Apologies. On Apr 10, 3:52 am, JB [EMAIL PROTECTED] wrote: A section is just and idea, here it is represented by 'sectionstart' divs and 'sectionend' divs, everything within a section should be indented progressively based on how deep it is (infinitely deep is possible). On Apr 9, 6:53 pm, Wizzud [EMAIL PROTECTED] wrote: Actually, no I can't see. Every DIV with #survey contains just one text node - nothing else. On Apr 9, 10:27 pm, JB [EMAIL PROTECTED] wrote: I've got the following html div id=survey br / div class=sectionstart start /div div class=sectionstart start /div div class=sectionend end /div div class=sectionstart start /div div class=sectionend end /div div class=sectionstart start /div div class=sectionstart start /div div class=sectionend end /div div class=sectionend end /div div class=sectionend end /div /div As you can see there are section starts section ends that can contain other starts and ends. I want to leave the html as is, but visually give some left padding/margin based on how 'deep' the section is. I've been trying to get this via jquery but can't seem to get it. Say I'm one level deep I want margin-left:20px, if I'm 2 levels deep I want margin-left:40px and so on... Thanks for the help.- Hide quoted text - - Show quoted text -
[jQuery] Re: Event Binding Problem
Turn it round slightly.
Instead of ...
$(#column).append(html).find('.portHeader').bind('click',setQRX);
try...
$(html).appendTo('#column').find('.portHeader').bind('click',setQRX);
This way, when you get to the find(), the context is the newly
appended html, whereas previously is was #column.
On Apr 10, 3:41 pm, mike mike [EMAIL PROTECTED] wrote:
Many thanks for the help,
*Ariel*, Yes I have read the FAQ and now followed all the links. It's
starting to make some sense, slowly, but I can't relate the examples to my
code (I really am a newb LOL). I'm on a learning curve here ;-))
*Wizzud*, Many thanks for the great explanation and yep, I see the problem
and it makes sense that I am giving away click events too freely (I am
generous ike that). So I need to target my new dynamic DIV rather than all
divs of the same class. How to do that though?
I tried adding a class dynamic to the server returned div, attached a
click and then removed the class but that failed badly ;) I can't see a way
to remove all clicks when an item is added and then re add click events (and
that seems silly somehow) and I can't add a unique ID per DIV.portlet. I
have read about traversing but found no answer.
I *think* the answer is in the FAQ snippet
$('#mydiv').click(function(e){
if( $(e.target).is('a') )
fn.call(e.target,e);});
$('#mydiv').load('my.html');
but I can not relate this to what I am trying to do, I still have the
problem of not being able to target the new DIV with if(
$(e.target).is('.portHeader') ) or does this method only select the
.portHeader Clicked?
I'd really appreciate any help with understanding this.
Many thanks both,
Mike
On 10/04/2008, Ariel Flesler [EMAIL PROTECTED] wrote:
Have you checked this ?
http://docs.jquery.com/Frequently_Asked_Questions#Why_do_my_events_st...
--
Ariel Flesler
http://flesler.blogspot.com
On 9 abr, 17:34, GM1WKR [EMAIL PROTECTED] wrote:
Hi There,
I am a total JS newb and hobbyist only so I hope I can explain my
problem...
I am using UI sortables to create a sortable list of DIVs each with a
header and content area. I want to show/hide the content area when
the header is clicked.
DIVs are added dynamically via AJAX and are sortable and use the
jquery Livedata plugin.
However when my function setQRX fires I get strange results - 2 or
three clicks are needed to collapse the .portContent div. When
collapsed a click opens the div and then immeadiately closes it again.
I am stumped, not a professional and in need of some help. I have
read about event delegation and think the problem may be related.
I have found the same problem using fn toggle in any way when called
from $
(#column).append(html).find('.portHeader').bind('click',setQRX);
Best wishes
Mike
HTML returned by ajax is ...
div class=portlet
div
class=portHeaderstrongMM0CKR/strongspanMike/
spanspanAberdeenspan class=rst59/span/span/div
!--div class=portToolbar
ul
liTool 1/li
liTool 2/li
li class=shTool 3/li
/ul
/div--
div class=portContentpComment Text in
here.p/div
div class=portContentToggleToggle/div
/div
jquery code
function setQRX(){
var parent = $(this);
$(this).toggle(
function(){$(this).next(.portContent).show().end();},
function(){$(this).next(.portContent).hide(slow).end();}
);return false;
}
$('#column').sortable();
$('#addportlet').livequery('click',function()
{
var data = $(#portAdd).serialize();
$.ajax({
url: 3ajax.php,
cache: false,
data: data,
success: function(html){
$
(#column).append(html).find('.portHeader').bind('click',setQRX);
$('#column').sortable('refresh');
$( form )[ 0
].reset();
}
});
}
);//click#addport
/code
[jQuery] Re: HTML Partial Element Does Not Exist?!
Well, without the code or a web-accessible page exhibiting the
problem, it's down to you now.
Use Firefox, with Firebug, and the DOM Inspector
Replace the alert with var assignments, eg
var za = document.getElementById('MyDiv');
var zb = $('#MyDiv');
var zc = zb.html();
var brk = 0;//set as break point
Break, and inspect vars; check DOM Inspector for #MyDiv (and that it's
unique)
Can't find #MyDiv?...
Break between (2) and (3), and between (3) and (4)
At breaks, inspect the DOM and check Firebug can Watch for, and find,
document.getElementById('MyDiv') and $('#MyDiv')
Still can't find it anywhere in the DOM?...
Break in (2) and check that it's actually in the returned data content
It has to exist at some point in all the above (eg, in the returned
data content?), and presumably start not-existing at some other point.
You're just going to have to narrow it down a bit more yourself.
On Apr 10, 7:12 pm, OhNoMrBill [EMAIL PROTECTED] wrote:
Not stupid at all...if any one is doing that kind of question, sure it
is me :)
OK, so the code actually does this:
1) AJAX Request to server (get)
2) Success: ccontent is placed into div id=someid/div
3) After content is is div, a scrubber runs and replaces links. !--
this works
4) Last a second scrubber tries to replace specific links with
redirect links. !-- this fails with undefined
On Apr 10, 11:56 am, Wizzud [EMAIL PROTECTED] wrote:
Um, I realise this is probably a stupid question but has the named DIV
actually been added into the DOM at the time you do the jQuery lookup
on it?
(I know you've said that it displays on the page, but you don't show
what is actually being done to it to get it there)
On Apr 10, 6:41 pm, OhNoMrBill [EMAIL PROTECTED] wrote:
Bouncing this one up. Getting kind of urgent. Can anyone tell me what
the requirements are for accessing an element delivered in an HTML
partial?
All I am trying to do is attach an onclick to an href...after it comes
down from the server.
On Apr 10, 6:47 am, OhNoMrBill [EMAIL PROTECTED] wrote:
That is a bit cryptic, what do you mean by completed? The AJAX call
does successfully fire the call back for success.
It is after this call back completes, that a scrubber function is
called on the newly arrived div. Which, we are told is undefined.
So, the question is why would a div that displays in the browser not
be available by a reference such as:
alert($(#MyDiv).html()); or alert($(#MyDiv).text());
On Apr 9, 9:36 pm, Hamish Campbell [EMAIL PROTECTED] wrote:
Is this an ajax call? 90% of these questions seem to come down to the
call not being completed.
On Apr 10, 1:38 pm, OhNoMrBill [EMAIL PROTECTED] wrote:
Yup, agreed. Tried that method too. Both return undefined. Any other
thoughts on why the div and/or it's contents are not showing up in
the
DOM?
On Apr 9, 4:49 pm, Wizzud [EMAIL PROTECTED] wrote:
Your div does not actually contain any HTML, just text.
Try ...
alert($(#MyDiv).text());
On Apr 9, 8:39 pm, OhNoMrBill [EMAIL PROTECTED] wrote:
I have an HTML partial coming back from a server that includes
a named
div (ex: div id=MyDivblah/div)
When I try to run the following on it, it shows the div as
empty:
alert($(#MyDiv).html());
I suspect the DOM is not aware of the retuned div (though, why
it
displays is then a huge mystery).
Can anyone clarify this for me? Maybe tell me how to tap the
DOM on
the shoulder with the newly returned div?
Thanks much!- Hide quoted text -
- Show quoted text -- Hide quoted text -
- Show quoted text -
[jQuery] Re: assign event click to dynamic create div (via php)
An alternative view of the problem
If you have a PHP while() loop that outputs multiple anchors with the
same id, this results in invalid HTML.
For example...
?php
$i = 0;
while( !empty($fish[$i]) ){
$cod = $fish[$i++];
?
a id='fish'
href='prog.php?status=?php echo $cod['status']; ?agent=?php
echo $cod['agent']; ?'
style='text-decoration:none;'?php echo $cod['name']; ?/a
?php
}
?
...might result in a page (or section thereof) containing a set of
anchors such as...
a id='fish' href='prog.php?status=0agent=Findus'Finger/a
a id='fish' href='prog.php?status=1agent=HRamsden'Battered/a
a id='fish' href='prog.php?status=0agent=Birdseye'Breaded/a
Note that the id in each one is the same, which means that when you do
a javascript (jQuery) lookup by id you will only retrieve the first
occurence because the browser expects an id to be unique.
The while loop needs to be changed to produce a unique id for each
anchor (or no id at all). And if you need jQuery to be able find all
anchors produced by this loop then assign each anchor the same class,
and use that classname in the jQuery selector.
Eg...
?php
$i = 0;
while($fish[$i]){
$cod = $fish[$i];
?
a id='fish?php echo $i; ?'
class='fishy_story'
href='prog.php?status=?php echo $cod['status']; ?agent=?php
echo $cod['agent']; ?'
style='text-decoration:none;'?php echo $cod['name']; ?/a
?php
}
?
jQuery selector...
$('a.fishy_story').bind('click', function(){ etc,etc... });
You may still need to use LiveQuery, or some other method, if the PHP
in question is serving Ajax requests to your page.
On Apr 9, 6:40 am, franco57 [EMAIL PROTECTED] wrote:
Hi, I have this question
have data coming from DB and put dynamicaly in a page through a while
cycle (php). How can I bind an event click to the generate html tag
(eg:a id=link_agenzie href=cerca2.php?cosa=? echo
$cod['status']; ?agenzia=? echo $cod['agenzia']; ? style=text-
decoration:none;SOLO/a)
I have this code
script type=text/javascript
$(document).ready(function(){
$(#link_agenzie).click(function(){
var params = $(this).attr(href);
params = params.split(?);
$('#loading').html('div id=loadingCaricamento in
corso .../div');
$.ajax({
url: +params[0]+,
data: +params[1]++params[2]+,
success: function(html){
$(#wrapper).append(html);}
});
});});
/script
but only the first link is working, not the subsequent
please help
franco
[jQuery] Re: HTML Partial Element Does Not Exist?!
Your div does not actually contain any HTML, just text. Try ... alert($(#MyDiv).text()); On Apr 9, 8:39 pm, OhNoMrBill [EMAIL PROTECTED] wrote: I have an HTML partial coming back from a server that includes a named div (ex: div id=MyDivblah/div) When I try to run the following on it, it shows the div as empty: alert($(#MyDiv).html()); I suspect the DOM is not aware of the retuned div (though, why it displays is then a huge mystery). Can anyone clarify this for me? Maybe tell me how to tap the DOM on the shoulder with the newly returned div? Thanks much!
[jQuery] Re: what wrong in code?
You seem to be missing some script...
$.get('savesite.cgi', {sname: sitename, surl: siteurl, uname:
uname, uemail: //missing something?
Presumably there is another, initial, call to getready() somewhere
else in the script?
Presumably #add lies somewhere within #siteinfo?
Presumably #sitename, #siteurl, #username and #uemail are all unique?
If not, why not?
(If they are, why look for them within #siteinfo? Why not go straight
to them?)
Binding *another* click event to #newsitesubmit as the first thing
when entering sendsite() (first call to getready();) is pointless: (a)
you've already got one bound (unless you can get into sendsite() by
some other means?); (b) you're going to replace the #newsite form with
html returned from the second get().
On Apr 8, 9:06 pm, R.O.M. [EMAIL PROTECTED] wrote:
This code doesn't work in all browsers exept firefox. Why and what i
must to do?
Trouble: when button with id=newsitesubmit was pressed there is no
reaction, but in firefox all is ok.
code:
function getready() {
$('#newsitesubmit').click(sendsite);
};
function sendsite() { /* отправляем данные из формы */
getready();
var sitename = $(#siteinfo #sitename).val();
var siteurl = $(#siteinfo #siteurl).val();
var uname = $(#siteinfo #username).val();
var uemail = $(#siteinfo #uemail).val();
$.get('savesite.cgi', {sname: sitename, surl: siteurl, uname:
uname, uemail:
$.get('static/msg_site_added.txt',function(data){
var oldcontent = $('#siteinfo').html();
$('#siteinfo').html(data+'Добавить еще сайт');
getready();
}
);
html:
div id=add
h4Добавление сайта/h4br
form id=newsite
dl
dtlabel for=form-sitenameНазвание:/label/dt
ddinput type=text name=sitename id=sitename/dd
dtlabel for=form-siteurlАдрес:/label/dt
ddinput type=text name=siteurl id=siteurl/dd
dtlabel for=form-usernameВаше имя:/label/dt
ddinput type=text name=username id=username/dd
dtlabel for=form-useremailВаш e-mail:/label/dt
ddinput type=text name=uemail id=uemail/dd
ddinput type=button value=Отправить id=newsitesubmit/dd
/form
/div
[jQuery] Re: iframe and menu overlap/float
Sorry, slightly confused. Page A contains an iframe. That iframe is used to display Page B - the result information which is dependent on a menu option. But is the menu part of Page A (the one that contains the iframe), or Page B (the one within the iframe)? On Apr 9, 9:23 am, tfat [EMAIL PROTECTED] wrote: Hi, Hoping someone can assist, I have a page that is an iframe, which is basically used to display result information based on a menu option selected which is located on the same page. Mu query/issue is that how can I make my menu float/overlap my iframe area? My menu is an accordion based on the jQuery Accordion plug-in. I basically want to be able to display my menu on top of my iframe, so as I select a menu option, the data is displayed underneath in my iframe. If this is possible, could someone please assist. Thanks.
[jQuery] Re: JQuery Selector
Actually, no I can't see. Every DIV with #survey contains just one text node - nothing else. On Apr 9, 10:27 pm, JB [EMAIL PROTECTED] wrote: I've got the following html div id=survey br / div class=sectionstart start /div div class=sectionstart start /div div class=sectionend end /div div class=sectionstart start /div div class=sectionend end /div div class=sectionstart start /div div class=sectionstart start /div div class=sectionend end /div div class=sectionend end /div div class=sectionend end /div /div As you can see there are section starts section ends that can contain other starts and ends. I want to leave the html as is, but visually give some left padding/margin based on how 'deep' the section is. I've been trying to get this via jquery but can't seem to get it. Say I'm one level deep I want margin-left:20px, if I'm 2 levels deep I want margin-left:40px and so on... Thanks for the help.
[jQuery] Re: Event Binding Problem
This line...
$(#column).append(html).find('.portHeader').bind('click',setQRX);
might be causing you a problem.
Breakdown...
$(#column) //select #column
.append(html) //append some HTML to #column
.find('.portHeader') //find anything in #column with class
portHeader
.bind('click',setQRX); //attach a click
The find() is going to select *all* div.portHeader elements, not just
the new one, and add (more) click handlers to each one.
Eg.
Add 1 portlet (A) - gets one click handler
Add 2nd portlet (B) - portlets A B both get click handlers
portlet A now has 2 click handlers : click, and the toggle gets run
twice - first one opens, next one closes.
On Apr 9, 9:34 pm, GM1WKR [EMAIL PROTECTED] wrote:
Hi There,
I am a total JS newb and hobbyist only so I hope I can explain my
problem...
I am using UI sortables to create a sortable list of DIVs each with a
header and content area. I want to show/hide the content area when
the header is clicked.
DIVs are added dynamically via AJAX and are sortable and use the
jquery Livedata plugin.
However when my function setQRX fires I get strange results - 2 or
three clicks are needed to collapse the .portContent div. When
collapsed a click opens the div and then immeadiately closes it again.
I am stumped, not a professional and in need of some help. I have
read about event delegation and think the problem may be related.
I have found the same problem using fn toggle in any way when called
from $
(#column).append(html).find('.portHeader').bind('click',setQRX);
Best wishes
Mike
HTML returned by ajax is ...
div class=portlet
div class=portHeaderstrongMM0CKR/strongspanMike/
spanspanAberdeenspan class=rst59/span/span/div
!--div class=portToolbar
ul
liTool 1/li
liTool 2/li
li class=shTool 3/li
/ul
/div--
div class=portContentpComment Text in here.p/div
div class=portContentToggleToggle/div
/div
jquery code
function setQRX(){
var parent = $(this);
$(this).toggle(
function(){$(this).next(.portContent).show().end();},
function(){$(this).next(.portContent).hide(slow).end();}
);return false;
}
$('#column').sortable();
$('#addportlet').livequery('click',function()
{
var data = $(#portAdd).serialize();
$.ajax({
url: 3ajax.php,
cache: false,
data: data,
success: function(html){
$
(#column).append(html).find('.portHeader').bind('click',setQRX);
$('#column').sortable('refresh');
$( form )[ 0 ].reset();
}
});
}
);//click#addport
/code
[jQuery] Re: Having trouble with += and toFixed for some reason
Initialise as numbers instead of strings?...
var bagqty = 0;
var bagtotal = 0;
On Apr 4, 9:35 pm, Chuck Cheeze [EMAIL PROTECTED] wrote:
Here is my code:
pre
script type=text/javascript
//on page load
$(document).ready(function() {
//add up the cart totals and display on the page
//setup default values
var bagqty = '';
var bagtotal= '';
//get all table rows
$('#shoppingcart tbody tr').each(function() {
//get the row's price, remove the $
var price = parseFloat($('.itemprice',
this).text().replace(/^[^
\d.]*/, ''));
//make sure its a number
price = isNaN(price) ? 0 : price;
//get the row's quantity
var qty = parseInt($('.itemqty',
this).text());
//get the item's shipping amount
var ship = parseFloat($('.itemshipping',
this).text().replace(/^[^
\d.]*/, ''));
//make sure its a number
ship = isNaN(ship) ? 0 : ship;
//calculate the extended price
var extprice = (qty * price) + ship;
//add back in the $ sign and write to the page
$('.itemextprice', this).text('$' +
extprice.toFixed(2));
//add to totals
bagqty += qty;
bagtotal += extprice;
});
//return the totals
$('.bagtotal').text('$' + bagtotal.toFixed(2));
});
/script
/pre
I have 2 issues-
1- the bagqty += qty; and bagtotal += extprice; calculations return
appended values, not added. So if there are 2 products and the bagqty
values are 5 and 3 I get 53 instead of 8.
2- the $('.bagtotal').text('$' + bagtotal); line won't work. I get a
bagtotal.toFixed is not a function error. It works fine in the
itemextprize calculation up higher.
Any ideas?
[jQuery] Re: selectors return type
The Selector will always return an array of zero, one, or more elements. I'm not sure why the distinction has been made between Element and Array of Elements - the only reason I could come up with was that someone wanted to indicate that certain Selectors will/should return only one element, albeit it still in an array. On Apr 4, 8:35 pm, deer421 [EMAIL PROTECTED] wrote: I am a beginner in jQuery. On the API doc (http://docs.jquery.com/ Selectors), it says some selectors return Element and other return Array Element. To me they all return Array Element. Even #id returns an array of one DOM Element. Am I correct? confused? Thanks.
[jQuery] jqDock Plugin
Transform a set of images into a Mac-like Dock menu, horizontal or vertical, with icons that expand on rollover, and optional labels. (Not particularly new, but I needed it.) demo : http://www.wizzud.com/jqDock/ Feedback welcome.
[jQuery] Re: Custom element attributes generated by a plugin
I, too, would have to be counted on the 'not in favour' side. Can you not use a class, or $.data, or $.metadata, or some such? On Mar 30, 3:24 pm, Eric Martin [EMAIL PROTECTED] wrote: I'm *considering* adding a custom attribute for elements created in a plugin and wanted to know what the general feeling is on this. I'm guessing any opposition to the idea would be based on the fact that it wouldn't validation (if someone were to extract the DOM and run that through a validator), but does that really matter? Since plugins are used by the community, I don't want to do anything that would grossly offend anyone, so I thought I'd just see what the reaction would be. =)
[jQuery] Re: Changing the click trigger inside itself is causing undesired results.
I think you may be under the misconception that an event ('click' in
this case) can only have one function bound to it at a time - not
true.
When you bind a function to an event, it stays bound until removed,
and will run whenever the event is triggered.
If you bind another function (same or different to the first) to that
same event, it too stays bound until removed, and it too will run
whenever the event is triggered.
You seem to be assuming that when you bind a second function to an
event, it replaces the first one, but it doesn't.
Think of it like a list of things that have to be done when something
happens. If you keep adding to the list, that list just gets longer,
and *all* things on the list have to happen when the event occurs. The
only way to shorten the list is to remove something from it.
Same with event handlers.
In the sort of flip-flop scenario that you describe above, you might
want to look at using $().one('click', ...), which is a special
implementation of the bind('click', ...) that removes itself after
being triggered.
Also, if you are only changing text of an element, just use $
().text(...) rather than $().html(...).
On Mar 31, 9:38 pm, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote:
I have a button, when clicked this button invokes a function that
changes the buttons html, and it's click. The problem is it somehow
maintains the old trigger code. Before I put the click functions in
their own functions (rather than just adding function(){} to the
parameter) it would gain code every click, so if you clicked the
button 4 times the code would execute both trigger functions 4 times,
then if you clicked it a fifth time it would do both functions 5
times.
I can't think of any way to resolves this besides reverting to
javascript code, and even then I'm not sure if it will work. I looked
at the jquery source, but couldn't figure out what the triggers code
was doing. (To me it looked like it was defining a bunch of function
that took in functions, but with no connection to the javascript
triggers )
Anyways this is my code:
--
$(function() {
$(#cButton).click(closeButton);
});
function closeButton()
{
alert('close hit');
$(#cButton)
.html(Cancel)
.click(cancelButton);
}
function cancelButton()
{
alert('cancel hit');
$(#cButton)
.html(Close)
.click(closeButton);}
--
When you hit the button the first time it gives the 'close hit' alert,
but if you hit it a second time it will give the 'close hit' alert
first, then give the 'cancel hit' alert.
Any idea?
[jQuery] Re: Issue with next()/prev() traversal
One way (assuming there is only one a.boldFont, and its position is
unknown and may change):
// store a list of all anchors in the target div...
var anchors = $('#eventlist a');
// then when(ever) you need to...
// ...find the position of the boldFont anchor within the stored list
var bf = anchors.index($('a.boldFont', anchors)[0])
// ...put the anchor following the boldfont anchor (if there is one)
into a list
, clk = anchors.slice(bf+1,bf+2);
// ...add the preceding anchor (if there is one) to the new list
if(bf 0) clk.add(anchors[bf-1]);
// ...trigger click on the list contents (1 or 2 anchors)
clk.trigger('click');
On Jan 31, 3:26 pm, [EMAIL PROTECTED]
[EMAIL PROTECTED] wrote:
Hallo,
I am quite new to Jquery and so please forgive me if my problem sounds
dumb ;)
HTML:
div id=eventlist
img src=../a href=#One/abr/
img src=../a href=#Two/abr/
img src=../a href=#Three/abr/
--
img src=../a href=# class=.boldFontFour/abr/
img src=../a href=#Five/abr/
--
img src=../a href=#Six/a
/div
Problem:
I have to access the anchor above the anchor wih class boldFont
and the anchor below the anchor with class .boldFont.I tried using
the following statements, it worked partially, but i definitely would
like to find a clear n neat solution.
My code:
$
(#eventlist).find(a.boldFont).next().next().next().trigger('click');
$
(#eventlist).find(a.boldFont).prev().prev().prev().trigger('click');
For now, it may work since there are only three to four elements
between the anchor. But, if there are N-elements, icannot just go on
writing next() !!???!
[jQuery] Re: Problem in creating Dynamic tables
So what is the problem exactly? What have you tried that didn't work, and in what way did it not work? On Jan 31, 4:11 am, Anand [EMAIL PROTECTED] wrote: John please help On Jan 30, 1:21 pm, Anand [EMAIL PROTECTED] wrote: Hi All, I am trying to create a dynamic table. It is to be created on onchange event of a text box which will tell how many templates to be added. The structure which I want to add to my page dynamically is table thead tr tdinput...//td /tr tr tdlabel1/td tdlabel2/td /tr /thead tbody lots of inputs and checkboxes /tbody /table This is one unit which I want to add on tabbing out of the text box. It can be added any no of times. thanks, Anand
[jQuery] Re: creating a table from an array
You have 2 very basic problems with your code:
1. Usage of append()
The content you append() should be valid html in its own right.
For example, your first append does $(this).append('table'), when it
should really be $(this).append('table/table') which would insert
a TABLE element as the last child of the element referred to by
*this*.
Likewise with rows - $(this).append('tr/tr') - and cells - $
(this).append('td/td') - etc.
2. What you are appending to, ie *this*
In each and every case you are appending to $(this), where *this*
refers to the #mytable element that was originally clicked upon. For
the first append, the TABLE, this would be fine; however, when you
append a row (TR), for example, you actually want to append it to the
TABLE just added, not to *this*! Similarly for cells, you should be
appending the TDs to the rows (the TRs), not to *this*.
As an (extremely simple) example, appending a single row, single
celled table might look like...
$(this).append('table/table');
$('table', this).append('tr/tr');
$('tr', this).append('tdCell content/td');
As you can probably tell, this is not going to be a particularly
useful procedure to follow for very long if I wanted to add more rows
and cells, because either, the selector is going to get progressively
more complex trying to keep up with which element I am appending to,
or, I'm going to have to start storing stuff in variables.
Either way, it's a waste of effort having to keep going back to the
DOM to find the elements I've just added so that I can then append to
them.
As Jason has already pointed out, you would be better off constructing
your table's html and then doing a single append to the #mytable
element.
An alternative to using string concatenation is use an array. For
example, using var a=... from your code above, your click function
might resemble...
$('#mytable').click(function(){
var table = []
, numRows = a.length
, numCells = a.length ? a[0].length : 0
, r, c;
if(numCells){
table.push('tablethead');
// ... header row if needed?
table.push('/theadtbody');
for(r=0; rnumRows; r++){
table.push('tr');
for(c=0; cnumCells; c++){
table.push('td' + a[r][c] + '/td');
}
table.push('/tr');
}
table.push('/tbody/table');
$(this).append(table.join(''));
}
});
On Jan 19, 6:59 am, [EMAIL PROTECTED]
[EMAIL PROTECTED] wrote:
My use case is pretty common and surely it is in some tutorial but I
cannot find the right place
where to look, so let me post here. I would like to generate an HTML
table from JSON data
coming from a server.
I am a very green when it comes to Javascript, so naively I wrote the
following
code:
var a = [[a,b,c],[1,2,3],[4,5,6]]; // the array will be read
from the server in the real app
$(#mytable).click(function()
{
$
(this).append(table);
$
(this).append(thead);
$
(this).append(tr);
for(j=0; j3; j++)
{
$(this).append(th + a[0][j] + /
th);};
$(this).append(/
tr);
$(this).append(/
thead);
$
(this).append(tbody);
for(i=1; i3; i++)
{
$
(this).append(tr);
for(j=0; j3; j++)
{
$(this).append(td + a[i][j] + /
td); };
$(this).append(/
tr); };
$(this).append(/
tbody);
$(this).append(/
table);
});
When I click on #mytable and I look at the generated HTML with Firebug
I get
table/
thead/
tr/
tha/th
thb/th
thc/th
tbody/
tr/
td1/td
td2/td
td3/td
tr/
td4/td
td5/td
td6/td
What's happening here? It seems .append is inserting closed tags
instead of what I told
it to append. I am pretty convinced that I should have generated the
tags with
document.createElement instead, but I did expect .append to work for
a quick and
dirty experiment. Anybody here can shed some light?
TIA,
Michele Simionato
[jQuery] Re: Trying to set the id of a 2nd level div and failing
Use find()? The children() function (should) return unique immediate children which won't get you your second level divs in a single call from the #obj level, no matter what selector you use. eg... var obj = $(#obj); obj.find(.obj_level1.obj_level2).attr( id, Bob ); On Jan 15, 6:03 am, Mark Lacas [EMAIL PROTECTED] wrote: I'm trying to set the id of a 2nd level obj selected by class and it doesn't seem to work as I thought it would. Unfortunately all of the level one objects get the id assignment, not the level two object. Here it is before I do the operation: div id=obj div class=obj_level1 div class=obj_level2/div /div div class=obj_level1.1/div /div Then I do this: var obj = $(#obj); //bunch of code obj.children(.obj_level1 .obj_level2).attr( id, Bob ); It ends up like this: div id=obj div id=Bob class=obj_level1 div class=obj_level2/div /div div id=Bob class=obj_level1.1/div /div Note the two divs with the same id. . . Do I have to use: obj.children(.obj_level1).children(.obj_level2).attr( id, Bob ); Originally I was using: $(#obj .obj_level1 .obj_level2).attr( id, Bob ); And that worked ok, but I needed the object in a variable as I and using it repeatedly and didn't want to dereference it every time I use it, for speed's sake. Any thoughts as to the correct syntax to do this? Thanks, ml
[jQuery] Re: how can a text field be hidden based on condition
var txt = $('theSelect :selected').text();
if(txt == 'cat' || txt.indexOf('c')==0 || ...test after test after
test...){
$('selector_fieldToHide').hide();
}
On Jan 15, 1:16 pm, Bhaarat Sharma [EMAIL PROTECTED] wrote:
Thanks!
but the values of this drop down box are dynamic and are coming from a
DB. So I was wondering if jquery offers a method so that rather than
doing '.val()' i could do something else so that I would get search on
content of the option box rather than value. so for example
option value=my_valcat/option
So here i would like to see if the option contains 'cat' or starts
with 'c' or something like that...
Also, i know that jquery supports chained method but how does it work
with logical operators like or ||
so in the example you have mentioned..what if i wanted to do a check
for 'my value2' as well...
I appreciate your help!
On Jan 14, 8:39 pm, Benjamin Sterling
[EMAIL PROTECTED] wrote:
Something like below should work:
if($('select[name=myDropdown] :selected').val() == 'my value'){
$('input[name=inputToBeHidden]').hide();
}
On 1/14/08, Bhaarat Sharma [EMAIL PROTECTED] wrote:
Hello,
I'm a little new to jQuery.
Is it possible to hide/disable a text field based on a certain value
in a drop down box on the same page??
I'd appreciate if someone could either show me a similar example or
guide a little.
Thanks
--
Benjamin
Sterlinghttp://www.KenzoMedia.comhttp://www.KenzoHosting.comhttp://www.benjam...
[jQuery] Re: a way to convert jquery object to text for dom injection
Try...
$('#d').clone().appendTo('div').before('text blab bla').after('ok
nana');
On Jan 14, 5:11 am, Equand [EMAIL PROTECTED] wrote:
i need to insert a clone of one dom object
i do
var hex = $(#d).clone();
$(div).append(text blab bla+hex+ok nana);
and it's not working...
how do i do this?
[jQuery] Re: using animate() with duration/queue object and callback doesn't work
On Jan 3, 4:17 pm, chrismarx [EMAIL PROTECTED] wrote:
hi,
this works fine
$elem.animate( {opacity:0}, 600, callback)
.animate( {height:hide}, 700);
but this doesn't
$elem.animate( {opacity:0}, {queue:false, duration:600}, callback)
.animate( {height:hide}, 700);
Try...
$elem.animate( {opacity:0}
, {queue:false, duration:600,
complete:callback} )
.animate( {height:hide}, 700);
nor this
$elem.animate( {opacity:0}, {queue:false, duration:600,
callback:callback})
.animate( {height:hide}, 700);
what am i missing?
[jQuery] Re: Serialize unchecked checkboxes?
var fm = $('form');
var uc = [];
$(':checkbox:not(:checked)', fm).each(function(){
uc.push(encodeURIComponent(this.name) + '=');
});
var serial = fm.serialize()
+ (uc.length ? ''+uc.join('').replace(/%20/g, +) : '');
On Jan 4, 3:47 pm, badtant [EMAIL PROTECTED] wrote:
Hi!
I thinkt the serialize method is great but it seems like it has been
changed to only serialize checkboxes that are checked. Earlier it
serialized all of them and i could use the selector :checked to only
get the ones that are checked if I wanted to.
Now I want to serialize all checkboxes in a form. How can I achieve
that?
Thanks!
/Niklas
[jQuery] Re: adding conditional to $(x)
$(function(){
$('[EMAIL PROTECTED]').each(function() {
var len = this.value.length;
$(this).addClass(len5?'S':len10?'L':'M');
});
});
Change the 5 and/or 10 to the appropriate limits.
On Dec 31 2007, 11:52 am, Dug Falby [EMAIL PROTECTED]
wrote:
Hi all,
I'd like to do the following:
walk through the DOM stopping at:
[EMAIL PROTECTED]
and conditionally add a class to each input tag:
if [EMAIL PROTECTED]() 5 then .addClass('S')
if [EMAIL PROTECTED]() 10 then .addClass('L')
else .addClass('M')
Can I still use the lovely $() construct?
Thanks:-)
Dug
--
Dug Falby
+44 75 15 66 16 55http://www.donkeyontheedge.com/
[jQuery] Re: Avoid double submit by disabling submit button causes problem in IE
You could change the submit to a button and use one() ...
For example...
jQuery(function($){
$('input.submitbutton').one('click', function(){
$(this).parents('form')[0].submit();
return false;
});
});
form
input type='button' class='submitbutton' /
/form
On Dec 22, 4:35 pm, psy* [EMAIL PROTECTED] wrote:
Hello,
I want to avoid double submitting, so I have the following code:
$(function() {
$(input[type='submit']).click(function() {
$(input[type='submit']).attr('disabled', true);
});
});
In FF, it works pretty nice, but in IE 6 and IE 7, the submit buttons
gets disabled but the form is not submitted ... What's wrong with it? Do
you have any better solution?
Thanks!
[jQuery] Re: Just can't seem to figure way...
Nothing wrong with the code in its own right ... BUT you have the
exact same script included on your page twice so there are 2 click
handlers bound to each 'dt a', which results in the double bounce!
On Dec 22, 2:55 pm, [EMAIL PROTECTED] [EMAIL PROTECTED]
wrote:
Can someone look at this code.. for some reason the top expanable menu
runs Smoothly and the one below it are Choppy when they expand?
Now remember Im not really good at this... When you click on a main,
it expands and opens twice..
You can look at the issue here, the left hand sidebar is the
problem:http://www.oaklandregionalhospital.com/tests/new/index.html
Here is the code:
!--webbot bot=HTMLMarkup startspan --?xml version=1.0
encoding=utf-8?
!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; xml:lang=en-us
head
STYLE type=text/css
!--
A { text-decoration:none }
--
/STYLE
titleDL Demo/title
script src=http://jquery.com/src/jquery.js;/script
script
$(document).ready(function(){
$(dd:not(:first)).hide();
$(dt a).click(function(){
$(dd:visible).slideUp(slow);
$(this).parent().next().slideDown(slow);
return false;
});
});
/script
style
body { font-family: Tahoma; font-size: 4px; }
dl { width: 200px; }
dl,dd { margin: 0; }
dt { background: #EBEBEB; font-size: 14px; padding: 5px; margin:
2px; }
dt a { color: #b2; }
dd a { color: #000; }
ul { list-style: none; padding: 5px; }
/style
/head
body
dl
dta href=/Surgical Services/a/dt
dd
ul
abOrthopedic Services:/b/a/li
lia href=/docs/Reconstructive Surgery/a/li
lia href=/blog/Hand - Elbow Injuries
Conditions/a/li
lia href=/blog/Shoulder Injuries Conditions/a/li
lia href=/blog/Arthroscopic Surgery/a/li
lia href=/blog/Total Joint Replacement/a/li
lia href=/blog/Foot - Ankle Injuries
Conditions/a/li
lia href=/blog/Sports Medicine/a
liabCardiovascular Services:/b/a/li
lia href=/blog/Peripheral Angiogram/a
lia href=/blog/Endovascular Atherectomy/a
/ul
/dd
dta href=/Podiatry Wound Services/a/dt
dd
ul
lia href=/dev/Podiatry and Wound Services/a/li
/ul
dta href=/dev/Gynecological Services/a/dt
dd
ul
lia href=/src/Gynecological Services/a/li
/ul
/dd
dta href=/Imaging Services/a/dt
dd
ul
lia href=/docs/Radiology/a/li
lia href=/blog/Magnetic Resonance Imaging (MRI)/a/li
lia href=/blog/Computerized Tomography (CT)/a/li
/ul
/dd
dta href=/Rehabilitation Services/a/dt
dd
ul
lia href=/docs/Physical Therapy/a/li
lia href=/blog/Occupational Therapy/a/li
lia href=/blog/Speech Therapy/a/li
/dl
/body
/html
!--webbot bot=HTMLMarkup endspan --
[jQuery] Re: How to get all CSS values from Attributes
var foo =$('#divname').css('top');
var bar = $('#divname').css('marginTop');
Be careful with padding though, because I think different browsers
report it in different ways because it is a sort of shorthand for
padding-top + padding-right + ...etc. As such, just asking for $
('#divname').css('padding') may not always return what you might
expect. It is safer to get each one separately ... $
('#divname').css('paddingTop'); etc. Of course, if you're sure they're
all set the same then one will do. [same applies to $
('#divname').css('margin');]
On Dec 21, 1:19 am, Jeroen [EMAIL PROTECTED] wrote:
Suppose this piece of css, how would I get the values for top, margin-
left or padding?
#divname {
top: 0;
margin-left: 1px;
padding: 7px;
}
Setting this is easy:
$(#divname).css('height', '200px');
And getting it also:
var foo = $(#divname).width();
or
var foo = $('#divname').get(0).width;
However top, margin etc. I don't how to fetch it. Probably very
obvious problem but seem to overlook it.
Thanks in advance!
---
Jeroen
[jQuery] Re: jQuery assistance w/ moving nearby elements
Lets break it down step by step...
On Dec 21, 4:15 am, soupenvy [EMAIL PROTECTED] wrote:
I've now got it doing what I want, thanks to the .prevAll() selector.
However, the closing portion of my JS doesn't seem to work:
$(document).ready(function() {
$(#tabs li).addClass(closed)
(1)...Every LI immediate child of #tabs now has a class of 'closed'
$(#tabs li.closed).click (function() {
(2)...For every element that you've just assigned the 'closed' class
to, now bind a click function (you could simply have chained this onto
the previous statement because it's working on the same set of
elements!)
$(this).animate({top:'-387'},
500).removeClass(closed).addClass(open);
(2A)...Animated the clicked LI element and switch its class from
'closed' to 'open'
$(this).prevAll().animate({top:'-387'},
500).removeClass(closed).addClass(open);
(2B)...Animated all preceding LI elements and switch their class from
'closed' to 'open'
return false;
});
$(#tabs li.open).click (function() {
(3)...For every LI immediate child of #tabs that has a class of
'open', bind a click function to it.
The only problem here is that you don't have any elements with a class
of 'open' because in step (1) above you gave them all a class of
'closed'! (and I assume an element cannot be both 'closed' and 'open'
at the same time).
So given that $('#tabs li.open') contains an empty set, the
following click function will not be bound to anything.
When the document loads, it will run (1), then run (2), then run (3).
Then, when any element in the selected set in (2) [or (1), because
they're the same] is clicked on, then (2A) and (2B) will be run. You
can click on them as many times as you like, it is still (2A) and (2B)
that will run.
You have to remember that a selector will only pick up elements that
match its criteria *at the instant the selector is run*.
What you are attempting to do in step (3) is anticipate what some
elements *might* be selectable by at some point in the future, and
that won't work.
So what do I do instead? I hear you say.
Well, there is a plugin called Jquery Live which will do exactly what
you trying to do above, but for your case, that might be a bit like
using a bulldozer on a molehill - and wouldn't help you to get to
grips with the jQuery basics.
The simplest solution is just to bind a single click handler to your
LI elements, and within that handler check for the current class of
the element clicked and perform your opening or closing as
appropriate.
HTH
$(this).animate({top:'0'},
500).removeClass(open).addClass(closed);
$(this).nextAll().animate({top:'0'},
500).removeClass(open).addClass(closed);
return false;
});
});
Jquery gives open list items a class of open just fine, but clicking
on those do nothing at all.
Does it have something to do w/ the fact that jQuery has added the
class open, but the document hasn't reloaded?
[jQuery] Re: internet explorer debugging
It appears to be choking on ...
$thisMenu.animate({
left: $newLeft + 'px'
});
You might need to ensure that 'left' is set to a value for anything
you wish to animate. At the moment, IE7 is giving a start point of NaN
for a left animation.
PS. You don't need to supply the 'px',
eg. just $thisMenu.animate({left:$newLeft}); will do.
Looks neat!
On Dec 21, 9:46 am, Stefan Petre [EMAIL PROTECTED] wrote:
Maybe this helpshttp://www.debugbar.com/
2007/12/21, Alexandre Plennevaux [EMAIL PROTECTED]:
hello friends,
my application is running ok in firefox but is not doing so great in
internet explorer. I'm having a hard time tracking down the bug(s).
Can someone help me? Problem is i didn't find any decent tool to debug
javascrpt in internet explorer.
Anyway, here is the prototype i'm working on:
http://www.pixeline.be/test/m2/
the source code is here:
http://www.pixeline.be/test/m2/_js/frontend/6_proto_strata+datascape+...
Basically, a good part of the code is used to make sure all elements
fits nicely graphically on the background 4px grid, whatever the
screen resolution.
The top menu is strataGrid and after clicking on the second line of
options in the menu, you get to the datascape.
now, i'm not an expert in javascript so any coding improvement you can
suggest is welcomed, i did it my way :)
The issue comes with the apparition of the datascape. It chokes and
does not finish appearing. In firefox 2 it works well though.
I think the error is somewhere here:
$('.strataTrigger').bind('click', function(){
var $thisMenu = $(this).parents('.mainmenu');
var li = $(this).parent();
var index = li.parent().children('li').index(li[0]);
$newLeft = strataGrid.startX + (strataGrid.colCenter - (index
+ 1)) * strataGrid.colWidth;
$('.strataTrigger', $thisMenu).removeClass('selected');
$(this).addClass('selected');
$thisMenu.animate({
left: $newLeft + 'px'
});
// 4._ SHOW/HIDES MENUS
if ($thisMenu.attr('id') == 'strata1') {
var showme = $(this).metadata().showme;
//remove datascape if displayed
if ($('#datascape').length) {
$('#datascape').unbind().fadeOut(slow, function(){
clearInterval(datascape.$interval);
$(this).hide(); // HIDE OR REMOVE ?? _ A SURVEILLER
});
}
$('.strata2').each(function(){
if ($(this).hasClass(showme)) {
$(this).show();
}
else {
$(this).hide();
}
});
}
else
if ($thisMenu.hasClass('strata2')) {
$('#strata3').html('');
$(#datascape).load('ajax_datascape.inc.html',
function(){
$(this).fadeIn(slow);
drawDatascape(strataGrid, '');
});
}
return false;
});
--
Alexandre Plennevaux
LAb[au]
http://www.lab-au.com
[jQuery] Re: internet explorer debugging
Ok, apparently not! Seems like you've already resolved it!
Couple of points, if you're interested:
if ($('#datascape').length) {
$('#datascape').unbind().fadeOut(slow, function(){
You don't need to check length, just go straight into the $
('#datascape')...
jQuery will only proceed along the chain if the selector finds the
element.
$('#strata3').html('');
You can just use $('#strata3').empty();
html() does an empty() before applying the new content, and seeing as
you don't have any replacement content, a simple empty() should
suffice.
On Dec 21, 10:28 am, Wizzud [EMAIL PROTECTED] wrote:
It appears to be choking on ...
$thisMenu.animate({
left: $newLeft + 'px'
});
You might need to ensure that 'left' is set to a value for anything
you wish to animate. At the moment, IE7 is giving a start point of NaN
for a left animation.
PS. You don't need to supply the 'px',
eg. just $thisMenu.animate({left:$newLeft}); will do.
Looks neat!
On Dec 21, 9:46 am, Stefan Petre [EMAIL PROTECTED] wrote:
Maybe this helpshttp://www.debugbar.com/
2007/12/21, Alexandre Plennevaux [EMAIL PROTECTED]:
hello friends,
my application is running ok in firefox but is not doing so great in
internet explorer. I'm having a hard time tracking down the bug(s).
Can someone help me? Problem is i didn't find any decent tool to debug
javascrpt in internet explorer.
Anyway, here is the prototype i'm working on:
http://www.pixeline.be/test/m2/
the source code is here:
http://www.pixeline.be/test/m2/_js/frontend/6_proto_strata+datascape+...
Basically, a good part of the code is used to make sure all elements
fits nicely graphically on the background 4px grid, whatever the
screen resolution.
The top menu is strataGrid and after clicking on the second line of
options in the menu, you get to the datascape.
now, i'm not an expert in javascript so any coding improvement you can
suggest is welcomed, i did it my way :)
The issue comes with the apparition of the datascape. It chokes and
does not finish appearing. In firefox 2 it works well though.
I think the error is somewhere here:
$('.strataTrigger').bind('click', function(){
var $thisMenu = $(this).parents('.mainmenu');
var li = $(this).parent();
var index = li.parent().children('li').index(li[0]);
$newLeft = strataGrid.startX + (strataGrid.colCenter - (index
+ 1)) * strataGrid.colWidth;
$('.strataTrigger', $thisMenu).removeClass('selected');
$(this).addClass('selected');
$thisMenu.animate({
left: $newLeft + 'px'
});
// 4._ SHOW/HIDES MENUS
if ($thisMenu.attr('id') == 'strata1') {
var showme = $(this).metadata().showme;
//remove datascape if displayed
if ($('#datascape').length) {
$('#datascape').unbind().fadeOut(slow, function(){
clearInterval(datascape.$interval);
$(this).hide(); // HIDE OR REMOVE ?? _ A SURVEILLER
});
}
$('.strata2').each(function(){
if ($(this).hasClass(showme)) {
$(this).show();
}
else {
$(this).hide();
}
});
}
else
if ($thisMenu.hasClass('strata2')) {
$('#strata3').html('');
$(#datascape).load('ajax_datascape.inc.html',
function(){
$(this).fadeIn(slow);
drawDatascape(strataGrid, '');
});
}
return false;
});
--
Alexandre Plennevaux
LAb[au]
http://www.lab-au.com
[jQuery] Re: jQuery LightBox issue in IE7
Have you tried either completing your doctype with a dtd, and/or removing the doctype altogether? On Dec 21, 2:51 pm, Rey Bango [EMAIL PROTECTED] wrote: Hey Su, thanks for the feedback. Replies below: Following from that, the first thing I'd do is just put back the original styling from his example page to see what happens. In case you hadn't tried already. I've not tried that but will do it. It's also worth noting that the slidedown div isn't /just/ truncated, it's exactly as wide as the image. Have you seen what happens if you make them, or even just one of them, bigger? It might hint at something if the behavior changes. Yep. I tried that this morning and same results. I used the same pics that were used in his demo in IE7, the slide down div sizes itself to the size of the pic instead of the dialog. http://dev.healthybuyersclub.com/guide/detail.cfm?id=9 Rey...
[jQuery] Re: tr not applying CSS
Have you tried giving your row a specific class instead of using name?
eg.
$('tr.myRowClass').hover(
function() {
$(this).addClass(newClass);
}, function() {
$(this).removeClass(newClass);
}
);
On Dec 20, 4:31 am, JQueryProgrammer [EMAIL PROTECTED] wrote:
I have a table that displays n rows based on the records from the
database. For a particular row that gets displayed n times, I have
assigned a name to the row. The row already has some CSS applied to
it. But I want that whenever I take the mouse over the row, the new CC
should get applied and the on mouse out the old CSS should reapply.
I tried the code as:
$(tr[name='myRowName').hover(
function() {
$(this).addClass(newClass);
}, function() {
$(this).removeClass(newClass);
}
);
But it does not work. Can anyone let me know.
[jQuery] Re: recognizing a new class appended
$(#commenting).append(span class='commentTag'+fill+/spanspan
class='deleteTag'x/span)
.find('.deleteTag').bind('click', function(){
// perform removal
});
On Dec 18, 7:09 am, Kyle [EMAIL PROTECTED] wrote:
Hi,
This is frustrating! First, because I'm having a problem I can't
solve. Second, because I can't track down the solution (though I know
I've seen it before- albeit months ago).
After something is clicked, this code is executed:
$(#commenting).append(span class='commentTag'+fill+/spanspan
class='deleteTag'x/span);
Now, as you can probably infer from the x and class name for the
second span, I want to be able to click on the span deleteTag and have
it remove the element prior. However, it does not allow me to do
anything with the new class once it has been added!
$(.deleteTag).click(function()
{
alert(Please work!);
});
If I recall correctly, I think I need to bind the new class to the
DOM. I'm just not sure how, even after reading the documentation.
Thanks for any help you can provide!
Kyle
[jQuery] Re: tricky traversing question
var cols = $('#dsViewport').find('div.column');
$('#dsViewport h3').each(function(){ // assuming you want the h3?
var numPrecedingColumns =
cols.index( $('div.column:first', this)get(0) );
// . do whatever .
});
You can tighten or loosen the selectors to fit your actual HTML model.
On Dec 18, 2:46 pm, pixeline [EMAIL PROTECTED] wrote:
hello,
i'm facing a complex traversing question, can you help?
I need to know the number of a specific element with class=column
that are BEFORE my selected element.
So, say i have this html (see below) and i am in this selection:
$('#dsViewport h3').each(function(index){
...
$amountOfColumnsBefore = $(this).prev(.ds-column).length;
$url = $(this).href(#+$amountOfColumnsBefore);
});
My method does not work: $amountOfColumnsBefore = $(this).prevAll(.ds-
column).length;
Here is my html.
div class=dsViewport
div class=section
h32007/h3
div class=column.../div
/div
div class=section
h32006/h3
div class=column.../div
div class=column.../div
div class=column.../div
/div
div class=section
h32005/h3
div class=column.../div
/div
div class=section
h32004/h3
div class=column.../div
div class=column.../div
/div
/div
Thanks for your help!
Alexandre
[jQuery] Re: fadeTo refiering/flickering when hovering div's element
Try using hover() instead.
Hover() has built-in code for testing whether the element under the
mouse has the target element as an ancestor.
On Dec 18, 9:23 am, don Jao [EMAIL PROTECTED] wrote:
Hi Everyone,
I'm pretty new to jQuery, and my JavaScript sills aren't very good to0, but
they're not too bad either.
I'm in need to fade a whole div, with couple of input fields, text and
images inside it from 50% to 100% opacity. I used simple way to get it:
$(div).mouseover( function() { $(this).fadeTo(slow, 1) } );
however this way i get annoying re-fade effect when i move mouse inside that
div without leaving it:http://www.adpro.ee/temp/delme.html
Is there any way around to make it work properly?
Thanks in advance.
--
View this message in
context:http://www.nabble.com/fadeTo-refiering-flickering-when-hovering-div%2...
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: tricky traversing question
Yes, you're quite right. I missed out the h3's initially, then added
them back in without thinking!
It should have been something like...
var cols = $('#dsViewport').find('div.column');
$('#dsViewport h3').each(function(){ // assuming you want the h3?
var numPrecedingColumns =
cols.index( $(this).next().get(0) );
// . do whatever .
});
If you can have something other than a div.column following an h3 then
you'll need to change the next().
On Dec 18, 5:19 pm, Chris [EMAIL PROTECTED] wrote:
On Dec 18, 12:05 pm, Wizzud [EMAIL PROTECTED] wrote:
var cols = $('#dsViewport').find('div.column');
$('#dsViewport h3').each(function(){ // assuming you want the h3?
var numPrecedingColumns =
cols.index( $('div.column:first', this)get(0) );
// . do whatever .
});
Doesn't 'this' in the expression $('div.column:first', this) refer to
the current h3? Then the whole expression means, Get me the
first .column in the context of the current h3, which, since the h3s
only contain text, is an empty array. Maybe there's a nuance I'm not
catching?
Chris
[jQuery] Re: Splitting long lists
A possible alternative (untested!) to ponder upon...
function balance(list,cssClass){
// new second 'half' of list...
var to = jQuery('ul/ul'),attr({id:list+'-b',class:cssClass})
// original list, with new id and class, and new list placed
after...
, from = jQuery('#'+list).attr({id:list+'-
a'}).addClass(cssClass).after(to)
// list of items...
, items = jQuery('li', from)
;
// move bottom 'half' of list from from to to...
to.append( items.slice(Math.ceil(items.length/2), items.length) );
}
On Dec 18, 5:14 pm, Alex [EMAIL PROTECTED] wrote:
Another patch, as I realized I needed to round the number of list
items, otherwise it wouldn't work with uneven lists. Replace
var itemsLength = items.length/2;
with
var itemsLength = Math.round(items.length/2);
[jQuery] Re: help using selectors to set a hidden field value
You're nearly there, but what you need to do is *append* to the
#updstr field, whereas you are currently overwriting its value with
each iteration of each!
Personally, I would probably do it slightly differently, eg...
$(document).ready(function(){
var upd = [];
$( 'input[name^=rlinehval-]' ).each(function(){
upd.push( $(this).val();
});
$(#updstr).val( upd.join(';') );
});
On Dec 17, 11:35 pm, JimD [EMAIL PROTECTED] wrote:
Hi all,
Pretty basic but Im having some difficulty. When my form is submitted,
I want to capture all the form element textfield values where the name
begins with 'rlinehval-' and put them into a hidden field value with
the id updstr as a semicolon delimited list for a db update. I read
through the selector docs but this doesnt seem to work.
Using Jquery I am trying this:
$(document).ready(function(){
$('[EMAIL PROTECTED]').each(function(){
var sv = this.value + ;;
$(#updstr).val(sv);
});
});
So in the case of the example form below, when submitted I collect all
the values for the fields where the name starts with ''rlinehval- and
put them in a hidden field value as a semicolon delimited string
On submission the hidden field named updstr would be:
0056543,DVD;0024543,BLU
Simple demo form
!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 /
script type=text/javascript src=jquery-latest.js/script
script type=text/javascript
$(document).ready(function(){
$('[EMAIL PROTECTED]').each(function(){
var sv = this.value + ;;
$(#updstr).val(sv);
});});
/script
/head
body
form id=myform class=cssform action=
input type=hidden id=updstr name=updstr value=
p
label for=userItem1/label
input name=rlinehval-1 type=text id=rlinehval-1
value=0056543,DVD /
/p
p
label for=userItem2/label
input name=rlinehval-2 type=text id=rlinehval-2
value=0024543,BLU /
/p
input type=submit value=Submit /
input type=reset value=reset /
/form
/body
/html
[jQuery] Re: using :contains() selector with $(this)
As with anything else there are a number of ways of going about this,
and which one you use depends a lot on what you want to do with the
result.
One thing to point out with your $(this:contains(...)) example is that
'this' is usually an object variable and ':contains(...)' is a string
and you can't just tack them together and expect them to work.
eg.
// assuming (for example)...
var toMatch = 'Text 2';
// then
var doMatch = $( 'ul.list a:contains(' + toMatch + ')' );
if( doMatch.length ){
// got one, and its now held in doMatch
}else{
// not found
}
// or...
$( 'ul.list a:contains(' + toMatch + ')' )
.each(function(){
// do something with the matching anchor ...
});
// or...
$( 'ul.list a' ).filter( ':contains(' + toMatch + ')' )
.each(function(){
// do something with the matching anchor ...
});
// or...
$( 'ul.list a' ).each(function(i){
if( $(this).text() == toMatch ){
// do something with the matching anchor ...
}
});
// or...
var selector = ':contains(' + toMatch + ')';
$( 'ul.list a' ).each(function(i){
if( $(this).is(selector) ){
// do something with the matching anchor ...
}
});
// or...
$( 'ul.list a' ).each(function(i){
if( $(this).text().indexOf(toMatch) -1){
// do something with the matching anchor ...
}
});
and there are a number of other variations possible too!
Note that all the above assume that it is the matching anchor you want
to end up with. If it's not the anchor you want but the list item
containing that anchor, then either use parent() on the resulting
element, or modify the query slightly.
As I said at the start, which method (or variation thereof) you choose
to use is down to what else you want to do with the result (or lack
of). None of the above are either 'right' or 'wrong', they just vary
in terms of applicability to the situation, and, to a large extent,
personal choice.
On Dec 13, 5:01 am, Van [EMAIL PROTECTED] wrote:
Hello,
I have a question about using the :contains filter to match the text
of an anchor tag...
ul class=list
lia href=#Text 1/a/li
lia href=#Text 2/a/li
...
/ul
I'm trying to use the ul.list selector to run through all anchor tag
descendants and check their .text() to see if it matches a query.
$(this:contains()) does not work, and I tried looping through the
children of ul.list li with an .each and I couldnt quite figure it
out. If anyone can help I would appreciate it. Hopefully this isnt a
duplicate - i posted this same thing this afternoon but it didnt go
through correctly.
Thank you
[jQuery] Re: Returning a new collection from a method
pushStack() should return its argument as a jQuery object. So if you
give it an array of elements it should come back as a jQuery
'collection' of those elements.
$([]) gives an empty jQuery object.
On Dec 12, 7:49 pm, McLars [EMAIL PROTECTED] wrote:
I could not get the first example to work. Again, I just can't seem to
grasp what map does or how to make it work.
The second example is very close to working, except that it returns an
array, not a jQuery collection. So, let me try rephasing my question.
How do I create an empty jQuery collection?
I have actually acomplished this, but it's very ugly. Instead of the
following:
var returnObject = []; //creates an empty array
I used the following:
var returnObject = $(this).not(this);
That seems pretty stupid to me, but it's the only way I could figure
out to create an empty jQuery collection, to which I can add
individual jQuery objects from inside my loop. Surely, there is a more
elegant way to create an empty jQuery collection.
The pushStack suggestion is great, btw.
Thanks again,
Larry
On Dec 12, 4:42 am, Wizzud [EMAIL PROTECTED] wrote:
Simply return your new collection. How you get your new collection
from the current object may well involve map(), but however you do it,
all you need to do is return whatever collection you want to continue
the chain with. It is probably advisable to use pushStack(), so that
your original collection can be retrieved further along the 'chain' if
desired (by using end()).
eg.
$.fn.myMethod = function() {
return this.pushStack( this.map(function(i,elem) {
//
// return newElement
//
}) );
};
or
$.fn.myMethod = function() {
var returnObject = [];
this.each(function() {
// var newElement = something based on 'this'
// returnObject.push(newElement);
});
return this.pushStack(returnObject);
};
or variations thereof.
On Dec 12, 3:01 am, McLars [EMAIL PROTECTED] wrote:
I have a plugin that needs to return a different jQuery collection
than the one it was passed. In other words, each of the elements
passed in the original collection will create a new element, and I
want to return the new elements instead of the originals.
So, instead of something like this:
$.fn.myMethod = function() {
return this.each(function() {
//
// Create new element here
//
});
which returns the original element collection (preserves chaining),
I'm looking for an elegant way to return the new elements in a jQuery
collection.
I think maybe the $.map method might be part of the solution, but I'm
afraid I just can't understand how. Any help would be appreciated.
Thanks,
Larry- Hide quoted text -
- Show quoted text -
[jQuery] Re: find and replace text in a variable
for(var i = 1; i = materias_num; i++){
$(#fd_opcoes).append(loop.replace(/1/g,''+i));
}
On Dec 13, 7:18 pm, Marcelo Wolfgang [EMAIL PROTECTED] wrote:
Hi all,
I've a form with a numeric drop down ( from 1 to 10 ) and when the
user select a number from it, I want to add the corresponding number
of textfields in my code, but I need to change the input name and I
can't figure out how to do that this is what I have right now
$(#add_opcoes).change(function (){
var materias_num = this.value;
var loop = $(#fd_opcoes).html()
$(#fd_opcoes).empty()
for(var i = 1; i = materias_num; i++){
$(#fd_opcoes).append(loop);
}
});
and this is what is inside loop
div id=add_formOpcao_1 class=overflow
label for=add_opcao_1Material 1:/label
input name=add_opcao_1 type=text size=50 /
/div
what I want is to change all the 1 that are inside the variable with i
from the looping ( so it will be 1, 2 ...10 )
is there a way to do that easily or should I look at other options ?
TIA
Marcelo Wolfgang
[jQuery] Re: Returning a new collection from a method
Simply return your new collection. How you get your new collection
from the current object may well involve map(), but however you do it,
all you need to do is return whatever collection you want to continue
the chain with. It is probably advisable to use pushStack(), so that
your original collection can be retrieved further along the 'chain' if
desired (by using end()).
eg.
$.fn.myMethod = function() {
return this.pushStack( this.map(function(i,elem) {
//
// return newElement
//
}) );
};
or
$.fn.myMethod = function() {
var returnObject = [];
this.each(function() {
// var newElement = something based on 'this'
// returnObject.push(newElement);
});
return this.pushStack(returnObject);
};
or variations thereof.
On Dec 12, 3:01 am, McLars [EMAIL PROTECTED] wrote:
I have a plugin that needs to return a different jQuery collection
than the one it was passed. In other words, each of the elements
passed in the original collection will create a new element, and I
want to return the new elements instead of the originals.
So, instead of something like this:
$.fn.myMethod = function() {
return this.each(function() {
//
// Create new element here
//
});
which returns the original element collection (preserves chaining),
I'm looking for an elegant way to return the new elements in a jQuery
collection.
I think maybe the $.map method might be part of the solution, but I'm
afraid I just can't understand how. Any help would be appreciated.
Thanks,
Larry
[jQuery] Re: Show/Hide Div with checkbox options providing same results
Using the html as in Glen's mock-up ...
var chks = $('input:checkbox').click(function(){
$('#'+this.className)
[chks.filter('.'+this.className).map(function(){
return this.checked ? this : null;
}).length ? 'show' : 'hide']();
});
On Dec 11, 8:22 pm, Ryan [EMAIL PROTECTED] wrote:
Thanks for trying Glen, I really appreciate it. I'm still having the
same difficulty with your solution as with mine. The problem isn't
when selecting Input 1 or Input 2, the problem comes when deselecting
just one of those. I'm looking to have div1 continue to appear when
just one them are deselected, because the equation will still hold
true.
Ryan
On Dec 6, 10:51 pm, Glen Lipka [EMAIL PROTECTED] wrote:
Ok, I updated it. I made it Very jQuery.
$(input[type=checkbox]).click(function(){
divClass = $(this).attr(class);
if ($(this).is(:checked)) {
$(# + divClass).show();
}
else if($(this).not(:checked)) {
$(# + divClass).hide();
}
});
I refactored it three times. I kept thinking, hmm, I think this should be
shorter.
I think there is probably a way to make it even shorter with Toggle.
Anyone?
Glen
On Dec 6, 2007 8:22 PM, Glen Lipka [EMAIL PROTECTED] wrote:
Ahh, I think I get it.
Input 1 and 2 both are controlling the first div.
Input 3 controls div 2
input 4 controls div 3
input 5 controls div 4
Yes? I can modify the demo.
Glen
On Dec 6, 2007 2:46 PM, Ryan [EMAIL PROTECTED] wrote:
This part works:
Select X, get Div 1
or
Select Y, get Div 1
or
Select X and Y, get Div1
This part doesn't:
When X and Y are selected, Div1 is showing
If X is unselected and Y remains selected, Div1 is still showing
Basically, if X and Y are selected and then X is unselected, I want
Div1 to remain showing because Select Y, get Div1 still holds true.
This is where I'm having a problem. When X is unselected, it hides
Div1. Make sense?
On Dec 6, 3:37 pm, Glen Lipka [EMAIL PROTECTED] wrote:
I dont get it. :)
Say it again as a use case:
1. click on X
2. expect results: div Y does something.
Glen
On Dec 6, 2007 11:22 AM, Ryan [EMAIL PROTECTED] wrote:
Actually, what I need it to do is show one instance of Div 4, not
two. I'm using the div for a text field, so I only need to show one
version of it. The checkboxes showing the div are independent of
each
other in value, but have the same corresponding text field which
should be filled out if either or both of these checkboxes are
selected. Does that make sense?
On Dec 6, 12:36 pm, Glen Lipka [EMAIL PROTECTED] wrote:
I whipped a demo. Does this do what you
want?http://www.commadot.com/jquery/checkBoxShow.php
Couple of tips:
1. Try to avoid putting onclick handlers in your html. jQuery
does
this really easily and makes your html easier to read.
2. getElementByID can be expressed as
$(#yourID).dosomething...
Much more concise and jQuery-ish. :)
3. The toggle function will automatically show if hidden and
hide if
shown without the IF shatement.
Hope these help. When I first started jQuery, I had to forget
everything I
knew about JS (which wasn't much). It just did it all without the
muss.
Glen
On Dec 6, 2007 8:30 AM, Ryan [EMAIL PROTECTED] wrote:
I'm completely versed in the show/hide options available, but
have a
problem I haven't been able to figure out. I'm hoping jquery
will have
the answer. I have 5 checkbox input options, the first two
options
providing the same show div. For example,
html
head
script type=text/javascript
!--
function showMe (it, box) {
var vis = (box.checked) ? block : none;
document.getElementById(it).style.display = vis;
}
//--
/script
/head
body
form
input type=checkbox name=modtype value=value1
onclick=showMe('div1', this) /value1
input type=checkbox name=modtype value=value2
onclick=showMe('div1', this) /value2
input type=checkbox name=modtype value=value3
onclick=showMe('div2', this) /value3
input type=checkbox name=modtype value=value4
onclick=showMe('div3', this) /value4
input type=checkbox name=modtype value=value5
onclick=showMe('div4', this) /value5
div class=row id=div1 style=display:noneShow Div 1/div
div class=row id=div2 style=display:noneShow Div 2/div
div class=row id=div3 style=display:noneShow Div 3/div
div class=row id=div4 style=display:noneShow Div 4/div
/form
/body
/html
As you can see, the first two options should
[jQuery] Re: .click() issue
On Dec 10, 7:53 pm, SyLon [EMAIL PROTECTED] wrote:
Hello everyone!
Could someone please explain me how could this be??
Let's see if I've got this straight ...
...
$(.flag).hide();
Everything with a class of 'flag' is now hidden...
...
$(.flag).click(function (){
alert(hello);
});
A click handler is now bound to everything that has a class of 'flag',
but that click handler won't fire.
Umm ... every element that you might be able to click on to make it
fire is currently hidden!
If you can't click on it with a mouse, the only way to get it to fire
is to trigger it from code...
...
$(.flag).click(function (){
alert(hello);
}).click();
...and, hey presto, that's exactly what this alternative does. It
binds the click handler, then immediately triggers a click event.
No problem!
It seems like the browser just doesn't see the click event! Weird..
Could some one help me please??
Thanks, Leon.
[jQuery] Re: framing
google for 'frame breaker' or 'frame buster' On Dec 8, 12:06 am, mokeur [EMAIL PROTECTED] wrote: I would like to know if it is possible to protect one of my framed website page for being framed by another site. Thanks
[jQuery] Re: Code feedback... Callbacks for timing...
There's a difference in the origin of your href between the initial
code that 'worked' and the first posted re-try that didn't.
In the first one - the working code, as was -
// 'this' must be referring to some element, say X
$('#' + this.rel) // select some other element, say Y
.fadeOut('slow') // fade out Y
.load( this.href // load into Y using X.href ...
, {targ: this.rel} // ...setting param targ as X.rel
, function() { // 'this' refers to Y
$(this).fadeIn('slow'); // fade in Y
});
In the second one - the first posted -
$('#' + what) // select some element, say Y
.fadeOut( 'slow' // fade out Y
, function() { // 'this' refers to Y
$(this)
.load( this.href // load into Y using Y.href...
, {targ: what} // ...setting param targ as what
, function() { // 'this' refers to Y
$(this).fadeIn('slow'); // fade in Y
});
});
It's logical to assume that X and Y are different elements otherwise
there is no point in the initial select [ $('#'+this.rel) ]. So, one
uses X.href and the other uses Y.href.
Apart from that, I can see no reason why the callback version should
not work ( except that I would unquote targ, ie {targ:what}, not
{'targ':what} )
On Dec 7, 8:51 pm, Dave Methvin [EMAIL PROTECTED] wrote:
Your original code looked okay to me
BTW, this is the docs on ajax load, the other is the load event
binding.
http://docs.jquery.com/Ajax/load
What error are you getting? The diff with the working version seems to
point to a problem with the fadeOut callback...
[jQuery] Re: redundancy - dimensions plugin and toggle?
Your 2 toggles are simply swapping 'right' and 'down' classes around,
otherwise they are the same. So you could just use a click handler,
and toggleClass on 'right' and 'down'.
Eg.
$('.container').click(function(){
$(this).toggleClass('right').toggleClass('down');
// check height of window and if too tall - show bottom nav
$('#bottomnav')[$('#wrapper').height() 400 ? 'show' : 'hide']();
});
On Dec 7, 6:21 pm, Priest, James (NIH/NIEHS) [C]
[EMAIL PROTECTED] wrote:
I've got some toggle code where I want to check the height of something
using the dimensions plugin and am not sure the best way to do this:
$('.container').toggle(
function() {
$(this).removeClass('right').addClass('down');
// check height of window and if too
tall - show bottom nav
if ($('#wrapper').height() 400) {
$('#bottomnav').show();
} else {
$('#bottomnav').hide();
};
},
function() {
$(this).removeClass('down').addClass('right');
// check height of window and if too
tall - show bottom nav
if ($('#wrapper').height() 400) {
$('#bottomnav').show();
} else {
$('#bottomnav').hide();
};
});
Seems like I should be able to simplify the height check instead of
doing everything twice???
Thanks,
Jim
[jQuery] Re: Problem with radio/checkboxes on ajax post
You could try...
$(':input',this).each(function(){
var me = $(this);
if(!me.is(':checkbox, :radio') || this.checked){
inputs.push(this.name + '=' + unescape(me.val()));
}
});
On Dec 4, 8:44 am, e2e [EMAIL PROTECTED] wrote:
Changing my function to this solved my problem:
$(form#profile_form).submit(function() {
$(#users_profile h1).after('div class=loading/div');
$(#users_profile .errors).remove()
var inputs = [];
$(':input', this).each(function() {
if(this.name == gender) {
var val = $([EMAIL PROTECTED]:checked).val();
inputs.push(this.name + '=' + unescape(val));
} else if(this.name == private) {
var val = $([EMAIL PROTECTED]:checked).val();
inputs.push(this.name + '=' + unescape(val));
} else {
inputs.push(this.name + '=' + unescape(this.value));
}
});
$.ajax({
type : POST,
data : inputs.join(''),
url : /sp/tasks.php?task=updateprofile,
success : function(msg) {
$(#users_profile .loading).remove();
if(msg == ok) {
$(#profile_form).remove();
$(#users_profile h1).after('div
class=message
m_infoProfiliniz güncellendi!/div');
} else {
$(#users_profile h1).after(msg);
}
}
});
return false;
});
If there is a better way please tell me.
On Dec 4, 1:20 am, Wizzud [EMAIL PROTECTED] wrote:
That would be because your $(':input', this) selector is selecting
*every* input field in your form and adding it to your inputs array.
One solution is to put a test in your each() function to see if the
field is a checkbox or radio, and if it is, only add it to your inputs
array if it's checked.
On Dec 3, 11:24 am,e2e[EMAIL PROTECTED] wrote:
Hi,
I use this function to submit my post requests. But now I have a
problem with radio buttons and checkboxes. It sends all button values
to server, so the last radio buttons' (even it's not checked) value
passes as value. checkboxes are same, even it's not checked, it sends
checked value.
$(form#profile_form).submit(function() {
$(#users_profile h1).after('div
class=loading/div');
$(#users_profile .errors).remove()
var inputs = [];
$(':input', this).each(function() {
inputs.push(this.name + '=' + unescape(this.value));
});
$.ajax({
type : POST,
data : inputs.join(''),
url : tasks.php?task=updateprofile,
success : function(msg) {
$(#users_profile .loading).remove();
if(msg == ok) {
$(#profile_form).remove();
$(#users_profile h1).after('div
class=message m_infoProfile
updated!/div');
} else {
$(#users_profile h1).after(msg);
}
}
});
return false;
});
