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
Related
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.
I have a view that gets an ajax partial view and shows it as a modal popup. The problem is, the partial view has a cancel button on it with a certain id attribute, but its .click javascript event is attached to the main view. so something like this:
Main View
<div>
some_ajax_link
</div>
<div id="partial_container"></div>
<script>
$(document).ready(function () {
$('ajax_link').click(function (e) {
var hiddenSection = $('#partial_container');
hiddenSection.fadeIn()
// unhide section.hidden
.css({ 'display': 'block' })
// set to full screen
.css({ width: $(window).width() + 'px', height: $(window).height() + 'px' })
.css({
top: ($(window).height() - hiddenSection.height()) / 2 + 'px',
left: ($(window).width() - hiddenSection.width()) / 2 + 'px'
})
// greyed out background
.css({ 'background-color': 'rgba(0,0,0,0.5)' });
});
});
$('#partial_container').on('click', '#close_button', function () {
$('#partial_container').fadeOut();
});
</script>
Partial
<div> Some stuff </div>
<button id="close_button">Cancel</button>
The reason I have the cancel button in the partial is for styling purposes, when the button is in the main view it works fine for some reason. I'm confused because when the partial is retrieved it ends up on the same page
EDIT
not sure why theres .appendTo('body'), I got this script somewhere online, is it necessary?
$('#partial_container').on('click', '#close_button', function () {
$('#partial_container').fadeOut();
});
I ended up adding the script on the partial view where the button is
$('close_button').click(function() {
$('modal_popup_id').fadeOut();
});
it seems like when the modal 'fades in' things in the background are disabled temporarily, so the click event is not called when the button is clicked (or any script on the background main view is not triggered)
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.
I created the notification bar with the text effect everything seems ok but when i add the text effect like moving from left to right in that it seems work when in first time and after that it looks like this way see the FIDDLE
jQuery('.text').animate({
'right': '300px'
}, 'slow', 'linear').animate({
'left': '300px'
}, 'slow', 'linear').animate({
'left': '0',
'right': '0',
});
For the second time when i click expand it appears from center to right when i refreshing the page itself it appear properly for the first time.
Is there is a way to show the message as from left to right to center whenever i open the bar.
Thanks in Advance.
jQuery('.text').animate({
'right': '300px',
}, 'slow', 'linear').animate({
'left': '300px'
}, 'slow', 'linear').animate({
'left': '0',
'right': '0',
});
jQuery('.text').css('right', 'auto')
jQuery('.text').css('left', 'auto')
});
working demo : http://jsfiddle.net/UCTgR/12/ (Note: this demo has partial functionality yo just show what u missed, to check click on the banner)
I have a div that I want to go full-screen (100% width/height of Window size) onClick of a button.
How would I go about this using Javascript/jQuery?
DEMO
$('div').click(function() {
$(this).css({
position:'absolute', //or fixed depending on needs
top: $(window).scrollTop(), // top pos based on scoll pos
left: 0,
height: '100%',
width: '100%'
});
});
$('div.yourdivclass').click(function(){
$(this).css('height','100%').css('width','100%');
})
What have you tried? What didn't work?
Take a look at that:
http://jsfiddle.net/6BP9t/1/
$('#box').on('click',function(e){
$(this).css({
width:"100%",
height:"100%"
});
});
I would do this:
$('#idOfDiv').click(function() {
$(this).css({position:'fixed', height: '100%', width: '100%'});
});
jsfiffle: http://jsfiddle.net/P6tgH/
$('div').click(function(){
var win = $(window),
h = win.height(),
w = win.width();
$(this).css({ height: h, width: w });
});
http://jsfiddle.net/TQA4z/1/
This is an alternate to the answer marked as correct. Plus it gives him what he asked for to close the div.
Using toggle class is much easier than having your css in your jquery. Do everything you can do to keep css separate from JavaScript.
For some reason my https is effecting loading of the JavaScript on load of that jsfiddle page. I clicked on the Shield icon in chrome address bar and chose to run scripts.
Toggle Class Demo
Something like
$('#buttonID').click(function() {
$("div > div").toggleClass("Class you want to add");
});