hide and show an iframe, html. Please make it noob friendly

[W1ll1aming]

hide and show an iframe, html. Please make it noob friendly

heres my iframe code if its to any help, HTML and CSS:

<div class="frame">
      <iframe src="https://www.vg.no/" style="border:5px #ffffff none;" name="iframes" scrolling="yes" frameborder="1" height="800px" width="700px" allowfullscreen></iframe>
    </div>

.frame {
  margin-top: -850px;
  margin-left: 1200px;
}

any help is very apprichiated

[WWicket]

HTML:

<button onclick="iframeToggle()">Toggle</button>

<div class="frame" id="iframe"> <iframe src="https://www.vg.no/" style="border:5px #ffffff none;" name="iframes" scrolling="yes" frameborder="1" height="800px" width="700px" allowfullscreen></iframe> </div>

 

JS:

function iframeToggle() {
  var iframe = document.getElementById("iframe");
  if (iframe.style.display === "none") {
    iframe.style.display = "block";
  } else {
    iframe.style.display = "none";
  }
}

[WWicket]

Or for better abstraction/reuseability: 

 

HTML:

 

<button onclick="displayToggle('iframe')">Toggle</button>

<div class="frame" id="iframe"> <iframe src="https://www.vg.no/" style="border:5px #ffffff none;" name="iframes" scrolling="yes" frameborder="1" height="800px" width="700px" allowfullscreen></iframe> </div>

 

JS: 

 

function displayToggle(x) {
  x; 
  var target = document.getElementById(x);
  if (target.style.display === "none") {
    target.style.display = "block";
  } else {
    target.style.display = "none";
  }
}

 

[W1ll1aming]

7 minutes ago, WWicket said:

--snippet--

em so my .frame in css only works as a local file now and my python -m http.server 1337 does display the html differently, what the ????

 

????? this is the same file!!! what im so confused, also in the upper screenshoit from localhost the css has stopped working. (im posting here beacuse it went like this after you posted your code (no blame) (thanks for helping) ive tested both codes. got any fixes?

[W1ll1aming]

19 minutes ago, WWicket said:

--snip--

 

so i can post the full html and css but you probably cant find anything wrong since the glitch is with python... i changed to http://127.0.0.1:1337/valgfag/ from  http://localhost:1337/valgfag/ and it works now i am really really confused. 

 

 

 

[WWicket]

It's being caused by a security feature implemented by your brower: (all those CORB errors)

 

"

You can't access an <iframe> with different origin using JavaScript, it would be a huge security flaw if you could do it. For the same-origin policy browsers block scripts trying to access a frame with a different origin.

Origin is considered different if at least one of the following parts of the address isn't maintained:

<protocol>://<hostname>:<port>/path/to/page.html 

Protocol, hostname and port must be the same of your domain, if you want to access a frame

"

 

Maybe try switching the target to a nesting div:

 

<button onclick="displayToggle('iframe')">Toggle</button>
<div id=iframe>
<div class="frame"> <iframe src="https://www.vg.no/" style="border:5px #ffffff none;" name="iframes" scrolling="yes" frameborder="1" height="800px" width="700px" allowfullscreen></iframe> </div> </div>

 

Not sure if that will get around it, but that is what I'd try first.

[W1ll1aming]

2 minutes ago, WWicket said:

--snip--

chrome? thanks for helping im eating rn will test

[WWicket]

1 minute ago, ughiwanthackintosh said:

chrome? thanks for helping im eating rn will test

Yeah. Chrome/ie/firefox... basically all browsers have CORB/CORS blocked by default. I don't work much with js, so didn't think about it. 

[W1ll1aming]

22 hours ago, WWicket said:

Yeah. Chrome/ie/firefox... basically all browsers have CORB/CORS blocked by default. I don't work much with js, so didn't think about it. 

i cant style the button  how can i do this? ive tried

class="button"

tag

[WWicket]

Just a class tag like that should work. Eg.

HTML:

<button class='button' onclick="displayToggle('iframe')">Toggle</button>
<div id=iframe>
<div class="frame"> <iframe src="https://www.vg.no/" style="border:5px #ffffff none;" name="iframes" scrolling="yes" frameborder="1" height="800px" width="700px" allowfullscreen></iframe> </div> </div>

CSS:

.button {
  background-color: #000;
  border: none;
  color: white;
  padding: 20px 40px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
}

JS:

function displayToggle(x) {
  x; 
  var target = document.getElementById(x);
  if (target.style.display === "none") {
    target.style.display = "block";
  } else {
    target.style.display = "none";
  }
}

 

[W1ll1aming]

8 minutes ago, WWicket said:

--snippet--

 

is that the updated code?

 

22 hours ago, WWicket said:

the code where you solved the blocked firefox issue chrome block issue thing

 

[WWicket]

Just now, ughiwanthackintosh said:

is that the updated code?

 

 

Yeah.

[W1ll1aming]

Just now, WWicket said:

Yeah.

nice thank you for being so patient with me

[W1ll1aming]

Im back with pair issues again. Thanks for helping if you do  the first is related the secound isnt.

Please help me!  thanks for any help

(video file below mkv, vlc can play it)

Thanks for helping me if you do once again  

2019-09-26 15-43-51.mkv

also do you recommend starting a new thread? ? ?

[WWicket]

Not sure what issue you were trying to highlight with the video. Alignment?

[W1ll1aming]

18 hours ago, WWicket said:

Not sure what issue you were trying to highlight with the video. Alignment?

that my toolbar does not stretch in other reselutions, 

and that it the text on the toolbar disapears and the text with the clock dissapears as i show the iframe

[WWicket]

Paste the full code and I can show you how to fix it.

You need to do container alignment with flexbox and/or cssgrid and resolution breakpoints (or use a frontend framework like bootstrap to do the same). 

 

[W1ll1aming]

2 hours ago, WWicket said:

--snip--

--snip--  thanks  

index.html style.css

[W1ll1aming]

18 hours ago, ughiwanthackintosh said:

--snip--  thanks  

index.html 2.88 kB · 2 downloads style.css 1.09 kB · 2 downloads

updates? @WWicket

[W1ll1aming]

20 hours ago, WWicket said:

-snip-

 

[W1ll1aming]

23 hours ago, WWicket said:

Paste the full code and I can show you how to fix it.

You need to do container alignment with flexbox and/or cssgrid and resolution breakpoints (or use a frontend framework like bootstrap to do the same). 

 

??

[WWicket]

Not sure exactly what you are going for / how you want things positioned and to wrap, but hopefully this will give you enough of a starting point. Let me know if you have any specific questions. 

 

 

FlexGrid.css FlexGrid.html FlexGrid.js

[W1ll1aming]

1 hour ago, WWicket said:

Not sure exactly what you are going for / how you want things positioned and to wrap, but hopefully this will give you enough of a starting point. Let me know if you have any specific questions. 

 

 

FlexGrid.css 2.2 kB · 0 downloads FlexGrid.html 1.62 kB · 0 downloads FlexGrid.js 1.24 kB · 0 downloads

im currently not with my pc but will test :)

[W1ll1aming]

3 hours ago, WWicket said:

Not sure exactly what you are going for / how you want things positioned and to wrap, but hopefully this will give you enough of a starting point. Let me know if you have any specific questions. 

 

 

FlexGrid.css 2.2 kB · 2 downloads FlexGrid.html 1.62 kB · 2 downloads FlexGrid.js 1.24 kB · 2 downloads

 

 

not really, everything is rather now more broken.

thanks anyway  

but i will explain better, i want the black part of the main-nav to never end, but the buttons stay where they are, i just dont want the main-nav to stop 

*see picture named sapture.png* see how it ends? how can i make that bar last forever?

 

secound issue:

*see picture secound picture and third*

See how the text is there?

 

*see picture see first picture* see how all the text is gone when the iframe is shown?

 

problem with flexbox:

 

see last picture details are added to the picture with arrows and stuff showing whats wrong

 

 

[W1ll1aming]

6 minutes ago, ughiwanthackintosh said:

 

 

not really, everything is rather now more broken.

thanks anyway  

but i will explain better, i want the black part of the main-nav to never end, but the buttons stay where they are, i just dont want the main-nav to stop 

*see picture named sapture.png* see how it ends? how can i make that bar last forever?

 

secound issue:

*see picture secound picture and third*

See how the text is there?

 

*see picture see first picture* see how all the text is gone when the iframe is shown?

 

problem with flexbox:

 

see last picture details are added to the picture with arrows and stuff showing whats wrong

 

 

see picture: why are the buttons so large now they were not supposed to be

thanks for helping me tho