[PLUGIN] HTML | iFrame

This site can’t be reached

dl.dropbox.com took too long to respond.

SOLVED]

Hi Nandynho!

Quick question: In your HTML Plugin, I have a div with the style property "width: 100%;". At a given moment, I want to change its width from 100% to 15% with an animation, so I added "transition: width 1s;" to the div's style properties. Now comes my question: how do I actually change the width property, without using the "Set HTML" action? If I use this action, the transition doesn't trigger, as the div is re-created with the initial property "width: 15%;".

What I want to achieve is the same as hitting F12 in Chrome and manually changing the div's width, which triggers the transition.

Thank you for your help, keep the good work

EDIT: I tried with:

Browser -> Execute Javascript -> "var str = document.getElementById(""myID""); str.outerHTML = str.outerHTML.replace(""width: 100%;"",""width: 15%;"");"[/code:38wldy5s] but the transition doen't trigger either (the width changes from 100% to 15% but without any transition) 

[i]EDIT 2:[/i] Solved. The transition triggers when the class is changed [code:38wldy5s]"document.getElementById(""myID"").className = ""newClass"";"[/code:38wldy5s]

Hello.

Would it be possible to change the opacity? To make a fade for example.

Because at the moment it does not work.

Thank you.

christ59

I think we have more or less the same problem. Try this:

[quote:3pir8mu6]

On start of Layout -> HTML -> Set HTML to:

"<div style='height: 100%; width: 100%; text-align: center; background-color: black; color: white; border-radius: 20%; transition: 1s opacity; opacity: 100;'>
  <h1>I'm going to fade out.</h1>
</div>"[/code:3pir8mu6]


and run it on Chrome. Hit [i]F12[/i] and select your HTML Plugin. Go to the [i]div[/i] that is inside the Plugin and change the [i]opacity[/i] from [i]100[/i] to [i]0[/i] (inside the [i]style[/i] attribute). You will see how it fades out.

The problem is, how do you make this transition trigger from Construct 2? Read my post above and let me now if you manage to do it.

Thanks for your help.

I do this to have a fade.

in .css :

@-webkit-keyframes fadeIn {

from {

opacity: 0;

}

to {

opacity: 1;

}

}

KeyFrames fadeIn {

from {

opacity: 0;

}

to {

opacity: 1;

}

}

.fadeIn {

-webkit-animation-name: fadeIn;

animation-name: fadeIn;

animation-duration: 2s;

}

And in my xml:

class="fadeIn"

And it works

But being able to use it directly in Construct without having to do CSS and modify the xml would be great!

BUG REPORT:

I found a bug that makes the whole Plugin behave inadequately. This happens when you alter anything in the parent div's style properties. I found it out when I tried to remove the "transform: rotate(0deg);" style setting (with the Browser Execute Javascript action), beacuse I have a <button> with a fixed position (I don't want this button to scroll with all the other things) and otherwise it behaved as if it had an absolute position.

You can see the bug in this capx.

Sorry for being late.

ChesVCF

download

AndreasR it's all alright?

Lordshiva1948 please try with 'www'

Plugin - For compatibility error with old projects

christ59 can you provide me with a capx of what you are doing / or what do you want? my english is not very good

[quote:3qimestj]

New version 1.40 (Sep 02, 2017)

• [#] Function C2(): Now triggered for all the plugins in the layout.

Download - For compatibility error with old projects

Feature suggestion: get HTML element by ID/class/type (condition), then can set/append HTML inside, or remove HTML elements.

Another feature suggestion: can control onclick events of elements directly from Construct 2.

Other suggestion: GitHub page for the addon.

I still cann't get how can I execute function inside of js file and get return value.

I added jsfile to HTML object. On C2 function I receive value and put it into text. But when I try execute I get "Inst19" all the time.

DaniellMesquito I'll see it easy at night, I have several things to do now.

fens sorry friend, I forgot to remove the debug before uploading.

Plugin - For compatibility error with old projects

Nandynho, news?