I am trying to override some click event on the following domain but it won't work. After clciking on call button it will open a dialog, where it has a apply button I want to go some other website when click on that button, now it opens another dialog after clicking on that button. I have used the following code to override the click event but it dose not work.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>My Website</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type='text/javascript'>
/* <![CDATA[ */
var soload = {"lang":"en","dir":"LTR","cookieOptions":{"domain":".hellobrokers.com"},
"packages":{"Clock":{},
"RegularPlatform":{"settings":{"selector":"#so_container"}}
}};
/* ]]> */
</script>
<script type='text/javascript' src='//spotplatform.hellobrokers.com/SpotOptionPlugin.js?ver=4.1.1'></script>
<script type="text/javascript">SO.load(soload);
</script>
<script>(function() {
var _fbq = window._fbq || (window._fbq = []);
if (!_fbq.loaded) {
var fbds = document.createElement('script');
fbds.async = true;
fbds.src = '//connect.facebook.net/en_US/fbds.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(fbds, s);
_fbq.loaded = true;
}
})();
window._fbq = window._fbq || [];
window._fbq.push(['track', '6022904954366', {'value':'0.01','currency':'EUR'}]);
</script>
</head>
<body>
<div id="bgbanner">
<div id="index">
<div class="mainContent">
<div id="so_container">
<div align="center" class="please_wait">
<img border="0" src="img/ajax-loader.gif" alt="" /><br />
<br />
Please Wait<br />
<br />
Loading</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('.applyApprove').unbind();
$(".applyApprove").click(function() {
window.location = 'http://www.google.com';
});
});
</script>
</body>
</html>
Instead of .unbind(), use .off('click') and it should work:
<script>
$(document).ready(function(){
$("button.applyApprove").off('click');
$("button.applyApprove").click(function(){
window.location = "http://www.google.com";
});
});
</script>
Just use $('.applyApprove') instead of $('button.applyApprove') (notice no button):
<script>
$(document).ready(function() {
$('.applyApprove').unbind();
$(".applyApprove").click(function() {
window.location = 'http://www.google.com';
});
});
</script>
Related
I have tried the tutorial are there, but still could not work, what's wrong with my code?
Parent Page Script:
<!DOCTYPE html>
<html>
<head>
<title>Parent</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.slim.js"></script>
<script>
$(function() {
var money = 20000;
$("#iframe1").contents().find("#nominal").on("change keyup", function() {
var input = $(this);
// remove possible existing message
if( input.next().is("form") )
input.next().remove();
// show message
if( input.val() > money )
alert('Hello');
});
});
</script>
</head>
<body>
<iframe id="iframe1" src="iframe.html">
</iframe>
</body>
</html>
Iframe script:
<!DOCTYPE html>
<html>
<head>
<title>Iframe</title>
</head>
<body>
<input type="text" id="nominal" value="" />
</body>
</html>
please tell me what was wrong, thanks advance.
In your HTML page
<!DOCTYPE html>
<html>
<head>
<title>Parent</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.slim.js"></script>
<script>
var money = 20000;
function my_custom_function(input)
{
// remove possible existing message
if( input.next().is("form") ) input.next().remove();
// show message
if( input.val() > money ) alert('Hello');
}
</script>
</head>
<body>
<iframe id="iframe1" src="iframe.html">
</iframe>
</body>
</html>
In your iframe code
<!DOCTYPE html>
<html>
<head>
<title>Iframe</title>
<script>
$(function() {
$("#nominal").change("change", function() {
parent.my_custom_function($(this));
});
$("#nominal").change("keyup", function() {
parent.my_custom_function($(this));
});
});
</script>
</head>
<body>
<input type="text" id="nominal" value="" />
</body>
</html>
Hope this trick will be helpful to you.
You have two possible scenarios:
if you can modify iframe page;
if you can't.
Your problem is that when your javascript run, the content of iframe could be not available, so JQuery cannot "attach" to child controls.
If you can change your iframe code, you can add this script to your iframe page
window.onload = function() {
parent.iframeLoaded();
}
and obviously on the parent page you must change your code to
$(function() {
var money = 20000;
window.iframeLoaded = function() {
$("#iframe1").contents().find('#nominal').on('keyup', null, function(event) {
var input = $(this);
// show message
if( input.val() > money )
alert('Hello');
});
}
});
});
If you instead cannot change iframe html, you cannot bind to keyup event of controls but you can bind to iframe one, so in this case you need to bind keyup of iframe and then filter for #nominal originated event, and your code should be like this
$(function() {
var money = 20000;
$("#iframe1").contents().on('keyup', null, function(event) {
if(event.target.id === 'nominal'){
var input = $("#iframe1").contents().find('#nominal');
// show message
if( input.val() > money )
alert('Hello');
}
});
});
I have used nicEditor in my winforms by loading a web browser and loading the nicEditor inside it. By default when the editor loaded and after that I click in the middle of the editor the focus doe not go to nicEditor. But if I click right at the start of the editor, focus is set to the editor. Following is my HTML file code.
<html>
<head>
<script type="text/javascript">
var myInstance = "";
function GetContent() {
//window.alert(""+myInstance);
//var content = tinyMCE.get('tinyMceEditor').getContent();
//content = content.replace("<body>", "<body style=\"font-size:10px;\">");
//var content = nicEditors.get('area3').getContent();
var content = myInstance.instanceById('editor').getContent();
//window.alert(myInstance.instanceById('editor').getContent());
return content;
}
function SetContent(htmlContent) {
setTimeout(function () {
//window.alert(htmlContent);
//nicEditors.get('area3').setContent(htmlContent);
myInstance.instanceById('editor').setContent(htmlContent);
if (htmlContent == undefined || htmlContent == '')
myInstance.instanceById('editor').setContent('');
//tinyMCE.get('tinyMceEditor').readOnly = true;
}, 100);
}
</script>
<script type="text/javascript" src="jscripts/nicEdit.js"></script>
<script type="text/javascript">
bkLib.onDomLoaded(function () {
//myInstance = new nicEditor().panelInstance('editor');
myInstance = new nicEditor({ maxHeight: 388 }).panelInstance('editor');
//nicEditors.allTextAreas()
});
</script>
</head>
<body style="margin-top: 0px; margin-left: 0px;">
<div id="sample">
<textarea id="demo" cols="50" id="editor" name="editor" style="width:295px;" >
</textarea>
</div>
</body>
</html>
Please help.
Its working with this way.
but i am not getting what you are trying to do using below script .
<script type="text/javascript">
bkLib.onDomLoaded(function () {
//myInstance = new nicEditor().panelInstance('editor');
myInstance = new nicEditor({ maxHeight: 388 }).panelInstance('editor');
//nicEditors.allTextAreas()
});
</script>
here is my simple HTML . Now let me know what exactly you want to do .
<html>
<head>
</head>
<body style="margin-top: 0px; margin-left: 0px;">
<div id="sample">
<script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script>
<script type="text/javascript">
//<![CDATA[
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
//]]>
</script>
<textarea id="demo" cols="50" id="editor" name="editor" style="width:295px;" >
</textarea>
</div>
</body>
</html>
Looking for something like this,
Just let me know if i am wrong anywhere.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<style type="text/css">
.heightClass {
min-height: 338px !important;
}
</style>
<body style="margin-top: 0px; margin-left: 0px;">
<div id="sample">
<script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script>
<script type="text/javascript">
//<![CDATA[
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
//]]>
$(document).on("focus" , ".nicEdit-selected" , function () {
var parentTag = $( this ).css("height" , "338px");
//$( this ).addClass("heightClass");
//alert(parentTag);
});
</script>
<textarea id="demo" cols="50" id="editor" name="editor" style="width:295px;" >
</textarea>
</div>
</body>
</html>
I am trying to have the web page as easy to use with the keyboard as with the mouse and need to be able to respond when a control receives and loses the focus. I've built a small plunk to illustrate this. I've used the event names from jquery as the documentation seemed to say that was the appropriate thing to do.
Tabbing through the screen to each button should show text saying which button has focus.
Here's the html
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-route.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body data-ng-controller="bbbb">
<input id="b1" type="button" value="button1">
<input id="b2" type="button" value="button2">
<input id="b3" type="button" value="button3">
<h2 ng-show="showb1">Button1 has focus</h2>
<h2 ng-show="showb2">Button2 has focus</h2>
<h2 ng-show="showb3">Button3 has focus</h2>
</body>
</html>
and the js
var app = angular.module('app', []);
var controllerId = 'bbbb';
app.controller('bbbb', ['$scope', function ($scope) {
$scope.showb1 = false;
$scope.showb2 = false;
$scope.showb3 = false;
var b1 = angular.element('#b1');
b1.on('focusin', function (event) {
$scope.showb1 = true;
});
b1.on('focusout', function (event) {
$scope.showb1 = false;
});
var b2 = angular.element('#b2');
b2.on('focusin', function (event) {
$scope.showb2 = true;
});
b2.on('focusout', function (event) {
$scope.showb2 = false;
});
var b3 = angular.element('#b3');
b3.on('focusin', function (event) {
$scope.showb3 = true;
});
b3.on('focusout', function (event) {
$scope.showb3 = false;
});
}
]);
Help greatly appreciated
Please see here: http://plnkr.co/edit/zOk0CJv0IdMb3GzvLxT5?p=preview
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-route.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body data-ng-controller="bbbb">
<input id="b1" type="button" value="button1" ng-focus="showb1 =true" ng-blur="showb1 =false">
<input id="b2" type="button" value="button2" ng-focus="showb2= true" ng-blur="showb2 =false">
<input id="b3" type="button" value="button3" ng-focus="showb3= true" ng-blur="showb3 =false">
<h2 ng-show="showb1">Button1 has focus</h2>
<h2 ng-show="showb2">Button2 has focus</h2>
<h2 ng-show="showb3">Button3 has focus</h2>
</body>
</html>
I have a website that contains an iframe. I want to track which button the user clicks inside the iframe and surface that information to the parent window. I looked into HTML5 PostMessage, but am unsure how I would tell the iframe where the parent is (line 3 in iframe.html). Do note that the parent and iframe have the same domain and protocol.
iframe.html
<script type="text/javascript">
var domain = window.location.protocol + '//' + window.location.hostname;
var parent = document.getElementById('parent').contentWindow; //what to do?
$('div').click( function() {
var message = $(this).text();
parent.postMessage(message,domain);
});
</script>
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
parent.html
<script type="text/javascript">
window.addEventListener('message', function(event) {
if(event.origin !== window.location.protocol + '//' + window.location.hostname;) {
return;
}
$('.message').html(event.data);
},false);
</script>
<div>
You have clicked on <span class="message"></span>
</div>
<iframe src="/iframe.html"></iframe>
I'm not sure how to do it in jQuery, however, here is a native way to communicate between parent and child frames in JavaScript.
The key code being:
var div = top.document.getElementById("topDiv");
Where top is the parent frame.
Parent.html
<!DOCTYPE html>
<html>
<head>
<title>Parent</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script>
function message() {
var child = document.getElementById("childFrame"),
div = child.contentWindow.document.getElementById("childDiv");
div.innerHTML = "TEXT";
}
function main() {
document.getElementById("messenger").addEventListener("click", function() {
message();
});
}
window.onload = main;
</script>
</head>
<body>
<iframe id="childFrame" src="child.html"></iframe>
<button id="messenger">Click Me</button>
<div id="topDiv"></div>
</body>
</html>
Child.html
<!DOCTYPE html>
<html>
<head>
<title>Child</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script>
function message() {
var div = top.document.getElementById("topDiv");
div.innerHTML = "TEXT";
}
function main() {
document.getElementById("messenger").addEventListener("click", function() {
message();
});
}
window.onload = main;
</script>
</head>
<body>
<div id="childDiv"></div>
<button id="messenger">Click Me</button>
</body>
</html>
When someone click on the text it change to red color and click on the other text return to black color.
I have make an example like below but how to make it shorter using for loop?
<html>
<head>
<title>My little test page</title>
</head>
<body id="body">
<div id="myid">Hello Here !!</div><br>
<div id="myid2">Hello There !!</div><br>
<div id="myid3">Hello !!</div><br>
......many div......
</body>
</html>
<script language="javascript">
function changeColor1() {
document.getElementById("myid").className = "red";
document.getElementById("myid2").className = "";
document.getElementById("myid3").className = "";
}
function changeColor2() {
document.getElementById("myid").className = "";
document.getElementById("myid2").className = "red";
document.getElementById("myid3").className = "";
}
function changeColor3() {
document.getElementById("myid").className = "";
document.getElementById("myid2").className = "";
document.getElementById("myid3").className = "red";
}
function init() {
document.getElementById("myid").onclick = changeColor1;
document.getElementById("myid2").onclick = changeColor2;
document.getElementById("myid3").onclick = changeColor3;
}
window.onload = init();
</script>
Add an attribute name to all the divs, like this
<div id='myid' name='colorchangingdiv[]'>Hello</div>
<div id='myid2' name='colorchangingdiv[]'>Hello</div>
....
Now in your init function
function init() {
var allDivs = document.getElementsByName('colorchangingdivs[]');
for( var i =0; i < allDivs.length; ++i )
{
allDivs[i].onClick = changeColor(this);
}
}
In your change color function
function changeColor( obj )
{
var allDivs = document.getElementsByName('colorchangingdivs[]');
for( var i =0; i < allDivs.length; ++i )
{
allDivs[i].style.color = '';
}
// Now set the color to the obj passed
obj.style.color = 'red';
}
Hope that helps.
Try this one.
<html>
<head>
<title>My little test page</title>
</head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
<script language="javascript">
$(".divid").click(function(e){
$(".divid").css('color', '');
$(this).css('color', 'red');
});
</script>
<body id="body">
<div id="myid" class="divid">Hello Here !!</div><br>
<div id="myid2" class="divid">Hello There !!</div><br>
<div id="myid3" class="divid">Hello !!</div><br>
......many div......
</body>
</html>
Example jsfiddle
<html>
<head>
<style>
.red{
color:red;
}
</style>
<title>My little test page</title>
<script type="text/javascript" src="jquery.js">
<script language="javascript">
//use jquery for change your color
$(document).ready(function(){
$(".myclass").click(function(){
$(".myclass").removeClass("red");
$(this).addClass("red");
});
});
</script>
</head>
<body id="body">
<div class="myclass">Hello Here !!</div><br>
<div class="myclass">Hello There !!</div><br>
<div class="myclass">Hello !!</div><br>
......many div......
</body>
</html>
For convenience, use classes instead of, or in addition to the id attributes of the div tags above:
<!DOCTYPE html>
<html>
<head>
<title>My little test page</title>
</head>
<body id="body">
<div class="mytext">Hello Here !!</div><br>
<div class="mytext">Hello There !!</div><br>
<div class="mytext">Hello !!</div><br>
<script>
var myselector = 'div.mytext';
function changeColor( e ){
var x=document.querySelectorAll(myselector);
for(i=0;i<x.length;i++){
x[i].style.color = '';
}
e.target.style.color = 'red';
}
function init(){
var x=document.querySelectorAll(myselector);
for(i=0;i<x.length;i++){
x[i].addEventListener("click", function(e){
changeColor(e);
});
}
}
window.onload = init();
</script>
</body>
</html>