I am trying to add a "double click" event to all text html element (p, span, h1, h2 ...) from all pages to open a popup.
I think that should be a better way than add to every element (dblclick)="funtion()".
I tried modify the component "p" but doesn't work...
Anyone have idea how can I do it?
I'm working in the solution like these on the AppComponent constuctor, but... I don't like it
router.events
.pipe(filter(event => event instanceof NavigationEnd))
.subscribe((event: NavigationEnd) => {
$("p").dblclick(function() {
alert("Handler for .dblclick() called.");
});
});
Wrap your elements in a div which handles the event.
<div (dblclick)=function()>
...elements..
</div>
Try this:
<body (dblclick)="myFunction($event)">
......your code.....
</body>
Related
I wanted to have one element highlight either when it gets hovered, or some other element is also hovered. Yet the code i've written to achieve this seems to override the hover pseudo-class whenever it gets run. I can't seem to see why -- minimal example in this fiddle: https://jsfiddle.net/mLynfz3x/
As soon as the second element gets hovered, the hover pseudo class for the first one is removed, and I'm not sure why. Is it intended that the jQuery .css() function override pseudo-classes? Or is the issue something else that I've missed entirely
Thank you!
The set Color for the Element Testlink doesnt disable the hover-pseudo class, the fixed color for that element is just, lets say "higher priority". So all you gotta do to fix it is add:
#testLink:hover {
color: olive !important;
}
and it should work with your existing JQuery.
This is what I did
$("#aTestItem").hover(() => {
$("#testLink").css("color", "olive");
}, () => {
$("#testLink").css("color", "black");
});
$("#testLink").hover(() => {
$("#testLink").css("color", "olive");
}, () => {
$("#testLink").css("color", "black");
});
I want to take a tag and replace with a #Html.textarea() razor html helper but it doesn't look as if JQuery can replace DOM elements with html helpers. How do I go about this?
using(#Html.BeginForm())
{
<a id="clickme">Edit</a>
<div>#Model.username</div>
}
How can I replace this div with #Html.Textarea ? JQuery could do it with div and input tags.
jQuery cannot replace a tag with #Html.TextArea() !
The TextArea helper method is a C# method, which gets executed when razor tries to render the view. This happens in your web server. jQuery is a client side library and anything you do with jQuery happens at client side, in your browser.
But all these helper methods ultimately generate some HTML for DOM elements. That means, you can use jQuery to manipulate visibility of that.
If you are trying to do something like an inline edit, you can use a script like this , to start with
First, render the text area along with your label div, but have it hidden initially. Also wrap the label,edit link and the hidden input inside a container div which we can use later to help with our jQuery selectors.
#using (#Html.BeginForm())
{
<div class="edit-item">
Edit
<div class="edit-label">#Model.FirstName</div>
#Html.TextAreaFor(a => a.FirstName,
new { style = "display:none;", #class = "edit-text" })
</div>
<div class="edit-item">
Edit
<div class="edit-label">#Model.UserName</div>
#Html.TextAreaFor(a => a.UserName,
new { style = "display:none;", #class = "edit-text" })
</div>
}
Now when the user clicks edit, you have to toggle the visibility of the label and hidden input and update the value of label after user done editing the value in the input element.
$(function () {
$("a[data-mode]").click(function (e) {
e.preventDefault();
var _this = $(this);
var c = _this.closest(".edit-item");
c.find(".edit-text").toggle();
c.find(".edit-label").toggle();
if (_this.attr("data-mode") === 'label') {
_this.attr("data-mode", 'edit');
_this.text("done");
} else if (_this.data("mode") === 'edit') {
c.find(".edit-label").text(c.find(".edit-text").val());
_this.text("edit");
_this.attr("data-mode", 'label');
}
});
});
This is a head start. You can optimize this code as needed.
Here is a working jsfiddle for your reference
I have a button in my page
<button onclick="document.getElementById('donation').style.visibility='visible'">Support</button>
That I want to have linked to making a hidden div (donation) visible. I'm not sure if the getElementById works with divs, but I couldn't find out either, because when I changed the Id to h1, with a simple color change for style, it didn't work either.
Is there a problem with my button or syntax?
You can still work this with an inline onclick.
Andrei is correct about the id needing to be an individual.
<button onclick="document.getElementById('donation').style.visibility='visible'">Support</button>
<div style="background-color: gray; width: 50px; height: 50px; visibility: hidden;" id="donation"></div>
Technically though, it's better to keep your css and javascript in the head tag or outside of the html.
In order for document.getElementById('donation') to return a DOM element this condition would need to be true
there should be one html element and only one with id="donation" in your page. For example: <div id="donation"></div>
It's possible that your function works flawlessly (you can easily tell if it is by looking at your browser console after you pushed the button) but your element would still remain not visible. For example, if its display property is set to none. There are many possible reasons why an element might not be rendered by the browser. The fastest way to pinpoint the reason would be for you to create a minimal, complete and verifiable example (using the <> button) where we could experience the issue.
For me, I think separating the codes will keep things clearer and readable.
<button id="donation_btn">Support</button>
The javascript
function enableDonation( button, donationElement ) {
// check if the button is defined
if ( button != undefined
&& button != null ) {
button.addEventListener( "click", function () {
donationElement.style.display = "block";
});
}
// execute the code on document load
window.addEventListener( "load", function () {
enableDonation(
document.getElementById( "donation_btn" ),
document.getElementById( "donation" )
);
});
I have a div with some text and I want when the cursor is hover this div to select the text. If I let this div as it is, when trying to select all (CTRL+A) then I select all page content, meaning all body text.
To get rid of this, I need to use contenteditable attribute for this div.
But I don't want to let people to change the text / copy / cut and so on
I try to use readonly for this div, but doesn't working.
Any advice please ?
PS1: This div has also other tags inside (html content), but I don't think that this is a problem.
PS2: An example is here: jsfiddle.net/msakamoto_sf/wfae8hzv/ - but with a problem. You can cut the text :(
Use event.metaKey in the keydown event to check if ctrl (or cmd on mac) keys are being pressed. You also have to disable the cut and paste events.
<div
contenteditable="true"
oncut="return false"
onpaste="return false"
onkeydown="if(event.metaKey) return true; return false;">
content goes here
</div>
You can prevent the user from cutting by handling the "cut" event and calling its preventDefault() method. This will prevent cut with any user input (including the browser's context menu or edit menu), not just via a particular key combination.
This example uses jQuery because your jsFiddle uses it:
$("#editablediv").on("cut", function(e) {
e.preventDefault();
});
set contenteditable to false and it should work !! that simple.
use contenteditable attribute for div to make it editable or not
and use readonly attr for form input elements.
<element contenteditable="true|false">
<input readonly="readonly" />
Here's an example in React, but it would work with basic HTML and JavaScript as well because I'm just leveraging the default events.
// import CSS
import './DefaultSettings.css';
// import packages
import React, { Component } from 'react';
// import components
const noop = (e) => {
e.preventDefault();
return false;
};
class DefaultSettings extends Component {
render() {
return (
<div className="DefaultSettings"
contentEditable={true}
onCut={noop}
onCopy={noop}
onPaste={noop}
onKeyDown={noop}>
</div>
);
}
}
export default DefaultSettings;
To prevent ctrl + x (Cut) from div you need to use following JQuery :
if (event.ctrlKey && event.keyCode === 88)
{
return false;
}
It will prevent to cut text from div.
Check Fiddle Here.
on user id condition set contentEditable="false"
for JavaScript,
document.getElementById(divid).contentEditable = "false";
this will work
I'm using <a href> element along with :target css selector to show a <div> which by default is set to display:none. Problem is, that when I click on the link to show that <div>, it is automatically scrolling down my site towards that <div>.
Is there a way to stop the screen movement?
Unfortunately I am not yet proficient in anything besides CSS and HTML.
You can use event.preventDefault() to avoid this. Something like this:
$('a.yourclass').click(function(e)
{
//your code
e.preventDefault();
});
OR:
link
in the link enter:
Link here
You'll need JS anyway:
// (in jQuery)
$el.on('click', function(e) {
// find current scroll position
var pos = document.body.scrollTop || document.documentElement.scrollTop;
// let normal action propagate etc
// in the next available frame (async, hence setTimeout), reset scroll posiion
setTimeout(function() {
window.scrollTo(0, pos);
}, 1);
})
I don't know if this will flicker the screen. It might. It's a horrible hack either way.
In my Chrome, there's no flicker: http://jsfiddle.net/rudiedirkx/LEwNd/1/show/
There are two ways to tell the browser we don't want it to act:
The main way is to use the event object. There's a method
event.preventDefault().
If the handler is assigned using on (not by
addEventListener), then we can just return false from it.
Example:
Click here
or
here
This is a bit of a hack but you could use a basic css work around:
CSS only Example
#div1 {
height: 0;
overflow:hidden;
}
#div1:target {
height: auto;
margin-top: -110px;
padding-top: 110px;
}
#div2 {
background:red;
}
Click to show
<div id="div1">
<div id="div2">Content</div>
</div>
If you need it to be a little more flexible you can add some js...
More Flexible Example with JS
$('a').click(function () {
$('#div1').css({
'margin-top': 0 - $('#div1').position().top + $(window).scrollTop(),
'padding-top': $('#div1').position().top - $(window).scrollTop()
});
});
Basically you're pulling the top of div1 up with the negative margin and then pushing div2 back down with the padding, so that the top of div1 rests at the top of the window... Like I said its a hack but it does the trick.
Those links are anchor-links and by default made for those jumps :) You could use JS to prevent the default behaviour in some way. For example using jQuery:
$('a').click(function(e){e.preventDefault();});
or by default add return false; to the links
Avoid using :target all together and just use onclick event.
function myFunction()
{
document.getElementById('hiddenDiv').style.display = 'block';
return false;
}