I want to be able to preview a react component on a page at different viewport widths to trigger different CSS media queries. This is for a component library, and I want to be able to show developers what the component will look like at different screen sizes.
Any strategies on how to tackle this problem?
CSS media queries take account of client window with, if you want to show the behavior of component by resizing the browser window you won't need to do anything different. However, if you are looking to place your component in a container within the browser (like some div) and allow developers to resize that container to see the behavior, they you might need to replicate the media queries behavior on that container. First you will need to make that container resizable. After that you will need to listen to that resize event and then apply relative classes to that container according to the width of container.
You can use this plugin to make container resizable https://github.com/STRML/react-resizable and then use onResize event to apply appropriate css classes to show the behavior according to the width of container
Try using the rule #media to define what css properties are used at which screen size, here is a guide by W3schools CSS #media rule
Related
I am trying to create dynamically resized panels with react and foundation. I have tried react-split-pane and other similar libraries, but they are messing with the responsiveness of the page. I also tried the resize css3 property but it is not flexible as it only allows the containers to be resized only to the right and bottom and I was unable to style the resize handle to be a horizontal or vertical bar.
Any suggestion would help.
This will be possible with react-resizeable once pull request 76 gets handled.
For now, you can grab the code from the fork.
I've been investigating ways of creating a responive menu.
The standard technique would be to use a navicon on smaller devices which would trigger some kind of fly out/drop down menu.
I would like the most common options to show on screen, so I came up with the idea of a nav-bar, consisting of only a few important menu items, which would be visible on smaller devices. This would still need the navicon to display any additional items.
I then came across a menu which fulfills my requirements better in that it is more dynamic. The concept is that the menu grows as the screen size grows, but only displays an option when there is enough screen width to accomodate it fully. The remaining options are tucked beneath a dynamic navicon.
Here is the menu: http://www.money.co.uk/
As you will see changing the screen width changes the available options.
I could produce a semi-dynamic version using my media query breakpoints, but it would be good to be able to create a fully dynamic version. I'm guessing that it uses javascript - but as far as the techinque to be able to determine the available space and the space required, I don't know where to start.
I have some basic js/jquery knowledge, but would appreciate it if anyone could give me some guidance on how to go about approaching this one.
Thanks in advance.
Responsive menus are nothing, but its just a style manipulation as per screen size. You can go for CSS3 media queries to do it. It has inbuilt functionality to define the screen size.
#media (max-width: 912px) and (min-width: 681px)
Then, you need to manipulate the stylesheet. This is very common approach. Although, you can go with javascript as well by using window resize events and change your stylesheet accordingly. So whenever you will resize the window it will automatically overwrite the defined stylesheet.
Although, it is not recommended to manage it through javascript as it has lots of code complexity while managing the style. Use CSS media queries.
Hope this helps :)
I am looking to create an image that is responsive but also expandable. I need to do this all in HTML/CSS and utlize either Javascript or JQuery to make it expandable. I'm able to do either an expandable unit, or a responsive image - but having a hard time combining the two things. Could use some examples or guidance.
So the example scenario would be, on intial page load there is a 924x70 across the page (that is responsive). If you click that unit it expands to 924x250 (this unit also needs to be responsive) - is this even possible?
Thanks in advance!
You could use responsive design through media queries to control the initial image size. Then use jquery to adjust the size on click.
Here is a basic example that uses the mouse hover to change the image size. Adjusting the window size will trigger the media queries, but you will need to do this before mouse hover. It should be a straight forward task to adjust this base example to your needs.
basic html
<img src="theImage" />
media query
#media screen and (max-width:300px){
img{width:200px;}
}
jquery
see demo
hope this helps...
I regularly detect window width via enquire.js or media queries, but what if I want to style things differently based on the width of an element, say a div, and then change the appearance of its children based on its width? Thanks. I'm using SASS if that helps.
I am working with a Responsive Design website, more specifically a page that incorporates several Divs. When you re-size the webpage the width of the divs change as they are set as percentages. As the height has to stay constant, unless the div will disappear, I have to set break-points to change the height. If I don't change the height, it stays constant and adds "margin" between divs below. Essentially, my logic is: when the window is re-sized and the width is less than 810px, then remove all CSS styling, and add margin top, items 2 through infinity. As this is hard to explain through writing, I have added the following code at the end.
When I re-size the browser window, and the content div is less than 810px, styling is not removed. Looking at my code, what could be the culprit?
The function is at lines 27-50: https://github.com/jdmagic21/coded_container/blob/master/work.js
Rather than doing it with Javascript, you should consider using CSS Media Queries to change the styles depending on the width of the browser.
Here's a tutorial - one of the top hits on Google for "How to use CSS Media Queries"
Here's a table of browser compatibility for Media Queries. As long as you don't care too much about IE8 or previous, you're ok!
You can do it like this with CSS Media queries.
#media screen and (max-width: 810px) {
/* reset the styles of the divs here */
}