This question already has answers here:
AngularJS - ng-disabled not working for Anchor tag
(14 answers)
Closed 5 years ago.
I try to disable <a> with ng-disabled but not work and I put disabled but it does not work too. My HTML like this
<div class="action-engine">
<a on-hold="engine()" class="btn3d default actived" ng-disabled="button_clicked">
<div class="back-overlay"></div>
<div class="inner-circle">
<div class="inner-icon"></div>
</div>
</a>
</div>
and I include in JS like this $scope.button_clicked = true;. I don't know it still can press. If you have some idea to solve my problem it helpful. Thanks
<div class="action-engine">
<a on-hold="engine()" class="btn3d default actived" ng-disabled="button_clicked">
<div class="back-overlay"></div>
<div class="inner-circle">
<div class="inner-icon"></div>
</div>
</a>
</div>
The a tag in html does not get disabled.
Use below class using
ng-class="{'avoid-clicks' : button_clicked }"
.avoid-clicks {
pointer-events: none;
}
Button should be used for ng-disabled:-
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.button_clicked = true;
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="action-engine">
<button on-hold="engine()" class="btn3d default actived" ng-disabled="button_clicked">
<div class="back-overlay"></div>
<div class="inner-circle">
<div class="inner-icon">Link</div>
</div>
</button>
</div>
</div>
Related
This question already has answers here:
Passing and binding img src from props in Vue.js
(6 answers)
Closed 1 year ago.
<template>
<form class="questionnaire-result" action="#">
<h1 class="h1">Here are your result!</h1>
<div class="grid-container">
<h2 class="sub-club"> Sub-Club</h2>
<h2 class="score"> Score</h2>
<h2 class="join-que"> Want to Join?</h2>
<div class="sub-club-section " v-for="(subclub) in subclubs" :key="subclub.id">
<div class="responsive">
<div class="gallery">
<img class="image" :src="subclub.path">
<div class="desc">{{subclub.name}}</div>
</div>
</div>
<h3 v-if="subclub.score>50" class="score-result" style="color:#0cf12a ">{{subclub.score}}%</h3>
<h3 v-else class="score-result" style="color:red ">{{subclub.score}}%</h3>
<div v-if="subclub.score>50">
<input class="join-btn option-input " type="checkbox" v-bind:value="subclub.name" v-model="selected_subclubs" >
</div>
</div>
{{selected_subclubs}}
<button #click=" goToHomePage()" class="button "><span> JOIN </span></button>
</div>
</form>
</div>
</template>
<script>
export default {
name:"QuestionnaireResult",
data(){
return{
selected_subclubs:[],
subclubs:[
{
id:1,
name:"Yoga",
score:70,
path:"#/assets/sub-clubs-images/Yoga_mini.jpeg",
},
]
}
},
methods:{
goToHomePage(){
this.$router.push("/");
}
}
}
</script>
I apply it like this , I put the path in the data to company src. It worked this way for many people. but I cannot put the image on the page . It works when I pass the path directly to the src as a string.I can't understand how I can't get the path.Can you help me.
I tried to do it like this: Vue.js image v-for bind
You need to import the image from webpack using require to pass it using javascript
See these other posts for more details
How to bind img src to data in Vue
Passing and binding img src from props in Vue.js
I am trying to get multiple tooltips on the same page with different HTML content using tippy.js. This content varies - it might me just image or text formatted with HTML tags or text + image(s). How can I make this work?
I tried to run this code but didn't had much success
<a class="btn" href="#">Text</a>
<div class="myTemplate">
<b>Text</b> <img src="https://i.imgur.com/dLcYjue.png">
</div>
<a class="btn" href="#">Text2</a>
<div class="myTemplate">
<b>Text2</b>
</div>
<script type="text/javascript">
tippy('.btn', {
content: document.querySelector('.myTemplate')
})
const clone = document.querySelector('.myTemplate').cloneNode(true)
</script>
maybe this helps someone getting here again:
also check the documentation:
https://atomiks.github.io/tippyjs/v6/html-content/
document.querySelectorAll('button[data-template]').forEach(btn => {
tippy(btn, {
content(reference) {
const id = reference.getAttribute('data-template');
const template = document.getElementById(id);
return template.innerHTML;
},
allowHTML: true
})
})
<script src="https://unpkg.com/#popperjs/core#2.0.6/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js#6.0.0/dist/tippy-bundle.umd.min.js"></script>
<button data-template="one">One</button>
<button data-template="two">Two</button>
<button data-template="three">Three</button>
<div style="display: none;">
<div id="one">
<strong>Content for `one`</strong>
</div>
<div id="two">
<strong>Content for `two`</strong>
</div>
<div id="three">
<strong>Content for `three`</strong>
</div>
</div>
tippy takes selector as its primary argument, You would need different ids to do this. If there are more than a couple of content tooltips/generated at runtime, I would recommend to use a common convention in setting id and using a for loop for iterating over it.
Considering, there are 2 content tooltips,
<a class="btn1" href="#">Text</a>
<div class="myTemplate1">
<b>Text</b> <img src="https://i.imgur.com/dLcYjue.png">
</div>
<a class="btn2" href="#">Text2</a>
<div class="myTemplate2">
<b>Text2</b>
</div>
<script type="text/javascript">
tippy('.btn1', {
content: document.querySelector('.myTemplate1')
})
tippy('.btn2', {
content: document.querySelector('.myTemplate2')
})
</script>
This question already has answers here:
Select elements by attribute
(17 answers)
Closed 6 years ago.
i have a situation in my page i don't have any clue other than this 2 clue to target
<div itemscope>
some <html>
........
</div>
how can i target div having itemscope i,e <div itemscope>
suppose i have structure like this
<div itemscope>
<a hrfe="http://www.a.com">a.com</a>
</div>
<div itemscope type="tang">
<a hrfe="http://www.b.com">b.com</a>
</div>
<div>
<a hrfe="http://www.c.com">c.com</a>
</div>
<div>
<a hrfe="http://www.d.com">d.com</a>
</div>
PLEASE SUGGEST ME WHAT THIS KIND OF SELECTOR IS CALLED SO THAT I CAN SEARCH IT ON STACKOVERFLOW
var allDivWith_itemscope = $('div[i don"t know what else]');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div itemscope>
<a hrfe="http://www.a.com">a.com</a>
</div>
<div itemscope type="tang">
<a hrfe="http://www.b.com">b.com</a>
</div>
<div>
<a hrfe="http://www.c.com">c.com</a>
</div>
<div>
<a hrfe="http://www.d.com">d.com</a>
</div>
Well there are two things i want to mention:
You have a typo with href attribute.
You should use data-* prefix for custom attributes.
So, on basis of these you can change to this:
<div data-itemscope>
Now in js/jquery/css you can do this:
// css
div[data-itemscope]{
properties:values;
}
// javascript
document.querySelector('div[data-itemscope]')
//jquery
$('div[data-itemscope]')
Why isn't the tag input showing up?
<div ng-controller="DrawingsController">
<tags-input ng-model="tags"></tags-input>
<div class="controls">
<label>Filter:</label>
<button class="filter" data-filter="all">All</button>
<button class="filter" data-filter=".name-{{name}}" ng-repeat="name in names">{{name}}</button>
</div>
<div class="test">
<div id="MixItUpContainer1" class="container">
<div class="mix name-{{drawing.name}}" data-myorder="{{drawing.value}}" ng-repeat="drawing in drawings">Value : {{drawing.name}}</div>
</div>
</div>
The tag input works on other pages but it's not showing up on this one.
JS Fiddle:
http://jsfiddle.net/ce1qzjv1/
Update:
This is my updated fiddle: jsfiddle.net/og19nL11/1
I want them to show up in their own value box like the others but it's not working
In the fiddle you posted, ngTagsInput is not referenced. You should add it as a dependency of your application.
var app = angular.module('app', ['ngTagsInput']);
I have a div setup like so:
<div class="content">
<button class="show-comments" id="content1"></button>
</div>
<div class="comments-wrapper" id="comment1"></div>
<div class="content">
<button class="show-comments" id="content2"></button>
</div>
<div class="comments-wrapper" id="comment2"></div>
I have the following code:
$('.show-comments').click(function(e){
e.preventDefault();
$('.comments-wrapper').slideToggle('slow');
});
As you would assume, the code works but on a class basis. I'd like for it to open up only the .comments-wrapper of its associated id (i.e. open slideToggle comments2 if content 2 button is clicked and so on and so on).
How would I do this?
$('.show-comments').click(function(e){
e.preventDefault();
$(this).closest(".content").next('.comments-wrapper').slideToggle('slow');
});
Note that this is dependent on the .content element being immediately followed by the .comments-wrapper.
If you have access to modify the html itself, I would suggest adding a wrapper element and then doing the following to avoid the reliance on the exact order of elements:
<div class="wrapper">
<div class="content">
<button class="show-comments" id="content1"></button>
</div>
<div class="comments-wrapper" id="comment1"></div>
</div>
<div class="wrapper">
<div class="content">
<button class="show-comments" id="content2"></button>
</div>
<div class="comments-wrapper" id="comment2"></div>
</div>
$(this).closest(".wrapper").find('.comments-wrapper').slideToggle('slow');
This way, if you add an element between the .content and the .comments-wrapper it does not break the code.
You can do this:
$(this).parent("div").next('.comments-wrapper').slideToggle('slow');
This will find the related div of class .comments-wrapper and slide toggle.
And a fiddle: http://jsfiddle.net/xCJQB/
$('.show-comments').click(function (e) {
e.preventDefault();
var num = this.id.match(/\d+$/)[0];
$("#comment" + num).slideToggle('slow');
});
Demo ---> http://jsfiddle.net/7pkyk/1/
Use this context
$(this).closest('.comments').next('.comments-wrapper').slideToggle('slow');
If it is not the immediate element then you might try this as well
$(this).closest('.comments')
.nextAll('.comments-wrapper').first().slideToggle('slow');
you can add a common class to associate a button with a div.
html:
<div class="content">
<button class="show-comments group1" id="content1"></button>
</div>
<div class="comments-wrapper group1" id="comment1">1</div>
<div class="content">
<button class="show-comments group2" id="content2"></button>
</div>
<div class="comments-wrapper group2" id="comment2">2</div>
javascript:
$('.show-comments').click(function(e){
var associate = $(this).attr('class').match(/group\d+/).pop();
var selector = '.comments-wrapper.' + associate;
e.preventDefault();
$(selector).slideToggle('slow');
});
http://jsfiddle.net/uMNfJ/