JQuery :: CurrSlide Value Not Updated With Next / Prev Options
Jan 7, 2011
Been playing with this plug-in for several hours now, very cool. Managed to build a decent non-linear presentation tool with play controls and multiple hotspots per slide. I noticed what I think are a few minor bugs concerning the opt.currSlide value, could also just be my lack of experience with the plug-in and JQuery. When using the 'next' and 'prev' options, the opt.currSlide value does not appear to be updated. I'm using this value to trigger hiding and showing of overlays in 'after' code. Works fine when a jump is initiated via cycle(num, trans) but not when initiated via cycle('next') or cycle('prev').
Also the "none" transition does not appear to call all of the before, after, etc.. events. As a work around, I defined a custom transition based on fade that animates the left property from 0 to 0 rather than opacity. Finally, I'd like to suggest an enhancement to the cycle method to accept cycle(num, trans, args). An example of why this is needed...
cycle(3, 'wipe', {clip: 'l2r'}).
Meaning jump to slide 3 using a wipe transition with clip set left-to-right. As a workaround for this limitation, I defined custom transitions for each of the wipe options.
I'm trying to implement JQuery Cycle onto the homepage of my website (which is a work in progress). I wish to have a banner with Previous and Next buttons, as well as a Pager and a Caption. I've added all of this to the banner. The Pager and the Caption works, but for the life of me I can't get the Previous and Next links to work.
This is my code: <script type="text/javascript"> $(document).ready(function() { $('#banner').cycle({ fx: 'fade', speed: 'fast', timeout: 0, prev: '#prev2', next: '#next2', pager: '#nav2', after: function() { $('#caption').html(this.alt); } }); }); </script>
I'm rather new toJavaScriptand have spent all day trying to figure out how I can make this possible by examining others code but to no avail. I've finally bit the bullet and come to ask for some help.
I'm making a website for a friends photography and have managed to get a thumbnail gallery working as you can see here[URL]...The problem is I have no idea how to get get the prev and next links working. I have tried countless searches for the best part of the afternoon looking for a solution but mostly all I seem to uncover is lists ofpre-madegalleries andcarousels.
It would be fantastic if someone could point me in the right direction just to simply get these links incrementing and decrementing based on the image that is loaded.
I have a slideshow similar (albeit more sophisticated) to this example [URL]. However, I'm trying to make the slideshow accessible to all JAWS users, leveraging aria-live attributes appropriately.
The problem is this: I am using the fx: 'fade' transition (this is out in the wild and I'm unable to change it at this point). However, I have a hidden button that gains visibility on tab focus. When the 'next' button is triggered I need the cycle plugin to leverage NO fx at all or the screen readers will end up using the subsequent slide for reading content due to the opacity + display time delay with the fade fx.
Basically I want my slideshow to have 2 fx, one for the default behavior (fx: 'fade' for the pager links) which is fading from slide to slide, and another fx (fx: 'none') that is used to prevent aria-live issues with screen readers. Is this possible?
Im using the goto function for a questionnaire to go to different slides/questions, i also want to add a back/prev button but i want it to go back to the previous slide it was on instead of going back to the prev slide in the stacking order.
I have worked out how to use the Next and Prev example here : [URL] and the count example here: [URL]. I can't however work out how to combine them so when you press "Next". It changes a "1 out of 5" image counter.
but what if instead of just 'hide' and 'show' I want to call a function (because I want to, let's say, just change the font-color of the link instead of hiding it)? so I did:
I'm playing around with edit in place and have a list of information that is generated by a php loop. Each list has a unique ID number at the top that i need to send back to my php script. I've put the ID number in a hidden form field at the top of every list and i'm trying to read it using .val() I've used .prev to get the line ID but can't seem to get ID number.... I thought it would be something like this but i can't seem to figure it out... i $(this).find('.Id:first').val(); usally work my way though stuff but this is making my head hurt.....
I've been working with the Cycle plugin for a while, but the only problem I'm having is that if I pass a string of transition names (comma separated), the next button goes through them in the right order but the prev button does not use the previous transition as one would expect. It uses the next transition in the list given as input. I've looked around but I could only find people fixing it for scrolling horizontally. I want it to maintain the order of transitions passed as input, not a reverse animation effect.
After placing a div on each image I placed the comments following. However, prev and next lwon't work unless I uncenter the text alignment or move it up top. For some reason it just won't work when I have it centered bottom.
I have this cycle slideshow demo, zip. In Internet Explorer is all fine but in the Firefox hide the buttons. I tried to change and turn the divs but still was not right. Why happens this?
I am using the jQuery cycle plugin for several slideshows at the same time in Drupal. The problem is when there is only one image in a slideshow, then I want the "prev" and "next" buttons to be hidden away. I can get:
Is there a way to catch when a div content is updated through javascript? I update a div content through rjs and I need to call tablesorter every time the div is updated.
I want to add more dropdown options which are dependent on previous options. Now I have "hand" and "loft". I want to add next option "model" How to add third dropdown option box?
I have a number of methods on my page which are instantiated on page load (such as an image zoom method). How can I force a reinstantiation of this method when I update the DOM? For example I will have a list of Images that magnify on mouseover. I then change this image (and use the .attr method to substitute new arguments). However when I mouseover the method only shows the previous instantiation from when the page first loaded.
Nutshell version: I need to fire off a javascript call whenever an ASP.NET UpdatePanel is updated, and I'm not sure how to do it. Detailed version: I have an ASP.NET page that has several UpdatePanels. Some of these are in my own code and I have access to, some are used by third party controls (e.g. ReportViewer) and I don't have direct access to them.
My website also uses jQuery Mobile to render the controls in a mobile friendly way. The problem I'm having is that whenever something in an UpdatePanel is updated, the newly updated contents don't get re-parsed by jQuery Mobile, and so they revert to their original style(s).
[Code]...
The problem I'm having is that I can't figure out how to make that happen. document.Ready() doesn't refire on an AJAX update. I've tried using $('div').live(),$('div').load(),$('div').change() and a few others (I am adding these to the Master page for the website) but nothing seems to fire off when the DIV updates.
My problem involves input elements not being visibly updated after $('#selector').val(...) and non-working datepickers (the hasDatepicker class is attached, but the datepicker control doesn't fire up when the input gains focus).
I have a calendar, based on fullCalendar and the fcalendar bundle which chains the fullCalendar to a datepicker and a MySQL/PHP backend.
Now, the base functionality of datepicker works, but it is not sufficient; I need some more attributes for my calendar entries, including date information (including the start and end values, since they must be editable, rather than changing them via drag'n'drop only). Since the html of the form is somewhat complex, it is loaded from a .php page, which is a major change related to fcalendar, where id (#myGeneratedEditor, in my case) is built using HTML code in formStart and formEnd
Here is some code:
The summary of problems: the values which are attached via .val() don't show up the datepickers (one so far) don't / doesn't show up
I have to save the state of a form in a var before submitting it with the whole html, but if I alert the var, I get the original html without the updated input fields.
Here is a live view of the problem I have:As you can see I am building a page which has an image cycle/carousel. On each of the images I would like to also have a zoomable loupe - I am using the jQzoom plugin to achieve this. Hover over the first image and you will see the zoom appear.
However, whilst all works fine on the first image, as soon as I click the next arrow (just visible at present top left of image as CSS tweak needed) to load the second image and hover over for the zoom, the second zoomed image fails to load. Anyone know why?
I am presuming it's because the cycle plugin hides the images so the jqZoom plugin can't 'grab' them.
I've been reading up on .live() function - can I use this to solve the problem? If so, could you provide some pointers...?
Problem in the timing of the script. The problem is that when I try to get an id of an object that was added by ajax, the script doesn't recognize it. The html: <select id="categories" name="categories"> <option value="3">aa</option> <option value="43">bbb</option> </select>
When I load the page, there is this script that get the value of the #categories and use ajax to fill another select and in the same ajax, I load images by another function using the new select input that was created: function fill_subcategories(){ parent=$("#categories").val(); $.ajax({ type: "post", url: "ajax/sub_galleries.php", data: 'parent='+parent, success: function(data){ $('#sub_categories').html(data); }}); show_exist_imgs() }
This fills this div: <select name="sub_categories" id="sub_categories"></select> Right after filling the #sub_categories, I use another ajax that get images of the new id of the #sub_categories, and here I get the problem.. the js: function show_exist_imgs(){ g_id=$('#sub_categories').val(); $.ajax({ type: "post", url: "ajax/show_exist_imgs.php", data: 'g_id='+g_id, success: function(data){ $('#exist_files').html(data); }}); } This script doesn't recognize the id of the new $('#sub_categories') select input.. why is that?
I pull product price from another page. Then I multiply it with quantity entered in the quantity input field. The problem is, if I forget to enter quantity value before I pull product information or if I change the quantity field later, the final total price is not updated.
I can't find a good script for this, mainly because I can't remember what you call it! Its for a photography site I'm working on, I need it to have Next & Prev links under the photo displayed so it goe through the photos.
Also is it easy to work out how to add a new image to the index.php and so that the last image that was on the index.php file is on the prev button so the photos are in order of when they were on the index.php file... yeah. I always seem to confuse myself with the adding of images when using prev & Next buttons :P
I think it's Javascript I'm after, but if theres a easy php version which is better then let me know but I really don't know php too great so it'd have to be easy or that someone could help me with Code:
Take a look at the following two examples:EXAMPLE 1 (Undesired Effect):EXAMPLE 2 (Desired Effect):I am currently working on a HTML/CSS Tab interface that is using jQuery. I downloaded the original example files from somewhere that used an old version of jQuery (version dated back from 2006).When I open the TABS.HTM file in the browser, I see the desired effect (as in Example 2 above), where the first tab is auto selected. Nice!Now, when I updated the jQuery .JS library with the latest build (version 1.3.2), I get the undesired effect, as illustrated in Example 1I have absolutely no idea what is going on and I am totally new to jQuery. I am assuming with the new version of jQuery, the JS initiator code is different. Please can someone take a look? I've included the old jquery-Version2006.js and the new jquery-1.3.2.min.js libraries in the attached zip.
You can download the example files here: http://hotfile.com/dl/7659319/7e95c76/jQuery_Tabs.zip.html or from:
I have an external script that looks for a specific id. Right now (im a noob to scripting btw) id have to have a version of this script in my header for each id or create an external script per id. I would like to have the script use a placeholder where "1stID" is, so that when i call the external script i can just say what the id is.
myscript.js (truncated) <script> var v = getelementbyid("1stID"); </script>
I want to call it like: <script src="myscript.js" #ID </script>
