Forum Replies Created
OK – so what you want to search for is a “nested accordion”.
I found one on CodePen: http://codepen.io/brenden/pen/Kwbpyj
Basically you want a single script that’s going to have this action any time it comes across it. All the JS should do is check what’s open within its siblings, not throughout the entire page. If your script only looks at the siblings, and you follow the correct markup patterns, you can reuse the script over and over again (dynamically or not).
I’m not 100% sure if the Pen I found will work in your situation, but the act of coding through it isn’t tough if you’re good with tree traversal.
Set up a click listener on your target, and on
thishave the “open” class? If yes, close it, if not open it and then (optionally) close any open siblings.
All the animation for sliding down and such should probably be done in CSS, it’s much better on performance these days.
I’m sure if you searched around for “nested accordion” you could find one you can just paste into your project, but I think you’ll find coding it isn’t so difficult to do.
This is arguing semantics here, but in this case it will help you with Google searching. When you click on “Manage Groups”, that’s not considered a slider, but instead an accordion – or possibly drop/slide down.
This is what people would consider a slider (although bloated with features): http://wowslider.com/. These are sometimes also called carousels (and in general people don’t like them).
So, long story short, do you want content to reveal itself by sliding down (eg. drop down) when clicking on “Conditions”, the same as when clicking “Manage Groups”?
Unfortunately what you’ve posted isn’t enough. If you could set up a CopePen demo of the problem working as far as you can get it we can easily look things over and point the right direction.
If you need help setting up the CodePen demo let me know.
#featuredhas a white background color along with the
prev.pngbackground image.July 30, 2015 at 2:28 pm in reply to: How to put small/thumbnail image grid (2×2, 3×2,etc) besides a text block? #205813
Why don’t you show us what you’ve tried?
You can use a CSS framework (eg. Bootstrap, Foundation) that have their own grid systems built in that are easy enough to grasp.
Many WordPress themes have ways using shortcode to set up grids and things in pages or posts.
As far as characterizing the layout – think of it this way: when something doesn’t look right at a certain viewport width, that’s when you need a breakpoint… make adjustments, rinse and repeat.
P.S. your image grid subject made me think of this: http://foundation.zurb.com/docs/components/block_grid.html
You want the divs to become selected as each is clicked…right? That needs JS.
Correct!July 30, 2015 at 2:21 pm in reply to: Making a word into a link resulting in word becoming block level element #205811
You’d need to show us the code, but most likely you have a CSS rule that tells the page to do this.
Use http://codepen.io to set up your HTML and CSS.
<span>is an inline object, so you might not want to do that at all.
What you probably want to do is give a block element (eg.
float: rightalong with a set width. When they meet up they will automatically pop down.July 30, 2015 at 9:55 am in reply to: Thinking through problem: JSON with toggles to show/hide content #205794
OK so, here’s what I came up with.
The process is like this:
- Build JS Object model
- Listener is set on any input, each time one is clicked it will set up an array of everything that is currently
- Pass this array to a few loops that iterate over the model, if the object is set true it continues, but if any answer is false it will give it the
- CSS controls what will happen to the individual items in the DOM, in this case it just turns them green for on, or red for off.
- I’m using
data-attributes to store what data I need to check the
[data-picker=object]against the model
Things seem to be working fine, but there’s three full iterations here every click. If anyone can think of something to simplify it I’m all ears.July 29, 2015 at 9:42 am in reply to: [Solved] Can't figure out where a transition is coming from on slider #205740
Ah yes – that would cause the problem when they’re coming back into the flow.
That said, for performance reasons, you might want to look into making them
position: absoluteall the time. As I said it would take some tweaking, but it would stop the browser from repainting the site each time the slide changes!
It has happened yes.
When I was freelancing I would turn jobs down regularly. Once word gets around that you’re reliable and good, things start falling into your lap.July 22, 2015 at 5:23 pm in reply to: How do I limit the number of posts displayed on a page? #205389
It’s listed in the codex: http://codex.wordpress.org/Template_Tags/query_posts
Check out the book “Design is a Job” by Mike Montiero, it’s a good go-to for these kinds of questions.
You should constantly be evaluating if you’ll be right for the client’s needs, but you should also evaluate if the client is right for you. It’s a two-way street.
Normally turning down a job will open up a new, better one… happens all the time.
If you’re doing business, you should still incorporate. This solves a myriad of problems you’ll potentially have down the line.
Regarding the rest (I vs. we, personal posts), that’s all up to what kind of brand you want to build. A lot of people like to do business with a freelancer that puts themselves out there too. It makes people that don’t normally purchase things like that more comfortable.
But it’s possible that you’ll miss out on some larger clients because of that. You just have to decide if those larger clients are what you want, or if they’re worth making you into something you don’t feel comfortable with.
When I was freelancing, I would definitely play the part I thought would make the client most comfortable. When I nabbed a bigger contract for a company, it was business business business… but when I’m working with a small mom and pop restaurant, a few buttons get undone. No rules against it :)July 22, 2015 at 2:37 pm in reply to: ITCSS – An interesting way to organize large-scale projects #205385
Nice! I’ll watch when I can.
I’ve only seen a screencast he did looking through his folder structure.