If you look at a book, for example, in Amazon, you can see a rather nice (and much more intuitive than ellipses) effect for abbreviating text summaries:
Is there a well documented way of doing this or a library that facilitates such a summarization of text?
The extra content is hidden from view with these rules: height: 200px; and overflow: hidden;; you can see them applied to #outer_postBodyPS. But the fade effect is handled in #psGradient:
background: -moz-linear-gradient(bottom, rgb(255, 255, 255) 15%, rgba(255, 255, 255, 0) 100% );
background: -webkit-gradient(linear, bottom, top, color-stop(15%, rgb(255, 255, 255)), color-stop(100%, rgba(255, 255, 255, 0)) );
background: -webkit-linear-gradient(bottom, rgb(255,255,255) 15%, rgba(255, 255, 255, 0) 100% );
background: -o-linear-gradient(bottom, rgb(255,255,255) 15%, rgba(255, 255, 255, 0) 100% );
background: -ms-linear-gradient(bottom, rgb(255,255,255) 15%, rgba(255, 255, 255, 0) 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#03ffffff', endColorstr='#ffffff', GradientType=0 );
background: linear-gradient(bottom, rgb(255, 255, 255) 15%, rgba(255, 255, 255, 0) 100% );
The different prefixed rules (and the filter) are just for browser-specific instances.
You can inspect the whole stylesheet with these rules at http://z-ecx.images-amazon.com/images/G/01/browser-scripts/dpMergedOverallCSS/dpMergedOverallCSS-12049068973.V1.css.
The visual effect is simply CSS. There's a div with a gradient image fixed to the bottom which adds a "fade" illusion. Set the overlay to position:fixed;bottom:0 to add that visual effect.
As far as actually truncating the text, there are many ways to do it. The easiest way is to use the substring functions, like PHP's substr. http://php.net/manual/en/function.substr.php and simply cut off after X characters.
Alternatively, you can explode http://php.net/manual/en/function.explode.php the string on the [space] character and that would return an array of words. You can then iterate through that array easily and stop when you reach X words...
Related
I'm using Material-UI V4 library to create a React JS app.
I'm using the scrolling long content dialog example here https://v4.mui.com/components/dialogs/#scrolling-long-content.
What I want is to show a soft box-shadow at the top or bottom at the Dialog Content when the Dialog Content is scrolled like these 2 images below:
I found an example using a simple element (written in HTML and CSS) here How do I add a top and bottom shadow while scrolling but only when needed?.
I tried to implement the sample above in my Custom Dialog Content component but it didn't work as expected (no soft box-shadow appeared).
Here is the code for the Custom Dialog Content component:
// MATERIAL UI CORES
import DialogContent from "#material-ui/core/DialogContent";
import { withStyles } from "#material-ui/core/styles";
const CustomDialogContent = withStyles((theme) => ({
root: {
// SCROLLBAR
"&::-webkit-scrollbar": {
width: 5,
height: 5,
backgroundColor: "whitesmokeGray"
},
"&::-webkit-scrollbar-thumb": {
width: 5,
height: 5,
backgroundColor: "darkgray"
},
// SHADOW ON SCROLL
background:
"linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(50% 100%, farthest-side, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%",
background:
"linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%",
backgroundRepeat: "no-repeat",
backgroundColor: "white",
backgroundSize: "100% 40px, 100% 40px, 100% 14px, 100% 14px,",
backgroundAttachment: "local, local, scroll, scroll,"
}
}))(DialogContent);
export default CustomDialogContent;
Here is the full code: https://codesandbox.io/s/long-scroll-dialog-material-ui-ecicb?file=/src/CustomContentDialog.js
So, how can I show a soft box-shadow at the top or bottom at the Custom Dialog Content when the Custom Dialog Content is scrolled.
I am trying to apply linear-gradient to html progress bar but it's not applying the gradient
var customColor = '#cf014d';
ReactDOM.render(React.createElement("progress", { max: "100", value: "80",
style: { color: "linear-gradient(to left, #fff, #fff)" } }), document.getElementById('root'));
<script src="//unpkg.com/react/umd/react.development.js"></script>
<script src="//unpkg.com/react-dom/umd/react-dom.development.js"></script>
<div id="root"></div>
you need to use background: instead of color:
color - is for text color
Use background: for the background color. color is for the foreground color.
But, beyond that, progress bars are rendered in a proprietary way by each user agent, one set of styling rules won't work for all browsers. Just setting the style of the element is not enough, the browser renders a progress bar as a series of elements and each part must be styled correctly.
Here' is an example of creating the progress bar with React, but styling it with static CSS for rendering in browsers compliant with the -webkit- vendor prefix.
ReactDOM.render(React.createElement("progress", { max: "100", value: "80" }), document.getElementById('root'));
progress[value] {
/* Reset the default appearance */
-webkit-appearance: none;
appearance: none;
width: 500px;
height: 20px;
}
progress[value]::-webkit-progress-bar {
background-color: #eee;
border-radius: 25px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-webkit-progress-value {
background-image:
-webkit-linear-gradient(-45deg,
transparent 33%, rgba(0, 0, 0, .1) 33%,
rgba(0,0, 0, .1) 66%, transparent 66%),
-webkit-linear-gradient(top,
rgba(255, 255, 255, .25),
rgba(0, 0, 0, .25)),
-webkit-linear-gradient(left, #09c, #f44);
border-radius: 2px;
background-size: 35px 20px, 100% 100%, 100% 100%;
}
<script src="//unpkg.com/react/umd/react.development.js"></script>
<script src="//unpkg.com/react-dom/umd/react-dom.development.js"></script>
<div id="root"></div>
Background property will style the "background" part - not the value.
Here is a nice article for styling the progress bar.
https://css-tricks.com/html5-progress-element/
I've been able to use answers provided at Load HTML page dynamically into div with jQuery to perfectly load html into divs in the past, however, with a new project that I've started which is based off of a codrops template (multi-level push menu), the pages do not load into the designated .content div
The webpage is here. I've loaded all the proper jquery libs, and the test page "bio.html" is properly pathed.
I am working very specifically on the first ul li menu list link "Biography" to just test the functionality of it.
The code I'm using in jquery is
$(document).ready(function(){
$("#bio").click(function(){
$('.content').load('bio.html');
//alert("Thanks for visiting!");
});
});
The selector "#bio" has been applied to
<li><a class="icon icon-male" id="bio">Biography</a></li>
in index.html. In the class="content" div tag I have it's css set to
.content {
color: white;
background: rgba(0,0,0,0.9);
background: -moz-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0.9)), color-stop(100%, rgba(0,0,0,0.6)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
width: 60%;
border-radius: 2px;
padding: 3em 2em;
max-width: 1200px;
max-height: 800px;
margin: 0 auto;
box-shadow: 0 5px 7px -5px rgba(0,0,0,.7);
}
I don't know if any of the above code is interfering with whatever is not allowing the page to load dynamically when handler is clicked. I did make a change to class="content" from class="content clearfix" because I'm not too concerned about using the clearfix hack at the moment, which was the only change in identifying the element in the original codrops html.
you called jQuery library after your script ,
call jQuery first and then your script
and i encourage you to use 1.9.0 or later version.
Looking at your link you are loading your jquery file after your code therefor '$' is not defined move your jquery library above that and it should start working.
I would like to have a liquid background on my website such as the one you can see on this website :
http://www.baliilmare.com/
I used to have done it in the past using FLASH and actionscript 3 but it really seems dated as an option
and the max-width 100% CSS trick doesn't give the same result.
I actually would like to reap the Javascript from this website but am really noob in terms of javascript and would need a tut or maybe someone pointing the right JS/Jquery (I see different .js files used from the source)
I can then google it and see how it works ...
Can someone help ?
Use Firefox or Chrome and right-click->inspect element. It's the fastest way to see what's going on behind a site.
They are using the image as a cover.
HTML:
<div class="coverImg" style="background-image: url(urltoimage); height: 456px; ">
</div>
CSS:
.coverImg {
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
position: relative;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
you probably could load the background image into your body tag:
body { background-image: url(/images/thisbackground.jpg);
hope this helps
I have a graphic background, and I need to display a colored triangle in the top left corner (independing the resolution).
Can I create a triangle shaped element using only HTML/CSS/JS with width = 100% and height = 200px with background = red?
I can create it by IMG with width=100%, but I was hoping for a better solution than resizing an image.
The solution needs to be compatible with IE7+ and using browser's versions (more than 2%).
Thanks
Because you can't create a border which has a percentage, try using vw (viewer width) instead. So:
.triangle{
width: 0;
height: 0;
border-bottom: 600px solid blue;
border-left: 100vw solid transparent;
}
Vw units aren't supported by IE8, you will need to use a JS fallback for browsers that don't support these units.
Here is a jQuery script that sets the border-width according to the window size and adjusts it on window resize. Tested in IE8 (IE tester) :
$(document).ready(function() {
function triangle() {
var width = $('#wrap').width(),
border = width / 4;
$("#wrap .tr").css({
"border-left": border + "px solid #fff",
"border-bottom": border + "px solid transparent"
});
}
triangle();
$(window).on('resize', triangle);
});
body {
background: #fff;
}
#wrap {
position: relative;
min-height: 500px;
background: teal;
}
.tr {
position: absolute;
left: 0;
top: 0;
border-left: 200px solid #fff;
border-bottom: 200px solid transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrap">
<div class="tr"></div>
</div>
To expand on web-tiki's answer, I think this is actually what you're going for:
$(document).ready(function() {
function triangle() {
$("#wrap .tr").css({
"border-left": $('#wrap').width() + "px solid #fff",
"border-bottom": "200px solid transparent"
});
}
triangle();
$(window).on('resize', triangle);
});
body {
background: #fff;
}
#wrap {
position: relative;
min-height: 500px;
background: teal;
}
.tr {
position: absolute;
left: 0;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrap">
<div class="tr"></div>
</div>
I think it would be best to use background instead of borders:
.my-triangle {
width: 100%;
height: 200px;
background: linear-gradient(to left top, transparent 50%, red 50%);
}
<div class="my-triangle"></div>
Note that in order for it to be cross-browser compatible you will need to fiddle around with CSS prefixes, IE filters and SVG. (I don't readily have access to IE so I'll leave that one for you, but it would be something along these lines:)
background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, transparent), color-stop(0.5, transparent), color-stop(0.5, #FF0000), color-stop(1, #FF0000));
background-image: -webkit-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
background-image: -moz-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
background-image: -ms-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
background-image: -o-linear-gradient(bottom right, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
background-image: linear-gradient(to top left, transparent 0%, transparent 50%, #FF0000 50%, #FF0000 100%);
Just take a div element, give a class name 'triangle-topleft', and write the below given css
.triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
color of border-top would be the div's background color..Here it's red.
For more triangle structures, follow this link..
[http://css-tricks.com/examples/ShapesOfCSS/][1]