Hey everyone, I've been trying to implement the solution provided but I seem to be missing something. Can you take a look at my fiddle?
http://jsfiddle.net/cancerian73/Ej5k8/
body {
position: relative;
min-height: 3000px;
margin: 0;
padding: 0;
top: 0;
font-family:'proximanova-regular', sans-serif;
}
Whenever I hover over the top right button, the slide keeps flickering and doesn't work how I want it to, similar to the example on
Is there a way to achieve this using solely CSS?
* { margin: 0; }
#panel {
position: fixed;
background: #444;
color: #fff;
height: 100%;
width: 300px;
right: -300px;
transition: right 0.4s ease-in-out;
-webkit-transition: right 0.4s ease-in-out;
}
#panel:hover {
right: 0px;
}
#panelCaller {
position: absolute;
top: 50px;
right: 300px; /* same as #panel width */
background: #444;
}<div id="panel">
<div id="panelCaller">OPTIONS</div>
<h2>Panel</h2>
<p>Content...</p>
</div>If not, how about utilizing jQuery instead? http://jsfiddle.net/vVSJz/156/
var $pCont = $("#panel-content");
$pCont.width(0);
$("#panel").hover(function(ev){
$pCont.stop().animate({width: ev.type=="mouseenter" ? 500 : 0}, 700);
});
When it comes to handling events in JavaScript, jquery's mouseleave function is a useful tool that can be used alongside the mouseenter function. An example of how you can implement this in your code is shown below:
$("#tab").mouseenter(function (event) {
$('#content').stop(true,true);
$("#tab").stop(true);
event.stopPropagation();
showIfHidden("#content");
});
$('#content').mouseleave(function(){
$("#tab").stop(true,true);
$('#content').stop(true);
hideIfVisible(this);
});
One easy solution is to utilize the jQuery hover function.
Check out the demonstration here: http://jsfiddle.net/vVSJz/154/
$("#panel").hover(function(){
$("#panel-content").animate({width: '600'}, 500);
},function(){
$("#panel-content").animate({width: '30'}, 500);
});
EDITED
To prevent the effect from repeating, simply include .stop() after the last call.
$("#panel").hover(function(){
$("#panel-content").animate({width: '600'}, 500);
},function(){
$("#panel-content").animate({width: '30'}, 500);
$("#panel-content").animate({width: '30'}, 500).stop();
});
View the updated demo here: http://jsfiddle.net/vVSJz/158/
Just made some edits to my response and incorporated a smooth animation, check it out. I realized I was making a mistake.
JavaScript:
$(function () {
$("#panel-content").hide();
$("#panel-tab").mouseenter(function () {
$("#panel-content").show();
$("#panel-content").animate({width:'300px'},'slow');
$(this).addClass("hidden");
});
$("#panel-content").mouseleave(function() {
$(this).animate({width: "1px"}, "slow", function()
{
$("#panel-tab").removeClass( "hidden" );
$(this).hide();
});
});
});
*CSS
.hidden{
display:none;
}
To sum it up, make sure not to forget the mouseleave function. Also, consider tidying up your code by removing unnecessary elements that are not essential.
Currently, I have a small JavaScript program running within an HTML5 canvas and included a HTTP GET request function in my JavaScript code. The function itself is functioning properly as I tested it with multiple examples from the internet, all of which wo ...
My todo list is stored in a MySQL database with columns for todoTitle and todoDate. However, when I display the todoDate on my website, it shows the date decremented by one day. For example, if the date in the database is 2016-12-20, it will show as 2016-1 ...
I want to retrieve data from my child component, which contains a form in a popup. How can I pass all the details to the parent component? Here is the TypeScript file for my parent component: import { Component, OnInit } from '@angular/core' ...
I am currently facing an issue with the note section in my form. Users with permissions can add information to a specific record, including deleting or editing their own notes. However, when I implemented a Jquery Modal Menu for confirming deletions, I enc ...
The white-space property in CSS-3 offers the pre-wrap value, which maintains whitespace and line breaks while wrapping as needed, along with the pre-line value that collapses whitespace but retains line breaks and wraps when necessary. However, there is c ...
I've been struggling to properly wire up my next.js project with SCSS, but no matter what I try, it just won't work. I double-checked my setup for compiling SCSS files, but the error message keeps popping up: /scss/style.scss 1:0 Module parse f ...
My goal is to iterate through the column of my mat-table to identify the rows that have been checked, and then store the data of those rows in an array. <td mat-cell *matCellDef="let row"> <mat-checkbox (click)="$event.stopPropagation()" (c ...
While working on a project, I encountered an issue where I am getting an Access-Control-Allow-Origin error after making a GET request using $.ajax. Despite receiving the expected XML string response from the server, the success function fails to execute du ...
Recently, I developed a Chrome Extension that extracts data from the data-href attribute and applies it to the href attribute from a Google Search. Below is the current implementation: $(document).on("DOMSubtreeModified", function() { var e = $("#sear ...
I am working on a skill chart that dynamically fills when the document loads. I am exploring the possibility of using ScrollMagic to animate the chart filling as the user scrolls down. After trying various combinations of classes and pseudo-classes in the ...
I am facing an issue where the first li element works perfectly when clicked, but for the rest of the elements, I have to click twice to apply the desired styling. Can anyone explain why this behavior is occurring? App.js import React, { Component } from ...
Recently, I've been experimenting with using setInterval in my Javascript code. As a quick test, I attempted to create a live updating clock display. var tim = new Date(); function loadLog(){ document.getElementById('timebox').innerHTML ...
I've been struggling with this issue for a while now. Despite rewriting the code multiple times, I can't seem to make any progress. Below is the JavaScript code (located on the same page as the HTML): Summary: The user inputs text into a box, w ...
Can elements that do not have a language set or inherited, meaning they are in an unspecified ("unknown") language, be targeted? Facts The language of an HTML document or element can be specified using the HTML lang attribute, for example: <html lang=& ...
I am currently working on a web application that focuses on Image processing, however I have encountered a basic issue. The images are not loading during the runtime of my HTML page. I have tried placing the image files in the src folder, but it seems li ...
Currently experimenting with styling the body element using two images. background: url(bg2.png) repeat-x, url(bg1.png) repeat; An issue arises in Safari where it reports an error in the console, stating that it cannot locate the image file specified at ...
I am currently using a jquery ui autocomplete feature to fetch data from Google Places... The issue I am experiencing is that when the user navigates through the suggestions using the up and down arrows, the original input also appears at the end. I would ...
My goal is to pass the content of a textarea to a PHP page for processing and storing in a SQL database. I need the textarea to handle special characters without any issues. However, when I input the following string into the textarea and submit it: J ...
I'm working on an editable table and I need to dynamically adjust the width of a div whenever the content in a td changes. It seems like my jQuery code isn't doing the trick. Any suggestions on how to fix this issue? var form = document ...
On my jsp page, I am implementing a jQuery autocomplete feature for a text field with the id "mytextfield". jQuery(function(){ $("#mytextfield").autocomplete("popuppages/listall.jsp"); }); Sometimes, based on user input and pr ...