please help me with this problem:
there is such a site, I need the portfolio to have accordions in a column, but the block itself opens them as a checkbox (one is open, the other closes) and I need to be able to add an infinite number of such accordions, and they occupied only the space of the block in which are. while not going beyond the scope of other blocks, and with the possibility of scrolling the list of accordions. how can this be solved?
Link to my github project
I tried to change the values in the "Panel" block for automatic height adjustment, considering that the next accordion is lower than the previous one
Related
I want to reproduce Google's spreadsheet behaviour with frozen first row and first col, in htmlm with little additions. This is done inside a web browser, so it's a site, page or web app (written in React, if that even matters, cuz question is mostly about css). Lets start with layout:
Availble view space of the page is separated in 3 distinct areas:
100% width, variable height Header, attached to top
Main View, occupying space between header and footer
100% width, variable height Footer, attached to bottom
Main View is then gonna to be split into two sections:
Menu of variable width, attached to the left-side
Table view, occupying remaining width
And Table view should have following properties:
Table area is scrollable, except
First row, where table headers must remain always visible
First column, where order No # of item must be always visible
I am stucked of a good and straightforward implementation. I gave up using <table> because it has no power to implement it, so clever <div> handling most probably would do the trick.
My question is How to write css for that layout? Lets omit layout html/jsx, I think its obvious. What css structure and classes would you suggest to me for this particular task?
I am trying to create a specific solution for weeks now and I have tried many things but I am just not sure if it is possible at all to achieve. I need your opinions and point me in direction o a correct approach. Following what I am trying to create:
Initially there is a tile layout in which a certain number of cards (say 12) are placed in 4x3 grid:
Now, if user clicks on a tile (Box 3), the state changes to following:
Selected tile is expanded and other tiles get aligned one below another on the right side:
Challenge is that I want to create a transition from every tile's initial state to the state where every tile is aligned one below another on the right. At the same time, when a tile is clicked it is expanded in place.
Note - there are no sudden change in positions, no reload of page and preferably no JS (I wanted to write a CSS-only solution). Everything smoothly animates to new position. From the second screen if a different tile is selected (from right), then the expanded item will shrink and go in to the right hand stack while the selected item will expand and take place of the currently expanded (B3).
If you could just point me to correct direction it would be great help.
thanks.
You should check css flexbox.
Using the "order" proprety, you could asign order of every box from 2 to 8,
and each time a box is selected, you change it's order to 1 and you also change its size and colour.
However, I don't think you can use 'click' actions with css only.
I would recommend using JS for what you are trying to achieve.
Hope it helps
I'm building a program that scrapes a website. It looks at the entire website and takes only the header and footer navigation menus from that website, then inserts new html tags (div, p, table, etc.) in between the header and footer menus.
I'm looking for some ideas on how to strip only the header and footer nav menus, as well as add code in between the two.
I'm using HTML Agility Pack and have worked on a few methods.
Method 1:
In most cases, the header and footer navigation menus are mostly
links, and have very little text. I used a threshold variable that
was a ratio of text to links. If the ratio text:links for a node is
less than the threshold, the node would be considered a menu node, and
it would be saved. Any node whose text:links ratio was greater than
the threshold value would be removed.
Method 1 worked for some sites, but not for others, so I ditched it.
Method 2:
I searched each node for an id or class attribute that included "nav"
or "menu". "n","a","v", "m","e","n","u" could have been upper case or
lower case, and "nav" and "menu" could have been surrounded by any
combination of characters. That way, it would include id's and
classes such as "bottomNav", "navRight1", "LeftMenu2", etc. If the id
or class contained either "nav" or "menu", the node would be saved.
If the node's attributes did not contain either of those terms, or any
of the node's descendants did not contain either of those terms, the
node would be deleted.
Again, method 2 worked for some sites, but not for others.
For the sites where either of these methods worked, I still wasn't able to put new html code in between the two menus, because I had no way of telling where the header menu ended, and where the footer menu began.
I'm just looking for other ideas on how to scrape only the header and footer navigation menus from a website, and insert new html code in between the two.
Other than looking for specific elements or element classes (header, nav, ...), you can try to look at the problem in a different way:
first, fetch and parse two (or more) pages from each website, preferably checking that they vary substantially (but not totally);
then, do a diff (of the DOM, preferably), and retain only the common structure.
This common structure should consist mostly of headers, footers, navbars and other elements more or less constant across each website.
A final step might be to look in this common structure for small gaps caused by headers/footers that vary depending on context, as opposed to large gaps caused by different (main) content, and scrape their possible values from the largest set of pages you can fetch from each website.
I'm using CSS3 to arrange articles ("cards") into columns. This is what I have now http://i.imgur.com/ygINTAv.jpg
For each "card" there's a list of action buttons (those with icons). Some of them (for example the maginifier) populate content into the card. That's when a problem happens: the card gets longer, and the browser decides to re-render the columns, causing the cards to be re-arranged. For example, a card at the bottom of the first column, once gets longer can be moved to the top of the second column. As a result, it can disappear from the current viewport and confuse the user.
Is there a way to prevent this? Thanks in advance.
i need some pointers here because i don't really know what to look for.
The project is in gwt and is using gwtquery.
I have this page with some elements and when the mouse overs an element it changes showing additional infos, let's call it header. When the mouse goes out of the header (which has some buttons so it need to stay visible once shown) it returns invisible.
The problem is that when the header is made visible all the elements of the page change position because my element changes in dimension. What i wish to do is to keep the element in the same position and overlap the header over everything with z-index.
It's not about GWT at first hand. It's mostly about general concepts of elements positioning and layout building for html pages. You should start from something like http://www.w3schools.com/Css/css_positioning.asp
And then find the appropriate tools in GWT framework or in third party libraries that are available.