[jQuery] Intentionally wrong nested tags?
Hi,
I have a rather long unordered list with about hundred items inside.
each is wrapped in li.../li
I want to split this list into several small lists, with, say, 10
items each.
to do that I have this code:
checkvar = 1;
$('#right ul li').each(function(){
if( checkvar%10 == 0){
$(this).after('/ulul');
}
checkvar++;
});
basically this works, but somehow jQuery fixes the order of the
inserted '/ulul' to 'ul/ul'.
interestingly, if I try to put 'zzz aaa', I get 'zzz aaa' as expected.
The moment tag-brackets are used (even with 'zzz aaa' I will get
'aaa zzz' in the result.
Any suggestions whats happening here?
thanks
Tom
[jQuery] Re: Intentionally wrong nested tags?
Hi Mike,
On 21 Aug., 22:11, Michael Geary [EMAIL PROTECTED] wrote:
It isn't possible to insert tags, or partial tags, into the DOM. All you can
insert into the DOM is DOM nodes, which by definition always follow the
proper tree structure.
'ul/ul' is a complete tag with begin and end, and $('ul/ul') results
in a UL element which you can insert into the DOM.
'/ulul' is fragments of two different tags. There is no way to represent
this as a DOM element, but the browser will do its best to turn it into one
- and it will certainly not do what you expect.
Thanks a million for this eye-opener! I should have known, but somehow
the DOM-Element vs. the CONTENT of an element (ie the difference
between 'aaa' and 'aaa') completly went off my radar while I was
looking for a solution. :-)
- Tom
[jQuery] Re: Sortable on dynamic content - how to?
hi, I would try and re-declare the .Sortable object after you've appended the content and see if that works. This would mean that the .Sortable object works only on elements present inside the ul the moment the object is given. Prior to this I would have a look at the generated source after you've clickedthe #additem to see if the .append works as you expected it. On 12 Nov., 02:39, asle [EMAIL PROTECTED] wrote: Where do I go for help on this. Anyone?
[jQuery] Re: Sortable on dynamic content - how to?
hm...
multiple IDs are definetly not valid.
But I think you could easily replace the part:
$(#additem).click(function(){
$('ul.items')
.append('li id=newitemnew item/li')
.SortableAddItem(document.getElementById('newitem'));
});
with something like this:
var myi = 1;
$(#additem).click(function(){
$('ul.items')
.append('li class=newitem-'+myi+'new item/li')
.SortableAddItem( $('li.newitem-'+myi) );
myi++;
});
(not tested, just an idea)
or perhaps you could create the new .Sortable directly:
$(#additem).click(function(){
$('ul.items')
.append('li class=sortableitemnew item/li')
.Sortable(
{
accept : 'sortableitem',
helperclass : 'sorthelper',
activeclass : 'sortableactive',
hoverclass :'sortablehover',
opacity: 0.8,
fx: 200,
axis: 'vertically',
opacity: 0.4,
revert: true
}
)
});
this should do the trick...
(again, not tested)
On 12 Nov., 12:57, asle [EMAIL PROTECTED] wrote:
Thanks webrocker,
sorry for my frustration. I solved this myself and saw your reply
which was exactly what solved it. In the sortable plugin you can
declare a new object as a .Sortable. I was a bit lost about listen
and live query. Still a couple of things I am not sure about:
- I think you need the .ready part but this script is at the bottom so
I guess not
- The id=newitem is adde to every new element. That is really not
correct to have a lot of elements with the same id?
But for any others frustrated this does the following with the
sortable plugin
(http://interface.eyecon.ro/docs/sort):
- makes .Sortable objects of list items
- adds a new item to the list
- the new item is also sortable
Sometimes I make things so complicated when they are not :-)
span id=additemNew item/span
ul class=items
li class=sortableitemItem 1/li
li class=sortableitemItem 2/li
li class=sortableitemItem 3/li
li class=sortableitemItem 4/li
/ul
script type=text/javascript
$(document).ready(
function() {
$('ul.items').Sortable(
{
accept :'sortableitem',
helperclass : 'sorthelper',
activeclass : 'sortableactive',
hoverclass :'sortablehover',
opacity:0.8,
fx: 200,
axis: 'vertically',
opacity:0.4,
revert: true
}
)
}
);
$(#additem).click(function(){
$('ul.items')
.append('li id=newitemnew item/li')
.SortableAddItem(document.getElementById('newitem'));
});
/script
On Nov 12, 8:41 am, webrocker [EMAIL PROTECTED] wrote:
hi,
I would try and re-declare the .Sortable object after you've appended
the content and see if that works.
This would mean that the .Sortable object works only on elements
present inside the ul the moment the object is given.
Prior to this I would have a look at the generated source after you've
clickedthe #additem to see if the .append works as you expected it.
On 12 Nov., 02:39, asle [EMAIL PROTECTED] wrote:
Where do I go for help on this. Anyone?
[jQuery] interrupting a delayed effect?
hi group,
I use the pause-plugin (http://blog.mythin.net/projects/jquery.php) to
delay an slidedown-effect in my navigation if the user mouseovers a
link. I have slightly modified it to get it to work (changing line 29
from
$.dequeue(self)
to
$(self).dequeue()
So this works fine:
$('#navigationullia').mouseover(
function(){
$(this).parent('li').children('ul')
.pause()
.slideDown('slow');
return false;
}
);
but - I want to stop the timeout and ignore the slidedown if the user
mouseouts the link before the animation begins.
I thought that using the unpause function from the plugin like this
$('#navigationullia').mouseout(
function(){
$(this).parent('li').children('ul')
.unpause();
}
);
would do the trick, but it doesn't; the animation will start after the
delay.
Is there a way to kill the timeout and the associated function?
here is my modified plugin-code:
$.fn.pause = function(milli,type) {
milli = milli || 1000;
type = type || fx;
return this.queue(type,function(){
var self = this;
setTimeout(function(){
$(self).dequeue();
},milli);
});
};
$.fn.clearQueue = $.fn.unpause = function(type) {
return this.each(function(){
type = type || fx;
if(this.queue this.queue[type]) {
this.queue[type].length = 0;
}
});
};
thanks
Tom
[jQuery] Re: interrupting a delayed effect?
It seems that using the setTimeout() directly, without use of the
pause-plugin, do the trick, b/c this can be undone with
clearTimeout().
$('#navigationullia').mouseover(
function(){
var myList = $(this).parent('li').children('ul');
if( myList.css('display') != 'block' ){
timer = setTimeout( function(){
myList
.slideDown('slow');
}
, 1500
);
}
return false;
}
);
$('#navigationullia').mouseout(
function(){
var myList = $(this).parent('li').children('ul');
if( myList.css('display') != 'block' ){
clearTimeout(timer);
}
return false;
}
);
On 27 Okt., 10:51, webrocker [EMAIL PROTECTED] wrote:
hi group,
I use the pause-plugin (http://blog.mythin.net/projects/jquery.php) to
delay an slidedown-effect in my navigation if the user mouseovers a
link. I have slightly modified it to get it to work (changing line 29
from
$.dequeue(self)
to
$(self).dequeue()
So this works fine:
$('#navigationullia').mouseover(
function(){
$(this).parent('li').children('ul')
.pause()
.slideDown('slow');
return false;
}
);
but - I want to stop the timeout and ignore the slidedown if the user
mouseouts the link before the animation begins.
I thought that using the unpause function from the plugin like this
$('#navigationullia').mouseout(
function(){
$(this).parent('li').children('ul')
.unpause();
}
);
would do the trick, but it doesn't; the animation will start after the
delay.
Is there a way to kill the timeout and the associated function?
here is my modified plugin-code:
$.fn.pause = function(milli,type) {
milli = milli || 1000;
type = type || fx;
return this.queue(type,function(){
var self = this;
setTimeout(function(){
$(self).dequeue();
},milli);
});
};
$.fn.clearQueue = $.fn.unpause = function(type) {
return this.each(function(){
type = type || fx;
if(this.queue this.queue[type]) {
this.queue[type].length = 0;
}
});
};
thanks
Tom
[jQuery] Re: Noob Question - .add() not working in IE?
Hi John,
thanks for the info, I'll try that.
But it seems that there is another problem, because the part where
the .attr(style) thing is checked, depends on the link beiing
generated, wich does not happen in IE.
The result of the code in IE is
h3img / Text/h3
(which is the static html code)
in Firefox and Safari (didn't checked with Opera) it is
h3aimg /img /Text spananother Text/span/h3
(static code plus the 'inserted' code through jQuery)
- Tom
On 25 Jul., 20:39, John Resig [EMAIL PROTECTED] wrote:
This is going to be an issue:
.attr(style) == display: none;
Up until just the other day, that wasn't working in IE (it's fixed
now, and it will be in jQuery 1.1.4). In the meantime I recommend that
you do:
.is(:hidden)
or:
.css(display) == none
--John
On 7/24/07, webrocker [EMAIL PROTECTED] wrote:
Hello group,
I try to dynamically add some tags and content to an existing element
(basically a toggle-link, that's only to be seen if JS is active and
that slideToggles a div). Somehow my code doesn't work in IE, although
it works fine in other browsers like Firefox or Safari:
+++
JQuery:
$(document).ready(function(){
// hide div on pageready:
if( $(div.reduction-wrap) ){
$(div.reduction-wrap).hide();
// add toggle link with icon to headline
with( $(#toggle-link) ){
children('img').append('img src=images/pfeil-blau-r.gif
id=toggle-icon alt=');
append(' spanshow/span');
html( 'a href=javascript:;
id=reduction-toggle'+$(#toggle-
link).html()+'/a');
}
// click on link toggles hidden div:
$(#reduction-toggle).click( function() {
$(div.reduction-wrap).slideToggle(normal,
function(){
if( $(div.reduction-wrap).attr(style)
== display: none;) {
$(#reduction-toggle).children(span).html(show);
$(#toggle-icon).attr({src:images/pfeil-blau-r.gif, id:
toggle-icon, alt: });
} else {
$(#reduction-toggle).children(span).html(hide);
$(#toggle-icon).attr({src:images/pfeil-blau-u.gif, id:
toggle-icon, alt: });
}
});
// make sure nothing happens with the link:
this.blur();
return false;
});
}
});
HTML:
h3 id=toggle-linkimg src=images/icon-reductions.gif alt= /
Title/h3
div class=reduction-wrapcontent/div
+++
What is wrong with that? IE will hide the div, but no link-markup is
inserted to the html.
Thanks for any hint or shove in the right direction...
Tom
[jQuery] Noob Question - .add() not working in IE?
Hello group,
I try to dynamically add some tags and content to an existing element
(basically a toggle-link, that's only to be seen if JS is active and
that slideToggles a div). Somehow my code doesn't work in IE, although
it works fine in other browsers like Firefox or Safari:
+++
JQuery:
$(document).ready(function(){
// hide div on pageready:
if( $(div.reduction-wrap) ){
$(div.reduction-wrap).hide();
// add toggle link with icon to headline
with( $(#toggle-link) ){
children('img').append('img src=images/pfeil-blau-r.gif
id=toggle-icon alt=');
append(' spanshow/span');
html( 'a href=javascript:;
id=reduction-toggle'+$(#toggle-
link).html()+'/a');
}
// click on link toggles hidden div:
$(#reduction-toggle).click( function() {
$(div.reduction-wrap).slideToggle(normal,
function(){
if( $(div.reduction-wrap).attr(style) ==
display: none;) {
$(#reduction-toggle).children(span).html(show);
$(#toggle-icon).attr({src:images/pfeil-blau-r.gif, id:
toggle-icon, alt: });
} else {
$(#reduction-toggle).children(span).html(hide);
$(#toggle-icon).attr({src:images/pfeil-blau-u.gif, id:
toggle-icon, alt: });
}
});
// make sure nothing happens with the link:
this.blur();
return false;
});
}
});
HTML:
h3 id=toggle-linkimg src=images/icon-reductions.gif alt= /
Title/h3
div class=reduction-wrapcontent/div
+++
What is wrong with that? IE will hide the div, but no link-markup is
inserted to the html.
Thanks for any hint or shove in the right direction...
Tom
[jQuery] Re: Noob Question - .add() not working in IE?
Sorry, it should of course read .append() not working in IE in the title of this post, not .add() not working in IE. :-/
[jQuery] Re: Noob Question - .add() not working in IE?
Sorry, it should of course read .append() not working in IE in the title of this post, not .add() not working in IE. :-/
