[thelist] jquery clickable slider

DAVOUD TOHIDY dtohidy at hotmail.com
Sun Jun 5 21:58:34 CDT 2011


As I suspected the issue was with z-index. So I solved it by having higher
z-index for #gallery along with positioning #gallery and #silder.

see : http://jsfiddle.net/KXJfk/

Thanks a lot for the replies Barney.

Best
davoud

> From: barney.carroll at gmail.com
> Date: Sun, 5 Jun 2011 22:39:23 +0100
> To: thelist at lists.evolt.org
> Subject: Re: [thelist] jquery clickable slider
> 
> Davoud,
> 
> The z-index issue will be down to CSS. jsfiddle also allows CSS input (the
> top right box)…
> 
> Regards,
> Barney Carroll
> 
> barney.carroll at gmail.com
> 07594 506 381
> 
> 
> On 5 June 2011 21:22, DAVOUD TOHIDY <dtohidy at hotmail.com> wrote:
> 
> >
> >
> > ok it appears to be a z-index problem for FF. I will try to fix it myself
> > if not I will ask.
> >
> > Thanks
> > davoud
> >
> >
> > > From: barney.carroll at gmail.com
> > > Date: Sun, 5 Jun 2011 20:15:58 +0100
> > > To: thelist at lists.evolt.org
> > > Subject: Re: [thelist] jquery clickable slider
> > >
> > > Davoud,
> > >
> > > Please read the emails I sent you and try either of my suggestions. If
> > > neither of them work, please explain what I have misunderstood.
> > >
> > > Regards,
> > > Barney Carroll
> > >
> > > barney.carroll at gmail.com
> > > 07594 506 381
> > >
> > >
> > > On 5 June 2011 20:10, DAVOUD TOHIDY <dtohidy at hotmail.com> wrote:
> > >
> > > >
> > > > I missed to provide you with the other script that the scroller uses as
> > > > well sorry.
> > > > here it is: http://jsfiddle.net/Me3qS/
> > > >
> > > > I do not need to introduce the links via Javascript. It does not work
> > for
> > > > me when
> > > > in html. nothing happens when clicking on the images if I want to use
> > html.
> > > >
> > > > Thanks
> > > > davoud
> > > >
> > > >
> > > > > From: barney.carroll at gmail.com
> > > > > Date: Sun, 5 Jun 2011 20:00:49 +0100
> > > > > To: thelist at lists.evolt.org
> > > > > Subject: Re: [thelist] jquery clickable slider
> > > > >
> > > > > Davoud,
> > > > >
> > > > > If I remove the $('#slider').click() function, the link to about.html
> > > > > behaves as expected. The other images are not wrapped in links, so
> > they
> > > > > don't do anything. I would personally recommend you add links in the
> > > > markup,
> > > > > as you have done for this one — so your markup would end up as
> > follows:
> > > > >
> > > > >
> > > > > <ul id="gallery">
> > > > >   <li><a href="about.html"><img src="images/mount3.jpg" width="510px"
> > > > height
> > > > > ="411px" alt="" /></a> </li>
> > > > >   <li><a href="contact.html"><img src="images/mount2.jpg" width="510"
> > > > height
> > > > > ="411" alt=""/></a></li>
> > > > >   <li><a href="register.html"><img src="images/mount1.jpg"
> > width="510"
> > > > > height="411" alt=""/></a></li>
> > > > > </ul>
> > > > >
> > > > >
> > > > >
> > > > > If you must introduce the links via Javascript (why?), then it could
> > be
> > > > done
> > > > > like this:
> > > > >
> > > > > //Attach new links to each image (function linkImgs(){ var URLs =
> > > > > ['about.html','contact.html','register.html']
> > > > > $('#slider img').each(function(i){ $(this).wrap('<a href="' + URLs[i]
> > +
> > > > > '"/>') }) }())
> > > > >
> > > > > However it is counter-intuitive to write this script — it is
> > essentially
> > > > > writing pre-determined markup, and there's no reason you can't do
> > that in
> > > > > the HTML.
> > > > >
> > > > >
> > > > > Regards,
> > > > > Barney Carroll
> > > > >
> > > > > barney.carroll at gmail.com
> > > > > 07594 506 381
> > > > >
> > > > >
> > > > > On 5 June 2011 15:27, DAVOUD TOHIDY <dtohidy at hotmail.com> wrote:
> > > > >
> > > > > >
> > > > > > Thanks for replying Barney.  Since I have provided the link for
> > > > scroller
> > > > > > that is why
> > > > > > I did not provide all the code. Sorry about that.  but here it is
> > the
> > > > code
> > > > > > at:
> > > > > >
> > > > > > http://jsfiddle.net/DHmcG/
> > > > > >
> > > > > > I have added the cursor:pointer and the code for click function as
> > > > provided
> > > > > > before.
> > > > > >
> > > > > > Thanks
> > > > > > davoud
> > > > > >
> > > > > >
> > > > > >
> > > > > >
> > > > > >
> > > > > > > From: barney.carroll at gmail.com
> > > > > > > Date: Sun, 5 Jun 2011 13:04:32 +0100
> > > > > > > To: thelist at lists.evolt.org
> > > > > > > Subject: Re: [thelist] jquery clickable slider
> > > > > > >
> > > > > > > Davoud,
> > > > > > >
> > > > > > > Either you're not providing nearly enough information, or I've
> > > > > > misunderstood
> > > > > > > something fundamental. Usually with "I don't know what I'm doing
> > > > wrong"
> > > > > > > questions the best thing is to provide a URL, either where the
> > actual
> > > > > > code
> > > > > > > is, or one created by jsfiddle.net.
> > > > > > >
> > > > > > > On 4 June 2011 15:55, DAVOUD TOHIDY <dtohidy at hotmail.com> wrote:
> > > > > > > >
> > > > > > > > I would like to add urls to the images of scroller.
> > > > > > >
> > > > > > > I presume you mean you would like to wrap the images in links
> > (<a/>)
> > > > with
> > > > > > > HREF values. Why can't you do this in the HTML? It doesn't sound
> > like
> > > > > > > Javascript is necessary from the outset.
> > > > > > >
> > > > > > >
> > > > > > > I thought having a for loop and array would work which did not.
> > > > > > > >
> > > > > > > If you provide us with the array & loop we might be able to tell
> > you
> > > > why
> > > > > > it
> > > > > > > isn't working — as long as you can explain what it was trying to
> > do
> > > > > > >
> > > > > > >
> > > > > > > $('#slider').click(function(){
> > > > > > > >
> > > > > > > > window.location.href = "$('a').each('href')";
> > > > > > > >
> > > > > > > >                });
> > > > > > > >
> > > > > > > > it does return: not found  .../$('a').each('href')
> > > > > > > >
> > > > > > >
> > > > > > > The code above is saying that whenever your slider object is
> > clicked,
> > > > the
> > > > > > > page should be redirected to the URL "$('a').each('href')". The
> > > > quotes
> > > > > > (")
> > > > > > > in this mean that it is not to be interpreted as Javascript and
> > > > instead
> > > > > > > delivered as plain text — which I can tell isn't your intention.
> > > > Taking
> > > > > > the
> > > > > > > quotes off reveals invalid jQuery code which appears ill thought
> > out.
> > > > > > > However when I try to image what you did intend, I come up with
> > > > something
> > > > > > > like this:
> > > > > > >
> > > > > > > $('#slider a').click(function(){
> > > > > > > window.location.href = this.href
> > > > > > > })
> > > > > > >
> > > > > > > …but this is utterly pointless since a link click directing
> > towards
> > > > its
> > > > > > HREF
> > > > > > > is entirely standard behaviour (which jQuery ScrollTo does not
> > > > override).
> > > > > > > Try removing this code entirely. Is it working now?
> > > > > > >
> > > > > > >
> > > > > > > Regards,
> > > > > > > Barney
> > > > > > > --
> > > > > > >
> > > > > > > * * Please support the community that supports you.  * *
> > > > > > > http://evolt.org/help_support_evolt/
> > > > > > >
> > > > > > > For unsubscribe and other options, including the Tip Harvester
> > > > > > > and archives of thelist go to: http://lists.evolt.org
> > > > > > > Workers of the Web, evolt !
> > > > > >
> > > > > > --
> > > > > >
> > > > > > * * Please support the community that supports you.  * *
> > > > > > http://evolt.org/help_support_evolt/
> > > > > >
> > > > > > For unsubscribe and other options, including the Tip Harvester
> > > > > > and archives of thelist go to: http://lists.evolt.org
> > > > > > Workers of the Web, evolt !
> > > > > >
> > > > > --
> > > > >
> > > > > * * Please support the community that supports you.  * *
> > > > > http://evolt.org/help_support_evolt/
> > > > >
> > > > > For unsubscribe and other options, including the Tip Harvester
> > > > > and archives of thelist go to: http://lists.evolt.org
> > > > > Workers of the Web, evolt !
> > > >
> > > > --
> > > >
> > > > * * Please support the community that supports you.  * *
> > > > http://evolt.org/help_support_evolt/
> > > >
> > > > For unsubscribe and other options, including the Tip Harvester
> > > > and archives of thelist go to: http://lists.evolt.org
> > > > Workers of the Web, evolt !
> > > >
> > > --
> > >
> > > * * Please support the community that supports you.  * *
> > > http://evolt.org/help_support_evolt/
> > >
> > > For unsubscribe and other options, including the Tip Harvester
> > > and archives of thelist go to: http://lists.evolt.org
> > > Workers of the Web, evolt !
> >
> > --
> >
> > * * Please support the community that supports you.  * *
> > http://evolt.org/help_support_evolt/
> >
> > For unsubscribe and other options, including the Tip Harvester
> > and archives of thelist go to: http://lists.evolt.org
> > Workers of the Web, evolt !
> >
> -- 
> 
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
> 
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt ! 
 		 	   		  


More information about the thelist mailing list