Having some issues with a basic toggle effect in Safari. There's an irritating flicker at the end of the hide animation. Any suggestions?
CSS
#menu {
position:absolute;
left: 30px;
top: 30px;
padding: 30px;
background: #FF0;
}
#content {
width: 400px;
display: none;
}
Javascript
$(document).ready(function() {
$('#menu').click(function() {
$('#content').toggle(700);
});
});
Demos
For a smoother transition, consider updating the toggle line to:
$('#content').toggle(700,'linear');
After encountering an issue with setting the width/height to 0 at the end of the toggle animation before changing the display property to none, I found a workaround by taking a longer route in the animation process:
var $c = $('#content'),
cw, ch;
$c.show();
cw = $c.width();
ch = $c.height();
$c.hide();
$('#menu').toggle(function() {
$c.css({
'width': 1,
'height': 1,
'opacity': 0
}).show().animate({
'width': cw,
'height': ch,
'opacity': 1
}, 700);
}, function() {
$c.animate({
'width': 1,
'height': 1,
'opacity': 0
}, 700, function() {
$c.hide();
});
});
Response from server : ["{\"CLIENT\":[{\"tranche\":\"1-4\",\"prix\":\"65.96\",\"currency\":\"E\"}],\"DISTRIBUTEUR\":[{\"tranche\":\"1-4\",\"prix\ ...
Currently, I am tackling a project involving various ajax actions. The problem arises from the fact that these ajax calls are executed by scripts that I would rather not delve into. In addition, the responses they generate are erratic and lack a consisten ...
I have experience integrating "Login via Google account" on various websites. However, some sites like Zomato always display the option to login via Google as soon as you open them. They even show a list of Google accounts that I have previously logged i ...
Trying to customize the jquery tabs, I experimented with styling them to my liking. One thing I did was attempt to reduce the size of the tabs by adding a height:45px; to the UI stylesheet shown below. .ui-tabs-vertical .ui-tabs-nav li { clear: left; ...
Within my search field, I have integrated two radio buttons that allow the user to choose between a regular keyword search or a license plate search. By default, the "keyword" option is pre-selected. However, I am looking for a way to use jQuery to automa ...
jQuery is designed to work within HTML pages that contain JavaScript code. While SVG and HTML both use the same DOM Level 2, SVG is XML-based and employs ECMAScript. What potential issues could arise from utilizing jQuery with SVG? Is it more advisable t ...
I'm currently attempting to access a hidden div within my repeater by clicking a button that is also located within the repeater. The hidden div is set to display as none, and the button contains a jQuery script triggered on OnClientClick. Here' ...
I am looking to dynamically add a new div element at the end of the last match on click. <form id="form"> <div class="border item-block"> <p><b>Color :</b> silver </p> <input type= ...
In the midst of creating a system that allows users to construct their own navigation structure, I have encountered a stumbling block. The idea is that when a user lands on the site, they are presented with a list of available topics from which they can ch ...
I'm attempting to utilize a single background image that is 3 pixels wide and 89 pixels tall. Each vertical stripe of 1 pixel will serve as the background for a different div. I had presumed that adjusting the background-position by -1px 0 and specif ...
I am looking to pass the SQL condition statement using the id of the link element, which represents the category of the product. This information will be processed by a PHP file and then loaded back into the div with the class load_area. To achieve this, I ...
When my image slider loads the next image, I want to save a record in the database. To achieve this, I am using jQuery and AJAX. I store the necessary information in a hidden field called 'data' so that I can send it to my PHP page. function aj ...
Imagine having multiple select boxes with the same options that are mutually exclusive. For instance, if Select Box A and Select Box B both have Option 1, Option 2, and Option 3, selecting Option 1 for Select Box A should make it unavailable in Select Box ...
I have a device connected to my local network that I can access using its IP address in order to retrieve JSON data. While developing a web-based application, I encountered an issue where the app couldn't access the local JSON data due to cross-domai ...
Currently, I am working on a web page that utilizes a horizontal layout. However, when viewing the page on mobile devices, I want to restrict scrolling to only the horizontal direction, preventing users from being able to scroll up or down. As it stands n ...
After making significant progress on my previous project, I found myself in need of some final assistance that has proven to be elusive. I successfully built my entire angular controller and populated all the necessary data for the page. However, I am str ...
I have encountered a challenge where I am unable to perform a small task. My goal is to have the position of "div1" change upon clicking on "div2", taking into account that "div2" is nested inside "div1". Additionally, when clicking on "div2" again, "div1" ...
I'm looking to incorporate a quantity box into Magento's list.phtml file. The current code for the box is as follows: <div> <button type="button" style=" margin-left:185px; min-height:48px;"title="<?php echo $this->__(&apos ...
I have a website with nested div elements that make up a complete set. These elements can be dynamically loaded when the user clicks the "load more" button. The website includes a script that changes the style of the aforementioned div element when the pa ...
Hey there! I have a calendar that includes next and previous buttons. When the user clicks on the next button, the schedule for the upcoming week will be displayed. However, if the user clicks again, nothing happens. My goal is to only show dates for the n ...