Develop Reference

Lightbox evolution preventing the window from scrolling issue

I hope someone might be able to help me with this. I am currently using the lightbox evolution plugin to display some nice lightboxes on my page.
I noticed that it allows the user to continue to scroll up and down the page if the modal / lightbox is shown.
I have added the following code:
$('a.light-box').lightbox({
'onOpen' : function() {$('html, body').css({'overflow': 'hidden','height': '100%'});},
'onClose' : function() {$('html, body').css({'overflow': 'auto','height': 'auto'});}
});
It prevents the scrolling from happening, but if I launch a link half way down the page then it automatically tries to scroll to the top of the page which kinda defeats the purposes of the scrolling.
Is there any other css properties that I could use to prevent it from scrolling to the top of the page ?
thanks in advance

Add this to your script:
$('a.light-box').on('click', function(e){
e.preventDefault();
});

javascript style alert with link before user navigates away from page

I am looking at having a alert style box show up when a user tries to leave the page but I what I wanted to do is have a share link in the alert style box
I have read this ticket javascript before leaving the page and now am unsure if this is possible.
I realise this will run
$(window).bind('beforeunload', function(){
alert("hi");
});
Now I know you cannot add links to an alert window so am trying to get round this another way but cant think of how i would display a alert/popup before going to another page that has a link in
Can anyone suggest anything - is there a plugin that might do this?

Its better you not do even if u do a hack as if you find a bug and use it to do it one they they will fix it and you will be again at same point. This is a security risk suppose i want to close a tab and in code you opne new popups or do malicious things???? So browserts dont allow it. If user wants to go they are allowed u can use standard
window.onbeforeunload = function() { return 'You have unsaved changes!'; }
if you like So try this. istead of custom things.
DEMO

You cannot add links to an alert window. What you could do is use a jQuery Plugin like http://jqueryui.com/dialog/#default and call it within beforeunload function.
HTML
<div id="dialog" title="My Link">
My Link
</div>
jQuery
$(window).bind('beforeunload', function(){
$( "#dialog" ).dialog();
});
OR if don't want to use jQuery you could use a window.open
eg: http://www.quirksmode.org/js/popup.html

Jquery tooltip on dialog close button

In a web application that I am working on I have partial view that I display on a "details" page via a JqueryUI Dialog box. I am trying to add a JqueryUI tooltip for the close button, in the top right corner of the header, that comes stock with the dialog box. Below I have some of my code. I know the scripts will work from the location they are at currently in this web application due to my second function below. '.ui-dialog-titlebar-close' is the class that is applied to the close button in the dialog header (based off chrome firebug). The closest answer I've found to the solution was here https://forum.jquery.com/topic/tooltip-in-a-dialog-pop-up-without-hovering
Found this question similar to mine...
How to change the 'X' button in a jquery dialog box to read 'Close'
...any way I could manipulate the close button achieve what I asked like this? For example a ".addTitle()"?? About to tinker with this idea.
Any and all help or information is appreciated.
<script>
$(function() {
$('.ui-dialog-titlebar-close').tooltip({
content: function () {
return "test";
}
});
});
$(function () {
$('#testThing').tooltip();
});
</script>
With many thanks,
Rock

I would try using the create event on your dialog:
$("yourSelector").dialog({
create: function(){$(".ui-dialog-titlebar-close").attr("title","Your text goes here");}
});

This can be fixed by editing line which has
.addClass("ui-dialog-titlebar-close ui-corner-all")
in 'jquery.ui.dialog.js' or ('jquery.ui.all.js') page, It currently reads
.attr('role', 'button')
simply change it to
.attr({'role': 'button', 'title': "close (Esc)")
this will solve the issue

I think the easiest solution is to update the options configuration of jQuery UI dialog. Like:
$("#dialogConfirm").dialog({
autoOpen : false,
modal : true,
resizable : false,
dialogClass : "confirm-dialog",
closeText : "Click to Close the dialog" // Here is the Gem
});

jQuery popup (bPopup) fails to close as expected

I have created a popup using the lightweight jQuery plugin: bPopup.
I want the popup to appear on page load, and as such have the following code:
<script>
;(function($) {
$(window).load(function(){ //see edit below
$('#popup').bPopup({
opacity: 0.6,
modalClose: true
});
});
})(jQuery);
</script>
the customisation modalClose: true controls weather or not the popup is closed/dismissed on clicking on the popup, or surrounding overlay (see API)
However my popup successfully appears but does not dismiss, either when clicking on overlay OR when clicking on the element with the class that controls dismissal (by default, any element with class 'b-close' will also close the popup.
Any thoughts on where I am going wrong, or how I can find out what aspect is not working? Thanks
EDIT:
As per a suggestion in comments I have altered $(window).load(function(){ to $(document).ready(function(){however my problem persists

Discovered I was using 0.7.1 version of the popup, updated to 0.9.1 and that seems to have resolved the issue. Thanks to those who took a look.

How to get screen not to jump back to up when clicking div to open

i got page with multiple open/hide divs and the problem here is that everytime i try to click one to open or hide the screen jumps at the top of the page..
Anyone idea how to fix this? Javascript is used to hide divs.
Thanks!
$(function() {
$('a.hide').click(function() {
$(this).closest('.hideable').find('.hide-container').toggle();
});
$('a#hide-all').click(function() {
$('.hide-container').hide();
});
$('.hide-container').hide(); });

It sounds like you are using href="#", don't do that, build on things that work instead.

If you’re using an A tag to open close the DIV’s, it means that in Javascript you’ll need to disable the default action for the A tag.
In jquery for example:
$('a').click(function(e) {
e.preventDefault();
});