in depth selectors

---- CODE --------------------------------------------------------------------------------------------
<div id="wb_Shape1" style="position:absolute;left:235px;top:395px;width:115px;height:125px;z-index:1;" align="center">
<img src="images/img0001.gif" id="Shape1" align="top" alt="" title="" border="0" width="115" height="125">
</div>
---- CODE --------------------------------------------------------------------------------------------

To get to the target, the path to the target, is by selector the more we know about selectors the more we can do with jor_aniMate

This is the div that holds our image element Shape1, that's why this code can have 2 id's, they are 2 elements
How do we know the name of the id ?
Simple... Webbuilder adds a prefix   wb_   in front of the id
So our Shape1, it's id is   #shape1   (=img), the id of the div that holds our Shape1 is   #wb_Shape1.
This difference is important to remember when using jor_aniMateMASTERPACKv3.0
If we want to animate position we need to trigger the div that holds the object          #wb_Shape1
If we want to animate dimension of the object we need to trigger the object itself    #Shape1
The same applies for dragging an object, we drag the div that holds the object      #wb_Shape1

This might be confusing at first, but hold on it isn't that difficult ones you get your head around it ...

Multiple Selectors:

One more thing, and not unimportant to note about selectors is, we can use multiple selectors in row
Divide them with a comma.
Say we want to trigger a Shape1, Shape2 and an Image1, and we know, they all can be animated the same actions
We can use just one selector input like this #Shape1,#Shape2,#Image1

NOTE:
Using multiple selectors can make it easier to work with wb_ and id as selector
But we can also animate the wrong element that way, USE multiple selectors with caution

I hope you will have a basic understanding of selectors by now
I also recommend reading a more in depth here
If you would like to know more about the full scope of selectors I recommend reading ie. here jQuery library-selectors

No Quick Link
No Quick Link

IN DEPTH - SELECTORS SIMPLIFIED

SELECTORS SIMPLIFIED

Selectors are probably they most important thing to understand to get anything out of jor_aniMate
jor_aniMateMASTERPACKv3.0 in large part is jQuery based, jQuery in large part is, target an object, manipulate the target

selector is the path to the target - jor_aniMate is the manipulation tool

The full range on selectors is beyond the scope of this manual, the focus here will be on simple id, class and element as selector

AN EXAMPLE:
Say we add a Shape to a project in Webbuilder, how can we find, identify, target that Shape ?
The HTML in Webbuilder would look something like this:

---- CODE --------------------------------------------------------------------------------------------
<div id="wb_Shape1" style="position:absolute;left:235px;top:395px;width:115px;height:125px; z-index:1;" align="center">
<img src="images/img0001.gif" id="Shape1" align="top" alt="" title="" border="0" width="115" height="125">
</div>
---- CODE --------------------------------------------------------------------------------------------

id="Shape1" ... not hard to find at all
That could be our selector for Shape1, and because it's an id we need to add a # in front of it
The full selector would become #Shape1

Those could be used as selectors too, div or img
But we would be triggering all divs or all images on the page if we would do this, not just this image
Cause many objects have the element div and all images have the element img
Which has it's own practical use of course, say we want to set opacity for all images on a page
Using a target selector img would set opacity for all images on a page

So now we have a new selector, we could use   myNewClass   as selector
It is a class so we need to place a .   in front of it, the full selector would become   .myNewClass

So now we have 3 ways of targeting our shape with selectors
By   id (#)   by   class (.)   and by   element

target an object - manipulate the target

He ... there are no classes in our HTML at this point
What is a class ?
A class is just another way of identifying an object, or adding specific information to an object
The difference between an id and a class is, each element can only have one unique id, no more.
Even more so, an id should only be used ones per page, it's unique
But an element can have multiple classes, and one class can be used on multiple elements
Let's make this to use in our example
We would take our shape, right-click on it, open it's HTML, and inside inside Tag we would add ie. class="myNewClass"
The HTML in Webbuilder would now look like this

---- CODE --------------------------------------------------------------------------------------------
<div id="wb_Shape1" style="position:absolute;left:235px;top:395px;width:115px;height:125px;z-index:1;" align="center">
<img src="images/img0001.gif" id="Shape1" align="top" alt="" title="" border="0" width="115" height="125" class="myNewClass">
</div>
---- CODE --------------------------------------------------------------------------------------------

LET'S FIND A CLASS

LET'S FIND THE ID

LET'S FIND THE ELEMENTS

WEBBUILDER SPECIFIC

But ... he ... wait a minute, didn't we miss something ?
Let's get back to the code of Shape1 in our example

Isn't that an id also, how can we have 2 id's on 1 object, we can only have 1 id per element ?!
That's right, 1 id per element
This is what Webbuilder does to place our object, Shape1, on stage
Webbuilder wraps a lot of his objects in a separate div, and places an absolute position on this div
Is that important for jor_aniMate ?
Yes, it is ... cause to animate our object in position movement, we would use left and top
If we want to animate our object Shape1 with ie. left position, we can not use the selector id #Shape1
We need to trigger the div that holds Shape1
So what is the div that holds Shape1 ? ... let's see in our code example