So I have this nifty little if else statement prepared for i.e9 being a zombie browser that doesn't support things like css3 animations (generally) this is the if statement ....
if ((old_ie > -1) || (new_ie > -1)) {
ms_ie = true;
}
if (ms_ie) {
} else {
}
$('.submenu-ctn').fadeTo(3000, 1);
I am trying to fit this script into the if else statement...
$(document).ready(function() {
$("body").on("click", ".slide", function(e) {
e.preventDefault();
$("#mission,#overview,#music,#potential,#people,#expression,#ethos,#cpd,#workshop,#team,#referrals,#local-links,#family,#mental,#palliative,#autism,#schools,#dementia,#private,#acreditations,#definitions,#research,#contact,#email,#phone,#contact-form,#finley,#councelling,#music-performance,#community-music,.slides").addClass("bounceOutUp");
var that = this;
setTimeout(function() {
console.log($("#tam-content").load($(that).data("url") + ' ' + $(that).data("target")));
$.getScript("js/slider/slider-animations.js");
}, 1000);
});
});
so that it looks like this ....
if ((old_ie > -1) || (new_ie > -1)) {
ms_ie = true;
}
if (ms_ie) {
$("body").on("click", ".slide", function(e) {
e.preventDefault();
var that = this;
setTimeout(function() {
console.log($("#tam-content").load($(that).data("url") + ' ' + $(that).data("target")));
$.getScript("js/slider/slider-animations.js");
}, 1000);
});
} else {
$("body").on("click", ".slide", function(e) {
e.preventDefault();
$("#mission,#overview,#music,#potential,#people,#expression,#ethos,#cpd,#workshop,#team,#referrals,#local-links,#family,#mental,#palliative,#autism,#schools,#dementia,#private,#acreditations,#definitions,#research,#contact,#email,#phone,#contact-form,#finley,#councelling,#music-performance,#community-music,.slides").addClass("bounceOutUp");
var that = this;
setTimeout(function() {
console.log($("#tam-content").load($(that).data("url") + ' ' + $(that).data("target")));
$.getScript("js/slider/slider-animations.js");
}, 1000);
});
But for some reason it doesn't work.. I took out the document.ready bit and i don't think that is the problem but unsure.. Can someone help ?
HOOORAY !!
So basically this is the solution, the closing braces needed to be inside the if and else parts that are now split naturally....
if ((old_ie > -1) || (new_ie > -1)) {
ms_ie = true;
}
if ( ms_ie ) {
$("body").on("click", ".slide", function(e){
e.preventDefault();
var that = this;
setTimeout(function() {
console.log($("#tam-content").load($(that).data("url") + ' ' + $(that).data("target")));
$.getScript("js/slider/slider-animations.js");
}, 1000);
});
}else{
$("body").on("click", ".slide", function(e){
e.preventDefault();
$("#mission,#overview,#music,#potential,#people,#expression,#ethos,#cpd,#workshop,#team,#referrals,#local-links,#family,#mental,#palliative,#autism,#schools,#dementia,#private,#acreditations,#definitions,#research,#contact,#email,#phone,#contact-form,#finley,#councelling,#music-performance,#community-music,.slides").addClass("bounceOutUp");
var that = this;
setTimeout(function() {
console.log($("#tam-content").load($(that).data("url") + ' ' + $(that).data("target")));
$.getScript("js/slider/slider-animations.js");
}, 1000);
});
}
This is a great little method of running browser specific code, you should check it out!
Related
I have a textbox which I use for filtering gridview. IT filters properly whenever I add proper text. But when I dont add proper text what I want is to show some alert as, Invalid Record.
Below is my code
$(function () {
$('.field-style').each(function (i) {
$(this).quicksearch("[id*=grdSapDetails] tr:not(:has(th))", {
'testQuery': function (query, txt, row) {
return $(row).children(":eq(" + i + ")").text().toLowerCase().indexOf(query[0].toLowerCase()) != -1;
}
});
});
});
Please suggest what to do
UPDATE
I have added my alert message in noResults like below in quicksearch.js but still it is not giving alert.
var timeout, cache, rowcache, jq_results, val = '', e = this, options = $.extend({
delay: 100,
selector: null,
stripeRows: null,
loader: null,
noResults: 'tr#noresults',
matchedResultsCount: 0,
bind: 'keyup',
onBefore: function () {
return;
},
You can use the Jquery to search the Grid View and based on the Row Filter count you can show the alert message:
function SearchGrid(txtSearchSAP, grdSapDetails) {
if ($("[id *=" + txtSearchSAP + " ]").val() != "") {
var count = 0;
$("[id *=" + grdSapDetails + " ]").children
('tbody').children('tr').each(function () {
$(this).show();
});
$("[id *=" + grdSapDetails + " ]").children
('tbody').children('tr').each(function () {
var match = false;
$(this).children('td').each(function () {
if ($(this).text().toUpperCase().indexOf($("[id *=" +
txtSearchSAP + " ]").val().toUpperCase()) > -1) {
match = true;
count++;
return false;
}
});
if (match) {
$(this).show();
$(this).children('th').show();
}
else {
$(this).hide();
$(this).children('th').show();
}
});
$("[id *=" + grdSapDetails + " ]").children('tbody').
children('tr').each(function (index) {
if (index == 0)
{
$(this).show();
}
});
if(count==0)
{
alert("No Matching Records");
}
}
else {
$("[id *=" + grdSapDetails + " ]").children('tbody').
children('tr').each(function () {
$(this).show();
count=0;
});
}
}
$(document).on("keyup", function () {
SearchGrid('txtSearchSAP', 'grdSapDetails');
});
Here is the working Fiddle
I can't understand how are you merging server side and client side code.
You are talking about server control (GridView) so you can use the EmptyDataText property.
https://msdn.microsoft.com/it-it/library/system.web.ui.webcontrols.gridview.emptydatatext(v=vs.110).aspx
Client side you can work on document ready: counting visible rows and showing a message.
I have on click jquery that submits ajax request.
There are no forms.
I'd like keyboard ENTER to be used also to submit ajax request.
I've allot of these buttons, this confuses me as I cannot simply do:
$('#myForm input:text').keypress(function (e) {
if (e.which == 13) {
$("#button1").click()
}
});
My currect on click event looks like this (how do I extend this to accomodate ENTER?)
//Check answer
$("body").on("click", ".unlocked figcaption .check", function(){
var logo_id = $(this).parent().attr("id");
var answer = $("#" + logo_id + " input[name=guesslogo]");
var logo_lang = answer.attr("data-lang");
answer.removeAttr("class").attr("disabled","true");
//Submit answer for review
$.ajax({
url: "actions.php",
get: "GET",
data: "answer=" + answer.val() + "&logo_id=" + logo_id + "&logo_lang=" + logo_lang,
cache: false,
success: function (data){
var response = jQuery.parseJSON(data);
if (response.result == 1) {
answer.addClass("correct").siblings(".clear, .hint").fadeTo("slow","0.4");
answer.parent().append('<div class="alert"><h3>Correct!</h3> <p>Score: '+ response.score +'</p></div>');
$("#" + logo_id).siblings(".logo").removeClass("logo").addClass("answered").removeAttr("style");
snd_correct.play();
//update user_score and user_level values in leaderboard and header widgets
var this_user = $("header aside").attr("data-usern");
if (this_user) {
var this_user_score = $("header aside .user_score").text();
var this_user_level = $("header aside .user_level").text();
$("[data-usern="+ this_user +"] .user_score").empty().append(parseInt(this_user_score) + parseInt(response.score));
if (response.level_up == 1) {
var new_level = parseInt(this_user_level) +1;
$("[data-usern="+ this_user +"] .user_level").empty().append(new_level);
update_view(new_level);
}
//
update_level_progress_bar();
}
} else if (response.result == 0) {
answer.addClass("wrong").removeAttr("disabled");
snd_wrong.play();
} else if (response.result == 2) {
answer.addClass("almost").removeAttr("disabled");
snd_wrong.play();
}
}
});
return false;
});
I uploaded sample here: http://gamoicani.es/logo/ click on any logo, I'd like to use keyboard ENTER also to submit.
// Try this!! :)
$(document).ready(function(){
$(this).on('keypress click','.unlocked figcaption .check',function(e){
if((e.type === 'keypress' && e.keyCode === 13) || e.type === 'click')
{
// All your code inside the .on()
}
});
});
You can make the ajax function external and then call it on click and keypress (enter) events like this:
$(document).on("click", ".unlocked figcaption .check", ajaxFunction);
$(document).on("keypress", "#myForm input:text", function (e) {
if (e.keyCode == 13){
e.preventDefault();
ajaxFunction();
}
});
function ajaxFunction(){
var logo_id = $(this).parent().attr("id");
var answer = $("#" + logo_id + " input[name=guesslogo]");
var logo_lang = answer.attr("data-lang");
answer.removeAttr("class").attr("disabled","true");
//Submit answer for review
$.ajax({
url: "actions.php",
get: "GET",
data: "answer=" + answer.val() + "&logo_id=" + logo_id + "&logo_lang=" + logo_lang,
cache: false,
success: function (data){
var response = jQuery.parseJSON(data);
if (response.result == 1) {
answer.addClass("correct").siblings(".clear, .hint").fadeTo("slow","0.4");
answer.parent().append('<div class="alert"><h3>Correct!</h3> <p>Score: '+ response.score +'</p></div>');
$("#" + logo_id).siblings(".logo").removeClass("logo").addClass("answered").removeAttr("style");
snd_correct.play();
//update user_score and user_level values in leaderboard and header widgets
var this_user = $("header aside").attr("data-usern");
if (this_user) {
var this_user_score = $("header aside .user_score").text();
var this_user_level = $("header aside .user_level").text();
$("[data-usern="+ this_user +"] .user_score").empty().append(parseInt(this_user_score) + parseInt(response.score));
if (response.level_up == 1) {
var new_level = parseInt(this_user_level) +1;
$("[data-usern="+ this_user +"] .user_level").empty().append(new_level);
update_view(new_level);
}
//
update_level_progress_bar();
}
} else if (response.result == 0) {
answer.addClass("wrong").removeAttr("disabled");
snd_wrong.play();
} else if (response.result == 2) {
answer.addClass("almost").removeAttr("disabled");
snd_wrong.play();
}
}
});
return false;
};
jsfiddle
When I have one autocomplete dropdown for one field everything works fine, however when I add more dropdowns for more fields the value of the input fields is no longer populated with the text of the li which is returned from the php file which is called
The following works where .sugnorm1 is the class of the li
var delay = (function () {
var timer = 0;
return function (callback, ms) {
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();
$(document).ready(function () {
$('#quality1').bind('input propertychange', function () {
delay(function () {
$.post("functions/autocomplete.php", {
quality:$(this).val(),
questionname:"<?php echo $_SESSION['question']; ?>",
count:1
}, function (response) {
$('#qualitySuggest1').hide();
setTimeout("finishAjax('qualitySuggest1', '" + escape(response) + "')", 20);
});
return false;
}, 20);
});
});
$('.sugnorm1').live("mouseover mouseout click", function(event) {
if ( event.type == "mouseover" ) {
$(this).addClass('sughover');
} else if ( event.type == "click") {
$("#quality1").val($(this).text());
$("#qualitySuggest1").hide();
}
else {
$(this).removeClass('sughover');
}
});
$("#quality1").blur(function () {
$("#qualitySuggest1").hide();
});
});
function finishAjax(id, response) {
$('#' + id).html(unescape(response));
$('#' + id).show();
} //finishAjax
However if I add another field the quality suggest .hide() is called but I can't get anything else such as an alert to work in the event.type == click for both of the fields.
var delay = (function () {
var timer = 0;
return function (callback, ms) {
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();
$(document).ready(function () {
$('#quality1').bind('input propertychange', function () {
delay(function () {
$.post("functions/autocomplete.php", {
quality:$(this).val(),
questionname:"<?php echo $_SESSION['question']; ?>",
count:1
}, function (response) {
$('#qualitySuggest1').hide();
setTimeout("finishAjax('qualitySuggest1', '" + escape(response) + "')", 20);
});
return false;
}, 20);
});
$('#quality2').bind('input propertychange', function () {
delay(function () {
$.post("functions/autocomplete.php", {
quality:$(this).val(),
questionname:"<?php echo $_SESSION['question']; ?>",
count:2
}, function (response) {
$('#qualitySuggest2').hide();
setTimeout("finishAjax('qualitySuggest2', '" + escape(response) + "')", 20);
});
return false;
}, 20);
});
});
$('.sugnorm1').live("mouseover mouseout click", function(event) {
if ( event.type == "mouseover" ) {
$(this).addClass('sughover');
} else if ( event.type == "click") {
$("#quality1").val($(this).text());
$("#qualitySuggest1").hide();
}
else {
$(this).removeClass('sughover');
}
});
$("#quality1").blur(function () {
$("#qualitySuggest1").hide();
});
$('.sugnorm2').live("mouseover mouseout click", function(event) {
if ( event.type == "mouseover" ) {
$(this).addClass('sughover');
} else if ( event.type == "click") {
$("#quality2").val($(this).text());
$("#qualitySuggest2").hide();
}
else {
$(this).removeClass('sughover');
}
});
$("#quality2").blur(function () {
$("#qualitySuggest2").hide();
});
});
function finishAjax(id, response) {
$('#' + id).html(unescape(response));
$('#' + id).show();
} //finishAjax
Thanks for your help!
My click event was being called after the blur event, thus the suggestion dropdown was hidden. I solved this by changing my click event to mousedown. Mousedown will then be called before blur.
I have this jQuery function that work. Every 2 lines is the same except a minor changes. How can I shorten it?
$(".c1").delay(5000).fadeOut("slow", function() {
$("#phone").addClass("c2").fadeIn("slow", function() {
$(".c2").delay(5000).fadeOut("slow", function() {
$("#phone").addClass("c3").fadeIn("slow", function() {
$(".c3").delay(5000).fadeOut("slow", function() {
$("#phone").addClass("c4").fadeIn("slow", function() {
$(".c4").delay(5000).fadeOut("slow", function() {
$("#phone").addClass("c5").fadeIn("slow", function() {
$(".c5").delay(5000).fadeOut("slow", function() {
$("#phone").addClass("c6").fadeIn("slow", function() {
$(".c6").delay(5000).fadeOut("slow", function() {
$("#phone").addClass("c7").fadeIn("slow", function() {
$(".c7").delay(5000).fadeOut("slow", function() {
$("#phone").addClass("c8").fadeIn("slow", function() {
$(".c8").delay(5000).fadeOut("slow", function() {
$("#phone").addClass("c9").fadeIn("slow", function() {
$(".c9").delay(5000).fadeOut("slow", function() {
$("#phone").addClass("c1").fadeIn("slow");
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
});
You could use a recursive function like this:
function phoneCall(i){
$(".c" + i).delay(5000).fadeOut("slow", function() {
$("#phone").addClass("c" + (i + 1)).fadeIn("slow", function() {
if(i <= 9) phoneCall(i + 1);
});
});
}
phoneCall(1);
It seems that the #phone element is the only one that ever gets the c_ class. If so, you can cache the element and eliminate a bunch of code.
var phone = $("#phone"), i = 0;
(function cycle() {
i = ((i % 9) + 1);
phone.addClass("c" + i).fadeIn("slow").delay(5000).fadeOut("slow", cycle);
})();
We can even get rid of a line of code by inlining the increment.
var phone = $("#phone"), i = 0;
(function cycle() {
phone.addClass("c" + ((++i % 9) + 1)).fadeIn("slow").delay(5000).fadeOut("slow", cycle);
})();
As #charlietfl noted, you may not want it to infinitely loop. If not, add a return statement.
var phone = $("#phone"), i = 0;
(function cycle() {
if (i === 9) return;
phone.addClass("c" + ((++i % 9) + 1)).fadeIn("slow").delay(5000).fadeOut("slow", cycle);
})();
And FWIW, numbering is usually a little simpler if you use 0 based indices.
var phone = $("#phone"), i = -1;
(function cycle() {
phone.addClass("c" + (++i % 9)).fadeIn("slow").delay(5000).fadeOut("slow", cycle);
})();
You can use something like that:
function inception(fromInt, tillInt){
if (fromInt < tillInt){
$('.c' + fromInt).delay(5000).fadeOut("slow",function(){
newInt = fromInt +1;
$('#phone').addClass('c'+newInt).fadeIn("slow", function() {
inception(newInt, tillInt));
}
});
}else{
if(fromint == tillInt){
$('.c' + fromInt).delay(5000).fadeOut("slow");
}
}
}
Then add to your code:
inception(1,9);
I don't know something like this?
var num = 2;
var HandlerForC = function () {
if (num < 10) {
$("#phone").addClass("c" + num).fadeIn("slow", HandlerForPhone);
} else {
$("#phone").addClass("c1").fadeIn("slow");
}
}
var HandlerForPhone = function () {
num++;
$(".c" + (num - 1)).delay(5000).fadeOut("slow", HandlerForC);
}
HandlerForPhone();
How can I fix this error "missing; before statement" in javascript ?
My HTML Page :
http://etrokny.faressoft.com
My Javascript Code :
http://etrokny.faressoft.com/javascript.php
When assigning a function to a variable, you need a semicolon after the function.
Example: var func = function() { return false; };
Put a semicolon after all statements. JavaScript does it automatically for you when you "forget" one at the end of a line**, but since you used a tool to make everything fit on one line, this doesn't happen anymore.
** it should also be happening when a statement is followed by a }, but it's just bad practice to rely on it. I would always write all semicolons myself.
Actually, you know what, since it's so easy, I did it for you:
function getSelected() {
var selText;
var iframeWindow = window;
if (iframeWindow.getSelection) {
selText = iframeWindow.getSelection() + "";
} else if (iframeWindow.document.selection) {
selText = iframeWindow.document.selection.createRange().text;
}
selText = $.trim(selText);
if (selText != "") {
return selText;
} else {
return null;
}
}
$(document).ready(function () {
function scan_selectedText() {
if (getSelected() == null) {
return false;
}
if (getSelected().length < 25) {
return false;
}
$(document)[0].oncontextmenu = function () {
return false;
};
var result = true;
var selected_Text = getSelected();
selected_Text = selected_Text.replace(/ {2,}/g, ' ').replace(/\s{2,}/g, ' ');
$('#content .para').each(function () {
var accepted_text = $.trim($(this).text());
accepted_text = accepted_text.replace(/ {2,}/g, ' ').replace(/\s{2,}/g, ' ');
if (accepted_text.search(selected_Text) > -1) {
result = false;
}
});
var AllAccepted = "";
$('#content .para').each(function () {
var correntDiv = $.trim($(this).text()).replace(/ {2,}/g, ' ').replace(/\s{2,}/g, ' ');
AllAccepted = AllAccepted + correntDiv + " ";
});
if ($.trim(AllAccepted).search(selected_Text) > -1) {
return false;
}
if (!result) {
return false;
}
var body = $.trim($('body').text());
body = body.replace(/ {2,}/g, ' ').replace(/\s{2,}/g, ' ');
var bodyWithoutDivs = body;
$('#content').each(function () {
var correntDiv = new RegExp($.trim($(this).text()).replace(/ {2,}/g, ' ').replace(/\s{2,}/g, ' '), "");
bodyWithoutDivs = bodyWithoutDivs.replace(correntDiv, '');
});
if (bodyWithoutDivs.search(selected_Text) > -1) {
return false;
}
if (body == selected_Text) {
return true;
}
return true;
}
$(document).mousedown(function (key) {
if (key.button == 2) {
if (scan_selectedText() == true) {
$(document)[0].oncontextmenu = function () {
return false;
};
} else {
$(document)[0].oncontextmenu = function () {
return true;
};
}
}
});
var isCtrl = false;
$(document).keyup(function (e) {
if (e.which == 17) isCtrl = false;
}).keydown(function (e) {
if (e.which == 17) isCtrl = true;
if (e.which == 67 && isCtrl == true) {
$("#content2").animate({
opacity: 0
}, 500).animate({
opacity: 1
}, 500);
if (scan_selectedText() == true) {
return false;
} else {
return true;
}
}
});
document.onkeypress = function (evt) {
if (evt.ctrlKey == true && evt.keyCode == 67) {
$("#content2").animate({
opacity: 0
}, 500).animate({
opacity: 1
}, 500);
if (scan_selectedText() == true) {
return false;
} else {
return true;
}
}
};
$('*').bind('copy', function (key) {
if (scan_selectedText() == true) {
return false;
} else {
return true;
}
});
});
First thing, start with the raw human-written version of your javascript, you know, the unminimized non-machine-generated version
After you've fixed you've made sure it is free from syntax errors .... and you minimize it, don't make a mistake when copy/pasting