IE VBScript HTC Behavior - Static Variables between all Instances of Behavior?

Yesurbius

'm not 100% sure what question I should ask - as I'm too sure on the best way to do this .. so let me describe what I'm trying to do (using a simplified example) and we'll go from there.

You have arbitrary HTML Elements (IMG, A, TD, whatever). Via the CSS they are assigned an HTML Behavior

Expand|Select|Wrap|Line Numbers

 
.BoldSelection { 

    behavior: url(SelectBold.htc); 

    border: thin solid black;  

}

The Behavior simply puts a thick border around the elements when they are clicked - BUT - they have to set the previously selected element with a normal border.

So here is the HTC source. This would work if CurrentlyFocusedElementID was static between all instances of the behavior. But it isn't.

Expand|Select|Wrap|Line Numbers

 
<Public:Attach Event="onContentReady" onEvent="LoadInit" />
 
    <Script Language="VBScript" type="Text/VBScript">
 
        Sub LoadInit

            element.onClick = getRef("setFocusedElement")

        End Sub
 
        Sub setFocusedElement

            set ele = document.getElementByID(CurrentlyFocusedElementID)

            ele.style.border = "thin solid black"

            CurrentlyFocusedElementID = element.id

            element.style.border = "thick solid black"

        End Sub
 
    </Script>

I also thought that if I could store an arbitrary property or attribute within the containing document's DOM then I could use that as a common place to look for the last active element ... alas I can't figure out a way to do that without using some sort of hack (ie. hijacking the body's class value)

I would like to keep the code all contained within the HTC. I like the modular fashion of doing it this way .. that way I can simply assign the CSS Behavior and its done - no callbacks .. no parent attributes .. no HTML Components to declare.

How would you suggest I go about doing this?

Thank you in advance.

Dormilich

in terms of a non-IE developer:

Expand|Select|Wrap|Line Numbers

 element.onfocus = function()

{

    this.style.border = "thick solid black";

}
 element.onblur = function()

{

    this.style.border = "thin solid black";

}

something like that???

Yesurbius

Quote:

Originally Posted by Dormilich

in terms of a non-IE developer:

Expand|Select|Wrap|Line Numbers

 element.onfocus = function()

{

    this.style.border = "thick solid black";

}
 element.onblur = function()

{

    this.style.border = "thin solid black";

}

something like that???

Unfortunately onFocus and onBlur won't work in order to get my desired effect. Lets say I have class="Bold Selection" on only three images.... The user clicks on an image, and a border is placed around it. Using the onBlur / onFocus events .. the onBlur event would fire if the user clicked on some other control that did not have the class="Bold Selection" designation. I'm using images as a mere example - you can consider it was TD elements as well .. you'd run into other problems.

I think I need to be able to handle this through the HTC's onClick event in order to achieve the desired effect.

Thanks for reviewing and replying however - its appreciated.

Dormilich

ah, that seems even easier…

Expand|Select|Wrap|Line Numbers

 // using some pseudo code
 element.onclick = function()

{

    // reset all elements to default

    var list = getElements(…);

    foreach (list) { this.style.border = "thin solid black"; }

    // change current element

    this.style.border = "thick solid black";

}

Yesurbius

Quote:

Originally Posted by Dormilich

ah, that seems even easier…

Expand|Select|Wrap|Line Numbers

 // using some pseudo code
 element.onclick = function()

{

    // reset all elements to default

    var list = getElements(…);

    foreach (list) { this.style.border = "thin solid black"; }

    // change current element

    this.style.border = "thick solid black";

}

With that solution, if you have other elements that have formatting - then that formatting will be wiped out. Also - if I have many of these behaviors - then it'll be scanning all the elements on the page for a single operation .. that'll slow things down considerably.

I could solve this very easily by putting in

Expand|Select|Wrap|Line Numbers

<input type="hidden" id="lastUpdatedElement" value="">

Then having the HTC reference lastUpdatedElement.value and retreive/store the highlighted cell.

The problem is I want to make this self-contained without any extra code required in the parent page. Generic, Reuseable programming.

The only ways I can see that you can achieve this is:

a) Having a Static variable declaration in the HTC. A variable that is shared between all instances of the HTC behavior.

b) Having the HTC create a property or attribute within the parent DOM ... like a registry key .. and all HTCs reference that.

Just thought of something - I could have the HTC inject a hidden input tag into the parent document .. The HTC would need to check to see if the element exists in the parent - and if not, do a createElement().

I'm wondering if there is an even better option out there...

Dormilich

Quote:

Originally Posted by Yesurbius

With that solution, if you have other elements that have formatting - then that formatting will be wiped out.

what????

you do not redefine the complete CSS with that, just the border property (you can even use just the border-width…)

Quote:

Originally Posted by Yesurbius

Also - if I have many of these behaviors - then it'll be scanning all the elements on the page for a single operation .. that'll slow things down considerably.

save the list as a global var, then you don’t have to rebuild the list each time.

PS. the slow thing is reading and parsing the HTML file (unless you use IE).

PPS. it doesn’t look as if the .htc files would be more efficient…

Yesurbius

Dormilich - what I meant by removing formatting is .. if I have other elements that have a border property .. or a class .. then that is removed.

I've figured out what I needed to do -- expandos.

Here is the Completed HTC Source.

Expand|Select|Wrap|Line Numbers

 
<Public:Attach Event="onContentReady" onEvent="LoadInit" />
 
  <Script Language="VBScript" type="Text/VBScript">
 
    ' This is an example HTC only.   If we were only setting borders, it'd make more sense to store

    ' the previous element's border type and keep the rest of the formatting.  For simplicity we are

    ' swapping out the class name
 
    Sub LoadInit
 
      ' No ID defined for this element.  Highlight it for the developer

      If element.id = "" Then

        element.style.bordercolor = "rgb(200,50,10)"

        element.style.borderwidth = "thin"

        element.style.borderstyle = "dashed"

        Exit Sub

      End If
 
      ' Attach our Click Events

      element.onClick = getRef("BoldIt")

      element.onDblClick = getRef("BoldItMore")
 
    End Sub
 
    ' Changes the Class Name for the current element, and if a previously

    ' selected element exists, restore its original classname

    Sub changeClass(newCSSClass)

      ' Storing the Expando on the document.body element

      Set ele = window.document.body
 
      ' Retrieve our two custom attributes - the ID of the element, and what its original ClassName was.

      LastEle = ele.getAttribute("LastHighlightedEle")

      LastEleClass = ele.getAttribute("LastHighlightedEleClass")
 
      ' If there was in fact a previously selected element - restore the classname

      If not isnull(LastEle) then

        set oldEle = window.document.getElementByID(LastEle)

        oldEle.className = LastEleClass

        set oldEle =  Nothing

      End If
 
      ' Set our two custom attributes to this element and adjust this element's CSS ClassName

      LastEle = element.id

      LastEleClass = element.className

      ele.setAttribute "LastHighlightedEle",LastEle

      ele.setAttribute "LastHighlightedEleClass",LastEleClass

      element.className = newCSSClass

    End Sub
 
    ' Single Click Event - 'Thick' is a CSS Style for a 3px border

    Sub BoldIt

      changeClass("Thick")

    End Sub
 
    ' Double Click Event - 'Thicker' is a CSS Style for a 4px border

    Sub BoldItMore

      changeClass("Thicker")

    End Sub
 
  </Script>

I have also attached a .htm with the .htc for review.

Dormilich

Quote:

Originally Posted by Yesurbius

Dormilich - what I meant by removing formatting is .. if I have other elements that have a border property .. or a class .. then that is removed.

why?

Quote:

Originally Posted by Yesurbius

I have also attached a .htm with the .htc for review.

wouldn’t work for me anyway…

Yesurbius

I've only tested it with IE7 which is my target platform.

Dormilich

my question remains… if you apply the border swap (let’s call it that for now), how does the Javascript affect other elements, that do not belong to the .BoldSelection class?

Yesurbius

My understanding was you were talking about clearing the borders for all elements except the one you were looking for. Your second post clarified that you were talking about only those that share the same class. I still didn't like the idea of going looking for it each time as well. As for keeping a variable with a cached list of elements - that wouldn't work because each instance of the HTC would have its own cached list of elements ... it wouldn't be static between instances.

I ended up implementing this without using classes - but actual element ids. I wrote out the original element's id, border properties, and bgcolor. I then applied the highlight effects. When another element was being highlighted - the previously highlighted element had its settings restored. It worked quite nicely.

The missing piece of the puzzle was using the expandos .. the user-defined attributes.

Dormilich

Quote:

Originally Posted by Yesurbius

I ended up implementing this without using classes - but actual element ids.

you don’t, but the HTC does.

Yesurbius

Let me rephrase.

I implemented without using the classname of the element to locate the objects and determine the style. I used CSS to select which elements had the behaviour, and the elements are referenced by ID.

IE VBScript HTC Behavior - Static Variables between all Instances of Behavior?

re: IE VBScript HTC Behavior - Static Variables between all Instances of Behavior?

re: IE VBScript HTC Behavior - Static Variables between all Instances of Behavior?

re: IE VBScript HTC Behavior - Static Variables between all Instances of Behavior?

re: IE VBScript HTC Behavior - Static Variables between all Instances of Behavior?

re: IE VBScript HTC Behavior - Static Variables between all Instances of Behavior?

re: IE VBScript HTC Behavior - Static Variables between all Instances of Behavior?

re: IE VBScript HTC Behavior - Static Variables between all Instances of Behavior?

re: IE VBScript HTC Behavior - Static Variables between all Instances of Behavior?

re: IE VBScript HTC Behavior - Static Variables between all Instances of Behavior?

re: IE VBScript HTC Behavior - Static Variables between all Instances of Behavior?

re: IE VBScript HTC Behavior - Static Variables between all Instances of Behavior?

re: IE VBScript HTC Behavior - Static Variables between all Instances of Behavior?

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about