[jQuery] Re: Work on one specific node and not on the window.document
To locate a node with id "myId" that is a descendant of another one,
in a var called "myNode", use:
$('#myId', myNode)
Hope it helps :)
On 30 mar, 17:20, tij_dev wrote:
> Hi guys !
>
> I assume this is a really basic question but I'm a JQuery rookie :) so
> please be indulgent :)
>
> I would like to get an element by its id but just on a specific node.
> I only see on the web things like that : $("#myId"). That is the
> equivalent of window.document.getElementById("myId"). But for me that
> should be something like myNode.getElementById("myId").
>
> Is that clear?...
>
> Thanks in advance
[jQuery] Re: Cross-browser inline style injection in DOM
Hello all,
I found no solution yet to the CSS insertion.
Has anybody faced the same problem?
Is there a better/simpler approach?
Thanks in advance
On 24 mar, 16:16, xPheRe wrote:
> Hello all jQuery people.
> This is my first post in this list but I hope I can make sense with my
> question.
>
> Currently I'm developing some web applications for internal use,
> porting some old ones.
> I'd love the jQuery-way to do asynchronous requests, so I developed a
> plugin similar to Pimentech jFrame. Basicly, it "automagically"
> catches all clicks on links, sends an AJAH request and loads the
> response inside a container.
>
> The problem came when the response contains STYLE or LINK tags. Using
> Firefox and Opera all was perfect, but no style was applied with IE6,
> IE7, Chrome or Safari. I was thinking that was my plugin's fault, but
> when I test the use case without it, the problem remains. No style
> applied.
>
> Check this simplified case without even jQuery:
>
>
> This is a test and should have a border around and 1ex
> padding!
>
> var div = document.createElement('div');
> // <br/> added to avoid a bug in IE
> div.innerHTML = '<br /><style>#test { border:2px solid #000;
> padding:
> 1ex; }</style>';
> var span = div.getElementsByTagName('span')[0];
> document.body.appendChild(div);
>
>
>
> I thought that jQuery have workarounds to this, but I found none, so I
> created a plugin to do the work.
> In case I missed some jQuery functionality, please tell me. I prefer
> the jQuery way.
>
> This plugin relies on detecting whether inlined styles are processed
> or not. If not, modify $.fn.html to move all style's and link's to
> document.head, mark them with a 'data-style-loader' attribute and
> adding a dummy link to the target. When te dummy link is removed (with
> the same $.fn.html function), it removes all related style's and
> link's from head.
>
> Well, that's the code:
>
> $(function($) {
>
> // Checks for some supported features
> (function() {
> var div = document.createElement('div');
> div.id = 'jquery-support-styled';
> document.body.appendChild(div);
>
> // Checks whether inlined styles applies automaticly (Firefox
> and
> Opera returns true)
> div.innerHTML = '#'+div.id+' span { display:block;
> width:
> 3px; }';
> var span = div.getElementsByTagName('span')[0];
> $.support.inlineStyleApplies = $(span).width() == 3;
>
> // Checks whether inlined styles applies if they are inside
> 'br'
> context (for IE)
> $.support.mustPrependBrToInlineStyles = !
> $.support.inlineStyleApplies && (function(){
> div.innerHTML = '#'+div.id+' span {
> display:block;
> width:5px; }';
> var span = div.getElementsByTagName('span')[0];
> return ($.support.inlineStyleApplies =
> $(span).width() == 5);
> })();
> document.body.removeChild(div);
> })();
>
> // Saves old $().html function
> var old_html = $.fn.html;
>
> if($.support.mustPrependBrToInlineStyles) {
> // Modify old $().html to add br before styles and links
> $.fn.html = function(_value) {
> if(typeof _value !== 'string') {
> _value = _value.replace(/ function(_text) {
> return ' style="display:none"/>'+_text
> })
> }
> return old_html.call(this, _value);
> }
>
> } else if(!$.support.inlineStyleApplies) {
> // Change old $().html to move link´s and style´s to the head
> $.fn.html = function(_text) {
> // Remove css-pointers and their pointees
> var $styles = this.find('link[data-style-loader]');
> if($styles.length) { clean_css($styles); }
> // Calls old $().html
> old_html.call(this, _text);
> // Promote new links and styles to document.head
> $styles = this
[jQuery] Re: Deleting an entire tr
Try using:
$(this).parents('tr:eq(0)')
or if using jQuery 1.3 or newer, you can use this one too:
$(this).closest('tr')
On 24 mar, 10:59, lionel28 wrote:
> Hello, I am trying to remove an entire tr row.
>
> Please, someone help me.
> This is what I use
>
> #
> $(document).ready(function() {
> $('a.delete').click(function(e) {
> e.preventDefault();
> var parent = $(this).parent('td').parent('tr');
> $.ajax({
> type: 'get',
> url: 'delete.php',
> data: 'ajax=1&delete=' + parent.attr('id').replace('image-',''),
> beforeSend: function() {
> parent.animate({'backgroundColor':'#fb6c6c'},300);
> },
> success: function() {
> parent.slideUp(300,function() {
> parent.remove();
> });
> }
> });
> });
>
> });
>
>
> in the tr, I have the id. And in the td contents I have a link plus a linked
> image of a trash bin with the class="delete". The idea is when you click on
> image it's supposed to remove entire tr with contents.
> #
>
> The only way I got it to work is to use use var parent = $(this).parent();
> and place the id in a div and remove the linkage in the file and wrap around
> the entire linked image with a class="delete", the text , the image
>
> -
> I really need to keep the other link.
>
> so please what would be the correct syntax to get the tr?
>
> var parent = $(this).parent('td').parent('tr'); does not work for me.
>
> Thank you
> --
> View this message in
> context:http://www.nabble.com/Deleting-an-entire-tr-tp22677143s27240p22677143...
> Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: Reusing script
I would go with the common parent or the common class solutions, as
weidc and Thomas said.
Another way to have jQuery match your 'steps', use something on those
lines:
var steps = $('[class*="step"]).filter(function(){ return /\bstep\d+
\b/.test(this.className) })
then
steps.bind('click', function() {
steps.addClass('hiddenstep');
$(this).removeClass('hiddenstep')
})
On 24 mar, 10:47, phelyer wrote:
> Hi,
>
> I am using JQuery to show and hide sections of text within my page.
> The page has 10 sections of thext and 10 links.
>
> I want to initially hide all 10 sections of text, and then show
> section 3 when the link for section 3 is clicked, but make sure any
> previously shown sections are then hidden.
>
> Here is what I have used so far which dies wxactly what I want but
> seems very long winded.
>
> $(document).ready(function hideAll() {
> //$('.stepText').hide();
> $('.step1').addClass('hiddenstep');
> $('.step2').addClass('hiddenstep');
> $('.step3').addClass('hiddenstep');
> $('.step4').addClass('hiddenstep');
> $('.step5').addClass('hiddenstep');
> $('.step6').addClass('hiddenstep');
> $('.step7').addClass('hiddenstep');
> $('.step8').addClass('hiddenstep');
> $('.step9').addClass('hiddenstep');
> $('.step10').addClass('hiddenstep');
>
> $('.step1').click(function(){
> $('.step1').removeClass('hiddenstep');
> $('.step2').addClass('hiddenstep');
> $('.step3').addClass('hiddenstep');
> $('.step4').addClass('hiddenstep');
> $('.step5').addClass('hiddenstep');
> $('.step6').addClass('hiddenstep');
> $('.step7').addClass('hiddenstep');
> $('.step8').addClass('hiddenstep');
> $('.step9').addClass('hiddenstep');
> $('.step10').addClass('hiddenstep');
> });
>
> $('.step2').click(function(){
> $('.step1').addClass('hiddenstep');
> $('.step2').removeClass('hiddenstep');
> $('.step3').addClass('hiddenstep');
> $('.step4').addClass('hiddenstep');
> $('.step5').addClass('hiddenstep');
> $('.step6').addClass('hiddenstep');
> $('.step7').addClass('hiddenstep');
> $('.step8').addClass('hiddenstep');
> $('.step9').addClass('hiddenstep');
> $('.step10').addClass('hiddenstep');
> });
>
> $('.step3').click(function(){
> $('.step1').addClass('hiddenstep');
> $('.step2').addClass('hiddenstep');
> $('.step3').removeClass('hiddenstep');
> $('.step4').addClass('hiddenstep');
> $('.step5').addClass('hiddenstep');
> $('.step6').addClass('hiddenstep');
> $('.step7').addClass('hiddenstep');
> $('.step8').addClass('hiddenstep');
> $('.step9').addClass('hiddenstep');
> $('.step10').addClass('hiddenstep');
> });
>
> $('.step4').click(function(){
> $('.step1').addClass('hiddenstep');
> $('.step2').addClass('hiddenstep');
> $('.step3').addClass('hiddenstep');
> $('.step4').removeClass('hiddenstep');
> $('.step5').addClass('hiddenstep');
> $('.step6').addClass('hiddenstep');
> $('.step7').addClass('hiddenstep');
> $('.step8').addClass('hiddenstep');
> $('.step9').addClass('hiddenstep');
> $('.step10').addClass('hiddenstep');
> });
>
> $('.step5').click(function(){
> $('.step1').addClass('hiddenstep');
> $('.step2').addClass('hiddenstep');
> $('.step3').addClass('hiddenstep');
> $('.step4').addClass('hiddenstep');
> $('.step5').removeClass('hiddenstep');
> $('.step6').addClass('hiddenstep');
> $('.step7').addClass('hiddenstep');
> $('.step8').addClass('hiddenstep');
> $('.step9').addClass('hiddenstep');
> $('.step10').addClass('hiddenstep');
> });
>
> $('.step6').click(function(){
> $('.step1').addClass('hiddenstep');
> $('.step2').addClass('hiddenstep');
> $('.step3').addClass('hiddenstep');
> $('.step4').addClass('hiddenstep');
> $('.step5').addClass('hiddenstep');
> $('.step6').removeClass('hiddenstep');
> $('.step7').addClass('hiddenstep');
> $('.step8').addClass('hiddenstep');
> $('.step9').addClass('hiddenstep');
> $('.step10').addClass('hiddenstep');
> });
>
> $('.step7').cli
[jQuery] Re: Multiple lists that should only show x amount of items until you expand them
I'd prefer to go with a CSS solution like this:
#menu > li > a + ul > li + li + li { display:none; }
#menu > li > a.expanded + ul > li { display:list-item; }
Section A
Link A-A
Link A-B
Link A-C
Link A-D
Section B
Link B-A
Link B-B
Link B-C
Link B-D
Section C
Link C-A
Link C-B
Link C-C
Link C-D
$(function() {
$('#menu > li > a').click(function() {
$(this).toggleClass('expanded')
});
});
But if you want to mantain the 'toggle' animation, you can do
something on those lines:
$(function() {
$('#menu > li > a + ul > li + li + li').addClass('collapsible').toggle
();
$('#menu > li > a').click(function() {
$(this).toggleClass('expanded').next('ul').children
('li.collapsible').slideToggle('medium');
});
});
Hope it helps
>
On 24 mar, 20:18, Jens Bengtsson wrote:
> OK, this is what I have.
>
> Multiple lists that I can collapse and expand.
>
> What I want is for them to only show x amount of items until I expand
> them.
>
> Say x = 2
>
> In Section A the following would be shown
> Link A-A
> Link A-B
>
> In Section B the following would be shown
> Link B-A
> Link B-B
>
> etc.
>
> And when I push a Section link it will show all
>
>
>
>
>
> $(document).ready(function() {
>
> $("#menu > li > a[class=expanded] +
> ul").slideToggle("medium");
>
> $("#menu > li > a").click(function() {
>
> $(this).toggleClass("expanded").toggleClass("collapsed").find("+
> ul").slideToggle("medium");
> });
> });
>
>
>
>
>
> Section A
>
> Link A-A
> Link A-B
> Link A-C
> Link A-D
>
>
>
> Section B
>
> Link B-A
> Link B-B
> Link B-C
> Link B-D
>
>
> Section C
>
> Link C-A
> Link C-B
> Link C-C
> Link C-D
>
>
>
>
>
[jQuery] Cross-browser inline style injection in DOM
Hello all jQuery people.
This is my first post in this list but I hope I can make sense with my
question.
Currently I'm developing some web applications for internal use,
porting some old ones.
I'd love the jQuery-way to do asynchronous requests, so I developed a
plugin similar to Pimentech jFrame. Basicly, it "automagically"
catches all clicks on links, sends an AJAH request and loads the
response inside a container.
The problem came when the response contains STYLE or LINK tags. Using
Firefox and Opera all was perfect, but no style was applied with IE6,
IE7, Chrome or Safari. I was thinking that was my plugin's fault, but
when I test the use case without it, the problem remains. No style
applied.
Check this simplified case without even jQuery:
This is a test and should have a border around and 1ex
padding!
var div = document.createElement('div');
//
added to avoid a bug in IE
div.innerHTML = '
';
var span = div.getElementsByTagName('span')[0];
document.body.appendChild(div);
I thought that jQuery have workarounds to this, but I found none, so I
created a plugin to do the work.
In case I missed some jQuery functionality, please tell me. I prefer
the jQuery way.
This plugin relies on detecting whether inlined styles are processed
or not. If not, modify $.fn.html to move all style's and link's to
document.head, mark them with a 'data-style-loader' attribute and
adding a dummy link to the target. When te dummy link is removed (with
the same $.fn.html function), it removes all related style's and
link's from head.
Well, that's the code:
$(function($) {
// Checks for some supported features
(function() {
var div = document.createElement('div');
div.id = 'jquery-support-styled';
document.body.appendChild(div);
// Checks whether inlined styles applies automaticly (Firefox
and
Opera returns true)
div.innerHTML = '#'+div.id+' span { display:block; width:
3px; }';
var span = div.getElementsByTagName('span')[0];
$.support.inlineStyleApplies = $(span).width() == 3;
// Checks whether inlined styles applies if they are inside 'br'
context (for IE)
$.support.mustPrependBrToInlineStyles = !
$.support.inlineStyleApplies && (function(){
div.innerHTML = '#'+div.id+' span {
display:block;
width:5px; }';
var span = div.getElementsByTagName('span')[0];
return ($.support.inlineStyleApplies = $(span).width()
== 5);
})();
document.body.removeChild(div);
})();
// Saves old $().html function
var old_html = $.fn.html;
if($.support.mustPrependBrToInlineStyles) {
// Modify old $().html to add br before styles and links
$.fn.html = function(_value) {
if(typeof _value !== 'string') {
_value = _value.replace(/'+_text
})
}
return old_html.call(this, _value);
}
} else if(!$.support.inlineStyleApplies) {
// Change old $().html to move link´s and style´s to the head
$.fn.html = function(_text) {
// Remove css-pointers and their pointees
var $styles = this.find('link[data-style-loader]');
if($styles.length) { clean_css($styles); }
// Calls old $().html
old_html.call(this, _text);
// Promote new links and styles to document.head
$styles = this.find('style,link[rel*=stylesheet]');
if($styles.length) { add_styles.call(this, $styles) }
return this;
}
// Remove css-pointers and their pointees
functionclean_css(_$styles) {
// Get pointees id
var st = [];
for(var i = 0; i < _$styles.length; ++i) {
st[st.length] =
'[data-style-loader='+$(_$styles[i]).attr('data-
style-loader')+']'
}
// Remove all links pointed
$('head').find(st.join(', ')).remove();
}
// Promote new links and styles to document.head
functionadd_styles(_$styles) {
// Selects a pointer id
var tm = (new Date).getTime();
// Move to head and add attribute with pointer id
_$styles.attr('data-
