Is Sizzle now oficially built-into the Smugmug JS?

jfriend

I see that Sizzle for CSS3 selector DOM searches is now in the Smugmug JS. Can we officially use it in our own JS like we use YUI and expect it to always be available?

jfriend

Nobody's going to say anything about Sizzle?

Andy

jfriend wrote:

Nobody's going to say anything about Sizzle?

John, I've no idea what this is but I'll ask the Sorcerers. You know I'm only an email away, sorry nobody replied.

jfriend

Andy wrote:

John, I've no idea what this is but I'll ask the Sorcerers. You know I'm only an email away, sorry nobody replied.

I guess I thought some sorcerers would hang out in the APIs forum.

Andy

jfriend wrote:

I guess I thought some sorcerers would hang out in the APIs forum.

Dev, mostly - and it's Saturday arvo in Australia The rest of the team is probably a little whacked out tired from three back-to-back releases, the infrastructure stuff, then the two releases this week.

Stay tuned, John.

jfriend

Andy wrote:

Dev, mostly - and it's Saturday arvo in Australia The rest of the team is probably a little whacked out tired from three back-to-back releases, the infrastructure stuff, then the two releases this week.

Stay tuned, John.

It's probably {JT} or whoever else works on the Javascript in the actual pages who would know.

Andy

jfriend wrote:

It's probably {JT} or whoever else works on the Javascript in the actual pages who would know.

Yup, John, - I've already asked all of our JS guys. Please stay tuned.

{JT}

Go ahead and use it for now. There is a chance that we will switch to using YUI 3 at some point, in which case we will use their selector stuff (which is or is based on sizzle).

jfriend

{JT} wrote:

Go ahead and use it for now. There is a chance that we will switch to using YUI 3 at some point, in which case we will use their selector stuff (which is or is based on sizzle).

OK, thanks.

Dan7312

Just trying to understand what Sizzle does for me. Here's what I think it does, please straighten me out if I'm not even close.

I can select elements and style or change them using JS, using any of the selectors in CSS3.

And the advantage is?

I can do styling with full CSS3 support even if the browser doesn't support CSS3... at the cost of writing JS instead of CSS rules.

I can dynamically modify the DOM based on CSS3 selectors... something I can't do with CSS.

Thanks,

jfriend

Dan7312 wrote:

Just trying to understand what Sizzle does for me. Here's what I think it does, please straighten me out if I'm not even close.

I can select elements and style or change them using JS, using any of the selectors in CSS3.

And the advantage is?

I can do styling with full CSS3 support even if the browser doesn't support CSS3... at the cost of writing JS instead of CSS rules.

I can dynamically modify the DOM based on CSS3 selectors... something I can't do with CSS.

Thanks,

It's a little simpler than that. Sizzle just lets you find an element or elements in the DOM in Javascript using CSS3 selectors. So, if I want a list of all the link tags in my navbar, I'd just do this:

var links = Sizzle("#navcontainer a");

This was all doable before - it would have just taken more lines of code to do it. So Sizzle just saves you time and code.

Once you've found those elements in the DOM, you can do anything you would have normally done in the javascript, remove them, modify them, add to them, etc... Sizzle doesn't change what you can/can't do to them - it just makes it easier to find them in the DOM because you get all the goodness of CSS3 selector logic compared to the relatively few javascript functions for looking at the DOM.

Dan7312

Thanks!

In poking at it I think I missing something about the object model or maybe just plain messing up.

The Sizzle api says it returns an array of DOMElement's. I'm not familiar with DOMElement's. I am familiar with the W3 DOM and HTMLElement's and Node's and such but when I try something like this it doesn't seem to work, i.e. the footer text is not affected.

In the Footer I put

<div style="font-size:20;color=green;">[<div class="myFooter"></div>]</div>

in the bottom JS I put

var eles = Sizzle(".myFooter");
for(var i = 0; i < eles.length; i++)
{
eles.innerHTML = "<b>some stuff</b>";
}


The [] appear in the footer, but not the text the JS was supposed to add.

http://www.danalphotos.com/Other/Quabbin-10-25-09/10087243_sPx5G#693362653_WcCdo



I'm guessing I am missunderstanding what a DOMElement is.

jfriend wrote:

It's a little simpler than that. Sizzle just lets you find an

jfriend

Dan7312 wrote:

Thanks!

In poking at it I think I missing something about the object model or maybe just plain messing up.

The Sizzle api says it returns an array of DOMElement's. I'm not familiar with DOMElement's. I am familiar with the W3 DOM and HTMLElement's and Node's and such but when I try something like this it doesn't seem to work, i.e. the footer text is not affected.

In the Footer I put

<div style="font-size:20;color=green;">[<div class="myFooter"></div>]</div>

in the bottom JS I put

var eles = Sizzle(".myFooter");
for(var i = 0; i < eles.length; i++)
{
eles.innerHTML = "<b>some stuff</b>";
}


The [] appear in the footer, but not the text the JS was supposed to add.

http://www.danalphotos.com/Other/Quabbin-10-25-09/10087243_sPx5G#693362653_WcCdo



I'm guessing I am missunderstanding what a DOMElement is.

The code should generally work, but the way you have it called in your page won't work because of the timing of things. Your code was executing before the whole page had loaded and, more specifically, before the HTML that had .myFooter in it had loaded.

Try this:

YE.onDOMReady(SampleSizzleFunc);

function SampleSizzleFunc()
{
    var eles = Sizzle(".myFooter");
    for(var i = 0; i < eles.length; i++)
    {
        eles[i].innerHTML = "<b>some stuff</b>";
    }
}

FYI, this HTML:

<div style="font-size:20;color=green;">

should be:

<div style="font-size:20[color=red]px[/color]; color[color=red]:[/color]green;">

Dan7312

That did it. Thanks again!

I can see where YE and YA and such are set up as various YAHOO. objects in smugmug_core. Can you give me a pointer to the documentation for these functions?

Dan7312

Never mind, found it. http://developer.yahoo.com/yui/dom/

Dan7312 wrote:

That did it. Thanks again!

I can see where YE and YA and such are set up as various YAHOO. objects in smugmug_core. Can you give me a pointer to the documentation for these functions?