Working on developing a slideout menu for my website using jQuery. It functions perfectly in Chrome, but encountering issues in Internet Explorer (IE11). Extensive search hasn't provided a solution yet. Seeking assistance and any help would be highly valued.
@charset "utf-8";
.navdiv{
bottom:0px;
top:0px;
border-right: 50px solid #3184a1;
wdith:1000px;
position:fixed;
left:-1040px;
background-color:#67b5d1;
...
<ul></ul>
</div>
Hey there! I took your original code and created a simple CodePen for you. The animation is now triggered by a click toggle with a CSS transition effect. When the menu icon is clicked, the navigation panel slides in from the left (absolute position left changes from -300px to 0) and vice versa:
$('.menu-icon').click(function(){
$('.navdiv').toggleClass('open');
});.relative {
position: relative;
}
.navdiv{
bottom: 0px;
top:0px;
border-right: 50px solid #3184a1;
width: 300px;
position: absolute;
left: -300px;
background-color:#67b5d1;
box-shadow: 4px 0 5px rgba(0,0,0,0.2);
z-index: 0;
transition: .3s all ease-in-out;
color: black;
}
.navdiv.open {
left: 0px;
}
.navdiv:after
{
position: absolute;
content: ' ';
width: 0;
height: 0;
right: -70px;
top: 50%;
border-width: 15px 10px;
border-style: solid;
border-color: transparent transparent transparent #3184a1;
}
.menu-icon {
position: absolute;
top: 15px;
left: 8px;
z-index: 9999;
cursor: pointer;
}
ul {
position: absolute;
top: 50px;
left: 15px;
z-index: 9999;
color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img class="menu-icon" src="http://placehold.it/30x30">
<div class="navdiv">
<div class="relative">
<ul>
<li>There's something here</li>
<li>There's something here</li>
<li>There's something here</li>
<li>There's something here</li>
<li>There's something here</li>
<li>There's something here</li>
</ul>
</div>
</div>I have created a function to call JSON data, but it's not working. Any suggestions on how to properly call it? function fetchCompanyExpensesType(elementId){ $.ajax({ url: "../../modal/get_companyexpenses_type.php", dataType: ...
I've encountered an issue with a form that contains potential errors defined in PHP. To dynamically change the form action based on the presence of errors, I have incorporated JavaScript into the process. The PHP error variable, $errors, has been conv ...
I am currently working on implementing Google Sign In within my Angular4 app, but I have run into an unusual issue with routing after using router.navigate() in the Google Sign In callback function. To help illustrate this issue, I have created a sample d ...
I am facing a challenge with my parent controller and its children controllers, as I want them all to share the data fetched from an Api service. Controllers: var app = angular.module('mymodule',[]); app.controller('main', ['$scop ...
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html lang="en"> <head> <title>Unique Prints</title> <meta charset="utf-8"> <meta name="viewport" conte ...
Hey there, I've successfully used jQuery to dynamically generate a textbox. Now, I am facing an issue where I need to retrieve the value entered in the textbox using an AJAX function and then pass that value to another PHP file. When I type something ...
I am currently working with a WordPress twenty eleven theme and I am trying to adjust the size of my headings. Specifically, when I enclose my headings in h1 and h2 tags like so: <h1>My h1 heading </h1> <h2> My h2 heading </h2> The ...
In my data structure, I have an array that maps user levels to the minimum points required for each level. Here's how it looks: $userLevels = array(0 => 0, 1 => 400, 2 => 800); The keys represent user levels and the values represent the min ...
Hey there! I'm currently diving into the world of responsive design and I'm attempting to create a navigation bar that transforms into a menu when viewed on a mobile device or phone. Everything seems to be working fine, except that not all the na ...
My goal is to horizontally align this SVG within its container, which could be any div, body, or other element. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1250 190" preserveAspectRatio="xMidYMid slice" class="svg-content"> &l ...
My code and the package.json are provided below. I have reviewed similar issues, but the error codes I encountered differ from mine. How can I prevent crashing and successfully run the app? The goal is to have a local site that opens a home page allowing ...
My JSP form code: <form id="emailForm" data-role="form"> <input type="text" class="form-control" id="name" name="name" placeholder="Enter full name.."> <input type="submit" id="emailSubmit" name="emailSubmit" class="btn btn-default ...
Utilizing Angular 4, I am developing a frontend application for a specific project. The interface features a table with three rows that need to be filled with data from an external source. https://i.stack.imgur.com/Dg576.png Upon clicking the "aggiungi p ...
In my Django project, I am working on a simple multiplayer system where I need to update the isCurrentlyActive value in a user-related model automatically and then log them out. I tried using middleware following a solution from this post, which works well ...
Here is my JavaScript snippet: var iframe = document.getElementById('pltc'); iframe.contentWindow.document.open('text/htmlreplace'); iframe.contentWindow.document.write('<input type="checkbox" name="tc0">Yes<input type="c ...
I'm struggling to clearly articulate my problem. Currently, I have a function that retrieves values from a database using ajax and then dynamically adds each result as a row in a table. This allows users to edit or delete any row as needed. I'm ...
I have created a cloud function that listens for deletions from the firebase realtime database. It works perfectly when there is only one deletion -- the console confirms the removal of that item. However, I noticed that if multiple deletes happen simulta ...
Is it possible to customize the CSS for Scala Helpers and remove certain text from the textfield? @inputText(advForm("weeknr")) @inputText(advForm("jaar")) @inputText(advForm("datum")) --------------------EDIT 1------------------ After applying my own ...
I am new to using JavaScript Speech Recognition and decided to work with the Annyang library. My goal is to automatically trigger the "show date" button when the user says 'hello', without actually clicking the button. However, I've been fac ...
I am attempting to set up an automatic SMS system that sends a reminder 24 hours before our residents' appointments. My challenge lies in extracting the date and time from the datetime row in my MySQL database. While I could create an input field, my ...