Jump to content

Jquery Help.


Jsheffers

Recommended Posts

I'm put together a site that uses div hiding using jquery. It works fine, but when It loads up the home page you see all of the divs. Then when I click on the nav to go to another div it just shows that div. How can I get just the first div to come up when I first open the page. I hope that makes sense.

 

Here is the page.

 

www.shanej e ffersphotography.com/pst

 

Notice how all of the divs show up, then when you click on home or something else the other divs dissappear. I want it to do this first so all of the divs never show at once.

 

$(function () {

var navlist = [];

var tabContainers = [];

$('ul#navlist a').each(function () {

if(this.pathname == window.location.pathname) {

navlist.push(this);

tabContainers.push($(this.hash).get(0));}

});

$(navlist).click(function () {

$(tabContainers).hide().filter(this.hash).show();

return false;

});

});

 

 

This was the javascript used. Anyone??

 

Thanks for your time.

Link to comment
Share on other sites

The easiest way to do this is actually via CSS - no javascript required. Using CSS, set the divs you want hidden when the page first loads using display:none, and then jQuery can be used to show/hide them.

 

EDIT: Actually, take that back. The above will work, but isn't ideal since if the user has javascript disabled for some reason, they will only be able to see the first div, and the rest won't be accessible. In that case, the best way to do things is probably through jQuery... Adding something along the lines of this to your $(function() section:

 

$('#dividhere').hide();

 

and add a separate line for each of the divs you want hidden when the page first loads.

Link to comment
Share on other sites

The easiest way to do this is actually via CSS - no javascript required. Using CSS, set the divs you want hidden when the page first loads using display:none, and then jQuery can be used to show/hide them.

 

EDIT: Actually, take that back. The above will work, but isn't ideal since if the user has javascript disabled for some reason, they will only be able to see the first div, and the rest won't be accessible. In that case, the best way to do things is probably through jQuery... Adding something along the lines of this to your $(function() section:

 

$('#dividhere').hide();

 

and add a separate line for each of the divs you want hidden when the page first loads.

 

 

Dude you are amazing.. Every time I post here you have an answer... I added that line of code to my JQuery and it works like a charm. On the portfolio page I implemented some Jquery which fades the images in and out. Is there anyway that I can have that effect and have lightbox on click? I tried to no avail, but I could be doing something wrong. I also tried JQuery version of lightbox...no luck either...

Link to comment
Share on other sites

Dude you are amazing.. Every time I post here you have an answer... I added that line of code to my JQuery and it works like a charm. On the portfolio page I implemented some Jquery which fades the images in and out. Is there anyway that I can have that effect and have lightbox on click? I tried to no avail, but I could be doing something wrong. I also tried JQuery version of lightbox...no luck either...

 

I don't see why not... I've used lightbox a bit on my site for my portfolio items, and it seems like the jquery lightbox plugin is the easiest way to go. It SHOULD be as simple as adding a class to the thumbnails that you want enlarged... Can you remind me of your URL so I can take a look at how things are set up at the moment?

Link to comment
Share on other sites

Dude you are amazing.. Every time I post here you have an answer... I added that line of code to my JQuery and it works like a charm. On the portfolio page I implemented some Jquery which fades the images in and out. Is there anyway that I can have that effect and have lightbox on click? I tried to no avail' date=' but I could be doing something wrong. I also tried JQuery version of lightbox...no luck either...[/quote']

 

I don't see why not... I've used lightbox a bit on my site for my portfolio items, and it seems like the jquery lightbox plugin is the easiest way to go. It SHOULD be as simple as adding a class to the thumbnails that you want enlarged... Can you remind me of your URL so I can take a look at how things are set up at the moment?

 

www.shanej e ffersphotography.com/pst then go to the portfolio tab.

 

OK lets see if I can explain this. I have a jquery fade in and out effect on the image thumbnails. For some reason it won't let me use lightbox in combination with the jquery fade in/out.

Link to comment
Share on other sites

If you are using jQuery, you may as well use the jQuery lightbox plugin (http://leandrovieira.com/projects/jquery/lightbox/). It should be a simple matter of including the javascript and css files in the correct location, and adding something along the lines of this to your jquery:

 

$('#gallery a').lightBox();

 

I'm not seeing anything that would stop the jquery lightbox from working with your fade effect. I'd suggest going ahead and integrating the jquery lightbox, getting as far as you can, and then letting us know when / where you run into problems.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...