Using document ready twice causing conflicts...
Hi there. To start, I'm a newb at jQuery. In fact, newb might be pushing it, cause really, I'm just trying to add a jQuery script to our existing site which already has a jQuery script. When I add the second jQuery script, both lose functionality. I have looked at several sites outlining how to make them play together, but I just can't figure it out. Could someone look at what I'm trying to merge and point me in the correct direction? My boss is breathing down my neck and I'm just a damn receptionist.
dropdown and event handler binding.
Hi, i am trying to make a dependable dropdown using ajax and jquery.. I'm trying to do it in the following way... url = 'topics.php?sectionid='+ $('#section').val(); $('#topics').load(url).show(); $('#topic').bind('change', function(event) { topicChangeHandler(); });The dropdown is coming but the onchange event handler is not getting attached. But if I use an alert before attaching the
How To: Get 'screen' [x, y] location of an element.
Some element in the doc, say #button, what is it's absolute 'screen' location? I know how to calculate it in plain JS but am new to jQuery. ...and yes, I have looked in the API doc but with no luck. Anyone? ...thanks Greg
Background color only
I have a DIV with some text. I want to change the background color in a continouse loop while the text remains visible. Below is the code that I wrote, but everythings fades not just the background. How can I correct this? //continual fade function lowerLeftFadeIn() { $('#lowerLeft').fadeOut(10000).css('background-color' , '#ffff99'), lowerLeftFadeOut(); } function lowerLeftFadeOut() { $('#lowerLeft').fadeIn(10000).css('background-color' , '#ffff99'), lowerLeftFadeIn(); } $(document).ready(function(){
fadeOut - fadeIn question
I have a situation where I'm pulling text from an array. What I want to do with a button click is to replace the current text, having the current text fade out, then loading the new text and fade in. I've tried a number of different approaches, but what appears to happen is the new text loads, fades out and then fades in. I tried to do this in two ways as shown, first with one line of code then with two, trying to separate commands. If someone could point me in the right direction I would appreciate
Need help with accordion functionality please!
My website utilizes both .php and .html. I am hoping to add some accordion functionality to the body of one of the html pages. I downloaded the JQuery.UI.1.7.2.custom.min.js code and uploaded it to my .js folder. I think inserted the following into my html code at the top with all of the other similar code (one or two of these lines seem to have inserted themselves): <script type="text/javascript" src="newauthorsite/wp-content/themes/iBlogPro3/js/jquery-ui-1.7.2.custom.js"></script> <script type="text/javascript">
cell styling in a datagrid - any examples available?
I'd like to display dynamic data in a grid and style each cell based on the underlying data values (e.g. if a date is past due show in red; if a value is -ve show in red, bold font etc). (sort of like a spreadsheet, but without the need for any bells/whistles) Can this be done with Jquery and/or plugins? Anyone out there seen/done this - I'd like to find a working example to clone. I realize there may be several different jquery datagrids out there - any suggestions re the most flexible/useful for
jQuery seems to ignore content from .load
I successfully load some content at the beginning of a document.ready script with: $('#leftColumnContent').load(contentToLoad); What works: rollovers on content that didn't use .load: $('img#mainNavNews').hover(function () { this.src = 'images/nav/news_dn.png'; }, function () { this.src = 'images/nav/news_up.png'; }); $('#leftColumnContent').load(contentToLoad); $('img#mainNavNews').hover(function () { this.src = 'images/nav/news_dn.png'; }, function () { this.src = 'images/nav/news_up.png'; });What
complicated assigning of alternating css and images to h2 tags according to pageY values
i have a 4-column (225px each) layout... it's split into tables. some take all four columns, others take one, some take two, etc. depending on where the sections are on the page, i want the table cell that has an h2 tag in it to alternate colors (green and ltgreen) depending on it's pageY value. in the sequence, if an h2 tag is found at the same pageY value as the previous one, they get the same color applied to them. i also want an image that's next to the h2 tag to change, depending on what number
Elastic Thumbnails: Tweaking this code for smoother motion
Special thanks to Comslash for modifying the code at http://buildinternet.com/2009/09/sproing-make-an-elastic-thumbnail-menu/ . Really appreciate the help. He modified it to allow for special displays of text when the thumbnail expands. You can see what he did online at http://beta.ponderosatreeservice.com/beta3/ The problem I'm having is minor but irritating. When you view the script in FF 3.6 it expands smoothly and works well. When I use it in IE/Chrome/Safari it's a bit jumpy when expanding.
Automate Cycle
Link to website--><a href="http://www.sas-support.com">sas</a> Hi there! Im fairly new to jquery. On my homepage I have the cycle plugin installed which works great. But I want it to be automated. I have looked at several explanations and demos on malsup. I tried to do it with my basic knowledge but everything gets really messy. I really hope anyone is willing to help me. Here is the script that is used: <code> jQuery(function($){ $(document).pngFix(); Cufon.replace('.lavaLamp li a', { fontFamily:
Fade All DIV's Besides DIV Hovering Over
hello, What I have is a set of 6 DIV's inline that are set at 100% opacity. When you hover over one of the six DIV's the other five DIV's fade to 50% opacity. Then when you fnOut the opacity of the all the DIV's go back up to 100%. I've almost got it, but I need a little more knowledge about the jQuery selectors and filters. What I have right now, (I know it's not what I want), is I set the :not(#DIV ID NAME). What I really want to do is tell jQuery :not(THE DIV THAT IS MOUSEOVER). If you could help
Dynamic PHP vars with unobtrusive JS
Hello!, I'm a newbie in JQuery, and since I work with it I follow the principles of unobtrusive JS; however, since I don't know how to pass PHP dynamic variables to my JQuery scripts I always end up doing weird things like the following: In my HTML+PHP: <div id="mapPanel"> <ul> <li><?php echo $company['Company']['latitude']; ?></li> <li><?php echo $company['Company']['longitude']; ?></li> <li><?php echo $company['Company']['company'];
Jquery in a jquery problems.
Please help me. i have problems loading a jquery accordion or any other jquery widget in a content which is loaded by ajax. in the example below, i am trying to load the same page in the ajax tab which seems impossible. the main page is test.php. i tried to load test.php in the 2nd tab, but it would not appear the same way as the original. This is very important as i would like to build a ajax tab based website with accordion in each tabs. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
Inserting new DOM nodes breaks tabbing, how do I make it stop?
I have XHTML (1.0 transitional) that looks as follows <div id="projectContent"> <div class="project" id="dataLorem"> <div class="projectImage"> <img src="images/lorem-ipsum.png" alt="image alt text" /> </div> <div class="projectDataHead"> <div class="projectClient"> <div class="dataName">Client</div> <div class="dataValue">Lorem Ipsum</div> </div> <div class="projectTitle">
hover and active states on button/img
I'm trying to add an active state on my imgs/buttons. I have a hover effect as follows: $(document).ready(function(){ $(".folio,.services,.contact,.about").fadeTo("fast",0.5); $(".folio,.services,.contact,.about").hover( function() {$(this).fadeTo("fast",1);}, function() {$(this).fadeTo("fast",0.5);}); $(".folio,.services,.contact,.about").click(function(){ if($(".active").length) { $(".active").removeClass("active"); $(this).addClass("active"); } else { $(this).addClass("active")};});
HOWTO Migrate to jquery
Hi all!! I have a big web project with JSP, java (.class files), css and JS. I want to migrate to JQuery but I don't know how to start. Our web project have a lot of JS written by us, some ajax functions by us with callback, many function called by the ajax. We have some hided div that can be shown by JS, an Taxonomy with drag & drop, cross-frame functions, many many many forms, many frames, an Setup() function on any page, some pseudo-class on JS like: var some_pseudo-class = { somevariable:
Create event based on select in a selectlist
Hi, I am trying to figure out a problem I have here. When a user select something in a selectlist I want textfields to pop up beneath it. This is what I have for now: <select id="edit-submitted-hur-manga-personer" class="form-select" name="submitted[hur_manga_personer]"> <option value="">Choose...</option> <option value="1">1 Person</option> <option value="2">2 Persons</option> <option value="3">3 Persons</option> <option value="4">4 Persons</option> </select> $(document).ready(function(){ if ($("#edit-submitted-hur-manga-personer
remove and appendTo
Hi, I think i didn't grasp something very basic... I've a callback that receives some HTML from a php script (stored in data). the HTML is something like that: <div> <h1>title</h1> <p>lalala</p> <form .....></form> </div> now I want to append every thing beside the form to another div. $(data).remove('form').appendTo('#mydiv');what is wrong with this? thanks a lot
Check if textarea is empty
<script> if (comment.value==""){ $(".button").hide() } else { $(".button").show() }; </script> <textarea name="comment"></textarea> So my problem is, I don't know how I am supposed to check if a textarea is empty. I want to accomplish this "live" effect thing: If textarea is empty, disable/hide .button else show .button
can any body help me to learn code ignator
hi every body, me honey i am php developer in lahore, pakistan. i want to learn code ignator can you help me?
Problem with sending form
Hi, I am new with jQuery. I copied an open source code for sending a contact us form using jQuery. You can see the form at Website at the bottom right side yellow box. The input fields are as follows: Name, Email, Tel, Comments. This is my JS file the validates the form and sends to PHP file. $(document).ready(function() { //if submit button is clicked $('#send_form').click(function () { function validEmail(str) { return (str.indexOf(".") > 2) &&
Menu a:hover function?
Hi again, I'm new to jQuery. I have a great looking CSS drop menu working on this test site. With help I managed to get the sub-menu to slide out nicely, now to increase its spiffyness even further I want to animate the hover function on each link so it fades to the next image (which is actually part of the same image if you look closely) on mouseover. Here's the image that I made for the links. The top 30px is visible by default then the background slides -30px on hover, -60px on click, -90px on
Help: Iterate through unknown number of elements, apply function
Hey there, newbie here... Still getting a grasp on jQuery, so I'm probably overthinking or extra-typing... Anyway, I have 2 select boxes. I can populate SelectA with items from a database, move the items from selectA to selectB and back again by clicking "add" and "remove"... BASIC CODE (HTML): <div> <select multiple id="selectA"> <?php //populate with database information ?> </select> add >> </div> <div> <select multiple id="selectB"></select> << remove </div> (JQUERY):
How to determine if class exists on page
Hi there. I need to determine whether a class exists on a page. I have 4 boxes: #box1, #box2, #box3, #box4 and at any time any of these may have the class "active" (depending on whether any box has been clicked or unclicked (toggled), etc). How do I best determine if the "active" class exists? Frankly, I'd prefer to determine whether it does not exist. Would that best be done using ".length"? TIA.
Looking for jQuery expert
I'm using the script found at http://buildinternet.com/2009/09/sproing-make-an-elastic-thumbnail-menu/ on my website at http://beta.ponderosatreeservice.com/beta2/index2.html# (work in progress). I want to modify the script as per my writeup at http://docs.google.com/Doc?docid=0AUjVEz7ApSYfZGQ3M3ZubWZfMjE3Zmg3M2t6aHA&hl=en Basically expand the thumbnail when hovering over it which also causes it to change colors and add additional text. I'm basically looking to duplicate the effect found at http://www.virtualpbx.com
How to create collapsable window using JQuery?
Hi I'm new to Jquery and I am really want to use this in my projects. But I dont know where to start. I have a project now that I think the solution is to use this framework. Please see the link ValidOnline Or see the image below. This is the normal window after search.... And this is the Expanded window when you click Mere Info... The problem in my current code is I need to manually input the ID in my JS code which is not good when I turn over the project. Please help me. This project is based from
Form "refresh"/page reload needed to update data shown, but can't get INITIAL information to load through same function
I have the form "refreshing" like I want through an ajax call -- refreshCategories(), but it's AFTER I submit the first time (the first time I just have regular php code spilling out stuff from mySQL into my page - so I can test it). After I submit it the first time, I can get a second set of "refreshed" fields above the static code (the mySQL statements) by setting the .val() value of the DIV that is there. The inputs all work as expected from these "new" fields - cool. When I try to call the function
highlight rows based on cell values
Hi all, I'm new to JQuery so Ihought I'd post here to see if what I want to do is possible before spending ages trying to do it. I have a table and each row has (amongst other things) three date/times formatted like this: 23-Feb-2010 11:20:45 One is an event time and the other two are deadlines. I want to highlight the row in a different color if the event time is after either of the deadlines. Is this do-able? I'm using richfaces so my code would have to be formatted something like this: <rich:jQuery
Clickable Menu with additional fading information on hover
hi there, i am looking for a plugin that does the following. let's say i have a main navigation on my webpage that looks somewhat like this: nothing special so far, 5 buttons, you can click on them and get to your desired page. now i want some additional information to be displayed when the user HOVERS (!) over the menu buttons. like this: the information-field expands downwards, overlapping the content of the actual page. So you get a preview of the page you want to navigate to and can already choose
Is it Possible to Apply JQuery Extensions to Custom Objects?
Hi there, this feels like a FAQ but I can't find it anywhere so: I have a custom class/object that, amongst other things, wraps a call to a JSON web service. I have implemented a custom event for this object using plain JS but as we are rolling out JQuery to this project I'd like to take advantage of the clean bind() and trigger() methods. So: is it valid to apply the JQuery extensions to a non-DOM object? Also, is it possible to do this in the object ctor, something like $(this);for example? Thanks,
jquery confict
Hi, I have a problem with my joomla website. After intalation of slide show module: http://extensions.joomla.org/extensions/news-display/articles-showcase/8710 that contains: http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js my simple hover.js script stopped working Why are they in confict and how can I slove it? hover.js: window.addEvent('domready', function() { var list = $$('.sf-menu li li a'); list.each(function(element) { var fx = new
changing class
i, i want to change the class on the active link and delete the class on the other links function golabel(label,hoehe) { if (movieIsLoaded(thisMovie(movieName))) { thisMovie(movieName).TGotoLabel("_level0/",label); $('div#header').height(hoehe); $('div#flashslide').height(hoehe);}obmain = document.getElementById('nav'); $('webcam').addClass("act"); //works $(this).addClass("act"); //does not works $(label).addClass("act"); //does not works } why does $(this).addClass("act");
Simplifying multiple js files
Hello. I am starting to build a new site and I've found a function that works perfectly. The only thing bothering me is right now I have to link a new js file for each function. <script src="jquery-1.4.1.min.js"></script> <script src="first.js"></script> <script src="second.js"></script> <script src="third.js"></script> I think I might be able to use an if elseif else statement, but I'm not sure how. Here is a sample of one of the js files: $(document).ready(function () { var $div1 = $('.page1');
Form Submission After Validation
Hello everyone, I'm writing a basic form for user login on my website. It has a simple username, password, submit button. So far, the jQuery I have written works and it's as follows: $(document).ready(function() { $('form#loginForm').submit(function() { var values = $('#loginForm').serialize(); var myform_return = function(data) { alert(data); if(data == true){ alert('they equal'); return true;
Using KeyUp();, I can't seem to figure it out.
Hey there everyone. I'm having some trouble using the KeyUp() API. What I'm trying to do basically, is have an event trigger after a specific word is typed into an input field on a page. Everyone so far has told me to use keyup to catch the specific text, and then execute a command. The only problem is, I'm having a hard time figuring it out! Would anyone mind explaining to me how I might be able to do this? I'm not looking specifically just for the code, I'd really like the code, but I'd also like
hiding outbound links?
Hello Folks, I was using http://www.darxx.com/ to check my website... at the bottom of the analysis page I got the following msg. Tip: Change outbound links with jQuery: css: .hreflink{cursor:pointer;} html: <span class="hreflink" title="http://www.darxx.com">Darxx</span> Jquery example: $(".hreflink").click(function(){ window.location.href = $(this).attr('title'); }); I am sort of lost of how to make this work. I am NOT a JS person. :) Can someone please fill in the blanks? The CSS
Changing from Prototype to jQuery, equalvent of creating a class to encapsulate functionality
Hi all, I'm writing a widget using jGrowl. I need this widget to periodically poll the server and queue new messages into the jGrowl message queue. This itself is pretty straight forward. In prototype, I'd simply create a controller class that hits a JSON service, then parses the response and queue's up the messages. I'm having a hard time finding anything like "jQuery for Prototype users". Does anyone know of any good example on how to cleanly encapsulate this functionality in jQuery similar
transition from DWR
I am new to JQuery, but I have been using DWR. what is difference between DWR and JQuery ? what plugin has table add, edit and delete function, just like this link http://directwebremoting.org/dwr-demo/people/index.html , editable table Thanks.
Get Custom Attribute ID and assign color to a grid row.
Hi All, i am pretty new to Jquery. Here what i need to solove. I am using a 3rd party tool that will render HTML form based on some XML at runtime. It will get a recordset and create a grid. Based on what's in a cell i need to change a cell/row color. I view source on the html page and i see that there is a custom element that gets created <row _ID = "1". I need to change the font color of this row (even better a cell). How can i get this row element and attraipbute '"_ID" ? I am attaching a file
Next Page