I have the link ,when i click the link i have to copy the content to clipboard.
I am using below code but it is not copying.Any other code exist for copy to clipboard.I had tested so many codes ,but none of them useful.
<script src="jquery.js"></script>
<script src="jquery.clipboard.js"></script>
<script>
$(document).ready(function() {
$("#val_link").click(function () {
alert("Hello!");
$("#val_link").clipboard({
path: 'jquery.clipboard.swf',
copy: function() {
alert("Text copied.");
return $("div#some-content").text();
}
});
});
});
</script>
Link
<div id="some-content">Text content to copy</div>
You can do something like this:
http://www.shirmanov.com/2010/09/copy-to-clipboard-in-htmljavascript-and.html
The .clipboard() function does the attaching of the click handlers for you. but it attaches it to an invisible element that it puts over the top of #val_link, in your case.
So, you have to put a click handler on #val_link to prevent its default use.
Then outside of that you add the clipboard function to it.
Essentially what you were doing was on click bind the clipboard handlers - my guess is if you clicked the link again then it would copy correctly, but then bind another set of events.
try:
<script src="jquery.js"></script>
<script src="jquery.clipboard.js"></script>
<script>
$(document).ready(function() {
$("#val_link").click(function (o) {
o.preventDefault();
});
$("#val_link").clipboard({
path: 'jquery.clipboard.swf',
copy: function() {
alert("Text copied.");
return $("div#some-content").text();
}
});
});
</script>
Link
<div id="some-content">Text content to copy</div>
Related
The scenario I want to achieve is as follow:
$("#parentDiv").on("load",'#childDiv', function () {
// do something...
});
I would like to call a function when a child div is dynamically generated and shown on the page, but there is no suitable event that can achieve this. Any hint or help would be appreciated.
Instead of load, you can make use of a custom event which gets triggered with .trigger():
$(document).ready(function() {
$("button").on("click", function() {
$("body").append("<div id='new'>Created</div>").trigger('custom-event');
});
});
$(document).on("custom-event", function() {
console.log('DIV created!');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<button>Create element</button>
</body>
I've been searching everywhere for a solution for this, but all the solutions I've found haven't worked. I want to get the clicks that happen within the iframe that I have in the document. I get the "document ready" alert but I never get the "iframe clicked" alert no matter where I click. I am using ASP.NET MVC 5. Here's the code:
#Scripts.Render("~/bundles/jquery")
#{
ViewBag.Title = "Home Page";
}
<div id="terminal-iframe-wrap" class="map-info-wrapper" style="display: none">
<iframe name="terminal-iframe" id="terminal-iframe" class="terminal-url-wrapper" frameBorder="0"></iframe>
</div>
<div id="all-terminals-view" class="map-info-wrapper">
<div id="map" class="map"></div>
</div>
#section scripts
{
<script src="~/Scripts/lib/promise.min.js"></script>
<script src="~/Scripts/lib/fetch.js"></script>
<script src="~/Scripts/app/map.js"></script>
<script async defer src="//maps.googleapis.com/maps/api/js?key=somethingsomething&callback=initMap"></script>
<script>
$(document).ready(function () {
alert("document ready.");
document.getElementById('terminal-iframe').contentWindow.document.body.onclick = function (event) {
alert("iframe clicked");
if (e.target.id != "right-side-menu" && !$(e.target).parents("#right-side-menu").size()) {
if ($('#right-side-menu').hasClass('in')) {
$('#right-side-menu').collapse('hide');
}
}
};
});
</script>
}
You can use it like:
jQuery has a method, called .contents(), that when used on an iframe element returns the document of the iframe.
// Get a reference to the iframe document
var iframeDoc = $('#iFrame').contents().get(0);
// Bind event to iframe document
$(iframeDoc).bind('click', function( event ) {
// do something
});
This will work for you.
For more details you can visit: http://api.jquery.com/contents/
Your javascript code seen to be OK, see the codepen below:
http://codepen.io/anon/pen/ryWoKX?editors=1010
$(document).ready(function () {
document
.getElementById('terminal-iframe')
.contentWindow.document.body.onclick = function (event) {
console.log('clicked !');
};
});
your problem is that you have a "display:none" in #terminal-iframe-wrap
I have a problem.After adding a new element in the DOM, the element does not recognize old script and the same function that was in this document, how to solve this problem? how to reload the script
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<div id='content'>Content.....</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script src='js/script.js' type='text/javascript'></script>
</body>
</html>
// script.js //
$('#content').click(function(){
$('body').append('<div id="apended">Click me!</div>');
});
$('#apended').click(function(){
alert('click!');
});
When you use .on('click', function (e) {}) function, it works only for existing elements. To handle click event on all selector elements, even for elements which will be added in future, you can use one of these functions:
$(document).on('click', "#appended", function (e) {
// some code code
alert('click!');
});
or:
$("body").delegate("#appended", "click", function () {
// your code goes here
alert('click!');
});
For more information read article about Understanding Event Delegation
Instead of click function You can use :
1.live(old version)
2.delegate
3.on
But , if you want to use click with immutation of delegate function :
var myFn=function(e){
if(e.target.id=='apended'){
alert('click');
}
}
$(document).click(myFn)
Demo :http://jsfiddle.net/abdennour/7cyjV/
I have found some jQuery codes for show content with slide effect, but none of them works.
the Javasccript code:
$('#clickme').click(function() {
$('#pic').slideToggle('slow', function() {
});
});
the HTML:
<div id="clickme">
click here</div>
<img id="pic" src="Img/Gallery/123.jpg" />
When i click the "click me" div, nothing happens. I have also tried this :
$("div").click(function () {
$(this).hide("slide", { direction: "down" }, 1000);
});
But again, nothing happens. What is the problem?
Thanks!
There are two ways that it works:
1) Add the following code in the header
$(document).ready(function () {
$("div").click(function () {
$('#pic').slideToggle('slow', function() {
});
});
});
2) Place your code after your last div!
And obviously you have to include a jquery file!
For example:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
Put your code in
$(document).ready(function(){
// Your code here
});
you shlould load jQuery by adding this line at the head:
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
You may also want to change your code to this:
$("div").on("click", function () {
$(this).hide("slide", { direction: "down" }, 1000);
});
Check this jsfiddle to see the working example. ) Btw, it's not necessary to pass the empty function to slideToggle, I suppose.
I guess the only difference is that you try to run your javascript not as onload function; it doesn't find any 'clickme' elements, that's why event handler function is not called.
It seems that i cannot call focus() on a textarea of my chrome extensions popup when it gets opened / after ondomready.
i have something like that in popup.js :
$(document).ready(function () {
console.log($("#moped-text"));
$('textarea').focus();
$('.container').css("color", "red");
});
i reference it in popup.html like that:
<html>
<head>
<link rel="stylesheet" href="css/content.css" type="text/css">
<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/popup.js"></script>
</head>
<body>
<div class="container">
<textarea name="newText"></textarea>
</div>
</body>
The css-change works, the focus() does not!
When i debug the popup and type $('textarea').focus(); in the console, it works.
Also events added inside the ready-callback are bound successfully.
Any help highly appreciated!
i still don't know, why the focus is not set at the first place, but a simple timeout does the job :)
setTimeout(function() {
$('#moped-text').focus();
}, 500);
Workaround for Chrome 18 (found here)
if(location.search !== "?foo")
{
location.search = "?foo";
throw new Error; // load everything on the next page;
// stop execution on this page
}
Works for me!
You have div with class "container" not id. So use this instead:
$('.container').css("color", "red");
I use this to focus.
My element has "autofocus" as an attribute. When the form is loaded, the element with the attribute "autofocus" gets the focus.
.directive('autofocus', ['$timeout', function($timeout) {
return {
restrict: 'A',
link : function($scope, $element) {
$timeout(function() {
$element[0].focus();
});
}
}
}])
You can simply use <textarea name="newText" autofocus></textarea>.