I'm working on animating one of my pages, a testimonials page that has multiple body elements to it. I had the idea to fade in each one of the body elements one by one using this tutorial. The thing I'm confused about is where the example code contains this:
return (
<div>
<button onClick={this.handleAdd}>Add Item</button>
<ReactCSSTransitionGroup
transitionName="example"
transitionEnterTimeout={500}
transitionLeaveTimeout={300}>
{items} // this specifically
</ReactCSSTransitionGroup>
</div>
Would I have to add each one of the body elements to a list of items in order to get this to work? I'm pretty confused about how I should go about doing this. My first thought would be to wrap each one of the body elements into their own separate ReactCSSTransitionGroup, like such:
<ReactCSSTransitionGroup>
<body className="testimonial-body" id="placeholder">
<p>"This is another testimonial. This will probably contain
information such as how good his work was and stuff like that.
Blah blah blah blah blahhhhhhhhhhhhhhhhh."
<span class="testimonial-signature">- Some random dude ⋅ Somwhere, Anywhere</span>
</p>
<Gallery images={doug_and_sue_images} // will change
backdropClosesModal={true}
enableKeyboardInput={true}
enableImageSelection={false}/>
</body>
</ReactCSSTransitionGroup>
But that doesn't seem right because I don't know what I would replace {items} with. Below is the code I'm working with:
import React from 'react';
import '../Client/CSS/Testimonials.css'
import Gallery from 'react-grid-gallery'
import ReactCSSTransitionGroup from 'react-transition-group';
const doug_and_sue_images =
[{
src: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg",
thumbnail: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_n.jpg",
thumbnailWidth: 320,
thumbnailHeight: 174,
caption: "After Rain (Jeshu John - designerspics.com)"
},
{
src: "https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_b.jpg",
thumbnail: "https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_n.jpg",
thumbnailWidth: 320,
thumbnailHeight: 212,
caption: "Boats (Jeshu John - designerspics.com)"
},
{
src: "https://c4.staticflickr.com/9/8887/28897124891_98c4fdd82b_b.jpg",
thumbnail: "https://c4.staticflickr.com/9/8887/28897124891_98c4fdd82b_n.jpg",
thumbnailWidth: 320,
thumbnailHeight: 212
}]
class Testimonials extends React.Component {
render() {
return (
<div>
<h2>See what people are saying...</h2>
<ReactCSSTransitionGroup
transitionName="example"
transitionAppear={true}
transitionAppearTimeout={500}
transitionEnter={false}
transitionLeave={false}>
<body className="testimonial-body" id="doug_and_sue">
<p>"Dependable, trustworthy, and expert workmanship all
describe Kevin and his business.
He completely transformed our condo, painting it from top to
bottom, among other projects.
Not only does he do excellent work, but he's a
pleasure to have in your home. For any future projects,
there's no one we'd rather have than Kevin."
<span class="testimonial-signature"> - Doug and Sue ⋅ Brookfield, WI</span>
</p>
<Gallery images={doug_and_sue_images}
backdropClosesModal={true}
enableKeyboardInput={true}
enableImageSelection={false}/>
</body>
</ReactCSSTransitionGroup>
<body className="testimonial-body" id="placeholder">
<p>"This is another testimonial. This will probably contain
information such as how good his work was and stuff like that.
Blah blah blah blah blahhhhhhhhhhhhhhhhh."
<span class="testimonial-signature">- Some random dude ⋅ Somwhere, Anywhere</span>
</p>
<Gallery images={doug_and_sue_images} // will change
backdropClosesModal={true}
enableKeyboardInput={true}
enableImageSelection={false}/>
</body>
<body className="testimonial-body" id="placeholder">
<p>"This is another testimonial. This will probably contain
information such as how good his work was and stuff like that.
Blah blah blah blah blahhhhhhhhhhhhhhhhh."
<span class="testimonial-signature">- Some random dude ⋅ Somwhere, Anywhere</span>
</p>
<Gallery images={doug_and_sue_images} // will change
backdropClosesModal={true}
enableKeyboardInput={true}
enableImageSelection={false}/>
</body>
<body className="testimonial-body" id="placeholder">
<p>"This is another testimonial. This will probably contain
information such as how good his work was and stuff like that.
Blah blah blah blah blahhhhhhhhhhhhhhhhh."
<span class="testimonial-signature">- Some random dude ⋅ Somwhere, Anywhere</span>
</p>
<Gallery images={doug_and_sue_images} // will change
backdropClosesModal={true}
enableKeyboardInput={true}
enableImageSelection={false}/>
</body>
</div>
);
}
}
export default Testimonials;
CSS:
h2 {
font-family: sans-serif;
font-style: italic;
margin-left: 20px;
}
body {
margin-left: 5%;
margin-right: 5%;
}
.testimonial-body p {
font-size: 16pt;
font-style: italic;
font-family: sans-serif;
display: inline-block;
}
span.testimonial-signature {
font-size: 12pt;
font-weight: bold;
margin-left: 1%;
font-family: sans-serif;
}
/* transitions */
.example-enter {
opacity: 0.01;
}
.example-enter.example-enter-active {
opacity: 1;
transition: opacity 500ms ease-in;
}
.example-leave {
opacity: 1;
}
.example-leave.example-leave-active {
opacity: 0.01;
transition: opacity 300ms ease-in;
}
.example-appear {
opacity: 0.01;
}
.example-appear.example-appear-active {
opacity: 1;
transition: opacity .5s ease-in;
}
/* Mobile View */
#media (max-width: 768px) {
.testimonial-body p {
font-size: 14pt;
}
}
Related
I have an array of divs containing book names that I generate using a .map function on some fetched data from my database. Some of the book names are too long so I have used the following CSS to hide them:
.book-title{
font-weight: 600;
height: 1.5rem;
max-width: 15rem;
overflow: hidden;
padding-top: 0.7rem;
}
But I would like to make the text visible when user hovers over the div. My current solution applies to all divs generated and displayed by the .map function - I am unsure how to make it just apply to divs where the text is too long.
.book-title:hover{
height: 6rem;
overflow: visible;
}
Is there a proper way to do this with react?
here is the relevant .jsx
const listsForFrontPage = listArray.map((book, id) => {
return (
<Link className="book-link" to={`/books/${book.book_id}`} key={id}>
<div className="book-card">
<div className="book-card-image">
<img
className="cover-image"
src={book.cover_image}
alt="The book cover"
/>
</div>
<div className="book-info">
<div className="book-title">{book.title}</div>
<div className="author-name">{book.name}</div>
</div>
</div>
</Link>
)
})
You need to check if the element is overflowing
add useRef:
const refs = useRef(listArray.map(() => React.createRef()));
then you should create a function that checks if the element is overflowing:
const isOverflown = (el) => {
if(!el) return;
const { clientWidth, clientHeight, scrollWidth, scrollHeight } = el;
return scrollHeight > clientHeight || scrollWidth > clientWidth;
}
and then you need to add class based on isOverflown value:
const listsForFrontPage = listArray.map((book, id) => {
return (
<Link className="book-link" to={`/books/${book.book_id}`} key={id}>
<div className="book-card">
<div className="book-card-image">
<img
className="cover-image"
src={book.cover_image}
alt="The book cover"
/>
</div>
<div className="book-info">
<div ref={refs.current[id]} className={`book-title ${isOverflown(refs.current[id].current) ? 'book-title-overflow' : ''}`}>{book.title}</div>
<div className="author-name">{book.name}</div>
</div>
</div>
</Link>
)
})
don't forget to add your css:
.book-title-overflow:hover{
height: 6rem;
overflow: visible;
}
I'm currently working on a dating website for a school project, but i'm stuck and not sure if i'm on the right way.
On the user profile, i want a list of the photos the user choose to show, and i want a hover on the photo where the pointer is.
In my state i added a listPhotoHover: [ ], a tab that contains variables true or false. listPhotoHover[0] = true means the first photo of the list has a hover, false means no hover.
I map and add a div for every photo with a onMouseEnter( ) that takes the photo index and set it an hover if fired.
The hover appears if listPhotoHover[index] exists, the hover div has an onMouseLeave( ) that takes the photo index and set the hover of the photo as false.
Everything seems to work but i'm not sure if it's the best way to do it, and when i move very fast on every photo the hover is still there i think the onMouseLeave( ) don't run.
Here's my code
Map of every photo :
photos.map((photo, index) => {
return
<div className={`flex row`} key={index} >
<img
className={classes.userPhotos}
src={photo}
alt={`photo de ${name}`}
onMouseEnter={() => { this.haveHover(index) }}
/>
{
listPhotoHover[index]
? <div
className={`
absolute flex center alignCenter
${classes.userPhotos} ${classes.photoHover}
`}
onMouseLeave={
() => { this.removeHover(index) }
}
/>
: null
}
</div>
})
function when onMouseEnter() or onMouseLeave() is fired:
haveHover (index, value) {
const tab = this.state.listPhotoHover
tab[index] = value
this.setState({listPhotoHover: tab})
}
I would like to know why does the onMouseLeave() don't work when my pointer move very fast and also what is the best way to do an hover on a map.
Thank you for your advices and sorry if i don't write english correctly
ps: i checked previous questions and didn't find any answer yet :(
Josephine
I don't believe you need javascript to achieve your desired effect. If it is simply to show something when the image is hovered, you can uses some advanced CSS selectors to do this. Run the snippet below to
html {
font-family: sans-serif;
font-size: 10px;
}
.wrap {
position: relative;
}
.image {
width: 80px;
height: 80px;
}
.imageinfo {
display: none;
width: 80px;
height: 17px;
background: #cc0000;
color: #efefef;
padding: 3px;
text-align: center;
box-sizing: border-box;
position: absolute;
bottom: -13px;
}
/* here's the magic */
.image:hover+.imageinfo {
display: block;
}
Hover the image to see the effect
<div class="wrap">
<img class="image" src="https://www.fillmurray.com/80/80" />
<div class="imageinfo">
Bill Murray FTW
</div>
</div>
I just realized i did it all wrong, i added a className with a '&:hover' on the div containing one photo, and it works. No need javascript :D
I don't know why i wanted to complicate it haha..
className:
ANSWER: {
'&:hover': {
opacity: '0.4',
cursor: 'pointer'
}
}
div with the photo:
photos.map((photo, index) => {
return <div className={`flex row ${classes.ANSWER}`} key={index} >
<img
className={classes.userPhotos}
src={photo}
alt={`${name}`}
/>
</div>
})
Hope my mistake will help some people
I need to display ex: $300.00, but I need the dollar sign to be displayed smaller than the number so its going to look like a trademark, but not that small.
Is there a CSS function that does that?
Thank you in advance.
Could be something like this?
HTML:
<span class="dollar">300.00</span>
CSS:
.dollar:before {
content: '$';
font-size: somethingSmaller;
}
See this fiddle and let me know if this helps.
But only if not empty!
.currency:not(:empty):before {
top: 0;
content: "$";
}
<span class="currency">10.5</span><br />
<span class="currency"></span><br />
<span class="currency">42</span><br />
Use a <span> element to style in-line text:
HTML:
<span class="currency">$</span>
<span class="price">300</span>
CSS:
.currency{
font-size:.5em;
vertical-align:text-top; /* resembling more the tm symbol you mentioned */
}
A fiddle for convenience...
The difference from lante's answer is that this will work in much older browsers as well. For more info, see the support for :before and :after pseudo elements.
Use the :before pseudo selector
.amount:before {
content: "$";
font-size:.9em;
}
A very simple way to do this would be :
HTML :
<div class="text">
<span class="dollar">$</span>300
</div>
CSS :
.text {
font-size: 18px;
}
.dollar {
font-size:15px;
}
See here->http://jsfiddle.net/xMKsH/
However, if you understand pseudo-selectors well, you would be better off using this:
HTML:
<div class="text">300</div>
CSS:
.text {
font-size: 18px;
}
.dollar:before {
content:'$';
font-size:15px;
}
See here->http://jsfiddle.net/xMKsH/1/
Hope this helps!!
If you really must do this, use
<small>$</small>300.00
and, if desired, set the size of small in CSS, e.g.
small { font-size: 75% }
I've been a bit confusing on how to do so...
This is my code:
<div class="game_grid">
<center><div id="game_name"><?php echo $game_name; ?><br /></div></center>
<div id="game_image"><img src="images/games_images/<?php echo $game_image; ?>" width="120" height="120" /></div>
</div>
I failed to use "text-decoration:underline;" to make the title (game_name) underline when I put my mouse over the game image...
Any idea?
I do not know what is needed and what not in your HTML, so I'll just show a few examples, take a pick.
For example a simple build: http://jsfiddle.net/B6gD4/
Maybe style the image: http://jsfiddle.net/B6gD4/1/
And finally your IDs added if necessary for anything other than styling: http://jsfiddle.net/B6gD4/2/
Simple HTML:
<div class="game_grid">
<a href="game_page.php?id=1">
<img id="game_img" src="images/games_images/<?php echo $game_image; ?>" width="120" height="120" />
<span id="game_name">Title</span>
</a>
</div>
CSS:
.game_grid {
text-align: center;
}
.game_grid a {
text-decoration:none;
}
.game_grid a:hover {
text-decoration:underline;
}
.game_grid img {
/* any styles */
}
.game_grid span {
display:block;
font-weight: bold;
}
You can add your div styles to the respective game_grid span or game_grid img, keeping the same look but shortening your HTML by 50%.
There are alot of elements in between them. So CSS won't be easy to do that, you can try out jQuery for this:
$('#game_image').hover(function () {
$('#game_name').css('text-decoration', 'underline');
}
CSS would have been possible if they were siblings of the same parent element. Then you would have used:
#game_image:hover + #game_name {
text-decoration: underline;
}
If the name was the direct child of the image element (which is not possible although) then you would have used > child selector. But at this stage, you should use jQuery to query among the elements.
I'm attempting to toggle the transparency (effectively, from invisible to visible) of a title/date div (#post_h3_container) over the snippet of the post on a blog rollup page on mouseover of the parent div (#text_post_body). I've managed to make this work when hovering the #post_h3_container div only.
I've tried various selectors between the divs including +, ~, > (and using :hover) and even no selectors at all and can't seem to create the desired effect. I've matched my code to several answers addressing this on StackOverflow, but still no dice. I've starred the CSS rule that doesn't seem to be doing anything.
Any idea what it is I'm missing? This is for Tumblr, if that makes a difference.
Here's the site: http://bookishmatt.tumblr.com/
The CSS:
#text_post_body {
max-width: 460px;
margin-top: -15px;
}
#post_h3_container {
position: absolute;
width: 450px;
max-height: 120px;
background-color:rgba(51,51,51,0.8);
padding: 0 5px 0 5px;
opacity: 0;
}
#post_h3_container:hover {
opacity: 1;
-webkit-transition: opacity .4s;
}
**#text_post_body:hover ~ #post_h3_container {
opacity: 1;
-webkit-transition: opacity .4s;
}**
The HTML:
<div id="post">
<div id="text_post">
{block:Text}
{block:Permalink}{block:Title}<div id="perma_post"><h3>{Title}</h3></div>{/block:Title}
<div id="post_date_perma">{block:Date}<h2>{Month} {DayOfMonth}{DayOfMonthSuffix}, {Year} at {12Hour}:{Minutes} {AmPm}</h2>{/block:Date}</div><div id="by_container_perma">By +Matt Albrecht
{/block:Permalink}
{block:IndexPage}<div id="post_h3_container">{block:Title}<h3>{Title}</h3>{/block:Title}
<div id="post_date">{block:Date}<h2>{Month} {DayOfMonth}{DayOfMonthSuffix}, {Year} at {12Hour}:{Minutes} {AmPm}</h2>{/block:Date}</div><div id="by_container">By +Matt Albrecht
</div> {/block:IndexPage}
</div>
</div>
<div id="text_post_body">{Body}{block:More} Read more... {/block:More}</div>
<div id="notes">
<p>
<div id="socialcomments">
{block:IndexPage}{block:IfDisqusShortname}<a class="dsq-comment-count" href="{Permalink}#disqus_thread">Comments</a>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'bookishmatt'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function () {
var s = document.createElement('script'); s.async = true;
s.type = 'text/javascript';
s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>
{block:IfDisqusShortname}
{/block:IndexPage}
<span st_url='{Permalink}' st_title='{Title}' class='st_facebook_hcount' displayText='Facebook'></span><span st_url='{Permalink}' st_title='{Title}' class='st_twitter_hcount' displayText='Tweet'></span><span st_url='{Permalink}' st_title='{Title}' </span>
</div>
{/block:Text}
</div>
Any insights welcome. If jquery is needed, I'll admit outright that this is over my head, so I may need a really dumbed down walkthrough for how to implement the code, if that's the case.
EDIT: On the other hand, maybe you're of the opinion that the current hover options are alright on their own. If you don't think the whole snippet should reveal the title/date, I value your opinion on that matter, too.
CSS hover can only affect the object itself or its descendants. In this case, post_h3_container is a child of a sibling.
You could organize this better and:
HTML:
create an element .container that wraps both #by_container_perma and #text_post_body
CSS:
.container:hover #post_h3_container {
opacity: 1
}
If you don't like that, I will give you some jQuery, but it seems excessive.
Also, you mentioned this is a blog... be careful of your id's. They should not be used for repeated content.
#text_post_body:hover #post_h3_container {
opacity: 1.0;
}
Instead of your #post_h3_container:hover properties. Also you can apply the transition property to just plain #post_h3_container