Looking to continuously move the .popup class left and right by clicking buttons for left and right movement.
Here is the js fiddle link for reference.
This is the HTML code structure:
<button class="right">Right</button>
<button class="left">Left</button>
<div class="popup">
Popup
</div>
You did not set the left property of the .popup div
.popup {
width: 200px;
height: 50px;
border: 1px dashed #000;
position: absolute;
top: 100px;
left:0px;
}
To enhance your script, consider the following:
$(document).ready(function () {
var left = parseInt($(".popup").css('left'));
var refreshIntervalId;
$(".left").on('mousedown', function () {
refreshIntervalId = setInterval(function () {
$('#counter').html(parseInt($('#counter').html()) + 1);
left += 5;
$(".popup").css({"left": left})
}, 10);
})
$(".left").on('mouseup', function () {
clearInterval(refreshIntervalId);
})
$(".right").on('mousedown', function () {
refreshIntervalId = setInterval(function () {
$('#counter').html(parseInt($('#counter').html()) - 1);
left -= 5;
$(".popup").css({"left": left});
}, 10);
})
$(".right").on('mouseup', function () {
clearInterval(refreshIntervalId);
})
});
Is there a way to customize the display of static files, particularly images? For instance, when accessing a static file on a website like this: Currently, it just shows a basic img element. Is it possible to dynamically add additional elements to that d ...
Is there a way to test the methods of react components and include them in my Istanbul test coverage? Edit: I'm using enzyme. Just wanted to mention that. Take, for instance, this component: class SearchFormContainer extends Component { static h ...
I've been encountering issues trying to make a Get request to hit the specified URL. Initially, I attempted inputting the URL parameter manually in a separate JS file, then transitioning all my JS to cshtml to test out Razor. However, I am still facin ...
After trying out the suggestions provided in Remove IE10's "clear field" X button on certain inputs? .someinput::-ms-clear { display: none; } I successfully removed the X button on IE 11 running on Windows 7, but unfortunately it didn&a ...
My brain feels scrambled... I am attempting to insert an image in HTML within Yii2. I retrieve it from the database and place it into the view file, but when I try to display it using HTML tags, an error is thrown. However, the image is being added perf ...
I attempted to refresh a specific div element using jQuery with the following code: function reload(param) { $("#divId"+param).load(location.href+" #divId"+param); } Unfortunately, this resulted in the creation of a nested div with the ...
In my Node.js application, I have two functions defined. The first function is structured like this: function checkAdd ( address /* : string | void */ ) /* :Promise<Object[]> */ { var convertToLowerCase = address.toLowerCase() return Promi ...
Hey there, I could really use some help with a CSS and HTML issue I'm having. Take a look at the code snippet below: Here's what I'm trying to achieve: 1. Keep the boxes (.box) with images fixed in place 2. Make the hidden description (. ...
I am in the process of designing the navigation menu for my website and I have a specific vision in mind. I want to create a unique background using two rectangular SVGs that are slightly rotated off axis and overlapping each other, with their edges extend ...
I've exhausted most of the solutions available online, yet I haven't been able to resolve the issue. The content on my webpage is appearing wider than the screen size on mobile devices and some PCs URL: html, body,{ max-width: 100%; ...
I need assistance in connecting a JavaScript application to a WCF service. The WCF Service I have includes the following method: [OperationContract] [WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Wrapped, RequestFormat = WebMessageFor ...
Is there a way to simulate page portrait orientation on a PC browser without resizing the window? In my HTML code, I have a <div> element that displays content dynamically based on screen orientation. Is it possible to use JavaScript to trick this & ...
Recently, I have discovered the wonders of www.webflow.com for creating an admin layout. It excels in generating a flexbox layout based on my PSD design without requiring me to manually code with Gulp. My plan is to further simplify the process by breaki ...
Whenever a Right click is performed, an options popup/screen will appear with dynamic content/element. Here is the Options Popup: https://i.stack.imgur.com/TfxpC.png This dynamic content/element will disappear as soon as the mouse is clicked elsewhere o ...
There seems to be a lot of repetition in the code that needs to be cleaned up. I'm wondering if the switch statement is necessary. It looks like it requires the muiTheme palette to be passed this way. Also, can these theme constants be placed in a sep ...
There are two input boxes provided - one for current address and another for permanent address. When the checkbox is clicked, the value of the current address should be displayed in the permanent address box. However, I am facing an issue where when I unc ...
After successfully filling out my form and submitting data to the database, I encountered a problem with the drop downs on the form not showing the selected value if the model fails validation. Although the HTML clearly shows that the value of the dropdow ...
I am currently exploring Flickity and its functionality. I have a carousel that auto-plays, with the selected cell always placed in the middle and highlighted with a grey background. However, I would like to customize it so that the selected cell is positi ...
I am currently working on modifying my code to use POST instead of GET to send variables to a PHP page. The current code sends data via GET and receives it in JSON format. What changes should I make in order to pass the variables to process_parts.php usi ...
I have successfully implemented three textboxes in my project. The first textbox is for entering a number as the row count The second textbox is for entering a number as the column count The third textbox is used to specify a position in the table that ...