I have this code:
$('*').mouseover(function() {
$('#log').text($('*').id);
});
When you mouse over any element on the page, I want #log to have the id of that element. Obviously the code above doesn't work... How do I do this?
$('*').mouseover(function() {
console.log($(this).attr('id'))
});
In almost all jQuery callbacks, "this" is the object on which the callback is being executed.
$('*').mouseover(function() {
$('#log').text($(this).attr('id'));
});
You can also use event.target
var $log = $("#log");
$('*').mouseover(function(event) {
$log.text($(event.target).attr('id'));
event.stopPropagation();
});
Related
I have code like this:
element(by.model("roleSelection.role")).element(by.cssContainingText('option', newRole)).click();//.then(function() {console.log('role click')})//;
where the options is loaded via a call to the server.
I can wait for the first element by doing this
browser.wait(function() {
return browser.isElementPresent(by.model("roleSelection.role")).then(function(present){
return present;
});}, 8000);
and it seems to work. But how can I wait until the "sub-element" is clickable.
I have tried this
browser.wait(function() {
return browser.isElementPresent(by.model("roleSelection.role")).then(function(present){
if (present) {
var elm = element(by.model("roleSelection.role"));
return elm.isElementPresent(by.cssContainingText('option', newRole)).then(function(subpresent) {
return subpresent;
});
}
}); }, 8000);
Have you tried clickable? Something along these lines
var EC = protractor.ExpectedConditions;
var select = element(by.model("roleSelection.role"))
var isClickable = EC.elementToBeClickable(select);
browser.wait(isClickable,5000); //now options should have been loaded by now
Well, try to this: https://angular.github.io/protractor/#/api?view=ExpectedConditions.prototype.elementToBeClickable
But, Please keep in mind, Protractor is suitable for angular webpages and interactions, and animations. For example ng-animate. So, it is not sure to working for example jquery, or other animates.
In this way:
onPrepare: function () {
// disable animations when testing to speed things up
var disableNgAnimate = function () {
angular.module('disableNgAnimate', []).run(function ($animate) {
$animate.enabled(false);
});
};
browser.addMockModule('disableNgAnimate', disableNgAnimate);
}
Or you can switch in script way in browser.executeScript().
Please see this link. It works only jquery animations.
If you not have animate problems. Use setTimeout() JS function.
appAPI.tabs.getActive returning empty object in firefox
appAPI.ready(function()
{
// retrieves the information for the active tab
appAPI.tabs.getActive(function(tabInfo) {
console.log(
'tabId: ' + tabInfo.tabId +
' tabUrl: ' + tabInfo.tabUrl
);
});
});
I tried above function/code appAPI.tabs.getActive in my extension, its working properly in Chrome but its not working in firefox, its giving me empty object {}. If somebody know whats the issue is please reply on this asap, thanks in advance
From experience, this only occurs when using appAPI.tabs API in a scope other than the background scope.
Please note that it is only supported in the background scope.
To use appAPI.tabs.getActive in other scopes, from the scope send a message to the background scope to obtain the tabInfo object, and then send the data back to the original scope, something like the following example in the popup scope:
popup.html:
function crossriderMain($) {
var tabInfo = null;
appAPI.message.addListener(function(msg) {
if (msg.type==='set-tabInfo') {
tabInfo = msg.tabInfo;
}
});
appAPI.message.toBackground({type:'get-tabInfo'});
}
background.js:
appAPI.ready(function() {
appAPI.message.addListener(function(msg) {
if (msg.type==='get-tabInfo') {
appAPI.tabs.getActive(function(tabInfo) {
appAPI.message.toPopup({type:'set-tabInfo', tabInfo:tabInfo});
});
}
});
});
I'm a beginner/intermediate level developer/programmer. I've got jQuery-UI-Tabs that I'm building in jQuery like so (they show up and function fine):
var paymentTabs = $('<div id="paytabs">');
...
var paymentTabList = $('<ul>');
paymentTabs.append(paymentTabList);
if($.inArray('check',options.methods) != -1){
paymentTabList.append('<li>Pay with an E-Check</li>');
paymentTabs.append(payByCheck);
}
if($.inArray('card',options.methods) != -1){
paymentTabList.append('<li>Pay with a Credit/Debit Card</li>');
paymentTabs.append(payByCard);
}
if($.inArray('code',options.methods) != -1){
paymentTabList.append('<li>Business Office Use Only</li>');
paymentTabs.append(payByCode);
}
paymentTabs.tabs({show: function(event, ui) {
item.currentMethod = ui.panel.id;
self._refreshCart();
}
});
paymentTabs.tabs({show: function(event, ui) {
item.currentMethod = ui.panel.id;
self._refreshCart();
}
});
Binding to them does not work:
$( "#paytabs" ).on( "tabsselect", function(event, ui) {
alert("tab has been clicked.");
});
Neither does this:
$( "#paytabs" ).bind( "tabsselect", function(event, ui) {
alert("tab has been clicked.");
});
I also tried tabsactivate instead of tabsselect. I tried selecting by class and by id. I tried selecting transverse and walking the DOM. Eventually, I'm going to use the function that I bind to the tab, to add a 3% fee to the billing total. I will also make this function change the JSON key, attribute "required" to "true" for a specified input element. This is critical for me to get this function bound... I really appreciate the help.
Look here: http://api.jqueryui.com/tabs/#event-activate
Bind to the tab 'activate' event. So when a tab is clicked the activate function is fired.
Like This:
$("#paytabs").tabs({
activate: function( event, ui ){
/* do something here */
}
});
or
$("#paytabs").on( "tabsactivate", function( event, ui ){
/* do something here */
});
Here is what worked for me. Aran's solution worked in part (thank you Aran).
Step One:
Bind to tabs activate as Aran described, but directly on the element as it is instantiated. There is no need for an element selector if you do this.
billing_div.append('<h3>Payment Information</h3>');
var paymentTabs = $('<div id="paytabs">').tabs({select: function( event, ui ) {alert("tab has been clicked.");}});
billing_div.append(paymentTabs);
Step Two:
Add classes manually/problematically. remember to include ui-tabs-selected only for the tab which tab is selected at page load.
var paymentTabList = $('<ul>').addClass('ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all');
paymentTabs.append(paymentTabList);
if($.inArray('check',options.methods) != -1){
paymentTabList.append('<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">Pay with an E-Check</li>');
paymentTabs.append(payByCheck);
}
if($.inArray('card',options.methods) != -1){
paymentTabList.append('<li class="ui-state-default ui-corner-top">Pay with a Credit/Debit Card</li>');
paymentTabs.append(payByCard);
}
if($.inArray('code',options.methods) != -1){
paymentTabList.append('<li class="ui-state-default ui-corner-top">Business Office Use Only</li>');
paymentTabs.append(payByCode);
}
I want to add fade-in animation for couple of widgets one after another.
I reviewed the doc, but it only does first fade-in.
$(myWidget1).fadeIn(new Function(){
public boolean f(Event e){
//tried to add the second fade-in for myWidget2, but no result
return true;
}
});
How do I achieve fade-in one after another in this way or, is there another way to do it?
Thanks!
Try this, using jQuery:
$(document).ready(function(){
var widgets = $('.widget');
var fader = function(widget_n){
if (widget_n < widgets.length) {
$(widgets.get(widget_n)).fadeIn('slow', function(){
fader(widget_n +1);
});
}
};
if (widgets.length > 0) {
fader(0);
}
});
Check my example here : http://gwtquery-plugins.googlecode.com/svn/branches/droppable_1_0/demo/DraughtsSample/DraughtsSample.html
I use the fadeIn GQuery method method to fade in each piece of the board. You can find the code there : http://code.google.com/p/gwtquery-plugins/source/browse/trunk/droppable/sample/src/main/java/gwtquery/plugins/droppable/client/draughtssample/CheckerBoard.java#116
Why dont you use the .each() function to loop through your "widgets".
var map = {
'mywidget1': '#mywidget1',
'mywidget2': '#mywidget2'
};
$.each(map, function(key, value) {
$(value).fadeIn(...);
});
or if they all have a something in common (i.e. class of tag combination etc.) this would be even easier.
See .each() jQuery API
You are overriding an incorrect method: f(Event) is used for events, change it by f():
$(myWidget1).fadeIn(new Function(){
public void f() {
$(myOtherWidget).fadeIn();
}
});
I have some troubles with jQuery.
I have a set of Divs with .square classes. Only one of them is supposed to have an .active class. This .active class may be activated/de-activated onClick.
Here is my code :
jQuery().ready(function() {
$(".square").not(".active").click(function() {
//initialize
$('.square').removeClass('active');
//activation
$(this).addClass('active');
// some action here...
});
$('.square.active').click(function() {
$(this).removeClass('active');
});
});
My problem is that the first function si called, even if I click on an active .square, as if the selector was not working. In fact, this seems to be due to the addClass('active') line...
Would you have an idea how to fix this ?
Thanks
Just to give something different from the other answers. Lonesomeday is correct in saying the function is bound to whatever they are at the start. This doesn't change.
The following code uses the live method of jQuery to keep on top of things. Live will always handle whatever the selector is referencing so it continually updates if you change your class. You can also dynamically add new divs with the square class and they will automatically have the handler too.
$(".square:not(.active)").live('click', function() {
$('.square').removeClass('active');
$(this).addClass('active');
});
$('.square.active').live('click', function() {
$(this).removeClass('active');
});
Example working: http://jsfiddle.net/jonathon/mxY3Y/
Note: I'm not saying this is how I would do it (depends exactly on your requirement) but it is just another way to look at things.
This is because the function is bound to elements that don't have the active class when you create them. You should bind to all .square elements and take differing actions depending on whether the element has the class active:
$(document).ready(function(){
$('.square').click(function(){
var clicked = $(this);
if (clicked.hasClass('active')) {
clicked.removeClass('active');
} else {
$('.square').removeClass('active');
clicked.addClass('active');
}
});
});