I am working on a javascript library, The library syntax will go as follows: tex(selector).function(specifier). Here is what I have so far:
(function(){
var tex = function(selector,context){
//code
},
tex.prototype = {
show: function () {
this.style.display = "inherit";
return this
}
};
window.tex = tex
})();
The problem I am having is how do I set this to the element. Does anyone know how I can do that the jQuery way?
Thank you all for your help.
Maybe try :
if (document.querySelectorAll(selector==null || undefined) {
//nothing there
} else {
tex = document.querySelectorAll(selector);
}
Related
Trying to convert a lot of jQuery and JS to an Angular controller so that it works the "NG" way. I've looked at the docs and it looks like I can setup a document ready function in Angular using something like angular.element(document).ready to initialize the jQuery variable. What I am confused on is "this" and it's place in the angular world. Anyone have an idea of where to start?
Here is a Pen of what I am trying to accomplish:
CodePen
And I know that there is ng-show/ng-hide and that ngAria shows up around 1.3 but I am just trying to grasp the basis for converting a lot of jQuery to angular.
Here is my current script:
$(document).ready(function() {
var hs1 = new hideShow('open1', 'close1');
var hs2 = new hideShow('open2', 'close2');
var hs3 = new hideShow('open3', 'close3');
var hs4 = new hideShow('open4', 'close4');
});
function hideShow(toggleID, closeID) {
this.$toggle = $('#' + toggleID);
this.$close = $('#' + closeID);
this.$region = $('#' + this.$toggle.attr('aria-controls'));
this.keys = {
enter: 13,
space: 32
};
this.toggleSpeed = 100;
this.bindHandlers();
}
hideShow.prototype.bindHandlers = function() {
var thisObj = this;
this.$toggle.click(function(e) {
thisObj.toggleRegion();
e.stopPropagation();
return false;
});
this.$close.click(function(e) {
thisObj.hideRegion();
e.stopPropagation();
return false;
});
}
hideShow.prototype.hideRegion = function() {
this.$region.hide().attr('aria-expanded', 'false');
this.$toggle.find('span').html('Show');
this.$toggle.focus();
}
hideShow.prototype.toggleRegion = function() {
var thisObj = this;
this.$region.slideToggle(this.toggleSpeed, function() {
if ($(this).attr('aria-expanded') == 'false') { // region is collapsed
$(this).attr('aria-expanded', 'true');
$(this).focus();
thisObj.$toggle.find('span').html('Hide');
} else {
$(this).attr('aria-expanded', 'false');
thisObj.$toggle.find('span').html('Show');
}
});
}
Any suggestions or examples are appreciated.
I have a masked input I'm trying to build and it works fine in Chrome, only in firefox it doesn't update my text field with the new value...
I receive no console errors neither so I'm unsure what the problem could be?
$('.new-Btn').bind("click", function () {
$('.html-btn').click();
});
$('.html-btn').change(function () {
var newval = $('.html-btn').val();
var nvstr = newval.substring(12, 25);
$('.new-Btn').html(nvstr);
});
http://jsfiddle.net/ykgXG/
The problem was with browser agents.Some browser displays full path name(chrome,opera,explorer) where as some does not(mozilla).
Here is the code:
var nvstr;
var newval;
$('.html-btn').on('change',function () {
newval = $('.html-btn').val();
if(!$.browser.mozilla){
nvstr = newval.substring(12, 25);
$('.new-Btn').html(nvstr);
}else{
alert(11)
$('.new-Btn').html(newval);
}
});
Here is a working demo:http://jsfiddle.net/ykgXG/8/
Tested in all the browsers and it works.
u shd use:
$('.new-Btn').bind("click", function () {
$('.html-btn').trigger('click');
});
$('.html-btn').change(function () {
var newval = $('.html-btn').val();
var nvstr = newval.substring(12, 25);
$('.new-Btn').html(nvstr);
});
What I am seeing is that your div text changes under Firefox 24. Check what your substring() function returns with the file that you're testing it with.
As my issue was with the fakepathprefix I used an if statement to fun a different function dependant on the browser.
if (/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) {
$('.new-Btn').bind("click", function () {
$('.html-btn').trigger('click');
});
$('.html-btn').change(function () {
var newval = $('.html-btn').val();
var nvstr = newval.substring(12, 25);
$('.new-Btn').html(nvstr);
});
} else {
$('.new-Btn').bind("click", function () {
$('.html-btn').trigger('click');
});
$('.html-btn').change(function () {
var newval = $('.html-btn').val();
$('.new-Btn').html(newval);
});
}
I have got a fully working js, but my problem is. I have do include it into a php file that generated by another programmer. The file is very huge and I can't rewrite everything.
In my js I use this: document.myform1.cid.options[i].selected = true;
But my problem that is the id of form is createquestion-form. And it has no name.
How could I replace myform1 to createquestion-form?
This is my full script:
function Search()
{
var SearchKeyWord=document.getElementById("SearchText").value;
var SelLength=document.myform1.cid.length;
for(var i=0; i<SelLength;i++)
{
var searched_text = document.myform1.cid.options[i].text;
var IsMatch = searched_text.search(SearchKeyWord);
if(IsMatch != -1)
{
document.myform1.cid.options[i].selected = true;
document.myform1.cid.options[i].style.color = 'red';
}
else
{
document.myform1.cid.options[i].style.color = 'black';
}
}
}
Just use document.getElementById
form = document.getElementById('createquestion-form');
Hi All I am trying to write both an if/else statement along with toggling an image. Basically my goal is to toggle an image (in this case with an id of soundonoff). However I can't seem to figure out where I am going wrong. The issue is the toggle works, but the detect of whether its muted or not does not work. (In my full code for example I have it switch innerHTML of various audio/video files, this is where document.getElementsByName('mymedia')[0] comes in. Any help would be tremendously appreciated I have spent about 4 hours working on this and can't seem to figure it out.
I should add that I do not know where to add an eventlistener for detectmute(), I tried to add it to my video, and to the button soundonoff but neither got working yet.
Here is my code:
function detectmute(){
if(document.getElementById('soundonoff').src == 'images/icons/soundoff.png'){
document.getElementsByName('mymedia')[0].muted = true;
}
else if(document.getElementById('soundonoff').src == 'images/icons/soundon.png'){
document.getElementsByName('mymedia')[0].muted = false;
}
$("#soundonoff").toggle(function(){
this.src = "images/icons/soundoff.png";
document.getElementsByName('mymedia')[0].muted = true;
}, function() {
this.src = "images/icons/soundon.png";
document.getElementsByName('mymedia')[0].muted = false;
});
}
Well I solved my own issue, Solution was the following:
$("#soundonoff").toggle(function(){
this.src = "images/icons/soundoff.png";
document.getElementsByName('mymedia')[0].muted = true;
$("#soundonoff").attr('name', 'soundoff');
}, function() {
this.src = "images/icons/soundon.png";
document.getElementsByName('mymedia')[0].muted = false;
$("#soundonoff").attr('name', 'soundon');
});
function detectmute(){
var soundstate = document.getElementById('soundonoff');
if (soundstate.name == "soundon")
{
document.getElementsByName('mymedia')[0].muted = false;
}
else if (soundstate.name == "soundoff")
{
document.getElementsByName('mymedia')[0].muted = true;
}
}
$('#soundonoff').on('click', function () {
var $this = $(this);
if ($this.attr('src') == 'images/icons/soundon.png') {
$this.attr('src', 'images/icons/soundoff.png').attr('data-muted', true);
} else {
$this.attr('src', 'images/icons/soundon.png').attr('data-muted', false);
}
});
Here is a demo: http://jsfiddle.net/jLvZW/3/ updated
You could also setup an object that converts one source to another:
var convert = {
'images/icons/soundon.png' : ['images/icons/soundoff.png', true],
'images/icons/soundoff.png' : ['images/icons/soundon.png', false]
};
$('#soundonoff').on('click', function () {
var $this = $(this);
$this.attr('src', convert[$this.attr('src')][0]).attr('data-muted', convert[$this.attr('src')][1]);
});
Here is a demo: http://jsfiddle.net/jLvZW/2/ Updated
I have some jQuery plugin that changes some elements, i need some event or jQuery plugin that trigger an event when some text input value changed.
I've downloaded jquery.textchange plugin, it is a good plugin but doesn't detect changes via external source.
#MSS -- Alright, this is a kludge but it works:
When I call boxWatcher() I set the value to 3,000 but you'd need to do it much more often, like maybe 100 or 300.
http://jsfiddle.net/N9zBA/8/
var theOldContent = $('#theID').val().trim();
var theNewContent = "";
function boxWatcher(milSecondsBetweenChecks) {
var theLoop = setInterval(function() {
theNewContent = $('#theID').val().trim();
if (theOldContent == theNewContent) {
return; //no change
}
clearInterval(theLoop);//stop looping
handleContentChange();
}, milSecondsBetweenChecks);
};
function handleContentChange() {
alert('content has changed');
//restart boxWatcher
theOldContent = theNewContent;//reset theOldContent
boxWatcher(3000);//3000 is about 3 seconds
}
function buttonClick() {
$('#theID').value = 'asd;lfikjasd;fkj';
}
$(document).ready(function() {
boxWatcher(3000);
})
try to set the old value into a global variable then fire onkeypress event on your text input and compare between old and new values of it. some thing like that
var oldvlaue = $('#myInput').val();
$('#myInput').keyup(function(){
if(oldvlaue!=$('#myInput').val().trim())
{
alert('text has been changed');
}
});
you test this example here
Edit
try to add an EventListner to your text input, I don't know more about it but you can check this Post it may help
Thanks to #Darin because of his/her solution I've marked as the answer, but i have made some small jQuery plugin to achieve the same work named 'txtChgMon'.
(function ($) {
$.fn.txtChgMon = function (func) {
var res = this.each(function () {
txts[0] = { t: this, f: func, oldT: $(this).val(), newT: '' };
});
if (!watchStarted) {
boxWatcher(200);
}
return res;
};
})(jQuery);
var txts = [];
var watchStarted = false;
function boxWatcher(milSecondsBetweenChecks) {
watchStarted = true;
var theLoop = setInterval(function () {
for (var i = 0; i < txts.length; i++) {
txts[i].newT = $(txts[i].t).val();
if (txts[i].newT == txts[i].oldT) {
return; //no change
}
clearInterval(theLoop); //stop looping
txts[i].f(txts[i], txts[i].oldT, txts[i].newT);
txts[i].oldT = $(txts[i].t).val();
boxWatcher(milSecondsBetweenChecks);
return;
}
}, milSecondsBetweenChecks);
}