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.
Related
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
When uploading adding high resolution images to a tinymce textarea they are often exceeding the width of the editor - is there a way to limit the width to 100%
I have tried overriding the width of all images on the page using CSS, but this doesn't work as tinymce works using a simulated iframe, and doesn't use the page's CSS rules
One way would be to use the tinymce iframe to limit your images in size.
Using the tinymce parameter editor_css you may define a css file which will be used for the editor content.
Another way is to set the image width/height using javascript/jQuery:
$(tinymce.get('your_editor_id').getBody()).find('img').css('width', '500').css('height', '500');
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 */
}
Scenario
I'm making a Responsive website where I need to give multiple sizes to dropdown for various screen sizes with custom styling
What I tried
i'm using this DropKick plugin to make custom styled dropdowns it adding width in px. it's very good for me
this is example I made using the plugin http://jsfiddle.net/jitendravyas/HtW8C/1/
Problem
I want to increase or decrease the width and height of dropdown by increasing or decreasing the size of font inside dropdown but when i increase the font-size, dropdown doesn't scale accordingly
Link of plugin https://raw.github.com/JamieLottering/DropKick/master/jquery.dropkick-1.0.0.js
Edit:
I changed px to em here https://github.com/JamieLottering/DropKick/blob/master/jquery.dropkick-1.0.0.js#L117
But this plugin adds a inline width which i don't want. I want to control width by CSS
This is a situation in which the CSS !important rule is actually useful and a valid solution:
a.dk_toggle { width: auto !important; }
This will let you change the font size and have it expand automatically. Or, you can set an explicit width of your choosing, as long as you use that !important rule.
What about when you need to target multiple dropdowns on a page with different widths?
How to individually target multiple dropdowns in CSS for Dropkick Plug-in
I have 2 questions on setting viewport ?
Is the meta tag the only way to set viewport? I mean is it possible through JS or some other way?
I have a Java app (uses JSP/Struts, etc). So can I set it globally from a single place? If yes, can I override it for a particular page if I need to later ?
You can set the viewport via meta tags and CSS.
This article is also a good introduction to viewport property and how you can set it via CSS http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/ and other means.
Javascript has a reiszeTo() function that forces the window to change and clientWidth for adjusting the viewport width. This article explains how to combine CSS meta tags and JS to adjust the viewport.