I am looking to make a nice transition effect for a dynamic user layout system I have created.

My layout relies on a session being either the value of 1 or 2, I then call the layout using a switch statement.

switch ($  _SESSION['layout']) {

    case 1: break;
    case 2: break;
}

I have also created a button that they can click to change the layout using ajax. The jquery for this is like so:

$  ('#changeLayout').click(function() {

    $  .ajax({data: {changeLayout: 'mainLayout'}});
    $  ('#fluidWrap').fadeOut();
    setTimeout(function() {
        window.location = 'http://www.example.com/preferences';
    }, 1000);
return false;
});

The ajax is as follows:

if ($  _SESSION['layout'] == 1) {

    $  q = $  dbc -> prepare("UPDATE layout SET layout = 2 WHERE id = ?");
    $  q -> execute(array($  _SESSION['id']));
    $  _SESSION['layout'] = '2';
}
else {
    $  q = $  dbc -> prepare("UPDATE layout SET layout = 1 WHERE id = ?");
    $  q -> execute(array($  _SESSION['id']));
    $  _SESSION['layout'] = '1';
}

Now at the minute when the user clicks the button to change the layout the div #fluidWrap fades out, the ajax request has 1 second to change the session data and add it to the database, and the page reloads. All works well.

I was wondering how I can improve on this to maybe make a transition effect where the page slides out and slides back in again, how would I go about doing this?

I can’t add an effect with jquery for the div #fluidWrap to fade in, as on every load of the page it will of course fade in. How can I tell jquery to only fade in the body if the button was clicked after a page load?

newest questions tagged jquery – Stack Overflow

Question by We Carried It All So Well…: Need to create a nice gallery for webpage. Help! Not going too hot.?
Hello there,
I am somewhat familiar with CSS and HTML and used those to build all the pages to my webpage, which I plan to launch in the next couple days. The only page I have not created is the gallery, and not because I have not tried, but I do not know JavaScript-ing or anything really other than CSS. I am trying to find a free scripting generator or someone who would not mind giving me an outline to a script that I could put my images and words into. I have been walking through some Java tutorials, but unfortunately, even so, will not have enough time to learn in and still get it done in time. I was hoping to do something modern with my gallery and am intrigued by such things as the looks of: Zen Flash Gallery, GalleryView, SimpleViewer, Flash Photo Gallery, df Gallery, Art Flash Gallery, Flash Page Flip and Showcase Slideshow. One of my favorites in the Canvas Gallery with Reflection
Other scripting I would be interested to use is: MooTools, jQuery.
Anything nice enough will do. I did find one site that offered some help: http://visionwidget.com/inspiration/web/453-javascript-flash-photo-gallery.html.
Unfortunately, I am not savvy enough to figure out how to create a scipt with anything other than CSS or to put such things like JavaScript files into my CSS files to link them so that the Java works. So, any additional advice or just flat out scripting of how I would do that and on which files I would put things (css or my html).
Thanks for your patience and help. I appreciate it, as this is the first thing I have ever attempted in this realm.
I understand how to upload photos, but would like a gallery, because it is for my business I am trying to start and cannot have it looking shabby.

Best answer:

Answer by TheDarkLaith
I think you could do it quite nicely with flash if you don’t mind. If you’re interested mail me from the profile page.

Give your answer to this question below!

Question by CitPat: Multiple JavaScript Libraries don’t play nice?
I am just learning JavaScript using libraries, but with the examples I have I’ve noticed they don’t play nice when more than one is used, ie. JQuery, Mochi, Scriptalicous. Is there a way to encapsulate them to just affect the area they are needed and not the entire webpage? Or am I stuck to just one at a time per page?

Best answer:

Answer by Chris B
jQuery has a noConflict function to resolve normal javascript to jQuery conflicting each other.

Hope this helps!
If you need further assistance/advice, feel free to contact me.

Give your answer to this question below!