ansaurus

Question

Sliding out Div, Slide in another Div at the same time.

Answer 1

+2 A:

I'd highly recommend using a javascript library to handle this. Here's a quick and dirty sample I built using jquery: http://jsfiddle.net/hyu42/ The idea behind it is to create a container div that acts as a mask and contains the node to animate (in this case, they would be replaced with your calendar content). When the user interacts, you shift the position of the interior node element accordingly.

Brian Flanagan 2010-10-11 14:34:15

Thanks, there's a bit of a problem with this method because you can keep going past the 6th month and nothing shows. And than there is the double click and triple click problems on the "Next" and "Previous" links, but I suppose it'll have to do. Not sure I'll even use it, but thanks for the help just the same. :)

SoLoGHoST 2010-10-17 04:20:54

You're right - those are two issues that my sample didn't handle. (But that was kinda the point of a 'quick and dirty' solution. Here's a similar sample I built that incorporates a check to prevent the slide from extending beyond the boundaries of the internal ul: http://jsfiddle.net/4nqng/ (This one was built using a vertical slide, but the principal is the same). As for the multiple click issue, you can add a flag to check prior to firing the slide animation (http://jsfiddle.net/TP5Y8/1/) or use a combination of .stop() and .clearQueue().

Brian Flanagan 2010-10-17 14:15:39

Ok, this link actually seems to be working: http://jsfiddle.net/4nqng. But I can't seem to get it to scroll at all with the 2nd link that you posted (http://jsfiddle.net/TP5Y8/1). So, not sure what that one is supposed to do differently.

SoLoGHoST 2010-10-18 03:08:33

Ok, 1 more question, is it possible to add an ANCHOR for where it should stop scrolling, so that the anchor is at the top of the next scroll, whether it scrolls up or down? Thanks very very much!

SoLoGHoST 2010-10-18 04:06:55

Bytheway, here's how I got it working so far: http://jsfiddle.net/3LFMd/ though, I have to place a `<br style="clear: both;" />` tag after a few of the calendar months. Thing is, it is being populated via PHP, and is going to be difficult to know when a `<br />` tag is needed for each calendar month. Any ideas on this? Cheers :)

SoLoGHoST 2010-10-18 04:22:59

You bet. I updated your code and cleaned up the markup a bit. http://jsfiddle.net/zczSs/ Not sure what extra logic your back end or other front end code needs, but the markup was a bit heavy. I removed the unnecessary divs (take advantage of block elements when you can) and remove all of the inline styles. (I know it's easy to do when the server is generating the markup, but it just makes for a heavier page and can't take advantage of caching.) Also, probably the biggest thing about the whole mask animation bit is that the entire internal element needs to be inside the mask.

Brian Flanagan 2010-10-18 17:28:26

I also updated the CSS (to replace the inline stuff). There are a few things that help alleviate the need for those awful clearing elements. Floated items should be display:inline as a general rule. Containers for floated items should be overflow:hidden (so browsers properly calculate the interior height). And lastly, make sure that elements that aren't floated are set to display block. (I'm pretty sure that just removing the extra div wrappers took care of most of the problems that were causing the need for the clearing node.)

Brian Flanagan 2010-10-18 17:30:47

WOW, THANKS, working great, REALLY APPRECIATE YOUR HELP ON THIS BRO! Not very savy when it comes to using jQuery, but noticed that you upped the version of jQuery to 1.4.3. Will that have any effect on the types of browsers that should be supported? Thanks :)

SoLoGHoST 2010-10-19 03:10:58

Hello again Brian, I am trying to allow for the style to be changed to horizontal scrolling via a Link (sort of a toggle between the 2 via "Change Style" link), is this possible?? You can see me attempting to do this, in code, here => http://jsfiddle.net/AeqV8/1/

SoLoGHoST 2010-10-19 08:23:18

No worries on 1.4.3. ASAIK, it'll support all of the major browsers (and probably a few minor ones as well). As for switching between vertical and horizontal, you should be able to do it, but you'd need to update the layout of the ul each time. For vertical, the li's need to be dislay block (or list-type). But for horizontal, they will need to be floated left (and display inline). You'll also need to recalc the dimensions of the ul (and probably force set them) each time you toggle back and forth. Lemme know if you run into issues.

Brian Flanagan 2010-10-19 13:11:08

Not sure what you mean by this: You'll also need to recalc the dimensions of the ul (and probably force set them) each time you toggle back and forth. The thing is, It's okay to not have the toggle switch there, because it'll be within the Admin Panel, and that's fine, than PHP will output it with the horizontal slide or the vertical slide effects using `echo` and will grab this setting from the users db. So that's all good. Just trying to understand how to set this up horizontally to begin with, since it would seem that I need to set an OVERALL WIDTH, and I'd rather not do this. Ideas?

SoLoGHoST 2010-10-20 00:23:26

Okie Dokie, I got it working here => http://jsfiddle.net/sVAdA/ , but it seems dependant on a width of 516px `ul {position:absolute; top:0px; left:0px; margin:0; padding:0; width: 516px; overflow:hidden;}` Thing is, would be better to be able to slide horizontally without specifying a width, since the number of months to show are dependant on an Admin Settings. And Ideas or any more help that you can offer? Thanks a Million!!

SoLoGHoST 2010-10-20 00:42:15

Fill the ul with all the li's you want (as determined by the server code). Then, count up that li's - $('li').length. Multiple the total number of li's by the width of one li (either pre-set based on a fixed width from the css or use jquery's .outerwidth() function on one li to get the figure). Then, manually set the width of the ul to that product. This way it'll always be dynamic and since it's generated after the li's exist, it'll always be correct. (I use this method all the time for carousels)

Brian Flanagan 2010-10-20 01:07:59

hmmm, can you fix up a quick example of this for me please?

SoLoGHoST 2010-10-20 21:48:11

Sure. http://jsfiddle.net/brianflanagan/SGZ9N/ (Note that the css lacks a ul width declaration. it's calculated by the js when initializing the slider.) You can add a bunch more tables to it at render time and it should work. (Sometimes you need to tweak the li width calc as jquery sometimes doesn't get things quite right.)

Brian Flanagan 2010-10-20 22:59:57

Wow, thanks, added 5 to `ulWidth` as you can see here => http://jsfiddle.net/WSQbU/ I believe the 5 is just what it needed. Thanks again :)

SoLoGHoST 2010-10-21 03:45:47

Also, am using the Vertical sliding code, but I ran into a snag. For some reason, everytime (atleast in Opera) I click on Next/Previous links it places me at the top of the page if I scrolled down it. You can see it here => http://acs.graphicsmayhem.com/smf/index.php Top-Left Block on there, scroll down a little on the page, and than click on the Next or Previous link, you'll notice your webpage scroll up to the top of the page. Any reason you think? Bytheway, I'm very grateful to get your help on this. Thanks Again! :)

SoLoGHoST 2010-10-21 07:37:20

Not 100% sure, but I'm guessing this is caused by the default behavior of the anchor tags. Absent a url in the href, some browsers will toss you back to the top of the page when it's clicked. You can add a jQuery 'evt.preventDefault()' to the click event of the next and previous buttons which should stop this. check out the docs here: http://api.jquery.com/event.preventDefault/ (Nice site btw)

Brian Flanagan 2010-10-21 16:32:38

Thanks, am looking into it. Tried `<a href="javascript:void(0);">` also, but no change. Thanks again for everything. BTW, Dream Portal is a Portal System: `http://dream-portal.net` that I helped develop in a huge way, but jQuery has never really been my strong side, Javascript, PHP, etc., that's Me! Well check us out sometime, and if you'd be interested in helping to build a module or anything that would be AWESOME. Though in any case, was great meeting you and you've been way more than helpful and friendly! Cheers Bro :)

SoLoGHoST 2010-10-21 18:23:29

WOW, evt.preventDefault() works like a charm. Cheers again :)

SoLoGHoST 2010-10-21 18:34:41

Ok, have a question, hopefully you are still around, how do I set it so that NOVEMBER is the current MONTH that gets shown by default? Instead of October.

SoLoGHoST 2010-10-25 03:02:20

Nevermind, got it working here: http://jsfiddle.net/vMM8Q/ Cheers :)

SoLoGHoST 2010-10-25 05:40:31

There is an issue I'm facing now here => http://acs.graphicsmayhem.com/spoogs/index.php Basically, if you collapse the left and right modules/blocks and reload the page and than expand these blocks, they don't show at all for some reason, and the blocks are too big. Any idea how to fix this? I believe it's because a height isn't set, but setting a height would screw it up in some browsers, so the only other thing I can think of is to apply a `display: none` to some `<li>` tags, but not sure if jQuery has a workaround for this. Can you give me a hand here a bit? Thanks again!

SoLoGHoST 2010-10-25 07:19:46

I haven't had a chance to dig into the code, but I suspect it's because jQuery can't determine the height of an element that's set to display:none. You may have to drop the calender inside a container element and set the container to display none. That way the init routine that gets the height of the li will have something to work off of. Lemme know how it goes.

Brian Flanagan 2010-10-26 19:42:46

Well, I fixed this. Don't need to use `outerWidth` or even calculate the `<li>` widths because it is already being calculated. So I just put the numbers in and TADA, works like a charm. See for yourself. Also, had a little time to play with the appearance of it some, but I'm not sure I like it much, may change it back soon. Thanks, you're the BEST!

SoLoGHoST 2010-10-27 07:00:11

ansaurus

tags:

views:

answers:

Sliding out Div, Slide in another Div at the same time.

related questions