Having trouble with JQuery Draggable in FireFox only working in an iFrame? Learn how to set the ViewPort to fix

Having trouble with jQuery UI Draggable in FireFox 33.0.2: I followed the example code, but it doesn't seem to be working. The scripts are running, CSS classes are added, event bindings are in place, but dragging won't work.

I noticed that when I embed the page in an iFrame, it works perfectly. Could this be a Viewport issue?

NOT WORKING:

Their demo page outside the iFrame isn't functioning properly: http://jqueryui.com/resources/demos/draggable/default.html

WORKING:

However, placing the same page inside an iFrame does the trick:

<iframe
    style="height: 400px;width: 400px;"
    src="http://jqueryui.com/resources/demos/draggable/default.html"
    >
</iframe>

I've attempted wrapping it in a large div with relative positioning and setting meta viewpoint but no luck. Interestingly, Chrome seems to handle it fine.

jquerycssviewportjquery-ui-draggable

Answer №1

The issue appeared to be related to FireFox version 33.0.2. The slider feature was also malfunctioning. After upgrading to version 33.0.3, everything is functioning properly now.

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

Changing font color of a selected item in Material-UI's textview

I have a select textview in my react app and I am wondering how to change the font color after selecting an item from this textview. <div> <TextField id="standard-select-currency" select fullWidth l ...

javascriptcssreactjsmaterial-ui

"Although disabled, input elements can still be focused on in Firefox browser

Illustrative example let userInput = document.createElement("input"); userInput.id = "user-input"; userInput.type = "number"; userInput.className = "user-number-input"; userInput.disabled = true; document.body.appendChild(userInput); .number-inp ...

javascriptcss

Exploring nodes with the help of Cheerio JS

In my HTML code, I am using the Snekfetch library to fetch data. Here is a snippet of the code: <div class="entry-content"> <h4>today's date etc etc</h4> <h3>category name 1</h3> <p> <img class=" ...

jqueryhtmlcheerio

Choose the option to replace "&" using regular expressions

I am currently working on a function that allows for selecting options and dynamically replacing a specific character in the URL. & The goal is to replace &amp; with & In the given code snippets, Jquery and Perl Template (jquery) are u ...

jqueryregex

I successfully managed to ensure that the splash screen is only displayed upon the initial page load. However, I am now encountering an issue where it fails to load again after I close the page. Is there any possible solution

After successfully implementing a splash screen that only plays once on page load, I encountered an issue. When I close the tab and revisit the page, the splash screen no longer plays. Is there a way to fix this problem? Perhaps by setting a time limit for ...

javascripthtmlcsscss-animationssplash-screen

Preserving Search and Filter Settings in jQuery Data Tables

I've been working with a datatable and I'm trying to figure out how to keep dropdown filters and search parameters saved when the page is reloaded, just like shown in the screenshot below. However, I also want these parameters to be cleared if th ...

javascriptjquerydatatables

Using jQuery's $.ajax() function to make an asynchronous request, and then passing the

I'm currently utilizing the jQuery $.ajax() function within a parent function that passes values into the ajax call. I am looking to have a custom callback function that can access the data parameter returned from the success function of the ajax call ...

javascriptjqueryajaxcallback

The accuracy of getBoundingClientRect in calculating the width of table cells (td)

Currently, I am tackling a feature that necessitates me to specify the CSS width in pixels for each td element of a table upon clicking a button. My approach involves using getBoundingClientRect to compute the td width and retrieving the value in pixels (e ...

javascripthtmlcsshtml-table

Toggle display of list items using jQuery on click event

I want to be able to toggle the visibility of my submenus when a link is clicked. Here's an example code snippet: <ul> <li><a href="www.example.com">Test</a></li> <li><a href="www.example.com ...

jqueryhtmlcss

How can you display Unicode characters within an HTML input element with type=submit value?

I am having trouble displaying a right facing triangle character after the main text on a form button based on a designer mockup. The code snippet causing issues is as follows: <input type="submit" value="Add to basket &#9654;" /> The desir ...

jqueryhtmlunicode

Verify whether the value is in the negative range and implement CSS styling in React JS

I have been developing a ReactJS website where I utilize Axios to fetch prices from an API. After successfully implementing this feature, I am now looking for a way to visually indicate if the 24-hour change percentage is positive by showing it in green, a ...

htmlcssreactjs

Regularly updating a book's interactive pages with turn.js technology

I experimented with generating dynamic content in turn.js using the sample provided here. This is an excerpt of the code I have written: <body> <div id="paper"> </div> </body> <script type="text/javascript"> $(win ...

javascriptjqueryajaxturnjs

Bypass ajax request with the use of a returned promise

I've come across a scenario where I have a function within a class that is designed to return a promise for deleting an item. Here's what the function looks like: function Delete(){ // if(this.id == ""){ // return ?; // } ...

javascriptjquery

Keeping your Contact Form 7 perfectly centered on your WordPress website

Currently, I am utilizing the contact form 7 plugin on my Wordpress website. While I have two forms set up, I only want to center align one of them. To achieve this, I initially added the following CSS code in my additional CSS: div.wpcf7 { text-align: c ...

csswordpress

Using AJAX call and jquery each loop to work with JSON syntax

I made an AJAX request that fetches data from PHP. echo json_encode($json_response); The output looks like this: [{"name":"Sprouts.......}] Next, I used JQUERY to iterate through the data using the following code: $.each($.parseJSON(data), function(i, ...

phpjqueryjsonajax

Adjust the color of the input range slider using javascript

Is there a way to modify the color of my slider using <input type="range" id="input"> I attempted changing it with color, background-color, and bg-color but none seem to work... UPDATE: I am looking to alter it with javascript. Maybe something al ...

javascriptcsshtml

Toggling siblings in jQuery when focusing and blurring

Currently, I have this setup that seems to be functioning well. However, I am looking for an optimal way to write it as I am creating a mobile site where performance is crucial. Imagine a tooltip that slides down (toggles) under the element. There are app ...

jquerymobile-websitejquery-mobileperformance

implementing a feature to save and showcase a list of preferred names using jquery/ajax without the

On my website, individuals have the ability to search for any name from around the globe. Users can add specific names to their favorites list, which they can view on a separate page containing all of the names added during their current session. I would ...

jqueryajaxdynamic

Exploring the concept of reflection in JavaScript and jQuery

Here is a javascript object I have: person.Name = "John"; person.Nick = "Smith"; person.Info = "hi there"; In addition, I have some HTML elements as shown below: <input id="Name" /> <input id="Nick" /> <input id="Info" /> My question ...

javascriptjqueryjsonreflection

Using AJAX, retrieve the attribute of a button and assign it to a node

I'm currently facing a dilemma in trying to pass the name of a clicked button to my node server. I have this code snippet in Node.js: app.get('/someUrl', function(req, res) { console.log(req.body.name); }); Meanwhile, my jQuery/ajax ...

javascriptjqueryajaxnode.js