I'm trying to streamline the code for the 'Treatments' section of this website.
The site is responsive, the tiles are floats and reposition themselves with browser size. Clicking on a tile reveals a hidden section below it.
At the moment each tile has around three identical hidden sections positioned in the code, one for each of the three tile positions, to ensure it always appears below the desired tile - i.e. the 'Bunion Deformity' tile's hidden section appears after 'Osteoarthritis' in the widest format, after 'Ingrowing Toenails' in the midsize format and after 'Bunion Deformity' in the smallest format. Javascript is used to select the correct one.
It works but it's a very messy solution. Is there a way I can only paste the hidden section in the HTML code once and have it appear in the desired position regardless of the tile layout? Ideally using CSS alone.
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 place two svg files side by side in a web page. This I have done using susy to create the spans, first one is 2 columns wide, the second 10 columns. I place a narrow bar graph in the first span, and a wide line graph in the second span.
The problem I am having is scaling the graphs. they look like this:
But I want them to look more like this:
They are svg files generated with pygal and I achieved the second image by forcing a size in pygal, but it's not elegant and fails wehn the screen size changes.
How can I make the svg bar chart scale the height without scaling the width and do it dynamically in a web browser instead of manually changing the size in pygal? I also cant manually edit the svg files as they are generated via another system and update frequently.
Your graphs should load in two different divs, so that you can set a different width style for each, depending on a view-based css class (like col based classes in Twitter Bootstrap). If you load dynamic svg's (without any explicit_size setting in Pygal) you should be able to handle different window sizes.
What is the HTML CSS solution for highlighting specific areas of a map/floor plan like this?
http://www.centrecourtshopping.co.uk/store-info/
They use sprite image look here.
Basically, it works like that:
The map with dark-blue regions is completely static.
There is invisible layer on top of it made from small rectangular in their case <a> -- each corresponds to single dark-blue region and posses its its own id.
When cursor is placed over a rectangular with id x the sprite image is nicely aligned with its background (by setting CSS's background-position).
Do not think, this magic would be possible without using JavaScript.
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.
I know there are many techniques how to stretch the image to the whole page. I like the ones based on "background-size: cover", but if it is justified, I can use another technique. My problem is that I need to hook links to some parts of this background image with some hover effects - imagine a picture on castle in the background highlighting its different parts when you hover them with mouse.
Note:
I prefer imagemap solution, because it allows polygon shaped hotspots.
Note that I do not want components on top of the image having it's own dimensions.