Change inline element style onclick

Hi guys,
In html widget I have this code:

<div style="overflow: hidden; width:171px; height:53px; position: relative;"><iframe src="#" style="border: 0pt none ; left:-625px; top:-587px; position: absolute; width:1422px; height:701px;" scrolling="no"></iframe></div>

I want to change value of iframe style property top:-587px; after first mouse click. How can I do this with Hype?
Thanks for help!

if there is no further nesting you can directly target your iFrame by a class, id, tag , whatever …
if this structure is within a hype-widget, which is a iFrame itself,then have a look over here

I’ve tried to assign id to HTML Widget #widget and write something like this

var widget = hypeDocument.getElementById('widget') var iframe = widget.childNodes[1];

But I don’t know how to change css inline property…could you help me dude?

iFrame.style.anyproperty = ‘yourNewValue’

1 Like

So I assigned to html widget id "widget" and write something like this:

var widget = hypeDocument.getElementById('widget') var iframe = widget.childNodes[1]; iframe.style.top = '-597px';

I assigned this js on onclick events, but why it didn't work?
The code inside the widget is the code I pasted there in my first post

<div style="overflow: hidden; width:171px; height:53px; position: relative;"><iframe src="#" style="border: 0pt none ; left:-625px; top:-587px; position: absolute; width:1422px; height:701px;" scrolling="no"></iframe></div>

Thanks guys!

In your code above the iframe has no children so why are you targeting them.

Give the iframe the ID widget and:

var iframe = hypeDocument.getElementById('widget');

then as Hans said

iframe.style.top = .......

Thanks dude, I’ve tried doing it, but top still the same. I invoke this js on click event but seems do nothing :frowning:

Why are you using a HTML widget and putting another iframe in it?

A HTML widget is a speciel element that already has an iframe in it.

Using the link that Hans has supplied above (again here if you don't want to scroll up)

You will see how you can drill down into a HTML widget to get to the inner elements.

But, really I don't know why you need to have an iframe in an iframe. Gonna make it so laborious drilling down to get to it. Why not use another element? Or just use the HTML widget for what you want.

Can you look the project dude?

hypeP.hype.zip (14.1 KB)

How can I embed external website without using iframe inside html widget?

I’ve tried to embeed this iframe code inside text element with same id …but still the same… the top property on click don’t change…

You can use any element to place an iframe in doesn’t have to be a HTML widget.

Also you can use just a HTML widget and place the url in the Element inspector under specified url.

You need to read the link both I and Hans posted about drilling down. I’m not entirely sure of your logic and what you are trying to achieve.

I just try to move the the content inside iframe after the first mouse click.
I’ve inserted the iframe code right now in text element and i’ve assigned to it id widget.

So the code inside the textbox right now is

<iframe src="#" style="border: 0pt none ; left:-625px; top:-587px; position: absolute; width:1422px; height:701px;" scrolling="no"></iframe>

I want to change top rule of this iframe after the first click, just this!!

I’ve tried right now with

var widget = hypeDocument.getElementById('widget') var iframe = widget.childNodes[1]; iframe.style.top = '-597px';

The first element of my text is my iframe. I’ve invoke this script on mouse click, but top rule still the same…

I hope someone can help me to solve my problem,
Thanks!

Explain (without code) what you are trying to do.

i.e When user clicks … this happens…

Lets see if there isn’t another way to do what it is you’re trying to achieve. I don’t understand why you have an element that has overflow hidden and when trying to click the iframe inside said element you want to change the position by changing the top property. Also the iframe itself has the position of top: -587px; so effectively you want to move it up by 10px. Again, I’m not sure why.

BTW and I’m pretty sure you haven’t read the links we gave you or just don’t understand them but you cannot just access an iframe like other elements.

Also if the iframe (or whatever is in the innerHTML) is bigger than the elements bounds then it takes on the elements events and you cannot run an onclick on an iframe.

Ok dude,
I want when user do first click, the page inside iframe will move 10px up, just this!

I don't have right now the div with overflow hidden, but just this code

<iframe src="#" style="border: 0pt none ; left:-625px; top:-587px; position: absolute; width:1422px; height:701px;" scrolling="no"></iframe>

See my edit above.

If you run your javascript onmouseover it’ll work. If you need a click then you’ll have to use another element and attach the script on mouse click to that element. Or have a transparent element over the top of your iframe element and onclick it moves the iframe and disappears. This will mean 2 clicks though.

hypeP-vDBear.hype.zip (16.2 KB)

1 Like

There are a number of ways that you can go about this. But what everyone is saying is do not put the iframe code inside a widget.

Put the code inside a rect.

( one of the ways)

You can then Give the rect an ID.

Then target the rect by it’s ID and query for its iframe.

Then tell the iframe to change.

One problem you will run into though is that your click will not be on the container rect but on the iframe contents.

a simple counter to this is if you need to click, you can add an element on top of the first rect that takes the click, hide itself, runs the code.

Any future clicks will then be on the iframe content.

element.style.display = "none";

var widget = hypeDocument.getElementById('widget')


 var iframe = widget.querySelector('iframe');  
iframe.style.top = '-597px';

hypeP_vMH1.hype.zip (11.4 KB)

1 Like

Thanks dude! It works!! Thanks to all for support!!