After the page loads, I want an element to slide left after 10 seconds without disappearing from the page completely. The goal is for it to move 200px to the left and then return to its original position when clicked.
I'm unsure about how to set the distance, but this is what I have attempted so far:
$("#myEl").click(function(){
$(this).animate({width:'toggle'},500);
});
$("#someElement").click(function(){
if ($(this).hasClass('right')) {
$(this).animate({ right: '+=300' }, 700).removeClass('right');
} else {
$(this).animate({right:'-=300'}, 700).addClass('right');
}
});
Here is a JSFiddle example of this code.
Give it a shot,
$(document).ready(function () {
var $myElement = $('#myElement');
var originalPosition = $myElement.position().left;
$myElement.click(function(){
//Resets to original position on click
$(this).stop(true, false).animate({left: originalPosition},500);
})
.animate({left: '-=200'}, 10000); //10-second animation
});
Updated version with a larger div can be found here: DEMO
function slideLeft(){ // create a function to slide left
$('#slider').stop().animate({left: -200}, 1000);
}
function slideRight(){ // create a function to slide right
$('#slider').stop().animate({left: 0 }, 1000);
}
// Let's test these functions:
setTimeout(function(){ // execute slide left after 5 seconds
slideLeft();
}, 5000);
$('#slider').toggle(function(){ // click toggle between sliding left and right
slideRight();
},function(){
slideLeft();
});
What are some recommended strategies for optimizing webpage loading speed? What key factors should be taken into consideration? ...
After spending a full day attempting to execute an AJAX call within an event handler function, I've tried various combinations of when(), then(), and done(), as well as setting async: false. However, I keep encountering undefined errors despite my eff ...
I am facing an issue where the post data is not passing to get-data.php while trying to retrieve data from the database using ajax to insert it into another element. Any thoughts on what might be causing this problem and possible solutions? https://i.stack ...
Currently, I am working on developing an ajax application using dojo. I am curious if there is a feature comparable to jQuery Address in terms of functionality. My goal is to implement ajax-based hash url navigation similar to Twitter and Facebook using do ...
I'm currently working on creating a select tag that opens its options slowly with a fade in, fade out effect when the user clicks on "Actions." I've attempted to use jQuery for this feature but haven't had any luck. Here's my code: &l ...
When a user clicks a button on my website, a function in the controller is triggered. Here is the function that runs when the button is pressed: $scope.launch = function(idOfSpotOfInterest, schedOfSpotOfInterest){ var dlg = null; dlg = $dialogs. ...
I have developed a system that retrieves information from a database and presents it in multiple text files. Now, I am looking to move this system to a page on a WordPress website. I have already created a custom page named page-slug.php and added the ne ...
Let's analyze the following piece of code: <div id="dest"> <p>Original Content</p> <p>Some data</p> <ul> <li ng-repeat="i in items">{{i.name}}</li> </ul> </div> Alternatively, u ...
I've been stuck with this issue for the past few hours and I'm hoping to find a solution here. What I'm attempting to do is something like the following: PHP: $errorIds = array(); if(error happens){ array_push($errorIds, $user['user ...
I have developed an application with push state functionality and it is running smoothly. However, I am facing an issue where my jQuery functions are being triggered multiple times in certain cases. This happens because every time I call push state, the sp ...
I am currently facing an issue with setting the height of table cells in my project. While everything works smoothly on most browsers, Firefox seems to add borders to the overall height which is causing inconsistency across different browsers. If anyone k ...
Hey there, I have a search form that takes values from two text fields and combines them to populate a third text field for querying. <form name="form1" method="post" action="" autocomplete="off" oninput="sea.value = password.value +''+ passw ...
Having some trouble with the Places API, I initially attempted to use $.ajax from jQuery but kept encountering an unexpected token error on the first element of the file. It turns out that JSONP cannot be fetched from the Places API. Below is a snippet of ...
I have been attempting to set a background image for the . element, but it is not displaying correctly. The image shows up in Firefox and Chrome, but not in Internet Explorer. I have included a link to my website and relevant CSS code below. Can anyone pro ...
let dataString = JSON.stringify(formData); console.log(dataString); $.ajax({ url: urL, type: "POST", cache: false, data: dataString, success: function (data) { console.log(data); } }); When executing the code above, the ...
Currently, I am working on the login section of my website and I would like to implement a similar effect to Twitter's login form, where the Username and Password values disappear when the Textfield and Password field are in focus. I have attempted to ...
Utilizing Jcrop to resize an image with a 1:1 aspect ratio has been mostly successful, but I've encountered issues when the image is wider. In these cases, I'm unable to select the entire image. How can I ensure that I am able to select the whole ...
I'm currently experimenting with the sortable feature and encountering a minor roadblock. My aim is to extract the ID of the new parent element for use in an ajax request. UPDATE: I've managed to log the parent element, but it's duplicatin ...
Currently, my code looks like this: object1 = $.ajax({ .. .. }); If an error occurs, I would like to have the ability to restart the ajax request. For instance, if the user's connection is lost, I want to be able to easily call the same ajax again w ...
Despite my extensive search and analysis of similar questions on this forum, I have reached a roadblock. My script is failing to load data from a Json file into the table I am trying to create, even after closely following the jquery API guidelines. Any as ...