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
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.
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
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
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
Flexslider issue on IE9
I've been testing this website in several browsers now: http://laideae.com/2e However, for some odd reason, IE9 has a bug displaying the last slide (most of the time, thou sometimes it does it on other in-between slides) on pages such as this: http://laideae.com/2e/espaset-lt.html When you click the next button, the slideshow seems to go from beginning to end in a fast forward way and then it displays the last slide. On some computers, it quickly displays the last slide and then moves quickly to
When to use $find?
Hello, I was hoping someone could clear up a question I had. When is it necessary to use the $find method when I have a selector? Thank You
hidden function
how i can make function that hide element in the html that i was click on any element on the document $(" ").click(function () { $(this).hide(); })
Help jquery app
I'm trying to make a unit conversion app but seam to be failing at the most simple peace of code. Could someone please help me getting this work? var from = $('#selectmenu10'); var to = $('#selectmenu11'); var value = $('#textinput1'); var result = ''; $(function() { $("#sb1").click(function() { if (from.val() == 'Euro' || to.val() == 'Dollar') { result.val(value.val() * 1.29840); alert(result + ' Dollar'); } } }); });
JQM 1.3 input fields, border:none; does not work
In JQM 1.2: .noborders{ border: none !important; box-shadow: none important; } . . . <input type="text" id="text1" class="noborders"....> hide text1 borders. This does not work in JQM 1.3 !
Open a link page inside the app
Hi, I created an web app with Jquery mobile and phoneGap. In the app there are some link to other website. I try to put button"return" in this page to come back on my site. May be keep the header of my app when I open a link. I've no idea to process. Thanks for your help.
Can I open a div injected from a ajax request in a dialog?
Hi guys, Can I open a div injected from a ajax request in a dialog? Example Html <button class="clickme">Click Me</button> <div id="result"><div> Php if ($_REQUEST["action"] == 'greetings'){ echo' <div id="hello">Hello<div>'; } Jquery $(document).on('click', '.clickme', function(){ $.ajax({ url: 'php/function.php', type: 'post', data: {'action':'greetings' }, success: function(result) { $("#result").append(result); $( "#hello" ).dialog({
Two different behaviors with Draggable UI helper clone and non-clone
From my understanding the helper option with Draggable UI is only a display effect as described here. But when using it with tables it appears to be bugged. Example: http://jsfiddle.net/hmj83/ Can anyone explain this behavior or give a workaround/ fix? Thanks.
how do i select the correct .each(function(index) from list ?
hello. how do i make it so that if i click on a link it will make the parent index do something ? http://jsfiddle.net/rickyspires/m6kXR/35/ so i have a list of divs and an empty container <div id="book"> <div id="page1" class="page">1</div> <div id="page2" class="page">2</div> <div id="page3" class="page">3</div> <div id="page4" class="page">4</div> <div id="page5" class="page">5</div> </div> <div id="book_nav"></div> them from that i get 5 links $('.page').each(function(index){
navigation of arrow keys in form like excel
my code work but my problem is that the color in the table will be erased when the focus leaves it row or column someone any idea? $(document).ready(function(){ p=""; m=""; f=""; var computeValues = function(){ var id = $(this).attr("id").replace("prelim_", "").replace("midterm_", "").replace("final_", ""); p = $("#prelim_" + id).val(); m = $("#midterm_" + id).val(); f = $("#final_" + id).val(); if (p =='130' || m=='130' || f=='130') { $("#row_" + id).css('background-color','pink');
[cycle] plugin: Implement caption count (ex: "Image 1 of 10")
Hi, I'm using the [cycle] plugin but a Wordpress version (Smooth Slider), so the code is a bit harder to manipulate for me. So my problem is this: How do you add a caption ("1 of 10") that tells which slide the slideshow is on like here: http://jquery.malsup.com/cycle/count.html I have added after: onAfter, and function onAfter(curr,next,opts) { var caption = 'Image ' + (opts.currSlide + 1) + ' of ' + opts.slideCount; $('#caption').html(caption); } to the javascrip part in the head, then <p id="caption"></p>
Manually focusing a Menu item
Hello fellow jQuery users :) I recently had the need to manually focus a given menu item, as my end users request the menu to highlight the menu item corresponding to the current screen. There are of course many ways to do that, but supposedly, the method focus seemed a good bet for this. Now this is where my knowledge of jQuery and JS in general failed me. I reproduced my troubles on this jsfiddle (EDIT : see below for amended link) Basically : - when trying to focus a terminal element on
Rendering italics (or emphasis) reliably on Mobile devices (as opposed to desktops)
Have a look at this on a desktop and then in a mobile browser. (recoveringacademic.co.uk/iTest/index2.html) Using a Samsung S3 with Chrome and FF, the italics and emphasis both disappear. It's renders perfectly on a desktop. The issue of italics (or none) really matters to me because I'm writing about Harvard Referencing where- to many - italicization is important. I'd be very grateful indeed for help I'm using the following code in the <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css"
Add to calendar - Does it exist?
Hi all, I was just wondering if there was any way of interacting with the mobile-user's calendar, specifically adding/scheduling an event or appointment? Part of the work that I'm doing is for a mobile bookings system. What I would like to do is offer the user a link/button to be able to add the details of their new booking to their phone's calendar. Is this possible? Is it something that is being planned for? If the answer is no, does anyone know of an elegant work-around? My fallback position is
Disable back button for one page only
ON my jquery mobile site I use the data-add-back-btn="true" for the page div and it works as expected. The issue I have is that there are some pages I don't want the back button to appear as it creates circular references and I want to better manage user navigation. I'd really appreciate some help with this as it is driving me nuts.
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 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. The book shows readers
Doing a partial postback.
Hi, I am using a componentone carousel control to view thumbnail photos. On the client click I want to do a partial postback so I can load the photo in a larger image but at the same time lay on top some blob divs. I can do this $(".imgSave").click(); Which does a full postback and the whole page is loaded and it looks clunky. Is it possbile to have it simply partial postback which simple loads the new image and moves the blobs on the photo with out a full page load? Many Thanks, Jiggy
Next Page