Toggle sideBar within an iFrame by implementing Media Queries

I have implemented media queries in my code to hide the .sideBar when the screen resolution is less than 768px, showing only the .main section.

@media (max-width: 768px) {
    .sideBar {
        display: none !important;
    }
}

Now, I want to add a hamburger icon that will toggle open/close the .sideBar when the screen resolution is like this.

Can anyone help me with the code for achieving this?

If there are any tutorials related to this topic, please provide the links.

Find attached the original code snippet:

/* Copyright (c) myEd (made by students, for students.) 2018. */

body { /* General Body Properties */
    font-family: Trebuchet MS, Georgia, Helvetica, sans-serif;
    margin: 0;
    overflow: hidden;
}
...

Thank you, Tom

htmlcss

Answer №1

It seems like I found exactly what you were searching for. To provide a clearer perspective, I utilized the google map iframe and enclosed it within a div. Subsequently, I enabled the toggling of the wrapper upon clicking the icon.

If you want to view the code, you can access it on codepen

$(document).ready(function() {
  $('.mobile-menu-icon i.open').click(function() {
    $('.sidebar-wrapper').fadeIn();
    $(this).hide();
    $('.mobile-menu-icon i.close').fadeIn();
  });

  $('.mobile-menu-icon i.close').click(function() {
    $('.sidebar-wrapper').fadeOut();
    $(this).hide();
    $('.mobile-menu-icon i.open').fadeIn();
  });
});
.mobile-menu-icon i.close {
  display: none;
}

@media (min-width:768px) {
  .mobile-menu-icon {
    display: none;
  }
}

@media (max-width:767px) {
  .mobile-menu-icon {
    display: block;
  }
  .sidebar-wrapper {
    display: none;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="sideBar">
  <!-- sideBar featuring Profile, myEd News and directory -->
  <div class="mobile-menu-icon">
    <i class="fa fa-bars open" aria-hidden="true"></i>
    <i class="fa fa-times close" aria-hidden="true"></i>
  </div>
  <div class="sidebar-wrapper">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15775.879464660959!2d81.17930883590694!3d8.694411361230227!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3afbbfb5c9304551%3A0xc6d99d1084095189!2sNilaveli!5e0!3m2!1sen!2slk!4v1542627461123"
      width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
    <!-- myEd News -->
  </div>
</div>

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

Customize CKEditor by automatically changing the font family when the page is loaded

How can I change the font-family of CKEditor to Meiryo based on a JavaScript boolean? I attempted this code in my custom JS within an if condition, but it did not successfully change the font-family: config.font_style = { element : 'span&apo ...

javascripthtmlcssfontsckeditor

Setting the width to auto, height to 100, and using overflow hidden does not produce the desired result

In my design, I have two sets of images displayed below: https://i.sstatic.net/pQytw.jpg Both sets of images have the exact same code. The only difference between the images in the first and second set is their dimensions. I aim to make all image blocks ...

htmlcssng-bootstrap

Switching the background image dynamically in Vue.js upon page access

My goal is to update the 'background-image' when the page is accessed. export default { created () { document.getElementsByTagName('html')[0].style.background = "url('../assets/background-blur.png') center" } } //Logi ...

javascriptcssvue.js

What is the best method for locating the innermost element of an HTML tree that has a specific class assigned

I am working on a project that involves a menu system. One of the features I am implementing is that when a tree within the menu is opened, it receives the "active" class. My goal now is to dynamically retrieve the deepest sub-menu within this structure ...

javascriptjqueryhtml

I'm having trouble getting my PrimeNG Calendar component to line up correctly

::ng-deep p-calendar.calendar-control > span > input.p-inputtext { border: 1px solid black; background: #eeeeee; text-align: center !important; } The content is not properly centered. <p-calendar dateFormat="mm/dd/yy&qu ...

cssangularprimengng-deep

What is the best way to determine the position of an element with text content

Currently facing an issue with positioning in my project. Attached is a snapshot of my desired layout. I've tried creating a starburst effect and adding text using this code: jsfiddle link, but I'm struggling to position the elements correctly ...

htmlcss

Incorporate dynamic animations into text wrapping using React

Currently, I am in the process of learning React and have successfully created a flexbox with 6 child containers using the wrap property. Now, I am looking to add animation when the containers wrap onto a new line. I attempted to add a transition animatio ...

javascriptcssreactjsanimationcomponents

Flex-boxes are set inside a fixed-positioned div in this chat web application

I am currently working on a chat web application that has a unique bottom bar layout. The bottom bar consists of a button on the left, a text entry field in the center, and another button on the right: <div id="bottom-bar"> <div class=" ...

htmlcssflexbox

Incorporate an onclick event to the elements within the array

I'm currently working on iterating over an array and adding an onclick event to each element. My goal is to be able to click on each div and have them log their values in the console. However, I am facing a challenge in applying the onclick event to e ...

javascripthtmlcss

What is the best way to dynamically adjust the height of an iframe based on its changing content

My webpage contains an iframe that loads content dynamically, and I want to center it on the page based on its height. The issue I'm facing is that while my code works well for increasing content heights, it fails to recognize when the content size de ...

javascriptjqueryhtmlcsscss-position

Ways to incorporate padding into md-card using Angular 2 material

Need assistance with adding padding to md-card in angular2 material. I am using md-card to display my product list but struggling to add padding on them. Here's what I have tried: product.component.html : <p> Product List </p> <div ...

htmlcssangularresponsive-designangular-material2

`Is it possible to animate the rotation of an image within an input control?`

After coming across this helpful answer, I successfully added a rotating GIF image as an icon inside an INPUT control on its right side. Simply applying the "busy" class to my control did the trick, and now it looks like it's in progress. input.busy { ...

cssangularanimationpseudo-class

What is the best way to vertically align an InputLabel within a MUI Grid item?

I'm trying to vertically center the InputLabel inside a MUI Grid item. Here's what I've attempted: import { FormControl, Grid, Input, InputLabel, TextField } from "@mui/material"; export default function App() ...

javascriptcssreactjsmaterial-ui

The left and right arrows maintain their visibility even when they are outside of the image

I am a beginner in the world of web development and I am trying to implement left and right navigation for images using arrows. My goal is to have the arrows fade in when the mouse hovers over the image and fade out when it's moved away. However, I am ...

javascriptjqueryhtmlcss

Switching over from an external style sheet to inline elements can be tricky, especially when it comes to integrating "dropdown" styles properly

I successfully created a stylish menu using a specific style sheet, but now I'm facing issues when trying to incorporate this menu into web pages with different style requirements. Realizing that loading the style sheet onto these new pages wreaks hav ...

htmlcssinlinestylesheet

Tips for redirecting to the index page instead of the login form after pressing the back button on the navigation

Hey everyone! I've been struggling with a problem for the past 4 hours and could really use some help. After logging in, the page redirects to a certain page, but when I press the back button in my browser, I want it to redirect back to that specific ...

phphtml

Search Result Causing Navbar to Break in Bootstrap Framework

While working on implementing the search functionality with AJAX and PHP, I encountered an issue where displaying the search results breaks the navbar layout. https://i.sstatic.net/FctpA.png this is the navigation bar code <nav class="navbar ...

phphtmlcssajaxtwitter-bootstrap

The pictures in a <div> tag are not showing up

Functionality: I have set up 2 different <div> elements with unique IDs. Each of these <div> elements will make an ajax call to fetch a specific set of images for display. To summarize, both <div> elements are invoking the same ajax met ...

javascriptjqueryhtmlcssajax

Creating a webpage that seamlessly scrolls and dynamically loads elements

Currently, I am working on a dynamic website that loads new elements as you scroll down the page. Here is an example of the HTML code: <div>some elements here</div> <div id="page2"></div> And this is the JavaScript code: var dis ...

javascripthtmlcss

Burger menu floating above container block element

I have set up a bootstrap container with the following styling: .container { margin-top: 12em; font-family: 'Amatic SC', cursive; border-bottom: 1px solid; border-color: #800000; } The purpose behind this is to have my navigatio ...

csscss-float