Search Results

Search found 661 results on 27 pages for 'fade in'.

Page 22/27 | < Previous Page | 18 19 20 21 22 23 24 25 26 27  | Next Page >

  • How to get DIVs into this code via JQuery

    - by ludz
    Heya everyone I been struggling along with this piece of code for the longest time, its driving me insane. I am trying many different things and looking at past posts here but nothing seems to be helping. Basicly i have a jquery pagination code in place and i want to add animated transitions between pages. With some assistance i got that working correctly however this causes the page to jump around as the new items fade in and out. To fix this i need a DIV wrapped around each selection of results. I have been trying to use .wrap .html .wrapinner .append and i cant get any of it to work properly. The 2 areas where i beleive the code needs to be place are as follows: $('#content').children().slice(0, show_per_page).css('display', 'block'); and $('#content').children().fadeOut('slow').slice(start_from, end_on).fadeIn('slow'); Full original code: http://tutsvalley.com/tutorials/making-a-jquery-pagination-system/ Only the second line of code posted here has been altered. Basicly i want to wrap each group of sliced output in a DIV. I hope that makes sense, if you need anymore information please let me know. Any ideas or suggestions on what to try it would be much apreciated as its currently driving me crazy :) Ludz~

    Read the article

  • iPhone SDK: Progressive UITableView updates, smoothly animated

    - by boliva
    Hi all, There's something I've been trying to do with no success. I have an UITableView whose viewController is both its delegate and dataSource. On it I also have a mutableArray as a property, which basically acts as the tableView dataSource. This mutableArray gets continously updated from an online XML source. What I haven't been able to accomplish successfully is to animate the adding of new rows at the top of the tableView and the deletion of the oldest rows at its bottom (thinking I'll always going to show the same amount of data, say the latest 10 entries). The method I'm actually using is that, after finishing receiving and parsing the XML data I'm removing all the contents of the mutableArray and storing the new entries on it, to later reload the tableView (calling the 'reloadData' method). In between I'm using a CATransition in order to 'fade' the tableView from its previous to its new state. I tried using beginUpdates and endUpdates, with code for selectively removing the old rows from the tableView and adding the new ones to it, as well as to its datasource, however the animation takes place in the whole table instead of the affected rows only. What I want to accomplish is, after an update, to delete as many rows from the 'bottom' of the table as new entries I have retrieved, sliding the tableView down and adding the new rows at the top of it, smoothly animated. Best regards,

    Read the article

  • WPF Trigger / Style overrides another

    - by ozczecho
    I have a listview defined as such <ListView Width="auto" SelectionMode="Single" ItemContainerStyle="{StaticResource baseListViewStyle}" .... Then in "baseListViewStyle" I have defined some base styles to apply to my list views, including a Style trigger: <Style x:Key="baseListViewStyle" TargetType="ListViewItem"> <Setter Property="Height" Value="20" /> <Setter Property="HorizontalContentAlignment" Value="Stretch"/> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Foreground" Value="Red" /> </Trigger> </Style.Triggers> </Style> The trigger here highlights the row when mouse is over it. Nice. I also have a Data Trigger on the listviewitem: <Style.Triggers> <DataTrigger Binding="{Binding IsTestTrue}" Value="True"> <DataTrigger.EnterActions> <BeginStoryboard Storyboard="{StaticResource SomeFunkyAnimation}" /> </DataTrigger.EnterActions> </DataTrigger> If test is true then a nice little fade animation is played out. This all works except when I move my mouse over the row where "test is true" the animation stops and the mouse over style is displayed. Any ideas how I can override that style in my DataTrigger? TIA

    Read the article

  • Use jQuery to find and add an image tooltip

    - by lund.mikkel
    Hey people Okay, what I'm trying to accomplish is a simple tool tip that, when you hover over the name of a color, shows a little image of that color. The html markup looks like this: <label class="colorPicker"> <input type="radio" checked="" id="20" value="20" name="id[2]"> <img width="16" height="16" title=" DinoBlack Mat " alt="DinoBlack Mat" src="images/attributes/color/dinoblack_mat.jpg">DinoBlack Mat </label> <label class="colorPicker"> <input type="radio" id="874" value="874" name="id[2]"> <img width="16" height="16" title="XrayBlue shiny" alt="XrayBlue shiny" src="images/attributes/color/xrayblue_shiny.jpg">XrayBlue shiny </label> I'm using the jQuery plugin "Tooltip" and I've added following to my main js-file: $('.colorPicker').tooltip({ track: true, delay: 0, showURL: false, fade: 250, bodyHandler: function() { return $("<img/>").attr("src", [THE SOURCE FOR THE IMAGE]); } }); The idea is simply that the image should be hidden by default. But when you hover over the text the little thumbnail shows up and makes it easy to recognize the color. The problem is I haven't got a clue how to get the src for the thumbnail. I don't know how to extract the src from the img inside the selected element. I've tried various combinations using the this keyword, but nothing seemed to work. I've also tried to add the src path as a rel attribute to the label, but also without any success. Should be needless to say I also control the PHP-output... I really hope you can help me. I've search the web for days without any luck. I'm getting desperate :D /Mikkel Lund

    Read the article

  • How would I send a POST Request via Ajax?

    - by Gotactics
    I have a php page, Post.php it recieves the POST's Action, and that has two functions. Insert, and Update.Now how would I go about posting INSERT with this Ajax code. The code posts update fine but is doesnt post insert at all. $(document).ready(function(){ //global vars var inputUser = $("#nick"); var inputMessage = $("#message"); var loading = $("#loading"); var messageList = $(".content ul"); //functions function updateShoutbox(){ //just for the fade effect messageList.hide(); loading.fadeIn(); //send the post to shoutbox.php $.ajax({ type: "POST", url: "Shoutbox.php", data: "action=update", complete: function(data){ loading.fadeOut(); messageList.html(data.responseText); messageList.fadeIn(2000); } }); } //check if all fields are filled function checkForm(){ if(inputUser.attr("value") && inputMessage.attr("value")) return true; else return false; } //Load for the first time the shoutbox data updateShoutbox(); //on submit event $("#form").submit(function(){ if(checkForm()){ var nick = inputUser.attr("value"); var message = inputMessage.attr("value"); //we deactivate submit button while sending $("#send").attr({ disabled:true, value:"Sending..." }); $("#send").blur(); //send the post to shoutbox.php $.ajax({ type: "GET", url: "Shoutbox.php", data: "action=insert&nick=" + nick + "&message=" + message, complete: function(data){ messageList.html(data.responseText); updateShoutbox(); //reactivate the send button $("#send").attr({ disabled:false, value:"Shout it!" }); } }); } else alert("Please fill all fields!"); //we prevent the refresh of the page after submitting the form return false; }); });emphasized text

    Read the article

  • jQuery ajax not preloading images

    - by George Wiscombe
    I have a list of galleries, when you click on the title of a gallery it pulls in the contents (HTML with images). When the content is pulled in it preloads the html but not the images, any ideas? This is the JavaScript i'm using: $('#ajax-load').ajaxStart(function() { $(this).show(); }).ajaxStop(function() { $(this).hide();}); // PORTFOLIO SECTION // Hide project details on load $('.project > .details').hide(); // Slide details up / down on click $('.ajax > .header').click(function () { if ($(this).siblings(".details").is(":hidden")) { var detailUrl = $(this).find("a").attr("href"); var $details = $(this).siblings(".details"); $.ajax({ url: detailUrl, data: "", type: "GET", success: function(data) { $details.empty(); $details.html(data); $details.find("ul.project-nav").tabs($details.find(".pane"), {effect: 'fade'}); $details.slideDown("slow"); }}); } else {$(this).siblings(".details").slideUp();} return false; }); You can see this demonstrated at http://www.georgewiscombe.com Thanks in advance!

    Read the article

  • Where can I find a professional image gallery built on a javascript framework?

    - by user278457
    I'm looking to find a galleria replacement, hopefully using jQuery but other javascript frameworks such as prototype or mootools are fine too. I used galleria a while back, and I need a similar product now. Unfortunately, the devkick.com domain seems to have disappeared in the meantime and I'm wary of using products that aren't actively maintained. I'm willing to pay up to $50 per site for licensing costs, if the product meets my needs. I'm specifically looking for a gallery with the following features: Every image in the gallery preloads asap, not as the user clicks "next" Minimalist default css to keep my subsequent styling headaches down, preferably a "darkroom" style by default, much as galleria looks Each element that constructs the image gallery should be simple and logical to reference with CSS As easy to install as adding a css class to a single unordered list No dependencies other than the core jQuery/other library, including "easing" and other effects must be optional Works on browsers back to IE6, Firefox 3, Safari (and iPhone), Chrome, Opera Has a javascript API that lets me trigger callback functions on common events such as "user clicks next" or "image loads" degrades gracefully without javascript, either displays images as a list, or just displays the first image in the list bonus: The gallery can display other content, such as video or external sites, like the modal boxes at shadowbox-js.com well documented minimal bandwidth requirement - .js file should be ~10kb minified bonus: The gallery source is hosted on a reliable CDN like google's bonus: Thumbnails for images do not appear until the main image has loaded bonus: includes ability to set parameters with JSON to change common behaviours, such as slide/fade transitions or automatic image switch every X seconds

    Read the article

  • NSOperation for animation loop causes strange scrolling behaviour

    - by Tricky
    Hi, I've created an animation loop which I run as an operation in order to keep the rest of my interface responsive. Whilst almost there, there is still one remaining issue. My UIScrollViews don't seem to be reliably picking up when a user touch ends. What this means is, for example, if a user drags down on a scroll view, when they lift their fingers the scrollview doesn't bounce back into place and the scrollbar remains visible. As if the finger hasn't left the screen. It takes another tap on the scrollview for it to snap to its correct position and the scrollbar to fade away... Here's the loop I created in a subclassed NSOperation: (void)main { NSAutoreleasePool *pool = [[NSAutoreleasePool alloc] init]; NSRunLoop *runLoop = [NSRunLoop currentRunLoop]; _displayLink = [[CADisplayLink displayLinkWithTarget: self selector: @selector(animationLoop:)] retain]; [_displayLink setFrameInterval: 1.0f]; [_displayLink addToRunLoop:[NSRunLoop currentRunLoop] forMode: NSRunLoopCommonModes]; while (![self isCancelled]) { NSAutoreleasePool *loopPool = [[NSAutoreleasePool alloc] init]; [runLoop runMode:NSDefaultRunLoopMode beforeDate:[NSDate distantFuture]]; [loopPool drain]; } [_displayLink invalidate]; [pool release]; } DOes anyone have any idea what might be going on here, and even better how to fix it... Thanks!

    Read the article

  • Submit form with JS

    - by Thomas
    Im working with a shopping cart plugin and that uses a basic form on the product page to submit values like price, product name, etc.. The problem is that the plugin uses a standard submit button to send the values and I would like to replace said button with a prettier custom jquery rollover. In order to make this happen I used some JS and tossed a link around my custom submit button: <a href="#" onclick="document.forms[0].submit()" value="Add to Cart" onsubmit="return ReadForm(this, true);"> <img class="fade" src="style/img/add_btn.jpg" style="background: url(style/img/add_ro.png);" alt=""/> </a> The form submits and the user is redirected to the homepage but the data in the form doesn't seem to get submitted and the product never gets added to the 'cart' page. I suspect that the form is getting submitted but I am failing to fire some additional JS function that submits the data. The plugin adds some JS to the top of the page: <!-- // function ReadForm (obj1, tst) { // Read the user form var i,j,pos; val_total="";val_combo=""; for (i=0; i<obj1.length; i++) { // run entire form obj = obj1.elements[i]; // a form element if (obj.type == "select-one") { // just selects if (obj.name == "quantity" || obj.name == "amount") continue; pos = obj.selectedIndex; // which option selected val = obj.options[pos].value; // selected value val_combo = val_combo + "(" + val + ")"; } } // Now summarize everything we have processed above val_total = obj1.product_tmp.value + val_combo; obj1.product.value = val_total; } //--> If you want to check out the the site in question, take a look here and click 'add to cart button': http://hardtopdepot.com/?p=34 You can see the cart at the top: http://hardtopdepot.com/?page_id=50 Any help would be super appreciated- thanks!

    Read the article

  • jQuery XML loading and then innerfade effect

    - by Ryan Max
    Hello, I think I can explain myself without code, so for brevity's sake here we go: I am using jquery to pull data from an xml and put it into a ul on the page with each xml entry as a li. This is working great! However, what I am trying to do afterwards is use the innerfade plugin to make a simple animation between each of the li's. It's not working though, as it is still just loading the static list with each item visible (whereas if innerfade was working it would only display the first....then fade into the second, etc) It's not an innerfade problem however, because if I add the list in manually to the page (not injecting it with jquery) then the innerfade works fine. I'm relatively new to DOM scripting, so I think I am missing something here. I'm not quite sure how jQuery sequences everything, and I'm having trouble phrasing my question in a search engine friendly manner so here I am. Is it possible to have jquery pull the data from xml, then inject it into the page, then have innerfade work it's magic? Or am I thinking about this the wrong way? xml code: $.ajax({ type: "GET", url: "xml/playlist.xml", dataType: "xml", success: function(xml) { $(xml).find('song').each(function(){ var name = $(this).attr('title'); var date = $(this).attr('artist'); var message = $(this).attr('path'); $('<li></li>').html('<span id="an_name">'+name+'</span><span id="an_date">'+date+'</span><span id="an_message">'+message+'</span>').appendTo('#anniversary'); }); } }); innerfade code: <script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready( function(){ jQuery('#anniversary').innerfade({ speed: 1000, timeout: 5000, type: 'sequence', }); });

    Read the article

  • jQuery tooltip: Trouble with remove()

    - by Rosarch
    I'm using a jQuery tooltip plugin. I have HTML like this: <li class="term ui-droppable"> <strong>Fall 2011</strong> <li class="course ui-draggable">Biological Statistics I<a class="remove-course-button" href="">[X]</a></li> <div class="term-meta-data"> <p class="total-credits too-few-credits">Total credits: 3</p> <p class="median-GPA low-GPA">Median Historical GPA: 2.00</p> </div> </li> I want to remove the .course element. So, I attach a click handler to the <a>: function _addDeleteButton(course, term) { var delete_button = $('<a href="" class="remove-course-button" title="Remove this course">[X]</a>'); course.append(delete_button); $(delete_button).click(function() { course.remove(); return false; }).tooltip(); } This all works fine, in terms of attaching the click handler. However, when course.remove() is called, Firebug reports an error in tooltip.js: Line 282 tsettings is null if ((!IE || !$.fn.bgiframe) && tsettings.fade) { What am I doing wrong? If the link has a tooltip attached, do I need to remove it specially? UPDATE: Removing .tooltip() solve the problem. I'd like to keep it in, but that makes me suspect that my use of .tooltip() is incorrect here.

    Read the article

  • jQuery Cycle - #next #prev, goto nextGallery after final slide of currentGallery

    - by FHP
    I am using jQuery cycle in several galleries with #next #prev navigation and a image counter output. Now I am trying to connect all these galleries together. If the user reaches the final slide of gallery A (galleryA.html), the #next anchor should point to gallery B (galleryB.html) / the #prev anchor should point to gallery C (galleryC.html). How can I combine my 2 functions to do that? // slideshow fx $(function() { $('#slideshow').cycle({ fx: 'fade', speed: 350, prev: '#prev', next: '#next', timeout: 0, after: onAfter }); }); //image counter output function onAfter(curr,next,opts) { var caption = (opts.currSlide + 1) + opts.slideCount; $('#counter').html(caption); } html: <div id="slideshow-container"> <div class="slideshow-nav"><a id="prev" href=""></a></div> <div class="slideshow-nav"><a id="next" href=""></a></div> <div id="slideshow" class="pics"> <img src="galleryA/01.jpg" /> <img src="galleryA/02.jpg" /> <img src="galleryA/03.jpg" /> <img src="galleryA/04.jpg" /> <img src="galleryA/05.jpg" /> <img src="galleryA/06.jpg" /> </div> </div>

    Read the article

  • Set scaleX property on a Sprite without altering the child inside

    - by grammar
    Is this possible? My site is set up with next and prev buttons on the right and left sides respectively, and as you roll over either of the hit areas around the buttons a Sprite fades in which contains a TextField that describes the next page. Said Sprite calls the StartDrag() method, so it follows the mouse within the bounds, which is all fine and dandy on the left side of the page. Adobe, however, seems to have forgotten to put a way to dynamically alter the registration point of a Sprite, MC, whatever else, so when you roll over the right side of the page, the sprite is displayed from the top left and is mostly off the stage. Trying to hack this problem I have tried numerous things ( classes written by others, other hacks) and the best that I have found is to use the scaleX method on the Sprite, changing the scale to -1. This, of course, makes the Sprite seem like it's reflected from its normal point, which means all its children show up backwards. Is there anyway I can use this hack without it altering the text? OR Does anyone know a different way to go about displaying a Sprite from another corner? Any way to make a Sprite fade in and follow the mouse on the LEFT HAND side of the mouse pointer? Thank you very much in advance. Here is a snippet to give an idea of what's happening: naxtPage.labelBG.scaleX = -1; nextPage.labelBG.startDrag( true, nextHitRect ); nextPage.labelBG.x = nextPage.labelBG.parent.mouseX; nextPage.labelBG.y = nextPage.labelBG.parent.mouseY; Cheers

    Read the article

  • Previous layer not showing

    - by meep
    Hello I got a menu which can foldout and show some content based on the menu item. See demo: http://arcticbusinessnetwork.com.web18.curanetserver.dk/home.aspx If I hover the menu it works great, but if I click on "Raw Material", I can not access the PREVIOUS tab (Infrastructure) while the others fade in great. How can this be? This is the javascript <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery.hoverIntent.min.js"></script> <script type="text/javascript"> $(document).ready(function () { function megaHoverOver() { $(this).find(".menu_content").stop().fadeTo('fast', 1).show(); } function megaHoverOut() { $(this).find(".menu_content").stop().fadeTo('fast', 0, function () { $(this).hide(); }); } var config = { sensitivity: 2, interval: 50, over: megaHoverOver, timeout: 300, out: megaHoverOut }; $("#menu ul li").not(".parenttocurrent").not(".current").find(".menu_content").css({ 'opacity': '0' }); $("#menu ul li").not(".parenttocurrent").not(".current").hoverIntent(config); }); </script>

    Read the article

  • Deep Zoom in Ajax - Possible? Any examples out there?

    - by Phil
    I have an idea to implement a deep zoom type interface hosted in a browser for sports training data (speed, distance, heart rate etc.) However, rather than images I actually want to zoom into a hierarchy of information. For example, the initial display would contain a grid of years - hover over 2008, for example, and spin the mouse wheel (or click) will zoom into that year but during the zoom I want 2008 to fade out and be replaced with a calendar of months. Again zoom into a month and the months are replaced with the months calendar, zoom into a day and you finally see a chart with the training data plotted on it. All the time only dates with actual data would be highlighted in some fashion. My question is whether this would even be possible and whether anyone has seen examples of this already. I'm imagining that most of the time the next level of information could be cached in the browser (in fact, because this is calendar-based, I can calculate most of that and cache the dates to be highlighted.) I could also zoom into an empty chart whilst an Ajax thread is fetching the data to display. I've never tried anything like this before and I'm especially interested in whether DHTML would be capable of this sort of zoom (I suspect not and I would have to resort to Silverlight) and whether the Ajax execution would be uninterrupted whilst the browser rendering thread is kept busy zooming.

    Read the article

  • jQuery Cycle : Multiple Instances, detect end of each instance

    - by guylabbe.ca
    I am using multiple instances of Cycle for a portfolio; Only one is shown and the others are hidden. Each Cycle is a project with multiple images. The only thing I can't figure out is how to detect the end of the « current » Cycle instance. with after: function, it is triggered for all instances at once, impossible to get « local » events. Here is my code : $('.sldr_closeup').each(function() { var currId = $(this).attr('id'); window['num_'+currId] = 0; $(this).cycle({ timeout:0, speed:500, fx:'fade', next:'.nextimages', prev:'.previmages', fit:1, nowrap:1, autstop:0, after : function(c,n,o,f) { var currId = $(this).parent('div').attr('id'); (f) ? window['num_'+currId] ++ : window['num_'+currId] --; if ((o.slideCount == window['num_'+currId] )) { alert(currId); $('.nextimages').stop().fadeTo(400,0,function(){ if(currId != $('.projectList .projet').last().find('a').attr('rel')) $('.nextproject').stop().fadeTo(400,1); $(this).hide(); }); } } }).cycle('pause'); });

    Read the article

  • JQuery set img src depending on where you click

    - by Anna
    Hello ! I used javascript for loading a picture on my website depending on which "small" photos in ul you clicked... I had something like that : <script type="text/javascript"> function viewImage(src, legende) { document.getElementById("imageBig").src = "images/photos/"+src; document.getElementById("legend").innerHTML = legende; } </script> and in html simply : things like that : <li><a href="#centre" onclick="javascript:viewImage('flute.jpg','La Reine de la Nuit au Comedia')"><img src="images/photos/carre-09.jpg" alt="" /></a> <a href="#centre" onclick="javascript:viewImage('perichole.jpg','Manuelita - <em>La P&eacute;richole</em> &agrave; l&#8217;Op&eacute;ra Comique')"><img src="images/photos/carre-03.jpg" alt="" /></a></li> <li><a href="#centre" onclick="javascript:viewImage('12.png','R&eacute;cital &agrave; Carnac, septembre 2008')"><img src="images/photos/carre-12.jpg" alt="Marion Baglan Carnac R&eacute;" /></a> <a href="#centre" onclick="javascript:viewImage('01.jpg','')"><img src="images/photos/carre-01.jpg" alt="" /></a></li> so you see, I could, depending on which small photos in the unordered list you clicked, load some particular photos, by passing the src string in argument... but I decided to use Jquery to get some fade-in effect. But I can't find a way to pass an argument that would tell my JQuery function which photo to load depending on where I clicked... stuck here : $(document).ready(function(){ $('#ulPhotos').click(function() { var newSrc= $('#imageBig').attr("src", "images/photos/11.jpg"); }); }); I don't want the 11.jpg to be hardcoded, I need to pass it through argument when I click on a special li element in my ul element of id #ulPhotos... I hope I'm clear enough sorry !

    Read the article

  • Animation is slow on iPhone

    - by Anthony Chan
    I'm developing an app that would display images and change them according to the user's action. I've created a subclass of UIView to contain an image, an index number and an array of image names. The code is like this: @interface CustomPic : UIView { UIImageView *pic; NSInteger index; NSMutableArray *picNames; //<-- an array of NSString } And in the implementation part, it has a method to change the image using a dissolve effect. - (void)nextPic { index++; if (index >= [picNames count]) { index = 0; } UIImageView *temp = pic; pic.image = [UIImage imageNamed:[picNames objectAtIndex:index]]; temp.alpha = 0; [UIView beginAnimations:nil context:nil]; [UIView setAnimationCurve:UIViewAnimationCurveEaseOut]; [UIView setAnimationDuration:0.25]; pic.alpha = 0; temp.alpha = 1; [UIView commitAnimations]; } In the viewController, there are several CustomPic which would change the images depends on users' choice. The images would change as expected with the fade in/out effect, but the animation performance is really bad. I've tested it on an iPhone 3G, the Instruments shows that the animation is only 2-3FPS! I tried many methods to simplify and modify the codes but with no hope. Is there something wrong in my code or in my concept? Thanks for any help. P.S. all the images are 320*480 PNGs with a max size of 15KB.

    Read the article

  • CSS3 animations - how to make different animations to different elements on scroll

    - by DeanDeey
    I have a question about the doing CSS3 animations on scroll.. I found a code, that shows the DIV element after the user scrolls down: <script type="text/javascript"> $(document).ready(function() { /* Every time the window is scrolled ... */ $(window).scroll( function(){ /* Check the location of each desired element */ $('.hideme').each( function(i){ var bottom_of_object = $(this).position().top + $(this).outerHeight(); var bottom_of_window = $(window).scrollTop() + $(window).height(); /* If the object is completely visible in the window, fade it it */ if( bottom_of_window > bottom_of_object ){ $(this).animate({'opacity':'1'},500); } }); }); }); </script> I'm building a site, which one will have about 5 different boxes, which one will be shown when the user scrolls down to each box. But my question is, how i make the animation inside those boxes. Foe example: in each box there is title, content and images. How do i make all the elements appear after each other, because with this code all the class elements are shown at once. But i would like that if user scrolls down, first the tittle appears, then the content and at the end the images. And then when user scrolls to the next box, the same process repeat's itself. I use some CSS3 delays, but in this case i don't know how long will user take to scroll down. thanks!

    Read the article

  • Images not showing in ie7 using jquery cycle and jCarouselLite plugin

    - by Geetha
    Hi All, I am using jquery cycle and jCarouselLite plugin to display images as slide. Images are getting displayed in ie7. but working perfect in ie6. Image Property inside the cycle control: Protocol: Not available Type: Not available Address(url): Not available Size: Not available Dimensions: 100X100 but control having the url. if i tried that image url separate it showing the image. Code: $('#slide').cycle({ fx: 'fade', continuous: true, speed: 7500, timeout: 55000, sync: 1 }); Html Code: <div id="slide"> <img src="samp1.jpg" width="664" height="428" border="0" /> <img src="samp2.jpg" width="664" height="428" border="0" /> <img src="samp3.jpg" width="664" height="428" border="0" /> <img src="samp4.jpg" width="664" height="428" border="0" /> <img src="samp5.jpg" width="664" height="428" border="0" /> <img src="samp6.jpg" width="664" height="428" border="0" /> <img src="samp7.jpg" width="664" height="428" border="0" /> <img src="samp8.jpg" width="664" height="428" border="0" /> </div> Geetha.

    Read the article

  • Multiple jQuery.noConflict() instances...

    - by user353816
    I am working with several jQuery scripts that include a MenuFader (http://css-tricks.com/examples/MenuFader/), twitter feed, and timestamp. Additionally I have a couple Mootools scripts that include the Barackslideshow (http://devthought.com/wp-content/moogets/BarackSlideshow/demo.html). And finally I have a scrolling ticker with tooltips taken from the twitter homepage. I originally had a conflict with the Jquery MenuFader and Mootools BarackSlideshow, but easily fixed this issue with the jQuery.noconflict(); and replaced all corresponding $ with jQuery. Unfortunately, after I added the scrolling ticker from Twitter, the Mootools BarackSlideshow and the Jquery MenuFader no longer work. I tried to implement jQuery.noconflict(); then $.noconflict(); then var j = jQuery.noconflict(); and replacing the $ as I did previously, but I cannot get the scripts to play nicely. Any help is greatly appreciated...I have been working on this all day. I am pretty new with javascript, but have managed to get through most problems with a little persistence. Please take a look at the script below: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" type="text/javascript"></script> <script src="http://a2.twimg.com/a/1274914417/javascripts/fronts.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $( function () { setTimeout(function() { $(".twtr-widget").append($("<div></div>").attr("class", "twtr-fade")); }, 0); (function() { var tabIndex = $("[tabindex]:last").attr("tabIndex"); var setTabIndex = function() { $(this).attr("tabindex", ++tabIndex); } $(".footer-nav a").each(setTabIndex); $(".language-select a").each(setTabIndex); })(); $("#signup_submit").scribe({ event_name: "signup_submit_click", experiment: "ab_signup_button", bucket: "sign_up" }, "www_ab_tests"); $('#signin_menu').isSigninMenu(); new FrontPage().init(); }); //]]>

    Read the article

  • increase number of photos from flickr using json

    - by Andrew Welch
    Hi this is my code: Is is possible to get more photos from flickr. What is the standard / default number? $(document).ready(function(){ $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=48719970@N07&lang=en-us&format=json&jsoncallback=?", function(data){ $.each(data.items, function(i, item){ var newurl = 'url(' + item.media.m + ')'; $("<div class='images'/>").css('background', newurl).css('backgroundPosition','top center').css('backgroundRepeat','no-repeat').appendTo("#images").wrap("<a target=\"_blank\ href='" + item.link + "'></a>"); }) $("#title").html(data.title); $("#description").html(data.description); $("#link").html("<a href='" + data.link + "' target=\"_blank\">Visit the Viget Inspiration Pool!</a>"); //Notice that the object here is "data" because that information sits outside of "items" in the JSON feed $('.jcycleimagecarousel').cycle({ fx: 'fade', speed: 300, timeout: 3000, next: '#next', prev: '#prev', pause: 1, random: 1 }); }); });

    Read the article

  • Why does jQuery fadeOut not work inside this setInterval loop?

    - by Clay McClure
    I'm trying to load random items into a div every few seconds, with a nice fadeOut/fadeIn transition between each load. Here's the code: <html> <body> <div id="item"></div> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> // Load a random item var item = $('#item'); function load_item() { item.fadeOut(5000, function() { item.load('http://dynamic.xkcd.com/comic/random/ #middleContent img', null, function() { item.fadeIn(5000); }); }); }; // Load initial featured item load_item(); // Schedule repeated loading setInterval(load_item, 15000); </script> </body> </html> This works fine the first time through, but on subsequent calls to load_item, the fadeOut() seems to stop working. It doesn't actually fade the #item div out, but jumps immediately into the callback function, ignoring the 5000 delay. What am I doing wrong?

    Read the article

  • Twitter bootstrap modal loads wrong remote data

    - by Victor S
    I'm using Twitter Bootstrap modal featurs and loading data from remote locations. I'm providing the remote url for a set of thumbnails with the hope that once the thumbnail is clicked, the appropriate data (a large version of the image) is displayed. I'm using the html declarative style to define the remote urls and all the features of the modal. What I find is that Twitter bootstrap modal loads first remote url then does not display subsequent remote data, (although a request to the proper url is made in Chrome) but displays first loaded data always. How do I get it to show the proper data? View: #gallery-navigation %ul - @profile.background_images.each do |image| %li = link_to image_tag(image.background_image.url(:thumb)), remote_image_path(image.id), :role => "button", :data => {:toggle => "modal", :target => "#image-modal", :remote => remote_image_path(image.id)}, :id => "image-modal" / Modal #image-modal.modal.hide.fade(role="dialog" aria-hidden="true" data-backdrop="true") .modal-body Controller: def remote_image @image = current_user.profile.background_images.find(params[:image_id]) respond_to do |format| format.html { render :partial => "remote_image", :locals => { :image => @image } } end end

    Read the article

  • How to do drag-n-drop and resize on an image using jQuery?

    - by Scott
    How do I resize and image using jQuery but keep its aspect ratio the same? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>CrossSlide - A jQuery plugin to create pan and cross-fade animations</title> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> </head> <body> <style type="text/css"> #resizebleImage { background: silver; } </style> <script type="text/javascript"> $(document).ready(function(){ $("#resizebleImage").resizable().parent().draggable(); }); </script> <img id="resizebleImage" src="http://images.askmen.com/galleries/singer/gloria-estefan/pictures/gloria-estefan-picture-4.jpg"> </body> </html>

    Read the article

< Previous Page | 18 19 20 21 22 23 24 25 26 27  | Next Page >