Steps for displaying a website within a specific Div using HTML

I'm trying to set up a website to open within a specific <div> tag, like the example shown in this link: Responsive. Can anyone spot what I'm doing incorrectly?

<html>
<head>
  <script>
   function mobile320()
    {
     window.location.assign("http://www.idevtechnolabs.com")
    }
  </script>

<style type="text/css">
 body{
  margin: 0px auto;
  padding: 0px;
  background: #06855a;
  text-align: center;
 }

.browser1{
  display: inline-block;
  position: relative;
  width: 320px !important;
  height: 480px !important;
  background: #efefef;
 }
</style>
</head>

 <body>
   <input type="button" value="Load new document" onclick="mobile360()" />
   <div class="browser1"> </div>
 </body>
</html>

Answer №1

This is definitely not a div element, it's actually an iframe:

<iframe src="http://www.google.com"></iframe>

Answer №2

Embed an iframe within the container and direct it to the intended website,

Alternatively, perform an HTTP GET request and update the inner content of the specified div with the received response.

Answer №3

Revise your code like so:

function updateBrowser() {
    document.querySelector(".browser1").setAttribute("src", "http://www.idevtechnolabs.com");
}

...and update the div element like this...

<iframe class="browser1"></iframe>

Check out a live demonstration here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Update to the viewport meta tag in iOS 7

Anyone experiencing problems with the viewport tag after updating to iOS7? I've noticed a white margin on the right side of some sites. Adjusting the initial scale to 0.1 fixed it for iPhone but made it tiny on iPad 3, which is expected due to the low ...

Error in React Bootstrap: ReferenceError - 'openModal' is not defined

Whenever the button is clicked, my intention is for a modal to open. I have written the code for it, but I'm encountering errors that I can't seem to resolve. Here's the snippet of my code: import React from "react"; import { M ...

Issue encountered when attempting to develop a countdown timer using Typescript

I am currently working on a countdown timer using Typescript that includes setting an alarm. I have managed to receive input from the time attribute, converted it using .getTime(), subtracted the current .getTime(), and displayed the result in the consol ...

The load method in MVC jQuery is not being properly triggered within the $(document).ready function

Currently working on an MVC5 Application.. In my project, I am trying to render two partial views by calling a controller method from $(document).ready of the main view. However, one of the methods never gets called. Below is a snippet of my view: < ...

Navigate JSON Object - Prior Action

I am looking for a solution related to the following question/answer: How can I cycle through JSON objects one by one in AngularJS on click I need help with a function that displays the previous item from a JSON object. When the first item is selected, c ...

Tips for preventing the bootstrap modal from disappearing during auto postback in asp.net

I am currently using vb.net in my asp.net project along with Bootstrap 4. Within a modal, I have two dropdown lists. The goal is for the second list to be sorted based on the user's selection from the first list. However, I encountered an issue where ...

Implement a unique feature for specific days using jQuery UI Datepicker with a customized class

Looking to highlight a range of days horizontally in jQuery UI Datepicker with the multiselect plugin. To achieve this, I am utilizing the :before and :after pseudoelements of the a tags. .ui-state-highlight a:before, .ui-state-highlight a:after { con ...

Sorting buttons using JQuery UI Buttonset

Experimenting with combining jQuery sortable interaction and the buttonset widget to create a unique sortable button set has led me to this jfiddle: http://jsfiddle.net/HK7rX/3/. The initial approach involved applying both buttonset and sortable to the sa ...

Utilizing HTML and CSS to Position Text Adjacent to the Initial and Final Elements in a Vertical List

Exploring a simple number scale ranging from 1 to 10, I experimented with different ways to represent it. Here's my attempt: <div class="rate-container"> <p class="first">Extremely Unlikely</p> <a class=" ...

Issues with Jquery Autocomplete feature when using an Input Box fetched through Ajax requests

When a user selects an option from the drop-down list, an input box is dynamically added to the page using AJAX. document.getElementById("input_box").innerHTML ="<input id='ProjectName'/>"; However, there seems to be an issue with jQuery ...

Non-responsive Click Event on Dynamically Created Div Class

I am facing some uncertainty in approaching this problem. In the HTML, I have created buttons with additional data attributes. These buttons are assigned a class name of roleBtn. When clicked, they trigger the jQuery function called roleBtnClicked, which ...

Fetching response headers object in redux using React.js

Currently, I am using Redux in React.js to fetch the most starred repositories from the past 30 days. However, I now want to implement pagination using the headers provided by the GitHub API. How can I modify my code to extract the headers from the respons ...

Creating a Future Prediction Graph with ECharts

I am looking to create a forecast chart that includes both Actual values (presented as a line chart) and projected values (displayed as a dotted chart). An example of what I have in mind can be seen here, created using Excel: Although I couldn't loca ...

Issue found in React Js test - TypeError: source.on does not exist as a function

I'm encountering an issue with my post request using multipart/form-data. Everything runs smoothly, except for the tests which are failing. When running the tests, I encounter an error message: TypeError: source.on is not a function. This is the code ...

Guide to implementing a JQuery datepicker in a basic Rails application

Being a beginner in Ruby On Rails and web programming, I am transitioning from a traditional desktop programming background. While I have created a few simple rails applications before, this is my first attempt at using Rails3 and integrating jQuery. I am ...

What is the best way to ensure that cleanup is always executed at the conclusion of a function

Imagine a scenario where I have the following function (psuedo-code) : function Foo() { let varThatNeedsCleanup = //something if(condition1) { return Error1; } if(condition2) { return Error2; } if(condition3) { return Error3; ...

Struggling with getting the tabbed slider carousel to function properly in Bootstrap 4?

I attempted to incorporate this code snippet: The only modification I made was using these imports: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootst ...

Combine several elements in a single jQuery scrollreveal function

I am currently working on a webpage that utilizes the jQuery library plugin scrollreveal to gradually reveal different html elements when the page loads. The functionality of the code is working correctly at the moment, but I have noticed that there is a d ...

Several problems with CSS regarding DIV height set to 100% and the content inside

I'm facing a bit of a puzzle here. I have a div that spans the full height of the browser, with a background set to 100% size and image content contained in two inline divs that are vertically aligned in the middle. In one of these divs, the image is ...

Live tweet moderation made easy with the Twitter widget

Currently in search of a widget, jQuery plugin, hosted service, or equivalent that can be easily integrated into an HTML page. This tool should display and automatically update live tweets featuring a specific hashtag, only from designated accounts set by ...