By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,932 Members | 1,529 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,932 IT Pros & Developers. It's quick & easy.

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

P: 13
'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
  1. .BoldSelection { 
  2.     behavior: url(SelectBold.htc); 
  3.     border: thin solid black;  
  4. }
  5.  
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
  1. <Public:Attach Event="onContentReady" onEvent="LoadInit" />
  2.  
  3.     <Script Language="VBScript" type="Text/VBScript">
  4.  
  5.         Sub LoadInit
  6.             element.onClick = getRef("setFocusedElement")
  7.         End Sub
  8.  
  9.         Sub setFocusedElement
  10.             set ele = document.getElementByID(CurrentlyFocusedElementID)
  11.             ele.style.border = "thin solid black"
  12.             CurrentlyFocusedElementID = element.id
  13.             element.style.border = "thick solid black"
  14.         End Sub
  15.  
  16.     </Script>
  17.  
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.
Oct 22 '09 #1
Share this Question
Share on Google+
12 Replies


Dormilich
Expert Mod 5K+
P: 8,639
in terms of a non-IE developer:
Expand|Select|Wrap|Line Numbers
  1. element.onfocus = function()
  2. {
  3.     this.style.border = "thick solid black";
  4. }
  5. element.onblur = function()
  6. {
  7.     this.style.border = "thin solid black";
  8. }
something like that???
Oct 22 '09 #2

P: 13
@Dormilich
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.
Oct 22 '09 #3

Dormilich
Expert Mod 5K+
P: 8,639
ah, that seems even easier…
Expand|Select|Wrap|Line Numbers
  1. // using some pseudo code
  2. element.onclick = function()
  3. {
  4.     // reset all elements to default
  5.     var list = getElements(…);
  6.     foreach (list) { this.style.border = "thin solid black"; }
  7.     // change current element
  8.     this.style.border = "thick solid black";
  9. }
Oct 22 '09 #4

P: 13
@Dormilich
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
  1. <input type="hidden" id="lastUpdatedElement" value="">
  2.  
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...
Oct 22 '09 #5

Dormilich
Expert Mod 5K+
P: 8,639
@Yesurbius
what????

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

@Yesurbius
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…
Oct 22 '09 #6

P: 13
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
  1. <Public:Attach Event="onContentReady" onEvent="LoadInit" />
  2.  
  3.   <Script Language="VBScript" type="Text/VBScript">
  4.  
  5.     ' This is an example HTC only.   If we were only setting borders, it'd make more sense to store
  6.     ' the previous element's border type and keep the rest of the formatting.  For simplicity we are
  7.     ' swapping out the class name
  8.  
  9.     Sub LoadInit
  10.  
  11.       ' No ID defined for this element.  Highlight it for the developer
  12.       If element.id = "" Then
  13.         element.style.bordercolor = "rgb(200,50,10)"
  14.         element.style.borderwidth = "thin"
  15.         element.style.borderstyle = "dashed"
  16.         Exit Sub
  17.       End If
  18.  
  19.       ' Attach our Click Events
  20.       element.onClick = getRef("BoldIt")
  21.       element.onDblClick = getRef("BoldItMore")
  22.  
  23.     End Sub
  24.  
  25.  
  26.     ' Changes the Class Name for the current element, and if a previously
  27.     ' selected element exists, restore its original classname
  28.     Sub changeClass(newCSSClass)
  29.       ' Storing the Expando on the document.body element
  30.       Set ele = window.document.body
  31.  
  32.       ' Retrieve our two custom attributes - the ID of the element, and what its original ClassName was.
  33.       LastEle = ele.getAttribute("LastHighlightedEle")
  34.       LastEleClass = ele.getAttribute("LastHighlightedEleClass")
  35.  
  36.       ' If there was in fact a previously selected element - restore the classname
  37.       If not isnull(LastEle) then
  38.         set oldEle = window.document.getElementByID(LastEle)
  39.         oldEle.className = LastEleClass
  40.         set oldEle =  Nothing
  41.       End If
  42.  
  43.       ' Set our two custom attributes to this element and adjust this element's CSS ClassName
  44.       LastEle = element.id
  45.       LastEleClass = element.className
  46.       ele.setAttribute "LastHighlightedEle",LastEle
  47.       ele.setAttribute "LastHighlightedEleClass",LastEleClass
  48.       element.className = newCSSClass
  49.     End Sub
  50.  
  51.     ' Single Click Event - 'Thick' is a CSS Style for a 3px border
  52.     Sub BoldIt
  53.       changeClass("Thick")
  54.     End Sub
  55.  
  56.     ' Double Click Event - 'Thicker' is a CSS Style for a 4px border
  57.     Sub BoldItMore
  58.       changeClass("Thicker")
  59.     End Sub
  60.  
  61.   </Script>
  62.  
I have also attached a .htm with the .htc for review.
Attached Files
File Type: zip SandBox.zip (1.8 KB, 83 views)
Oct 22 '09 #7

Dormilich
Expert Mod 5K+
P: 8,639
@Yesurbius
why?

@Yesurbius
wouldn’t work for me anyway…
Oct 22 '09 #8

P: 13
I've only tested it with IE7 which is my target platform.
Oct 22 '09 #9

Dormilich
Expert Mod 5K+
P: 8,639
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?
Oct 22 '09 #10

P: 13
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.
Oct 22 '09 #11

Dormilich
Expert Mod 5K+
P: 8,639
@Yesurbius
you don’t, but the HTC does.
Oct 22 '09 #12

P: 13
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.
Oct 22 '09 #13

Post your reply

Sign in to post your reply or Sign up for a free account.