In Gumby2, the container class is commented with the following comment:
// We're removing the container class in favor
// of adding padding to rows at the $device-width
// breakpoint.
/*.container {
padding: 0 $gutter-in-px;
}*/
All I want is to have a central container class that will be in the middle of the screen. I must say I do not understand exactly how to follow this comment. So what is the proposed way for centering such container class in Gumby 2.6?
Just use centered class on your container div (that is a row, too).
Related
I'm using this scroll bar from idiotWu which works great so far:
https://github.com/idiotWu/react-smooth-scrollbar
What I need to do next is in my react project, I need to programatically change the scroll position. In my project, when my fires reactComponent.render() again because of some things I'm doing, I need to scroll back to the top of the <Scrollbar />. I don't see in the documentation any mention of how to do something like a element.scrollTop() or <Scrollbar scrollPosition={0} />.
I tried to manually set the transform translate3d of <div class="scroll-content">, but that didn't work because the scrollbar is saving it's scroll position value somewhere, and I don't know how to access it.
How do I reset the scroll to the beginning? Alternatively, how do I state the scroll position?
EDIT
I also tried each of these but they all did not produce the results I wanted
export default class MyClass extends React.Component {
render() {
document.getElementById('panel').setPosition(0,0); // setPosition is not a defined method
document.getElementById('panel').scrollTop=0; // had no effect
scrollbar.setPosition(0,0); // scrollbar not defined
scrollbar.scrollTop=0; //scrollbar not defined
return (<Scrollbar id="panel">stuff</Scrollbar>);
}
}
Try scrollbar.scrollTop = 0 or scrollbar.setPosition(scrollbar.offset.x, 0).
I have a carousel that takes a state of {pages: [...], currentPage: 0}. If I set currentPage = 1 I want the carousel to slide left. The same thing should happen if I increase the number again, and it should slide right I decrease it.
I can't work out how this should be done with immutable data. The animation shouldn't be represented in the state object (should it?), but storing a property on the React component removes its "pure" functional nature.
What's the best way to approach this problem?
Just show me an example
This doesn't use Immutable.js, but the current property is just a number, which is immutable in JS, so in some regards it's the same idea:
http://jsbin.com/ligejacolo/edit?js,output
IMO the best option is ReactCSSTransitionGroup
+1 for the unnecessarily snarky reference to ReactCSSTransitionGroup in the comments, if you can use that.
After that, let the browser manage state via CSS transitions
I would store the pages and currentPage as props, regardless of whether the values are Immutable.js instances (props are a stateful part of your UI, just like state, don't let the name fool you!). When they're stored as props, it provides a useful API to the users of your component.
If you're using CSS transitions then at any given moment you should be able to render the markup and classes based on this information.
For example, given the (over-simplified markup):
<div class=container>
<!-- set the class to something like "inner pane2" to go to the second pane -->
<div class=inner>
<span class=pane>...</span>
<span class=pane>...</span>
<span class=pane>...</span>
</div>
</div>
And some CSS like:
.container {
position: relative;
}
.inner {
position: absolute;
left: 0;
transition: left 0.3s ease-in-out;
}
.pane {
width: 100px;
}
.inner.pane2 {
left: -100px;
}
.inner.pane3 {
left: -200px;
}
The browser takes care of mid-transition changes to the properties.
Often times you'll need to know when the animation is done, which you can accomplish with a transitionend listener and isAnimating flag (which I would store in the state, not the props). Set isAnimating when currentPage changes and clear it on transitionend.
You'll also often need to know which direction you're transitioning, which you can accomplish with a previousPage prop.
Finally, if you're just using JavaScript
Keep a reference to the current transition in the state (possibly the jQuery selection used to start the animation, if that's what you're using). When the transition is done, remove the reference. If the currentPage changes mid-transition, call .stop() on the selection (or whatever API you're using).
I simply cannot get this code to work. I want to put a different background image on each page. I think I should do this by creating different class selectors, and then putting those in the body tags for each page, rather than using an inline style element.
Here's my css class selector:
.contact-grad
{
background-image:url('images/Backgrounds/contact-grad.png');
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
And here I put it in the html for contact:
<body id="contact-grad">
As you can see, it's not working.
Let me know if it will be helpful for me to post the entire html and css. I cannot get any background image to work. I put my code into the w3 validator, and got a "parse" error. Hm...
Thank you!
The body has an id 'contact-grad' but your selector in the css is on a class (that's what the dot do). Try using a hash '#' instead. as in
#contact-grad
{
background-image:url('images/Backgrounds/contact-grad.png');
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
Addendum:
This resource is a good starter for CSS-selectors.
.contact-grad is for a class, use #contact-grad for your id="contact-grad".
You shouldn't have your body as absolute position, better use a div inside the body ;).
For layout purposes I need to place 15px space between the bottom of the scrolled contents and the bottom of the container: div class="scroll-pane".
Styling the container .scroll-pane { padding-bottom:15px; } has no influence on the output. Going into the code of plugin jScrollPane(), it is set: elem.css({'padding':0}); so the padding-value is reset.
Is there any way to set a paddingBottom value for the scrolling container?
A css rule should work too!
.scroll-pane {
padding-bottom:15px!important;
}
In jQuery
$('.scroll-pane').parent().css('padding-bottom', '15px');
Should do the trick
CSS3 supports multiple background images, for example:
foo { background-image: url(/i/image1.jpg), url(/i/image2.jpg); }
I'd like to be able to add a secondary image to an element with a class though.
So for example, say you have a nav menu. And each item has a background image. When a nav item is selected you want to layer on another background image.
I do not see a way to 'add' a background image instead of redeclaring the whole background property. This is a pain because in order to do this with multi-backgrounds, you would have to write the base bg image over and over for each item if the items have unique images.
Ideally I'd be able to do something like this:
li { background: url(baseImage.jpg); }
li.selected { background: url(selectedIndicator.jpg); }
And have li.selected's end result appear the same if I did:
li.selected { background: url(baseImage.jpg), url(selectedIndicator.jpg); }
Update: I also tried the following with no luck (I believe backgrounds are not inherited..)
li { background: url(baseImage.jpg), none; }
li.selected { background: inherit, url(selectedIndicator.jpg); }
That is, in any case, not the way CSS inheritance works. inherit implies that an element should take on the attributes of it's parent element, not previous declarations affecting the same element.
What you want has been proposed as a way to make CSS more object-oriented, but the closest you will get is with a pre-processor like SASS.
For now you actually just have to re-state the first image along with the second.
I don't think this is possible, I think you'd have to redefine the whole rule every time.
For example, you could just add a "wrapper" around every item that has the initial background, with the actual item having a transparent background. Then add the background on the item itself when it's selected.
Additive CSS rules still aren't possible as far as I know.
You could try applying the second image to the ::after pseudo element:
li { background: url(baseImage.jpg); position: relative; }
li.selected::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: url(selectedIndicator.jpg);
}
I had the same need as you recently.
I finally thought about it and solved using css variables.
::root { --selectdropdown: url( '../elements/expand-dark.svg' ); }
select.gender.female { background-image: var(--selectdropdown), url( '../elements/female-dark.svg' ); }
When you resetting the attribute, just specify the variable again in the list!