I am using jQuery and AJAX on my website. My AJAX respond is a text representing the continuance of an article. I've read that there's a STEP function in jQuery's animate but I don't know how to use that to append text character by character to a DIV element.
Please Help me.
Thanks in advance. :D
Try this.
var someajaxtext = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum sem sit amet magna convallis sed ullamcorper mi commodo.';
$('button').click(function () {
var dv = $('#mydiv');
dv.text("");
jQuery({
count: 0
}).animate({
count: someajaxtext.length
}, {
duration: 1500,
step: function () {
dv.text(someajaxtext.substring(0, Math.round(this.count)));
}
});
});
Demo here: http://jsfiddle.net/naveen/evVMw/
P.S: Change the duration as you wish.
Related
I have a website built on SASS. There're certain variables I want to change while switching between light and dark themes, but all variables get compiled and converted to its original value. Hence, I don't know how to change SASS variables while changing themes.
Assuming I have following variables in style.scss:
$mainColor: #eaeaea;
$secondaryColor: #fff;
$mainText: black;
$secondaryText: #2a3a47;
$borderColor: #c1c1c1;
$themeDotBorder: #24292e;
$previewBg: rgba(251, 249, 243, 0.8);
$previewShadow: #f9ead6;
$buttonColor: #0a0a0a;
How do I change these variables while switching themes. I can create two separate css files but that would be redundant code. Can you help me?
Depending on your build process and requirements for older browsers, for example ie11.
Themes becomes easier with css custom properties (css variables). The basic idea is that you have your variables, and on theme change you change the color of the variables.
In my very very basic example the following things happen and why.
On root level set your variables for your default theme.
Have a class with the describing the theme, in my example it is .dark-theme
Set a class on the body when dark-theme is active with js, or postback depending on your backend and wanted approach. In my example I do it with js.
What happens here is that in .dark-theme we change the variables to the dark theme colors. That is the basics of it and will get you far.
Just a note, the approach on saving the theme all depends on what kind of site you have SPA, Wordpress, .NET ect. I seen mentions about saving it in the database and user, that kinda don't hold up if you don't have user signing. One approach is to save it in the browsers local storage and read it when you load the page.
const themeSwitcherButton = document.querySelector('.js-theme-switcher')
themeSwitcherButton.addEventListener('click', function() {
const body = document.querySelector('body')
if (body.classList.contains('dark-theme')) {
body.classList.remove('dark-theme')
} else {
body.classList.add('dark-theme')
}
})
:root {
--primary-color: deepskyblue;
}
body.dark-theme {
--primary-color: deeppink;
}
.block {
margin-bottom: 3rem;
padding: 2rem;
background-color: var(--primary-color);
}
<body>
<p class="block">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quos odio atque excepturi, aut voluptate. Similique autem, eos rem cum tenetur perspiciatis voluptatibus reprehenderit cumque, inventore, nam laudantium fugiat molestias eveniet sit commodi deleniti. Ipsa eum animi, excepturi tempore placeat.
</p>
<button class="js-theme-switcher">Theme switcher</button>
</body>
use css variables instead of sass one
--mainColor: #eaeaea;
and
color: var(--mainColor);
to use it
edit:
to change dynamically css variables
var bodyStyles = document.body.style;
bodyStyles.setProperty('--mainColor', 'white');
if variables was declared on body element
In Polymer0.5, I had the following code:
Template:
<div class="scroll">
<div class="content">
<content></content>
</div>
</div>
Script:
domReady: function() {
var width = $(this.shadowRoot).find('.content')[0].scrollWidth;
}
This code worked, and I received a non-zero value for the width.
Now I am trying to migrate to Polymer1.0, I added an ID to the div:
<div class="scroll">
<div id="content" class="content">
<content></content>
</div>
</div>
And the script is now:
ready: function() {
var width = this.$.content.scrollWidth;
}
However, this width is 0.
Is there a difference between the old domReady function, and the new ready function? I have also tried using the attached function but it did not work either.
When I try to access the width later on (triggered by a button press), then I get the non-zero value I am looking for.
The element is used like this:
<my-scrollbar>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam purus leo, sagittis lobortis velit vel, viverra vulputate purus. Proin lacinia magna eu erat iaculis, eget mollis lectus mattis.
</my-scrollbar>
So that inner text is what determines the dimensions of the element.
It turns out that my original code was working in Safari, but not in Chrome.
With Zikes suggestion, I added in some async, and now it works in both browsers.
Final answer:
attached: function() {
this.async(function(){
var width = this.$.content.scrollWidth;
},1)
}
An alternative is to "flush" the DOM before working with it. In this case, the code would be:
attached: function() {
var width;
Polymer.dom.flush();
width = this.$.content.scrollWidth;
},
Since this is synchronous, declarative, and doesn't involve closures, it could be easier to work with.
More information: https://www.polymer-project.org/1.0/docs/devguide/local-dom.html#dom-api
I'm using Polymer web components, and I'm finding that the default height of the core-pages element is 0. I want it to depend on the height of its child elements, ideally the height of the selected child.
Here's an example page that demonstrates the issue (live jsbin):
<!DOCTYPE html>
<html>
<head>
<script src="https://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="https://www.polymer-project.org/components/core-pages/core-pages.html">
</head>
<body>
<h1>Before <core-pages> element</h1>
<core-pages selected="0" block>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</div>
</core-pages>
<h1>After <core-pages> element</h1>
<script>
// Uncomment this kludge to fix the layout.
/* window.addEventListener('polymer-ready', function() {
var selected = document.querySelector('core-selected');
var height = window.getComputedStyle(selected).height;
document.querySelector('core-pages').setAttribute('style', 'height:' + height);
}); */
</script>
</body>
</html>
On my desktop Chrome 39, the trailing header overlaps the core-pages content (instead of appearing below it) because the core-pages element is given a height of 0 (which I believe is because the core-pages implementation uses absolute positioning on the child elements, but I could be wrong).
This can be "fixed" by giving the core-pages element an explicit height (such as with the commented javascript in the example), but this is undesirable and really should be triggered on reflow. It's ugly and doesn't align with Polymer's declarative emphasis.
Is there any elegant way to fit core-pages to its content so it lays out in an intuitive manner? I'm hoping there is some magical CSS or Polymer setting that will fix this.
I came to the following workaround.
Say, we have a core-pages nesting my custom component mudasobwa-custom:
<core-pages selected="0" block>
<mudasobwa-custom>CONTENT</mudasobwa-custom>
</code-pages>
Let’s define a PolymerExpression like:
PolymerExpressions.prototype.elementSize = function(el) {
var result = { w: 0, h: 0 };
for (ch in el) {
result.w += el[ch].offsetWidth;
result.h += el[ch].offsetHeight;
}
return result;
};
Then we need to define a computed property on the core-pages descendant components (one might surround the content with “wrapper” component whether core-pages are nesting pure HTML elements, which is not my case; I have mudasobwa-custom component nested.)
<!-- don’t forget to publish ⇓⇓⇓⇓⇓ -->
<polymer-element name="mudasobwa-custom" attributes="sizes ......
.......
Polymer({
.......
needupdate: boolean,
computed: {
sizes: 'elementSize($, needupdate)'
}
.......
Once the needupdate changes it’s value, the expression is to be recalculated (use it for explicit triggering.) The only think left is to bind core-pages width/height to this computed property:
<!-- use auto binding ⇓⇓⇓⇓⇓⇓⇓ -->
<core-pages ... style="height:{{ sizes.h }}px;">
<mudasobwa-custom sizes="{{ sizes }}">
This approach might look overengineered, but it requires the expression to be written only once and then you immediately yield an access to all the real widths/heights.
Live: http://plnkr.co/edit/U98IzTxUVUuEUuPbxNgF?p=preview
Hope it might help somebody.
In the <core-pages> demo page ( https://www.polymer-project.org/components/core-pages/demo.html ) they use also an explicit height to solve the problem, so I guess that it's the "official" way for now...
I'll try some CSS tricks latter to see if I can find a more elegant solution...
If not needed the absolute positioning of the children, you can position them relative inside the core pages:
In your example:
core-pages > div {
position: relative !important;
}
http://codepen.io/anon/pen/vEZjWd
i have long text like that :-
"5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experienc
"
But i need only 2 line to show on page and a more button to check complete text.
Is this posible with angular.js ?
if yes What would you suggest me ?
Yes, this is totally possible with AngularJS -- but most of the solution is actually CSS.
You'll be able to do this mostly through CSS. First, HTML/CSS doesn't really have a concept for how many lines a bunch of text is taking up. You can get the behavior you want by setting the height of a container element and the line-height of your text on the CSS line-height. For your default state, set the height based on two times your line height and set the overflow to hidden. Then you just need have your button conditionally apply a class that expands the height of the container and sets the overflow to visible:
<style>
.container {
font-size: 16px;
line-height: 16px;
height: 32px;
overflow: hidden;
}
.show {
overflow: visible;
height: auto;
}
<div class="container" ng-class="{show: show}">
[your text]
</div>
<button ng-click="show = true">Show text</button>
You can get fancy and make the button also hide the text again (as a toggle).
ng-text-truncate
https://github.com/lorenooliveira/ng-text-truncate
Demo 1
https://rawgit.com/lorenooliveira/ng-text-truncate/master/demo1.html
Example
<p ng-text-truncate="longTextVariable"
ng-tt-chars-threshold="40"></p>
angular-read-more
https://github.com/ismarslomic/angular-read-more
Demo
http://codepen.io/ismarslomic/pen/yYMvrz
<div hm-read-more
hm-text="{{ text }}"
hm-limit="100"
hm-more-text="read more"
hm-less-text="read less"
hm-dots-class="dots"
hm-link-class="links">
</div>
If you'd prefer to have a div that truncates itself based on pixel height instead of character count, you can try this. This allows you to put nested HTML in your expandable section.
angular.module('app', [])
.controller('TestController', function($scope) {
$scope.loremIpsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
})
.directive('showMore', function() {
return {
restrict: 'A',
transclude: true,
template: [
'<div class="show-more-container"><ng-transclude></ng-transclude></div>',
'More',
'Less',
].join(''),
link: function(scope, element, attrs, controller) {
var maxHeight = 45;
var initialized = null;
var containerDom = element.children()[0];
var $showMore = angular.element(element.children()[1]);
var $showLess = angular.element(element.children()[2]);
scope.$watch(function () {
// Watch for any change in the innerHTML. The container may start off empty or small,
// and then grow as data is added.
return containerDom.innerHTML;
}, function () {
if (null !== initialized) {
// This collapse has already been initialized.
return;
}
if (containerDom.clientHeight <= maxHeight) {
// Don't initialize collapse unless the content container is too tall.
return;
}
$showMore.on('click', function () {
element.removeClass('show-more-collapsed');
element.addClass('show-more-expanded');
containerDom.style.height = null;
});
$showLess.on('click', function () {
element.removeClass('show-more-expanded');
element.addClass('show-more-collapsed');
containerDom.style.height = maxHeight + 'px';
});
initialized = true;
$showLess.triggerHandler('click');
});
},
};
});
.show-more-container {
overflow: hidden;
}
.show-more-collapse, .show-more-expand {
text-align: center;
display: none;
}
.show-more-expanded > .show-more-collapse {
display: inherit;
}
.show-more-collapsed > .show-more-expand {
display: inherit;
}
<script src="https://code.angularjs.org/1.5.8/angular.js"></script>
<div ng-app="app" ng-controller="TestController">
<div show-more>
All sorts of <strong>stuff</strong> can go in here.
{{ loremIpsum }}
<div>Even more divs</div>.
</div>
<div show-more>
This <strong>won't</strong> truncate.
</div>
</div>
I think there is an easier way.
Just replace {{text}} with {{text | limitTo: 150}}, and then create below simple read more link.
I'd to insert date on a richtexteditor when the user click on a button.
This part is easy, more difficult, how to insert this on cursor position. Cursor position may be on the beginning, middle or end of the text.
Thanks for helping
Simple as that:
protected function richText_keyDownHandler(event:KeyboardEvent):void
{
if (event.keyCode == 66) //or remove if statement
richText.insertText("Really?");
}
<s:RichEditableText id="richText" text="Lorem ipsum dolor sit amet"
keyDown="richText_keyDownHandler(event)"/>
EDIT: for mx RichTextEditor
protected function richText_keyDownHandler(event:KeyboardEvent):void
{
var ind:int = richEdit.selection.beginIndex;
richEdit.text = richEdit.text.substring(0, ind) +
"Your text variable here" +
richEdit.text.substring(ind, richEdit.text.length);
}
and mx rich text editor:
<mx:RichTextEditor id="richEdit" text="Lorem ipsum dolor sit amet"
keyDown="richText_keyDownHandler(event)"/>
Maybe there is more effective method, but this is the only I could think of.