chrome extension popup textarea focus - javascript

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>.

Related

Show loading while waiting for server

I want to modify a js script to be fired when the client is waiting for the server instead of fireing on loading. There you can see the script: FakeLoader.js, CSS
I found an ajax solution here, but I had no idea how to use it, as the script is inicialized in html. I think the key is at the end of the js file:
$(window).load(function(){
centerLoader();
$(window).resize(function(){
centerLoader();
});
});
On the html page, I have a text input field, which makes refresh on hitting enter, so I thought I could solve it by replacing the mentioned part with code from here :
$(document).keypress(function (e) {
if (e.which == 13) {
centerLoader();
$(window).resize(function(){
centerLoader();
});
}
});
This should fire the loader when enter was hit and show it while the server sends the new page, but instead it just does exatly the same thing before modifying the script, which is weird.
This is how it is initialized in html:
<div id="fakeLoader"></div>
<script type="text/javascript">
$("#fakeLoader").fakeLoader({
timeToHide:1200, //Time in milliseconds for fakeLoader disappear
spinner:"spinner1",//Options: 'spinner1', 'spinner2', 'spinner3','spinner4', 'spinner5', 'spinner6', 'spinner7'
});
</script>
Could you give some idea? I am not good at js. Thank you.
I have a working sample with this:
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="3.2.1" src="https://cdn.jsdelivr.net/npm/jquery#3.2.1/dist/jquery.min.js"></script>
<script src="http://joaopereirawd.github.io/fakeLoader.js/js/fakeLoader.js"></script>
<link rel="stylesheet" href="http://joaopereirawd.github.io/fakeLoader.js/demo/css/fakeLoader.css" />
<script>
window.onload = () => {
document.body.addEventListener('keydown', function (e) {
if (e.keyCode == 13) {
$("#fakeLoader").fadeIn();
$("#fakeLoader").fakeLoader({
timeToHide:1200, //Time in milliseconds for fakeLoader disappear
spinner:"spinner1",//Options: 'spinner1', 'spinner2', 'spinner3','spinner4', 'spinner5', 'spinner6', 'spinner7'
});
}
});
}
</script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div id="fakeLoader"></div>
<script type="text/javascript">
$("#fakeLoader").fakeLoader({
timeToHide:1200, //Time in milliseconds for fakeLoader disappear
spinner:"spinner1",//Options: 'spinner1', 'spinner2', 'spinner3','spinner4', 'spinner5', 'spinner6', 'spinner7'
});
</script>
</body>
</html>
Obviously that's not how you will want the end result to look. It'll be better to move the fake loader part to a function and make the keyCode stuff cross browser. That'll get you started though.

Functioning onclick method for iframe

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

raw JS event does not trigger ng-disabled change

I dont know why below code does not work properly? I was hoping when I select the the picture, the object:selected event is fired and I do see the print out, however the status of ng-disabled on the button does not change? the Toggle checkbox does properly toggle the button's disable though. any reason? do we need to fire anything specific to make angular 'rerender'? thanks
<!doctype html>
<html lang="en" ng-app="testApp">
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.js"></script>
<script src="//fabricjs.com/lib/fabric.js"></script>
<script>
var app = angular.module('testApp', []);
app.controller('mainController', function($scope) {
$scope.buttonDisabled = true;
$scope.canvas = new fabric.Canvas('c');
fabric.Image.fromURL("http://lh3.ggpht.com/WDiCN0jYNq_OfzjMwu07XJ9KWOa5AuMxeojLCgTrjCeAtBNd1AKAglIrJBNHbynsFY2HCE-gtOZQVrpN0eG7thFmydfv0STKREJhWaeklg=s660" , function (img ){
$scope.canvas.add(img);
}, {crossOrigin:"anonymous"});
$scope.canvas.on( 'object:selected', function() {
$scope.buttonDisabled = !$scope.buttonDisabled;
console.log("IsDisabled:", $scope.buttonDisabled);
} )
});
</script>
</head>
<body ng-controller="mainController">
<canvas id="c" width="800" height="500"></canvas>
Toggle<input type="checkbox" ng-model="buttonDisabled"><br/>
<button ng-disabled="buttonDisabled">Button</button>
</body>
</html>
The event listener is a jquery event so your function isn't called within angular context.
You should wrap the function content with $scope.$apply() to start digest cycle which will perform, among other things, dirty check for your scope values, will find that buttonDisabled was changed and will update the view accordingly. Here's how to do it:
$scope.canvas.on( 'object:selected', function() {
$scope.$apply(function () {
$scope.buttonDisabled = !$scope.buttonDisabled;
console.log("IsDisabled:", $scope.buttonDisabled);
});
});

How to copy the content to clipboard using jquery

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>

After adding a new element in the DOM, the element does not recognize old script

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/

Categories