jquery background color css


I am trying to check for the background of an element, here is my code. But it doesn't work: I tried two ways, here is the first: function changeColor(field) { if(field.css('background-color','#ffb100')) { field.css('background-color','white'); } else { field.css('background-color','ffb100'); } } here is the second: function changeColor(field) { if(field.css('background-color') === '#ffb100') { field.css('background-color','white'); } else { field.css('background-color','ffb100'); } } But neither worked! Any suggestions
Posted On: Sunday 25th of November 2012 08:34:19 PM Total Views:  211
View Complete with Replies

RELATED TOPICS OF JavaScript PROGRAMMING LANGUAGE




jquery and dynamic textboxes

hi, i'm trying to manipulate dynamic textboxes using jquery such that when the value of the textbox_1 is, say, 'abcd' a new text box textbox_2 would be introduced and when the value of textbox_2 is again 'abcd' a third one is introduced and so on. ive managed to do this with the following code, but with a little problem. $(document).ready(function(){ var cnt = 1; $("#inpu_"+cnt).keyup(function () { var value = $("#inpu_"+cnt).val(); if(value == 'abcd'){ $("#inpu_"+cnt).css("background-color", "red"); cnt = cnt + 1; $("#content").append(''); } }); }).keyup(); the problem is that although textbox_2 is displayed instantaneously, the 3rd and 4th does not when the value of textbox_2 is 'abcd'. but they are displayed as soon as a key is pressed in the original textbox (textbox_1). that is the 3rd one is displayed when textbox_2's value is 'abcd' and a key is pressed while inside textbox_1. and so on. [edit 1] btw, inside body tag ive created a div and given the id content. and inside it is the textbox_1 with the id 'inpu_1'. the original one that is. what could be the problem what am i doing wrong
VIEWS ON THIS POST

130

Posted on:

Saturday 24th November 2012
View Replies!

jquery hover changing css problem

, I've been trying to figure this out and I'm not sure why my code does not work $(function(){ $('ul.ldd_menu li.topLink ul').hide(); $('div.ldd_submenu').hide(); $('div.submenu_top').hide(); $('li.topLink').hover(function(){ $(this).find('ul').show() $(this).css({'color':'#FFF','background-color':'#000000'}); $(this).find('div').show() },function(){ $(this).find('ul').hide(); $(this).css({'color':'#000','background-color':'#ffffff'}); $(this).find('div').hide(); }); }); That is my code, and the background-color works. But why doesn't my font color change colors which its supposed to Any suggestions
VIEWS ON THIS POST

148

Posted on:

Saturday 24th November 2012
View Replies!

Charset problem + jquery datatables

im having a problem with the charset, when i set the page to UTF-8 the table head and foot accent marks become strange chars but if i set to ISO-8859-1 the text inside the table and on other field become this strange chars.. screenshots UTF-8 http://img262.imageshack.us/img262/9178/utf8.jpg ISO-8859-1 http://img705.imageshack.us/img705/4682/iso88591.jpg anyone knows how to fix this
VIEWS ON THIS POST

268

Posted on:

Saturday 24th November 2012
View Replies!

creating dynamic jquery tabbed panels

[IMG]http://i.imgur.com/hSalo.png[/IMG] hi ! i'm trying to create an dynamic jquery tabbed interface and need some help. so far i've managed to draft a rough idea of how i wish the interface to look like and would currently appreciate suggestions on how to get production under way. 1) this is default tab that is opened once the page loads 2) there is an open control right besides the default tab 3) once the open control is selected a drop down appears querying my database of all the categories selected, once a category has been selected then the new tab loads up with the required content 4) left and right scroll controls have been implemented to allow for overflow within the confined space. they act as a scroll of some sort, once there are more than enough tabs within the 'viewable area' the user can use the controls to move to the next set of tabs i would appreciate any assistance on this small project. many
VIEWS ON THIS POST

133

Posted on:

Saturday 24th November 2012
View Replies!

Javascrip/jquery local file selection

Hi There Want to find out if there are any way to let a user select a file from their local computer, and then return the path so that i can add it into a form field. I want to do a file upload, but want to skip the html form file upload selector. maybe someone can help
VIEWS ON THIS POST

254

Posted on:

Saturday 24th November 2012
View Replies!

[jquery] Select/Option link

:) , $.each(myOptions, function(val, text) { $('#select').append($('').val(val).html(text)); }); how can I add to option links for example to http://google.pl/searchq={text} thx 4 help;)
VIEWS ON THIS POST

130

Posted on:

Saturday 24th November 2012
View Replies!

[jquery] Updating the value on website

how can I run jquery function every 5 minute and updating value on website
VIEWS ON THIS POST

140

Posted on:

Saturday 24th November 2012
View Replies!

sending jquery form, but don't know how to retrieve?

I am using jquery to send a form: Copy code jQuery(document).ready(function($) { //References var pages = $('div#paging_menu a'); var loading = $("div#loading"); var content = $("#print_full_list"); //show loading bar function showLoading(){ loading .css({visibility:"visible"}) .css({opacity:"1"}) .css({display:"block"}) ; } //hide loading bar function hideLoading(){ loading.fadeTo(1000, 0); }; //Manage click events pages.click(function() { //show the loading bar showLoading(); //Highlight current page number pages.css({'background-color' : ''}); $(this).css({'background-color' : 'yellow'}); //Load content var pageNum = this.id; var targetUrl = "/login/php_conf/full_order_list.phppage=" + pageNum + "&" + $("#myForm").serialize() + " #print_full_list_php"; content.load(targetUrl, function(response, status, xhr) { hideLoading(); switch (xhr.status) { case 200: break; case 404: $('#error').html('404: Looks like the results have not been uploaded to the server yet. Please check back later.'); break; default: $('#error').html('' + xhr.status + ': ' + xhr.statusText + '. Please contact the club and let them know.'); break; }; }); }); //default - 1st page $("#1").css({'background-color' : 'yellow'}); var targetUrl = "/login/php_conf/full_order_list.phppage=1&" + $("#myForm").serialize() + " #print_full_list_php"; showLoading(); content.load(targetUrl, function(response, status, xhr) { hideLoading(); switch (xhr.status) { case 200: break; case 404: $('#error').html('404: Looks like the results have not been uploaded to the server yet. Please check back later.'); break; default: $('#error').html('' + xhr.status + ': ' + xhr.statusText + '. Please contact the club and let them know.'); break; }; }); }); The PHP page "full_order_list.php" is the page where i have my paging. But it is also the same place I want to retrieve the variable "page" and do something there. Here is my "full_order_list.php" page: Copy code jQuery(document).ready(function($) { $("#mainTitle").html("Work List"); $("#accordion_tbl").accordion(); $('#accordion_tbl > UL').attr('style', 'clear:left;float: left;width:740px;'); $('#accordion_tbl > DIV').attr('style', 'clear:left;float: left;width:740px;'); $('#paging_menu > A').attr('style', 'padding:5px; text-transform: uppercase;cursor: pointer;color: #c2c2c2;'); /*$('#paging_menu > A:hover').attr('style', 'color: #6fa5fd; cursor: pointer;');*/ }); Work List #loading { width: 100%; position: absolute; text-align: center; font-family:Trebuchet MS; font-size:12px; color:#008000; font-weight:bold }
VIEWS ON THIS POST

284

Posted on:

Saturday 24th November 2012
View Replies!

How can I do this flash effect with jquery?

does this flash effect http://www.goodthinking.com.ph/ can code in jquery or other tips, sample how to do it in jquery
VIEWS ON THIS POST

271

Posted on:

Saturday 24th November 2012
View Replies!

Using jquery to load new div in page

I'm trying to use jquery to load some content on a page but cannot seem to find anything through google. I have about 10 checkboxes, once 4 are selected I want to get their ids, than load 4 divs with textareas depending on the ids of the checked checkboxes. Example: Home About Jquery to get the id of the checked checkboxes: $(document).ready(function() { $('#reload_1').click(function() { var names = []; $('#page_select input:checked').each(function() { names.push(this.name); }); $("#page_select :checked").each(function() { alert("value = " + $(this).attr("id")); }); }); }); Now from this point I would like jquery to pass the id of the checkbox and load the corresponding textarea The reason I don't want to load everything right away is because I have 10 checkboxes and 10 textareas and the textareas have ckeditor attached, so it would load slow. I assume it would be something with using $("#test_div").load to reload just that part of the page and not the whole page, but I dont know how to pass the variable and where to put the div that I need loaded after.
VIEWS ON THIS POST

125

Posted on:

Saturday 24th November 2012
View Replies!

jquery 3d carousel

hello friends... I'm new to jquery and as well as to daniweb :P I'm learning jquery from 3 days using online tutorials... I am given a task by my guide... For which i want to know why is it that the jquery carousel on the page http://web.enavu.com/demos/3dcarouselwip/ works in firefox and chrome but not in IE can anyone help me on this
VIEWS ON THIS POST

388

Posted on:

Saturday 24th November 2012
View Replies!

Reading textbox value in new window using jquery

I have an array of textboxes each having button on right side which when pressed the text should be displayed on new window using Jquery. For demo, you might have seen jquery lightbox plugin which shows the images in the new window. I want exactly same but instead of images i want to show the text value of the text box when its button is pressed. You also see this when you sign in on daniweb.com, you see a new small window when "sign in" button is pressed. Please tell me how can i do that
VIEWS ON THIS POST

265

Posted on:

Saturday 24th November 2012
View Replies!

cancelling jquery timeouts

Hi not sure if its technically a timeout but I am building a sliding jquery nav, the sliding is fine. theres 4 buttons you can click whatever one and they will slide into place even if they are in the middle of sliding, cool. BUT they each also open a loader for 2 seconds then fade in a div. $("#nav_1").bind("click",function() { $("#nav_1").animate({ left: "0px" }, 500, "easeOutCirc"); $("#nav_2").animate({ left: "560px" }, 500, "easeOutCirc"); $("#nav_3").animate({ left: "620px" }, 500, "easeOutCirc"); $("#nav_4").animate({ left: "680px" }, 500, "easeOutCirc"); $('.hidden').css({ display: "none"}); $('#loader').fadeIn().fadeTo(2000, 1).fadeOut(1000, function() { $(this).fadeOut(); $("#div_1").fadeIn(); }); }); $("#nav_2").bind("click",function() { $("#nav_1").animate({ left: "0px" }, 500, "easeOutCirc"); $("#nav_2").animate({ left: "60px" }, 500, "easeOutCirc"); $("#nav_3").animate({ left: "620px" }, 500, "easeOutCirc"); $("#nav_4").animate({ left: "680px" }, 500, "easeOutCirc"); $('.hidden').css({ display: "none"}); $('#loader').fadeIn().fadeTo(2000, 1).fadeOut(1000, function() { $(this).fadeOut(); $("#div_2").fadeIn(); }); }); Problem is when you click through the buttons quickly its keeping track of the buttons clicked/divs to display. So even when you stop clicking it will finish the loader, display the div, finish the next loader, display the next div, etc. How do i clear that 2 second delay on the loader and just hide it
VIEWS ON THIS POST

118

Posted on:

Saturday 24th November 2012
View Replies!

error when calling web service from jquery ajax call

I am calling web service through jquery ajax call for the first time and getting an error. Can please somebody help me in this i would really appreciate it. Below is the code: Employee's NTID: Search Here is JScriptuserNTID.js file: $.ajaxSetup({ cache: false }); //var ajax_load = ""; // load() functions //var loadUrl = "test.txt"; $(document).ready(function() { $('.start').ajaxStart(function() { alert('Triggered ajaxStart handler.'); }); $("button").click(function() { //$("p").html(ajax_load).load(loadUrl); //var eNtid = $("#Eid").val(); $.ajax({ type: "POST", url: "./WebService.asmx/World", //data: ("Employee NTID :" + eNtid), error: function(XMLHttpRequest, textStatus, errorThrown) { alert(textStatus); }, success: function(result) { alert("success"); } }); }); }); Here is WebService.asmx/World: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Services; /// /// Summary description for WebService /// [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. [System.Web.Script.Services.ScriptService] public class WebService : System.Web.Services.WebService { public WebService () { //Uncomment the following line if using designed components //InitializeComponent(); } [WebMethod] public void World() { Console.WriteLine( " World" ); } }
VIEWS ON THIS POST

245

Posted on:

Saturday 24th November 2012
View Replies!

jquery error in IEs (7 and 8)

Hi I run into something peculiar. I have an html file linking to a local file jquery-1.4.4.js. Now, everything works ok in every browser but when I test the page in IE7 and 8 it fires the following error: SCRIPT87: Invalid argument. jquery-1.4.4.js, line 18 character 20135 and everything falls apart. So with the IE debuggers open I click on the message and it sends me to the jquery-1.4.4.js line where the error allegedly sits (I understand this doesn't necessarily mean that the error is in that file, more likely somewhere in my own script instead). ANyway I copy and paste the whole jquery-1.4.4.js from the IE debugger into notepad, and I do the same for the jquery-1.4.4.js file in the firefox debugger. I compare the 2 (that should be the same) and notice that there are differences: the same version of the same file is different in IE and Firefox...Needless to say the line where the error is in (a.elem.style[a.prop]=(a.prop==="width"||a.prop==="height"Math.max(0,a.now):a.now)+a.unit) doesn't appear in the version taken from firefox. A solution to this problem - I have already checked - is to move up to the latest jquery version (it still throws the error but at least everything works as it should). Probelm is I can't upgrade, becasue there are some compatibility problems. From what I gathered from the error and some tests I have performed on the page and on my own script, a possible error seems to be coming from a list of jquery objects I have created (there is already a post on these here http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/437800/selecting-ticked-checkboxes-with-jquery) but the syntax appears correct. ANybody has a good advice
VIEWS ON THIS POST

121

Posted on:

Sunday 25th November 2012
View Replies!

Toggle in jquery

there, I'm just having a tiny problem with this function. the toggle function works fine but what I want to do is to display the date whenever particular buttons are clicked or active. function showDate(element){ if(element == "#selection3" || element == "#selection4"){ document.getElementById("dateinput").style.visibility = "visible"; }else{ document.getElementById("dateinput").style.visibility = "hidden"; } } function toggle_element(element){s $(element).toggle(); } Start Date: End Date: I want to display the date whenever selection 3 is active only. I'd appreciate quick help with this
VIEWS ON THIS POST

268

Posted on:

Sunday 25th November 2012
View Replies!

type error in jquery

hey , I don't seem to understand why this code is throwing a type error at me. It is saying the variable is undefined. The error I'm getting is this TypeError: datasplits is undefined datasplit2s = datasplits.split(":"); var urlphp = 'ajaxgamesperday.php&start_date=' + startDate + '&end_date=' + endDate; $.ajax({ url: urlphp, success: function(data) { // Original format "2000-00-00" var formatted_startDate = startDate.replace(/-/g, ","); var formatted_endDate = endDate.replace(/-/g, ","); var startdatearray = formatted_startDate.split(","); var enddatearray = formatted_endDate.split(","); //Format now is "2000,00,00" var sy = parseInt(startdatearray[0]); var sm = parseInt(startdatearray[1],10) - 1; var sd = parseInt(startdatearray[2]); var ey = parseInt(enddatearray[0]); var em = parseInt(enddatearray[1],10) - 1; var ed = parseInt(enddatearray[2]); options = { chart: { renderTo: 'container3', type: 'bar' }, xAxis: { type: "datetime" }, yAxis: [{ min: 0, allowDecimals: false, title: { align: 'high' }, labels: { overflow: 'justify' } }], tooltip: { formatter: function() { return ''+ Highcharts.dateFormat('%e. %b', this.x)+ ': '+ this.y + ' games played'; } }, plotOptions: { bar: { dataLabels: { enabled: true } } }, legend: { }, credits: { enabled: false }, series: [{ name: 'Complete games', data: [], }, { name : 'Incomplete games', data: [] }] }; dataremovebrackets = data.slice(1,-1); dtsplit = dataremovebrackets.split(","); $.each(dtsplit, function(date,value) { var datasplit = value.split("'"); var datasplits = datasplit[0].slice(1); var datasplit2s = datasplits.split(":"); var formatted_date = datasplit2s[0].replace(/-/g, ","); var xval = formatted_date.split(","); var x = Date.UTC(xval[0], xval[1] - 1, xval[2]); if (datasplit2s[1] != 0) { options.series[0].data.push([x,parseFloat(datasplit2s[1])]); } datasplits = datasplit[1]; datasplit2s = datasplits.split(":"); formatted_date = datasplit2s[0].replace(/-/g, ","); xval = formatted_date.split(","); x = Date.UTC(xval[0], xval[1] - 1, xval[2]); if (datasplit2s[1].substring(0, datasplit2s[1].length - 1) != 0) { options.series[1].data.push([x,parseFloat(datasplit2s[1])]); } }); chart = new Highcharts.Chart(options); chart.xAxis[0].setExtremes(Date.UTC(sy,sm,sd), Date.UTC(ey, em, ed)); chart.setTitle({text: "Number of games played per day"}, {text: "Source: Ants Database"}); chart.xAxis[0].setTitle({text: "Date"}); chart.yAxis[0].setTitle({text: "Number of Players"}); }, cache: false } , "json");
VIEWS ON THIS POST

110

Posted on:

Sunday 25th November 2012
View Replies!

jquery pdf viewer.

can anybody tell me a working jquery pdf viewer plugin(open source)
VIEWS ON THIS POST

111

Posted on:

Sunday 25th November 2012
View Replies!

jquery.load error

hi, i am new to jquery though im learning,together with ajax. I have the following script that displays a modal login form after cliking on login_link. But for my web page, i used the .load to load content in the main content div, so whenever this code is placed the the document.ready, the modal form dont wont, but if i comment it, it works fine, please help, tkx here is the code img2 = new Image(220, 19); img2.src="images/ajax-loader.gif"; // When DOM is ready $(document).ready(function(){ //$('#center_content').load('content.php'); // Launch MODAL BOX if the Login Link is clicked $("#login_link").click(function(){ //alert("sdfsdfadgf"); $("#login_form").modal(); }); // When the form is submitted $("#status > form").submit(function(){ // Hide 'Submit' Button $("#submit").hide(); // Show Gif Spinning Rotator $("#ajax_loading").show(); // 'this' refers to the current submitted form var str = $(this).serialize(); // -- Start AJAX Call -- $.ajax({ type: "POST", url: "do-login.php", // Send the login info to this page data: str, success: function(msg){ $("#status").ajaxComplete(function(event, request, settings){ // Show 'Submit' Button $('#submit').show(); // Hide Gif Spinning Rotator $('#ajax_loading').hide(); if(msg == 'OK') // LOGIN OK { var login_response = '' + '' + '' + '' + '' + ''+ "You are successfully logged in! Please wait while you're redirected..."; $('a.modalCloseImg').hide(); $('#simplemodal-container').css("width","500px"); $('#simplemodal-container').css("height","120px"); $(this).html(login_response); // Refers to 'status' // After 3 seconds redirect the setTimeout('go_to_private_page()', 3000); } else // ERROR { var login_response = msg; $('#login_response').html(login_response); } }); } }); // -- End AJAX Call -- return false; }); // end submit event }); function go_to_private_page() { window.location = 'private.php'; // Members Area }
VIEWS ON THIS POST

150

Posted on:

Sunday 25th November 2012
View Replies!

get background color from element in jquery

Hi all, I am animating the bg color of some links. But I have changed the bg color of each link, so they have unique bg colors. When I use the jq function i normally use, It doesnt work properly because I can only animate back to one specific color, which i had declared in the callback function.. So..I am asking: How do I save the background color of the element on hover, animate it, and change it back to the color saved in the variable: $(document).ready(function(){ $("#main_nav ul li a").hover(function() { // Doesnt this save the original color of the element being hovered var original_color = $(this).css('backgroundColor'); $(this).animate({ backgroundColor: "#069" }, 800); },function() { // How do I use the variable with the original color in here - This doesnt work.. $(this).animate({ backgroundColor: original_color }, 300); }); }); Klemme
VIEWS ON THIS POST

226

Posted on:

Sunday 25th November 2012
View Replies!