Re: [jQuery] Anyone ever heard of this Netscape bowser? ;)
Actually, I am calling it all from the parent. You can see it at
youngisrael-stl.org ; look at the wood-grain calendar (in Hebrew) on the
right. You don't have to be able to read it, but on a slow computer you can
see it come up with scroll bars then re-adjust the size. '.load()' doesn't
fire in IE6; the iframe is loaded before $(document).ready so .load would
fire before the code is executed. It does fire for me in FF, since the
iframe is loaded afterward. I don't have IE7, so I don't know if it works. I
hope it does.
Trying to figure out FF: if you look at the
this.contentWindow.document.body.scrollHeight after the iframe is loaded
(try adding a button that has
.click(function(){alert($('iframe')[0].contentWindow.document.body.scrollHeight})
or something like that) does it have a height?
agent2026 wrote:
Hey,
I thought you were somehow managing to do all of this from the parent, but
upon further testing I realize you meant to call the function from the
loaded content.
So, back to normal in IE6/7, but still have the same problem with
Netscape.
Curious btw, .load() isn't fired in IE, and everything still works without
it (other than NS). Is it necessary?
Adam
agent2026 wrote:
Okay, in the parent (in cheap-debug mode):
$(function(){
$('iframe')
.each(function(){alert('.each()');this.style.height=(this.contentWindow.document.body.scrollHeight)+'px';})
.load(function(){alert('.load()');this.style.height=(this.contentWindow.document.body.scrollHeight)+'px';});
});
IE7: .load() never fires, but I'm getting an object required error now
for some reason.
IE6: Here it gets interesting - .load() also never fires, but it works
without errors.
Still doesn't work in Netscape btw. No errors, but it doesn't resize the
iframe.
Adam
--
View this message in context:
http://www.nabble.com/Anyone-ever-heard-of-this-Netscape-bowser---%29-tf3426039.html#a9573331
Sent from the JQuery mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Anyone ever heard of this Netscape bowser? ;)
What I've had to do is:
$('iframe.autoheight')
.each(function(){this.style.height=(this.contentWindow.document.body.scrollHeight+40)+'px';})
.load(function(){this.style.height=(this.contentWindow.document.body.scrollHeight+40)+'px';});
in my $(function()... code
It seems that IE loads the iframe content before document ready fires, so
setting the height works, but FF loads it after, so at document ready the
height is zero and I need to set the height after the iframe loads. With
this code in FF the iframe flickers, once to height zero then to its final
height, but it works for me.
Danny
agent2026 wrote:
So I had to give up on
http://www.nabble.com/-%21jQBut-need-help%3A-%22Object-doesn%27t-support-this-property-or-method%22-tf3413795.html
this , and have resorted to an iframe for a unique situation. The iframe
passes it's scrollHeight to setHeight() in the parent. setHeight(), you
guessed it, sets the height of the iframe div to the scroll height.
Everything works beautifully except in Netscape. The alert shows the
height value is being passed, but nothing happens.
// iframe height //
function setHeight(h){
if($.browser.mozilla) { $( function() { alert(h); } ); }
$('#myFrame').height(h);
}
I know Netscape is barely in existence, but I'd like to fix it just the
same. Any ideas?
Adam
--
View this message in context:
http://www.nabble.com/Anyone-ever-heard-of-this-Netscape-bowser---%29-tf3426039.html#a9550357
Sent from the JQuery mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] How can I find out if a style class exists?
We had a very similar discussion on a thread last week:
http://www.nabble.com/How-to-convert-%22class%22-to-%22style%3D%27attrs-...%27%22-tf3409582.html
The code you want would be similar to:
function isStyled(className){
var re = new RegExp('(^|,)\\s*\\.'+className+'\\s*(\\,|$)');
var ret = false;
$.each (document.styleSheets, function(){
$.each (this.cssRules || this.rules, function() {
if (re.test(this.selectorText)) ret = true;
});
});
return ret;
}
Returns true if .className is used as a selector in any style sheet
Danny
Erik Beeson wrote:
Sounds like you're looking for something like has a class with this name
been defined. As far as I know, such a concept doesn't exist. But I think
your approach is flawed. Instead of trying to only define a style if it
didn't exist, I think you want to define the defaults first, then allow
other styles to override them.
--Erik
On 3/16/07, Daemach [EMAIL PROTECTED] wrote:
Agreed. The issue is that I don't want to override a stylesheet rule if
it exists already for this element.
Daemach wrote:
I'm working on something that I want a user to be able to override
by
including a specific class somewhere in the CSS definitions. If
that
class
doesn't exist I want to add a default style. This seems like
something
that
should have come up before but search isn't coming up with
anything. Can
someone point me in the right direction? Local styles/classes
override
global classes right?
IOW given the following:
style
#myDiv {background: blue;}
/style
div id=myDiv style=background: red
The div's background would be red, correct?
--
View this message in context:
http://www.nabble.com/How-can-I-find-out-if-a-%3Cstyle%3E-class-exists--tf3416167.html#a9550436
Sent from the JQuery mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Anyone ever heard of this Netscape bowser? ;)
Odd. Mine works in IE. Can you tell what object and property is throwing the
error (try just putting 'alert's before each line--cheap debugger) ?
agent2026 wrote:
That's sort of along the lines of what I was doing before(
href=http://www.nabble.com/-%21jQBut-need-help%3A-%22Object-doesn%27t-support-this-property-or-method%22-tf3413795.html;see
here ). Same result though, can't get it to work in IE and I get the same
error: Object doesn't support this property or method.
Adam
Danny Wachsstock wrote:
What I've had to do is:
$('iframe.autoheight')
.each(function(){this.style.height=(this.contentWindow.document.body.scrollHeight+40)+'px';})
.load(function(){this.style.height=(this.contentWindow.document.body.scrollHeight+40)+'px';});
in my $(function()... code
It seems that IE loads the iframe content before document ready fires, so
setting the height works, but FF loads it after, so at document ready the
height is zero and I need to set the height after the iframe loads. With
this code in FF the iframe flickers, once to height zero then to its
final height, but it works for me.
Danny
--
View this message in context:
http://www.nabble.com/Anyone-ever-heard-of-this-Netscape-bowser---%29-tf3426039.html#a9556001
Sent from the JQuery mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] How to convert class to style='attrs ...'
Oops...too tired when I wrote that. Make it
if ((new RegExp('[^ ,]'+selector+'[$ ,]').test(this.selectorText)))
but I haven't tested that either
Danny Wachsstock wrote:
Brilliant minds think alike :) The RegExp allows for stylesheets that use
a comma, like
.classname , .otherclass {...}
which my simple == wouldn't catch. On the other hand, yours would catch
.classname childelement {...}
which wouldn't be right. The quick and dirty answer is to make sure your
stylesheets don't do that. The right answer would be to change the
condition to
if ('/[^ ,]'.selector.'[$ ,]/'.test(this.selectorText))
but I haven't tested that. Adding the checks for the appropriate media
types is left as an exercise for the reader.
thumblewend wrote:
On 16/03/2007, at 10:01 AM, Danny Wachsstock wrote:
function styleString(selector){
var style = ;
$.each (document.styleSheets, function(){
$.each (this.cssRules || this.rules, function() {
if (this.selectorText == selector) style +=
this.style.cssText + ';';
});
});
return style;
}
Haha, that's funny. I was just about to post my rewrite and the code
is very similar to yours except yours is better due to the use of ||
instead of my ternary, plus I used a regexp as per the original which
from your code looks like it's not needed. Mine's untested too. Here
it is for giggles:
$.getClassContent = function(classname) {
var cssText = '';
$.each(document.styleSheets,function() {
var cssRules = (typeof this.cssRules == 'array') ?
this.cssRules :
this.rules;
$.each(cssRules,function() {
if ('/\.'+classname+'/'.test(this.selectorText)){
cssText = this.style.cssText;
}
});
});
return cssText;
};
Joel.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
--
View this message in context:
http://www.nabble.com/How-to-convert-%22class%22-to-%22style%3D%27attrs-...%27%22-tf3409582.html#a9513147
Sent from the JQuery mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] How to convert class to style='attrs ...' [Offtopic]
My version (more jQuery-ish). It uses a very simple test for the selector
(this.selectorText == selector) but you could use a fancier RegExp-based
version if you wanted. It works in FF and IE. It does not deal with
differing media and @import rules.
function styleString(selector){
var style = ;
$.each (document.styleSheets, function(){
$.each (this.cssRules || this.rules, function() {
if (this.selectorText == selector) style += this.style.cssText + ';';
});
});
return style;
}
But how are you going to use this if MySpace won't allow javascript?
Danny
Javier Infante wrote:
El jue, 15-03-2007 a las 18:50 +, [EMAIL PROTECTED]
escribió:
Thanks but what I am really trying to do is find out all the attributes
that define myClass. Below it appears you have hard-coded certain
values, but I won't know those ahead of time and there could be different
classes per element, each defined differently.
Thanks, - Dave
Hi Dave,
I have found your question interesting and i think i have got you a
point from where you can start.
Alltought the code is not jquery at all maybe some jquery hacker finds
it interesenting to develop a small plugin (if i get some time i might
give it a try)
here goes the code:
function getClassContent(classname) {
for (var i=0; idocument.styleSheets.length; i++) {
var styleSheet=document.styleSheets[i];
var ii=0;
var cssRule=false;
do {
if (styleSheet.cssRules) cssRule =
styleSheet.cssRules[ii];
else cssRule = styleSheet.rules[ii];
if (cssRule) {
eval (regExp = /\.+classname+/); // I will
look for
div.classname in the css
if (regExp.test(cssRule.selectorText))
return cssRule.style.cssText;
}
ii++;
} while (cssRule);
}
}
alert(getStyleAttribute(infoExtra));
This thing will only work with css rules defined as class (div.myClass),
but not with css rules defined for id (div#myId)... allthought i think
you could make that work not to hardly.
anyway, is this what you were looking for?
--
Javier Infante
Dpto. Internet y Desarrollo
Irontec, Internet y sistemas sobre GNU/Linux - http://www.irontec.com
+34 94 404 81 82 - Ext. 202
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
--
View this message in context:
http://www.nabble.com/How-to-convert-%22class%22-to-%22style%3D%27attrs-...%27%22-tf3409582.html#a9505455
Sent from the JQuery mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] How to convert class to style='attrs ...'
Brilliant minds think alike :) The RegExp allows for stylesheets that use a
comma, like
.classname , .otherclass {...}
which my simple == wouldn't catch. On the other hand, yours would catch
.classname childelement {...}
which wouldn't be right. The quick and dirty answer is to make sure your
stylesheets don't do that. The right answer would be to change the condition
to
if ('/[^ ,]'.selector.'[$ ,]/'.test(this.selectorText))
but I haven't tested that. Adding the checks for the appropriate media types
is left as an exercise for the reader.
thumblewend wrote:
On 16/03/2007, at 10:01 AM, Danny Wachsstock wrote:
function styleString(selector){
var style = ;
$.each (document.styleSheets, function(){
$.each (this.cssRules || this.rules, function() {
if (this.selectorText == selector) style +=
this.style.cssText + ';';
});
});
return style;
}
Haha, that's funny. I was just about to post my rewrite and the code
is very similar to yours except yours is better due to the use of ||
instead of my ternary, plus I used a regexp as per the original which
from your code looks like it's not needed. Mine's untested too. Here
it is for giggles:
$.getClassContent = function(classname) {
var cssText = '';
$.each(document.styleSheets,function() {
var cssRules = (typeof this.cssRules == 'array') ?
this.cssRules :
this.rules;
$.each(cssRules,function() {
if ('/\.'+classname+'/'.test(this.selectorText)){
cssText = this.style.cssText;
}
});
});
return cssText;
};
Joel.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
--
View this message in context:
http://www.nabble.com/How-to-convert-%22class%22-to-%22style%3D%27attrs-...%27%22-tf3409582.html#a9506865
Sent from the JQuery mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Auto Vertical Scroller newsBlock div
I made a news scroller a while back; you can see it at
http://youngisrael-stl.org/updates.php
at the upper right. It smoothly scrolls any element (I use H3 and LI, but
you can specify), stops on mouseover and adds buttons to scroll back up or
further down, and a button to expand the whole list.
It's unobtrusive (with javascript off, it's just a fixed-height div with
overflow: scroll).
The source is at http://youngisrael-stl.org/inc/yi-scroller.js and it uses
the DOM creation code at http://youngisrael-stl.org/inc/yi-effects.js
It's not really packaged for general use, but if there's interest I can do
that.
Danny
{js}sTyler wrote:
Hi All,
Anyone have any tips for me to do a sort of news scroll vertical
scrolling div?
Mine is here:
http://70.133.226.219/v2/07index.aspx
It's beneath the jquery buttons in the left column.
It is scrolling up or sort of ticking up, if you give it a few seconds you
will see the headlines tick up.
I know the Css styling isn't quite right yet to tell the headlines apart
from each other, but that's a cinch to fix.
I tried implementing JD Sharp's code from here:
http://jdsharp.us/code/jQuery/plugins/jdNewsScroll/
It's sort of working but not really scrolling.
Any ideas to fix this or another setup, I don't really like the headline
reader that scrolls up quickly to the top and pauses, a plain old smooth
scroller would probably be best.
--
View this message in context:
http://www.nabble.com/Auto-Vertical-Scroller-newsBlock-div-tf3352363.html#a9338965
Sent from the JQuery mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Creating stylesheets in jQuery
That works for Firefox, which treats the cssText as a textNode but fails in
Internet Explorer.
Yansky wrote:
You could also do $(style).html(p{color:green;}); if you wanted a
non-inline style rule applied to the page.
Danny Wachsstock wrote:
This may be helpful to someone: I made a jQuery extension that lets you
change the stylesheet styles, rather than the inline styles (which is
what jQuery generally does). So you can do:
$.style('p').css('color','green');
creates a stylesheet with a rule that sets the color of P elements,
including any that are created in the future. That's different from
$('p').css('color','green'); which changes the color of any existing P
elements only.
It also takes an options object that can specify the media of the
stylesheet, so:
$.style('div', {media: 'print'}).css('background', 'none');
sets the background only for printing.
Some notes:
--The selector can only be something that your browser understands; no
XPath or CSS3 or other fancy jQuery stuff.
--The returned object is not a real jQuery object but an array of CSS
rules; most of the jQuery functions will give errors. The only useful
function that works is .css(), and that only to set the style;
$.style('p').css('color') gives an error. There ought to be a way to get
the style, but I haven't found it yet.
--For large numbers of elements, it ought to be faster to change the
stylesheet than to change the style of each element, but I haven't tested
that yet.
The code:
$.style = function(selector, options){
options = $.extend ({type: 'text/css', media: 'all'}, options);
var style =
$(document.createElement('style')).attr(options).appendTo('head')[0];
if (style.styleSheet){
// IE
var sheet = style.styleSheet;
sheet.addRule(selector, null);
return $(sheet.rules[0]);
}else if (style.sheet){
// Firefox
sheet = style.sheet;
sheet.insertRule(selector+' {}',0);
return $(sheet.cssRules[0]);
}
};
This creates a new stylesheet (really a STYLE element) each time it's
called. A fancier version that caches the stylesheets is:
$.style = function (selector, options){
options = $.extend ({type: 'text/css', media: 'all'}, options);
var sheet = $.style.sheets[options.media];
if (!sheet){
var style =
$(document.createElement('style')).attr(options).appendTo('head')[0];
if (style.styleSheet){
// IE
$.style.sheets[options.media] = sheet = style.styleSheet;
}else if (style.sheet){
// Firefox
$.style.sheets[options.media] = sheet = style.sheet;
sheet.rules = []; // lets us use the same rules array
}
}
if (sheet.rules [selector]) return $(sheet.rules [selector]);
if (sheet.cssRules){
// Firefox
sheet.insertRule(selector+' {}',sheet.cssRules.length);
return $(sheet.rules[selector] =
sheet.cssRules[sheet.cssRules.length-1]);
}else{
// IE
sheet.addRule(selector, null);
return $(sheet.rules[selector] =
sheet.rules[sheet.rules.length-1]);
}
};
$.style.sheets = [];
Enjoy!
Danny Wachsstock
--
View this message in context:
http://www.nabble.com/Creating-stylesheets-in-jQuery-tf3298905.html#a9188673
Sent from the JQuery mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] problem with edit in place on HTML coding.
I'm not sure if this will solve your problem, but a cheap way to emulate
html_entity_decode is:
function html_entity_decode(string) {return $('div').html(string).text()}
It creates a div, uses your string as the innerHTML, and outputs the HTML
created. If the string is not valid HTML, things may not work.
The reverse would beL
function html_entity_encode(string) {return $('div').text(string).html()}
Hope this helps
Danny Wachsstock
Mark-235 wrote:
no that`s not the best way.. can`t i assign a php function to javascript
and
use it the same way i would have done with php?
2007/2/27, Sam Collett [EMAIL PROTECTED]:
On 27/02/07, Mark [EMAIL PROTECTED] wrote:
yea oke.. but do you guys have any idea how to solve this issue?
in php it would be: html_entity_decode() but that doesn`t work in
javascript.. besides the fact that i would need to edit the plugin and
i
have no idea where i need to edit it.. :(
Perhaps not the best way to do it, but you could try replacing
self.revert = jQuery(self).html();
with
self.revert =
jQuery(self).html().replace(/gt;/g,).replace(/lt;/g, );
Not tested though.
2007/2/27, Sam Collett [EMAIL PROTECTED]:
On 27/02/07, Mark [EMAIL PROTECTED] wrote:
i`m trying to edit the whole tag.
and i can`t post any samples online.. i don`t have any sites
online.. i
do
have some free subdomains somewhere but i hardly know where i left
them
:P
perhaps in the future..
You could upload them to Google Pages (http://pages.google.com/).
That's what I did in the past before it was blocked from work. Not
sure how many others on this list have Google Pages blocked.
2007/2/27, Mika Tuupola [EMAIL PROTECTED]:
On 27 Feb 2007, at 01:47, Mark wrote:
i have a edit in place thing now and i have this text:
div class=\admin_link\#INCLUDE#/div
when you click on the the text field pops in BUT the content
is
suddently different.. the content now is:
lt;div
class=admin_linkgt;#INCLUDE#lt;/divgt;
sorry, i forgot to mention that..
i`m using the jEditable plugin.
Ok. To be clear. Is the text you are trying to edit #INCLUDE#
or
are you trying to edit the whole html tag div
class=\admin_link
\#INCLUDE#/div ?
Maybe you can post some example code online?
--
Mika Tuupola
http://www.appelsiini.net/~tuupola/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
--
View this message in context:
http://www.nabble.com/problem-with-%22edit-in-place%22-on-HTML-coding.-tf3295602.html#a9188810
Sent from the JQuery mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Creating stylesheets in jQuery
For those who like the idea of manipulating stylesheet styles, I added some
hacks that let you animate styles (even using Interface.js) and use
.css(property) to retrieve the property for that style. So
$.style('td').animate({width : 100, color: 'green'}, 'slow') changes all TD
elements (using Interface), but potentially much more smoothly than
$('td').animate({width : 100, color: 'green'}, 'slow') would, since it only
affects one element.
$.style(selector).css('height') returns the height from the stylesheet if it
was defined with $.style , otherwise it finds the first element that matches
the selector and returns its height. If no elements match, it will throw an
error. I'm still working on that!
Another issue: toggle animations look very choppy. I'm not sure why.
As before, you can specify the media, as in
$.style(selector, {media: 'print'}).css('height')
The code:
$.style = function (selector, options){
options = $.extend ({type: 'text/css', media: 'all'}, options);
var sheet = $.style.sheets[options.media];
if (!sheet){
var style =
$(document.createElement('style')).attr(options).appendTo('head')[0];
if (style.styleSheet){
// IE
$.style.sheets[options.media] = sheet = style.styleSheet;
}else if (style.sheet){
// Firefox
$.style.sheets[options.media] = sheet = style.sheet;
sheet.rules = []; // lets us use the same rules array
}
}
if (sheet.rules [selector]) return $(sheet.rules [selector]);
if (sheet.cssRules){
// Firefox
sheet.insertRule(selector+' {}',sheet.cssRules.length);
sheet.rules[selector] = sheet.cssRules[sheet.cssRules.length-1];
}else{
// IE
sheet.addRule(selector, null);
sheet.rules[selector] = $.extend({},
sheet.rules[sheet.rules.length-1]); // the original rule is read-only;
create a writeable copy
}
return $(sheet.rules[selector]);
};
// hacks
$._curCSS = $.curCSS;
$.curCSS = function(elem, prop, force) {
if (elem.selectorText){
// its a cssRule
// Try to get the property directly, or find a real element
// with that property and use it
prop = prop.replace(/\-(\w)/g,function(m,c){return c.toUpperCase();});
return elem.style[prop] || elem.style.getPropertyValue
elem.style.getPropertyValue(prop) || $(elem.selectorText).css(prop);
}else{
return $._curCSS(elem, prop, force)
}
};
$._css = $.css;
$.css = function (e,p){
if (e.selectorText) return $.curCSS(e,p);
else return $._css(e,p);
}
Danny Wachsstock wrote:
This may be helpful to someone: I made a jQuery extension that lets you
change the stylesheet styles, rather than the inline styles (which is what
jQuery generally does). So you can do:
$.style('p').css('color','green');
creates a stylesheet with a rule that sets the color of P elements,
including any that are created in the future. That's different from
$('p').css('color','green'); which changes the color of any existing P
elements only.
It also takes an options object that can specify the media of the
stylesheet, so:
$.style('div', {media: 'print'}).css('background', 'none');
sets the background only for printing.
Some notes:
--The selector can only be something that your browser understands; no
XPath or CSS3 or other fancy jQuery stuff.
--The returned object is not a real jQuery object but an array of CSS
rules; most of the jQuery functions will give errors. The only useful
function that works is .css(), and that only to set the style;
$.style('p').css('color') gives an error. There ought to be a way to get
the style, but I haven't found it yet.
--For large numbers of elements, it ought to be faster to change the
stylesheet than to change the style of each element, but I haven't tested
that yet.
The code:
!-- Old code --
Enjoy!
Danny Wachsstock
--
View this message in context:
http://www.nabble.com/Creating-stylesheets-in-jQuery-tf3298905.html#a9196442
Sent from the JQuery mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Q: best way to create dynamic content?
Using innerHTML (like $('div/div') is faster than DOM creation methods;
see http://www.quirksmode.org/dom/innerhtml.html
but for complicated trees it's harder to understand and debug.
nrwsteff wrote:
short question:
what is the recommanded/better/fastest (memory footprint/execution time)
jQuery way to create dynamic content?
the length of code is not so important for me.
or should i use one of the DOM creation plugins?
a)
var myIdVar = 'id1';
var myClassVar = 'class1';
$('div/div').attr({'id':myIdVar,'class':myClassVar}).appendTo('#myAnchor
');
or
b)
var myIdVar = 'id1';
var myClassVar = 'class1';
var myHtml = 'div ';
myHtml += 'id='+myIdVar+' class='+myClassVar+'/div';
$('#myAnchor').append(myHtml);
regards steff
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
--
View this message in context:
http://www.nabble.com/Q%3A-best-way-to-create-dynamic-content--tf3304274.html#a9196649
Sent from the JQuery mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
[jQuery] Creating stylesheets in jQuery
This may be helpful to someone: I made a jQuery extension that lets you
change the stylesheet styles, rather than the inline styles (which is what
jQuery generally does). So you can do:
$.style('p').css('color','green');
creates a stylesheet with a rule that sets the color of P elements,
including any that are created in the future. That's different from
$('p').css('color','green'); which changes the color of any existing P
elements only.
It also takes an options object that can specify the media of the
stylesheet, so:
$.style('div', {media: 'print'}).css('background', 'none');
sets the background only for printing.
Some notes:
--The selector can only be something that your browser understands; no XPath
or CSS3 or other fancy jQuery stuff.
--The returned object is not a real jQuery object but an array of CSS rules;
most of the jQuery functions will give errors. The only useful function that
works is .css(), and that only to set the style; $.style('p').css('color')
gives an error. There ought to be a way to get the style, but I haven't
found it yet.
--For large numbers of elements, it ought to be faster to change the
stylesheet than to change the style of each element, but I haven't tested
that yet.
The code:
$.style = function(selector, options){
options = $.extend ({type: 'text/css', media: 'all'}, options);
var style =
$(document.createElement('style')).attr(options).appendTo('head')[0];
if (style.styleSheet){
// IE
var sheet = style.styleSheet;
sheet.addRule(selector, null);
return $(sheet.rules[0]);
}else if (style.sheet){
// Firefox
sheet = style.sheet;
sheet.insertRule(selector+' {}',0);
return $(sheet.cssRules[0]);
}
};
This creates a new stylesheet (really a STYLE element) each time it's
called. A fancier version that caches the stylesheets is:
$.style = function (selector, options){
options = $.extend ({type: 'text/css', media: 'all'}, options);
var sheet = $.style.sheets[options.media];
if (!sheet){
var style =
$(document.createElement('style')).attr(options).appendTo('head')[0];
if (style.styleSheet){
// IE
$.style.sheets[options.media] = sheet = style.styleSheet;
}else if (style.sheet){
// Firefox
$.style.sheets[options.media] = sheet = style.sheet;
sheet.rules = []; // lets us use the same rules array
}
}
if (sheet.rules [selector]) return $(sheet.rules [selector]);
if (sheet.cssRules){
// Firefox
sheet.insertRule(selector+' {}',sheet.cssRules.length);
return $(sheet.rules[selector] =
sheet.cssRules[sheet.cssRules.length-1]);
}else{
// IE
sheet.addRule(selector, null);
return $(sheet.rules[selector] = sheet.rules[sheet.rules.length-1]);
}
};
$.style.sheets = [];
Enjoy!
Danny Wachsstock
--
View this message in context:
http://www.nabble.com/Creating-stylesheets-in-jQuery-tf3298905.html#a9176651
Sent from the JQuery mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Creating an empty jQuery object
This may be hijacking the thread, so I'll keep it brief. i agree that
innerHTML is useful, and it is a de-facto standard (like AJAX). I also agree
that whatwg's work is much closer to reality than w3g's, and like I said,
I'm not a fanatic standardista. My point is that it's harder to debug
complicated strings than language constructs, since the language will tell
you there's a syntax error right away. As in
$(div class='first'divdiv+span
style='color:+getColor()+'/span/div/div);
It would take me forever to find that I missed a closing div, and keeping
track of all the quotes is well-nigh impossible. To use my function,
$.dom('div', {Class: 'first'}, ['div',{},['div',{},['span', {style: {color:
getColor()}}]]])
and if I screw up a parenthesis or brace, Firebug will tell me right away.
For simple things ($(spanHello/span) I'll use innerHTML, and certainly
if someone else is taking responsibility for generating the string (as in
AJAX), there's nothing easier than innerHTML.
Danny
Sam Collett wrote:
I may not be a guru (but have been using it for a long time), but
while jQuery does use innerHTML, it does in a way to work around
limitations in the browsers. Without it, I don't think you would be
able to create select options or table cells/rows via the $(html)
method.
All of the supported browsers recognise innerHTML and I can't see it
going away any time soon, or any new browser shipping without support
for it as so many sites rely on it to work. Much like how XHTML strict
(served with correct content type) will likely never see widespread
adoption. I think HTML 5 (http://blog.whatwg.org/faq/) is more likely
to take off IF Internet Explorer 8 adopts it (as it simply expands on
what people use now, and is not a complete break from HTML like XHTML
2 is), but as Microsoft are pushing XAML that may not happen.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
--
View this message in context:
http://www.nabble.com/Creating-an-empty-jQuery-object-tf3240592.html#a9029480
Sent from the JQuery mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Creating an empty jQuery object
Wow. I leave my computer for 24 hours and I get answers from John Resig,
Yehuda Katz and Mike Alsup. I love the jQuery community (and jQuery itself,
of course).
Mike:
Yes, adding to an empty array then jQuery'ing it would work; it's how I
originally structured my code. Adding to a jQuery better matches the program
logic to what I'm trying to accomplish; my definition of elegant. I don't
have a problem writing $([]); i just wondered if there was a better way.
Yehuda:
I do know about $('..html/'), but my mother always said Don't hang with
those innerHTML kids, you'll learn bad habits. Seriously, I find it very
hard to debug the assemble-a-string-and-have-the-interpreter-figure-it-out
sort of thing, like innerHTML and eval. I'm not a strict standardista, but
using actual code and HTML lets Firebug or the validator find my stupid
syntax errors much more easily.
John:
I believe you on the $() thing; I'll stick to $([]). It clearly could be
coded differently, either Mike's way or:
var result;
$.each(...
if (result) result.add(e); else result = e;
)
but again, I think my way is more elegant.
The original code is my variant of Kevin's DOM creation code
(http://mg.to/2006/02/27/easy-dom-creation-for-jquery-and-prototype#comment-294)
(yes, yet another DOM creator):
$.dom = function(){
var result = $([]), e;
for (var i = 0; i arguments.length; ++i){
if (arguments[i].constructor == String){
// a string is either a text literal or a tag name of an element.
// distinguish by the following argument; a tag name will be followed
by an Object
if (arguments[i+1] arguments[i+1].constructor == Object){
e = $(document.createElement(arguments[i])).
attr (arguments[++i]).css(arguments[i].style || {}); //
incorporate the attributes Object
// append children if the next argument is an array
if (arguments[i+1] arguments[i+1].constructor == Array)
e.append($.dom.apply(null, arguments[++i]));
}else{
e = document.createTextNode(arguments[i]);
}
}else if (arguments[i].constructor == Array){
// process the array
e = $.dom.apply(null, arguments[i]);
}else{
// Something else . Let jQuery deal with it
e = arguments[i];
} // if
result = result.add(e);
} // for
return result;
}; // dom
This version allows you to insert pre-existing things in the created
elements, like
$.dom('div', {Class: 'x'}, [ 'These are all the P elements:' [$('P')]])
puts $('P') into the new div.
It also lets the attribute object include inline styles, as in
$.dom('div', {id: 'myDiv', style: {border: '1px solid red'}})
by using .css(arguments[i].style || {});
Would it be worth changing .attr to allow this directly?
You can see this in action at http://youngisrael-stl.org ; look at the
results from search box on the left column.
i guess you can add that to the list of jQuery sites, too. I'd be flattered.
Thanks for your comments.
Danny
John Resig wrote:
More code depends on $() referring to document than you might think.
Whenever no context is passed in to a jQuery object, the context is
set to 'document'. That way when you do a .find(), it'll actually find
some relevant elements. Since $() has no context, the context then
defaults to document. Same with doing $().
If you want an empty set, $([]) is the preferred solution (it's what I
would use, too).
All that being said, however, I somehow suspect that the result that
you're trying to achieve could be done much more easily, in another
way. Can you post your full code for us to look at? I don't think I've
ever seen a true need to have an empty jQuery set returned.
--John
--
View this message in context:
http://www.nabble.com/Creating-an-empty-jQuery-object-tf3240592.html#a9026722
Sent from the JQuery mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] adding a class to positive and negative data cells in a table column
To select specific elements, the cool kids all use custom selectors (not very
well documented, but see
http://docs.jquery.com/Plugins/Authoring#Using_jQuery.extend_to_extend_jQuery_itself
and
http://www.softwareunity.com/sandbox/JQueryMoreSelectors/ )
Basically, extend jQuery.expr[':'] with a string that will be evaluated to
true if you want that item selected.
You can use the variables 'a' for the element being considered, 'm[3]' for
whatever was in parentheses in the selector (as in the '2' in 'nth(2)' ),
'i' for the index of the element being considered, and 'r' for the whole
array of elements.
In short:
jQuery.extend(jQuery.expr[:], {
positive : parseFloat($(a).text()) 0,
negative : parseFloat($(a).text()) 0,
});
does what you want.
Use it like:
$('td:negative').css('color', 'red');
$('td:positive').css('color', 'green');
Danny
rolfsf wrote:
Is there a clever way in jQuery to find non-zero data in specific columns
of a table, and assign them a class based on whether they are positive or
negative? In plain English, I want to make positive numbers green (or the
cell bg) and the negative numbers red, but only in certain columns.
Ideally, I would want to fine tune the range - say, 1.5 is green and
-1.5 is red. I suspect that COL and COLGROUP are not very useful as
selectors.
Thanks!
--
View this message in context:
http://www.nabble.com/adding-a-class-to-positive-and-negative-data-cells-in-a-table-column-tf3240521.html#a9026786
Sent from the JQuery mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] adding a class to positive and negative data cells in a table column
One thing to remember is that selectors are applied in order.
$('td:nth(3):positive') gives you the positive numbers that are in the
fourth cell,
$('td:positive:nth(3)') gives you the fourth positive cell, probably not
what you want
Danny Wachsstock wrote:
To select specific elements, the cool kids all use custom selectors (not
very well documented, but see
http://docs.jquery.com/Plugins/Authoring#Using_jQuery.extend_to_extend_jQuery_itself
and
http://www.softwareunity.com/sandbox/JQueryMoreSelectors/ )
Basically, extend jQuery.expr[':'] with a string that will be evaluated to
true if you want that item selected.
You can use the variables 'a' for the element being considered, 'm[3]' for
whatever was in parentheses in the selector (as in the '2' in 'nth(2)' ),
'i' for the index of the element being considered, and 'r' for the whole
array of elements.
In short:
jQuery.extend(jQuery.expr[:], {
positive : parseFloat($(a).text()) 0,
negative : parseFloat($(a).text()) 0,
});
does what you want.
Use it like:
$('td:negative').css('color', 'red');
$('td:positive').css('color', 'green');
Danny
rolfsf wrote:
Is there a clever way in jQuery to find non-zero data in specific columns
of a table, and assign them a class based on whether they are positive or
negative? In plain English, I want to make positive numbers green (or the
cell bg) and the negative numbers red, but only in certain columns.
Ideally, I would want to fine tune the range - say, 1.5 is green and
-1.5 is red. I suspect that COL and COLGROUP are not very useful as
selectors.
Thanks!
--
View this message in context:
http://www.nabble.com/adding-a-class-to-positive-and-negative-data-cells-in-a-table-column-tf3240521.html#a9026794
Sent from the JQuery mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Google's Summer of Code
I'd like to see a graphics plugin--porting Walter Zorn's wz_jsgraphics would be great. http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm Danny John Resig wrote: Hey Everyone - Google's Summer of Code has just opened up for 2007, and I'd love to have jQuery be a part of it: http://code.google.com/soc/ In order to be able to apply, we'd have to come up with a list of things that we'd like them to do. So, I'm asking you (the jQuery community) what you think 1-3 decent coders could do for us for a summer? --John ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ -- View this message in context: http://www.nabble.com/Google%27s-Summer-of-Code-tf3240452.html#a9007931 Sent from the JQuery mailing list archive at Nabble.com. ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
[jQuery] Creating an empty jQuery object
I've been using jQuery for a few months now, trying to convert all my hand-rolled javascript and came across a minor problem that I could not find documented anywhere: I want to create DOM elements and add them into a jQuery object, as in; var result = [empty jQuery object]; $.each(... var element = ...; result.add(element); ); But how to create an empty jQuery? Scouring the source code, I eventually hit upon $([]), but this is nowhere documented. Is there a better way? Is there a good reason $() should return $(document) rather than an empty jQuery? Daniel Wachsstock http://youngisrael-stl.org -- View this message in context: http://www.nabble.com/Creating-an-empty-jQuery-object-tf3240592.html#a9008167 Sent from the JQuery mailing list archive at Nabble.com. ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Creating an empty jQuery object
Yes, $('nonexistent-selector') works, but seems very inelegant. I think $([])
is the best solution, but I'd like to hear from the gurus. How much code
depends on $() referring to document?
Sam Collett wrote:
On 16/02/07, Danny Wachsstock [EMAIL PROTECTED] wrote:
I've been using jQuery for a few months now, trying to convert all my
hand-rolled javascript and came across a minor problem that I could not
find
documented anywhere:
I want to create DOM elements and add them into a jQuery object, as in;
var result = [empty jQuery object];
$.each(...
var element = ...;
result.add(element);
);
But how to create an empty jQuery? Scouring the source code, I eventually
hit upon $([]), but this is nowhere documented. Is there a better way?
Is there a good reason $() should return $(document) rather than an empty
jQuery?
Daniel Wachsstock
http://youngisrael-stl.org
--
I found that out the hard way as well, so perhaps it should be
documented. I think searching for a class that does not exist (
$(atag.nonexistentclass) ) will also return an empty jQuery object.
As for changing $() to not return $(document), that may be a bad idea
as it helps reduce the amount of code to write, plus may break some
plugins.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
--
View this message in context:
http://www.nabble.com/Creating-an-empty-jQuery-object-tf3240592.html#a9010063
Sent from the JQuery mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Finding element that matches anchor link
I'm looking at the HTML specs
(http://www.w3.org/TR/1999/REC-html401-19991224/struct/links.html#edef-A)
and hash doesn't look like a standard attribute. It seems to work for me in
both IE and FF, but if it's not in the standard, your browser may not
support it. You may be stuck with using the regular expression:
$(/#.+$/.exec(this.href));
(The regular expression takes everything from the # to the end of the href)
Danny
[EMAIL PROTECTED] wrote:
I'm not following. I tried
targetDiv = $(this.hash);
but still didn't get the element.
On 2/15/07, Ⓙⓐⓚⓔ [EMAIL PROTECTED] wrote:
almost too simple!
$(this.hash)
On 2/15/07, Tim Baxter [EMAIL PROTECTED] wrote:
I just know this is a dumb question with a simple answer, but here
goes...
I have something like:
#div1 Link a
#div2 Link a
and
div id=div1/div
div id=div2/div
I need to match the link to it's div, but can't figure out the
selector.
Non
working test js is:
$(document).ready(function() {
$(a.trigger).each(function(i) {
targetDiv = $($(this).href);
targetDiv.style.background = red;
});
});
So how do I match the link to it's div?
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
--
Ⓙⓐⓚⓔ - יעקב ʝǡǩȩ ᎫᎪᏦᎬ
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
--
View this message in context:
http://www.nabble.com/Finding-element-that-matches-anchor-link-tf3234867.html#a8994638
Sent from the JQuery mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Finding element that matches anchor link
oops. It should be $(/#.+$/.exec(this.href)[0]); Danny Danny Wachsstock wrote: I'm looking at the HTML specs (http://www.w3.org/TR/1999/REC-html401-19991224/struct/links.html#edef-A) and hash doesn't look like a standard attribute. It seems to work for me in both IE and FF, but if it's not in the standard, your browser may not support it. You may be stuck with using the regular expression: $(/#.+$/.exec(this.href)); (The regular expression takes everything from the # to the end of the href) Danny -- View this message in context: http://www.nabble.com/Finding-element-that-matches-anchor-link-tf3234867.html#a8995031 Sent from the JQuery mailing list archive at Nabble.com. ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] onclick - toggle the creation of a TR?
Try creating the element then using chaining to manipulate it:
$(trtd colspan='4'
class='description'/td/tr).insertAfter(this).load(...).toggle();
But are you sure this is what you want? You'll end up creating a new row
each time it's clicked, not toggling
the old row. Why not create the (empty) description line when the table is
created, then hiding it:
$('.description').hide();
Then next() will do what you want:
$(this).next('.description').load(...).toggle();
Danny
bdee wrote:
and up above in the head of my document i have the following:
//show/hide description row on click
$(tr.listing).click(function(){
var myID = $(this).attr(id);
$(this).after(trtd colspan='4' class='description'/td/tr);
$(this).next(.description).load(movieDetailsAjax.asp?movie=+myID);
$(this).next(.description).toggle();
});
so the idea is that whenever you click a row with a class of listing the
following will happen:
set a variable congaing the movie id number
after the current row, insert a row with one cell spanning all 4 columns
then starting with the current row, find the next row with a class of
description (the row we just created) and load the content from the ajax
file (the html for the movie description and the thumbnail image)
then starting with the current row, find the next row with a class of
description (the row we just created) and toggle it. that way when you
click on the row again, it will close this cell.
--
View this message in context:
http://www.nabble.com/onclick---toggle-the-creation-of-a-TR--tf3230589.html#a8995535
Sent from the JQuery mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] onclick - toggle the creation of a TR?
How about:
// check for a sibling to this
var sibling = $(this).next('tr');
// if that sibling has the right class, use it
if (sibling.is('.description')){
sibling.load(...).toggle();
}else{
// create the new row and fill it (don't toggle--that would only hide it
$(trtd colspan='4'
class='description'/td/tr).insertAfter(this).load(...);
}
bdee wrote:
yea i dont want to create a new row every time it is clicked. i guss what
i want to do is to create a details row when the first row is clicked -
but only if the details row hasnt already been created. if its already
been created then i want to remove it.
the reason i dotn want to add the empty rown when the table loads and then
hide it is that it adds to the initial load time of th page. and all the
empty rows aren't hidden until the page is completely loaded so it looks
messy until the hide function kicks in to hide the detail rows.
i m really not sure how to proceed with this.
Danny Wachsstock wrote:
Try creating the element then using chaining to manipulate it:
$(trtd colspan='4'
class='description'/td/tr).insertAfter(this).load(...).toggle();
But are you sure this is what you want? You'll end up creating a new row
each time it's clicked, not toggling
the old row. Why not create the (empty) description line when the table
is created, then hiding it:
$('.description').hide();
Then next() will do what you want:
$(this).next('.description').load(...).toggle();
Danny
bdee wrote:
and up above in the head of my document i have the following:
//show/hide description row on click
$(tr.listing).click(function(){
var myID = $(this).attr(id);
$(this).after(trtd colspan='4'
class='description'/td/tr);
$(this).next(.description).load(movieDetailsAjax.asp?movie=+myID);
$(this).next(.description).toggle();
});
so the idea is that whenever you click a row with a class of listing
the following will happen:
set a variable congaing the movie id number
after the current row, insert a row with one cell spanning all 4 columns
then starting with the current row, find the next row with a class of
description (the row we just created) and load the content from the
ajax file (the html for the movie description and the thumbnail image)
then starting with the current row, find the next row with a class of
description (the row we just created) and toggle it. that way when
you click on the row again, it will close this cell.
--
View this message in context:
http://www.nabble.com/onclick---toggle-the-creation-of-a-TR--tf3230589.html#a8996084
Sent from the JQuery mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
