Use value in html doc as Conditional case in Hype function

[Burndog (Steve)]

Hello,

I’m trying to use an external variable to display elements in a Hype file.

The purpose is to show a daily summary if a Room at a Hotel is occupied, has someone arriving or departing, or both.

Because I already have the PHP programming to determine the condition for a specific date as it relates to a room and external variable seems the most logical and simple.

For instance, these are the cases for room #3:

If has Arriving guest I can set the variable to “3a”
If there is a Departing guest set variable to “3d”
If the room is occupied but not departing or arriving then variable value would be simple “3”

Lastly if there is a guest Departing and a new guest Arriving the variable would be set to “3b” (for both).

Then in Hype I have the elements set to Display : Hidden in the Element tab

I’m expecting a Hype function like this should work where it initializes the var and then does a Conditional comparison:

var = unit3;
//unit3 = Document.getElementById('unit3').value;
unit3 = '3a';
alert (unit3);
if (unit3 = '3') {
hypeDocument.getElementById('u3').style.visibility = "visible";
} elseif (unit3 = '3a') {
hypeDocument.getElementById('u3a').style.visibility = "visible";
} elseif (unit3 = '3d') {
hypeDocument.getElementById('u3d').style.visibility = "visible";
} elseif (unit3 = '3b') {
hypeDocument.getElementById('u3a').style.visibility = "visible";
hypeDocument.getElementById('u3d').style.visibility = "visible";
}

But I don’t understand how to populate the variable “unit3” from a source outside Hype. Any suggestions or examples to get me going in the best methods direction?

todaysBookings.hype 2.zip (41.1 KB)

[Burndog (Steve)]

I wondered if document.getElementById within Hype would have global access to the html document (DOM)?

But this does not seem to work. I can set the value and then in a simple Javascript Alert to present the value, but not in the hype document
Working example

Is there some other way to pull the value from a hidden input <input type="hidden" value="3d" id="unit3"> and have the Hype doc use that value in it's internal function?

[Photics]

@Burndog

But I don’t understand how to populate the variable “unit3” from a source outside Hype. Any suggestions or examples to get me going in the best methods direction?

Maybe Local Storage would work?
...or perhaps... window.unit = 3a

If the PHP and Hype project are running on the same domain, maybe that would work. At least, that's what I would try.

[MarkHunte]

Can you clarify,

Where is the data being pulled from.
Are you saying you are placing your hype into an existing parent doc that already has the data.
If so how is that stored in its DOM or /and called to.

[MarkHunte]

My questions above still need some answering in regard of how the parent page stores and accesses the data
But Just had a look at your code. To be honest, it's a mess and not valid Javascript.
This I think is why you cannot access the data from the parent page.

The corrected code should be something like this. (I have not changed the logic, just corrected the syntax & since we are looking for "3d" not "u3d" as the value you put in that input, changed that.)

if ( hypeDocument.getElementById('u3').style.display != 'none') {
	hypeDocument.getElementById('u3').style.display = "none";
}  	
 
 unit3 = document.getElementById('unit3').value;
	console.log(unit3)

if (unit3 == '3') {
hypeDocument.getElementById('3').style.display= "block";
} else if (unit3 =='u3a') {
hypeDocument.getElementById('3a').style.display = "block";
} else if (unit3 == '3d') {
hypeDocument.getElementById('u3d').style.display = "block";
} else if (unit3 == 'u3b') {
hypeDocument.getElementById('u3a').style.display = "block";
hypeDocument.getElementById('u3d').style.display = "block";
}

[Burndog (Steve)]

Mark,
Thanks for looking at this and helping...

The data is pulled from a MySQL db. Since there are multiple conditions for a day, such as some arriving, departing or continuing their stay, the logic is best suited to be managed in PHP.

The page outputs an array of dates used in the calendar visuals and for intersect queries (used to flag rooms full conditions). This same logic allow me to create the cases needed to know the “days” state. It also allows populating / creating any needed elements used for the Hype doc to read. Hidden type inputs seem like a good choice but I could populate whatever is “best practice” for reading into Hype.

[Burndog (Steve)]

General question: when working with hype functions and an elements visibility, we don’t have the means to flip an element that is hidden or visible via Hype’s GUI? If this is true, we have to set the visibility via CSS “display” (style) of either block or none first, then use the function to manage the elements visibility..?

[MarkHunte]

Yes, you do...

To note,

A hype element inherits it's display from a css that is created by hype.
It does not have it's own inline display css.

This is why you will see I do not check for "block" in the code I changed above.

if ( hypeDocument.getElementById('u3').style.display != 'none') {

All I am actually doing in this case is saying, if you are not already "none" then become "none"
The element does not have a display property it's self so it will be added as "none" and the browser will work with that.

If you use javascript to change the property, then it will be added inline, which will overide the other css.

Using the GUI/ Timeline Keyframe action on the property, will use the hype css.

This example showthe values when on scene load, a function that hides an element and a when Timeline keyframe action shows it

Display.hype.zip (31.1 KB)

It also shows the change going on in the Elements HTML.

---

---