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.
Related
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.
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/
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.
Hello i have this code:
function goto(id, t){
//animate to the div id.
$(".contentbox-wrapper").animate({"left": -($(id).position().left)}, 500);
// remove "active" class from all links inside #nav
$('#nav a').removeClass('active');
// add active class to the current link
$(t).addClass('active');
}
this code active the horizontal-scroll of the slideshow, and inside the single page of slideshow are presents more div (div1 , div2 , div3) and at each of div is attached this code:
$("#div1").hover(function() {
var $this = $(this);
$this.css({'z-index' : '10', 'boxShadow' : '1px 3px 6px #444', 'position': 'fixed' }).animate({
'height': "390",
'width' : "840",
'marginTop' : "-12",
'marginLeft' : "-12",
});
},
function() {
var $this = $(this);
$this.css({'z-index' : '1', 'boxShadow' : '0px 0px 0px ', 'position': 'static' }).animate({
'height': "350",
'width' : "800",
'marginTop' : "0",
'marginLeft' : "0"
});
});
this is the code in HTML:
<a href="#" onClick="goto('#about', this); return false; " >
<div id="div2" style="background-color:#fff; width:250px;border:1px solid #000;min-height:250px; color:black;">
ABOUT
</div></a>
the problem is that when I click on a div that is present in the page One of slideshow, for example div1, and I need it to move horizontally on the second page,having the mouse inside the div latter moves with the scroll and don't stay in the page One, how can I avoid this?
I wish that when I click the system goes to the second page of the slideshow, but not with him also drag the div I clicked to move to the second page.
Changed the following code, inside the goto(). Here I am check if #div2 is in the hovered state.
If yes, then I take it back to it's original state AND ONLY THEN I move to the next page.
if (parseInt($("#div2").css("z-index"), 10) > 1) {
$("#div2").css({
'z-index': '1',
'boxShadow': '0px 0px 0px ',
'position': 'static'
}).animate({
'height': "250",
'width': "250",
'marginTop': "0",
'marginLeft': "0"
}, function(){
$(".contentbox-wrapper").animate({
"left": -($(id).position().left)
}, 600);
});
}
else {
$(".contentbox-wrapper").animate({
"left": -($(id).position().left)
}, 600);
}
Check it here
UPDATE:
Just add an else condition, check the update code above.
Link
Need a bit of help with this query
Any way you guys can help?
-R
You must modify the leanModal.js source and add an <img> with some styling and click() handler calling close_modal().
Code:
$("<img />").css({
// styling for the img
'position': 'fixed', 'top': o.top + 'px', 'left': '50%'
}).click(function() {
// onclick behaviour - just close it
close_modal(modal_id);
// icon URL vvvvvvvvvvvvvvvvvvvvv
}).attr('src', 'http://bit.ly/ttN6Qs').appendTo($(modal_id));
See working code HERE.
Styling and icon-placement is very primitive, but you should be able to modify it how you like. It is only a demonstration :).
This is what I did for the div element:
$("<div >").css({
'position': 'absolute',
//'top': o.top + 'px',
'top': '-20px',
'right': '20px'
}).click(function() {
// onclick behaviour - just close it
close_modal(modal_id);
}).attr('class', 'cross-close').appendTo($(modal_id));
$(modal_id).fadeTo(200, 1);
e.preventDefault();
});
});
And had this has my CSS...
.cross-close:before {
content: "x";
}
I actually had the same issue, and resolved it by simulating the click on the overlay. For example, any link or image could be used and you simply add an onclick event:
Close
or
<img src="" onclick="$('#lean_overlay').click();" />
Seems to work well :D