Checkbox check should automatically and slowly fadeout to unchecked
I have created a elevator functionality [there are 2 floors and corresponding to each one , there is a checkbox. Depending upon which checkbox is checked, the elevator shud move to that floor. Only thing which i am not able to implement here is: Make the checkbox check automatically and slowly fadeout to unchecked state when the orange elevator has reached that checkbox. Here is the link to the markup and script: http://jsfiddle.net/hurricaneankit/qR4uJ/
Move accordion custom icon from header to content when opened
Hello, I'm hoping someone can point me in the right direction for solving this problem. I am using an accordion and have some html in the header div (profile pic and some copy). I have positioned my (read more) icon in the lower right corner of the header div. When clicked the content div is revealed and my icon changes to a close icon. The problem is the close icon stays in the header div. I want to move the close icon to the bottom of the content div. I think what I want can be done using some
Show on click
I wrote a script that when a thumbnail is clicked that it will display an image in a separate div. It works but the problem is it switches the new image, fades and then reloads the new image. I want the old image to fade and the new one to fade in. jquery $('#portfolioLeft a.thumb').click(function() { var thumbId = $(this).attr('id'); $('#portfolioRight #portfolioMac img').fadeOut('slow'); $('#portfolioRight #portfolioMac img').attr('src', 'img/port/lrg/' +thumbId+ '.jpg').fadeIn('slow'); }); html
data-role = 'fieldcontain' does not work after ajax request
I have three fields selecion one is independent and two dependent enter if I use the three selections with fake native menu, these three selections I have them wrapped with a data-role = 'fieldcontain', when I make the Ajax request with dependent selecion one to load the corresponding selecion, all this works fine but when I make fieldcontain your css, ajax after the request I put this line: selectmenu (); probe this line: $ ("# my_page"). appendTo (". ui-page"). trigger ("create"); and now if I
Bug of $(window).resize(function(e){}) in less then IE8
If in IE6\IE7\IE8,is will trigger $(window).resize enents when change DOM, In other browser,only if change browser`s window form size can tigger this events. is this a bug?
jquery and json help
Hi Ladies and Gentlemen i want to match the value of my DropDown list with the first key from the json_encode array from php, which a basically the same. So far i have done something like this. But not working :( var testo = $('#mydropdownlist').change(function() { ($(this).val()); }); var testo2 = (myJson[41].description); console.log(testo); if(testo === testo2){ console.log('they match'); } else { console.log('they
Jquery script failing only for IE8
I am using jquery (1.8) to load data into a division using ajax. The data returned by the first ajax call is a set of html radio choices, followed by an empty divisions (say 'packagelist'). Clicking on any of these radio options makes another ajax call (function processSubgroup) and the html data returned by this call is to be loaded into the previously loaded division 'packagelist'. My jquery script is as follows.... function processSubgroup(url, val) { $.post( url, {value:val},
How can I select a dropdown list in a specific table cell?
Hi, I’m using JQuery version 1.8.11 with IE10. I have a table with a simgle row. the table id is #listTable, the <tr>id is #listTableRow and the <td> id is #days. The row has a number of cells and in each cell there is a dropdown list with the same id: #searchString. I want to be able to select the the dropdown list in the third cell and set its option to option:first.. I’ve been able to select the td with the code below but not the specific dropdown list.. How can I select the 3rd dropdown list
Review copies available for Instant jQuery Drag-and-Drop Grids How-to
We have a few e-copies of Instant jQuery Drag-and-Drop Grids How-to (http://www.packtpub.com/jquery-drag-and-drop-grids/book) available for review. If interested, just drop a line in the comments below with following required details: 1. Email address 2. Choice of website for posting your book-review (can be your blog or website, Amazon.com or goodreads.com) Instant jQuery Drag-and-Drop Grids How-to is a short, fast and focused guide on implementing amazing drag-and-drop layouts for websites
Review copies available for Instant jQuery 2.0 Table Manipulation How-to
We have a few e-copies of Instant jQuery 2.0 Table Manipulation How-to (http://www.packtpub.com/jquery-2-0-table-manipulation-how-to/book) available for review. If interested, just drop a line in the comments below with following required details: 1. Email address 2. Choice of website for posting your book-review (can be your blog or website, Amazon.com or goodreads.com) Instant jQuery 2.0 Table Manipulation How-to is a short, fast, focused guide on editing and manipulating your HTML tables.
Simple jQuery Mobile site for Windows Mobile 6.5
I'm making a webapp for a customer with many Motorola ES400 devices in use. The device runs only on Windows Mobile 6.5. The Internet Explorer does not support HTML5. I've been looking for other browsers. The only browser I found for Windows Mobile 6.5 with some HTML5 support is Opera 10. But with Opera 10 the width of the website does not fit on the display, you have to scroll in horizontal direction. In this forum I found this question 2 years ago, but no answer and obviously jQuery Mobile has changed
Scrollto and Localscroll with js 1.8.3
Hi everybody! I am trying to build an horizontal web site and for this I use Scrollto and Localscroll. I would like an effect similar towhat you can see on this site http://tibomahe.com/, but after 2 weekends trying I am still totally blocked. There are a lot of similar topics ont the forum but very few answers. Any help should be more than appreciated! Here is the js part of my html code: <script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
Resizing conflict between isotope, prettyPhoto, boostrap and slider.
I have a conflict which seems to have cascaded. A clients vCard website is using bootstrap, isotope, prettyPhoto and a jquery responsive slider. http://www.precisiondesignandconstruction.com/dev/. When an image was enlarged on the Portfolio tab using prettyPhoto the height and width of the slider on the Welcome tab ended up being set to small negative values. I was able to fix the problem with this code I was given. $("#home-tab").on("show", function() { setTimeout( function() { jQuery(".responsiveholder").trigger("resize")
Animating a list so that each list item slides from right to left
OK, so I'm wrestling with JQuery and really could use some help. I'm a total newbie, so please be gentle with me and assume very little know-how! I want to animate a bullet list, so that each item on the list slides in from the right and lands up beneath the previous bullet point. A lot like a simple Popwerpoint animation of bullets sliding across a page, one after the other, automatically without any user clicks. Any clues wold be greatly appreciated. Many thanks in advance. John
Search field for tables
I would be very pleased if you add the same search widget of listviews for table widget. I'm providing the user extense table data in my app and they are asking me for that search box I have in listviews. Is it in your plans to build something similar? Thanks!
Having trouble with .load() from a div.
I am trying to create a two column page where content content from links in the left column are loaded into the right column, all with a fancy sliding animation. With some (a lot) of help I have managed to get most of this working. However, I'm struggling on loading the external content based on which link was clicked. Basically, if I specify the url to be loaded in the jQuery everything works perfectly. However if I change this to #left so that it'll load whatever the href url is, something weird
Problem with Simple Selectors
I have simple selectors problem, In the next code, I want all divs with class "subcat" to delete themeselves when I click on them, for some reason the code doesn't work... couldn't figure it out. Thanks in advance! Code: http://pastebin.com/tBxMXQ8A
app is ready; what do you do next?
my app is not ready yet, but i want to gradually get acquainted with the next steps that are necessary to share the app. having done the research, i come up with the following steps which need to be taken. 1. convert to android using eclipse, to ios using phonegap 2. create a dedicated site in wordweb and facebook I am sure a lot is can be missing from this list - it can't be that simple ;) please share your experiences
Persistent Panel
I'm trying to create a music playing application. I wanted to have the new Panel widget act as the player/playlist. The user can go through the library by artist, album, etc. in the main view and click to add songs to the playlist, which would be stored in the Panel. I am using a multi-page format (all pages are in one html file). I know I can just dynamically load the Panel with the playlist when the user switches between pages, but I don't want the html5 music player that I have in the Panel to
Scrolling on Mobile Safari
I'm developing a website and I need the browser to scroll to an anchor. It MUST be animated, so I tried to use jQuery for that. Tried this: function goToByScroll(id){ $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow'); } It works perfectly on Firefox and Safari(on the Mac). On Mobile Safari it first goes to the top of the page, then it scrolls to the anchor I want it to scroll to. What's the trick to make it work? Thanks in advanced!
Bootstrap, progress bar
Hello to everyone. I use boostrap and one of his component is progress bar: <div class="progress progress-striped active"> <div class="bar" style="width: 40%;"></div> </div> width: 40% are our progress, what we can see. So, how can i force work progress bar? I want to put date somewhere in code, and then watch, how my progress bar moving. Please prompt me, what i need to write, thanks.
MakeScrollable function for an image
Hello everybody, I'm trying to improve my website which you can find here : Here . As you can see, you can decide the image format between 3 options: Fit (will fit the screen), Normal (Normal size image) or Full (yeah you know). My problem is that i want to make the Full (and the normal when it occurs) image scrollable. I tried to use the makescrollable function but it did not work. I found a website using full background scrollable picture, exactly as i want -> Here The original project can be find
The best way to filter 315 pieces of data
I have some tables with 315 unique prices which can be filtered by Thickness, Size, Color, Quantity - I am looking to just return the price based up user form selections. At first I thought about creating 315 items in an array like this and filtering using grep()... but now I'm wondering if this is the best method.... {"data": [ {'th':'5','dm':'1','col':'1','quan':'50','price':'4.07'}, {'th':'5','dm':'1','col':'1','quan':'100','price':'2.18'}, {'th':'1','dm':'1','col':'2','quan':'50','price':'4.92'},
How to call an element of the "root" document from a nested html code?
Hey! I've a PHP page that imports a menu bar throught an external html code. Something like this Panel.php <?php include("sideMenu.html"); ?> <div id="proof"></div> I want to place in sideMenu.html some jQuery code that can interact with the "proof" div.. How i can do that? I think that we can call Panel.php a "root" element, right?
Cycle 2 Nested slideshows
I am trying to build nested slideshows with Cycle2. I am able to create nested slideshows from the demos but I having problems with the carousel pager for the nested slideshows. I have created a jsfiddle. Here is the link. http://jsfiddle.net/generocha/GwfYy/ Any help would be greatly appreciated. Thanks.
http://api.jquerymobile.com/jQuery.widget/ NOT FOUND ERROR
Does anyone care? This has been broken for well over a month. Does anyone even look at the documentation pages for jQuery Mobile?
Listview with collapsable listview inside
HI guys, I've been experimenting around with the listview but can't seem to find a good solution for the following issue. Maybe one of you guys knows a solution, else I need to submit it as an new idea. I have the following list: * Country 1 (inside should be collapsed) * City 1 * City 2 * City 3 * Country 2 (inside should be collapsed) * City x I've implemented it as a listview, since that gives me some nice features like the search (data-filter). But the trouble starts
ajax post-request, longer strings are not transmitted
Hey, i try to transmit some text from a html-textarea by an post request. When the content of the textarea exceeds roundabout 500 characters (this isn't a very long string...) then only an empty string ist transmitted. I already checked the server-settings, they seem to be ok! When you take a look at the code, then you see two forms, form "mailform2" sinple transmit the content with a submit button without ajax. Then everything is fine and even veeery long strings are transmitted, so i believe it
Possible jQuery bug with iPhone Safari
I have a problem with the animate function in Safari on iPhone 3.1.2. If I click a div with id #link, that has a click handler like this: $('#link').click(function(){ $('html,body').animate({scrollTop:$('#bottom').offset().top},5000); }); Instead of animating from the current scrollposition to the #bottom, it always starts from the top. If I want it to scroll from bottom to top, it just jumps directly to the top without animating, with this code: $('#link2').click(function(){ $('html,body').animate({scrollTop:0},5000);
Apple iOS .animate() Horizontal Page Scroll Bug?
I have an entire responsive page that scrolls both horizontally (it's horizontally scrollable to 300% of the visible window) and vertically (lets say with the click of a button perhaps for ease). On apple mobile devices, when I attempt to do a horizontal .animate function the vertical scroll always resets to 0 (the top of the page) - while the horizontal scroll works just fine. I've even tried to set scrollTop to a given position within the animate, and it still does the same thing. I can't seem
validator
The jquery validator pluging is not validating with the W3C: Line 190, Column 36: The for attribute of the label element must refer to a form control. <label for="topic" class="error">Please select at least two topics you'd lik… Does anyone know if there is a solution to this? I'm new to jquery so it might be something simple.
Creating a simple jQuery image slider
I am in the process of creating a simple image slider. The script works however it loads the second to last and last image/text at the same time on top of each other. It then takes about 7 seconds before it seems to oad the code and work. http://project.josephmanning.com/jm Is the temp site while I develop the site. HTML <div id="homeSlider"> <div id="sliderWhole"> <div id="slideShow"> <div class="slideContainer show"><div class="textHover"><span><h5>O'Riada-McCarty-Manning Academy of Irish Dance</h5>Built
How to use changePage to open a login dialog on first load?
Have a multi-page site and trying to load a login page when the site is first visited. However the login page (which is a dialog) pops up for a second and then disappears again and the original page loads. I want the user to be able to bookmark any of the pages if they want to directly visit one of them instead of the default page but still have the login screen shown. Am I binding to the wrong event? Thanks. $(document).bind("mobileinit", function() { $('[data-role="page"]').live("pageshow",function(){doLogin()});
Jquery not working at all =/
I looked through a few threads but couldn't figure out why my script isn't working =/ I decided to test out something simple with Jquery before trying to build my portfolio. This is my script: HTML <!DOCTYPE html> <html> <head> <title>Portfolio</title> <link rel='stylesheet' type='text/css' href='stylesheet.css'/> <script type='text/javascript' src='script.js'></script> </head> <body> <div class ="topbar"></div> </body> </html>CSS .topbar { height: 100px; width:
jquery mobile vs jquery ui
I realise that i may need draggability of elements and other strictly ui functionality later on. is switching from jqm to jqui a seamless process or does some code need to be rewritten? Is jqui also primarily meant for mobile devices?
Use jquery ui resizable to scale child text
I have multiple div containers that are being initialized as resizable on document.ready. I wrote some code that resizes the height of the text within a child element when the div is resized. My problem is if I resize the div strictly on the horizontal axis, the text can be wider than the container. How can I modify my code so that it always remains within the container? My code is below: //Single Field Resizing $( ".resizable" ).resizable({ resize: function() {
syntax of a function ...
I state that are in the course of learning do jQuery ... There are thousands of tutorials to write functions in a thousand different ways in file .js external... Someone can give me a hand? // Do something when the document it's ready (at the end) ...Correct? jQuery(document).ready(function(){ alert(' I am ready '); }); // The document learn the function and when it is called do something ... Correct? function hello() { alert(' hello '); } But I don't understand what it means: jQuery(function($)
[SOLVED] Refreshing a page and redirect if an event occurs.
Hello, I have looked for my problem in Internet but I couldn't find. I don't know why I have used the correct words or the problem is in other places. I design a mobile page web with ajax to refresh the content (div[data-role=page]). I update the page tag because the server can redirect to other page. I use this code to refresh. setInterval(function() { $.ajax({ url: 'index.php?action=state', dataType: 'html',
strange mannerism of .each()
hey guys this is not really a problem because i've found another way but i want to understand jquery properly. i have following code structure: <div id="a"> <div class="b c"></div> </div> when i trigger $( "#a > .c").each(function( index ){ //...}); it selects correctly all elements with class='c' under div #a. If I write instead: $( "b + c").each(function( index ){ //...}); it triggers all elements with class='c' under div #a except the first element. Do you know why this is like that? Thanks
Problem with getJson on safari (iphone)
I try to execute this code exemple using external webService $.getJSON('http://domain.fr/testJson/test.json', function(data) { var items = []; $.each(data, function(key, val) { items.push('<li id="' + key + '">' + val + '</li>'); }); $('<ul/>', { 'class': 'my-new-list', html: items.join('') }).appendTo('#home'); }); the test.json is on a server : { "one": "Singular sensation", "two": "Beady little eyes", "three": "Little birds pitch by my doorstep" } It works in
Next Page