Utilizing jQuery's draggable() feature within a dynamic and adaptive layout…

Currently, I am tackling a standard image "reveal" effect utilizing jQuery UI’s draggable() feature. However, I am facing significant challenges in ensuring its functionality within a responsive design:

http://codepen.io/ProfessorSamoff/pen/qEaNMM

While the reveal effect functions correctly at full screen and when the browser window size is decreased, the draggable handle fails to consistently snap to the correct position during resizing. (Although it works properly when manually dragged.)

In addition, you will notice that I have included some commented-out code that evaluates the browser window size:

if($(this).width() != width)
{
}

Although this logic successfully adjusts the draggable handle during window resizing, it disrupts the draggable functionality.

Despite experimenting with several suggestions on Stack Overflow related to draggable() and resizable(), none of them have provided a solution.

javascriptjqueryhtmlcssjquery-ui

Answer №1

Check out this link for more information: http://codepen.io/anon/pen/LEmgBP

This is how the JavaScript code looks:

var $reveal = $(".reveal");
$reveal.draggable({ 
    axis: "x",
    containment: "parent",
    iframeFix: true,
    refreshPositions: true,
    drag: function()
    {
      var position = $(this).position();
      var parentWidth = $(this).parent().width();
      var width = (position.left / parentWidth) * 100
      $(".featured").width(width + "%");
    }
  });

$(window).resize(function() {       
    $reveal.css('left', $(".featured").width()+'px')
});

It may not be the most elegant solution, but it seems to do the job.

In summary, I made 2 main changes: 1) Set the width of ".featured" using percentages. 2) Adjust the cursor position on window resize with 

$reveal.css('left', $(".featured").width()+'px')

Please note that point 2) is a temporary fix as I couldn't find a direct way to move the cursor programmatically. You might want to explore using a library like https://github.com/mattheworiordan/jquery.simulate.drag-sortable.js/blob/master/README.md to improve this functionality.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to use jQuery to update the href attribute of a parent link

Can someone help me figure out why I am having trouble changing the 'href' of the parent link to a header logo? Thank you in advance! Here is the HTML code snippet: <a href="https://URL.IWANTO.CHANGE"> <img id="partner_logo" src="/ ...

javascriptjqueryhtml

What is the best way to call an API and display the retrieved value in a div upon the page loading?

Seeking help to retrieve data from an API and display the response within a div tag. I know it's possible with jQuery, but I prefer a different approach. Currently, the page is loading blank. <body> <div id="OnLoad"></div& ...

javascripthtml

When transitioning between different node.js apps, the URL localhost:3000 remains constant

As I was launching a fresh node.js application (referred to as app 2), an unexpected and puzzling phenomenon occurred. I decided to run app 2 after spending some time working on another application earlier in the day (app 1). With the previous app, there w ...

javascriptnode.jshttp-redirectnetworkinglocalhost

Can you show me a way to use jQuery to delete several href links using their IDs at once?

Currently facing a challenge with removing multiple href links that share the same ID. Here is a snippet of my code: $('.delblk').click(function(e) { e.preventDefault(); var id = $(this).attr('id').substr(7); ...

javascriptjqueryhtmlcss

Is there a way to load two jQuery instances simultaneously?

Our current CMS has restrictions and the jQuery code is placed in the footer of the page. The script below checks if jQuery is available, but since jQuery loads after this script, it always returns false causing our code to not run. if (typeof jQuery != ...

jquery

"Combining two regular expression patterns within a single input field in HTML5

When validating an input, I am looking for a combination of alphabets, numbers, and a specific length range. I want to display separate error messages for each pattern. One error message should indicate that the input should contain only alphabets and numb ...

javascripthtmlangular

Refresh the HTML input field and textarea whenever the "Submit" button is clicked

<html> <script> function updateTextArea() { document.getElementById("inputField").value = <?php echo '"'.$_POST['input'].'"'; ?>; return true; } </script> & ...

phphtmlforms

Steps for setting up Node.js or npm on XAMPP

Hello there, I'm new to all of this so please bear with me if I make any mistakes. As a beginner developer, I am currently working on developing a web application locally using XAMPP. My plan is to eventually deploy it using a hosted web service. XAM ...

javascriptnode.jsapachenpmxampp

Tips for creating text that changes size based on the container dimensions

I am looking for a way to ensure that the content within a div container remains neatly contained without overflowing. How can I make the container responsive so that it adjusts its size based on dynamic text? .element { display: inline- ...

javascriptjqueryhtmlcss

What are the steps to delete data in angularjs?

I attempted to eliminate the data utilizing indexOf in AngularJS. Unfortunately, the remove function isn't functioning properly. Please guide me on identifying the mistake I may be making. JavaScript: var app = angular.module('myApp', []); ...

javascriptangularjs

Transforming the code from numerous div elements to utilizing Ajax for efficient execution

One of the key functionalities is that the content within the <div> changes based on the option selected in the <select> element. I am looking to incorporate ajax instead of multiple <div> elements. However, my proficiency with ajax is l ...

javascriptphpjqueryajax

Completing Forms with KendoUI Autocomplete

I am currently working with a KendoUI Autocomplete feature within a <form>. One issue I have encountered is that if the user presses the enter key while the autocomplete options are displayed, it only closes the options without submitting the form. S ...

javascriptjqueryformskendo-ui

What causes the CSS `resize` property to be inherited in Chrome browsers?

It was my understanding that elements do not inherit the resize property from their parent elements. However, I recently discovered that in Chromium they actually do: Here is a screenshot of Chromium's inspector: Check out this demo: http://jsfi ...

cssgoogle-chromeresize

Issue with retrieving authentication object from service within resolve function in AngularJS

I am facing a challenge where I need to retrieve certain data before the page renders to prevent it from appearing empty initially. However, I am encountering difficulties in getting my resolve function to work as intended. The issue lies in the line wher ...

javascriptangularjsfirebaseresolve

Tips for generating a document and adding information from an HTML webpage?

My desktop has an html file which requires input. How can I save this input to a file on my computer? Do I need to use a different language like python or javascript, and if so, how do I do it? Additionally, is there a way for javascript to launch an app ...

javascriptpythonhtmlfileserver-side

A collection of asynchronous requests stemming from a sole request

I am facing a unique ajax scenario that is proving to be quite challenging for me. Here is the specific sequence of events that I need to coordinate: An initial request returns an array of ID numbers. A separate request needs to be sent for each ID in ...

javascriptjqueryarraysajaxjquery-deferred

Exclude a particular row from a table when there is no identifier

My PHP code generates a basic table. <table border="1" id="control> <tbody> <tr>...</tr> <tr>...</tr> <tr>...</tr> //Row #3 <tr>...</tr> <tr>... ...

javascripthtmlcss

When using Nav, it is necessary to only have one dropdown open at a time by closing others before opening a new

I am encountering an issue with my dropdown menu system. I have multiple submenus within a top-level dropdown menu, and the problem is that when I open one submenu and then click to open another, the first one remains open. I would like for the other subme ...

htmlcssdropdownbootstrap-5nav

Encounter Problem: Unable to find address information with the winston logging library

For nearly a year, I relied on winston to send logs to logmatic. However, the recurring connection errors that caused the production server to crash led me to temporarily disable it this week. I attempted to implement a try/catch solution as an alternative ...

javascriptnode.jswinston

Guide to generating a downloadable link using React and Express

In my React app, I have a button which is essentially a div. The Button Component returns this structure with all other elements as props: <button className={"button "+styleButton} onClick={handleClick}> {source && <img src= ...

javascriptnode.jsreactjsexpressdownload