I am newbie and inherited this code. When I click on the Call button checkPhoneError() does not get called. What is missing here? Thanks
<ion-nav-title>Status: {{name}}
<a href="{{::getPhoneNumber()}}" class="blue" ng-show="::showCallButton">
<div id="callArea"
class="button"
ng-class="::getCallButtonColor()">
Call
</div>
</a>
<div id="buttonOverlay" ng-click="checkPhoneError()"></div>
</ion-nav-title>
This is the Controller Code. So when the call button is clicked I hope to break to this funciton:
$scope.checkPhoneError = function () {
if (phoneNumberError) {
displayError();
$fileLogger.log("error", "There is no phone number for " + analysis.name);
}
else if ($scope.alertLevel != '') {
PaymentService.call(analysis.name, $scope.alertLevel);
}
};
Sorry I should have added this too, I did not realize what all was needed for people to get full context. Here is my size of the button from the CSS file. Yes I can click and the control goes to the phone and I can make a call. What I want is to know that the phone call happened. BTW this a cordova/ionic app running on Android phone:
#buttonOverlay {
position: absolute;
height: 100%;
width: 60px;
right: 0;
top: 0;
padding-top: 3px;
opacity: 0;
}
I Googled and got some hint and tried this. Now I can break into my function but the call button does not show :(. However when I hover there the cursor becomes live(becomes a hand) and I can click the execution breaks into my function, now only if I can see the call button.
<ion-nav-title>Status: {{name}}
<div id="buttonOverlay" ng-click="checkPhoneError()">
<a href="{{::getPhoneNumber()}}" class="blue" ng-show="::showCallButton">
<div id="callArea"
class="button"
ng-class="::getCallButtonColor()">
Call
</div>
</a>
</div>
</ion-nav-title>
Finally I hit the solution thanks to Google!! Here is the working code. So what was happening was a-tag will set the link and make it automatically clickable. So the default ng-click was masking my ng-click. All I had to do was to override the default ng-click with my own.
<ion-nav-title>Status: {{name}}
<a href="{{::getPhoneNumber()}}" class="blue" ng-click="checkPhoneError()" ng-show="::showCallButton">
<div id="callArea"
class="button"
ng-class="::getCallButtonColor()">
Call
</div>
</a>
<div id="buttonOverlay" ></div>
</ion-nav-title>
Finally I hit the solution thanks to Google!! Here is the working code. So what was happening was a-tag will set the link and make it automatically clickable. So the default ng-click was masking my ng-click. All I had to do was to override the default ng-click with my own.
<ion-nav-title>Status: {{name}}
<a href="{{::getPhoneNumber()}}" class="blue" ng-click="checkPhoneError()" ng-show="::showCallButton">
<div id="callArea"
class="button"
ng-class="::getCallButtonColor()">
Call
</div>
</a>
<div id="buttonOverlay" ></div>
</ion-nav-title>
Related
I have the following code:
<div id="question" onclick="location.href='{% url 'read_question' question.id %}';" style="cursor:pointer;">
<button class="btn btn-primary" disabled>
<p>my text</p>
</button>
</div>
The result:
When I click on the div #question I go to an other page.
But when I click on the button I also go to the other page.
However my button is disabled...
I would like not to go to another page when I click on the button.
In Firefox when I click on the button nothing happens (This what I want).
But in Chrome I go to the other page...
Someone could help me to permanently disable the button?
I use HTML5 and Bootstrap 4
you have the button inside the div so when you click on the button you are also clicking on the div. You can also do it your way and just check to see if the event.taget is a button. if it is don't go to the url, if it isn't then go.
<div id="question" onclick="location.href='{% url 'read_question' question.id %}';" style="cursor:pointer;">xxx
</div>
<div>
<button class="btn btn-primary" disabled>
<p>my text</p>
</button>
</div>
Try moving the onclick to the <button> itself rather than the surrounding <div>. The disabled attribute of the button will not be able to disable the onclick applied to its parent element.
In the two examples below I have styled it so you can see the difference between the surrounding div (In blue) and the button. Notice that the alert will only fire in the top example when clicking the div.
I am assuming that your styling means you can not see the difference between the div and button and it is left for Chrome and Firefox to decide whether you are clicking the disabled button or the div.
div {
background: blue;
padding: 1em
}
<div onclick="alert('test')">
<button disabled>my text</button>
</div>
div {
background: blue;
padding: 1em
}
<div>
<button disabled onclick="alert('test')">my text</button>
</div>
function myFunction(){
console.log(event.target.innerHTML);
if(event.target.innerHTML=='div')window.location.href='{% url ' + 'read_question' + 'question.id %}';
}
<div id="question" onclick='myFunction()' style="cursor:pointer;">
<button class="btn btn-primary" >div</button>
<button class="btn btn-primary" disabled>
<p>my text</p>
</button>
</div>
If you want to keep the button in the div, you should use event.stopPropagation();. Try the following code.
<body>
<div id="question" onclick="goLink();" style="cursor:pointer;">
<button class="btn btn-primary" onclick="noLink(event);">
<p>my text</p>
</button>
</div>
<script>
function goLink(){
window.location.assign("{% url 'read_question' question.id %}");
}
function noLink(){
window.alert("I didn't go anywhere.");
event.stopPropagation();
}
</script>
</body>
There is also a event.stopImmediatePropagation(); method. I hope this helps you out.
The button is disabled and that works exactly as it should (prevents the default action of the button).
However, by default, click events are bubbling. Which effectively means any such event on any elements in your page does not only get triggered on that particular element, but on every one of its parents until document or until one of the elements in the chain stop the bubbling.
To stop a click event (or any other bubbling event) from bubbling you have to call stopPropagation() method on it.
In your case:
document.querySelector('#question btn').addEventListener('click', function(e) {
e.stopPropagation();
})
...or, in jQuery:
$('#question btn').on('click', e => { e.stopPropagation() });
Now your button will not pass the click event to the div. If it's enabled it will do what you want it to, if not, it won't. The <div> won't have a clue in either case.
If you only want to cancel the bubbling when the button is disabled, change the selector from #question btn to #question btn[disabled]
I need to display PDF file on my component using ng2-pdf-viewer, but one of its requirement,I need to add button downloadand it must overlapping PDF file, try to find any reference regarding this but none found, this is what I had tried,
component.html
<button (click)="toggle()">VIEW RECEIPT</button>
<div style="height:715px">
<pdf-viewer *ngIf="isHideReceipt" [autoresize]="true" [src]="pdfSrc" [original-size]="false"
[render-text]='false' [show-all]="false" style="display: block;position: relative"
[fit-to-page]="true">
</pdf-viewer>
<button (click)="download()">Download PDF</button>
</div>
component.ts
pdfSrc = '../../assets/pdf/bla3.pdf';
toggle() {
this.isHideReceipt = !this.isHideReceipt;
}
download() {
const blob = this.pdfSrc;
saveAs(blob, 'test1.pdf');
}
as per-requirement (button download overlapping pdf), Im trying using CSS like z-index but none work, it is possible ?
link to official ng2-pdf-viewer
Set the button element to have an absolute position and it's parent container to have a relative position. That way you'll be able to overlap onto the pdf viewer:
<button (click)="toggle()">VIEW RECEIPT</button>
<div style="position: relative; height:715px;">
<pdf-viewer *ngIf="isHideReceipt" [autoresize]="true" [src]="pdfSrc" [original-size]="false"
[render-text]='false' [show-all]="false" style="display: block;position: relative"
[fit-to-page]="true">
</pdf-viewer>
<button style="position: absolute; right: 10px; bottom: 10px;" (click)="download()">Download PDF</button>
</div>
This may seem pretty basic, are you allowed to put a link inside of a link? See attached image below:
I'm trying to have the whole grey bar clickable to go somewhere, but if the user clicks the wheel or the move arrow, they are other links. See my current code:
<a href="#" class="sp_mngt_bar">
<h1><?php echo $v; ?></h1>
</a>
Is this a good practice? Am I doing it wrong? How would you do this?
Thanks for the help!
Straight from the W3C for HTML4:
12.2.2 Nested links are illegal
Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.
Since the DTD defines the LINK element to be empty, LINK elements may not be nested either.
HTML 5
And for HTML5 it is a little different.
You cannot have Interactive Content inside an A element. Interactive Content includes anchor tags.
To simply answer the question: No.
That being said, here's a pure html/css workaround:
https://codepen.io/pwkip/pen/oGMZjb
.block {
position:relative;
}
.block .overlay {
position:absolute;
left:0; top:0; bottom:0; right:0;
}
.block .inner {
position:relative;
pointer-events: none;
z-index: 1;
}
.block .inner a {
pointer-events: all;
}
<div class="block">
<a class="overlay" href="#overlay-link"></a>
<div class="inner">
This entire box is a hyperlink. (Kind of)<br><br><br><br>
I'm a W3C compliant hyperlink inside that box
</div>
</div>
Wrap your nested link inside an object tag :
<a href="#" class="sp_mngt_bar">
<h1><?php echo $v; ?></h1>
<object></object>
<object></object>
</a>
Although I totally agree with the selected answer and yes, you shouldn't have Interactive Content inside an A element, sometimes you may need a workaround to this.
Here's an example where you need to put an interactive element inside an A tag. That little close button on the top right.
Here's the HTML for this. (It's not the actual build, I made it a bit simpler)
<a href="#">
<span class="hide">X</span> <!-- THIS IS THE SMALL 'X' WHICH HIDES THE WHOLE BOX -->
<img src="images/camera.svg" width="50" alt="Camera" />
<em>
Upload a profile picture
<small>
Here's the deal. Make your profile look awesome and even get 25 karma for it. We're not kidding.
</small>
</em>
<strong>
+ 25 K
</strong>
</a>
So, basically we want to hide this box when the user clicks on the 'X'. Otherwise, just it should work like a simple A tag. Here's the jQuery which did the trick.
$('.hide').click(function(e) {
e.preventDefault();
e.stopPropagation(); // THIS IS THE KEY PART
// DO WHATEVER YOU WANT, I FADED OUT THE BOX FOR EXAMPLE
$(this).parent().fadeOut(300);
});
I hope this helps someone with the same problem. ;)
I would restyle it so that it is more like this format:
<div class="sp_mngt_bar">
<h1><a href="#"<?php echo $v; ?></a></h1>
</a>
Nested links are illegal. To achieve the same behavior as with nested links you can do the following:
Use #mikevoermans HTML format as shown below and bind click event
<div class="sp_mngt_bar">
<h1><a href="#"<?php echo $v; ?></a></h1>
</div>
Your click event should look like this:
$(".sp_mngt_bar").bind("click", function(e) {
var target = $(e.target);
if(target.has('.t_icons_settings') { //Do something for settings }
else if(target.has('.t_icons_move') { //Do something for move }
else { //Do something for sp_mngt_bar
});
While technically not an answer to the question, another workaround is to bind the click event to a span or div:
<a href="outer-link">
Outer Link
<span class='inner-link'>Inner Link</span>
</a>
$('.inner-link').click(function (e) {
// Prevent the click-through to the underlying anchor
e.stopPropagation();
// Go to a link
window.location.href = 'page.html';
// Or call a javascript method
doSomething();
return false;
});
One solution is to position a link absolutely inside of the parent link container:
<div style="position: relative">
<a href="#">
<h1><a href="#"<?php echo $v; ?></a></h1>
<div id="placeholder" style="height: 24px">
</a>
<div style="position: absolute; bottom: 0">
</div>
</div>
#Jules answer, just shorter:
.parent {
position:relative;
}
.overlay-link {
position:absolute;
inset: 0;
}
html:
<div class="parent">
<a class="overlay-link" href="..."/>
<div class="child">
</div>
</div>
This may seem pretty basic, are you allowed to put a link inside of a link? See attached image below:
I'm trying to have the whole grey bar clickable to go somewhere, but if the user clicks the wheel or the move arrow, they are other links. See my current code:
<a href="#" class="sp_mngt_bar">
<h1><?php echo $v; ?></h1>
</a>
Is this a good practice? Am I doing it wrong? How would you do this?
Thanks for the help!
Straight from the W3C for HTML4:
12.2.2 Nested links are illegal
Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.
Since the DTD defines the LINK element to be empty, LINK elements may not be nested either.
HTML 5
And for HTML5 it is a little different.
You cannot have Interactive Content inside an A element. Interactive Content includes anchor tags.
To simply answer the question: No.
That being said, here's a pure html/css workaround:
https://codepen.io/pwkip/pen/oGMZjb
.block {
position:relative;
}
.block .overlay {
position:absolute;
left:0; top:0; bottom:0; right:0;
}
.block .inner {
position:relative;
pointer-events: none;
z-index: 1;
}
.block .inner a {
pointer-events: all;
}
<div class="block">
<a class="overlay" href="#overlay-link"></a>
<div class="inner">
This entire box is a hyperlink. (Kind of)<br><br><br><br>
I'm a W3C compliant hyperlink inside that box
</div>
</div>
Wrap your nested link inside an object tag :
<a href="#" class="sp_mngt_bar">
<h1><?php echo $v; ?></h1>
<object></object>
<object></object>
</a>
Although I totally agree with the selected answer and yes, you shouldn't have Interactive Content inside an A element, sometimes you may need a workaround to this.
Here's an example where you need to put an interactive element inside an A tag. That little close button on the top right.
Here's the HTML for this. (It's not the actual build, I made it a bit simpler)
<a href="#">
<span class="hide">X</span> <!-- THIS IS THE SMALL 'X' WHICH HIDES THE WHOLE BOX -->
<img src="images/camera.svg" width="50" alt="Camera" />
<em>
Upload a profile picture
<small>
Here's the deal. Make your profile look awesome and even get 25 karma for it. We're not kidding.
</small>
</em>
<strong>
+ 25 K
</strong>
</a>
So, basically we want to hide this box when the user clicks on the 'X'. Otherwise, just it should work like a simple A tag. Here's the jQuery which did the trick.
$('.hide').click(function(e) {
e.preventDefault();
e.stopPropagation(); // THIS IS THE KEY PART
// DO WHATEVER YOU WANT, I FADED OUT THE BOX FOR EXAMPLE
$(this).parent().fadeOut(300);
});
I hope this helps someone with the same problem. ;)
I would restyle it so that it is more like this format:
<div class="sp_mngt_bar">
<h1><a href="#"<?php echo $v; ?></a></h1>
</a>
Nested links are illegal. To achieve the same behavior as with nested links you can do the following:
Use #mikevoermans HTML format as shown below and bind click event
<div class="sp_mngt_bar">
<h1><a href="#"<?php echo $v; ?></a></h1>
</div>
Your click event should look like this:
$(".sp_mngt_bar").bind("click", function(e) {
var target = $(e.target);
if(target.has('.t_icons_settings') { //Do something for settings }
else if(target.has('.t_icons_move') { //Do something for move }
else { //Do something for sp_mngt_bar
});
While technically not an answer to the question, another workaround is to bind the click event to a span or div:
<a href="outer-link">
Outer Link
<span class='inner-link'>Inner Link</span>
</a>
$('.inner-link').click(function (e) {
// Prevent the click-through to the underlying anchor
e.stopPropagation();
// Go to a link
window.location.href = 'page.html';
// Or call a javascript method
doSomething();
return false;
});
One solution is to position a link absolutely inside of the parent link container:
<div style="position: relative">
<a href="#">
<h1><a href="#"<?php echo $v; ?></a></h1>
<div id="placeholder" style="height: 24px">
</a>
<div style="position: absolute; bottom: 0">
</div>
</div>
#Jules answer, just shorter:
.parent {
position:relative;
}
.overlay-link {
position:absolute;
inset: 0;
}
html:
<div class="parent">
<a class="overlay-link" href="..."/>
<div class="child">
</div>
</div>
I have 3 links that represent the content for one iFrame in my page. When you click each link, it'll reload the contents of that iFrame without reloading the page.
how do i set the image of my link to change when it's active?
here's my code:
<div id="tabs">
<div id="overview">
<a id="overviewtab" target="tabsa" href="toframe.html">Overviews</a>
</div>
<div id="gallery">
<a target="tabsa" href="tawagpinoygallery.html">Gallery</a>
</div>
<div id="reviews">
<a target="tabsa" href="trframe.html">Reviews</a>
</div>
</div>
<div id="tabs-1">
<!--<div id="scroller">-->
<iframe name= "tabsa" width="95%" height="100%" frameborder="0"></iframe>
</div>
CSS code:
#gallery a {
text-indent: -9999px;
padding-top: 40px;
background: url(../images/GalleryTab.png) no-repeat;
height: 51px; width: 123px; position: absolute; z-index: 2;
}
#gallery a:active, a:hover {
text-indent: -9999px;
padding-top: 40px;
background: url(../images/galleryoverview.png) no-repeat;
height: 51px;
width: 123px;
position: absolute;
z-index: 2;
}
it doesn't seem to work.. :o i only see the change in image when i hold the mouse down on the link, but when i click it, the image remains the same as if it wasn't the active tab. :o thanks!!
I am not seeing a style for visited? Only active and hover.
add
#gallery a:visited{}
style and see if that helps.
But I wonder if that is what you are actually asking? You may want to link to be displayed differently from the other links if its the last link that the user clicked. To do that you may have to use some javascript.
For example, if you use jQuery you can do something like this:
$("#gallery a").click(function(){
$("#gallery a").removeClass("ActiveClass");
$(this).addClass("ActiveClass");
});
where ActiveClass is a CSS class for styling the link appropriately.
EDIT based on comment below.
Let us assume that you have three links that look the same (call that lookA). You click on one and it looks different from the other two (lookB) but the other two still looks the same (lookA). You then click on a second link. The second link is not lookB and the other two links are lookA. Does this sound like what you want? At least that is how I interpret your question.
Hence, create two classes in CSS:
.lookA {/*Style for lookA*/}
.lookB {/*Style for lookB*/}
of course you can use more meaningful names.
Then you can add a class to each of the links that you need to use in this scenario like this:
<div id="tabs">
<div id="overview">
<a class="imagelink lookA" id="overviewtab" target="tabsa" href="toframe.html">Overviews</a>
</div>
<div id="gallery">
<a class="imagelink lookA" target="tabsa" href="tawagpinoygallery.html">Gallery</a>
</div>
<div id="reviews">
<a class="imagelink lookA" target="tabsa" href="trframe.html">Reviews</a>
</div>
</div>
So that each link can be refered to by its class, that is, imagelink. Also each link has a default lookA.
Now in jQuery (I know you did not specify jQuery but using it is 100 times simpler than plain Javascript).:
$(document).ready(function(){
$(".imagelink").click(function(){
$(".imagelink").removeClass("lookB");
$(this).addClass("lookB");
return true;
});
});
So on click on the link, it removes lookB from any other link and applies it only to the clicked link.
Hope this helps a bit.
I believe the selector is:
#gallery a:focus {...}
This is (inevitably) applied variably across browsers, however.
Stu Nicholls has a demo over on CSS Play, this demo being to remove the default outline of the focussed element, and otherwise style the clicked element.
Presumably this would be more reliably effected with jQuery, but it can be done with CSS.