Left:0 /* or wherever you want it positioned */ Is harder to animate, and can cause screen readers and braille devices Use absolute positioning instead of display:none as setting 'none' Everything else there should be some form of semantic markup. At MOST for doing the animation you would want an overflow:hidden on the OUTER DIV, and then overflow:auto on the one around the content you want to scroll. EVERY other instance of overflow there is what's likely messing you up. The one you want to scroll set to overflow:auto and be done with it. Big tip, the ONLY thing you can learn from jQuery is how not to write - or where to use - JavaScript.Īs to the scrolling problem, axe ALL of your overflow-y states, that's what's screwing you over. Again not even JavaScript's job, much less the fat bloated train wreck of developer ignorance, incompetence, and outright ineptitude that is jQuery. and axe the JavaScript as a waste of code. I'd have to see it live, but the first thing I'd do is likely axe around two thirds of your DIV as pointless and/or gibberish. Sadly you're too new a member to post links, so the codepen isn't here. You also seem to be using JavaScript for something we no longer need JavaScript to achieve. Best practice? Semantic markup of the content or a reasonable facsimile of future content BEFORE you even THINK about throwing style or behavior at it! and the HTML is questionable too since you're using a P+class for what should likely be a H2. If it's got text inside it, use EM, not PX. Transition: margin-right 500ms, margin-left 500ms ĬSS is clearly not my strong point.As evidenced by your declaring things in the inaccessible "pixel" metric. Please note that the poorly done HTML is for the simplicity of the codepen pen, the version I'm working on on my dev environment is a lot cleaner. I've attempted to simply allow overflow-y: scroll/visible on the cart-content div to no avail which is what leads me to think there's a property inheritance issue at hand. I believe there might be conflicts the inherited properties of the div's that it's nested in causing me issues. I essentially want only the cart-content div to be scrollable. cart-content div is where the numerous divs exist with the product information. The entire thing is inside of it's own div with the class cart-outter, within that is another div with the class cart-inner, and within that is another with the class cart-header and one more below that (still within cart-inner div) with the class cart-content. Again, this is a shopping cart users will add items to their cart and at a certain point the number of items will exceed the height of their browser and I'll need to allow the ability of scrolling of the y-axis overflow but only within that sidebar. The cart button in the nav in the top right has a click listener bound to it, at that point the body of the document will translate -440px along the x axis pushing it all to the left revealing the side drawer that is 440px in width. As far as the data management goes I've got that all figured out using CartJS, CSS is clearly not my strong point. I'm currently developing a pullout side drawer shopping cart for an eCommerce website built on Shopify. I'm new around here and figured your guys' expertise would be able to steer me in the correct direction.
0 Comments
Leave a Reply. |