How do I dynamically center Menu
I am trying to dynamically center the navigation menu. JSFiddle sample Here I assume this would work not working
Embed Google Map in Colorbox
Hey all, I am using the following code to embed Google Maps in Colorbox but i am getting this error in Firebug console: TypeError: window.initializeGeneral is not a function not sure what's wrong here.. any ideas? thanks in advance for your help Andy jQuery(document).ready(function() { jQuery(".fmap").colorbox({ html:'<div id="map_canvas_all" style="width:730px; height:550px;"></div>', scrolling:false, width:"750px", height:"570px", onComplete:function(){ loadScriptGeneral();
How to detect which Li was clicked
I have several menu items and I would like to get the Val() into a var so that I can popup the correct overlay/popup. What is a way to do that? <div id="navcontainer"> <ul id="navlist"> <li><a id="showPopup1" href="#">Page 1</a></li> <li><a id="showPopup2" href="#">Page 2</a></li> <li><a id="showPopup3" href="#">Page 3</a></li> <li><a id="showPopup4" href="#">Page 4</a></li> </ul> </div><!--end navcontainer-->Thanks... Todd
How to change the background color of a row in a table?
Hi I am trying to change the background color of a row within a table when the mouse is over that row. I want to do that on all the tables in my site. I found this code and tried to use it but it is not working $(document).ready(function() { //this code create the hover effect over the row's in every table $('table tr').hover(function() { $(this).addClass('tr_hover'); }, function() { $(this).removeClass('tr_hover'); }); }); I have this css class .tr_hover { background-color: #FFFF99; }
Esc key not detected in Chrome or Safari
Not sure how to fix the problem of the Esc key not detected in Chrome or Safari; is detected in Firefox and IE. $(document).ready(function(){ //LOADING POPUP //Click the button event! $("#button").click(function(){ //centering with css centerPopup(); //load popup loadPopup(); }); //CLOSING POPUP //Click the x event! $("#popupContactClose").click(function(){ disablePopup(); }); //Click out event! $("#backgroundPopup").click(function(){ disablePopup(); }); //Press Escape event! $(document).keypress(function(e){
Re-Arranging Div Order on Mobile
Hello All - I am trying to use jQuery to change the order of div's. On the desktop version it have a product image on the left then the next on the right so and so fourth. But when it gets to the mobile version (done with media queries) and the use of 1140px grid, i get the image above and then below etc. I want it to be consistant with the image above and text below. I thought that using jQuery might be the best way to fix this. But i am struggling to make it work. here is the code i am trying
replace long html string with new html string??
What's the most best way to do this?? Make the 1st string become the 2nd string?? I don't think any of the DOM manipulation functions would do this?? Actual 1st string: <span class="Required FormFieldRequired" style="visibility: visible">*</span> <span class="FormFieldLabel">Email Address:</span> Desired 2nd string: <span class="FormFieldLabel">Email Address:</span> <span class="Required FormFieldRequired" style="visibility: visible">*</span> I know it's string manipulation but I can't think what
Pagination and ... (dots) between first, last and middle
Hi there, I am trying to get my pagination to display like the attached screen shot: At the moment my pagination looks like this: As you can see pages 1 to 20 is too long. It would be better (for this example) for number 1 to be highlighted. Then display: 1 2 3 4 5 ... 20 and in the below cases: 1 ...7 8 9 10 ... 20 and 1 ... 16 17 18 19 20 This is the code for the area I wish to change. If anyone can help that would be great! :) http://jsfiddle.net/RXuE4/4/
Change url when dropdown item is selected
I've got three dropdown boxes on the same page and when a value is selected I need it to change the page to the url that is in the value field. All the drop down boxes are exactly the same except for the values. Below I have my html and then the js I thought might work but evidently doesn't. <script type="text/javascript"> $(document).getElementByClass('images-size-dropdown').selectedIndex(function(){ if ($(this).value != 'None') { window.location.href = "http://www.mysite.com/'
Autocomplete this.menu undefined
I use autocomplete for my website, but i got this error: TypeError: this.menu is undefined this._on( this.menu.element, {What can i do? Sourcecode: $search_input .autocomplete({ "minLength":3, "source":function(request, response) { var plugin = $.pluginRegistration.getPluginReference("jquery.search",{"view":"form"}); var values = { ..... };
Form button that display a google maps
Hello I would like to do a simple App that display a Button, after the click I would like to view a google maps with the track from my current position to a fix position. I believe that the code is something like this: <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="apple-mobile-web-app- capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" />
Horizontal icon menu (accordian)
Hi guys, I'm having trouble creating something along the lines of an accordian menu. I'm trying to keep it to a minimum as code goes, so that it doesn't way on the page and can easily be used in mobile or desktop. I've managed to animate the menu to open, but now I wanted to close an open button if I click on another. I supoose it's a simple "if" "else" statement, but I've tried over and over again and can't seem to get it to work as I wish. Here goes the code as I have it: HTML <nav>
ToolTip Question(s)
This is my first attempt at trying to use a tooltip and I must not be doing something right, because I haven't gotten it to work yet. I'm currently using JQuery 1.8.3 along with JQuery UI 1.9.2.custom.js. My code for trying to display it looks like this(JQuery.noConfllict is currently turned on so jq represents my reference to JQuery): jq( aslctr ).tooltip("option",{ content: reqName, show: { duration: 1000 }, position: { my: "left+100 center+10" } } ); jq( aslctr ).tooltip( "open");
on click add class not working?
hello. im building an image slider and i can't get the addClass to work when you click on a nav bullet button. this code adds a image to each li (for each image in the slider) $(document).ready(function() { $('.carousel_data .carousel_item').each(function(index){ $('#carousel-btns ul li').append('<a class="navItem"><img src="images/non-active-btn.png"></a>'); }); that gives me: <div id="carousel-btns"> <ul> <li> <a class="navItem">
sidebar jquery
Hi, I would like my animate sidebar to start to shift only when its bottom part reached the middle (vertical position) of the window. So far the jquery script which I use makes my sidebar to move immediately after the top of the sidebar reach the top of the window... This situation was ok until my sidebar was of small dimensions... but now, I added new content and it scroll down before i can reach the end of it. what to do? This is the jQuery code: jQuery(function() { var jQuerysidebar = jQuery("#sidebar"),
Uploading file
I want to upload and send it to server with some data using ajax call. after submission i need to get back some json data from server and display it in Html Page Please help me how to do it. Thanks in advance Regards G.Lenin
Using addClass and removeClass
I have many required textboxes on my form. Each textbox has a label to the left of them. Next to the label, I have a red icon that I want to change to a green icon when its corresponding textbox is changed. The below code is not working. Can someone show me how I would do this? // CSS .required { background: #ffffff url(dot_red.png) no-repeat 0 0; padding-left: 20px; } .filled { background: #ffffff url(dot_grn.png) no-repeat 0 0; padding-left: 20px; } // jQuery $(function () { $(".required").change(function
Just a parting shot to whoever's listening (if anyone)...
I have just spent days and days and days trying to get simple things working with jQuery. Complete and utter waste of time. [I'm using Visual Studio 2008]. Can't get intellisense to work even after SP1 and Hotfix and referencing the vsdocs file same folder same version blah blah (wot a performance!!!) Can't get VB to initiate a simple pop-up even after loads of research, coding, recoding, amended re-amending. Although JQuery stuff looks really pretty, it is so complex all the setup that its just
Only allow droppable object in certain container???
Hi People, Here is my code which allows me to drag a div on to another div. It then sets a they hidden variables (position) and does a post back to save those variables into an SQL database. My problem is the user can drag and drop the pointer anywhere on the screen and I only want them to be able to drop into the divPhoto container. <head runat="server"> <title></title> <link href="CSS/Default.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Droppable: dragging and dropping an image Multiple times to different divs
Hi, I am new to JQuery. I need to drag and drop an image from a list of images to 3 different image holders. An image can be dragged and dropped multiple times. In the demo available in this site, an image can be dragged and dropped only once. I also need to store image name (Preferable hidden field). Can anyone please help me?
animate relative div understanding problem
Hi all, I posted this question in another place but didn’t get any answers, so I will try again in a little more abstract way. I am having trouble in understanding a principle thing. Is it possible to animate (=move) a div that is relative - but so that the attached divs that lay in the flow of the page behind it change their position, too? I am having big troubles to make this come true properly. To explain: no problem to put other divs INSIDE the animated div and make them so move parallel to
Onclick change class!
In this web page when you click on Paypal's check box it should show the paypal text but it doesn't! It shows the credit card ok but I cant figure out what I am doing wrong with the pay pal checkbox! Any help would be appreciated. Thanks
Browser resize condition not always firing properly
I've had no joy on SO or IRC - here's hoping. When resizing the browser, I have a simple function that checks the window ratio in order to affect layout, part of which is: if ( jQ(window).width() > ($elemH*2) ) /* Target widest settings */ { $body.addClass('wide').removeClass('tall'); $elemW = ($elemH*2); productWideSize(); The above works perfectly, with 0 issues (I've included it for purely for context). The problem seems to lie in `productWideSize()`, which is as follows: function
jquery get info from time string
Hello, This is the date output in console.log() Date {Sat Mar 23 2013 09:00:00 GMT-0400 (AST)} Right now I'm using the normal getHours(), getMinutes() method and for me it is working fine. If someone in a different timezone checks my console.log() output it will be the same string but it gives a different time. Question: Is there a possibility to get the time info as given and ignore the "GMT-0400 (AST)" part In this way the time shown on my website (from this example) will be 09:00 all over the
is toggleClass what I need to change this border css??
I have this css which MUST be changed by jQ since it's !important and can't be changed any other way, the css is written exactly THIS way in the php file (I know, poor code not to have a blank space before the !important, not MY code though): .recaptchatable { line-height: 1em; border: 1px solid #dfdfdf!important; } What's the correct jQ to use: toggleClass, what?? I want border to become none; instaed of a solid line. Thank you, Tom P.S. Any kind of code that will change the border attribute to
Change animate to fade in/fade out with delay?
I am very new to JQuery, as far as coding goes. I have some code that slides some content in from right to left, seen here: http://biostreamcompost.com/press/ I want this to fade in, stay visible for a short time, then fade back out, then the next piece of content does the same, forever. I have tried to change the code with little success. At this point, I am asking for some help so I can see how this is done, which will help me out a lot in the future. Here is an example of how this should look
How to create a collapsable toolbar
I'm wanting to have two div's and one be collapsable. I would like it to start off in a hidden state with a button to expand/collapse it. I would like when the dive is expanded to have the page to never go past 100% height; I don't want to have to scroll to see anything.
Checkbox checked but not showing as checked
Hi have a modal window with a checkbox that i need to check/uncheck dynamically. I use this code in the click function of a link i want to open the modal window (is that right?): ... $('#fModal input[type="checkbox"]').prop("checked",true); //already tried using id, class, and others... nothing works $('#fModal').modal('show'); and if i use this alert($('#estado_categoria').is(':checked')); it shows true, but the checkbox isn't checked!.... any ideas? thanks
window[ "_notPaused"] = 1;
window[ "_notPaused"] = 1; who know what this window order ??? what this kind ???
Convert a formatted number from a text box to an actual decimal
I need to do some math against a number in a text box client. Don't really know JQuery at all so this is probably an easy question, but I need to convert a value in a text box (e.g. '100,000.00') into an actual decimal value. Can somebody point me in the right direction to do this? Thanks.
JQuery AJAX and XML
OK folks, after the silly go around with JQuery, AJAX and JSON, it's time to do it again with XML instead of JSON, though the problem might be the same. Excuse the bold font, I'm using it to distinguish comment from code. The problem with JSON is sending quotes. Double quotes (") just choke it. Multiple single quotes do the same. So I decided to try XML to see if it can swallow it any better. This does not look good... All I am trying to do is complete a circuit of using AJAX to send an XML message
How to hide a table row? (closest and prev didn't work)
I can't figure out how to hide 2 table rows. Given I pass a link to the below fucntion: function remove_fields(link) { $(link).prev("input[type=hidden]").val("1"); $(link).closest("tr.entry_header").css('background-color', 'red'); $(link).closest(".fields").hide(); } Here is a piece of HTML code: <table> <col class="project" /> <col span="7" /> <tr class="entry_header"> <td>Task</td> <td>18 Mar</td> <td>19 Mar</td> <td>20 Mar</td> <td>21 Mar</td> <td>22 Mar</td> <td>23 Mar</td> <td>24 Mar</td>
Not able to perform click event on <a> tag in dynamic table and not able to see the dynamically created table in view source
<code is used to disply table dynamically $('#showAll').click(function(){ $('#empList tr').remove(); $('#empList').append("<tr><th>EmpID</th><th>EmpName</th><th>EmpSalary</th></tr>"); $.getJSON(rootURL, function(data) { if(data.employee.length > 1){ for (var i in data.employee) { $('#empList').append('<tr><td><a class="a" href="#" value="' + data.employee[i].empID + '">'+data.employee[i].empID+'</a></td><td>
Grab Text From First TD From Dynamic Table??
Hey Guys, I built an inventory list by pulling in data from a database and placing it in a table. I built it so that the user can add, edit and delete inventory items. The first TD is the items name. I want to grab that specific name for that row item and place it in another TD. I want to use jQuery for this. Would i have to loop through that table and find the first TD of every row? <table> <tr> <td class="name">Name of item</td> <tr> <tr> <td class="description">Description
CSS and JQM: CSS class and id selectors not working
Hi, I am not sure if I have a CSS problem or a JQM problem, but I thought I'd start here. I have a JQM project which is using an external CSS file, as shown below. My problem is that the selectors on tags, and selectors on id (the ones with the #), they work. Class selectors or anything between [] does not. Any ideas anybody ??? CSS file: @media all and (min-device-width:1024px) { /* desktop style here */ img { height: 100px; width:100px; } .pages { position: relative; width: 50%; } [id |= Page]
Change footer link colors
How do i Change footer link colors?
remove 1st p tag containing br??
I found this on Stack Overflow, I can almost use this for what I need. $("p").remove(":contains('Hello')"); I need to find the first p tag on the page that contains a <br> or <br /> and remove the entire <p><br></p> I know there is a first() method but how is it used in conjunction with remove?? Can I do this?? Or how should I do this differently?? Do carriage returns within <p> tag matter?? -- that is, if the <p> and <br> and </p> are on separate lines in the source code?? $("p").first().remove(":contains('<br>')");
Find an element in html() result
Hi, How can find an element or check if any class exists on any element with $("id").html(). I want to find the desired result after html(). How can I do this??
How to remove specific link from the footer?
Hi all, Can anyone help me to remove specific link "Terms of Services" from my site footer. Please check here Terms of Services link is located at the footer right corner. Thanks
JS works when literal used as parm, but not variable
Hello, Im using an autosuggest js that my company was already using. When I use a literal in the parm it works, but not a variable. For example: var thissugg = new AutoSuggest("THISID", autosugg); // works var $thisid = $(this).attr("id"); var thissugg = new AutoSuggest($thisid, autosugg); // does not, but will contain the same value. Wazup ?
Next Page