How to make an iframe within a form have multiples iframe without div tag used?

Question

0.00/5 (No votes)

See more:

I have a problem, i created 2 iframes and want to divide them across each other than being seperated. Any idea how to do this or should i use frameset to achieve such. My logic is below and stuck, yet want to accomodate my switch button underneath my iframe(button_state).

What I have tried:

HTML

<pre>  <!---iframes for both temp, illuminance and button-state.
  --->
  <div class = "iframe-container">
  <iframe  width="650" height="180" style="border: 2px solid #cccccc;" src="https://thingspeak.com/channels/929272/charts/1?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=60&type=line&update=15">
  </iframe>
  </div>
   <br/>
  <div class = "iframe-container">
  <iframe  width="650" height="180" style="border: 2px solid #cccccc;" src="https://thingspeak.com/channels/929272/charts/2?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=60&type=line&update=15">
  </iframe>
  </div>
   <br/>
  <div class = "iframe-container">
  <iframe width="650" height="180" style="border: 2px solid #cccccc;" src="https://thingspeak.com/channels/929272/charts/8?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=60&type=line&update=15">
  </iframe>
  </div>
   <!----Toggle button for switching On/Off when is clicked.
  ---->
  <div class = "wrapper" align = "center">
  <div class="btn-group" id="toggle_event_editing">
  <button type="button" class="btn btn-danger locked_active">OFF</button>
 <button type="button" class="btn btn-success unlocked_inactive">ON</button>
</div> 
<div class="alert alert-info" id="switch_status">Switched off.</div>
  </div>
 <br/>

Posted 8-Jan-20 23:31pm

gcogco10

Updated 9-Jan-20 21:13pm

Add a Solution

Comments

ZurdoDev 9-Jan-20 7:45am

I don't really understand your question; however, using divs is a great way to be able to organize and place items in your page layout.

gcogco10 9-Jan-20 7:50am

@ZurdoDev, i want to create two iframe within or side by side(left and right). Any idea how to achieve this?

2 solutions

Solution 1

hello, from the tags i can see you are using bootstrap.
you can use rows and cols like the example below.
Also please have a look at bootstrap grid system it will help you alot:
Grid system · Bootstrap[^]

Example:

<div class="row">
  <div class="col-md-6">
  <div class = "iframe-container">
  <iframe  width="100%" height="180" style="border: 2px solid #cccccc;" src="https://thingspeak.com/channels/929272/charts/1?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=60&type=line&update=15">
  </iframe>
  </div>
</div>
   <div class="col-md-6">
  <div class = "iframe-container">
  <iframe  width="100%" height="180" style="border: 2px solid #cccccc;" src="https://thingspeak.com/channels/929272/charts/2?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=60&type=line&update=15">
  </iframe>
  </div>
  </div>
</div>
<div class="row">
  <div class="col-md-12"> 
    <div class="row">
     <div class="col-md-12">
      <div class = "iframe-container">
        <iframe width="100%" height="180" style="border: 2px solid #cccccc;" src="https://thingspeak.com/channels/929272/charts/8?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=60&type=line&update=15"></iframe>      
      </div>
     </div>
  </div>
    <div class="row">
     <div class="col-md-1 offset-md-6">
       <div class = "wrapper" align = "center">
        <div class="btn-group" id="toggle_event_editing">
          <button type="button" class="btn btn-danger locked_active">OFF</button>
          <button type="button" class="btn btn-success unlocked_inactive">ON</button>
        </div> 
        <div class="alert alert-info" id="switch_status">Switched off.</div>
      </div>
     </div>
  </div>
  </div>
</div>

Posted 9-Jan-20 3:34am

tninis

Updated 9-Jan-20 21:11pm

v4

Comments

gcogco10 10-Jan-20 0:55am

I have made the attempt but i could not successed well. Here is my logic, im using last iframe(keen to achieve this one) as i want my button to be below it or within the iframe

OFF
ON

Switched off.

tninis 10-Jan-20 2:34am

Hello, can you show me what exactly you want to achieve ? Can you draw that ? Cause I tested on codepen and the button where under the iframes

gcogco10 10-Jan-20 2:37am

Ok what i want to achieve, is i want my last iframe to below than those two. inside that iframe my switch button should be within that iframe. I hope i am clear.

tninis 10-Jan-20 3:14am

i have updated the solution please check the updated code

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

gcogco10 · Accepted Answer · 2020-01-09T21:14:00

<br/>
  <div class="frame-wrap">
   <iframe src="https://thingspeak.com/channels/929272/charts/8?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=60&type=line&update=15" class="frame2" frameborder="0" scrolling="no" width="100%" height="250">
   </iframe>
 <!----Toggle button for switching On/Off when is clicked.
  ---->
  <div class = "wrapper" align = "center">
  <div class="btn-group" id="toggle_event_editing">
  <button type="button" class="btn btn-danger locked_active">OFF</button>
 <button type="button" class="btn btn-success unlocked_inactive">ON</button>
</div> 
<div class="alert alert-info" id="switch_status">Switched off.</div>
  </div>
 <br/>

  .frame2 {
    display: inline-block;
    box-sizing: border-box;
}