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/'
Accordion headers not sliding inside a slidetoggled div
I have an accordion inside a div that is slidetoggled. When I expand the slidetoggled div the accordion headers pop up instantly and are not animated with the slide. Similarly, when I collapse the slidetoggled div the accordion headers stay on screen until the slide is complete and then they disappear. This is being used on IE7 if that makes a difference. Is there a way to prevent this? <h2 id='slideclick'>Click</h2> <div id='slidediv'> <div id='accordion'> <h3>section 1<h3>
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" />
Add icon to JQuery UI Tabs (float right)
I am currently using UI-Tabs with Redmound style theme. One page only has 3 tabs. I would like to add a icon<link> to the tab bar and float it in the top right corner. Is there any easy way accomplish this. I am not extremely experienced with the css behind the tabs. i would rather not just add another tab with this icon on it. Thank you, Eric
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">
How do I tell if a plugin uses ARIA correctly?
Hi. I often have to do WCAG accessibility checks as part of my testing job. Part of the specification involves checking that any custom input elements / plugins use ARIA correctly. I can do a check on the source code but quite often the word ARIA doesn't come up. So is there a way to verify that someone's Jquery slider or fancy drop down menu is accessible in this way?
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"),
Closing Colorbox from iframe - calling parent doesn't work
I have a very simple colorbox call - main page <html> <head> <link rel="stylesheet" href="colorbox.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="../jquery.colorbox.js"></script> <script> $(document).ready(function(){ $("#click").colorbox({width:"60%", height:"60%", iframe:true }); }); </script>
Call elements with jQuery after submit form
Hi, I'm new to jQuery. I've created a form with 3 sliders. The values of the 3 sliders are added and printed to a label. If the added value equals 80, a button is enabled. This works fine before the form is submitted. But after submitting the form (post to same php-page), I cannot get the values of the sliders, change the label-text and enable/disable the button again. I did manage to call the event again with .on("change",function(){ ... }); How to call/activate/bind the other elements? $("#sliders").on("change",
Scrolling headband of images
Hi everybody! I want to make headband of images scrolling endless from left to right (when the first image disappear to the right side, it appear to the left side). I'm a newbie with jQuery and i'm completely losing to find a solution to this issue. Plus, I want the ability to stop and go the animation when I want (specific event). Help! I need somebody. Help! I need someone.
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?
How to disable the Dropdown?
Hi,I am using JqueryMobile-1.3.0 and cordova-2.1.0 for iOS app.I want to disable the dropdown dynamically how to do that?I am doing like this $('#assignedToDropDown').attr('disabled', true); Using this it will become disable but it will look like active element means disable element css is not getting applied on this.
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
Why my own css does not work on first load?
Hi, I newly meet with jquery mobile and developed a web site http://www.nurrisalem.com In this web site I have a problem with css When I use css inside the any tag with style="" attribute there is no problem but When I use css inside the style tag css properties does not work on first load but When I refresh the page it works fine What might be the solution?
Setting focus on first input element
Hi All, I am new to JS, Jquery, JSON and AJAX as well. My problem is: After submitting a form, I want to focus the first input element of my home page. I think I am able focus the element but not able to see cursor inside and also not able to write anything inside. Below is the code I am using: $(document).ready(function () { $("input[type='text']:first", document.forms[0]).focus(); }); Can anyone help? Thanks
how to control the one whole class by onclick event of another class ?
Hi all, I am using the spritespin plugin. Please see this link - http://spritespin.ginie.eu/examples.html Wherever the action like mouseup, mouse down action in spritespin class takes place it will rotate 360 degree I don't want this action. I am in need of action to be control by another class. <div class="spritespin"></div> <div class="left-mov"><a href="#"></a></div> <div class="right-mov"><a href="#"></a></div> Here i want to control the
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
How to use fixed panel with multipage layout with slide transition?
Hi, I want to use fixed panel which will have navigation. On navigation click the new content will load in content section and on touch device the content should load on slide transition. But between this the panel should not close.
How to add the comma separated string value into array?
var stringValue = ["test","test1","test2"] ; How to add this comma separated string value into array?
Jquery UI Tabs and Semantic HTML: adding headings inside the unordered list items
By default, the jQuery UI tabs widget uses an unordered list to present its tabs. When using tabs for a sites' main navigation, each tab represents a major section. However, my understanding of proper semantic HTML--including how search engines give meaning to data--dictates that headings be used to denote major sections. Is it possible and semantically valid to put headings within unordered list items? E.g., with this basic HTML: <h1 ><a href="homepage.htm">Website Title</a></h1> <div id="tabs">
jQuery out of policy error
Isn't it the purpose of JQuery make life easier and more productive? To me the very main principal reason of Jquery core is solving problems about compatibility, but of course there is much more in it than that. Based on this, I agree if JQuery in some cases needs to make some things , lets say, more complex or difficult to code in pro of the compatibility, but ... (now the case) Why this rule? If you wish to use any of the meta-characters ( such as !"#$%&'()*+,./:;?@[\]`{|}~ ) as a literal part
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
How to use $.mobile.loadPage
Hi guys, I would really appreciate any help you can give me here. I have touch swipe working within a multi page template but I can't get it to work with external pages. I have one page - page1.html (please see below) <!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" /> <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
jQuery Mobile - Pop up not opening in the second page
Hello, I have Masterpage.cshtml page which consists of 3 scripts under head section <link rel="stylesheet" href="@Href("~/css/jquery.mobile-1.3.0.min.css")" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> The content rendering in the main page popup works perfectly, but once go the inner page the popup not triggering. Kindly help with this. Thanks
Swipe Content
Hello the community ! In a first time i hope my question doesn't exist already, i don't found it. And all my apologize if i doing some mistake... I'm french and not perfect in english.. I developing a Mobile version of a website and i want put in place a Swipe event for the content. I don't what swipe all the page but only the content. I show you my page example. <body> <!-- **********************PAGE ONE************************ --> <div id="page1" data-role="page" data-theme="a" > <div data-role="header"
modifying $.when() behavior?
hey guys, currently $.when() behaves similarly to Q.spread() https://github.com/kriskowal/q#combination when/apply https://github.com/cujojs/when/blob/master/docs/api.md#whenapply that is...the results of multiple promises are passed to the done/fail/progress callbacks via .apply(this, resolvedValues). Most other .all() implementations (Q.all, when.all, RSVP.all) opt to do this via .call(this, resolvedValues), resuting in an single resolvedValues argument passed to the callback rather than as separate
newbie: how do I use the demos?
I search through the jquery mobile demos, find one I'd like to try, use chrome save page to capture the files. When I load the top file of the saved page all the content is there but the formatting is not. What is the correct way to download a demo with all its associated files?
Fixed Header sometimes setting incorrect values for the page Div's min-height and Top Padding
Header with data-position="fixed" sometimes causing incorrect values for the its div[data-role="page"] parent min-height and Top Padding. When autoInitialize is taking care of things and initializing the pages (where it just renders the first page in the html) it is drawing the content under the header. Navigating with hashes in any way(Even showing a popup menu) makes it render correct, so it appears something is missing during autoInitialize to set those properly.
Why did "fade" replace "slide" as default transition?
Why did "fade" replace "slide" as the default transition? Curious if it was due to some important UX discovery or something. Thanks.
[SOLVED] Where does onclick function trigger go in flip switch?
http://jsbin.com/iboruh/3/edit why does this simple function not work? could it be because of the placement of the onclick? i found it the most logical. is there any reference stating where onclick should go in case of a flip switch? I have been to http://jquerymobile.com/demos/1.2.0/docs/forms/switch/events.html but onclick is not mentioned. ____________________________________ Answer: http://jsbin.com/iboruh/9/edit
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
Next Page