I need to put together a prototype of a scrollable list with items that can be vertically resized. For example, a list of charts. I wish I could post any code but dont even know where to start from. Tried googling but nothing came up.
Any idea what a good starting point might be?
Thanks
Personally I would start with creating a list of elements in a vertical fashion. That should be pretty straight forward.
Second I'd reuse a library which may already have a resizable component that you can use. This should allow you to learn about resizable elements.
http://jqueryui.com/resizable/
Finally, put them together and see where your bugs are!
Related
I have these items already successfully placed vertically with position: absolute and a calculated top value–
my library of choice for all things time related (dayjs) also comes with functionality to check if one item overlaps with another one, nice.
Each item has a startedAt and endedAt property holding ISO datetime strings, i.e. 2022-03-31T17:34Z – using dayjs I can convert them to anything the overlap detection needs.
In the screenshot you can see some examples of overlaps we would like to see in the final result. After some research the TUI calendar solves the issue pretty much just like we want it.
For a lot of reasons we can't use tui-calendar as a whole and extracting the logic to place the items (basically get width and left for each overlapping item) is way beyond my skills (although I think I've found the functions that are responsible for this)
So far I've failed miserably to solve this myself; both using recursion and loops :X
Questions:
– Is there an easier way?
– Is there a dedicated library to solve this?
– Any ideas how to kickstart a solution myself?
Kinda desperate here :D
Thanks!
I made the following website (http://abrradesignstudio.com/) using a HTML builder template.
Looking at the categories (All, Brochures, Resumes.... etc.) I see that they are somehow aligned to the left. Maybe they are centered, but if the row is not sufficient, it makes a new one, leaving the first one with too much space to the right (making it look left aligned).
How can I avoid that and make them really centered?
Is there a fast way to make all other images disappear (instead of dim/gray-out in the background) when selecting a certain category?
Another question: My contact form is not working. I saw on a similar website that they use https://formspree.io/.
I did the same, but I still get an error submitting. My code is 1:1 with the other one (that works), just the e-mail is different.
If you know very little about HTML or CSS it may be best to read up some blogs and tutorials on CSS (there are many, many out on the net) .
The Solution
In .filters li (line 4542 in theme-nearblack.css) turn off float:left; and your display will show as you want.
floats do just that, they float outside of the flow of the document so it's much more tedious to try and centre them. As the parent element to this li is already floated there isn't much point floating the contents as well.
Stack Overflow Questions
Please when asking questions can you paste a minimum working version of your code which displays your problem, rather than links to external websites which will change. Posting code blocks into your question means whenever someone in the future reads your question they can see exactly the issues you are having (and how they are solved).
Please Take the Tour.
If my solution works for you can you mark up and tick, thanks.
This seems like a simple enough question, yet I've spent 3 hours and found no information on how to do it. I purchased Ext JS 4, and I'm trying to get the "Locking Grid" to appear on one of my web pages. The grid will be very simple in the end, with no fancy ajax or anything, just a grid to display some info. I went through their quick start tutorial, and it simply tells you to paste some code into a javascript file, and include a ref to that javascript file in the header of your page.
Well, that does nothing. No grid appears. And why would it, I haven't told the grid where to appear. How do you tell the grid to appear in a particular div on my page, or to appear on my page at all?
Either use the renderTo config or use the render method. Be sure to read the notes for these, specifically that you should not use render/renderTo on items going inside a container, only top level components.
I really like the way SlickGrid DataView smoothly scrolls and renders/hides stuff for me. I'd love it if I could use this same sort of behavior to display data that is slightly less tabular in format. For example, a thumbnail gallery with thousands of thumbnails in it.
The main problem is I'd need display my list of items in a grid horizontally as well as vertically. I suppose it could be accomplished with a dataview by dynamically changing the number of columns based on the size of the window, though this seems kind of an abuse of the system. Is there a better system for this out there?
I ended up writing it myself. Enjoy!
Can you explain to me, at a very high level, what I would need to build an image carousel for the web, please. You can use data structures and general computer science terminology - but nothing language specific.
E.g:
Store all the images in an array or linked list
When the carousel is loaded, resize the displayed images as X% window size
When the next button is pressed, imageA moves to a hidden html element.
Et cetera.
I hope that makes sense.
Thanks.
You don't want anything language specific but you want to know about carousels on the web and you've tagged this with 'html' and 'css' so I'm going to assume that I can talk about HTML and CSS but I'll try to keep it high level.
If we ignore Flash, then you're left with HTML + CSS + Javascript. The common way to do this is to arrange the images or their thumbnails (don't resize via HTML - its doesn't look good and can increase your page load time) in HTML elements that are themselves contained in one or more layers of wrapping elements. So the whole set of images strung together might be wider than the viewing window. CSS is used to manage their exact layout and to keep them from overflowing the viewing window. When I say window, I just mean the portion of the page in which you want the carousel to appear. Then Javascript is used to change the CSS properties of one of the HTML elements that is wrapping the images, causing it to scroll or shift position.
With HTML5, you have more options, but the above is the way things have usually been done until now.
Finally, if you are going to actually implement this, there are a number of scripts available that will probably meet your needs, but if not I highly recommend using a Javascript framework like JQuery - it will make things much, much easier.
If you want to build it by yourself, one straightforward way would be to have a master div and all the images in it, lined up horizontally. Have the overflow set to hidden on the master div. Then use javascript and set scrollLeft as the user clicks the next, previous buttons.