Related questions

How do you search through a spreadsheet data (on the website) while using an IFRAME to direct it to the website?

2018-10-11 19:16 Joshua Klein imported from Stackoverflow

The IFRAME is set and the backend is fine but we are having trouble getting a search bar on the website we are using. We've tried a few different ways but none have worked so far.Here is the IFRAME:

<iframe id="frame" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSxBHuFxDbzN7A5PGfIv5_6anZOexY70erl4Z2QOKunCE1EHpZRCGwxVI3dTu9fUT4lQWzRAir_0_tB/pubhtml?gid=513199022&amp;single=true&amp;widget=true&amp;headers=false&amp;chrome=false">
</iframe>

See also questions close to this topic

  • "required" validation not working in javascript 

    pushData = [];
//+ button when clicked
function myFunction() {
    var custOfficeId = document.getElementById('customOfficeId').value;
    var custOfficeName = $("#customOfficeId option:selected").text();
    var fromDate = document.getElementById('fromDate').value;
    var toDate = document.getElementById('toDate').value;
    var consignmentNo = document.getElementById('consignmentNo').value;
    var selectionName = "A";
    var selectionId = 1;
    var selecOff = {
        custOfficeId,
        custOfficeName,
        fromDate,
        toDate,
        consignmentNo,
        selectionId,
        selectionName
    };
    console.log(selecOff);
    pushData.push(selecOff);
    console.log(pushData);
    populateSelectionCustomTable();
}

function populateSelectionCustomTable() {

    $("#tempTable tbody").html("");
    for (var i = 0; i < pushData.length; i++) {
        var r = pushData[i];
        $("#tempTable tbody")
            .append(
                "<tr>" +
                "<td>" +
                r.custOfficeName +
                "</td><td>" +
                r.fromDate +
                "</td><td>" +
                r.toDate +
                "</td>" +
                "<td>" +
                r.consignmentNo +
                "</td>" +
                "<td>" +
                r.selectionName +
                "</td>" +
                "<td>" +
                "<input id='filter" + i + "' value='Delete' type='button' alt='Delete" +
                i +
                "' class='deleteIcon'/>" +
                "</td></tr></tbody>");
    }

}
    <!DOCTYPE html>
<html>
   <head>
      <title></title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class="form-group row">
         <div class="col-md-4">
            <label>Custom Office</label>
         </div>
         <div class="col-md-2">
            <label>From Date</label>
         </div>
         <div class="col-md-2">
            <label>To Date</label>
         </div>
         <div class="col-md-4">Consignment No</div>
         <div class="col-md-4">
            <select class="form-control" id="customOfficeId" required
               name="customOfficeId" >
               <option value="" disabled selected>Choose</option>
               <option value=1>Office 1</option>
               <option value=2>Office 2</option>
            </select>
         </div>
         <div class="col-md-2">
            <input type="text" class="form-control nepali-calendar ndp-nepali-calendar" id="fromDate" 
               onfocus="showNdpCalendarBox('fromDate')" name="fromDate" required/>
         </div>
         <div class="col-md-2">
            <input type="text" class="form-control nepali-calendar ndp-nepali-calendar" id="toDate"
               name="toDate"  onfocus="showNdpCalendarBox('toDate')" required />
         </div>
         <div class="col-md-3">
            <input type="number" class="form-control" id="consignmentNo"
               required name="consignmentNo">
         </div>
         <div class="col-md-1">
            <button onclick="myFunction()">+</button>
         </div>
      </div>
      <table class="table table-bodered" id="tempTable">
         <thead>
            <th>Custom Office</th>
            <th>From Date</th>
            <th>To Date</th>
            <th>Consignment No</th>
            <th>Selection Name</th>
            <th>Action</th>
         </thead>
         <tbody>
         </tbody>
      </table>
   </body>
</html>

    enter image description here

    I have added the "required" attribute in each of the input field and in select options above in html.But if i even didn't enter any data and click plus button it is getting pushed in table rather it should show me the validation required error. In "select" also i added the required field but the default is getting added in table automatically.How can i make this html5 required validation working here?

  • Having trouble using instance mode

    I am getting errors when I used instance mode in my code. My mini game isn't showing up I am not sure where the error is coming from. It works fine without the instance mode but I need to use the instance mode so that I can reference this code in another file. I'm using this link as a reference. http://p5js.org/examples/instance-mode-instantiation.html 

    let sketch = function(p) {

    let blob;
    let blobs = [];
    let zoom = 1;
    let timer = 20;
    let hits = false;
    let score = 0;

    p.setup = function() {
        p.createCanvas(600, 600);
        blob = new Blob(0, 0, 64);
        for (let i = 0; i < 300; i++) {
            let x = p.random(-p.width,p.width);
            let y = p.random(-p.height,p.height);
            blobs[i] = new Blob(x, y, 15);
        }
    };

    p.draw = function() {
        p.background(0);

        p.translate(width/2, height/2);
        let newzoom = 64 / blob.r;
        p.zoom = p.lerp(zoom, newzoom, 0.1);
        p.scale(zoom);
        p.translate(-blob.pos.x, -blob.pos.y);

        for (var i = blobs.length-1; i >=0; i--) {
            blobs[i].show();
            if (blob.eats(blobs[i])) {
                blobs.splice(i, 1);
            }
        }

        if (frameCount % 60 == 0 && timer > 0) { // if the frameCount is divisible by 60, then a second has passed. it will stop at 0
            p.timer --;
        }

        if (timer == 0 && score >=250) {
            p.text("You Win", 0, 0);
            p.noLoop();
        }

        if (blob.eats){
            p.console.log("hit");
        }
        if (timer == 0 && score <= 250){
            p.text("You Lose", 0, 0);
            p.textSize(200);
            p.noLoop();
        }

        blob.show();
        blob.update();
    };
};
let myp5 = new p5(sketch);
  • chrome extention get large time to open popup

    I am trying to develop my chrome extention but it take large time to open popup when i use iframe in my code.How to open popup fastly.

    <!DOCTYPE html>
<html>
   <body>
      <div >
         <iframe  id="iframeid" class="embed-responsive-item" name="testing" src="my_url" style="
            height: 400px;
            width: 350px;
            border-width:0px;">
         </iframe>   
      </div>
   </body>
</html>
  • IFrame alternative that allows for full height? HTML5 or CSS only

    I've run into an issue with my website. I need to use different stylesheets for elements visible on the same page. I've decided Iframe or something similar is the best option to overcome this. However, it doesn't seem that you can set the height to automatically adjust, and the scrolling attribute is becoming obsolete. I'm thinking of maybe using object or link with Cors, maybe even embed. How would I got about doing this? I'd like to avoid JavaScript.

    I've seen the following threads, however I feel like it should be possible to do without javascript, possibly with CSS or HTML.

    what are iframe alternatives that allow dynamic height? Full Height iframe

    Thank you :)