Here is my clickable image in html
<img title="Sans titre." src="upload/docs/image/png/2014-10/sans_titre.png" alt="Sans titre" width="964" height="260" usemap="#map" />
<map name="map">
<area shape="rect" coords="545,45,567,65" href="www.google.fr" alt="txte alternatif" target="_parent" /> </map>
I'm looking how to get the click result into a popup and not in the current window, nor in a new tab.
Any idea ?
I think that you have to use jquery like this:
$(document).ready(function() {
$('img').on('click', function() {
window.alert("yourUrl");
});
});
That way when you click the img it will alert a popup with yourUrl in it, indeed you have to change the yourUrl string in your URL.
You can communicate with popup windows by keeping a reference of the window you opened. For example, this code opens a popup window and writes to it - you can also easily call methods in the popup window using popupReference.methodName (window scope).
Here is a simple example to help get you going:
html
open
<br/>
<input type="text" id="somethingToSend"></input>send to popuop
js
(function () {
var popupReference = null;
document.getElementById('popupopener').addEventListener('click', function () {
popupReference = window.open("", null, "height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
});
document.getElementById('popupwriter').addEventListener('click', function () {
popupReference.document.write('<br/>' + document.getElementById('somethingToSend').value);
});
})();
all together:
<html>
<body>
open
<br/>
<input type="text" id="somethingToSend"></input>send to popuop
<script>
(function () {
var popupReference = null;
document.getElementById('popupopener').addEventListener('click', function () {
popupReference = window.open("", null, "height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
});
document.getElementById('popupwriter').addEventListener('click', function () {
popupReference.document.write('<br/>' + document.getElementById('somethingToSend').value);
});
})();
</script>
</body>
</html>
Related
I'd like to hide my page's navigation when video is playing, just like the play button does.
Here's the script that succesfully hides the play button:
<script>
$('.vid').parent().click(function () {
if($(this).children(".vid").get(0).paused){
$(this).children(".vid").get(0).play();
$(this).children(".playpause").fadeOut();
}else{
$(this).children(".vid").get(0).pause();
$(this).children(".playpause").fadeIn();
}
});
</script>
And this script I tried to hide my navigation bar with:
<script>
function vidplay() {
var video = document.getElementById(".vid");
var button = document.getElementById(".playpause");
if (video.paused) {
video.play();
$(".navbar").hide();
</script>
Here's link to my site
Try using the jQuery .toggle() function;
$('.vid').parent().click(function () {
$(".navbar").toggle();
});
You didn't close your function and if statement
<script>
function vidplay() {
var video = document.getElementById(".vid");
var button = document.getElementById(".playpause");
if (video.paused) {
video.play();
$(".navbar").hide();
}
}
</script>
I'm trying to open a new tab in Google Chrome Extension. I've simplified my test case to this HTML:
<a id="link" href="http://www.example.com">example</a>
Here's code that I've:
$('#link').click(function () {
chrome.browserAction.onClicked.addListener(function (activeTab) {
var newURL = "http://www.youtube.com/watch?v=oHg5SJYRHA0";
chrome.tabs.create({ url: newURL });
});
});
I found the answer chrome.browserAction.onClicked.addListener in this thread:
Google Chrome Extensions - Open New Tab when clicking a toolbar icon
But this doesn't work when I click my link and I don't understand how to use chrome.browserAction.onClicked.addListener in my case.
Any help appreciated.
In your popup.js
$(document).ready(function(){
$('body').on('click', 'a', function(){
chrome.tabs.create({url: $(this).attr('href')});
return false;
});
});
You can just add attribute target="_blank" to the links in your popup.html.
<a id="link" href="http://www.example.com" target="_blank">example</a>
I found answer myself:
$('#link').click(function () {
var newURL = "http://www.youtube.com/watch?v=oHg5SJYRHA0";
chrome.tabs.create({ url: newURL });
});
No need for chrome.browserAction.onClicked.addListener.
I've created a Browser Extension for Chrome. I have added an HTML Table to the browser_action.html as a Popup as shown below.
What I want is, when I click on a Table Cell, it should take me to a link. Different links when clicked on different cells.
This is part of my code :
<tr>
<td class="tg-z3w6 hvr-underline-from-center">TEST</td>
<td class="tg-ges6">2715</td>
</tr>
But it doesn't work. Any idea why? or a workaround for this issue?
In your popup.html assuming you are using jquery-
$(document).ready(function(){
$('body').on('click', 'a', function(){
chrome.tabs.create({url: $(this).attr('href')});
return false;
});
});
Here is my solution for my own question.
Create popup.js and link it in the page:
<script src="popup.js" ></script>
Add the following code to popup.js:
document.addEventListener('DOMContentLoaded', function () {
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
(function () {
var ln = links[i];
var location = ln.href;
ln.onclick = function () {
chrome.tabs.create({active: true, url: location});
};
})();
}
});
That's all, links should work after that.
TEST should be between <a>and </a>.
it's so easy you just need to add target="#" to your a tag
like
<td class="tg-z3w6 hvr-underline-from-center"><a href="http://ew/Environment/Detail?envid=2715" target="#" ></a>TEST</td>
I want to disable my image when I click the toggle button. I think I made the code right but it doesn't work fine. When the toggle is set to true then I click the image it should alert 'test' and when the toggle is set to false then the image is disabled so no alert will show.
But my problem is either true or false when I click the button it's alert test. What is wrong?
var app = angular.module('main', []).
controller('DemoCtrl', function($scope, $filter) {
$scope.isEnabled=true;
$scope.test = function() {
alert('test');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="main" ng-controller="DemoCtrl">
<h1>Image disable</h1>
<img src="http://s7.postimg.org/w7w78jgjf/check_box_1.png" alt="Add" height="25" width="25" ng-disabled="!isEnabled" ng-click="test()"></img>
<br/>
<button title="Toggle" ng-click="isEnabled = !isEnabled">toggle</button>
{{isEnabled}}
</body>
ng-click will be triggered even there is a ng-disabled for img elements.
A simple solution is to change your ng-click to check the parameter
<img src="http://s7.postimg.org/w7w78jgjf/check_box_1.png" alt="Add" height="25" width="25" ng-disabled="!isEnabled" ng-click="!isEnabled || test()"></img>
Do this in controller.You don't have add anything new in your Html
var app = angular.module('main', []).
controller('DemoCtrl', function($scope, $filter) {
$scope.isEnabled=true;
$scope.test = function() {
if(!$scope.isEnabled) return;
alert('test');
}
});
I've got a jQuery code, which
$("a.reply").click(function() {
//code
});
When I click the link with .reply class the first time, nothing happens. The second time I click, the code inside the click function works.
The link is being inserted on the page using PHP from a mysql database. so it's not being inserted dynamically.
Why is this happening? Any solution?
The BadASS Code:
$(function(){
//TextArea Max Width
var textmaxwidth = $('#wrapper').css('width');
//Initialize Focus ids To Different Initially
var oldcommentid = -1;
var newcommentid = -2;
//End Of initialization
$("a.reply").click(function() {
newcommentid = $(this).attr('id');
if (newcommentid == oldcommentid)
{
oldcommentid=newcommentid;
$("#comment_body").focus();
}
else
{
$('#comment_form').fadeOut(0, function(){$(this).remove()});
var commetformcode = $('<form id="comment_form" action="post_comment.php" method="post"><textarea name="comment_body" id="comment_body" class="added_comment_body" rows="2"></textarea> <input type="hidden" name="parent_id" id="parent_id" value="0"/> <div id="submit_button"> <input type="submit" value="Share"/><input type="button" id="cancelbutton" value="Cancel"/></div></form>');
commetformcode.hide().insertAfter($(this)).fadeIn(300);
//
var id = $(this).attr("id");
$("#parent_id").attr("value", id);
oldcommentid=newcommentid;
//dynamicformcreation function
dynarun();
//
}
return false;
});
dynarun();
function dynarun()
{
//Form Re-Run Functions
$('#comment_body').elastic();
texthover();
$("#comment_form input, select, button").uniform();
textareasizer();
$("#comment_body").focus();
$("abbr.timestamp").timeago();
return false;
}
//TextArea Resizer Function
function textareasizer(){$("#comment_body").css('max-width', textmaxwidth);return false;}
//Other Miscellaneous Functions
$('.comment-holder').hover(
function(event) {
$(this).addClass('highlight');
},
function(event) {
$('.comment-holder').removeClass('highlight');
}
);
function texthover()
{
$('.added_comment_body').hover(
function(event) {
$(this).parent().parent().addClass('highlight');
},
function(event) {
$('.comment-holder').removeClass('highlight');
}
);
return false;
}
});
This is a longshot, but are you running some sort of tracking script? Like webtrends or coremetrics (or even some of your own script, that's globally looking for all clicks)? I ran into a similar problem a while ago, where the initial-click was being captured by coremetrics. Just a thought.
Does it still happen if you comment out all your code and simply have an alert("hi") inside the click function?
Update
I think Sarfaz has the right idea, but I would use the document ready function like so
$(document).ready(function(){
$("a.reply").click(function() {
//code
});
});
I just ran into same problem and I resolved my problem by removing:
<script src="bootstrap.js"></script>
you can use bootstrap.min.js
Use Inline CSS for hiding div and use JS/jQuery to show . This way Jquery Click Event will Fire On First Click
<div class="about-block">
<div class="title">About us</div>
<div class="" id="content-text" style="display:none;">
<p>Show me.</p>
</div>
</div>
<script>
var x = document.getElementById("content-text");
jQuery( '.about-block' ).click(function() {
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
});
</script>