Say I have a div with class called “box” on a wordpress page, can I embed a hype canvas in that wordpress page and control the "box"div on click?
Any help is appreciated!
Steve
Definitely.
It will be a simply process as long as you embed the Hype div using the ‘div’ method in Wordpress, and not inside of an iframe.
What are you trying to do?
Thanks Daniel,
Just demoing this cool app!
I am going to have a two column layout.
On the left column I will have an accordion from my wp theme.
On the right I will a hype file embedded.
The hype file will consist of a roofing layer system.
Each layer being a button or trigger: when the user clicks or hovers over it will open the corresponding accordion on the left.
How do I add these events on the button and call the css or toggle to do so? Does it need to be a custom event in hype?
Is it as easy as adding this code for example?
<button type="button" onclick="document.getElementById('id1').style.color = 'red'"> Click Me!</button>
If you can give me an example I am sure I can take it from there. I appreciate the support.
Steve
You would select your Hype element that you wish to trigger the action, and then switch to the ‘Action Inspector’ to create a Mouse Click action. There, you would trigger a JavaScript function with the code you want to trigger:
document.getElementById('id1').style.color = 'red'
More on Actions here: https://tumult.com/hype/documentation/#actions
Thanks I will try this, getting excited! Or should I say Hyped!
1 Like
Hi Daniel,
This is the last piece of the project that I am stuck on.
How can I make this code work in hype?
I am using query toggle to hide content in my html.
jQuery(function(){
jQuery('.showSingle').click(function(){
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).attr('target')).show();
});
});
I have tried…
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).attr('target')).show();
In my button function but only the first line seems to function.
Sorry not very good with js but my guess it has something to do with “(this)” can you help?
Please see my project files to illustrate my issue. If you open up demo.html you will see a nav on the left, a hype embed on the right(yellow box) with a button that I want to emulate the buttons on the left. Underneath the hype(yellow box) there are two divs that toggle visible and hidden.
project-example.zip (107.4 KB)
Many thanks again!
It looks like you’re really close. I would get this example setup with your desired styling (without Hype) and then once you have the function setup, you can run it within Hype just as you’re doing. The way the you’re running a JS function in Hype is correct.
So that helped thanks very much. I do have another question. Can I make a custom shape?
I have an image of a few layers of materials and they overlap so I would like to have a "hotspot" that is not a square or circle but a custom shape so that the mouse only interacts with the true shape of the layer. I have tried using an svg but cursor still recognizes it as a square.
I would like the mouse to only interact with the area in side the green line.
The cursor reacts to the square around the red shape.
Edit I found my answer 
So I have hit my next brick wall.
I have managed to get the toggle to work with my Hype buttons and html content on my page. This is great!
My next issue.
I am using SVG art as the button active area. This is functioning great but now I can’t figure out how to toggle the visibility of these SVG buttons. When a layer(button) is selected(active) I would like it to stay in the active state until another layer is clicked but at the same time honour the over and up states as well.
I have tried using timelines and also css opacity with jquery toggle but again my js skills are pretty lame. Although I am learning a lot.
I making the SVG clickable in the DOM so I think it’s best I keep using js rather than mixing in timelines states (I have tried using timeline controls but have had limited success). Unless you disagree?
Is there a very simple way to do this I am sure there is? I have looked extensively and may have come across the answer but have not been able to implement it in the DOM.
Here is my project so far…
hype3.hype.zip (2.5 MB)
Never heard any thing back so I had to change my functionality a bit, still loving this project and will be purchasing Hype Pro for sure. I would be even sweeter if I had a reply to my last question;-)
Sorry, it was on my list to look at, but with the v4 launch there has been a lot of other feedback/questions to get through!
I'd say it depends on how many elements you have. You definitely could do this with timelines. I can't say why it hasn't worked for you without seeing that setup though.
The basic setup I would use is that a mouse down would run two timelines:
- The first would clear all states of all objects back to their "default". This would probably be a relative timeline. This "reset" timeline could be reused in the same manner for all objects.
- The second would animate just the selected object to its active state.
You'd probably want a different element or different properties to show the active state, although I think you could also do active/inactive with relative timelines.
It seems that project doesn't work:
- it does not include jquery
- the click targets of
.targetDivand#div1aren't in the document.
Thank you for the insight on this. The button clicks will interact with another part of my html page that the hype project will be embedded in. I did not include this in the project I posted. With the addition to polygon objects it kinda solved my issues any ways. Thanks for the support, love the app and v4 is even better.
Cheers
1 Like
Hi,
I am using some onLoad actions to set me scene to a state but when the scene loads media breakpoint it resets my scene to that the initial state. Is it possible to remember the state when the media query happens. I have attached my hype file.
hype8.hype.zip (816.8 KB)
Just use a persistent symbol across the layouts.