Material-inspired Design Device Compatible DIV slide with JS, JQuery, and CSS

My goal is to achieve something similar to this: Desired Live Website

  1. I am looking for a feature where clicking on the div will slide in content from the right, load an external page inside it, and close when prompted.
  2. The slider div should be device compatible, adjusting to fill half the screen on webpages and full screen on mobile devices. (See screenshot for reference)

So far, I have managed to accomplish the first pointer of sliding in and loading the external page. View Fiddle Demo 

$('#left').on('click',function(){
$('#frame').animate({left:'8'});
`});
$('#close').on('click',function(){
$('#frame').animate({left:'-100%'});});`


JavaScript for loading the external page:

showIframe = function (url) {
document.getElementById('iframetarget').src = url;
document.getElementById('frame').style.display = 'block';}


I am currently stuck on how to make the slider div device compatible as mentioned in the second pointer.
Here is the complete code fiddle: View Full Demo
Feel free to suggest a new CSS structure for fluid width adjustment of the slide-in.

Any assistance would be greatly appreciated


javascriptjquerycssfluid-layoutmaterial-design

Answer №1

To ensure proper display on smaller screens, include a media query specific to #frame

@media (max-device-width : 480px) {
    #frame {
        width: 100%;
    }
}

This code will activate the specified styles when the screen size is 480px or smaller. Adjust as needed for different screen widths.

Answer №2

To implement this, apply the CSS property max-width.

width: 100%
max-width: 500px;

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

What is the process for retrieving the text element from a React component when using React.cloneElement?

Can I centralize a translation function for all table header elements? const CustomersTable = () => { var headers=<> <th>Name</th> <th>Age</th> <th>Another text</th> </> ...

javascriptreactjslocaleglobalization

Attempting to store the output of a function in a variable

My current script is designed to verify if the value of a selected element matches the span id. While the function itself functions correctly (verifying object.id via alert), I am encountering issues with variable assignment. When attempting to alert the ...

javascripthtml

A solution for optimizing accessibility by concealing anchor outlines in Internet Explorer and Firefox

Initially, I want to clarify that I acknowledge the fact that removing outlines impairs keyboard navigation. In contrast to Internet Explorer and Firefox, Google Chrome handles this issue by displaying outlines exclusively when the user interacts with the ...

cssinternet-explorerfirefoxfocusaccessibility

Why is it that the window object in JavaScript lacks this key, while the console has it?

let myFunction = function declareFunc() { console.log(this); // window console.log(this.declareFunc); // undefined console.log(declareFunc); // function body } console.log(this) // window myFunction(); I understand that the this keyword in a functio ...

javascriptnode.js

Combine two objects and discard any duplicate keys

I have two objects named original and custom. My goal is to merge the content from custom into original, but only update the keys in original that are also present in the custom object. Here is an example scenario: var original = { coupon: { ...

javascriptnode.js

Every day, I challenge myself to build my skills in react by completing various tasks. Currently, I am facing a particular task that has me stumped. Is there anyone out there who could offer

Objective:- Input: Ask user to enter a number On change: Calculate the square of the number entered by the user Display each calculation as a list in the Document Object Model (DOM) in real-time If Backspace is pressed: Delete the last calculated resul ...

javascriptreactjstypescript

Issue with CSS color gradient transparency

I've successfully implemented a gradient that transitions from transparent to white by using the following CSS code: linear-gradient(to right, transparent, white) If you want to see it in action, click on this link: http://jsfiddle.net/fs8gpha2/ Al ...

csslinear-gradients

I am unable to make changes to the Text Field component in Material-UI

After developing a React App using Material-UI, I decided to create independent Components. Below are the independent components (<PanelDiv/>): render() { return ( <div className="panelDiv-component" style={{display:this.prop ...

javascriptreactjsmaterial-ui

Strangely odd actions from a JavaScript timepiece

After answering a question, I encountered a problem with my JavaScript clock that displays the day, time, and date on three lines. To make sure these lines have the same width, I used the BigText plugin, which works well except for one issue. tday=new A ...

javascriptjqueryhtmlcss

Ways to populate an AngularJS array with text input from HTML

I'm new to AngularJS - attempting to create a simple todo-list application. I'm struggling with how to insert the text value from the input box into the 'todos' array. Here's my code snippet. HTML: <body ng-controller="MainCt ...

javascriptarraysangularjsformsinput

I am interested in redirecting command line output to a file rather than displaying it in the standard

Is it possible to use child-process and spawn in node.js to execute a command and save the output to a file instead of displaying it on the standard output? test.js const expect = require('chai').expect; const { spawn } = require('child_pr ...

javascriptnode.jstestingnpmchild-process

How to Retrieve the Absolute Index of the Parent Column Using jQuery Datatables

I recently developed a custom column filtering plugin for datatables, but I've encountered a minor issue. Within each column footer, I have added text inputs, and now I am trying to capture their indexes on keyup event to use them for filtering. In ...

javascriptjquerydatatables

The conversion of Draft-js JSON to EditorState is not functioning correctly

Recently, I utilized Draft-js to generate blog posts. When a user creates a post, the data is transformed into a string and dispatched to the server for storage. The conversion of draft-js EditorState looked like this: JSON.stringify(convertToRaw(editorSta ...

javascriptreactjsdraftjsreact-draft-wysiwyg

Sending an AJAX associative array to a PHP associative array

I'm currently attempting to transmit form values to PHP utilizing the $.ajax method. Here is the HTML form structure I am working with: <form> <p> <label for="login">User ID:</label> <input type="text" name="login" id ...

phpjqueryajaxarraysassociative

activated by selecting a radio button, with a bootstrap dropdown menu

I'm having trouble triggering the dropdown in Bootstrap by clicking on a radio button. It seems like a simple task, but I've been struggling with it all day. According to Bootstrap documentation, you can activate the dropdown using a hyperlink o ...

javascriptjquerytwitter-bootstrap

Extract data from the Ajax database and automatically hide the "Load More" button when all items

Every time I fetch data from my MySQL database, I retrieve 5 items at once. $query = $pdo->prepare("SELECT * FROM names WHERE id < ? ORDER BY id DESC LIMIT 5"); $query->execute([$_POST["id"]]); while($row = $query -> fetch() ...

javascriptphpjquerymysqlajax

Leverage JQuery's Ajax Load function to load content onto a div that was previously loaded by

In my db_sample_ajax.php, there is a div element: <div class="form_header" id="form_header"> </div> I have used jQuery to load content into this div with the following code: $("#form_header").load('ajax/ajax_form_header.php', {"mem ...

phpjqueryajax

Game Mapping Techniques: Utilizing Spatial Data Structures

In order to efficiently store and retrieve intersecting rectangles, I am currently working on implementing a spatial data structure in JavaScript. My initial approach involves using a Quad Tree to narrow down the search space. However, for dynamic objects ...

javascriptdata-structuresspatial

The scale line on the OpenLayers map displays the same metrics twice, even when the zoom level is different

When using the Openlayers Map scale line in Metric units, a specific zoom rate may be repeated twice during the zoom event, even though the actual zoom-in resolution varies on the map. In the provided link, you can observe that the zoom rates of 5km and ...

javascripttypescriptzoomingopenlayers

"Using Rails remote link to create a standalone 'button' element, not embedded in a line of text or a

In my current project, I am attempting to create an ajax "button" that mimics the functionality of a typical link_to "content", some_path, remote:true. The goal is to have this button swap out images to indicate different statuses when clicked (e.g. on/off ...

jqueryhtmlruby-on-railsajaxbutton