[PLUGIN] HTML | iFrame

Post your completed addons to share with the community

Post » Fri Aug 18, 2017 3:44 pm

This site can’t be reached
dl.dropbox.com took too long to respond.
B
250
S
39
G
15
Posts: 1,953
Reputation: 40,623

Post » Mon Aug 21, 2017 6:02 pm

[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 :D

EDIT: I tried with:
Code: Select all
Browser -> Execute Javascript -> "var str = document.getElementById(""myID""); str.outerHTML = str.outerHTML.replace(""width: 100%;"",""width: 15%;"");"
but the transition doen't trigger either (the width changes from 100% to 15% but without any transition) :cry:

EDIT 2: Solved. The transition triggers when the class is changed
Code: Select all
"document.getElementById(""myID"").className = ""newClass"";"
Last edited by ChesVCF on Thu Aug 31, 2017 4:18 pm, edited 3 times in total.
B
20
S
6
Posts: 146
Reputation: 1,672

Post » Mon Aug 28, 2017 2:41 pm

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.
B
4
S
1
Posts: 41
Reputation: 432

Post » Mon Aug 28, 2017 5:13 pm

@christ59
I think we have more or less the same problem. Try this:
On start of Layout -> HTML -> Set HTML to:
Code: Select all
"<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>"


and run it on Chrome. Hit F12 and select your HTML Plugin. Go to the div that is inside the Plugin and change the opacity from 100 to 0 (inside the style 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.
B
20
S
6
Posts: 146
Reputation: 1,672

Post » Tue Aug 29, 2017 8:59 am

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 :D
But being able to use it directly in Construct without having to do CSS and modify the xml would be great!
B
4
S
1
Posts: 41
Reputation: 432

Post » Thu Aug 31, 2017 4:58 pm

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.
B
20
S
6
Posts: 146
Reputation: 1,672

Post » Sat Sep 02, 2017 7:27 pm

Sorry for being late.

@ChesVCF
Image
Image

download
Bitcoin Wallet: 1GCRqZExcP6svMdKGpCaRH4A8QAZtSjXxu
B
43
S
17
Posts: 176
Reputation: 3,437

Post » Sat Sep 02, 2017 7:32 pm

@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 :lol:
Bitcoin Wallet: 1GCRqZExcP6svMdKGpCaRH4A8QAZtSjXxu
B
43
S
17
Posts: 176
Reputation: 3,437

Post » Sat Sep 02, 2017 7:46 pm

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
Bitcoin Wallet: 1GCRqZExcP6svMdKGpCaRH4A8QAZtSjXxu
B
43
S
17
Posts: 176
Reputation: 3,437

Post » Tue Sep 05, 2017 3:31 pm

Feature suggestion: get HTML element by ID/class/type (condition), then can set/append HTML inside, or remove HTML elements.
Liked something I say?
Tip. My Bitcoin address: 1PLaeKmXQ8vEdGGJqXMq3KyB8hxeddxeSv
B
24
S
7
G
4
Posts: 326
Reputation: 3,878

PreviousNext

Return to Completed Addons

Who is online

Users browsing this forum: No registered users and 2 guests