I have an input tag inside a div tag. I need to hide the div tag after clicking three times in the input tag. How do I achieve this in HTML using angular?
You have endless solutions for this but, the idea would be that you have a counter that start at 0, after each click you increment it and when it reaches 3 you change the class/style applied to the div parent.
I have created a stackblitz app as an example for you, hope it helps:
https://stackblitz.com/edit/hide-element-after-3-clicks?file=src/app/app.component.html
Related
I have an anchor tag within a button tag description in HTML as below:
<button type="submit" onClick="handleSubmit()">Desc....
Click here for more details
</button>
Now when I click on the anchor text, the action "handleSubmit()" executes instead of going to my https:// link.So apparently, my text is also being treated as a button instead of a hyperlink.
I tried adding the z-index property to my CSS for (z-index: 1) in order to make it independently clickable so it overlays on top of the button tag, but no joy!
But if I right-click on the text, I do see the option of opening the https link in a new tab and it does so perfectly. Only when I click on it normally(left click), the button click handler executes as if its the button being clicked instead of the anchor tag.
How can I fix this? Any help would be much appreciated, thank you.
I don't quite understand if you intend to use the function inside the onClick in any situation.
You can swap the wrapping of elements so that the button is inside the link; also you could move the link inside the onClick like this:
onClick="window.location.href='link'"
Thought these can be a couple solutions, you need to clarify the exact behaviour you expect to obtain from your code.
I'm having this problem:
I'm starting with Angular 6, so I wanted to do a text editor which shows the css styles while you are typing.
Seeing that I wasn't able to show the Css styles inside of Textareas, I tried with an editable div when I show the text on [innerHTML]="".
The main problem is when I call the method bound to an (input), the cursor goes to the start of the div, instead of go to the last position to keep typing.
I'm using the following div:
<div class="derecha" id="editable" [innerHTML]="textoCompleto" contenteditable="true" (input)="aTexto($event.target.innerText)"></div>
Thank you so much
I'm struggling to replicate the login form found at the top of the PayPal website.
I have been able to create the username and password fields including the 'blue glow' from searching the web for tutorials; however, I'm unable to find any coding to add the 'clickable' question mark to the field.
I would like to be able to replicate the drop down when the question mark is clicked.
Any help will be greatly appreciated.
I hope I have made it clear.
What you could do is in your form have the question-mark image trigger a java-function... Ex:
<img src="my_image.jpg" onClick="myjava_function()">
Then in your java function you could have a div containing the drop-down displayed.
<script type="text/javascript">
myjava_function(){
document.getElementById('mydiv').style.display="block"
}
</script>
Then in near the form you could have your div that contains the drop down first being hidden but shown on the click.
<div id="mydiv" style="display:none;"><form><select><option value=1>1</option></select></form></div>
This would be my approach to getting it done. Firstly, try and get a log that is similar to the question mark, and position it in the div that you would place your area at. In the CSS for the logo apply float right so that the logo would appear to the right of that div. Then build a whole div that appears when you click the log before hand and give it the CSS display none, hence it would not be shown. Write a javascript function that works with the onclick you apply on the logo that changes the CSS of that div to display block and hence the whole div appears when you click it. The div by itself has a cross mark that could trigger another javascript call to change the CSS to display none. Good luck.
The problem that i'm having is that I've specified some rollover buttons, and some div id's to control my image positions. however when i make a new div called Text and put some in, this also seems to trigger my rollover buttons? like its using code from the div above it, even though I've used the <div> tags:
http://jsfiddle.net/bq5MR/2/
Your example doesn't display the images.
You haven't closed your <a> tags which may result in the effect area being larger than you expect.
http://validator.w3.org/ - a free HTML validator which can help pinpoint invalid HTML and potential issues.
You're not closing your second 'a' tag. Try closing it and see if that fixes the problem.
on a webpage I've been working on I have a problem which I seem unable to solve.
I have a div with display set to none which I fade in. it contains form-element which are not being shown the way they are supposed to when wieved in IE.
you can look at it at http://www.orrmyr.se
Thanks for you help
Martin
have you tried having the form in another div inside the hidden one?
or us JS to hide the div onLoad instead of having hidden in CSS