I programmed a code that implements canvas, caman and fabricjs. This is supposed to rotate, edit colors and save the image when I click on a button. It works fine, but just with the first clicked image. When I click on the button again to show another image for edition, the screen shows the image but do not let me edit it. In other words, if I click on the image, then the first image clicked shows again for edition. I call the command alert to see which path the image was returning, and it is returning correctly.
Here is my code:
TScript::create("
temp_img_id = '{$id}';
temp_img = '{$filename->path_filename}';
var canvas = this.__canvas = new fabric.Canvas('imgFilePreview');
fabric.Object.prototype.transparentCorners = false;
fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';
canvas.setHeight(500);
canvas.setWidth(500);
fabric.Image.fromURL(temp_img, function(objects){
var obj = objects.scale(0.75);
obj.scaleToHeight(350);
obj.scaleToWidth(350);
canvas.centerObject(obj);
canvas.add(obj);
$('.canvas-container').css({
'width': '900px',
'height': '900px',
'position': 'relative',
'user-select': 'none'
});
$('#canvas').css({
'border': '1px solid rgb(204, 204, 204)',
'width': '500px',
'height': '500px',
'left': '0px',
'top': '0px',
'touch-action': 'manipulation',
'user-select': 'none'
});
$('.upper-canvas').css({
'border': '1px solid rgb(204, 204, 204)',
'width': '500px',
'height': '500px',
'left': '0px',
'top': '0px',
'touch-action': 'manipulation',
'user-select': 'none',
'cursor': 'default'
});
$('#canvas').attr({'width': '500', 'height': '500'});
$('.upper-canvas').attr({'width': '500', 'height': '500'});
canvas.renderAll();
});
");
I run this code to perform the image edition. I use the adianti framework developed by Pablo Dall'Oglio. I just check if the image paths was returning with the correct contents. I do not know how can I solve this. I searched for solutions, but without success.
Related
I have a text area in which i want to increase height of it according to lines which will be added by user.
i have tried these:
$("#chatroom").css({
'max-height': 'auto',
'height': 32',
'width': auto',
'overflow': 'auto',
'margin-bottom': 11,
});
I'm having an issue with trying to reset a div, containing an image, to the original value after I have animated it.
So I have a sort of quiz with 6 pictures positioned next to each other.
The user has to select one of 6 pictures. When clicked on that picture I make the picture go fullscreen. Afterwards, when the user doubleclicks on the picture the picture should go back to the original position for the next question.
However the return is not working and I don't understand why.
Beware: the divsare floated divs with specific left-positions so I would need to retain these...
This is the animation-code:
$(".candidatePicture").click(function(e){
$(e.target).css('z-index', 1);
$(e.target).animate({top: '0', left: '0', width: '1920px', height: '1080px'}, 1000);
});
This is the return code:
$(".candidatePicture").css({ 'width': '250px', 'height': '300px', 'z-index': '0' });
You can find the code here: http://jsbin.com/gotuqenoce
Thank you for your help.
please try to change the events handlers as follow:
$(".candidatePicture").click(function(e){
var $this = $(this);
$this.css('z-index', 1);
$this.animate({top: '0', left: '0', width: '1920px', height: '1080px'}, 1000);
$this.off("click");
});
$( ".candidatePicture" ).dblclick(function(e) {
$(this).css({ top: '', left: '', 'width': '', 'height': '', 'z-index': '' });
showNextQuestion();
});
http://jsbin.com/latiqemozo/edit?html,output
So my question is how would i make my header which already sticks to top on scroll only work on certain device width?
function fixDiv() {
var $div = $("#header-full-top");
if ($(window).scrollTop() > $div.data("top")) {
$('#header-full-top').css({
'position': 'fixed',
'top': '0',
'width': '100%'
});
} else {
$('#header-full-top').css({
'position': 'static',
'top': 'auto',
'width': '100%'
});
}
}
$("#header-full-top").data("top", $("#header-full-top").offset().top); // set original position on load
$(window).scroll(fixDiv);
Fiddle
function fixDiv() {
var getWindowWidth = $(window).width();
//approximate above medium screen widths includes large and medium screens.
//exactly not sure, from where the medium screen sizes starts from, just you need to change 767 in order to checkout your result
if(getWindowWidth>767) {
$('#header-full-top').css({
'position': 'fixed',
'top': '0',
'width': '100%'
});
}
else {
$('#header-full-top').css({
'position': 'static',
'top': 'auto',
'width': '100%'
});
}
}
fixDiv();
$(window).resize(fixDiv);
check the above code, $(window).width() returns the window width on which your web page or document is being called. accordingly you can utilize the width value to conditionally apply css using jquery or other statements according to window width.
https://jsfiddle.net/L5xxjbn2/2/
I am new to jQuery widget and trying to learn it, I create a widget for displaying a dialog, the widget's _create() method does the following:
Adds a mask dialog for hiding the user screen.
Adds a close "button" which is a div with a handler for click event
Displaying the dialog to the user
When I click the close div I can remove the widget instance with the following command -
$(this).parent().remove();
I do not find a way to hide the screen masking div I create in the _create method.
Code for the create and close methods follows -
_create: function () {
var handle = this;
if (this.options.Height == 0) this.options.Height = this.element.height();
if (this.options.Width == 0) this.options.Width = this.element.width();
$(document.body).css({ margin: 0, padding: 0 });
this.wrapper = $("<div class='wrapperClass'>").css({
'height': this.options.Height,
'width': this.options.Width,
'position': 'absolute',
'left': '50%',
'margin-left': -1 * this.options.Width / 2,
'top': '50%',
'margin-top': -1 * this.options.Height / 2,
'border': '3px solid red',
'border-radius': this.options.Radius,
'z-index': this.options.Zindex
});
//create the screen masking background
this.maskScreen = $('<div />').css({ 'height': '100%', 'width': '100%', 'position': 'absolute', 'top': 0, 'left': 0, 'background-color': this.options.bgColor, 'z-index': this.options.Zindex - 1, 'display': 'block', 'opacity': this.options.bgOpacity, 'margin': 0, 'padding': 0 });
$('body').append(this.maskScreen);
this.element.css('display', 'block');
this.wrapper.html(this.element);
$('body').append(this.wrapper);
if (this.options.addClose) this._addClose();
},
_addClose: function () {
this.closeButton = $('<div />')
//add close class
.addClass("closeClass").css("z-index", this.options.Zindex + 1);
this.closeButton.on("click", function () {
$(this).parent().remove();
});
this.wrapper.append(this.closeButton);
},
How can I reference the screen masking div I created in the _create() method?
You should make use of the jqueryUI widget _destroy method to do the cleanup for you, that way you can refer all the variables and elements that you have added in the _create method and remove them all in the right order to restore the environment as it was.
In this case your closeButton should simply call the _destroy method of your widget instance and not doing any removal itself.
If you can post a working jsFiddle, I will show you the actual code.
Below is a JS fiddle that I have been using to implement a tooltip on my website.
JSFiddle
However when I implement this on my website, the title attribute value appears on rollover (like an alt attribute) as well as the tooltip. I need it not to do this! The actual code from my website is below.
Javascript
$(function(){
$("ul.thumb li").hover(function() {
$(this)
.css('z-index', '10')
.find('img').addClass("hover")
.stop()
.animate({
marginTop: '-150px',
marginLeft: '-150px',
top: '50%',
left: '50%',
width: '300px',
height: '300px',
padding: '20px'
}, 200, function() {
var $this = $(this),
h = $this.height();
$caption = $('<div class="caption">' + this.title + '</div>')
.css('top', h.toString() + 'px');
$this.after($caption);
});
}, function() {
$('.caption').remove();
$(this)
.css('z-index', '0')
.find('img').removeClass("hover")
.stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '200px',
height: '200px',
padding: '5px'
}, 400);
});
});
HTML
<ul class="thumb">
<li> <img src="slide1image.png" width="200" height="229" title="come join us and have lots of fun with our clowns, tigers and magician" /></li>
Do not use the title attribute then.
Use data-title as the attribute name and access it with the $this.data('title')
Demo at http://jsfiddle.net/gaby/62NT7/1/
Since the essence of what you want to do is to prevent the default behavior of hovering over an image, the following should take care of it:
$('img').on('hover', function( e ) {
e.preventDefault();
});
WORKING JSFIDDLE DEMO
Other ways of resolving this include:
- removing the attribute: $('img').removeAttr('title')
- saving the value to a data attribute and removing it: $('img').data('title', function() { return this.title; }).removeAttr('title');
- editing your markup so that you use a data attribute instead of title attribute - as #GabyakaG.Petrioli's answer.