i want to remove the bottom border of a button after clicking it. button is not a submit button. When i click it for the second time, the border should be 1px; Can some one help me with implementing this
If you have 1 button it should be as simple as this:
Angular for Single Button
var app = angular.module("myApp", []);
app.controller("myCtrl", ["$scope", function ($scope) {
$scope.hideBorder = false;
$scope.toggleBorder = function () {
$scope.hideBorder = !$scope.hideBorder;
}
}]);
HTML for Single Button
<button class="{{hideBorder ? 'button--no-bottom-border': ''}}" ng-click="toggleBorder()">Click Me</button>
CSS
button {
border: 1px solid black;
outline: none;
}
.button--no-bottom-border {
border-bottom: 0px;
}
If you have multiple buttons, your Angular & HTML will change slightly:
Angular for Multiple Buttons
$scope.toggleBorder = function (button) {
button.hideBorder = !button.hideBorder;
}
$scope.buttons = [
{
text: "Click Me",
hideBorder: false
},
{
text: "Click Me 2",
hideBorder: false
},
{
text: "Click Me 3",
hideBorder: false
},
];
HTML for Multiple Buttons
<button class="{{button.hideBorder ? 'button--no-bottom-border': ''}}" ng-click="toggleBorder(button)" ng-repeat="button in buttons">Click Me</button>
Related
I found some web pages have added
ondragstart="return false;" to an <img> tag like this:
<img ondragstart="return false;" src="...." .....
May I know what's the benefit from it?
It just makes the image undraggable, preventing this:
Which could also be achieved using a background-image with css instead <img> tag.
ondragstart is used in conjunction with draggable="true" to trigger a function on a draggable element:
<div draggable="true" ondragstart="function()">
This can be seen here:
var dragged;
/* events fired on the draggable target */
document.addEventListener("drag", function(event) {
}, false);
document.addEventListener("dragstart", function(event) {
// store a ref. on the dragged elem
dragged = event.target;
// make it half transparent
event.target.style.opacity = .5;
}, false);
document.addEventListener("dragend", function(event) {
// reset the transparency
event.target.style.opacity = "";
}, false);
/* events fired on the drop targets */
document.addEventListener("dragover", function(event) {
// prevent default to allow drop
event.preventDefault();
}, false);
document.addEventListener("dragenter", function(event) {
// highlight potential drop target when the draggable element enters it
if (event.target.className == "dropzone") {
event.target.style.background = "purple";
}
}, false);
document.addEventListener("dragleave", function(event) {
// reset background of potential drop target when the draggable element leaves it
if (event.target.className == "dropzone") {
event.target.style.background = "";
}
}, false);
document.addEventListener("drop", function(event) {
// prevent default action (open as link for some elements)
event.preventDefault();
// move dragged elem to the selected drop target
if (event.target.className == "dropzone") {
event.target.style.background = "";
dragged.parentNode.removeChild(dragged);
event.target.appendChild(dragged);
}
}, false);
#draggable {
width: 200px;
height: 20px;
text-align: center;
background: white;
}
.dropzone {
width: 200px;
height: 20px;
background: blueviolet;
margin-bottom: 10px;
padding: 10px;
}
<div class="dropzone">
<div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
This div is draggable
</div>
</div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>
The return false in the example is shorthand for stating that the function does nothing, and is essentially completely extraneous.
Also note that while ondragstart can be processed by mobile devices, the dragstart event is not compatible with mobile, so to ensure dragging for mobile devices you will want to use touchstart instead.
Iv'e created a dropdown that requires you to click on text to show more text underneath. The code is:
.dropbtn {
cursor: pointer;
font-weight: bold;
}
.dropdown03 {
position: relative;
display: inline-block;
text-align: left;
width: 100%;
}
.dropdown-content03 {
display: none;
position: relative;
width: 100%;
overflow: auto;
z-index: 1;
}
.show {display: block;}
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content03");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
<div class="dropdown03">
<button onclick="myFunction()" class="dropbtn">Dropdown Button Text</button>
<div id="myDropdown" class="dropdown-content03">
Dropdown Button Text
</div>
</div>
This code has works perfectly in my website and when you click on "Dropdown Button Text" then "Dropdown Button Text" appeasers below it. Here is my trouble; when i add another dropdown using the same code, the first dropdown on the website will show but the one that the button is above doesn't. In other words when i add more then one dropdown all the new ones don't work they only end up showing the first dropdowns content. (hopefully this makes sense)
How can i have more than one dropdown that will load is own content when clicked? Do i have to create a whole new tag for each one?
Changing the names of id's and classes would help. just try by doing so. Also check for the console by clicking the inspect button. Take a look at your HTML from inspect tab. Make sure there are no errors in the console.
Make sure while reloading the browser, your hard refresh by Ctrl+F5.
I have implemented autocomplete searchbar for my website.in that onclick of dropdown button input text field will appear,in the input text field i can enter my location.after entering my location my drop down should reflect the data which i have entered in input text field..but instead of that my drop down button is show again select location.
Set Location
<input type="search" class="form-control" id='locName' placeholder="Search Location" style=margin-top:-60px>
</form>
</div>
</div>
<!--JavaScript Part-->
<!--AutoComplete Search bar-->
$(function() {
$("#locName").autocomplete({
source: [
"Adugodi",
"Arekere",
"Attiguppe",
"Yelahanka"
],
minLength: 1,
function(event) {
var value = event.getAttribute('value')
var locName = document.getElementById("locName").value;
if (value.includes('&')) {
value = value.replace("&", "%26");
}
if (locName == "") {
alert("Please Select your Location");
} else {
window.location = "http://www.example.com";
}
return false;
}
});
});
a possible solution in this case would be removing the outline and border from the :active and :focus of your div as follows:
.btn:focus, .btn:active {
border: 0;
transition: none;
border-style: none;
outline: none;
}
I am reading about Behaviors in Polymer.
I copy/pasted the example for the highlight-behavior.html:
<script>
HighlightBehavior = {
properties: {
isHighlighted: {
type: Boolean,
value: false,
notify: true,
observer: '_highlightChanged'
}
},
listeners: {
click: '_toggleHighlight'
},
created: function() {
console.log('Highlighting for ', this, 'enabled!');
},
_toggleHighlight: function() {
this.isHighlighted = !this.isHighlighted;
},
_highlightChanged: function(value) {
this.toggleClass('highlighted', value);
}
};
Then, in my element i have the following (just the important parts):
<link rel="import" href="highlight-behavior.html">
<dom-module id="highlighting-test">
<template>
<style>
:host {
display: block;
background-color: red;
}
:host.highlighted {
background-color: green;
}
.highlighted {
background-color: green;
}
</style>
<h1>Click anywhere here to toggle highlighting!</h1>
</template>
<script>
Polymer({
is: 'highlighting-test',
behaviors: [HighlightBehavior]
});
</script>
</dom-module>
Now the problem is that the toggling of the highlighted class works when clicking inside the host element but it is not highlighting just the h1 element. It is adding the highlighted class to the host element.
This is how it is rendered in the browser:
<highlighting-test class="highlighted">
<h1 class="style-scope highlighting-test">Click anywhere here to toggle highlighting!</h1>
</highlighting-test>
When clicking I indeed see that it toggles the highlighted class on the host element highlighting-test and the background changes.
How can I make sure that the highlighting behavior is applied to just the h1 tag?
Use this.toggleClass(className, bool, this.$.id_of_element)
Change:
_highlightChanged: function(value) {
this.toggleClass('highlighted', value);
}
to:
_highlightChanged: function(value) {
this.$.hId.toggleClass('highlighted', value);
}
And in HTML add an ID to H1:
<h1 id="hId">Click anywhere here to toggle highlighting!</h1>
I have a div and I want to show it on bottom of click of another div just like the popover but with position relative to my first set of divs..
I am using angular to loop through the divs.I am trying the following code but doesnt seem to be working.. Is there any way using jquery or css tweaking i can achieve this?
*EDIT - The output needed is like in a row i"ll display say 3 options, in next row another 3. If i click on any option . The hidden div should appear just below the option I clicked and in between first and second row.
My code
My Controller code: -
app.controller('MyCtrl', ['$scope',
function($scope) {
$scope.options = [{
name: 'First Option',
value: '1st answer'
}, {
name: 'Second Option',
value: '2nd answer'
}, {
name: 'Third Option',
value: '3rd answer'
}, {
name: 'Fourth option',
value: '4th answer'
}];
}
]);
.btn-option {
width: 30%;
float: left;
padding-right: 20px;
padding-left: 20px;
}
.change-answer {
width: 30%;
min-height: 100px;
background-color=#f6f6f6;
border 1px solid #DDD;
position: relative;
clear: both;
}
I have a div and I want to show it on bottom of click of another div. I am using angular to loop through the divs. My HTML code
<div class="clearfix">
<div ng-repeat="option in options">
<div class="btn-options">
{{option.name}}
</div>
<button class="change-answer">Show Me just below the option on clicking any of the option.{{option.value}}
</button>
</div>
</div>