How to create a link with class="..."?


#1

in an simple html page width javascript, i have a lightbox system.
a text has a link :

<a href="#" class="modal-NOC" data-lightbox-target="#modal-NOC" data-lightbox-modal="true">NOC</a>

i’m doing a hype animation with a button and i’d like to keep this code on the button :

<a href="#" class="modal-NOC" data-lightbox-target="#modal-NOC" data-lightbox-modal="true">NOC</a>

Please, how could i do ?

Thanks a lot


Adding third party javascript to a project
#2

;-( the link doesn’t appear in the topic.
it is :
a href="#" class=“modal-NOC” data-lightbox-target="#modal-NOC" data-lightbox-modal=“true”>NOC</a


(Mark Hunte) #3

This should be possible with JS. I have an example partially written

But with some more info on your setup and what is using the class and how is using it… would be able to help better to target it to your real needs.

Please Post a example Project


#4

Thanks for your help.
At this adress you can find my project :
http://fulldoc.eu/test/emer/blank.html
Near the top banner, you can see the words “Noc, Broadcast, Sites and Transports”. When you click on each word and you can reach to a specific lightbox with a specific message.

i’d like to change this and instead have under, a hype animation with transparent buttons and reach to same specific messages.

i had a look on forum with no succeed.

Thanks for you help

Bertrand


(Mark Hunte) #5

@BirdyHy
Can you actually post the project…?

Select the project in the Finder.
Zip it.

And drop the zip into a post


External Javascript Function
#6

You can find it here :

http://fulldoc.eu/test/emer/Archive.zip
Thanks


(Mark Hunte) #7

Ok this is an answer that I provided to @BirdyHy on the Message system and I am putting here for others to see.

What I have done. Firstly using the link above I had to reconstruct the external page html and includes.
Then embed this Hype in the normal way into it.

( NOTE to all newbies , Please , if you want help with things like this, not everyone will want to go to the trouble of doing the above, so please supply us with all the pieces )

What BirdyHy wanted was a way to trigger modals on the parent page. ( inline popovers). from the Hype scene inside it. These are setup using a javascript plugin called Responsive.js


I have added Hype buttons to the Hype Scene.
Using the Identity Inspector, each button has been given a class which contains the data needed to show the correct Modal.

For example:

The NOC button has a class name.

modal-NOC_Button and the BROADCAST button has modal-BROADCAST_Button

The _Button part is there to avoid any clashes with elements that may already be using the class.
( Note there seems to be an odd issue where IDs do not carry over to the external html DOM. Hence why I use classes)

When the scene loads ( On Scene Load Action) a javascript will append a javascript to the HEAD of the external HTML.

The javascript placed in the head is simply:

function myHypeCall(mod) { $('.' + mod).click(); }

The Hype function code to do this is:

var myHypeCallScript = document.createElement("script");
myHypeCallScript.type = "text/javascript";
myHypeCallScript.innerHTML = "function myHypeCall(mod) { $('.' + mod).click(); }";
$("head").append(myHypeCallScript);

This inserted Javascript is used to click your ( now hidden ) links.

The Hype Buttons are all set to run the same Hype Javascript function.

window.elementID = element.classList[1].split("_")[0];
myHypeCall(window.elementID);

Which simple gets the class name list, selects the one we want and removes the _button part. This leaves us with a string which it will then use as an argument to call the Javascript function we inserted at scene load. The inserted function will simulate clicking your links.

I mentioned that your links are now hidden.

So what you need to do in the External HTML page is just remove the text description for the links.

i.e
The line:

<div class="html-element"><a href="#" id="modal-NOC1" class="modal-NOC" data-lightbox-target="#modal-NOC" data-lightbox-modal="true">NOC</a><BR>

becomes

<div class="html-element"><a href="#" id="modal-NOC1" class="modal-NOC" data-lightbox-target="#modal-NOC" data-lightbox-modal="true"></a><BR>

This will hide them on the page but allow us to access them.


Note about the second way I got this working.
I simply place the <div class="html-element"><a href="#" id="modal-NOC1" class="modal-NOC" data-lightbox-target="#modal-NOC" data-lightbox-modal="true">NOC</a><BR> inside of a buttons innerHTML.

This worked in bring up the Modals but you could not close them.

This again may be to due to scope but don’t dwell on this idea the hack above works.


I will keep looking at this as the responsive js seems to have a javascript API that should allow us to call the modals directly but the documentation is crap…


#8

Thanks a lot for your work. It’s working perfectly.

Here is the Hype animation and the html page with lightbox and modal.

Thanks a lot.

anim-button.zip (2.5 MB)