I am trying to achieve the following effect, where here i'm using ( ) to represent a radio button:
Y N
( ) ( ) 1. blah blah blah blah.
( ) ( ) 2. blah blah blah blah
blah blah blah.
( ) ( ) 3. blah blah blah blah.
The following fiddle gives close to what I want on Safari & Chrome,
but not Firefox: http://jsfiddle.net/RKfrk/7. But on Firefox,
the radio buttons do not float left. I haven't tried IE.
Any suggestions? Thanks in advance.
I added a negative margin in order to move the radio buttons to the left of the list numbers:
.floatingButtons {
width: 4em;
float:left;
margin-left:-4em;
}
.clearFloat {
clear:left;
}
li {
margin-left:2em;
}
here's the fiddle: http://jsfiddle.net/mmertel/7mBkR/
Related
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;
}
}
Is it possible to select the element First but not Second?
<p> <code>first</code> </p>
<p> Text <code>second</code> Text </p>
I intend to select <code> when its child of <p> but without content (except whitespace) in <p>
I want to do it without JS, if it is not possible that would also be an answer if its explained
You can do this using a filter in jQuery:
$('p').filter(function() {
var nodetoCheck = $(this).contents()[0];
if ($(this).contents()[0].nodeValue.trim() === '') {
nodetoCheck = $(this).contents()[1];
}
if (nodetoCheck.nodeType === 1) {
return true;
}
}).addClass('selected');
JSfiddle Example: https://jsfiddle.net/jennifergoncalves/eywk7b53/1/
p:first-child > code {
color:#fff;
background:tomato;
}
<p> <code>first</code> </p>
<p> Text <code>second</code> Text </p>
Also included fiddle code if you do it with jquery
Working fiddle
First off, here's the fiddle: https://jsfiddle.net/u8v3rgyt/1/
The basic scenario is this: I have some text, which will vary in length. Below this text I have a column of (EDIT: a varying number of) buttons, which also have text that varies. What I want is for the text to control the overall width, and then have the button column adjust its width/its buttons' width in response. In other words, for two different sizes of text, I'm trying to achieve the following:
// Short text
La la la la
[Button 1
text]
[Button 2
with long
text]
// Longer text
La la la la la la la la la la
[Button 1 text]
[Button 2 with long text]
but I get:
// Short text
La la la la
[Button 1 text]
[Button 2 with long text]
I feel like I'm close, but I can't get the button container to have the correct width (and thus I can't limit my buttons' width). Or rather, I can, but to do so I have to put a fixed width on the text, and that doesn't work because I need the whole thing to adjust it's size based on the text.
Any help would be appreciated.
As I understand, you want the text to dictate the width of the area in which the buttons are laid out. Using the CSS3 flex box model you could do something along these lines:
.container {
display: inline-block;
border: 1px solid red;
margin-bottom: 24px;
}
.inner {
display: flex;
flex-wrap: wrap;
}
button {
flex-grow: 1;
}
<div class="container">
<p>Some text blah blah blah, blah blah blah</p>
<div class="inner">
<button>Button 1</button>
<button>Button 2</button>
</div>
</div>
I'm a real newbie so the wording to my question may not be accurate. I'm using wordpress and have a title that I want to be able to target with CSS. Here is the specific section I'm trying to target:
<p style="text-align: center;"><span style="font-size: 36px;"> Your Store, Your Way!</span></p>
Here is a summary of the code (not really code):
[shortcode]
<p style="text-align: center;"><span style="font-size: 36px;"> Your Store, Your Way!</span></p>
[shortcode]
Text, blah blah blah blah blah`
So basically what can i add to this so that only the above mentioned span will be targeted?
I don't have a live site right now, on a local install, sorry.
Thank you!!
Try to give a class to <span> like:
<span class="className"> text text </span>
then write on CSS for it :
.className {
color: red;
}
OR
You can give class to <p> tag like :
<p class="className"><span>text text</span></p>
then in CSS:
.className span {
color:red;
}
As i understand your question...
If you want to change span css elements which is located in 'p', incase not able to add class name to 'p'. You can write like the below attribute styles in css.
p[style="text-align:center"] span{
border:1px solid red
}
In CSS when I use
p:hover {background-color: grey;}
it changes the whole paragraph. I want it to change a single word in that paragraph when I hover on any words in it. How can I do it ?
If you don't want to wrap every word manually, you can use jQuery to do it for you like below:
var p = $('p');
var text = p.text().split(' ');
for( var i = 0, len = text.length; i < len; i=i+1 ) {
text[i] = '<mark>' + text[i] + '</mark>';
}
p.html(text.join(' '));
Then you make your CSS as below:
p mark:hover {background:yellow}
Here's the demo: http://jsfiddle.net/zL2Yw/1/
Unfortunately, there's no pure CSS solution.
Just wrap your word with an inline element, e.g.
<p>
Lorem ipsum sit dolor amet <mark>consectetur</mark> dolor ...
</p>
And change its background color when the paragraph is hovered
p:hover mark {
background-color: grey;
}
(Feel free to use a most suitable element instead of <mark>...</mark>)