phppup Posted February 13 Share Posted February 13 In playing with a contact form that will "slide down" from a given point in the webpage, and I've found two attractive methods. CSS seems to accomplish the affect with an animation that carries the contents of my form up and down depending on a toggle button. I found a similar effect using JQuery's slideDown("slow") or slideUp("slow"). The JQuery seems like a smoother effect as it appears to 'unravel' but I am less comfortable with JQuery and connecting to outside libraries. Can this effect be duplicated more readily with CSS? Is there a simplified JQuery (or a plain JavaScript) method that I haven't found? Quote Link to comment https://forums.phpfreaks.com/topic/317989-slidedownslow-equivalent-in-css/ Share on other sites More sharing options...
requinix Posted February 13 Share Posted February 13 If you're having a problem with the CSS then you should post the CSS. And its supporting markup. Quote Link to comment https://forums.phpfreaks.com/topic/317989-slidedownslow-equivalent-in-css/#findComment-1615410 Share on other sites More sharing options...
phppup Posted February 14 Author Share Posted February 14 It's not really a problem as I think a slightly different effect. CSS seems to slide the entire form into place like moving a cracker from behind a box, and JQuery seems to 'unravel' like a paper towel roll that falls from a table. If necessary, I will try to post code when time permits. Quote Link to comment https://forums.phpfreaks.com/topic/317989-slidedownslow-equivalent-in-css/#findComment-1615417 Share on other sites More sharing options...
maxxd Posted February 14 Share Posted February 14 (edited) In most CSS setups, there's a containing div set with 'overflow: hidden' and an animated height - this then reveals the contents of any nested elements. AFAIR jQuery affects the height of not only the containing div, but the nested elements. So it makes sense that there's a difference in appearance - I'm not aware of a CSS-only solution that will do the "un-squishing" you can (as I recall, will) see with jQuery. That having been said, whether you're concerned about injection vulnerabilities or server downtime using a CDN-based version of jQuery, you pretty much don't need to be. As long as you're using (for instance) jsDeliver, cdnjs, or code.jquery.com, you can be reasonably assured that it's safe and reliable. And of course if the idea still bothers you, just download the file and include it directly from your own server. Funny aside - I didn't realize jQuery was still under active development until last week when I saw the v4 beta announcement. Edited February 14 by maxxd Quote Link to comment https://forums.phpfreaks.com/topic/317989-slidedownslow-equivalent-in-css/#findComment-1615421 Share on other sites More sharing options...
phppup Posted February 14 Author Share Posted February 14 Thanks for the info, but I may have gotten a better handle on this (versus my unconventional description of the effect I'm trying to duplicate). It seems that the CSS collapse effect make be more in line with my goal. I'm going to compare the different sample codes for slide, collapse, and JavaScript to find a solution that gives me a form that kinda unravels down/up over the existing page text via a toggle click. Quote Link to comment https://forums.phpfreaks.com/topic/317989-slidedownslow-equivalent-in-css/#findComment-1615520 Share on other sites More sharing options...
.thumb.jpeg.5da54518df0b69c737e8dabbcace30bb.jpeg)
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.