I have a fancybox popup in which I have multiple accordions. So the size of the popup varies on clicking of these accordions. Each of the accordion is an anchor tag.
On expanding one or more accordions, there is a limit(max-height) to which my popup will expand, after which the content inside the popup becomes scrollable, i.e, the content inside the div with class .fancybox-inner .
Whenever an accordion is clicked I call $.fancybox.update() as the popup need to be re-sized and respositioned.
But $.fancybox.update() resets the current scroll position of the content inside popup.
So i made this function adjustPopup and call it when any of the accordion is clicked
function adjustPopup(target) {
var fancyboxInner = $('.fancybox-inner')[0],
scrollTop = fancyboxInner.scrollTop;
//$.fancybox.update() function resets the vertical scroll of fancybox popup, so we store the
//scrollTop before calling $.fancybox.update() and then assign it back when updated.
$.fancybox.update();
fancyboxInner.scrollTop = scrollTop;
}
But this doesn't work. Even though i set the proper scrollTop value its again reset to 0 somehow.
Does anyone know whats the issue here?
I found the solution.
I had to dig into $.fancybox.update() function where I found that this function does stuff asynchronously. So my scroll was getting reset even though I was setting the scroll right after calling update.
I realized that there is an event 'onUpdate' on which the update is actually completed.
So I modified my adjustPopup function to this:
function adjustPopup(target) {
var fancyboxInner = $('.fancybox-inner')[0],
scrollTop = fancyboxInner.scrollTop;
//$.fancybox.update() function resets the vertical scroll of fancybox popup, so we store the
//scrollTop before calling $.fancybox.update() and then assign it back when updated.
$.fancybox.one('onUpdate', function() {
fancyboxInner.scrollTop = scrollTop;
});
$.fancybox.update();
}
Thanks to everyone who might have put time into this.
According to this answer and Fancybox forum this works:
$('.image').fancybox({
helpers: {
overlay: {
locked: false
}
}
});
Related
im working on a site and I created my own menu for the website.
So the menu is hidden away in 0 opacity and z-index -1.
on button click the menu will show at the screen.
https://williamhrtanto.com/msa/about/ this is the site im working on so you guys can check directly how it currently works
the current problem is that whenever I click on the button to show the menu, it will go back to the top of the page
Im asking on how to wherever i click the menu will show up and wont move back to top of the page.
I've tried with fixed position and absolute position
thankyou
You have this JS code on your page:
<script>
jQuery(document).ready(function($){
// now you can use jQuery code here with $ shortcut formatting
// this will execute after the document is fully loaded
// anything that interacts with your html should go here
var buttonMenu = $('#menuButtonContainer');
var menuScreen = $('#menue');
buttonMenu.click(function(){
//alert('clicked');
if(menuScreen.css('opacity')=='0'){
menuScreen.css('opacity', '1');
menuScreen.css('z-index', '999');
}
else {
menuScreen.css('opacity','0');
menuScreen.css('z-index','-1');
}
});
});
</script>
in this place:
buttonMenu.click(function(){
//alert('clicked');
change to
buttonMenu.click(function(e){
e.preventDefault();
//alert('clicked');
note the e added as function argument and the new line e.preventDefault();
Remove opacity
Set display : none, position : fixed
After click set display block
You need to cancel the default event of the anchor tag.
Use this
$("#buttonMenue").click(function(evt) {
evt.preventDefault();
});
We have a baffling issue whereby when we try to open a modal dialog box from a parent page it opens with 2 vertical scrollbars next to each other. One controls the modal box, the other one controls the main page behind it.
To have 2 scrollbars is not ideal and have tried to implement a solution for this.
We added some javascript in the dialog box page which would set the style to overflow:hidden when the modal dialog is open.
<script>
function myOnLoad() {
window.parent.$('body').css('overflow', 'hidden');
}
and used....
<body onload="myOnLoad()">
This works and effectively removes the scrollbar in the page behind it (i.e it does what it should) however we also want to set the overflow back to ‘auto’ when the modal dialog is closed…
We have done this by adding this code..
<script type="text/javascript">
// close Modal
$("#close").click(function () {
window.parent.$('body').css('overflow', 'auto');
window.parent.$("iframe").attr('src', '');
window.parent.$(".modalDialog").removeClass('show');
});
However this does not seem to work as the modal dialog closes but the scrollbar is still hidden on the main page.
Can anyone tell me what I might be doing wrong here? I have tried different overflow properties but nothing seems to work
Ok try this, I think your page is reloading on click and thus executing your onload:
$("#close").click(function (e) {
e.preventDefault();
window.parent.$('body').css('overflow', 'auto');
window.parent.$("iframe").attr('src', '');
window.parent.$(".modalDialog").removeClass('show');
});
I think that using window.parent might be the problem since this refers to the parent of the iframe wich is gone. or something like that. just use jquery
you can try by just getting the body directly $("body"), asuming you are getting that click function to fire.
edit: i see this has been mentioned above
Add style to body as
body
{
padding-right:0px !important;
overflow-y:hidden !important;
}
I have a page with an HTML FORM to add/edit/delete Project Task rows. They are saved to a Database.
As this page can be very long/tall, right now there is a SAVE button at the top and bottom of page that uses AJAX to save all changes.
To make things easier, for the user to make a SAVE I am wanting to show a FIXED DIV across the top of the screen with a SAVE button.
This FIXED DIV should only show up when there are Un-Saved changes. So when the page load you do not see this right away until you make a change on the page. At that point it comes into view.
Clicking the AJAX Save button saves the Task records to Database and then the Fixed DIV/SAVE Button will go hidden again until another Change is detected.
Right now I have this like 90% working.
I have JavaScript which has EVENTS which call my showTaskUnSavedChangesHeaderBar() Function which is shown below when:
Text Input is changed
Textarea changed
Selection dropdown changed
Button Clicked to Add a New Task Row
Button Clicked to Delete Task Row/record
So as you see I have the code in place to Detect a CHANGE on the page. This then Triggers my Function which makes my Fixed DIV with Save button come into view.
Now once you click the Save button I saved the Data using AJAX and then call my hideTaskUnSavedChangesHeaderBar() Function which is also shown below.
This makes the Fixed DIV with Save button go back to being Hidden with it's CSS display: none property set.
Up until this point everything described above works as expected, except in my showTaskUnSavedChangesHeaderBar() Function I added some code to make the Fixed DIV only show when you are scrolled down the screen at least 100px so that it is not shown at the very top of screen right now.
This scroll trigger part also works fine.
The problem is, once you make a save and hideTaskUnSavedChangesHeaderBar() is called, it Hides the Fixed DIV but as soon as you scroll at all again, it keeps showing back up, even though no new CHANGES have been made to the Data on screen.
Just looking at the code below, can someone tell me what I am missing? When my hideTaskUnSavedChangesHeaderBar() Function is called and the DIV is hidden, it should Re-set the process until another Change on page is made but I must be missing something because as soon as it goes hidden a single px scroll up or down triggers it back into view again
UPDATE
It seems like when my hideTaskUnSavedChangesHeaderBar() Function is Called, I need to somehow kill this Event $(window).scroll(function() until the showTaskUnSavedChangesHeaderBar() Function is called again, is that even possible though?
I realize a JSFiddle page might be helpful, I will work on setting one up if there isn't a simple solution posted soon. I held off as my page is really complex and i'll have to dumb it down a lot to get a Fiddle working for the demo
// When there are Un-Saved changes on the Task Edit view, show a Fixed Header DIV with a SAVE Button
function showTaskUnSavedChangesHeaderBar(){
if ($('#task-edit-unsaved-header-bar').length > 0) {
var unSavedChangesHeaderBar = $('#task-edit-unsaved-header-bar');
var fixmeTop = 100;
$(window).scroll(function() {
var currentScroll = $(window).scrollTop();
if (currentScroll >= fixmeTop) {
unSavedChangesHeaderBar.css({
display: 'block',
position: 'fixed',
top: '0',
left: '10'
});
}
});
}
}
// When there are Un-Saved changes on the Task Edit view, show a Fixed Header DIV with a SAVE Button
function hideTaskUnSavedChangesHeaderBar(){
if ($('#task-edit-unsaved-header-bar').length > 0) {
var unSavedChangesHeaderBar = $('#task-edit-unsaved-header-bar');
unSavedChangesHeaderBar.css({
display: 'none'
});
}
}
You bound an event in your function
$(window).scroll(function() {
So after that this code will always fire on scroll. If you call showTaskUnSavedChangesHeaderBar it will even bind the handler multiple times, making it fire multiple times.
Solution
You have to unbind this event handler when not needed anymore. Even better would be to put it somewhere outside and just switch a flag variable in your functions so that your scroll handler knows what to do.
.hide-me { display: none !important; }
For hideTaskUnSavedChangesHeaderBar method call addClass('hide-me') and in showTaskUnSavedChangesHeaderBar call removeClass('hide-me')
Now the scroll event won't override display to 'block'.
So I have a website using the fancybox plug-in (http://fancybox.net/). I want the text inside of fancybox to be printable, so I wrote a function that sets everything but the elements in fancybox to have a display:none. Here's my function:
var everything = [];
var hideEreythang = function () {
var everything = document.querySelectorAll(':not(.fancybox-opened):not(body):not(html):not(#shervani)');
var i = 0;
while (everything) {
everything[i].style.display = "none";
i++;
}
}
Problem is, once you close fancybox everything is still set to display:none. Is there an event handler I can use that will be triggered by the close of fancybox (either by clicking the x button or clicking outside the box), so I can reset everything back to normal? I'm still pretty new at js; I know fancybox has something that does that (since it's how theirs works) so I went through their source but had no idea what to look for. It seems pretty complicated. Is there a way I could manage to do this?
Thanks a million.
By the way, I'm using an onClick to run this function (the same link they click to open the fancybox)
EDIT: I think I'm just going to have it load two stylesheets, once for when they click on fancybox and (the normal one) when they close fancybox. How (and where) do I put my onClose to get it to work?
In order to do something when fancybox was closed you can use onClosed event
onClosed: Will be called once FancyBox is closed
Sample
$("#tip5").fancybox({
'onClosed': function() {
// your logic
}
});
Im new to mootools.So please help me for the problem Im facing.I had a div which consists a href If I click then it will enter into a javascript file and it consists of color method.In that method I kept a script for by usng scroll method.According to my script.If that div is at the top and i click on href it shoud show redcolor and if the scroll is greater than zero then it should show another black color.But what happening is If i scroll down and click it intially it was showing red and it i scroll a bit then it showing black.My code is
window.addEvent('scroll', function () {
var scroll = window.getScroll().y;
if (scroll > 0) {
black
} else {
red
}
Can I know how to call scroll method as soon as it enter into color method in mootools
That is normal since you invoke the method when the window scrolls and not when you click the button as it will invoke the color method each time you scroll. Each time you click you want to know the updated scroll position not when you scroll the page without clicking the button (hope I understood that well...). And on page load you initially set the background-color to red.
var link = $('link');
var box = $('color-box');
link.addEvent('click', function(event){
event.preventDefault();
changeBgColorBox();
});
changeBgColorBox();
function changeBgColorBox () {
var scroll = window.getScroll().y;
if (scroll > 0) {
box.setStyle('background','black');
} else {
box.setStyle('background','red');
}
}
Here is a jsfiddle: http://jsfiddle.net/Bwv3S/40/
To invoke the method only when you scroll the page you would not need to invoke the method with the link being clicked at all. You would invoke the method onload or ondomready and onscroll.
http://jsfiddle.net/jLPpa/9/