Preloading a single div
Hi there Is it possible to preload a single div with jquery? or simple Javascript? Thanks in advance
Can someone help me? :)
Hello, I'm having a small problem, I'm trying to reach this: (This is just regular JavaScript). But, when I'm trying to get it working on Mozilla FireFox (Combined with MacBook Pro), it fails. So I want to try with jQuery, but I don't know about it, can someone help me? :) function changeText(){ document.getElementById('side1').innerHTML = 'Things'; } function changeTextBack(){ document.getElementById('side1').innerHTML = 'Cookies';
Simplify my jQuery
Hey! I'm fairly new to jQuery and I have a rather simple question. I'm making a accordion-like solution to sign up for a subscription, and what I have now is: $(function() { $('.next').click(function() { $('.content_1').fadeOut({display: 'none'}); $('.content_2').fadeIn({display: 'block'}, {duration:3000, queue: true}); $('.footer_1').animate({width: '14px'}, 'slow'); $('.footer_2').animate({width: '561px'}, 'slow'); }); $(function() { $('.next2').click(function()
jQuery can't see appended div
Here is my code newId = "Author" + Math.random(); newAuthor = $("#Author").clone(); newAuthor.attr("id", newId); newAuthor.addClass("author"); newAuthor.appendTo("#AuthorsDiv"); alert($("#"+newId).html());After watching the page source I can see new div with generated id and some HTML-code in it, but alert every time shows null. jQuery acts the way like there is no any created div in DOM. Why?
Autocomplete on a page with multiple fields is causing slow script and browser hangs
Hi, I am trying to implement autocomplete feature on a page on a table column. As the number of records grows in the table I am getting slow script error and browser hangs. As the id's of column for each row is different on page load, I am using $(id).autocomplete("getValues.jsp") for each column in the row is there any better way of doing this. Your help on this is highly appreciated. Thanks
jQuery is not defined error
Running firebug on my site, thefrugalfind.com, I get a bunch of errors... this is one of them: jQuery is not defined jQuery(document).ready(function () { Any help on how to fix that?
Image sprite fading rollover
Hello, I'm quite new to Javascript and jQuery and question may be "un grand classic" (sorry I'm french lol) but I did not found any suitable answer for my issue on the www. So, I'm trying to make a rollover on a sprite image with a fading effect using jQuery. Here are my CSS for the sprite: .img-sprite{display:block; width:300px; height:300px; background-color:transparent; background-repeat:no-repeat; background-position: 0 0; } .img-sprite:hover{background-position : 0 -300px; } #img1{background-image:
delay of popup on page load
Hi, I have the code below which pops up a pop up on page load. I simply want to wait for 10 seconds after the page load for the pop up to appear. Is there a jquery way that I could add to the below code to make this work? thanks, Kindly Florian <script type="text/javascript"> jQuery(document).ready(function(){ jQuery.lightbox("www.mydomain.com/popup.html?lightbox[width]=650&lightbox[height]=480"); }); </script>
Issues with ajax (POST) in Internet Explorer
I'm using ajax to send data to another page, but in IE 'message' is emptied some times. I have an alert on 'message' in the JS-function and there is data there; for example: "I think that IE <br />is a pain in the..." I insert all the values in MySQL, but as explained above, 'message' is emptied. Do you have any ideas what to do? $.ajax({ type: "POST", url: "send_ajax.php", data: ({countries: countries, organizations: organizations, systems: systems, message: message}), cache:
insert html or css after each 4th <li>
Hi, I just started to learn jquery. The sitepoint book I picked up and my online research did not yield any results for what I am trying to do. Basically I have a ul with li in it. I have the ul's width set so that only 4 LI's are displayed in one row and then the next set of 4 gets displayed in next row, etc. Can I use jquery to simply say 'after each set of 4 li, insert a graphic' .. or insert some html code. I want a graphical separator between sets of <li>'s best regards Florian
html5 video, jQuery, and firefox
The first two go so well together, but firefox is kicking up a fuss. my main problem is that I have created sort of a html5 video playlist with about 16 videos. you click on one of the listed links, the ul fades out, the video fades in and starts playing. This part works just fine. Then to get out of the video there is a little close button in the top right of the playlist area. This uses .remove() to remove the video out of the DOM after it fades out and the menu fades back in. It works fine in
Jquery plugin within a JSON callback function
I am using a json from a Google spreadsheet and a jquery plugin which is called throught this HTML line <ul id="example">. The thing is that when I dynamically append elements to the <ul id="example"> from within the JSON callback function, these are not recognized by the jquery plugin Code: <form> <ul id="example">BLA BLA BLA</ul> </form> <script type="text/javascript"> jQuery(document).ready(function(){ cm_load(); //The fn that creates the script, brings the json and call the function to process
Appending, setting attributes, text to an XML DOM Object
I am having an issue appending, setting attributes, text on the root node. Below is a sample of the code that performs this task (nLevel, nID, and sText are variables passed in by the containing function. XMLDOM is an XML DOMDocument object: var oAna = $(oData).find('ana'); if(!$(oAna).length){ // Create new 'ana' element oAna = $(XMLDOM.createElement('ana')); $(oData).append(oAna); } // Set attributes and text $(oAna).attr({'level':nLevel, 'id':nID}); $(oAna).text(sText);
addClass function on a SVG circle doesnt work
Hi, i have the following test code in my html page <div id="drawingArea"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="700" height="400"> <circle id="example" cx="335.4999" cy="234.38927" r="8" style="cursor: move;" fill-opacity="0.1"></circle> </svg> </div> It draws a simple circle. So, after document is loaded, i will give the circle a click event and it should add a css class. <script language="javascript" type="text/javascript"> $(document).ready(function()
pass field to php = data = null
I'm trying to send a value of a select list to php script. I'm using jquery/ajax. When I try to run the function, I get an error message in firebug saying that data = null - like the value is not at all passed to the script :S here's the js I'm using to pass the value btw the top bit is for something else $(function(){ $('#load').click(function(){ $.getJSON('load.php', function(data) { $('#sections').val(data.Sections); $('#fontColor').val(data.Fontcolor);
Hide() and flash object
Hello I use a flash uploader in my web application : plupload. This uploader use flash or silverlight, and I use the flash plugin(requirement from hierarchy). In our new design, we use hide, show and slideToggle function to display or not the upload div. The problem is when I do that : (just in IE 7 or 8, we don't support 6) 1 : show() the div with flash object 2 : use the flash object 3 : hide() the div 4 : show the div again 5 : javascript error when I try to use my flash object again. The plupload
Fade In Problem
I am not much of a coder - more of a code lifter, so, I ask for your patience and forgiveness... I am using the jquery library to do a simple fade in of an image when the page loads: <script type="text/javascript"> $(document).ready(function(){ $("#picz").bind("load", function () { $(this).fadeIn(600); }); }); </script> http://www.kenridgeevents.com/house.html Works as expected: the left navigation has three working links, entrance, great room, dining room. If you click
slideToggle on multiple elements causes jumpy animation in FF
When I click on the image, a small panel slides up to display information. Problem is, when I have multiple sliders on the same page, the animation gets very jumpy in Firefox, but seems fine in all other browsers (haven't tested in IE). I'm using the following code: $(document).ready(function(){ $('.image').click(function() { var slide = $(this).next('.slider'); $(slide).slideToggle(); }); $('.slider').click(function() { $(this).slideToggle();
Check Dynamically Created Input Values
When submitting a form, I would like to check the values of some fields first. These fields are dynamically generated by javascript after the page has loaded (that is, a user selected a value from a dropdown between 1 and 10, if 2 is selected, 2 inputs are generated, if 7 is selected, 7 inputs are generated etc). I think I understand that Jquery isn't aware of these items because they were created after the DOM was scanned. Is there any way I can 'refresh' jquery to make it aware of these new items?
foreach of while loop with jquery
hi im struggling abit i am looking to make my code expandable but i am not sure how to do it as regards to jquery in php i would do a while or foreach loop can someone help me with this. here is my code. $("ul.tabs li a").click(function (event) { // slide all content up $(".content").slideUp(); // slide this content up var content_show = $(this).attr("id"); if (content_show ==
JSONP not working for my domains
Whenever I do a JSONP call to any page I set up (either locally or on my server) all I get is the silent treatment. Firebug reports 200 OK and the response looks ok. I setup alerts boxes to popup on success or failure but neither appears. It doesn't seem to matter what url I use, nothing pops up. BUT if I use the twitter json page then I the success alert box appears as expected so there is obviously something wrong with my response but I don't know what. As an experiment I copied the twitter
Populating form with data from jQuery-UI dialog.
Hi, I have a jQuery-UI dialog that gets populated via ajax to implement an LOV. The dialog gets populated well with radio buttons for each data row. Now I want the user to be able to select a radio button and click on a button to populate a form with the selected row data. My dialog uses an overlay. Here is the code: // handle the submision after selecting LOV row $(".get").live("click", function() { // the selected radio button var radio = $dialog.find("input[type='radio']:checked");
Run a function on fields within a specific div only
Hi all, I have had some success with this function but I'm doing something wrong which I can't get a handle on. Any help or pointers appreciated. I have a set of jQuery tabs which I am using to divide a long form up into sections. For the first 'background' section I want each single field to be updated once their value has been changed by the user. This is done using a jquery.post() function which is working perfectly. But when the user is changing fields in the 'history' or other tabs, I don't
get data from database onto a form
I managed to send data from the form using php & jquery/ajax. But now I need to be able to load that data back onto the form. Is it somehow possible to use the code I have for sending the data to retrieve the data? here's the jquery // JavaScript Document $(function(){ $('.save').click(function(){ var sections = $('#sections').attr('value'); var fontColor = $('#fontColor').attr('value'); var bgcolor = $('#bgcolor').attr('value'); var font = $('#font').attr('value'); var fontSize
focus whole html excepts 1 element
I currently have the following code: But when i press the select (dropdown menu) de inputfield description gets focused too. $('html:not(select)').click(function(){ $('input[name=description]').focus(); });This also didn't work: $('html').not('select').click(function(){ $('input[name=description]').focus(); });
Setting css on a TD
I have a simple table in which there are a collection of TRs inside a TBODY and a collection of TDs in each TR. I have a jQuery click event bound to a single TD in each TR. When I click on this TD I use css to set its background color. When I click on the bound TD in another TR I want to be able to change the previously selected TD's background color and then change the newly clicked TD to a new background color. My click binding appears as follows: .click( function(){ var nRow
Chrome browser not submitting new hidden form value
Has anybody seen this behaviour before. Upon certain selections within an HTML select, I replace a second HTML select element with a hidden form value (via an ajax call): <input type="hidden" name="bootsReqd" value="1"/> However, upon submit, bootsReqd holds a value of -2 when using Google Chrome (the original value from the replaced HTML select. Firefox submits the new correct value of -1 however. Does anybody have any ideas on a solution?
Access jquery tab content
I have implemented a jquery tab, which displays a form with some fields into it. I want to access those field values through javascript that are displayed in the tab. I am new to JQuery please help.
how to create a border hover effect?
Hi. My name is Mark. I am trying to create a border effect on hover so when the use hovers over a link the css border changes color to create some interactivity and also as a point of reference too. Here is the code so far I just do not know how to implement the fade effect for the border to fade on hover; Is there any way that I can simply change this code to work with it. Any help would be great. Thanks a bunch! $(document).ready(function(){ $(".recentbot3, .recentLeft, .recentbot2, .recentcol1,
Disable Buttons on a Modal Window
How would I disable the 'Do Something Else' button within the JQuery Modal Window based on a boolean value. Say my boolean is IsButtonDisabled, how would I then use this with the buttons section below. IsButtonDisabled would be set to either true or false before the following code executed but the code would be executed several times in a session and each time IsButtonDisabled could be different. this.CustomDialog = $('#DlgId').dialog({ bgiframe: true, height: 480, width: 650, modal: true, autoOpen:
Simple Problem
I'm wondering if anyone can see what I am doing wrong? It's been a little while since I last used jquery so I think I'm missing something fairly simple. I'm using the onchange event of an HTML select element to fire an ajax call with the intention of replacing the contents of a div element elsewhere in the page. However, the .html(data) call is having no effect on the div (nor is .remove() when testing that). Here is the code so far: Firefox/Firebug is showing the ajax call firing and returning
Events on elements returned using ajax
Hi all! I'm pretty new to JQuery and this might be somewhat trivial. But right now its quite an issue to me :-) I define a "click" event on "a" tags in the ready part of a page. It fires just fine when I click on any "a" tag on the page. I then have a button which sets the content of a div using ajax. This content contains a couple of "a" tags. The issue now is that the "click" event does NOT fire when clicking on these tags. I suspect it is because they did not exist when the page was initially
is there a way to highlight an element inside the parent element when the mouse hovers over a child element?
or to explain this better, i have a menu generated by a list with nested lists. i want the parent link to stay highlighted when the mouse hovers over the sub menus. because those sub menus are also generated by jquery (qtip), CSS alone won't do it (tried ul.topnav li:hover a {background-color: #F00;}). is there a way to do this using jquery? my menu list looks like this: <ul class="topnav"> <li><a href="#">Home</a></li> <li class="subnav"> <a href="#">Tutorials</a> <ul> <li><a href="#">Sub Nav Link</a></li>
Show/Hide Divs Page Flicker / Reloads
This might be a bit vague... but I am having issues. I want a very simple slider that works smoothly especially on all browsers. here is that code that I am using. //<![CDATA[ function showSlidingDiv1(){ $("#slidingDiv1").animate({"width": "toggle"}, { duration: 1000 }); } function showSlidingDiv2(){ $("#slidingDiv2").animate({"width": "toggle"}, { duration: 1000 }); } function showSlidingDiv3(){ $("#slidingDiv3").animate({"width": "toggle"}, { duration: 1000 }); } //]]> When I click on a ID link
Syntax Help for Calling a Function
I am calling a function to do form validation when a specific radio button is checked. In the code below I am trying to make the click event run my entClick function. I think I just have the syntax wrong. When I click the radio button and press submit, it doesn't generate the validation I need. if( $('[id=entButton]:checked').length!=0) { $('fieldset[id=invForm]').hide(); $('input[name=selector]').click(function entClick() { var id = '#' + this.id.replace(/Button/, 'Form');
Creating objects from within .each() question
Hi I have a tab compopenet object that works by passing a dom element to a constructor... which then finds all the relative elements to that element using .find() and adds the necessary behaviour. Now, since I have multiple tab components on the same page, I'm using each() to iterate through the dom elements and pass each into the tab component constructor function. Looks something like this: function TabComponent(el) { .... } $('div.tabs').each ( function() { new TabComponent($(this));
Using switchClass to make an element fade in?
Does this work? If so, how? Using display none for the initial hidden state results in the element suddenly appearing after the transition is complete.
scrollTo with EaseIn or EaseOut ?
I would like to scroll the window to a document element but have the scrolling done with an Ease In / Out. No linear, no bouncing, just a simple ease in + ease out. Is there a plugin for scrolling to a document element with simple easing? Thanks
get column values on textbox change event in gridview using jquery!
Hi, I have copied the following code from gridview (only first row). There is one textbox and two read only columns I want to access the values of second “<td>100123</td>” and third column “<td>ABC Primary School</td>” using Jquery on textbox events either onkeypress or textchange or onblur. <tr style="background-color:#F7F7DE;"> <td><input name="ctl00$ContentPlaceHolder1$GdVAllFilesWithSortingOption$ctl02$txtgrade" type="text" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$GdVAllFilesWithSortingOption$ctl02$txtgrade\',\'\')',
Cross Browser Issue [Not sure if it's jQuery or CSS]
http://geisslersann.com/index_dm3_site_content4.html The page works on Firefox and IE, but when I used it in Safari and Chrome it just breaks. Is it an issue with jQuery or my CSS. I attached the documents as well. When you click the image or more. It switches the visibility of the div with another div. Thanks in advance.
Next Page