Search Results

Search found 691 results on 28 pages for 'slider'.

Page 10/28 | < Previous Page | 6 7 8 9 10 11 12 13 14 15 16 17  | Next Page >

  • Adding a link to image breaks jquery slider, help please!

    - by lewisqic
    Hi All, I am working on a site for a friend and trying to add a link to each image in a slide show. The slide show uses jquery and a script called easySlider1.7.js. Everything works just fine if the images are left alone, but when I try and wrap the images with a link, the slides no longer progress as they should. Here is the live website that is displaying the problem... http://www.splits59.com/ Here is the html code for each of the slide images... <div class="covercontent2box"> <div class="covercontent2"> <div id="slideshow"> <a href="/ashton-jacket-p-107.html"><img src="img/homepagesummer2010_2.2-cut.jpg" class="active" /></a> <a href="/carly-coverup-p-106.html"><img src="img/homepagesummer2010_3.2-cut.jpg" /></a> <a href="/shop-online-bottoms-c-15_14.html"><img src="img/homepagesummer2010_1.2-cut.jpg" /></a> </div> </div> </div> And here is the jquery code on the page that controls the slider... <script type="text/javascript"> function slideSwitch() { var $active = $('#slideshow IMG.active'); if ( $active.length == 0 ) $active = $('#slideshow IMG:last'); // use this to pull the images in the order they appear in the markup var $next = $active.next().length ? $active.next() : $('#slideshow IMG:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 4500 ); }); </script> Does anyone have any idea why adding a link tag to the images breaks the slider? Any help or direction provided would be appreciated. Thanks, Devin

    Read the article

  • Jquery .Filter Function Question

    - by Matias
    Hi Guys, This is kindof a simple question, however, I don´t seem to figure out how to do it: I´ve got a slider filtering some stuff $("#price").slider( { range: true, step: 5, change: function(e,ui) { $('total').filter(function(index) { return ( ($("#price").slider("values", 0)) <= $(this).text() <= ($("#price").slider("values", 1))); }).parents('div.item').hide(); } }); Basically, I want an array with index of each of elements which have been filtered so I can reuse them for other purpose. I was thinking of editing filter function to something like: $('total').filter(function(index) { var matches = ( ($("#price").slider("values", 0)) <= $(this).text() <= ($("#price").slider("values", 1))); return matches; }.myFunction(matches){ //do some stuff here with matched elements } This is not correct, your help is greatly appreciated.

    Read the article

  • How to get the handler position

    - by Geetha
    Hi All, I am using the following files to create a slider. <link type="text/css" href="CSS/demos.css" rel="stylesheet" /> <link type="text/css" href="CSS/jquery-ui.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery.ui.core.js"></script> <script type="text/javascript" src="js/jquery.ui.slider.js"></script> Problem: i want to get the index of the handler, when i drag it to some other position. Ex: initial position of the handler: l-------------------------------- value = 0 After dragging it some other position ----------------------l---------- value = ? Code: var endTime = document.mediaPlayer.SelectionEnd; $("#slider-constraints").slider({ animate: true, max: endTime, range: $R(0, endTime), value: 1, enforceConstraints: false, start: function(event, index) { alert(index.value); } }); window.setInterval(function() { $('#slider-constraints').slider("value", document.mediaPlayer.currentPosition); }, 4000);

    Read the article

  • Set the thumbImage and watch the slider-bar disappear?

    - by Roberta
    [sld1 setThumbImage:[UIImage imageNamed:@"Blue.png"] forState:UIControlStateHighlighted]; [sld1 setThumbImage:[UIImage imageNamed:@"Blue.png"] forState:UIControlStateNormal ]; Would that cause the slider-bar image to disappear? Mine are all gone. (The thumb-image displays just fine.) Apple's docs make it sounds like I can use any ONE of above 2 lines of code. (But I guess I really need both.) And I can't find anything about "you must always do all 4": Set the normal-state image. Set the highlighted-state image. Set the setMinimumTrackImage. Set the setMaximumTrackImage.

    Read the article

  • QapTcha error issue. Works locally, not on live server [migrated]

    - by BlassFemur
    I am adding QapTcha (http://demos.myjqueryplugins.com/qaptcha/) to a website that I am working on and I'm getting the error "Uncaught TypeError: Cannot read property 'error' of null". What's weird to me is everything is working perfectly locally. No errors or anything. Once I uploaded via ftp to the live server, I get the above error. Below is the block of code that seems to be generating the error: Slider.draggable({ revert: function(){ if(opts.autoRevert) { if(parseInt(Slider.css("left")) (bgSlider.width()-Slider.width()-10)) return false; else return true; } }, containment: bgSlider, axis:'x', stop: function(event,ui){ if(ui.position.left (bgSlider.width()-Slider.width()-10)) { // set the SESSION iQaptcha in PHP file $.post(opts.PHPfile,{ action : 'qaptcha', qaptcha_key : inputQapTcha.attr('name') }, function(data) { if(!data.error) Uncaught TypeError: Cannot read property 'error' of null { Slider.draggable('disable').css('cursor','default'); inputQapTcha.val(''); TxtStatus.text(opts.txtUnlock).addClass('dropSuccess').removeClass('dropError'); form.find('input[type=\'submit\']').removeAttr('disabled'); if(opts.autoSubmit) form.find('input[type=\'submit\']').trigger('click'); } },'json'); } } }); I'm not really sure what's going on as to why it works locally and not on the server. Any help/ suggestions would be appreciated. Thanks

    Read the article

  • Setting the SlideShowExtender's Index

    - by Bunch
    The AJAX SlideShowExtender is pretty useful. It does what it says and works without much fuss. There was one trick I needed it to perform that I could not find natively within the control. That was to set the slide’s current index. With a little JavaScript however I could make the control do what I wanted. The example below assumes a few things. First you already have a SlideShowExtender setup and working (or see this post). Second this SlideShowExtender is on a page all by itself so the index to set the slide to is passed in the URL. The scenario I had was this SSE was showing full images, the index was passed from another page that had a SSE showing thumbnails. JavaScript in <head> <script type="text/javascript">      function pageLoad() {          var slider = $find("sse");          var photoIndex = GetQuerystring('Index', 0);          slider._currentIndex = photoIndex - 1;          slider._slides = '';          slider.setCurrentImage();      }      function GetQuerystring(key, default_) {          if (default_ == null) default_ = '0';          key = key.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");          var regex = new RegExp("[\\?&]" + key + "=([^&#]*)");          var qs = regex.exec(window.location.href);          if (qs == null)              return default_;          else              return qs[1];      } </script> The GetQuerystring function is what grabs the Index value I pass from the page with the thumbnails. It does not have anything else to do with setting the slide index. The code in the pageLoad function sets the index on the slide_currentIndex line. The slider.setCurrentImage() line does pretty much what it says. I added the slider._slider = ‘’ to avoid an error (not a show stopper just a bit annoying). Control in <body> <cc1:SlideShowExtender ID="ssePhotos" runat="server" TargetControlID="imgFull" AutoPlay="false"          PreviousButtonID="btnPrev" NextButtonID="btnNext" SlideShowServicePath="PlacePhotos.asmx"           SlideShowServiceMethod="GetPlaceFullPhotos" BehaviorID="sse" ImageDescriptionLabelID="lblPictureDescription"> </cc1:SlideShowExtender> The main property to set with the SSE is the BehaviorID. This is what a JavaScript function can use to find the control rather than the control’s ID value. Technorati Tags: AJAX,ASP.Net,JavaScript

    Read the article

  • What is best way to create a cross fade effect?

    - by Starx
    While creating an Image Slider, cross-fade is one of most popular effects so far. Various slider on the internet use various techniques to create such effect. Major technique I have found so far are two: Some use a overlay and underlay div and fade in and out each others visibility. While others, create a div of exact size of the slider on the slider-initialization and play with its z-index property and then fade each other consequently. Disregarding them, what is a proper way or much better way to create a cross fade effect. P.S: I would love to read answer in form of algorithm.

    Read the article

  • Video Bug in Ubuntu 12.10 MSI CX623 laptop

    - by user104731
    http://www.youtube.com/watch?v=5xyJkS8XjgA&feature=youtu.be I managed to take a video with what happens on my Ubuntu 12.10 laptop when I play with the volume and hover with the mouse over the slider and when I press Ctrl + Alt + D (show Desktop/minimize all) The real bugs are those in which the panel becomes transparent on the down side, exactly above the volume slider (and not only when that slider appears, but also when brightness slider appears, and when blocking my touchpad applet appears) and when I have a maximized window, more maximized windows or a non maximized window that touches the panel, while I use Ctrl+Alt+D (show Desktop/hide all normal windows). Is there a way to solve this bug? PS: The other bugs are from Record My Desktop. I didn't have the mentioned bugs in ubuntu 12.04, but I like more the graphics in 12.10.

    Read the article

  • Prevent hash navigation url

    - by Koningh
    I have the following problem: I'm using a slider (coda) to let people navigate trough some 'pages'. The slider uses hash links to navigate to the next page/slide. If a user is at page one (#page1), there is a link which will lead the user to page 2 (#page2) and so on. At the top of the slider the numbers of the pages appear as a link, but only when the page is visited. So if there are six pages and the user navigates from the first to the second and then the third one, there are only three links at the top of the slider (to page one, two and three). The problem is that a user can navigate to page five (or any page actually) without first visiting the pages previous to page five by just using the hash URL and typing the whole link in their address bar. For example if I would type www.mydomain.com/slider/index.php#page5 the slider automatically navigates to the fifth slide/page of the slider and thereby skipping the first four. I want to allow users to navigate to #page5 only if they have visited the first four (So by clicking trough the slides). This means that if they would go to #page5 directly by typing the URL in the address bar, I would like them to be send to the first page (#page1). Does anyone have any idea on solving this?

    Read the article

  • jQuery trigger function on change

    - by Michael Pasqualone
    I have the following two slider functions which work well and display like so: I have diskAmount and transferAmount stored in global vars, however what I am now trying to figure out is how do I get the sum of the two to initially show as the monthly fee, and then update when either of the two sliders are changed. So in my screenshot above the initial state will be $24.75, and the fee will update if the sliders change. Can anyone point me in the right direction? I get can the initial fee to show, but can't figure out how to get 1 function to call another function within jQuery. $(function() { $("#disk").slider({ value:3, min: 1, max: 80, step: 1, slide: function(event, ui) { $("#diskamount").val(ui.value + ' Gb'); $("#diskamountUnit").val('$' + parseFloat(ui.value * diskCost).toFixed(2)); } }); // Set initial diskamount state $("#diskamount").val($("#disk").slider("value") + ' Gb'); // Set initial diskamountUnit state diskAmount = $("#disk").slider("value") * diskCost; $("#diskamountUnit").val('$' + diskAmount.toFixed(2)); }); $(function() { $("#data").slider({ value:25, min: 1, max: 200, step: 1, slide: function(event, ui) { $("#dataamount").val(ui.value + ' Gb'); $("#dataamountUnit").val('$' + parseFloat(ui.value * transferCost).toFixed(2)); } }); // Set initial dataamount state $("#dataamount").val($("#data").slider("value") + ' Gb'); // Set initial dataamountUnit state transferAmount = $("#data").slider("value") * transferCost; $("#dataamountUnit").val('$' + transferAmount.toFixed(2)); });

    Read the article

  • WPF element binding across seperate windows-how to do?

    - by jack123
    I can do element-to-element binding in WPF: For example, I've got a window that has a slider control and a textbox, and the textbox dynamically displays the Value property of the slider as the user moves the slider. But how do i do this across seperate windows (in the same project, same namespace) ? The reason is that my main application window containing the textbox has a menu option that will open an 'options' window containing the slider control. Thanks.

    Read the article

  • jquery plugin loading empty sometimes

    - by Anders Kitson
    I am running this coda-slider script from http://www.ndoherty.biz/ Not Everytime, but quite often on the first load the coda slider box will be empty and the slider wont work, most of the time my image will be there and the slider will run since I have it set on auto. I am not quite sure why this happens. I seem to have had this happen to me with other jquery stuff just loading empty or super tiny images, anyone else seen this issue.

    Read the article

  • Seeking advice on tools and technology for my new game [closed]

    - by k.k. slider
    I'm a C# developer who has been programming a game in my spare time using XNA and Visual Studio. The game's logic is mostly done and I've completed a prototype that has most of the functionality of (what I envision to be) the final game. However, having heard about the uncertain future and (possibly) limited audience for XNA games, I'm looking to switch platforms... but I don't know what technology would best suit my needs. Below are some specifics about my game and what exactly I'm looking for, if you're interested: The game is a 2D turn-based tactical RPG (strategy game) for two players. It is a basic sprite and tile based game with animations and sound. 3D capabilities are not necessary. I'd like to allow players to compete with others online, and have a basic ranking/matchmaking system. I will probably need something that can interact with a server and a database (the game is turn-based and has no RNG, so cheating would be easy to detect even if most computation is done client-side and minimal data is sent to the server). Ideally, I would be able to release an early version of the game and have people give feedback as I develop additional features (similar to Minecraft). I'd prefer to have a way to release periodic updates to the game instead of releasing an absolute final product. To reach the widest possible audience, I'd prefer technology that allows me to release on PC, Android, iOS, and (maybe) Mac. This is a game with simple mouse inputs which can fit on a mobile touch screen. The game should be monetizable. If I find success with this game, then I may consider becoming a full-time indie game developer. I have several other game ideas and have learned quite a bit from my first attempt at game development. My first thought was an F2P/microtransaction model, but I'm open to other suggestions. Language isn't a primary concern of mine, since I have a decent amount of experience using several languages to program large projects. I'm willing to spend money (e.g. on a developer's license), but the more expensive it gets, the more hesitant I am to use it. I've looked into the following solutions... there are a LOT of tools out there... if anyone has experience with any of these and would like to recommend/reject any of them, it would be helpful. C#/.NET (XNA/MonoGame/SDL/SlimDX/Xamarin/ExEn/ANX?) HTML5/JS (AppMobi/PhoneGap/Marmalade/FlashCanvas/Cordova/libRocket?) Python (Pyglet/Pygame/Kivy?) Java (JavaFX/libGDX?) Unity/Construct 2/Cocos2D/NME/Corona/other game creation software? I'd like something that can do 2D and isn't limited by being too high-level. Other languages (Lua/LOVE? Moai?) Thanks for answering this rather long and tedious question...

    Read the article

  • Custom UISlider Image disappearing?

    - by Silent
    Hello all i have a custom image to replace the UISLider defult button image, all works fine image shows, it does not clip off. The problem is when i use the slider to move up and down the image dissapears and some how doesnt show up anymore only sometimes. could someone have a fix? CGRect rect = CGRectMake(16.0, 390.0, 297.0, 35.0); slider.frame = rect; UIImage* thumbImage = [UIImage imageNamed:@"thumb.png"]; [slider setThumbImage:thumbImage forState:UIControlStateNormal]; UIImage* leftImage = [UIImage imageNamed:@"SliderLeft.png"]; [slider setMinimumTrackImage:leftImage forState:UIControlStateNormal]; UIImage* rightImage = [UIImage imageNamed:@"SliderRight.png"]; [slider setMaximumTrackImage:rightImage forState:UIControlStateNormal];

    Read the article

  • jQuery UI: how to run evaluation

    - by mikkelbreum
    I want to add 'Year' or Years' to the end of a string depending on the string. Like this: $("#selector").val(conditional_value_here); Using jQuery UI I have a slider that manipulates a value: $("#slider").slider({ value: 1, min: 1, max: 25, step: 1, slide: function(event, ui) { $("#amount").val(ui.value + ' Year' + function(){return (ui.value == 1) ? '' : 's';} ); } }); // and again I want to do the same for the initialization of the value: $("#amount_3").val($("#slider_3").slider("value") + ' Jahr' + function(){return ($("#slider_3").slider("value") == 1) ? '' : 's';}); This does not work. What is the correct way to to this?

    Read the article

  • option page form in my wordpress theme [migrated]

    - by Templategraphy
    here its is my option page code containing no of fields like logo, slider after filling all the information in option page form i want to things After submitting all the form details save information must retain there. Using get_option() extract each input tag value and show that value in front hand like slider image, slider heading, slider description OPTION PAGE CODE: <?php class MySettingsPage { private $options; public function __construct() { add_action( 'admin_menu', array( $this, 'bguru_register_options_page' ) ); add_action( 'admin_init', array( $this, 'bguru_register_settings' ) ); } public function bguru_register_options_page() { // This page will be under "Settings" add_theme_page('Business Guru Options', 'Theme Customizer', 'edit_theme_options', 'bguru-options', array( $this, 'bguru_options_page') ); } public function bguru_options_page() { // Set class property $this->options = get_option( 'bguru_logo' ); $this->options = get_option( 'bguru_vimeo' ); $this->options = get_option( 'bguru_slide_one_image' ); $this->options = get_option( 'bguru_slide_one_heading' ); $this->options = get_option( 'bguru_slide_one_text' ); $this->options = get_option( 'bguru_slogan_heading' ); $this->options = get_option( 'bguru_slogan_description' ); ?> <div class="wrap"> <?php screen_icon(); ?> <h1>Business Guru Options</h1> <form method="post" action="options.php"> <table class="form-table"> <?php // This prints out all hidden setting fields settings_fields( 'defaultbg' ); do_settings_sections( 'defaultbg' ); submit_button(); ?> </table> </form> </div> <?php } /** * Register and add settings */ public function bguru_register_settings() { register_setting('defaultbg','bguru_logo', array( $this, 'sanitize' ) ); register_setting('defaultbg', 'bguru_vimeo', array( $this, 'sanitize' )); register_setting('defaultbg', 'bguru_slide_one_image', array( $this, 'sanitize' )); register_setting('defaultbg', 'bguru_slide_one_heading', array( $this, 'sanitize' )); register_setting('defaultbg', 'bguru_slide_one_text', array( $this, 'sanitize' )); register_setting('defaultbg', 'bguru_slogan_heading', array( $this, 'sanitize' )); register_setting('defaultbg', 'bguru_slogan_description', array( $this, 'sanitize' )); add_settings_section( 'setting_section_id', // ID '<h2>General</h2>', array( $this, 'print_section_info' ), // Callback 'defaultbg' // Page ); add_settings_field( 'bguru_logo', // ID '<label for="bguru_logo">Logo</label>', // Title array($this,'logo_callback' ), // Callback 'defaultbg', // Page 'setting_section_id'// Section ); add_settings_field( 'bguru_vimeo', // ID 'Vimeo', // Vimeo array( $this, 'socialv_callback' ), // Callback 'defaultbg', // Page 'setting_section_id' // Section ); add_settings_field( 'bguru_slide_one_image', // ID 'Slide 1 Image', // Slide 1 Image array( $this, 'slider1img_callback' ), // Callback 'defaultbg', // Page 'setting_section_id' // Section ); add_settings_field( 'bguru_slide_one_heading', // ID 'Slide 1 Heading', // Slide 1 Heading array( $this, 'slider1head_callback' ), // Callback 'defaultbg', // Page 'setting_section_id' // Section ); add_settings_field( 'bguru_slide_one_text', // ID 'Slide 1 Description', // Slide 1 Description array( $this, 'slider1text_callback' ), // Callback 'defaultbg', // Page 'setting_section_id' // Section ); add_settings_field( 'bguru_slogan_heading', // ID 'Slogan Heading', // Slogan Heading array( $this, 'slogan_head_callback' ), // Callback 'defaultbg', // Page 'setting_section_id' // Section ); add_settings_field( 'bguru_slogan_description', // ID 'Slogan Container', // Slogan Container array( $this, 'slogan_descr_callback' ), // Callback 'defaultbg', // Page 'setting_section_id' // Section ); } public function sanitize( $input ) { $new_input = array(); if( isset( $input['bguru_logo'] ) ) $new_input['bguru_logo'] = sanitize_text_field( $input['bguru_logo'] ); if( isset( $input['bguru_vimeo'] ) ) $new_input['bguru_vimeo'] = sanitize_text_field( $input['bguru_vimeo'] ); if( isset( $input['bguru_slide_one_image'] ) ) $new_input['bguru_slide_one_image'] = sanitize_text_field( $input['bguru_slide_one_image'] ); if( isset( $input['bguru_slide_one_heading'] ) ) $new_input['bguru_slide_one_heading'] = sanitize_text_field( $input['bguru_slide_one_heading'] ); if( isset( $input['bguru_slide_one_text'] ) ) $new_input['bguru_slide_one_text'] = sanitize_text_field( $input['bguru_slide_one_text'] ); if( isset( $input['bguru_slogan_heading'] ) ) $new_input['bguru_slogan_heading'] = sanitize_text_field( $input['bguru_slogan_heading'] ); if( isset( $input['bguru_slogan_description'] ) ) $new_input['bguru_slogan_description'] = sanitize_text_field( $input['bguru_slogan_description'] ); return $new_input; } public function print_section_info() { print 'Enter your settings below:'; } public function logo_callback() { printf( '<input type="text" id="bguru_logo" size="50" name="bguru_logo" value="%s" />', isset( $this->options['bguru_logo'] ) ? esc_attr( $this->options['bguru_logo']) : '' ); } public function socialv_callback() { printf( '<input type="text" id="bguru_vimeo" size="50" name="bguru_vimeo" value="%s" />', isset( $this->options['bguru_vimeo'] ) ? esc_attr( $this->options['bguru_vimeo']) : '' ); } public function slider1img_callback() { printf( '<input type="text" id="bguru_slide_one_image" size="50" name="bguru_slide_one_image" value="%s" />', isset( $this->options['bguru_slide_one_image'] ) ? esc_attr( $this->options['bguru_slide_one_image']) : '' ); } public function slider1head_callback() { printf( '<input type="text" id="bguru_slide_one_heading" size="50" name="bguru_slide_one_heading" value="%s" />', isset( $this->options['bguru_slide_one_heading'] ) ? esc_attr( $this->options['bguru_slide_one_heading']) : '' ); } public function slider1text_callback() { printf( '<input type="text" id="bguru_slide_one_text" size="50" name="bguru_slide_one_text" value="%s" />', isset( $this->options['bguru_slide_one_text'] ) ? esc_attr( $this->options['bguru_slide_one_text']) : '' ); } public function slogan_head_callback() { printf( '<input type="text" id="bguru_slogan_heading" size="50" name="bguru_slogan_heading" value="%s" />', isset( $this->options['bguru_slogan_heading'] ) ? esc_attr( $this->options['bguru_slogan_heading']) : '' ); } public function slogan_descr_callback() { printf( '<input type="text" id="bguru_slogan_description" size="50" name="bguru_slogan_description" value="%s" />', isset( $this->options['bguru_slogan_description'] ) ? esc_attr( $this->options['bguru_slogan_description']) : '' ); } } if( is_admin() ) $my_settings_page = new MySettingsPage(); here its my header.php code where i display all the information of option form $bguru_logo_image = get_option('bguru_logo'); if (!empty($bguru_logo_image)) { echo '<div id="logo"><a href="' . home_url() . '"><img src="' . $bguru_logo_image . '" width="218" alt="logo" /></a></div><!--/ #logo-->'; } else { echo '<div id="logo"><a href="' . home_url() . '"><h1>'. get_bloginfo('name') . '</h1></a></div><!--/ #logo-->'; }?> $bguru_social_vimeo = get_option('bguru_vimeo'); if (!empty($bguru_social_vimeo)) { echo '<li class="vimeo"><a target="_blank" href="'.$bguru_social_vimeo.'">Vimeo</a></li>'; }?> same as for slider image, slider heading, slider description please suggest some solutions

    Read the article

  • Global mouseMove

    - by Jacob Kofoed
    I have made the following javascript to be used in my jQuery based website. What it does, is to move a slider up/down, and scale the item above higher/smaller. Everything works fine, but since the slider is only a few pixels in height, and the move event is a bit slow (it does not trigger for every pixel) so when I move the mouse fast, the slider can't hold on and the mouse get's out of the slider item. The mouseMove event won't be triggered no more since it is bound to the slider. I guess everything could be fixed by setting the mouseMove global to the whole site, but it won't work, or at least I don't know how to make that work. Should it be bound to document, or body? here is my current code for the slider: $.fn.resize = function (itemToResize) { MinSize = 100; MaxSize = 800; pageYstart = 0; sliderMoveing = false; nuskriverHeight = 0; this.mousedown(function(e) { pageYstart=e.pageY; sliderMoveing = true nuskriverHeight = parseFloat((itemToResize).css('height')); }); this.mouseup(function() { sliderMoveing = false }); this.mousemove(function(e) { if (sliderMoveing) { (itemToResize).css('height', (nuskriverHeight + (e.pageY - pageYstart))); if (parseFloat( (itemToResize).css('height')) > MaxSize) { (itemToResize).css('height', MaxSize) }; if (parseFloat( (itemToResize).css('height')) < MinSize) { (itemToResize).css('height', MinSize) }; }; }); }; Thanks for any help, is much appreciated

    Read the article

  • Most effecient way to create a "slider" timeline in HTML, CSS, and JavaScript?

    - by ZapChance
    Alright, so here's my dilemma. I've got these two "slides" lined up, one ready to be passed into view. I have it working and all, but I can scroll over to the right to see the second slide! How could I have it you can only view the one slide? JavaScript used: function validate(form) { var user = form.username.value; var pass = form.password.value; if(user === "test") { if(pass === "pass") { var hideoptions = {"direction" : "left", "mode" : "hide"}; var showoptions = {"direction" : "left", "mode" : "show"}; /*$("#loginView").toggle("slide", hideoptions, 1000, function() { $("#loginView").css("margin-left", "100%"); }); $("#mainView").toggle("slide", showoptions, 1000, function() { $("#mainView").css("margin-left", 0); });*/ $("#loginView").animate({ marginLeft: "-100%" }, 1000); $("#mainView").animate({ marginLeft: "0" }, 1000); } else { alert("nope"); } } else { alert("nope 2"); } } As you can see here @ http://jsfiddle.net/D7Va3/1/ (JSFiddle), once you enter "test" and "pass", then click enter, the tiles slide. But. If you reload, you can see that you can scroll to the right of the screen and view the second slide prematurely, which is just not going to work for me. I still need to achieve the same seamless transition, but you must only be able to view one slide at a time. Also, I plan to expand with more slides, so if you're feeling lucky today, I'd really love to see an example of how I could support multiple frames. I'm very new to JavaScript (yet I know syntax rules, and general coding knowledge from other languages), so the better you explain, the more knowledgeable I can be, and I'd be very grateful for that. Thanks in advance!

    Read the article

  • How do I center this CSS?

    - by sarthaksss
    Here is the CSS - #slider ul, #slider li, #slider2 ul, #slider2 li{ margin:0; padding:0; list-style:none; } #slider2{margin-top:1em;} #slider li, #slider2 li{ /* define width and height of list item (slide) entire slider area will adjust according to the parameters provided here */ width:500px; height:250px; overflow:hidden; } #prevBtn, #nextBtn, #slider1next, #slider1prev{ display:block; width:30px; height:77px; position:absolute; left:-30px; top:71px; z-index:1000; } #nextBtn, #slider1next{ left:696px; } #prevBtn a, #nextBtn a, #slider1next a, #slider1prev a{ display:block; position:relative; width:30px; height:77px; background:url(../images/btn_prev.gif) no-repeat 0 0; } #nextBtn a, #slider1next a{ background:url(../images/btn_next.gif) no-repeat 0 0; } /* numeric controls */ #slider img{ width:500px; height:300px; } ol#controls{ margin:1em 0; padding:0; height:28px; } ol#controls li{ margin:0 10px 0 0; padding:0; float:left; list-style:none; height:28px; line-height:28px; } ol#controls li a{ float:left; height:28px; line-height:28px; border:1px solid #ccc; background:#b32d45; color:white; padding:0 10px; text-decoration:none; } ol#controls li.current a{ background:#5DC9E1; color:#fff; } ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;} I want to center the #slider HTML <div id="slider"> <ul> <li>IMAGE</li> <li>IMAGE2</li> </ul> </div>

    Read the article

  • jQuery image loop not displaying any images

    - by user1871097
    I'm trying to create a very basic image gallery in jQuery. The goal is to have 3 images fade in and out in a sequential order. So image 1 is displayed, fades to image 2 etc. then the whole thing loops again. My HTML code so far is as follows: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Slider</title> <style type="text/css"> .slider{ width: 2848px; height: 2136px; overflow: hidden; margin: 30px auto; } .slider img{ width:2848px; height:2136px; display:none; } </style> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> <script src="Slider2.js"></script> </head> <body onload="Slider2"();> <div class="slider"> <img id="1" src="31.jpg" border="0" alt="city"/> <img id="2" src="2vrtigo2.jpg" border="0" alt="roof"/> <img id="3" src="3.jpg" border="0" alt="sea"/> </div> </body> And the jQuery code looks like this: function Slider2() { var total = $(".slider img").size(); for (i=1; i<=total; i+=1) { $(".slider #"+i).fadeIn(600); $(".slider #"+i).delay(2000).hide; }} A quick syntactical note, I've also tried using i++ in the last argument of the For Loop. The result of this code is a blank, white page. I know some of the HTML is being compiled because the enormous 2848x2136 div creates scroll bars on the browser. If anyone could help me out, that would be greatly appreciated. Obviously I'm relatively new to web programming and would love some insight into why this isn't working. Thanks!

    Read the article

  • Turn Photos and Home Videos into Movies with Windows Live Movie Maker

    - by DigitalGeekery
    Are you looking for an easy way to take your digital photos and videos and turn them into a movie or slideshow? Today we’ll take a detailed look at how to do use Windows Live Movie Maker. Installation Windows Live Movie Maker comes bundled as part of the Windows Live Essentials suite (link below). However, you don’t have to install any of the programs you may not want. Take notice of the You’re almost done screen. Before clicking Continue, be sure to uncheck the boxes to set your search provider and homepage. Adding Pictures and Videos Open Windows Live Movie Maker. You can add videos or photos by simply dragging and dropping them onto the storyboard area. You can also click on the storyboard area or on the Add videos and photos button on the Home tab to browse for videos and photos. Windows Live Movie Maker supports most video, image, and audio file types. Select your files and add click Open to add them to Windows Live Movie Maker. By default WLMM doesn’t allow you to add files from network locations…so check out our article on how to add network support to Windows Live MovieMaker if the files you want to add are on a network drive. Layout All of your added clips will appear in the storyboard area on the right, while the currently selected clip will appear in the preview window on the left. You can adjust the size of the two areas by clicking and dragging the dividing line in the middle.    Make the clips on the storyboard bigger or smaller by clicking on the thumbnail size icon. The slider at the lower right adjusts the zoom time scale.   Previewing your Movie At any time, you can playback your movie and preview how it will look in the Preview window by clicking the space bar, or by pushing the play button under the preview window. You can also manually move the preview bar slider across the storyboard to view the clips as the video progresses. Adjusting Clips on the Storyboard You can click and drag clips on the storyboard to change the order in which the photos and videos appear.   Adding Music Nothing brings a movie to life quite like music. Selecting Add music will add your music to the beginning of the movie. Select Add music at the current point to include it in the movie to the current location of your preview bar slider, then browse for your music clip. WLMM supports many common audio files such as WAV, MP3, M4A, WMA, AIFF, and ASF. The music clip will appear above the video / photos clips on the storyboard.   You can change the location of music clips by clicking and dragging them to a different location on the storyboard. Add Titles, Captions, and Credits To add a Title screen to your movie, click the Title button on the Home tab. Type your title directly into the text box on the preview screen. The title will be placed at the location of the preview slider on the storyboard. However, you can change the location by clicking and dragging title to other areas of the storyboard. On the Format tab, there are a handful of text settings. You can change the font, color, size, alignment,  and transparency. The Adjust group allows you to change the background color, edit the text, and set the length of time the Title will appear in the movie.   The Effects group on the Format tab allows you to select an effect for your title screen. By hovering your cursor over each option, you will get a live preview of how each effect will appear in the preview window. Click to apply any of the effects. For captions, select where you want your caption to appear with the preview slider on the storyboard, then click the captions button on the Home tab. Just like the title, you type your caption directly into the text box on the preview screen, and you can make any adjustments by using the Font and Paragraph, Adjust, and Effects groups above. Credits are done the same as titles and captions, except they are automatically placed at the end of the movie.   Transitions Go to the Animation tab on the ribbon to apply transitions. Select a clip from the storyboard and hover over one of the transition to see it in the preview window. Click on the transition to apply it to the clip. You can apply transitions separately to clips or hold down Ctrl button while clicking to select multiple clips to which to apply the same transition. Pan and zoom effects are also located on the Animations tab, but can be applied to photos only. Like transition, you can apply them individually to a clip or hold down Ctrl button while clicking to select multiple clips to which to apply the same pan and zoom effect. Once applied, you can adjust the duration of the transitions and pan and zoom effects. You can also click the dropdown for additional transitions or effects. Visual Effects Similar to Pan and Zoom and Transitions, you can apply a variety of Visual Effects to individual or multiple clips. Editing Video and Music Note: This does not actually edit the original video you imported into your Windows Live Movie Maker project, only how it appears in your WLMM project. There are some very basic editing tools located on the Home tab. The Rotate left and Rotate right button will adjust any clip that may be oriented incorrectly. The Fit to music button will automatically adjust the duration of the photos (if you have any in your project) to fit the length of the music in your movie. Audio mix allows you to change the volume level   You can also do some slightly more advanced editing from the Edit tab. Select the video clip on the storyboard and click the Trim tool to edit or remove portions of a video clip. Next, click and drag the sliders in the preview windows to select the are you wish to keep. For example, the area outside the sliders is the area trimmed from the movie. The area inside is the section that is kept in the movie. You can also adjust the Start and End points manually on the ribbon.   When you are finished, click Save trim. You can also split your video clips. Move the preview slider to the location in the video clip where you’d like to split it, and select Split. Your video will be split into separate sections. Now you can apply different effects or move them to different locations on the storyboard. Editing Music Clips Select the music clip on the storyboard and then the Options tab on the ribbon. You can adjust the music volume by moving the slider right and left.   You can also choose to have your music clip fade in or out at the beginning and end of your movie. From the Fade in and Fade out dropdowns, select None, Slow, Medium, or Fast. To adjust the sound of your audio clips, click on the Edit tab, select the Video volume button, and adjust the slider. Move it all the way to the left to mute any background noise in your video clips.   AutoMovie As you have seen, Windows Live Movie Maker allows you to add effects, transitions, titles, and more. If you don’t want to do any of that stuff yourself, AutoMovie will automatically add title, credits, cross fade transitions between items, pan and zoom effects to photos, and fit your project to the music. Just select the AutoMovie button on the Home tab. You can go from zero to movie in literally a couple minutes.   Uploading to YouTube You can share your video on YouTube directly from Windows Live Movie Maker. Click on the YouTube icon in the Sharing group on the Home tab. You’ll be prompted for your YouTube username and password. Fill in the details about your movie and click Publish. The movie will be converted to WMV before being uploaded to YouTube. As soon as the YouTube conversion is complete, you’re new movie is live and ready to be viewed. Saving your Movie as a Video File Select the icon at the top left, then select Save movie. As you hover your mouse over each of the options, you will see the output display size, aspect ratio, and estimated file size per minute of video. All of these settings will output your movie as a WMV file. (Unfortunately, the only option is to save a movie as a WMV file.) The only difference is how they are encoded based on preset common settings. The Burn to DVD option also outputs a WMV file, but then opens Windows DVD Maker and walks you through the process of creating and burning a DVD.   If you choose the Burn to DVD option, close this window when the WMV file conversion is complete and the Windows DVD Maker will prompt you to begin. When your movie is finished, it’s time to relax and enjoy.   Conclusion Windows Live Movie Maker makes it easy for the average person to quickly churn out nice looking movies and slideshows from there own pictures and videos. However, long time users of previous editions (formerly called Windows Movie Maker) will likely be disappointed by some features missing in Windows Live Movie Maker that existed in earlier editions. Looking for details on burning your new project to DVD, check out our article on how to create and author DVDs with Windows DVD Maker. Download Windows Live Movie Maker Similar Articles Productive Geek Tips Family Fun: Share Photos with Photo Gallery and Windows Live SpacesCreate and Author DVDs in Windows 7Rotate a Video 90 degrees with VLC or Windows Live Movie MakerInstall Windows Live Essentials In Windows 7How to Make/Edit a movie with Windows Movie Maker in Windows Vista TouchFreeze Alternative in AutoHotkey The Icy Undertow Desktop Windows Home Server – Backup to LAN The Clear & Clean Desktop Use This Bookmarklet to Easily Get Albums Use AutoHotkey to Assign a Hotkey to a Specific Window Latest Software Reviews Tinyhacker Random Tips CloudBerry Online Backup 1.5 for Windows Home Server Snagit 10 VMware Workstation 7 Acronis Online Backup Windows Firewall with Advanced Security – How To Guides Sculptris 1.0, 3D Drawing app AceStock, a Tiny Desktop Quote Monitor Gmail Button Addon (Firefox) Hyperwords addon (Firefox) Backup Outlook 2010

    Read the article

  • Silverlight Cream for May 25, 2010 -- #869

    - by Dave Campbell
    In this Issue: Miroslav Miroslavov, Victor Gaudioso, Phil Middlemiss, Jonathan van de Veen, Lee, and Domagoj Pavlešic. From SilverlightCream.com: Book Folding effect using Pixel Shader On the new CompleteIT site, did you know the page-folding was done using PixelShaders? I hadn't put much thought into it, but that's pretty cool, and Miroslav Miroslavov has a blog post up discussing it, and the code behind it. New Silverlight Video Tutorial: How to create a Slider with a ToolTip that shows the Value of the Slider This is pretty cool... Victor Gaudioso's latest video tutorial shows how to put the slider position in the slider tooltip... code and video tutorial included. Backlighting a ListBox Put this in the cool category as well... Phil Middlemiss worked out a ListBox styling that makes the selected item be 'backlit' ... check out the screenshot on the post... and then grab the code :) Adventures while building a Silverlight Enterprise application part #33 Jonathan van de Veen is discussing changes to his project/team and how that has affected development. Read about what they did right and some of their struggles. RIA Services and Storedprocedures Lee's discussing Stored Procs and RIA Services ... he begins with one that just works, then moves on to demonstrate the kernel of the problem he's attacking and the solution of it. DoubleClick in Silverlight Domagoj Pavlešic got inspiration from one of Mike Snow's Tips of the Day and took off on the double-click idea... project source included. Stay in the 'Light! Twitter SilverlightNews | Twitter WynApse | WynApse.com | Tagged Posts | SilverlightCream Join me @ SilverlightCream | Phoenix Silverlight User Group Technorati Tags: Silverlight    Silverlight 3    Silverlight 4    Windows Phone MIX10

    Read the article

  • Search in Projects API

    - by Geertjan
    Today I got some help from Jaroslav Havlin, the creator of the new "Search in Projects API". Below are the steps to create a search provider that finds recently modified files, via a new tab in the "Find in Projects" dialog: Here's how to get to the above result. Create a new NetBeans module project named "RecentlyModifiedFilesSearch". Then set dependencies on these libraries: Search in Projects API Lookup API Utilities API Dialogs API Datasystems API File System API Nodes API Create and register an implementation of "SearchProvider". This class tells the application the name of the provider and how it can be used. It should be registered via the @ServiceProvider annotation.Methods to implement: Method createPresenter creates a new object that is added to the "Find in Projects" dialog when it is opened. Method isReplaceSupported should return true if this provider support replacing, not only searching. If you want to disable the search provider (e.g., there aren't required external tools available in the OS), return false from isEnabled. Method getTitle returns a string that will be shown in the tab in the "Find in Projects" dialog. It can be localizable. Example file "org.netbeans.example.search.ExampleSearchProvider": package org.netbeans.example.search; import org.netbeans.spi.search.provider.SearchProvider; import org.netbeans.spi.search.provider.SearchProvider.Presenter; import org.openide.util.lookup.ServiceProvider; @ServiceProvider(service = SearchProvider.class) public class ExampleSearchProvider extends SearchProvider { @Override public Presenter createPresenter(boolean replaceMode) { return new ExampleSearchPresenter(this); } @Override public boolean isReplaceSupported() { return false; } @Override public boolean isEnabled() { return true; } @Override public String getTitle() { return "Recent Files Search"; } } Next, we need to create a SearchProvider.Presenter. This is an object that is passed to the "Find in Projects" dialog and contains a visual component to show in the dialog, together with some methods to interact with it.Methods to implement: Method getForm returns a JComponent that should contain controls for various search criteria. In the example below, we have controls for a file name pattern, search scope, and the age of files. Method isUsable is called by the dialog to check whether the Find button should be enabled or not. You can use NotificationLineSupport passed as its argument to set a display error, warning, or info message. Method composeSearch is used to apply the settings and prepare a search task. It returns a SearchComposition object, as shown below. Please note that the example uses ComponentUtils.adjustComboForFileName (and similar methods), that modifies a JComboBox component to act as a combo box for selection of file name pattern. These methods were designed to make working with components created in a GUI Builder comfortable. Remember to call fireChange whenever the value of any criteria changes. Example file "org.netbeans.example.search.ExampleSearchPresenter": package org.netbeans.example.search; import java.awt.FlowLayout; import javax.swing.BoxLayout; import javax.swing.JComboBox; import javax.swing.JComponent; import javax.swing.JLabel; import javax.swing.JPanel; import javax.swing.JSlider; import javax.swing.event.ChangeEvent; import javax.swing.event.ChangeListener; import org.netbeans.api.search.SearchScopeOptions; import org.netbeans.api.search.ui.ComponentUtils; import org.netbeans.api.search.ui.FileNameController; import org.netbeans.api.search.ui.ScopeController; import org.netbeans.api.search.ui.ScopeOptionsController; import org.netbeans.spi.search.provider.SearchComposition; import org.netbeans.spi.search.provider.SearchProvider; import org.openide.NotificationLineSupport; import org.openide.util.HelpCtx; public class ExampleSearchPresenter extends SearchProvider.Presenter { private JPanel panel = null; ScopeOptionsController scopeSettingsPanel; FileNameController fileNameComboBox; ScopeController scopeComboBox; ChangeListener changeListener; JSlider slider; public ExampleSearchPresenter(SearchProvider searchProvider) { super(searchProvider, false); } /** * Get UI component that can be added to the search dialog. */ @Override public synchronized JComponent getForm() { if (panel == null) { panel = new JPanel(); panel.setLayout(new BoxLayout(panel, BoxLayout.PAGE_AXIS)); JPanel row1 = new JPanel(new FlowLayout(FlowLayout.LEADING)); JPanel row2 = new JPanel(new FlowLayout(FlowLayout.LEADING)); JPanel row3 = new JPanel(new FlowLayout(FlowLayout.LEADING)); row1.add(new JLabel("Age in hours: ")); slider = new JSlider(1, 72); row1.add(slider); final JLabel hoursLabel = new JLabel(String.valueOf(slider.getValue())); row1.add(hoursLabel); row2.add(new JLabel("File name: ")); fileNameComboBox = ComponentUtils.adjustComboForFileName(new JComboBox()); row2.add(fileNameComboBox.getComponent()); scopeSettingsPanel = ComponentUtils.adjustPanelForOptions(new JPanel(), false, fileNameComboBox); row3.add(new JLabel("Scope: ")); scopeComboBox = ComponentUtils.adjustComboForScope(new JComboBox(), null); row3.add(scopeComboBox.getComponent()); panel.add(row1); panel.add(row3); panel.add(row2); panel.add(scopeSettingsPanel.getComponent()); initChangeListener(); slider.addChangeListener(new ChangeListener() { @Override public void stateChanged(ChangeEvent e) { hoursLabel.setText(String.valueOf(slider.getValue())); } }); } return panel; } private void initChangeListener() { this.changeListener = new ChangeListener() { @Override public void stateChanged(ChangeEvent e) { fireChange(); } }; fileNameComboBox.addChangeListener(changeListener); scopeSettingsPanel.addChangeListener(changeListener); slider.addChangeListener(changeListener); } @Override public HelpCtx getHelpCtx() { return null; // Some help should be provided, omitted for simplicity. } /** * Create search composition for criteria specified in the form. */ @Override public SearchComposition<?> composeSearch() { SearchScopeOptions sso = scopeSettingsPanel.getSearchScopeOptions(); return new ExampleSearchComposition(sso, scopeComboBox.getSearchInfo(), slider.getValue(), this); } /** * Here we return always true, but could return false e.g. if file name * pattern is empty. */ @Override public boolean isUsable(NotificationLineSupport notifySupport) { return true; } } The last part of our search provider is the implementation of SearchComposition. This is a composition of various search parameters, the actual search algorithm, and the displayer that presents the results.Methods to implement: The most important method here is start, which performs the actual search. In this case, SearchInfo and SearchScopeOptions objects are used for traversing. These objects were provided by controllers of GUI components (in the presenter). When something interesting is found, it should be displayed (with SearchResultsDisplayer.addMatchingObject). Method getSearchResultsDisplayer should return the displayer associated with this composition. The displayer can be created by subclassing SearchResultsDisplayer class or simply by using the SearchResultsDisplayer.createDefault. Then you only need a helper object that can create nodes for found objects. Example file "org.netbeans.example.search.ExampleSearchComposition": package org.netbeans.example.search; public class ExampleSearchComposition extends SearchComposition<DataObject> { SearchScopeOptions searchScopeOptions; SearchInfo searchInfo; int oldInHours; SearchResultsDisplayer<DataObject> resultsDisplayer; private final Presenter presenter; AtomicBoolean terminated = new AtomicBoolean(false); public ExampleSearchComposition(SearchScopeOptions searchScopeOptions, SearchInfo searchInfo, int oldInHours, Presenter presenter) { this.searchScopeOptions = searchScopeOptions; this.searchInfo = searchInfo; this.oldInHours = oldInHours; this.presenter = presenter; } @Override public void start(SearchListener listener) { for (FileObject fo : searchInfo.getFilesToSearch( searchScopeOptions, listener, terminated)) { if (ageInHours(fo) < oldInHours) { try { DataObject dob = DataObject.find(fo); getSearchResultsDisplayer().addMatchingObject(dob); } catch (DataObjectNotFoundException ex) { listener.fileContentMatchingError(fo.getPath(), ex); } } } } @Override public void terminate() { terminated.set(true); } @Override public boolean isTerminated() { return terminated.get(); } /** * Use default displayer to show search results. */ @Override public synchronized SearchResultsDisplayer<DataObject> getSearchResultsDisplayer() { if (resultsDisplayer == null) { resultsDisplayer = createResultsDisplayer(); } return resultsDisplayer; } private SearchResultsDisplayer<DataObject> createResultsDisplayer() { /** * Object to transform matching objects to nodes. */ SearchResultsDisplayer.NodeDisplayer<DataObject> nd = new SearchResultsDisplayer.NodeDisplayer<DataObject>() { @Override public org.openide.nodes.Node matchToNode( final DataObject match) { return new FilterNode(match.getNodeDelegate()) { @Override public String getDisplayName() { return super.getDisplayName() + " (" + ageInMinutes(match.getPrimaryFile()) + " minutes old)"; } }; } }; return SearchResultsDisplayer.createDefault(nd, this, presenter, "less than " + oldInHours + " hours old"); } private static long ageInMinutes(FileObject fo) { long fileDate = fo.lastModified().getTime(); long now = System.currentTimeMillis(); return (now - fileDate) / 60000; } private static long ageInHours(FileObject fo) { return ageInMinutes(fo) / 60; } } Run the module, select a node in the Projects window, press Ctrl-F, and you'll see the "Find in Projects" dialog has two tabs, the second is the one you provided above:

    Read the article

< Previous Page | 6 7 8 9 10 11 12 13 14 15 16 17  | Next Page >