Hi i need to show only some text (3 lines)
and the other text should be loaded on show more button
here the text is coming from json
JS:
$scope.fnInit = function() {
getInfo.getSubCategory($stateParams.id).then(function(response){
$scope.subCategory=response;
})
};
html:
<div ng-repeat="data in subCategory" class="sub_category">
<div class="header"><b>{{data.heading}}</b></div>
<div class="row content">
<div class="col-xs-4"><img ng-src="{{data.image}}" class="img-responsive center-block" ></div>
<div class="description col-xs-7" ng-bind-html="data.description"></div>
</div>
</div>
in the description section i need to limited text and then ... when i click on the ... i need to get the full data .
Any help would be appreciated
You can start by limiting the number of characters you want to show like this:
$scope.limit = 100;
$scope.data = [{
'description': 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. '
}];
$scope.showMore = function(desc) {
console.log(desc);
$scope.limit = desc.length
}
You can set limit to cover the first three lines of your text based on your <div>'s size.
I added a <span> with 3 dots (...) to show more text like so:
<span ng-click='showMore(d.description)'>...</span>
and the logic in your controller to display more text:
$scope.showMore = function(desc) {
$scope.limit = desc.length;
}
See plunkr for more details.
There are also some custom filter you could use like this one.
Also SO this answer shows you how to implement a custom filter without breaking words.
Related
I want to know how can i get data of p element which is a children of div element. remember there are many div elements with same classes. it would be better to use events. As i am beginner I am unable to do it.
jQuery(document).ready(function($) {
$(".wp-block-wish-block-01-wish-block-01-editable").find('.social-link').on('click', function(event) {
var elementText = $(event.target).text();
console.log(elementText);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wp-block-wish-block-01-wish-block-01-editable share-block-content">
<p class="ab-testimonial-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque porro incidunt error nostrum, labore saepe pariatur similique officia voluptatem! Repellendus iure commodi aliquid nemo nisi rerum quasi sunt, ducimus libero!. </p>
<div class="block-share-links">
<strong>Share:</strong>
<div class="share-links">
<a class="social-link" href="#"><img src="http://localhost/cs/wp-content/plugins/wish-block/assets/021-facebook.png"></a>
<img src="http://localhost/cs/wp-content/plugins/wish-block/assets/043-twitter.png">
<img src="http://localhost/cs/wp-content/plugins/wish-block/assets/049-stumbleupon.png">
</div>
</div>
</div>
There are many blocks like this. What i want to do is that when user clicks the .social-link the text of first element p should be logged in console using jQuery or JavaScript.
This should solve your problem. It searches for the closest parent of the clicked element which has the specified class. Then it looks for the first child element (because of the >) with the specified class and extracts its text.
$('.social-link').click(function() {
var value = $(this).closest('.share-block-content').find('> .ab-testimonial-title').text();
console.log(value);
});
I suppose all of these blocks share the class share-block-content. Then it would be possible to get the text of the <p> element like this:
$(".social-link").on("click", function() {
let text = $(this).closest(".share-block-content").find("p").text();
console.log(text);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wp-block-wish-block-01-wish-block-01-editable share-block-content">
<p class="ab-testimonial-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque porro incidunt error nostrum, labore saepe pariatur similique officia voluptatem! Repellendus iure commodi aliquid nemo nisi rerum quasi sunt, ducimus libero!. </p>
<div class="block-share-links">
<strong>Share:</strong>
<div class="share-links">
<a class="social-link" href="#"><img src="http://localhost/cs/wp-content/plugins/wish-block/assets/021-facebook.png"></a>
<img src="http://localhost/cs/wp-content/plugins/wish-block/assets/043-twitter.png">
<img src="http://localhost/cs/wp-content/plugins/wish-block/assets/049-stumbleupon.png">
</div>
</div>
</div>
What i want to do is that when user clicks the .social-link the text of first element p should be logged in console
You can do this easily by using the .closest() method to find the closest parent element with class as share-block-content and then find the first p inside that div like:
jQuery(document).ready(function($) {
$(".wp-block-wish-block-01-wish-block-01-editable").find('.social-link').on('click', function(event) {
var elementText = $(this).closest('.share-block-content').find('p:first').text();
console.log(elementText);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wp-block-wish-block-01-wish-block-01-editable share-block-content">
<p class="ab-testimonial-title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque porro incidunt error nostrum, labore saepe pariatur similique officia voluptatem! Repellendus iure commodi aliquid nemo nisi rerum quasi sunt, ducimus libero!. </p>
<div class="block-share-links">
<strong>Share:</strong>
<div class="share-links">
<a class="social-link" href="#"><img src="http://localhost/cs/wp-content/plugins/wish-block/assets/021-facebook.png"></a>
<img src="http://localhost/cs/wp-content/plugins/wish-block/assets/043-twitter.png">
<img src="http://localhost/cs/wp-content/plugins/wish-block/assets/049-stumbleupon.png">
</div>
</div>
</div>
I have a simple custom component in React that accepts a string as a property and displays text. I am trying to load my text content from a const in an enums js file that is located in my src folder. I import the file in my parent component and in the index.js but when I try to use it I get 'titles' is not defined, how can I use the constant from the file properly? Here is the relevant code:
import React from 'react';
import enums from '../../enums.js'
import CustomHeading from '../CustomHeading/CustomHeading.jsx'
class SecondColumn extends React.Component {
render() {
return <div className="second-column">
<div className="second-column__about-me">
<CustomHeading text={titles.ABOUT_ME} className="second-column__centered-heading" />
<img className="second-column__first_part__test-img-col" src={require("../../assets/images/fake-image.png")} alt="fake img for now" />
<div className="second-column_first_part_text-parent">
<p className="second-column_first_part_text-parent__text-body">Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Molestiae molestias tempora ratione dolorum, tenetur laborum blanditiis id Molestiae molestias tempora ratione dolorum, tenetur laborum blanditiis id
Molestiae molestias tempora ratione dolorum, tenetur laborum blanditiis id Molestiae molestias tempora ratione dolorum, tenetur laborum blanditiis id
Molestiae molestias tempora ratione dolorum, tenetur laborum blanditiis id Molestiae molestias tempora ratione dolorum, tenetur laborum blanditiis id
</p>
</div>
</div>
<div className="second-column__first_part">
<CustomHeading text={'My astrological readings'} className="second-column__centered-heading" />
</div>
</div>
}
};
export default SecondColumn;
And here is the enums file:
const titles = {
ABOUT_ME: 'About me'
}
export default titles
I also tried calling it by enums.titles.ABOUT_ME but that didn't work either
Instead of calling it by
enums.titles.ABOUT_ME
Call it using
enums.ABOUT_ME
This should work.
Your enums.js file needs a default export.
const titles = {
ABOUT_ME: 'About me'
};
export default titles;
In addition you are accessing the enums object improperly. Change titles.ABOUT_ME to enums.ABOUT_ME in your component. Or change the name of your imported const to titles.
Importing as titles:
// Replace this line
import enums from '../../enums.js';
// With this line
import titles from '../../enums.js';
Plunker, because the snippet editor isn't liking me today.
Quick Info
I'm working on using .component() in place of .directive() when using Angular 1.6 to get myself more into the type of design pattern used by Angular 2. The issue is that I cannot use any references to either $tabs or $tab (the controllers for those respective components). Nothing is output by using either {{$tab.tabsCtrl.nothing}} or {{$tabs.nothing}}.
Please Note:this is not my actual scenario, but it does share a common problem with what I am actually doing.
I've searched around and I get a lot of results for the Angular 2 components, but if I am being honest reading through it is basically Greek.
Code Reference(not working in snippet editor, only for reference)
// Code goes here
angular.module('main.app', [])
.component('tabs', {
controller: function($http) {
this.tabs = [];
this.nothing = 'nada';
this.addTab = function(tab) {
this.tabs.push(tab);
}; //end addTab
this.selectTab = function(tab) {
this.tabs.map(function(item) {
item.selected = false;
});
var selected = this.tabs.filter(function(item) {
return item === tab;
});
if (selected.length) selected[0].selected = true;
}; //End selectTab
},
template: '<ul class="nav nav-tabs nav-justify justify-content-center"><li class="nav-item" ng-repeat="tab in $tabs.tabs" >{{tab.tabTitle}}</li></ul><div class="tabs-content" ng-transclude></div>',
transclude: true,
controllerAs: '$tabs'
})
.component('tab', {
require: {
'tabsCtrl': '^tabs'
},
bindings: {
'tabTitle': '#',
'selected': '<'
},
controller: function() {
this.$onInit = function() {
this.selected = this.selected || false;
this.tabsCtrl.addTab(this);
}; //end $onInit
},
transclude: true,
controllerAs: '$tab',
template: '<div class="tab" ng-show="$tab.selected"><div ng-transclude></div></div>'
})
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
<tabs>
<tab tab-title="First Tab" selected="true">
<div class="jumbotron">
<h3>Lorem ipsum.</h3>
<p class="lead">Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, in!</p>
</div>
some other text
</tab>
<tab tab-title="Second Tab">
<strong>With a header!</strong>
<div class="row">
<div class="col-6 bg-primary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, quam, quod, optio qui cum rerum vel eos rem aspernatur quia maxime incidunt numquam ipsum eum neque dicta distinctio. Minus, itaque.</div>
<div class="col-6 bg-danger">Reprehenderit, numquam, rerum, reiciendis neque adipisci provident ea quo illo praesentium inventore fuga quisquam ducimus? Ipsum, autem, illo ullam corporis incidunt ad labore accusantium tempora officia quas quia eaque facere.</div>
</div>
</tab>
<tab tab-title="Potato Tab">
<h3>Big books {{$tabs.nothing||'nah'}}</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste quos assumenda vero fugiat officia pariatur consequatur deserunt quisquam veniam nemo?</p>
<p>Fugiat, error, impedit, accusantium consequuntur beatae facere esse voluptatum enim animi porro commodi modi cupiditate aliquam iure ipsa. A, officiis!</p>
<p>Architecto velit quod explicabo laborum reprehenderit culpa tempora facilis minima eum. Natus aliquid eaque laboriosam accusamus dolor hic similique ad.</p>
</tab>
</tabs>
Thanks, just in case I forget to say it in the future!
The transcluded scope will be a child scope of the directive's isolate scope.
Since components use isolate scopes, you can't make use of prototypal inheritance by just doing {{$tabs.nothing}}. It would work if $tabs was exposed via $rootScope however, or any other non-isolate scope above tabs in the hierarchy (only ng-app in your example, so only $rootScope).
You can walk the scope chain manually.
Based on your example:
The current scope would be the transcluded child scope of the tab directive
The first $parent would be the isolate tab scope
The second $parent would be the transcluded child scope of the tabs directive
The third $parent would be the isolate tab scope
This gives:
{{$parent.$parent.$parent.$tabs.nothing}}
Demo: http://plnkr.co/edit/jpTGVKWKEQlmGYpaeqtZ?p=preview
In most cases this isn't really a feasible solution. Probably better to expose the functionality that the transcluded content needs via a service.
Hard to give a better solution without knowing the real use case.
I have a little jquery that shows some hidden content when element is hovered. Currently it showing each el that is matched but I'd like the behavior to only effect the element that is being hovered. I think I need to add the keyword this in some way to let the dom know it should only show the element that is being hovered.
<li class="col-md-12">
<div class="col-md-2">
<a class="cbp-vm-image" href="#">
<img src="assets/images/stash/11.png">
</a>
</div>
<div class="col-md-10">
<h3 class="cbp-vm-title">Lorem ipsum dolor sit amet</h3>
<h5>by <b> Carrie_Strohl </b> - 3 weeks ago - 30,000 views</h5>
<div class="cbp-vm-details">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
</div>
</div>
$( ".cbp-vm-image" ).hover(function() {
var n = $(".cbp-vm-view-grid .col-md-10");
n.fadeToggle( 500 );
});
Just a slightly different approach using the html "data" attribute.
FIDDLE
JS
$( ".myhover" ).hover(
function(){
var mytext = $(this).data("text");
$('.putmehere').html( mytext );
},
function(){
$('.putmehere').html('');
}
);
If the element you wish to show is a child of the element that is being hovered, you should be able to use the jquery .find() method to accomplish this:
$( ".cbp-vm-image" ).hover(function() {
$(this).find(".cbp-vm-view-grid .col-md-10").fadeToggle( 500 );
});
You can use the event argument in your function to find the element that is being hovered over.
$( ".cbp-vm-image" ).hover(function(event) {
var $hoveredElement = $(event.target);
$hoveredElement.fadeToggle( 500 );
});
Alternatively, this will give you the same thing:
$( ".cbp-vm-image" ).hover(function() {
var $hoveredElement = $(this);
$hoveredElement.fadeToggle( 500 );
});
I'm trying Jquery and now I have a problem.
I want to remove an element from my webpage. So, when I press the delete button - the big element must disappear. Using the JQ I have written something like this
$(document).ready(function(){
$(".delete").click(function(){
$(this).parents(".block").animate({ opacity: 'hide' }, "slow");
})
});
It have worked fine until I didn't add subdiv, or answer. And how the application must works now? I press the delete button and it must remove current block.
<div class = "block">
<div class = "postbuttons">
<img src = "img/delete-icon.png" class = "delete"></a>
<img src = "img/edit-icon.png" class = "edit"></a>
</div>
<div class = "postinfo">
<span class = "author">Da Monkey wrote:</span> <span class = "date">on <span>13.13.13</span></span>
</div>
<div class = "post">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, voluptate, unde, impedit iste sint assumenda consequatur ipsum nesciunt</p>
<a class = "answerlink" href = "#">Answer</a>
</div>
<div class = "answer">
<div class = "postbuttons">
<img src = "img/delete-icon.png" class = "delete"></a>
<img src = "img/edit-icon.png" class = "edit"></a>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, numquam, culpa, omnis explicabo ut asperiores ipsam porro alias quisquam nisi iste non a maiores! Nulla odio unde dolorum officia vero. </p>
<div class = "answerinfo">
- Macaque on <span>13.13.13</span>
</div>
</div>
If you didn't understand me here the result
Respect to the funcionality:
$(document).ready(function(){
$(".delete").click(function(){
$(this).closest(".block").animate({ opacity: 'hide' }, "slow");
});
});
you should use closest instead of parents because it stop once it has found the first math and parents travels to the root of the dom. Also if you dont need the block anymore you can remove it with the jquery method remove(), after tue animation ended with a callback function.
Also you are missing some semicolons, and tags
$(document).ready(function(){
$(".delete").click(function(){
$(this).parents(".block").animate({ opacity: 'hide' }, "slow");
}) // here needs a semicolon
});
Missing tags
<div class = "block">
<div class = "postbuttons">
<img src = "img/delete-icon.png" class = "delete"></a> <--! missing <a> -->
<img src = "img/edit-icon.png" class = "edit"></a> <--! missing <a> -->
</div>
<div class = "postinfo">
<span class = "author">Da Monkey wrote:</span> <span class = "date">on <span>13.13.13</span></span>
</div>
<div class = "post">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, voluptate, unde, impedit iste sint assumenda consequatur ipsum nesciunt</p>
<a class = "answerlink" href = "#">Answer</a>
</div>
<div class = "answer">
<div class = "postbuttons">
<img src = "img/delete-icon.png" class = "delete"></a> <--! missing <a> -->
<img src = "img/edit-icon.png" class = "edit"></a> <--! missing <a> -->
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, numquam, culpa, omnis explicabo ut asperiores ipsam porro alias quisquam nisi iste non a maiores! Nulla odio unde dolorum officia vero. </p>
<div class = "answerinfo">
- Macaque on <span>13.13.13</span>
</div>
</div>
I hope I was Useful.
Try hiding the container of the container of the delete button, which will work regardless of its class:
$(document).ready(function(){
$(".delete").click(function(){
$(this).parents(".postbuttons").parent().animate({ opacity: 'hide' }, "slow");
})
});