I want to remove YES and NO tool tip from a custom dialog box after the dialog is displayed.
The problem is that I am unable to get the object of the YES and NO buttons by ID or attribute name due to not being able to remove the "title" attribute".
Here is what the customDialog function looks like
function dialog_customDialog(dialogType, callingWindow,msg, showThird, firstCBF, secondCBF, thirdCBF, firstText, secondText, thirdText, dialogTimeout, timeoutCBF) {
if (dialogTimeout > 0) {
yesCallback = function() {processCallback(firstCBF);};
noCallback = function() {processCallback(secondCBF);};
cancelCallback = function() {processCallback(thirdCBF);};
}
else {
yesCallback = firstCBF;
noCallback = secondCBF;
cancelCallback = thirdCBF;
}
timeoutCallback = timeoutCBF
if (showThird)
buttonSet = 3;
else
buttonSet = 2;
if (firstText) {
var ybt = document.getElementById('button_YES');
if (ybt) {
if (!yesText) yesText = ybt.innerHTML;
ybt.innerHTML = firstText;
}
}
if (secondText) {
var nbt = document.getElementById('button_NO');
if (nbt) {
if (!noText) noText = nbt.innerHTML;
nbt.innerHTML = secondText;
}
}
if (thirdText) {
var cbt = document.getElementById('button_CANCEL');
if (cbt) {
if (!cancelText) cancelText = cbt.innerHTML;
cbt.innerHTML = thirdText;
}
}
if(!dialogType) {
displayDialog(callingWindow,msg, 'questImg', 'Question',buttonSet,firstText,secondText,thirdText,dialogTimeout);
}
else if('warning' == dialogType.toLowerCase()){
displayDialog(callingWindow,msg, 'warnImg', 'Warning',buttonSet,firstText,secondText,thirdText,dialogTimeout);
}
else if('information' == dialogType.toLowerCase()){
displayDialog(callingWindow,msg, 'infoImg', 'Information',buttonSet,firstText,secondText,thirdText,dialogTimeout);
}
else if('information' == dialogType.toLowerCase()){
displayDialog(callingWindow,msg, 'errorImg', 'Error',buttonSet,firstText,secondText,thirdText,dialogTimeout);
}
else{
displayDialog(callingWindow,msg, 'questImg', 'Question',buttonSet,firstText,secondText,thirdText,dialogTimeout);
}
}
After the dialog is displayed i am trying to hide the tool tip. Here is the code.
var yesBtn= $("#button_YES");
yesBtn.removeAttr("title");
The problem is yesBtn object is empty. Here is how the HTML code for the dialog button looks like:
Related
I'm using a plugin which makes the text fade in and out in wordpress, and I'm trying to change the code as it goes from white to black, I want it to go from white to transparent, tried to change the fade in and fade out codes, but didn't work
here is the JS
var FadeIn_FadeInterval;
window.onload = FadeIn_FadeRotate
var FadeIn_Links;
var FadeIn_Titles;
var FadeIn_Cursor = 0;
var FadeIn_Max;
function FadeIn_FadeRotate()
{
FadeIn_FadeInterval = setInterval(FadeIn_Ontimer, 10);
FadeIn_Links = new Array();
FadeIn_Titles = new Array();
FadeIn_SetFadeLinks();
FadeIn_Max = FadeIn_Links.length-1;
FadeIn_SetFadeLink();
}
function FadeIn_SetFadeLink() {
var ilink = document.getElementById("FadeIn_Link");
ilink.innerHTML = FadeIn_Titles[FadeIn_Cursor];
ilink.href = FadeIn_Links[FadeIn_Cursor];
}
function FadeIn_Ontimer() {
if (FadeIn_bFadeOutt) {
FadeIn_Fade+=FadeIn_FadeStep;
if (FadeIn_Fade>FadeIn_FadeOut) {
FadeIn_Cursor++;
if (FadeIn_Cursor>FadeIn_Max)
FadeIn_Cursor=0;
FadeIn_SetFadeLink();
FadeIn_bFadeOutt = false;
}
} else {
FadeIn_Fade-=FadeIn_FadeStep;
if (FadeIn_Fade<FadeIn_FadeIn) {
clearInterval(FadeIn_FadeInterval);
setTimeout(Faderesume, FadeIn_FadeWait);
FadeIn_bFadeOutt=true;
}
}
var ilink = document.getElementById("FadeIn_Link");
if ((FadeIn_Fade<FadeIn_FadeOut)&&(FadeIn_Fade>FadeIn_FadeIn))
ilink.style.color = "#" + ToHex(FadeIn_Fade);
}
function Faderesume() {
FadeIn_FadeInterval = setInterval(FadeIn_Ontimer, 10);
}
function ToHex(strValue) {
try {
var result= (parseInt(strValue).toString(16));
while (result.length !=2)
result= ("0" +result);
result = result + result + result;
//alert(result);
return result.toUpperCase();
}
catch(e)
{
}
}
and this is the php code for it
and the codes are as follows
Fade out : 255
Fade in: 0
fade: 0
I've tried to change the numbers but it stops working
How can I adjust the size of scanned image in dwtcontrolContainer div? Because when I scroll down the screen, the selected area never follows the mouse and select an area above the mouse click.
Bellow is my AcquireImage function:
function AcquireImage() {
try {
if (DWObject) {
var _obj = {};
_obj.IfShowUI = false;
_obj.PixelType = 0;
_obj.Resolution = 300;
_obj.IfFeederEnabled = true;
_obj.IfDuplexEnabled = false;
_obj.IfDisableSourceAfterAcquire = true; // Scanner source will be disabled/closed automatically after the scan.
_obj.Brightness = 10000;
_obj.MaxImagesInBuffer = 3;
_obj.PageSize = 0;
_obj.Contrast = 1000;
DWObject.SelectSourceByIndex(document.getElementById("rdlScanner").selectedIndex);
DWObject.OpenSource();
DWObject.AcquireImage(_obj);
DWObject.SetViewMode(-1, -1);
DWObject.CurrentImageIndexInBuffer = 0;
updatePageInfo();
}
}
catch (err) {
alert("Error: " + err.message);
}
}
I found http://developer.dynamsoft.com/dwt/dynamic-web-twain-how-to-resize-the-viewer-automatically but even configure the .js dynamsoft.webtwain.config.js doesn't work
Your link is about how to change the size of the viewer, not the image size. Here I changed your viewer size to 600x800:
function AcquireImage() {
try {
if (DWObject) {
DWObject.Width = 600; // viewer width
DWObject.Height = 800; // viewer height
var _obj = {};
_obj.IfShowUI = false;
_obj.PixelType = 0;
_obj.Resolution = 300;
_obj.IfFeederEnabled = true;
_obj.IfDuplexEnabled = false;
_obj.IfDisableSourceAfterAcquire = true; // Scanner source will be disabled/closed automatically after the scan.
_obj.Brightness = 10000;
_obj.MaxImagesInBuffer = 3;
_obj.PageSize = 0;
_obj.Contrast = 1000;
DWObject.SelectSourceByIndex(document.getElementById("rdlScanner").selectedIndex);
DWObject.OpenSource();
DWObject.AcquireImage(_obj);
DWObject.SetViewMode(-1, -1);
DWObject.CurrentImageIndexInBuffer = 0;
updatePageInfo();
}
}
catch (err) {
alert("Error: " + err.message);
}
}
If you want to change the image size, visit this link: http://developer.dynamsoft.com/dwt/changeimagesize.
I created two buttons to change the image size:
function small() {
var DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
DWObject.ChangeImageSize(0, 300, 400, EnumDWT_InterpolationMethod.IM_NEARESTNEIGHBOUR);
}
function big() {
var DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
DWObject.ChangeImageSize(0, 600, 800, EnumDWT_InterpolationMethod.IM_NEARESTNEIGHBOUR);
}
I was implementing some audio files today in my Javascript and it works fine. But
I noticed that with each subsequent click the sound gets louder. I alreadio used the "Audio.volume" method but no luck.
My Code:
var AppController = (function () {
var correctItem, secondItem, thirdItem, selectedItems, selectedItemsShuffled;
var rotateImage = function() {
var i = 0;
var randomNumbers = createThreeRandomNumbers();
var interval = window.setInterval(function () {
i++;
document.getElementById("imageToRotate").src= "img/" + items.images[i].imageLink;
if (i === items.images.length -1) {
i = -1;
}
}, 125);
var clearData = function () {
correctItem = "";
secondItem = "";
thirdItem = "";
selectedItems = "";
selectedItemsShuffled = "";
removeNodeChildren("button-1");
removeNodeChildren("button-2");
removeNodeChildren("button-3");
};
var removeNodeChildren = function (obj) {
var myNode = document.getElementById(obj);
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
};
var resetGame = function () {
clearData();
document.getElementById("buttonWrapper").classList.remove("show");
rotateImage();
}
document.getElementById("imageToRotate").addEventListener("click", function (e) {
// select 3 items
correctItem = getSelectedItemDetails(e);
secondItem = getRandomItem(correctItem);
thirdItem = getSecondRandomItem(correctItem, secondItem);
selectedItems = [correctItem, secondItem, thirdItem];
selectedItemsShuffled = shuffleArray(selectedItems);
// create the numbers 1 to 3 randomly
var order = createThreeRandomNumbers();
// remove the rotating effect
clearInterval(interval);
// set the images to the buttons in a random order.
setItemsToButtons(order, selectedItemsShuffled);
//show the buttons
showButtons();
// Create an event which triggers when a button is clicked.
document.getElementById("buttonWrapper").addEventListener("click", function(e) {
var valueOfButtonPressed = e.srcElement.innerText.toLowerCase();
var clickedButton = e.srcElement.id;
if (valueOfButtonPressed === correctItem) {
document.getElementById(clickedButton).innerHTML = e.srcElement.innerText.toLowerCase() + '<span class="icon"><i class="fa fa-check green" aria-hidden="true"></i></span>';
if (!audio) {
var audio = new Audio("audio/correct.mp3");
}
audio.play();
audio.volume = 0.5;
setTimeout(resetGame, 5000);
} else {
document.getElementById(clickedButton).innerHTML = e.srcElement.innerText.toLowerCase() + '<span class="icon"><i class="fa fa-times red" aria-hidden="true"></i></span>';
if (!audio) {
var audio = new Audio("audio/wrong.mp3");
}
audio.play();
audio.volume = 0.5;
setTimeout(resetGame, 5000);
}
});
});
};
// 1: hide the buttons
hidebuttons();
// 2: Replace the title
replaceTitle("Animals");
// 3: set up image rotation until it's clicked.
rotateImage();
})();
Any help will be much appreciated. Cheers!
I'm fairly certain the reason is that you're making a new Audio object with every single click.
Instead of doing this with every click:
var audio = new Audio("audio/correct.mp3");
do a check to see if audio already exists. if it does, then simply do audio.play(). If it does not, THEN you make a new audio object.
I'm trying to get the value of an attribute for each element with a class name.
Here is my code:
var textareaId;
$(document).ready(function () {
textareaId = $('#tiny_mce_block').find('textarea').attr('id'); //
ckeditor_init();
});
function ckeditor_init() {
CKEDITOR.replace(textareaId, {
allowedContent: true,
on: {
instanceReady: function (evt) {
var editor = this;
var data = editor.getData();
var body = $(editor.document.getBody());
jwplayer("video_block_sous_titres").onTime(function (event) {
$.each(**SELECT CLASS .ST**, function () { // HOW SELECT ELEMENTS WHERE THE CLASS IS 'st'
var d = SELECT DATA-TIME-START ; // HOW GET CONTENT OF ATTRIBUTE NAMED 'data-time-start'
var f = SELECT DATA-TIME-END; // HOW GET CONTENT OF ATTRIBUTE NAMED 'data-time-end'
if (d <= event.position && event.position <= f) {
if ($(this).attr("class") !== "active") {
$(".st").removeClass("active"); // HOW REMOVE THE CLASS 'active'
$(this).addClass("active"); // HOW ADD THE CLASS 'active'
}
} else {
$(this).removeClass("active"); // HOW REMOVE THE CLASS 'active'
}
});
});
}
}
});
}
In my textarea I have this:
<span class="st" id="1" data-time-start="0.29" data-time-end="1.259" data-time-moy="0.1938">mardi </span>
<span class="st" id="2" data-time-start="2.048" data-time-end="5.406" data-time-moy="0.10832258064516">qualité sécurité efficacité </span>
First question :
In my loop where JWPlayer is called, How can I select for each element which have Class .st, the value of attribute named data-time-start and data-time-end ?
Second question:
After that, How to add or remove class active to this .st (with which method ?) ?
I tried to get the content of attribute like that but no way:
var st = el.find('#20');
console.log(st.getAttribute('data-time-start'));
MY FIDDLE : http://jsfiddle.net/B4yGJ/415/
Thanks for your help !
I resolved my problem with this :
function jwplayer_underligne_st() {
jwplayer("video_block_sous_titres").onTime(function (evt) {
//var st = $(CKEDITOR.instances[textareaId].window.getFrame().$).contents().find('.word');
var st = $(CKEDITOR.instances[textareaId].window.getFrame().$).contents().find('.st');
$.each(st, function () {
$this = $(this);
var d = $this.attr("data-time-start");
var f = $this.attr("data-time-end");
if (d <= evt.position && evt.position <= f) {
if ($this.attr("class") !== "active") {
$this.addClass("active");
}
} else {
$this.removeClass("active");
}
});
});
}
What I want to do is, find all possible actions (click , hover, etc) on each element id on a web page.
Below is my effort towards it:
function executeInteractions($) {
for (var interaction_count = 0; interaction_count < interactions.length; interaction_count++) {
var obj = interactions[interaction_count];
for (var event_count = 0; event_count < obj.events.length; event_count++) {
(function(elem, event_name, e_count, i_count, t_i_count) {
setTimeout(function() {
elem.trigger(event_name);
var sendData = {id : elem.attr('id') , event_n: event_name }
&.post("link#",sendData)
setTimeout(function() {
}
}, 10);
if (i_count + 1 >= t_i_count) {
window.interactionsComplete = true;
}
}, 500 * i_count);
}(obj.item, obj.events[event_count], event_count, interaction_count, interactions.length));
}
}
}
function findInteractions($) {
$(document).click(function(e) {
e.preventDefault();
});
$(document).submit(function(e) {
e.preventDefault();
});
var node, toBeProcessed = new Array;
toBeProcessed.push($('body')[0]);
while (toBeProcessed.length) {
node = $(toBeProcessed.pop());
var eventObject = node.data('events');
if (eventObject) {
var events = [];
for (var e in eventObject) {
events.push(e);
}
interactions.push({
'item': node,
'events': events
});
}
var childrens = node.children();
if (childrens && childrens.length > 0) {
for (var i = 0; i < childrens.length; ++i) {
toBeProcessed.push(childrens[i]);
}
}
}
}
window.interactions = [];
When the post request is received at the server end, I get lot of null values for id.
Can someone help me out here, or may be suggest any other efficient method to capture all possible actions on id elements on a web page.
You can apply unique class to each attribute on page and then write .click()/.mouseover() JQuery event on it.
HTML:
<p class="uniqueClass">1st para</p>
<p class="uniqueClass">2nd para</p>
JQuery code:
<script>
$( ".uniqueClass" ).click(function() {
alert("Clicked");
});
</script>
For mouse over, you can use .mouseover() function like:
<script>
$( ".uniqueClass" ).mouseover(function() {
alert("Mouse Over");
});
</script>