Re: [jQuery] Re: getjson request an unavailable page
On Wed, 18 Nov 2009, Humpty Dumpty wrote: Thanks, I though that there was a JSON solution; ok, I will try by the use of ajax but nobody that used getjson had this problem? As a matter of fact, I just did. As I understand it $.getJSON() seems to be just a wrapper around an $.ajax() request. So I used $.ajaxSetup() to define an error handling routine. see: http://stackoverflow.com/questions/572991/jquery-getjson-doesnt-trigger-callback and: http://docs.jquery.com/Ajax/jQuery.ajax
[jQuery] Re: Cycle: replace slide in running slideshow?
Mike,
Thanks for this. I did find a solution by setting a flag for the first
time through the cycle since there were other things too I wanted to
happen only on the first time through. After the #title element is shown,
I simply replaced its html with a different image and content. A stripped
down version looks something like this:
jQuery(document).ready(function($){
var firstTime = true;
$('#cycle').cycle({
fx:'fade',
speed:1500,
timeout:7000,
delay: 5000,
before: doBefore
});
function doBefore() {
if (firstTime == true){
var i = $(.slide).index(this);
if (i == 1){
$(#title).html(img src='newimage.jpg' / + div
class='caption'foobar/div);
firstTime = false;
};
};
};
});
This seems to work. I gather setting such a global variable is regarded as
bad form, but in such a small application it seemed harmless. Your
solution seems to avoids this.
Thanks again, and thanks too for your generosity in developing this very
generally useful plugin.
Jon
On Sun, 30 Aug 2009, Mike Alsup wrote:
Is there a way to replace the first slide in a running slideshow such
that it's shown only once??
Here's an example of something similar - might give you some ideas:
http://www.malsup.com/jquery/cycle/title.html
[jQuery] Cycle: replace slide in running slideshow?
Is there a way to replace the first slide in a running slideshow such
that it's shown only once??
I've been trying variations on something like this with no success. The
element is replaced, but cycle doesn't show it.
function doBefore(){
var i = $(.slide).index(this);
if (i == 1){
$(#first).replaceWith(div class='slide' id='repl' style='position:
absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0;
width: 640px; height: 640px;'img src='replacement-image.jpg' /div
class='caption'foobar/div/div);
}
}
[jQuery] Re: cycle plugin pagerAnchorBuilder
OK, there were no takers on this. In the unlikely event that anyone's
interested, here's the work-around that I arrived at. It's simple enough
that I think it will not cause me any problems, but I sure would like to
know what the right solution might be.
In the HTML, an image collection like this:
div id=cycleport
img class=cimg src=images/1.jpg alt = /
img class=cimg src=images/2.jpg alt = /
img class=cimg src=images/3.jpg alt = /
img class=cimg src=images/4.jpg alt = /
img class=cimg src=images/5.jpg alt = /
img class=cimg src=images/6.jpg alt = /
/div
using cycle, I navigate this collection with prev/next links, but I also
wanted to provide a drop-down list allowing the user to jump straight to
specific images and then go prev/next from there.
ul id=clientList
lia href=#Foo text/a/li
lia href=#Bar text/a/li
lia href=#Baz text/a/li
/ul
My solution (a very unsatisfying kluge) was to simply add empty, dummy
lines to the list thus:
ul id=clientList
li class=noshow/li
lia href=#Foo text/a/li
li class=noshow/li
li class=noshow/li
lia href=#Bar text/a/li
lia href=#Baz text/a/li
/ul
to allow the user to go directly to 2.jpg, 5.jpg, and 6.jpg by choosing
from the list and using a cycle call like this:
$('#cycleport').cycle({
prev: '#prev',
next: '#next',
timeout: 0,
before: swapText,
pager: '#clientList',
pagerAnchorBuilder: function(idx, slide) {
return '#clientList li:eq(' + (idx) + ') a';
}
});
If anybody has a cleaner solution, I'd sure love to know about it.
Jon
[jQuery] Re: cycle plugin pagerAnchorBuilder
Mike Alsup,
Thanks so much for pointing out the obvious; no really, I mean it
sincerely. I so often overlook the obvious, to my cost. I didn't realize
that I could simply pass a bare integer to the cycle call.
Admiration and gratitude for a wonderfully well thought out and effective
tool!
Jon
This is what I'd do:
ul id=clientList
lia href=# data-slide=2Foo text/a/li
lia href=# data-slide=5Bar text/a/li
lia href=# data-slide=6Baz text/a/li
/ul
$(function() {
$('#cycleport').cycle({
prev: '#prev',
next: '#next',
timeout: 0,
before: swapText
});
$('#clientList li a').click(function() {
var slide = $(this).attr('data-slide');
slide = parseInt(slide);
$('#cycleport').cycle(slide);
return false;
});
});
[jQuery] firefox hover bug with 'title' attribute?
jQuery 1.2.6 and Firefox 3.0.7 on MacBook OS X 10.5.5 If I might renew an unanswered thread: I've encountered this twice now in different contexts. This only occurs in FF, so far as I know. If .hover() is acting on a div that contains an image link, and that link has a title attribute, hover misbehaves by firing when the mouse is moved after a pause. an example of the problem can be seen here: http://home.myuw.net/jjcrump/test/opacity-test.html The first element has an image link with a title attribute, the second has link with no title attribute. If you hover over the first one and let the cursor pause a moment, FF's tooltip with the title text appears. Then when you move the mouse, the hover function fires again. The link's hover property seems to be interfering with jQuery's .hover() function. Any Ideas? Jon
[jQuery] Re: firefox hover bug with 'title' attribute?
Waseem thanks for responding. On Fri, 1 May 2009, waseem sabjee wrote: does the same instance occur if you use any of the jquery 1.3.x scripts ? I updated the example at http://home.myuw.net/jjcrump/test/opacity-test.html to use jquery 1.3.2 and it still shows the same effect. I can live without the title attribute, but I'm curious, and puzzled. Jon On Fri, May 1, 2009 at 12:21 AM, Jon Crump jjcr...@myuw.net wrote: jQuery 1.2.6 and Firefox 3.0.7 on MacBook OS X 10.5.5 If I might renew an unanswered thread: I've encountered this twice now in different contexts. This only occurs in FF, so far as I know. If .hover() is acting on a div that contains an image link, and that link has a title attribute, hover misbehaves by firing when the mouse is moved after a pause. an example of the problem can be seen here: http://home.myuw.net/jjcrump/test/opacity-test.html The first element has an image link with a title attribute, the second has link with no title attribute. If you hover over the first one and let the cursor pause a moment, FF's tooltip with the title text appears. Then when you move the mouse, the hover function fires again. The link's hover property seems to be interfering with jQuery's .hover() function. Any Ideas? Jon
[jQuery] Re: Photo Gallery, Thumbnail navigation
Kevin,
On Mon, 16 Mar 2009, kmoll092 wrote:
I am looking at jcarousel and i am a little confused on how to
integrate and can't seem to find great documentation, is there a site
with example code on how to integrate it into my site. If anyone else
has a suggestion on the best way to acheive my goal I would love to
hear it.
If you follow carefuly the tutorial at
http://sorgalla.com/projects/jcarousel/#Getting-Started
you'll be on your way.
The example at:
http://sorgalla.com/projects/jcarousel/examples/static_simple.html is very
instructive. Just have a look at the source.
My initial thought was that I could enter the thumbnails into an
array, have jquery load the files with a link and when the user
You don't have to do anything special with the thumbnails. In your html,
just create an ordinary ul list where each line is like this:
liimg src=path/to/img width=75 height=75 alt= //li
then make sure you reference the necessary libraries in the head of your
document thus:
script type=text/javascript
src=path/to/jquery-1.2.3.pack.js/script
script type=text/javascript
src=path/to/jquery.jcarousel.pack.js/script
and reference the necessary css files thus:
link rel=stylesheet type=text/css href=path/to/jquery.jcarousel.css
/
link rel=stylesheet type=text/css href=path/to/skins/tango/skin.css
/
initialize jcarousel like this:
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});
And the jcarousel library does the rest. You can position the ul with
the usual css rules and you can tweak the tango/skin.css to get the look
you want or build your own skin based on it.
good luck,
Jon
[jQuery] Re: test for .is(:visible) fails in Safari
Ricardo,
Thanks so much for responding. That's very helpful. My use of events has
been very rudimentary so far; your .bind() example has helped me
understand them more fully. And now that I know what I'm looking for,
various approaches to the problem have been illuminating as well.
for example ajp's recent thread::
http://osdir.com/ml/jquery-dev/2009-02/msg00615.html
On Sat, 14 Mar 2009, ricardobeat wrote:
Try this:
el.find(#pic)
.attr({src: pix[imgName].imgSrc, name: imgName})
.bind('load readystatechange', function(e){
if (this.complete || (this.readyState == 'complete' e.type =
'readystatechange')) {
el.fadeIn(slow);
$(#loading).hide();
};
});
The onload event for images is a cross-browser mess.
- ricardo
[jQuery] Re: Photo Gallery, Thumbnail navigation
kmoll,
third slot. It seems like this would be pretty easy, but it is
killing me trying to figure it out. I have spent weeks on it with no
Turns out, it's not really that easy, as you've discovered; however, the
hard work has been done for us in jCarousel.(I know there are other
libraries that implement the same idea as well). I'm pretty new to jQuery
too, but I was delighted to find that using the jquery extension,
jCarousel, turned out to be very straightforward. Check it out at:
http://sorgalla.com/jcarousel/
Jon
On Sun, 15 Mar 2009, kmoll092 wrote:
I am building a photo gallery for a friend using JQuery. I have div
with thumbnails below a main picture that changes based on the
thumbnail you click. I want to be able to add a next and previous
button for the thumbnails, because there are a lot of them. I am
relatively new to JQuery, but am learning quickly. I am wondering
what the best solution for this is.
Currently I have the the thumbs loaded and you can click on them to
change the image, but I can't figure out how to only show the first
three thumbnails, and have a next/previous button to scroll throught
the thumbnails and then change the links when the thumbnails change.
Ideally three thumbs would show and clicking the next button would
move the second thumbnail to the first slot, the third thumbnail to
the second slot and now the fourth thumbnail would now show in the
third slot. It seems like this would be pretty easy, but it is
killing me trying to figure it out. I have spent weeks on it with no
solution. this is the code I have so far
$(document).ready(function() {
$('#thumbs a').click(function(evt) {
evt.preventDefault();
var imgPath = $(this).attr('href');
var oldImage=$('#photos img');
var newImage = $('img src=' + imgPath + '');
newImage.hide();
$('#photos').prepend(newImage);
newImage.fadeIn(1000);
oldImage.fadeOut(000,function(){
$(this).remove();
});
}); // end click
$('#thumbs a:first').click();
}); // end ready
then I have an empty dive for the photos and the div for the thumbs
looks like this:
div id=thumbs
a href=images/portrait1.jpgimg
src=images/portrait1_th.jpg /
/a
a href=images/portrait2.jpgimg src=images/
portrait2_th.jpg //a
a href=images/portrait3.jpgimg src=images/
portrait3_th.jpg //a
a href=images/portrait4.jpgimg src=images/
portrait4_th.jpg //a
a href=images/portrait5.jpgimg src=images/
portrait5_th.jpg //a
/div
any help would be great I am going crazy with this
[jQuery] Re: test for .is(:visible) fails in Safari
Dear all,
OK, solved it myself in case anyone's still listening. It still remains a
puzzle why safari on Mac interprets the code differently.
The if/else test below isn't necessary. The fadeOut was executing, but the
.load() callback failed when the .thumb clicked was the same one as the
previous click. Both FF and IE didn't blink when the src of #pic remained
the same, but safari wouldn't execute the .load callback because nothing
loaded: the src of #pic remained the same.
The solution for my purposes was to set the src of #pic to null and then
re-set it to pix[imgName].imgSrc whatever it might be, then .load() sees
that something has loaded and executes the callback.
Is this a known discrepancy between how FF, IE, and Safari interpret
.load(), or something completely screwy and idiosyncratic to my klugy
code? (jQuery 1.2.6, by the way, in safari 3.1.2)
Jon
On Fri, 13 Mar 2009, Jon Crump wrote:
Dear all,
I'm not sure if this is a jQuery question or not, but I got the following
code to work in FF, but it fails in Safari:
$(.thumb).click(function() {
var imgName = $(this).attr(alt);
var el = $(#dropdown);
if (el.is(:visible) $(#pic).attr(name) == imgName) return;
else {
el.fadeOut(slow, function() {
$(#loading).show();
el.find(#textContent)
.text(pix[imgName].aText);
el.find(#pic)
.attr({src: pix[imgName].imgSrc, name: imgName})
.load(function(){
el.fadeIn(slow);
$(#loading).hide();
});
});
}
});
The if/else test was necessitated by the fact that if the user clicked on the
same thumbnail image twice, the #dropdown element faded out and didn't fade
back in.
In FF clicking on the same image twice makes no change, but in Safari,
clicking on the same image twice makes no change IF #dropdown is visible, if
#dropdown is NOT visible and the user clicks on the same thumbnail that was
last clicked on, the loading gif displays but the #dropdown does not.
I'm sure this is just my own javascript inexperience, but can anyone suggest
where I'm going wrong?
Thanks,
Jon
[jQuery] test for .is(:visible) fails in Safari
Dear all,
I'm not sure if this is a jQuery question or not, but I got the following
code to work in FF, but it fails in Safari:
$(.thumb).click(function() {
var imgName = $(this).attr(alt);
var el = $(#dropdown);
if (el.is(:visible) $(#pic).attr(name) == imgName) return;
else {
el.fadeOut(slow, function() {
$(#loading).show();
el.find(#textContent)
.text(pix[imgName].aText);
el.find(#pic)
.attr({src: pix[imgName].imgSrc, name: imgName})
.load(function(){
el.fadeIn(slow);
$(#loading).hide();
});
});
}
});
The if/else test was necessitated by the fact that if the user clicked on
the same thumbnail image twice, the #dropdown element faded out and didn't
fade back in.
In FF clicking on the same image twice makes no change, but in Safari,
clicking on the same image twice makes no change IF #dropdown is visible,
if #dropdown is NOT visible and the user clicks on the same thumbnail that
was last clicked on, the loading gif displays but the #dropdown does not.
I'm sure this is just my own javascript inexperience, but can anyone
suggest where I'm going wrong?
Thanks,
Jon
