We Keep Coding

Lightslider - first img not showing until window resize

I am facing a strange thing. I am using lightslider to display my img-s. Now when I use it inside the regular dom, so the one that is open everything works fine. But sometimes I show a modal window on top of my regular one, and there I have the problem that the first img is never shown. I can scroll to the others, but when I comes to select the show the first one, it appears for a second and then dissapears. After some trying a found out that when I resize the browser window (by hand) for just one pixel then I am able to select the first img (if it was already selected but not visible it appears on its own)
Does anybody know what the reason could be, or if not, how can I simulate the behaviour of the window resize (that would be the quick and dirty solution) ?
Regards

you can put this $( window ).resize(); after the script. That should work. However you can use the following code snippet too:
onSliderLoad: function() {
$( window ).resize();
}, onAfterSlide: function() {
$( window ).resize();
}
don't use too many this script $( window ).resize(); ,because jquery will display error "exceeded RangeError: Maximum call stack size exceeded" , if it shows that error, just use one $( window ).resize();

Anyone still having this issue with a carousel.. A quick fix is by toggling between ID's, one of which has "height:0px" and overflow hidden. This one really really killed me so hope it helps someone out there.
#demo {
visibility: hidden;
overflow: hidden;
height: 0px;
}
#demo_visible {
overflow: hidden;
}
jQuery(document).ready(function ($) {
$(".arrow_link").click(function (e) {
e.preventDefault();
if ($(".demo").attr('id') == 'demo_visible') {
$(".demo").attr('id', 'demo');
} else {
$(".demo").attr('id', 'demo_visible');
}
});
});

you can put $(window).resize(); after the lightSlider() script.
You can use the following code snippet too:
setTimeout(() => {$( window ).resize()}, 500);
Here you can use setTimeout Function, because some time script executed before load the DOM.

Javascript won't load using jQuery Mobile with navigation-geolocation

I am having an issue with jQuery Mobile, javascript and get geolocaton.
I am currently using following to get the code to load, when I enter the page:
$(document).on('pageinit', function(){
If the user has set visibility to visible, a div with the ID visible is shown, this I use to call the geolocation the first time:
if ($('#visible').length) {
navigator.geolocation.getCurrentPosition(sucessHandler, errorHandler);
}
After this I call the geolocation every 20th second:
setInterval(function() {
if ($('#visible').length) {
navigator.geolocation.getCurrentPosition(sucessHandler);
}
}, 20000);
My issue is, if I leave the page for one of the subpages, and return to this page, these codes won't run again. I have tried the following to load the javascript, instead of pageinit:
$(document).on('pagebeforeshow', '#index', function(){
and
$(document).on('pageinit', '#index', function()
I tried loading it in the body of the index as well.
Any help would be greatly appreciated =)
Regards, Fred

Firstly, you may want to consider replacing navigator.geolocation.getCurrentPosition() with navigator.geolocation.watchPosition(). This will call your success or error handler functions each time the device receives a position update, rather than you needing to ping it every 20 seconds to see if it has changed.
With regard to page changing, so long as you’re using a multi-page template, then the handler function should get called while navigating to and from any sub-pages.
Here’s a JS fiddle illustrating this
Hope this helps!

jquery tabs ajax problem

This my javascript :-
<script type ="text/javascript">
$(function()
{
$("#tabs").tabs({ cache: true ,fx: { opacity: 'toggle' }});
});
</script>
And this is my html which loads php file using ajax :-
<ul>
<li>General</li>
<li>Messages</li>
<li>Pics</li>
<li>Facilities</li>
</ul>
The question i want to know is when Messages.php is loaded does the javascript onload event fire? I want to know because i want to take my textarea and convert it into editor. However i am not able to capture window.onload event :-
window.onload = function(){
alert('hello');
}
and further if i write something in :-
$(function(){
}
It works in Opera and IE but sometimes doesn't work sometimes. To sum, how do i capture window.onload in the above situation?
EDIT
Looks like $(function(){ } seems to be working, the problem is with fx: { opacity: 'toggle' }. When i remove effect, it works fine.
Thanks in advance :)

The window.onload event will not fire, in the document you're loading into it already fired earlier.
You should be able to use document.ready, e.g. $(function() { }); in the page you're fetching and it work, provided you're on at least jQuery 1.4.2+. Several issues were fixed with events in the 1.4.2 release, including one around this being inconsistent, if you're using 1.4.1 or below, I can't promise it being 100% consistent.
Alternatively, you can have the code in the main page instead of inside Messages.php and run the code in the load event of the tabs, like this:
$("#tabs").bind("tabsload", function(event, ui) {
$('.myEditorClass', ui.panel).myEditorPlugin();
});

I've noticed in some browsers that if you use display:none it won't render anything inside that tag, it just ignores whatever's in there because it's not being displayed. I'm not sure if that fx setting is using .hide(), but that could part of the issue.
Also why not set up a function on the loaded pages called "init", then have ajax do a callback to trigger it?

Javascript appending onload to a popup window

I'm trying to append an onload event to a popup window in the following manner:
var explorerWindow = window.open(PARAMS...);
explorerWindow.onload = function() {window.opener.unlockObj(id);}
The idea is to make the button that generates the popup window readonly, making it usable again once the popup window has loaded all of its contents. However, the event doesn't seem to be firing at all. I even changed it to the following and got nothing:
explorerWindow.onload = function() {alert("bloop");}
Is there something terribly wrong with my syntax or am I missing something else entirely? Also, I'm using JQuery if there are any appropriate gems there that will help in this situation. I tried the following with similar results, but I'm not so sure I got the call right:
$(explorerWindow).load(function() {alert("bloop");});
Any help is greatly appreciated.

This won't work in all browsers. I'd suggest putting the onload handler in the document loaded into the new window and have that call out to the original page:
window.onload = function() {
opener.doStuff();
}

I actually managed to get it working in the browsers I have to support with the following:
explorerWindow.onload = new function() { explorerWindow.opener.unlockObj(id); }
Thanks for the reply though Tim.

close fancy box from function from within open 'fancybox'

Hi all i want to be able to close fancyBox when it is open from within.
I have tried the following but to no avail:
function closeFancyBox(html){
var re = /.*Element insert complete!.*/gi;
if( html.search( re ) == 0 ){
$.fancybox.close();
//alert("foo");
}
}
foo will open in dialog but will not close down. any hints?

Try this:
parent.$.fancybox.close();
See Fancybox API documentation.

According to http://fancybox.net/faq
How can I close FancyBox from other element? ?
Just call $.fn.fancybox.close() on
your onClick event
So you should just be able to add in the fn.

If you just want to close the fancy box it is sufficient to close it.
$('#inline').click(function(){
$.fancybox.close();
});

It is no use putting the .fn, it will reffers to the prototype.
What you need to do is $.fancybox.close();
The thing is that you are maybe experiencing another error from js.
There are any errors on screen?
Is your fancybox and jquery the latest releases?
jquery is currently in 1.4.1 and fb in 1.3 something
Experiment putting a link inside the fancybox and put that function in it.
You probably had read that, but in any case,
http://fancybox.net/api
One thing that you probably might need to do is isolate each part in order to realize what it is.

You can even close fancybox by get close button id and call click event on that id.
<input type='button' value='Cancel' onclick='javascript:document.getElementById("fancybox-close").click();' />
It works for me!

i had the same issues a longtime then i got the solution by the below code.
please use
parent.jQuery.fancybox.close()

Bit of an old thread but ...
Actually, I suspect that the answer to the original question about how to close the window from within the window has more to do with the fact that the click event is not attached to the element. If the click event is attached in document.ready the event will not be attached when fancybox creates the new window.
You need to re-apply the click event once the new window . Probably the easiest way to do this is to use onComplete feature.
This works for me:
$(".popup").fancybox({
'transitionIn' : 'fade',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 400,
'overlayShow' : true,
'overlayColor' : '#000022',
'overlayOpacity' : 0.8,
'onComplete' : function(){$('.closer').click(function(){parent.$.fancybox.close();})}
});
Actually, after a bit of thought 'live' rather than 'click' or 'bind' might work just as well.

Use this to close it instead:
$.fn.fancybox.close();
Judging from the fancybox source code, that is how they handle closing it internally.

After struggling myself with this I found a solution that works just replace the $ with jQueryjQuery.fancybox.close() and I made it an inline script on an onClick. Going to check if i can call it from the parent

For those who spent hours like me to find out the solution for inline type: window.setTimeout(function(){$.fancybox.close()},10);

I ended up using:
<script>parent.$("#fancy_close").click();</script>
I guess the version of fancybox we have doesn't have a $.fancybox.close() function for me to call :(
FYI, I just wanted the page to close the fancybox, as it had finished its processing in PHP.

Add $.fancybox.close() to where ever you want it to be trigged, in a function or a callback, end of an ajax call!
Woohoo.

Within an iframe use - parent.$.fancybox.close();

to close fancybox by funciton its necessary to make setTimtout to the function that will close the fancybox
Fancybox needs some time to acept the close function
If you call the function directly will not work
function close_fancybox(){
$.fancybox.close();
}
setTimeout(close_fancybox, 50);

yes in Virtuemart its must be button CLOSe-continue shopping, not element, because after click you can redirect..
i found this redirect bug on my ajax website.

If anyone is looking for how to close all instances in Fancybox 4 you can just use Fancybox.close();

To close ajax fancybox window, use this:
onclick event -> $.fancybox.close();
return false;