I am trying to make a page which operates mostly on the client with radrotator. you can think of it as a simple slide-show type interface. radrotator has thumbnails, which switching between index, larger image updates (along with some other things)
I am using hash parameters in the URL to allow users to "bookmark" pages meaningfully, and below is what i see as the relevant javascript code.
i use a boolean "stateHandled" variable which lets the code know whether or not it should look at the hash value and update the page accordingly, or if the state change has already been handled....
thus, if user presses back button, the onhashchange event updates the gui.
on the other hand, if user interacts with the radrotator - the onhashchange event does nothing.
what is REALLY weird is that all of this works fine except for one thing... the animation of the radrotator is suppressed now for when the user is changing the index via interactions with the radrotator, but the forward/back buttons of the browser work fine (they have animation).
on the other hand, if i make the changes to the above code, having:
then the animations work fine... (however the logic of the code isn't exactly perfect... the forward/back buttons only work every other hash change)
any ideas? thanks.
I am using hash parameters in the URL to allow users to "bookmark" pages meaningfully, and below is what i see as the relevant javascript code.
i use a boolean "stateHandled" variable which lets the code know whether or not it should look at the hash value and update the page accordingly, or if the state change has already been handled....
thus, if user presses back button, the onhashchange event updates the gui.
on the other hand, if user interacts with the radrotator - the onhashchange event does nothing.
what is REALLY weird is that all of this works fine except for one thing... the animation of the radrotator is suppressed now for when the user is changing the index via interactions with the radrotator, but the forward/back buttons of the browser work fine (they have animation).
window.onload =
function
() {
initializeStateFromURL();
}
window.onhashchange =
function
() {
initializeStateFromURL();
}
function
initializeStateFromURL() {
if
(!stateHandled) {
var
navSetting = window.location.hash;
var
slide = FromHash(
"slide"
, navSetting);
if
(slide) {
SetRotatorToSlideID(slide);
}
}
}
var
stateHandled =
false
;
function
SetRotatorToSlideID(slideID) {
var
items = rotator.get_items();
for
(i
in
items) {
if
(slideID == GetAttributeValue(items[i],
"SlideID"
)) {
rotator.set_currentItemIndex(items[i].get_index(),
true
);
UpdateGUI(items[i]);
}
}
}
function
RotatorClientItemShowing(sender, args) {
stateHandled =
true
;
UpdateGUI(args.get_item());
stateHandled =
false
;
}
function
RotatorClientItemClicked(sender, args) {
stateHandled =
true
;
sender.set_currentItemIndex(args.get_item().get_index(),
true
);
UpdateGUI(args.get_item());
stateHandled =
false
;
}
function
UpdateGUI(item) {
//update some things on the page
setHash(GetAttributeValue(item,
"DocumentID"
),GetAttributeValue(item,
"SlideID"
));
}
on the other hand, if i make the changes to the above code, having:
function
RotatorClientItemShowing(sender, args) {
stateHandled =
true
;
UpdateGUI(args.get_item());
}
function
RotatorClientItemClicked(sender, args) {
stateHandled =
true
;
sender.set_currentItemIndex(args.get_item().get_index(),
true
);
UpdateGUI(args.get_item());
}
then the animations work fine... (however the logic of the code isn't exactly perfect... the forward/back buttons only work every other hash change)
any ideas? thanks.