Hi I am new at angular js,
my question is how to add an icon to a tab in angular js?
That's what I have so far:
<tabset panel-tabs="true" panel-class="{{demoTabbedPanelClass}}" heading="{{demoTabbedPanelHeading}}">
<tab heading="Tab 1 some text ">sapiente doloribus deserunt et nam obcaecati recusandae possimus aperiam similique.</p>
</tab>
<tab heading="Tab 2 ded">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur ipsam consectetur sint. Nobis facere illo iste quaerat sapiente doloribus deserunt et nam obcaecati recusandae possimus aperiam similique.</p>
</tab>
</tabset>
I'm adding <tab heading="Tab 2 ded <span class="icon-print">print</span>">
but it shows everything exactly as written inside the heading instead of rendering the span as I would exspect..
Please help me.
I assume you are using angular-ui bootstrap. Use tab-headingdirective and put your icon there.
<tabset panel-tabs="true" panel-class="{{demoTabbedPanelClass}}" heading="{{demoTabbedPanelHeading}}">
<tab heading="Tab 1 some text ">sapiente doloribus deserunt et nam obcaecati recusandae possimus aperiam similique.</p>
</tab>
<tab>
<tab-heading>
<i class="icon-print"></i> Tab 2 ded
</tab-heading>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur ipsam consectetur sint. Nobis facere illo iste quaerat sapiente doloribus deserunt et nam obcaecati recusandae possimus aperiam similique.</p>
</tab>
</tabset>
I fixed my issue using this:
<tabset>
<tab heading="Static title">Static content</tab>
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
{{tab.content}}
</tab>
<tab select="alertMe()">
<tab-heading>
<i class="glyphicon glyphicon-bell"></i> Alert!
</tab-heading>
I've got an HTML heading, and a select callback. Pretty cool!
</tab>
</tabset>
more about this go for this link
For some reason, I got the following error using tab-heading as suggested above:
'tab-heading' is not a known element
Although the tab works fine, and the tab directive is present in my local lib. The documentation suggests the following sample:
<tab (select)="alertMe()">
<template tabHeading>
<i class="glyphicon glyphicon-bell"></i> Alert!
</template>
I've got an HTML heading, and a select callback. Pretty cool!
</tab>
That worked for me. Maybe due to a different version? Or some dependency or declaration missing. Feel free to correct me or enhance this response.
Related
how to make the buttons increase separately?, I have tried similar solutions but they increase the number in the like and dislike together at the same time,
and I have this message in the console:
vue#next:1250 [Vue warn]: Property "counter" was accessed during render but is not defined on instance.
at
<div class="container">
<div class="comment--like--dislike--app">
<div
v-for="(comment, index) in comments" :key="index"
class="card mb-10 comment--item"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint
deserunt, tempore accusamus iusto nobis dolore ratione itaque
perferendis delectus? Nostrum corporis, quod voluptates quis
consequuntur eveniet beatae dolor aperiam ad.
</p>
<div class="action--button--container text-right mt-10">
<button v-on:click="increment(index)" v-bind:id="comments.id" class="btn-sm btn-success">
Like ({{comments.counter}})
</button>
<button v-on:click="increment(index)" v-bind:id="comments.id" class="btn-sm btn-danger">
Dislike ({{comments.counter}})
</button>
</div>
</div>
this is the Vue code:
const app = Vue.createApp({
data() {
return {
comments: [{
id: 1,
counter:0
},
{
id: 2,
counter:0
},
],
};
},
methods: {
increment: function(index) {
this.comments[index].counter++;
},
},
}).mount(".container");
That's because you're using comments.counter instead of comment.counter (the comment at the current index in the array comments).
Change your markup to look like this:
<div class="container">
<div class="comment--like--dislike--app">
<div v-for="(comment, index) in comments" :key="index" class="card mb-10 comment--item">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint
deserunt, tempore accusamus iusto nobis dolore ratione itaque
perferendis delectus? Nostrum corporis, quod voluptates quis
consequuntur eveniet beatae dolor aperiam ad.
</p>
<div class="action--button--container text-right mt-10">
<button v-on:click="increment(index)" v-bind:id="comment.id" class="btn-sm btn-success">
Like ({{comment.counter}})
</button>
<button v-on:click="increment(index)" v-bind:id="comment.id" class="btn-sm btn-danger">
Dislike ({{comment.counter}})
</button>
</div>
</div>
</div>
</div>
Additionally, as ashwin bande pointed out in the comments, you have a logic issue as well. You are using increment(index) for both your like and dislike buttons.
I believe what you're trying to accomplish is this:
const app = Vue.createApp({
data() {
return {
comments: [{
id: 1,
counter: {
likes: 0,
dislikes: 0
}
},
{
id: 2,
counter: {
likes: 0,
dislikes: 0
}
},
],
};
},
methods: {
increment(index) {
this.comments[index].counter.likes++;
},
decrement(index) {
this.comments[index].counter.dislikes++;
},
},
}).mount(".container");
<script src="https://unpkg.com/vue#next"></script>
<div class="container">
<div class="comment--like--dislike--app">
<div
v-for="(comment, index) in comments"
:key="index"
class="card mb-10 comment--item"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint
deserunt, tempore accusamus iusto nobis dolore ratione itaque
perferendis delectus? Nostrum corporis, quod voluptates quis
consequuntur eveniet beatae dolor aperiam ad.
</p>
<div class="action--button--container text-right mt-10">
<button
#click="increment(index)"
:id="comment.id"
class="btn-sm btn-success"
>
Like ({{comment.counter.likes}})
</button>
<button
#click="decrement(index)"
:id="comment.id"
class="btn-sm btn-danger"
>
Dislike ({{comment.counter.dislikes}})
</button>
</div>
</div>
</div>
</div>
I have a main section. Under the main section I have 2 columns, one with flipbox and other with tabs. I want to trigger hover on flip box when I clicked tab2. I don't have any clue about the JS but tried few of the fiddle's I found, the closet one to what I want is http://jsfiddle.net/EZ33Y/1/ but I was not able to get it working properly.
What I am trying to achieve is to display image related to tab for e.g Tab1 displays img1 and tab2 displays img2 or trigger hover when tab2 is selected so flip image displays tab2 img2
TIA
$(function(){
$('.tabs label').click(function(){
$('.images img').hide();
$('#tab'+($(this).parent('li').index()+1)+'-img').show();
});
});
/* HTML */
<div class="elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-fd8fa18" data-id="fd8fa18" data-element_type="column" id="tab1">
<div class="elementor-column-wrap elementor-element-populated">
<div class="elementor-widget-wrap">
<div class="elementor-element elementor-element-d5d5298 elementor-widget elementor-widget-eael-adv-tabs" data-id="d5d5298" data-element_type="widget" data-widget_type="eael-adv-tabs.default">
<div class="elementor-widget-container">
<div id="eael-advance-tabs-d5d5298" class="eael-advance-tabs eael-tabs-horizontal" data-tabid="d5d5298">
<div class="eael-tabs-nav">
<ul class="eael-tab-top-icon">
<li class="active">
<i class="fas fa-home"></i> <span class="eael-tab-title">Tab Title 1 </span>
</li>
<li class="inactive">
<i class="fas fa-home"></i> <span class="eael-tab-title">Tab Title 2</span>
</li>
</ul>
</div>
<div class="eael-tabs-content">
<div class="clearfix active">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, neque qui velit. Magni dolorum quidem ipsam eligendi, totam, facilis laudantium cum accusamus ullam voluptatibus commodi numquam, error, est. Ea, consequatur. </div>
<div class="clearfix inactive">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, neque qui velit. Magni dolorum quidem ipsam eligendi, totam, facilis laudantium cum accusamus ullam voluptatibus commodi numquam, error, est. Ea, consequatur. </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have a section on my website, with Q/A blocks. If we click on question title (h3), it must appear answer hidden under the question.
So on the right side of question title, we have arrow down, and arrow up. As you might understand, it must be appeared arrow down when question is "closed", and arrow up when question is "open".
$("img.up").hide();
$(".question h3").click(function(){
var b = $(this);
var a = b.parent(".question").children(".answer");
a.slideToggle();
if(a.css('display') == 'block'){
b.children("img.down").hide();
b.children("img.up").show()
} else {
b.children("img.up").hide();
b.children("img.down").show()
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question">
<h3>
А я могу ездить на Mercedes S-Class без прав?
<img src="img/icons/down.png" alt="" class="down">
<img src="img/icons/up.png" alt="" class="up">
</h3>
<div class="answer">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit aspernatur, consectetur amet mollitia quasi sint provident, totam ad facere quia cumque magnam quisquam culpa praesentium aperiam qui voluptatem maxime corporis.
</div>
</div>
Code works on first click, and ignores all next clicks. Else is not working. I know that it is easy but... Sometimes you can't do such a simple things
Try storing the state of .answer elements css display attribute, before calling the .slideToggle() method and use this stored state to hide/display your arrow images:
$("img.up").hide();
$(".question h3").click(function(){
var b = $(this);
var a = b.parent(".question").children(".answer");
// Store isVisible state for answer element before ..
var isVisible = a.css('display') == 'block';
// ..you call slideToggle()
a.slideToggle();
if(isVisible){
b.children("img.down").hide();
b.children("img.up").show()
} else {
b.children("img.up").hide();
b.children("img.down").show()
};
});
img {
width:1rem;
height:1rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="question">
<h3>
А я могу ездить на Mercedes S-Class без прав?
<img src="https://openclipart.org/image/2400px/svg_to_png/154963/1313159889.png" alt="" class="down">
<img src="https://openclipart.org/image/2400px/svg_to_png/154969/1313159942.png" alt="" class="up">
</h3>
<div class="answer">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit aspernatur, consectetur amet mollitia quasi sint provident, totam ad facere quia cumque magnam quisquam culpa praesentium aperiam qui voluptatem maxime corporis.
</div>
</div>
The reason for storing this is that slideToggle() will immediately sets the display of the answer to block, regardless of the animation (either to close, or open). For this reason, you need to determine if the answer is visible before animating the answer div (via the call to slideToggle()), so that you can use that state to control which up/down arrow is shown/hidden.
Here's an updated working jsFiddle for you to see :)
Here is the solution to your problem.
I have added
$('h3 img').toggle();
which will toggle the image accordingly.
Below is the working code.
$("img.down").hide();
$(".question h3").click(function(){
var b = $(this);
var a = b.parent(".question").children(".answer");
a.slideToggle();
$('h3 img').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question">
<h3>
А я могу ездить на Mercedes S-Class без прав?
<img src="img/icons/down.png" alt="down" class="down">
<img src="img/icons/up.png" alt="up" class="up">
</h3>
<div class="answer">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit aspernatur, consectetur amet mollitia quasi sint provident, totam ad facere quia cumque magnam quisquam culpa praesentium aperiam qui voluptatem maxime corporis.
</div>
</div>
I am using sliderPro Slider to make a slider, exactly like in this examples page, so the HTML code looks like below:
<div id="example2" class="slider-pro">
<div class="sp-slides">
<div class="sp-slide">
<a href="http://bqworks.com/slider-pro/images/image1_large.jpg">
<img class="sp-image" src="../src/css/images/blank.gif" data-src="http://bqworks.com/slider-pro/images/image1_medium.jpg" data-retina="http://bqworks.com/slider-pro/images/image1_large.jpg" />
</a>
<p class="sp-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="sp-slide">
<a href="http://bqworks.com/slider-pro/images/image2_large.jpg">
<img class="sp-image" src="../src/css/images/blank.gif" data-src="http://bqworks.com/slider-pro/images/image2_medium.jpg" data-retina="http://bqworks.com/slider-pro/images/image2_large.jpg" />
</a>
<p class="sp-caption">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="sp-slide">
<a href="http://bqworks.com/slider-pro/images/image3_large.jpg">
<img class="sp-image" src="../src/css/images/blank.gif" data-src="http://bqworks.com/slider-pro/images/image3_medium.jpg" data-retina="http://bqworks.com/slider-pro/images/image3_large.jpg" />
</a>
<p class="sp-caption">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
</div>
<div class="sp-slide">
<a href="http://bqworks.com/slider-pro/images/image4_large.jpg">
<img class="sp-image" src="../src/css/images/blank.gif" data-src="http://bqworks.com/slider-pro/images/image4_medium.jpg" data-retina="http://bqworks.com/slider-pro/images/image4_large.jpg" />
</a>
<p class="sp-caption">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div class="sp-slide">
<a href="http://bqworks.com/slider-pro/images/image5_large.jpg">
<img class="sp-image" src="../src/css/images/blank.gif" data-src="http://bqworks.com/slider-pro/images/image5_medium.jpg" data-retina="http://bqworks.com/slider-pro/images/image5_large.jpg" />
</a>
<p class="sp-caption">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="sp-slide">
<a href="http://bqworks.com/slider-pro/images/image6_large.jpg">
<img class="sp-image" src="../src/css/images/blank.gif" data-src="http://bqworks.com/slider-pro/images/image6_medium.jpg" data-retina="http://bqworks.com/slider-pro/images/image6_large.jpg" />
</a>
<p class="sp-caption">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div class="sp-slide">
<a href="http://bqworks.com/slider-pro/images/image7_large.jpg">
<img class="sp-image" src="../src/css/images/blank.gif" data-src="http://bqworks.com/slider-pro/images/image7_medium.jpg" data-retina="http://bqworks.com/slider-pro/images/image7_large.jpg" />
</a>
<p class="sp-caption">Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div class="sp-slide">
<a href="http://bqworks.com/slider-pro/images/image8_large.jpg">
<img class="sp-image" src="../src/css/images/blank.gif" data-src="http://bqworks.com/slider-pro/images/image8_medium.jpg" data-retina="http://bqworks.com/slider-pro/images/image8_large.jpg" />
</a>
<p class="sp-caption">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni.</p>
</div>
<div class="sp-slide">
<a href="http://bqworks.com/slider-pro/images/image9_large.jpg">
<img class="sp-image" src="../src/css/images/blank.gif" data-src="http://bqworks.com/slider-pro/images/image9_medium.jpg" data-retina="http://bqworks.com/slider-pro/images/image9_large.jpg" />
</a>
<p class="sp-caption">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</p>
</div>
<div class="sp-slide">
<a href="http://bqworks.com/slider-pro/images/image10_large.jpg">
<img class="sp-image" src="../src/css/images/blank.gif" data-src="http://bqworks.com/slider-pro/images/image10_medium.jpg" data-retina="http://bqworks.com/slider-pro/images/image10_large.jpg" />
</a>
<p class="sp-caption">Sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
</div>
</div>
</div>
And the jQuery init code is like below:
$( document ).ready(function( $ ) {
$( '#example2' ).sliderPro({
width: '20%',
height: 500,
aspectRatio: 1.5,
visibleSize: '100%',
forceSize: 'fullWidth'
});
Now I was given this link and was told that the images from that page should display in the slide instead of the images I am using right now. That's an Instagram account, so how do I integrate Instagram into my slider?
You should use the Instagram API to request media data for that user account.
You will get a response in JSON which you can easily parse to extract the image urls for your slider.
If you perform a GET to the endpoint below with a valid USER-ID and ACCESS-TOKEN it will return the user's most recent media in JSON. More here
https://api.instagram.com/v1/users/USER-ID/media/recent/?access_token=ACCESS-TOKEN
Another way is to use the embed endpoint.
If you perform a GET on a url like below it will return media data about that USER-ID account in JSON. More here Embedding For Developers
https://www.instagram.com/USER-ID/media/
Other options include using a javascript or jquery plugin that handles most of this stuff for you but I'm sure you would have googled it if you needed that.
I am appending a html in to a div . But this is not working. please help me
<li>
<a data-cke-saved-href="" href="" class="active" data-bookmark="1">
Lorem ipsum dolor
</a>
<ul class="tab">
<li>
<p class="normal_p" style="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officia
architecto soluta maiores eos accusantium quos atque nihil? Facere, minus
eos cumque quasi dolor dolorum magnam quod non laborum placeat?
</p>
</li>
</ul>
</li>
<li>
<a data-cke-saved-href="" href="" class="active" data-bookmark="1">
Lorem ipsum dolor
</a>
<ul class="tab">
<li>
<p class="normal_p" style="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officia
architecto soluta maiores eos accusantium quos atque nihil? Facere, minus
eos cumque quasi dolor dolorum magnam quod non laborum placeat?
</p>
</li>
</ul>
</li>
i want append some html content in to a div. attId will generate dynamically. That generate successfully. i only know attId. other elements are same so i can only use attr.
var attId = 1;
var anchor = document.querySelector('[data-bookmark="'+ attId +'"]');
$(anchor).children("ul li").html($(this).html());
try this, because you're trying to get the children of the link and it does not have.
var anchor = $('.normal_p').closest("li");
anchor .html($(this).html());
or
var anchor = $('.tab').children();
anchor .html($(this).html());
Appending a whole html to a div sound somehow and moreso why querySelector() in jQuery, the question is not clear, perhaps you post chunk of code that well describe what you mean
From what you posted
//assuming there is a var attId as 1
var attId = 1
var anchor =$('[data-bookmark="'+ attId +'"]');
$(anchor).children("ul li").html($(this).html());
Although what you are trying to insert into the list items is not clear, but I hope this helps