Challenges encountered with integrating jQuery UI and html2canvas extensions

I'm experiencing some difficulties with the jQuery UI and html2canvas plugins.

Take a look at the jsfiddle link provided below to review the jQuery code: http://jsfiddle.net/fX262/7/

$(function () {
    // jQuery functions here
});
  1. Why are the images positions skewed when I drag them from the right side to the left side container?
  2. Why can't I resize the dropped images?
  3. When I click the "Post" button, why isn't a screenshot of the contents in "#borrd-droppable" div generated and displayed in "#canvasImg" div?

I require this to work seamlessly on Firefox 28, Google Chrome 32, and ideally on IE 8 as well.

Any assistance would be greatly appreciated.

EDIT :
Resizable functionality has been fixed by adding $(".borrd-item").resizable(); inside drop: function (event, ui) {} along with corresponding jQuery UI CSS. However, after dragging and dropping items on the left side, they become undraggable. Any insights on how to resolve this issue?
http://jsfiddle.net/fX262/9/

jquerycssjquery-uicanvashtml2canvas

Answer №1

Exciting news - drag, drop, and resize features now work seamlessly with forward, backward, and remove buttons!

Check it out here
See the results here

After encountering issues trying to apply resize to an img tag, I discovered that it only works on block elements. By wrapping the img tag in a block element and using jQuery UI, everything fell into place.

To solve other problems, I added IDs to clones and verified them:

if ($(ui.draggable)[0].id !== "") {
    x = ui.helper.clone();    
    ui.helper.remove();    
    x.addClass("borrd-item");    
    x.draggable({    
        helper: 'original',    
        containment: '#borrd-droppable',    
        tolerance: 'fit',    
        start: function (event, ui) {    
            $(this).css("z-index", a++);    
        }    
    });    
}

Could this be a bug within jQuery UI itself?

Currently, the remaining issues are:

  1. Why do images position far below their actual position when dragged to the left side? I have removed paddings and margins on elements above the "borrd-droppable" div, which improved the positioning but suggests a CSS issue.

  2. When overlapping images, increasing the z-index of one image by clicking forward multiple times causes it to surpass others significantly. Is there a way to make it move backward to the next image in just one click?

  3. canvas2html functions properly in Firefox but not in Google Chrome. Even using $(window).load function didn't resolve this issue. Any insights?

Despite posting code and details, receiving no replies is discouraging for someone new to Stack Overflow like me.

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

Utilizing AJAX to showcase individual PHP files

My PHP elements are not being displayed in the code, and I need to figure out why. Below is the HTML code I am currently using: <div class="tablocation"> <ul class="css-tabs"> <li><a class="current" href="/wp-content/themes ...

phpjqueryhtmlajax

JavaScript - Can you explain the distinctions in these object declaration notations?

When attempting to pass an array to jQuery's .ajax() function's data parameter, I encountered an issue. Initially, I constructed my 2-dimensional array as follows: var arr = new Array(); for(i in someArray){ arr[i] = new Array(); arr[i]. ...

javascriptjqueryajaxpost

Is there a way to refresh the countdown timer?

I am working on creating a countdown timer using directives and want to add some CSS styles like fade-out when the time is changing. My issue lies in the HTML binding where the time is not updating visually, although it does change in the console. Here&ap ...

javascripthtmlcss

The music will only play automatically when you first visit the website

On my home page, I have implemented the following code to play background music: <object type="application/x-shockwave-flash" data="/Music/dewplayer-mini.swf" align="right" width="100" height="20" id="dewplayer" name="dewplayer"> <param name="mov ...

jqueryhtmlhtml5-video

Display and conceal multiple div elements using a timer

Currently, I am working on creating a message box that will display active messages one by one from a MySQL table. The challenge is that the number of divs needed can vary depending on the number of active messages in my database. Using an ajax timer and P ...

phpjavascriptjqueryajaxtimer

HTML5 Page Structure Design

As I embark on my journey to create my very first Wordpress theme for my personal blog, I have a few questions regarding the layout. Should I use Grid960? Also, should I put the articles in one section or the opposite? Here is the layout structure I am con ...

csshtmlwordpresslayout

A JQuery function linked to the click event of the body element triggers another click event right away

$().ready(function(){ $("#move-to").click(function(){ $("body").bind("click",function(){ alert("foo"); }); }); }); Why do I receive an alert message of "foo" immediately after clicking on "move-to"? When I bind the " ...

javascriptjqueryclickbind

Stack of Error Messages on jQuery AJAX Form Submission

How can I prevent the display of multiple error messages in my form with required fields? Currently, when attempting to continue without entering anything into the required fields, a new error message is created underneath the previous one. What steps sh ...

javascriptjqueryajax

Tips on Implementing a CSS Variable in a React Component

Is there a way to use content variable with in-line styles in React? I am unsure of how to accomplish this. CSS3 .right::after, button::after { content: var(--content); display: block; position: absolute; white-space: nowrap; padding: 40px 40p ...

cssreactjsmaterial-ui

Some browsers are failing to display the navigation bar on my website

After working on my website, www.alexanderpopov.org, I encountered an issue with the navigation bar disappearing on some computers and browsers. I'm using css to style it, but the problem persists. Below is the HTML code for your reference. Any advice ...

htmlcss

Execute grunt serve:dist with local file paths enabled

I am currently utilizing grunt to construct and deploy a basic angular web application that incorporates bootstrap and font-awesome. The project was initially set up using the yeoman generator-angular and constructed utilizing grunt serve:dist. I have obs ...

htmlcssinternet-explorergruntjsyeoman

What is the best way to send an inline SVG string to my controller?

I am trying to send an inline svg string along with some other properties to my controller. When I replace the svg string with a normal string like "blabla", it successfully reaches my controller. However, with the actual svg string, it never makes it to ...

javascriptc#jqueryajaxsvg

Center-aligned Bootstrap responsive column with a fixed width

Currently, I am working on creating a login page with a fixed width and a centered column layout. This is similar to the design of the login page at https://www.amazon.com/sign-in. I attempted to achieve this layout using offset columns, as shown below: ...

htmltwitter-bootstrapcss

Prevent those pesky popups with this handy script

Even though AdBlock sometimes doesn't block popups, I have a solution in mind. I plan to use Greasemonkey and jQuery to create my own popup blocker. Is it possible to intercept the clicks and determine if a popup is about to open? $('.popupLaun ...

javascriptjquerygreasemonkeyadblock

Is there a way to stop tabs from automatically resizing?

I am facing an issue with my layout structure, which can be viewed at this link: . The middle div in the structure automatically resizes to fit the height of the window. Within the middle div, I have tabs. However, when I use the .tabs() method, the tabs ...

jqueryjquery-uijquery-ui-tabs

Submitting a file using Ajax XMLHttpRequest

Currently, I am facing an issue while attempting to send a file using the following XMLHttpRequest code. var url= "http://localhost:80/...."; $(document).ready(function(){ document.getElementById('upload').addEventListener('cha ...

javascriptajaxjqueryfile-uploadxmlhttprequest

Tips for displaying a blank data table when a page loads, including the use of a text input

I am looking to implement a feature where upon loading a page, an empty datatable is displayed with <input type="text" /> in each column. Users can input data into the table and then submit it. After submission, I would like to send all the data to t ...

javajqueryhtmldatatables

Variable for Ajax success not set even though the other data was returned

UPDATE: While the main question remains unchanged, I have modified the approach to now return a getButtons() function instead of a global buttons array. I am utilizing an AJAX request to fetch data from the server in order to populate a popup box, which i ...

javascriptjqueryajaxjsonjsp

The absence of a vertical scrollbar is noticeable

I have taken over a project from a colleague, and I am encountering an unusual issue that I cannot figure out. On this HTML page, even though it extends beyond the screen's boundaries, there is no scrollbar present, and scrolling using the mouse whee ...

htmlcss

Bootstrap CSS: image is overlapping text inside a div

In my layout, I have four inner div containers arranged as follows: small picture - text - small picture - text. <div class="container"> <div class="col-md-12"> <div class="row"> <div class="col-sm-2"> <div c ...

htmlcsstwitter-bootstrapbootstrap-4