My toggle button was working fine, but i made some tweaks to another part of my code and now it has stopped working. the reset button in the same panel also works fine. this is what i am doing-
$(document.getElementById('light')).toggle(function () {
$(document.getElementById('grid ')).css('backgroundColor ', '#000000');
$(document.getElementByClassName('circle')).css('borderColor', '# FFFF99 ');
}, function () {
$(document.getElementById('grid ')).css('backgroundColor ', '#c0c0c0 ');
$(document.getElementByClassName('circle ')).css('borderColor ', '#FAEBD7 ');
});
here is the jsfiddle: http://jsfiddle.net/riamirchi/yhb9A/84/
Thanks!
Though I don't get it right about what toogle-button stands for you I made some improvements to that part of your code:
$('#light').toggle(function () {
$('#grid ').css('backgroundColor ', '#000000');
$('.circle').css('borderColor', '# FFFF99 ');
}, function () {
$('#grid ').css('backgroundColor ', '#C0C0C0 ');
$('.circle ').css('borderColor ', '#FAEBD7 ');
});
$('#reset').click(function () {
$('#grid').css('backgroundColor ', '#C0C0C0');
$('.circle').each(function () {
$(this).css('backgroundColor', '#C0C0C0');
});
});
http://jsfiddle.net/yhb9A/87/
Related
I wonder how to test with OPA5 if a Dialog is successfully closed after pressing the corresponding button.
This is how I test if the dialog is open:
{
// ...
iShouldSeeTheSortDialog: function () {
return this.waitFor({
controlType: "sap.m.ViewSettingsDialog",
id: "sortDialog",
fragmentId: "sortFragment",
success: function () {
Opa5.assert.ok(true, "The sort dialog is open");
},
errorMessage: "Did not find the sort dialog control"
});
},
}
Now I'm looking for the exact opposite test case. I would like to search for the sortDialog and throw a success if it is not found anymore.
Could you please suggest a solution?
I found the answer myself, maybe it will be helpful for someone else.
If you want to check if a dialog has been closed but not destroyed, you can do it this way:
{
//..
iShouldNotSeeDialog: function () {
return this.waitFor({
id: "dialogID",
visible: false,
success: function (oDialog) {
Opa5.assert.notOk(oDialog.getVisible(), "Dialog is not visible -- OK");
},
errorMessage: "Checking Field: dialogID -- Assertion Failed"
});
}
}
If you want to check if a dialog has been destroyed, you can do this as follows:
{
//..
iShouldNotSeeDialog: function () {
return this.waitFor({
success: function () {
var bExists = (Opa5.getJQuery()("#" + "dialogID").length > 0);
Opa5.assert.notOk(bExists, "Dialog doesn't exist -- OK");
},
errorMessage: "-- Assertion Failed"
});
}
}
I'm doing the sharing in my instant game.
I'm firing next req from the game:
FBInstant.shareAsync(
{
intent: 'REQUEST',
image: 'image-encoded-here',
text: 'Edgar just played BASH for 9 points!',
data: { myReplayData: 'message sent' },
}
).then( function()
{
console.log("sharing is done");
})
.catch( function(err)
{
console.log('failed to share: ' + err.code + " :: " + err.message);
});
but I'm receiving 500-error:
https://www.facebook.com/games/quicksilver/share_score/?dpr=2 500 ()
failed to share: NETWORK_FAILURE ::
=====================================
in My particulare case problems was with encoded image.
As i remember, image to share should include all the encoded image stuff with "data:image/jpeg;base64,/" in front.
Look at your "image" parameter in the shareAsync(). You must send a Base64 url or it will go wrong.
Try removing the "," from the line
data: { myReplayData: 'message sent' },
data: { myReplayData: 'message sent' }
I have integrated branch.io deeplink in my ionic 3 application. I have successfully generated the link and the link opens up the app. But, I wanted to open a particular page instead of the homepage of the app.
So, I integrated the below code to the desired page:
dl(){
// only on devices
if (!this.platform.is('cordova')) { return }
const Branch = window['Branch'];
//only canonicalIdentifier is required
let properties = {
canonicalIdentifier: 'content/123',
canonicalUrl: 'https://example.com/content/123',
title: 'Content 123 Title',
contentDescription: 'Content 123 Description ' + Date.now(),
price: 12.12,
currency: 'GBD',
contentIndexingMode: 'private',
contentMetadata: {
custom: 'data',
testing: 123,
this_is: true
}
}
//create a branchUniversalObj variable to reference with other Branch methods
let branchUniversalObj = null
Branch.createBranchUniversalObject(properties).then(function (res) {
branchUniversalObj = res
//alert(JSON.stringify(res));
// optional fields
}).catch(function (err) {
alert('Error: ' + JSON.stringify(err))
})
let message = 'Check out this link'
Branch.initSession(function(data) {
if (data['+clicked_branch_link']) {
// read deep link data on click
alert('Deep Link Data: ' + JSON.stringify(data))
}
}).then(function(res) {
// create deep link
var analytics = {
channel: Date.now()
}
var properties = {}
branchUniversalObj.generateShortUrl(analytics, properties).then(function (res) {
alert('Response: ' + JSON.stringify(res.url))
}).catch(function (err) {
alert('Error: ' + JSON.stringify(err))
})
branchUniversalObj.onLinkShareResponse(function (res) {
alert('Goosebumps:' + JSON.stringify(res))
})
});
}
And I added the function to a button click. But, still it opens up the app home page when I click the created link.
It doesn't looks like you are using the correct setup for your deep link routing. Please reference this Branch documentation for best results: https://docs.branch.io/pages/deep-linking/routing/
Trying to add class to only selected paragraphs in WordPress Editor.
Added a button called 'Add stylish '<li>' where there is an item called 'Includes'. So my need is to add class to the selected '<p>' when 'Includes' is pressed. Any help will be really grateful. Thanks!
(function() {
tinymce.PluginManager.add('sanjog_custom_tinymce_button', function( editor, url ) {
editor.addButton( 'sanjog_custom_tinymce_button', {
title: 'Add stylish <li>',
type: 'menubutton',
fixedWidth: true,
icon: 'icon dashicons-menu',
menu: [
{
text: 'Includes',
onclick: function() {
tinyMCE.activeEditor.focus();
tinyMCE.activeEditor.dom.addClass(tinyMCE.activeEditor.selection.select('p'),'test');
}
},
]
});
});
})();
I am trying to implement an autocomplete list using the Ajax toolkit: AutoCompleteExtender
How to achieve the following behaviours using Ajax toolkit: AutoCompleteExtender?
Can provide any code examples also?
Like google search, when the autocomplete list if display base on the inputs. When the mouse is move out or focus on other area. The autocomplete list is still showing base on the input value.
If user enter abc and system display autocompletelist like abcd, abcde. When user move the mouse out and then click back the same input abc system should again display the autocomplete list.
Can anyone advise?
I personally prefer using jQuery UI Autocomplete.
Demo & Code:
jQuery UI Autocomplete
Sample JS Code:
$(function() {
function log( message ) {
$( "<div>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$( "#city" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "http://ws.geonames.org/searchJSON",
dataType: "jsonp",
data: {
featureClass: "P",
style: "full",
maxRows: 12,
name_startsWith: request.term
},
success: function( data ) {
response( $.map( data.geonames, function( item ) {
return {
label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
value: item.name
}
}));
}
});
},
minLength: 2,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.label :
"Nothing selected, input was " + this.value);
},
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
});
});
Your first point is the ajax ACE (Auto Complete Extender) default behavior.
the second one, you can use jquery .mouseleave() and .mouseenter() event to shave your contextKey in a hidden field on mouse leave and fill it again in mouse enter.