[jQuery] Cycle removes background image from thumbnails (pager)
Right, here goes:
I'm using a modified jQuery Cycle Plugin - 'goto' Demo 2 (aka: Poor
Man's pager) implementation of the Cycle plugin, this works fine in
FF2+, Op9, Saf3+ and Chrome2 but in IE cycle stops the background-
image from repeating!
As usual I cannot give out a public link due to NDA but I can give you
these two image locations to see the differences:
http://area51.slnmedia.com/cycle/cycle-issue-ff.jpg
http://area51.slnmedia.com/cycle/cycle-issue-ie.jpg
Finally, thank you for reading up to this point, hopefully together we
can sort this out!
Jon
Here is my current code.
html:
div id=gallery
div id=thumbnails/div
div id=slideshow
img id=large src=/_assets/img/gallery/gallery-
image01.jpg alt=Gallery Image width=738 height=578 /
/div
/div
css:
#gallery { width: 738px; float: right; position: relative; text-
align: center; }
#gallery #thumbnails { position: absolute; top: 0; left: 0;
width:
738px; height: 70px; background: transparent url('/_assets/img/gallery/
fff-50.png') 0 0 repeat !important; z-index: 1000; border-bottom: 1px
solid #c50a33; }
#gallery #thumbs { margin: 0; padding: 5px; width: 728px;
height:
60px; z-index: 1001; }
#gallery #thumbs li { width: 48px; height: 48px; margin: 5px;
padding:0; float: left; border: 1px solid #fff; }
#gallery #thumbs li a { width: 48px; display: block; }
script:
$('#thumbnails').append('ul id=thumbs/ul');
var $th = $('#thumbs');
var $ss = $('#slideshow');
// add slides to gallery
for (i = 2; i 13; i++ ) {
( i 10 ) ? x = '0' + i : x = i;
$ss.append('img
src=/_assets/img/gallery/gallery-image'+x+'.jpg
alt=Gallery Image '+i+' width=738 height=578 /');
}
// start the slideshow
$ss.cycle({
fx: 'fade',
cssBefore: {
zIndex: 1
},
timeout: 3000,
speed: 1500,
fit: 1,
cssAfter: {
zIndex: 0
}
});
// add the thumbnails to the DOM
$ss.children().each(function(i) {
( (i+1) 10 ) ? x = '0' + (i+1) : x = (i+1);
// create thumbnails
$('lia class=thumb
href=/_assets/img/gallery/gallery-image'+x
+'.jpgimg src=/_assets/img/gallery/thumbs/gallery-image'+x+'.jpg
alt=Gallery Image '+x+' width=48 height=48 //a/li')
// append it to thumbnail container
.appendTo($th)
// bind click handler
.click(function() {
// cycle to the corresponding slide
$ss.cycle(i);
return false;
});
});
[jQuery] jScrollPane issues
Evening All!
I'm having a bit of issue with the jScrollPane plugin by Kelvin Luck.
A couple of issues actually!
First, in non-IE browsers the scroll will not apply to the container
specified, even though that container IS wrapped by
the .jScrollContainer div by the script.
Second, the width of the container becomes as wide as the content
without any line breaks??
I'll post code below, and can send private url for those who wish to
see, unfortunately usual client rules apply on this!
Thanks in advance for any help!
Cheers,
Jon
All pretty damn simple but not working in Non-IE browsers?
Main container:
div class=wrapper-portfolio-content
h6Project Name/h6
div id=copy class=scroll-pane
pProject Description/p
/div
/div
CSS:
.wrapper-portfolio-content
{
float: right;
width: 213px;
height: 369px;
}
.scroll-pane {
width: 213px;
height: 349px;
overflow: auto;
}
DocReady JS:
//Solution for the scrolling content
$('.scroll-pane').jScrollPane({
showArrows: true,
scrollbarWidth: 16,
arrowSize: 16
});
[jQuery] jcarousellite css width issue?
Hello all!
I was wondering if anyone could shed some light on a problem I'm
facing? I'm using Ganeshji Marwaha's jcarousellite to create a slide
show of three (possibly more later) definition lists for client
contact details. Each DL contains three contacts. Each DL is held
within an LI which is a child of an UL which is a child of the
containing DIV.
Now, here's the kicker, and finally my question:
Why, will the LI's not adhere to the set width? Each of the DL's are
cut off by about 20px to the right, thereby slicing the text for the
contacts information if it reaches that far!
Please request online link for reference, as this is a client site!
I'm sure we all understand that!
Thanks in advance for any help!
J
HTML:
div id=carousel
ul
li
dl
dt class=h1 title=Contact NAME AND
DETAILSimg src=/images/
contact/thumbs/headshot.jpg width=80 height=100 class=left
alt=Contact Image /CONTACT NAMEbr /spanCONTACT POSITION/
span/
dt
dd class=p+44 (0)20 7### br /
a
href=mailto:cona...@email.com; target=_blank alt=Contact CONTACT
NAME AND DETAILS title=Contact CONTACT NAME AND DETAILS/a/dd
dt class=h1 title=Contact NAME AND
DETAILSimg src=/images/
contact/thumbs/headshot.jpg width=80 height=100 class=left
alt=Contact Image /CONTACT NAMEbr /spanCONTACT POSITION/
span/
dt
dd class=p+44 (0)20 7### br /
a
href=mailto:cona...@email.com; target=_blank alt=Contact CONTACT
NAME AND DETAILS title=Contact CONTACT NAME AND DETAILS/a/dd
dt class=h1 title=Contact NAME AND
DETAILSimg src=/images/
contact/thumbs/headshot.jpg width=80 height=100 class=left
alt=Contact Image /CONTACT NAMEbr /spanCONTACT POSITION/
span/
dt
dd class=p+44 (0)20 7### br /
a
href=mailto:cona...@email.com; target=_blank alt=Contact CONTACT
NAME AND DETAILS title=Contact CONTACT NAME AND DETAILS/a/dd
/dl
/li
[x3]
/ul
/div
CSS:
#carousel { overflow: hidden; visibility: visible; width: 600px;
height: 325px; position: relative; z-index: 2; width: 2000px; left:
-5000px; }
#carousel ul { margin: 0; padding: 0; list-style-type: none; }
#carousel li { width: 300px; }
#carousel dl { width: 300px; font-size: 11px;}
#carousel dt { height: 50px; }
#carousel dd { height: 40px; }
#carousel dt img { margin: 0 10px; }
#carousel .h1 { font-size: 20px; line-height: 0.8em; font-weight:
normal; }
#carousel .h1 span { font-size: 14px; }
#carousel .p { margin: 0 0 20px; }
JS:
//Contact Us Switches:
$(#carousel).jCarouselLite({
circular: false,
visible: 2,
scroll: 1,
btnNext: .more,
btnPrev: .less
});
[jQuery] jcarousellite slide widths issue
Hello all!
I was wondering if anyone could shed some light on a problem I'm
facing? I'm using Ganeshji Marwaha's jcarousellite to create a slide
show of three (possibly more later) definition lists for client
contact details. Each DL contains three contacts.
Each DL is held within an LI which is a child of an UL which is a
child of the containing DIV.
eg1:
div id=carousel
ul
li
dl
dt class=h1 title=Contact NAME AND
DETAILSimg src=/images/
contact/thumbs/headshot.jpg width=80 height=100 class=left
alt=Contact Image /CONTACT NAMEbr /spanCONTACT POSITION/span/
dt
dd class=p+44 (0)20 7### br /a
href=mailto:cona...@email.com; target=_blank alt=Contact CONTACT
NAME AND DETAILS title=Contact CONTACT NAME AND DETAILS/a/dd
dt class=h1 title=Contact NAME AND
DETAILSimg src=/images/
contact/thumbs/headshot.jpg width=80 height=100 class=left
alt=Contact Image /CONTACT NAMEbr /spanCONTACT POSITION/span/
dt
dd class=p+44 (0)20 7### br /a
href=mailto:cona...@email.com; target=_blank alt=Contact CONTACT
NAME AND DETAILS title=Contact CONTACT NAME AND DETAILS/a/dd
dt class=h1 title=Contact NAME AND
DETAILSimg src=/images/
contact/thumbs/headshot.jpg width=80 height=100 class=left
alt=Contact Image /CONTACT NAMEbr /spanCONTACT POSITION/span/
dt
dd class=p+44 (0)20 7### br /a
href=mailto:cona...@email.com; target=_blank alt=Contact CONTACT
NAME AND DETAILS title=Contact CONTACT NAME AND DETAILS/a/dd
/dl
/li
li
dl
dt class=h1 title=Contact NAME AND
DETAILSimg src=/images/
contact/thumbs/headshot.jpg width=80 height=100 class=left
alt=Contact Image /CONTACT NAMEbr /spanCONTACT POSITION/span/
dt
dd class=p+44 (0)20 7### br /a
href=mailto:cona...@email.com; target=_blank alt=Contact CONTACT
NAME AND DETAILS title=Contact CONTACT NAME AND DETAILS/a/dd
dt class=h1 title=Contact NAME AND
DETAILSimg src=/images/
contact/thumbs/headshot.jpg width=80 height=100 class=left
alt=Contact Image /CONTACT NAMEbr /spanCONTACT POSITION/span/
dt
dd class=p+44 (0)20 7### br /a
href=mailto:cona...@email.com; target=_blank alt=Contact CONTACT
NAME AND DETAILS title=Contact CONTACT NAME AND DETAILS/a/dd
dt class=h1 title=Contact NAME AND
DETAILSimg src=/images/
contact/thumbs/headshot.jpg width=80 height=100 class=left
alt=Contact Image /CONTACT NAMEbr /spanCONTACT POSITION/span/
dt
dd class=p+44 (0)20 7### br /a
href=mailto:cona...@email.com; target=_blank alt=Contact CONTACT
NAME AND DETAILS title=Contact CONTACT NAME AND DETAILS/a/dd
/dl
/li
li
dl
dt class=h1 title=Contact NAME AND
DETAILSimg src=/images/
contact/thumbs/headshot.jpg width=80 height=100 class=left
alt=Contact Image /CONTACT NAMEbr /spanCONTACT POSITION/span/
dt
dd class=p+44 (0)20 7### br /a
href=mailto:cona...@email.com; target=_blank alt=Contact CONTACT
NAME AND DETAILS title=Contact CONTACT NAME AND DETAILS/a/dd
dt class=h1 title=Contact NAME AND
DETAILSimg src=/images/
contact/thumbs/headshot.jpg width=80 height=100 class=left
alt=Contact Image /CONTACT NAMEbr /spanCONTACT POSITION/span/
dt
dd class=p+44 (0)20 7### br /a
href=mailto:cona...@email.com; target=_blank alt=Contact CONTACT
NAME AND DETAILS title=Contact CONTACT NAME AND DETAILS/a/dd
dt class=h1 title=Contact NAME AND
DETAILSimg src=/images/
contact/thumbs/headshot.jpg width=80 height=100 class=left
alt=Contact Image /CONTACT NAMEbr /spanCONTACT POSITION/span/
dt
dd class=p+44 (0)20 7### br /a
href=mailto:cona...@email.com; target=_blank alt=Contact CONTACT
NAME AND DETAILS title=Contact CONTACT NAME AND DETAILS/a/dd
/dl
/li
/ul
/div
Now in my CSS I style this as:
#carousel { overflow: hidden; visibility: visible; width: 600px;
height: 325px; position: relative; z-index: 2; width: 2000px; left:
-5000px; }
#carousel ul { margin: 0; padding: 0; list-style-type: none; }
#carousel li { width: 300px; }
#carousel dl { width: 300px; font-size: 11px;}
#carousel dt { height: 50px; }
#carousel dd { height: 40px; }
#carousel dt img { margin: 0 10px; }
#carousel .h1 { font-size: 20px; line-height: 0.8em; font-weight:
normal; }
#carousel .h1 span { font-size: 14px; }
#carousel .p { margin: 0 0 20px; }
Now, here's the kicker, and finally my question:
[jQuery] Re: Cross domain photo gallery using get().
You could try using the older XMLHttpRequest type of
WinHttp.WinHttpRequest.5.1
Here's a scriptlet I use to pull the data from another domain which
you could possibly use somehow:
var xmlhttp=false;
/[EMAIL PROTECTED] @*/
/[EMAIL PROTECTED] (@_jscript_version = 5)
// JScript gives us Conditional compilation, we can cope with old IE
versions.
// and security blocked creation of the objects.
try {
xmlhttp = new ActiveXObject(Msxml2.XMLHTTP);
} catch (e) {
try {
xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);
} catch (E) {
xmlhttp = false;
}
}
@end @*/
if (!xmlhttp typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
I also use a classic vbscript server-side script to read the data
which uses the WinHttp.WinHttpRequest.5.1 method, feel free to modify
this!
function loadXMLDoc(url)
set xmlhttp = Server.CreateObject(WinHttp.WinHttpRequest.5.1) '
using 5.1 from WinXP Sp1
call xmlhttp.open(GET,url,false)
call xmlhttp.send()
' Get the text retreived from the URL
if xmlhttp.Status = 200 Then xmlResponse = xmlhttp.ResponseText
' xmlhttp.close()
set xmlhttp = nothing
end function
Hope this might help you!
Cheers,
J
On Dec 8, 7:48 pm, Andy Matthews [EMAIL PROTECTED] wrote:
I'm participating in an event in which you post photos of yourself
each day (http://www.whiskerino.org/2007/creole/). The organizer of
the event created RSS feeds for each participant. I thought it would
be fun, and a good challenge to write a photo gallery using the Cycle
plugin that could be used by any of the participants
(http://www.commadelimited.com/code/whiskerino/slideshow.cfm).
It works great on my server, but I mistakenly assumed that the local
reference data.cfm (the file that does the work) made in the JS file
would always be made on my server. I just tried it locally and I'm
getting the dreaded cross domain XmlHttpRequest error. I want this to
work without the user have to install any code, or even have a hosting
company that offers a scripting language. I wonder now if this is even
possible.
On data.cfm, I'm using ColdFusion to read in the RSS feed, then I'm
looping over the feed and outputting the contents into div tags. You
can see the results
here:http://www.commadelimited.com/code/whiskerino/data.cfm
Can any of you suggest an alternate method that would work?
[jQuery] Re: Superfish, swfObject, z-index, and (of course) IE
Working on that atm! On Oct 11, 3:27 am, Joel Birch [EMAIL PROTECTED] wrote: Hi Jon, Thanks for your feedback on the commented CSS file! To help solve your problem though, with so many factors at work we really need a working page that demonstrates the issue you are trying to solve. Is this doable? Joel Birch
[jQuery] Re: Superfish, swfObject, z-index, and (of course) IE
{Jon hangs his head in shame for not thinking this through!}
OMG, I tried setting the parent and the grandparents z-index to bring
it over the lower container without going over the nav!
It never occurred to me to do the great-grandparent too!
Thank you, thank you, thank you Joel!
Now back to the client amends for the rest of the site!
(although, I will pass this one on, in FF on a Mac, the menu still
pushes the flash object down as it expands? But works fine over
images?)
In deepest gratitude,
Jon
On Oct 11, 10:18 am, Joel Birch [EMAIL PROTECTED] wrote:
Jon replied to me offlist with a secret link. I thought I would reply
with a solution here for completion's sake incase it helps anyone
else.
Long story short, IE has a thing about great-great-etc-grandparents
having z-index set. This should fix the issue for you Jon:
#header { z-index: 99; }
Good luck.
Joel Birch.
[jQuery] Superfish, swfObject, z-index, and (of course) IE
First, let me say thank you to Joel for making the new CSS for
Superfish so easy to configure now! All those comments make such the
difference!
and Second, here's my dilema:
We have a site, first thing that loads is a lovely flash movie which
resides in the main container below the horizontal navigation which
has a single dropdown from one choice. Once the movie has played the
user is presented with a static page with an additional nav on the
side (totally seperate from hNav) and a static hero shot image all
below the horzontal nav at the top. The user can navigate through the
site using the main horizontal nav at any point, either during the
flash movie or after. It all works fine, exactly as planned, in
Firefox; unfortunately the dropdown menu shows partially underneath
the main container if viewed in IE (both 6 7).
Having trolled through the differing posts about the above topics, I
have tried everything I can to get this to work!
Alas, I have failed.
I am begging anyone to please lend a hand and see where I have gone
wrong!
I am pasting the css I'm using, please feel free to comment,
postulate, or slam it all.
Thanks in advance!
Jon
codepre
/--/
the style calls held in the template:
link rel=stylesheet type=text/css href=/_assets/css/main.css
media=screen /
link rel=stylesheet type=text/css href=/_assets/css/
thickbox.css media=screen /
link rel=stylesheet type=text/css href=/_assets/css/
supafish.css media=screen /
/--/
Structural CSS pertaining to elements concerned:
#header {
position: absolute;
top: 0;
left: 5px;
width: 850px;
height: 56px;
margin: 0; padding: 0;
}
#content {
position: absolute;
top: 56px;
left: 275px;
width: 580px;
height: 580px;
margin: 0; padding: 0;
}
#hdrNav {
position: absolute;
top: 0;
right: 0;
width: 490px;
height: 56px;
z-index: 1;
}
#hdrNav li {
display: inline;
position: relative;
z-index: 1;
}
#hdrNav li a.toplevel {
display: block;
float: left;
width: auto;
height: 56px;
line-height: 56px;
margin: 0; padding: 0;
}
#hdrNav li img {
display: block;
float: left;
width: 7px;
height: 56px;
margin: 0; padding: 0;
}
#hdrNav li a#n1-home { width: 63px; background: #fff url('/_assets/img/
navigation/home.gif') 0 0 no-repeat; }
#hdrNav li a#n1-avby { width: 90px; background: #fff url('/_assets/img/
navigation/availability.gif') 0 0 no-repeat; }
#hdrNav li a#n1-lctn { width: 76px; background: #fff url('/_assets/img/
navigation/location.gif') 0 0 no-repeat; }
#hdrNav li a#n1-amts { width: 121px; background: #fff url('/_assets/
img/navigation/amenities.gif') 0 0 no-repeat; }
#hdrNav li a#n1-news { width: 62px; background: #fff url('/_assets/img/
navigation/news.gif') 0 0 no-repeat; }
#hdrNav li a#n1-cntc { width: 70px; background: #fff url('/_assets/img/
navigation/contacts.gif') 0 0 no-repeat; }
#hdrNav li a#n1-avby ul#n1-abvy-sub { position: relative; z-index:
99; }
#hdrNav li a:hover#n1-home,
#hdrNav li a:hover#n1-avby,
#hdrNav li a:hover#n1-lctn,
#hdrNav li a:hover#n1-amts,
#hdrNav li a:hover#n1-news,
#hdrNav li a:hover#n1-cntc { background-color: #eef3f7; }
/--/
Supafish CSS: (with changes made)
/* This file is commented in great detail for educational purposes.
There is also
* an uncommented version for use production use here:
* http://users.tpg.com.au/j_birch/plugins/superfish/superfish.css
*/
/ ESSENTIAL STYLES ***/
/* This first group of styles are most important for the function of
Superfish.
* The more cosmetic styling rules are grouped together below under
the heading
* ORIGINAL SKIN.
*
* Note that this CSS file will create the kind of menu demonstrated
on the main
* page of the Superfish documentation, ie. top tier of nav is
horizontal, with
* subsequent tiers vertical.
*/
/* remove any default styles */
.nav, .nav * {
margin:0;
padding:0;
list-style:none;
}
/* top ul.nav element */
.nav {
z-index:99;
line-height:1.0; /* makes calculating the 'top' value for first
submenu easier */
}
/* nested submenu ul elements */
.nav ul {
position:absolute; /* remove from flow and allow positioning */
top:-999em; /* hide submenu in screen-reader and search-engine
friendly way */
width:88px; /* VARIABLE. Must have a width for menu items to inherit.
Use ems so font scaling does not break design*/
}
/* submenu items */
.nav ul li,
.nav a { /* this affects top level anchors too */
width: 100%;/* stretch submenu
[jQuery] Re: Opacity in Superfish?
Joel,
That was exactly what I meant!
Thank you so much!
Could I make one suggestion for the superfish.css file; if I might?
Having the structural css seperate from the display css would allow us
to skin the menus without worrying about breaking the
functionality...
Granted, it's not that hard to figure out which goes where and does
what, but I'm thinking of those who don't have the same experience
others do!
Again, this is ONLY a suggestion, and I am eternally grateful for
Superfish and your help! It saved me a whole load of time (and hair)
with a current development.
J
On Sep 20, 4:11 pm, Joel Birch [EMAIL PROTECTED] wrote:
On 9/21/07, jon randahl [EMAIL PROTECTED] wrote:
Out of simple curiosity, is there any way to set a degree/level of
opacity withsuperfish?
I'm only asking as you can set the default to hide/show, is there any
other options?
Thanks in advance!
J
Hi Jon,
I'm not positive I understand what you want to do, but is this the
sort of thing you want?
$('#nav').superfish({
animation : { opacity : .8 }
});
Joel Birch.
[jQuery] Opacity in Superfish?
Out of simple curiosity, is there any way to set a degree/level of opacity with superfish? I'm only asking as you can set the default to hide/show, is there any other options? Thanks in advance! J
