Search Results

Search found 21131 results on 846 pages for 'jquery dialog'.

facebook twitter digg google delicious technorati stumbleupon myspace wordpress linkedin gmail igoogle windows live tumblr viadeo yahoo buzz yahoo mail yahoo bookmarks favorites email print

Page 437/846 | < Previous Page | 433 434 435 436 437 438 439 440 441 442 443 444  | Next Page >

  • Fancybox2 Inline Content Gallery

    - by beefchimi
    I am trying to create a gallery of inline content with Fancybox 2, and am failing miserably. I checked out some other resources online and they seem to indicate doing this relatively easily, yet, I cannot seem to get it to work. Here is my fiddle: http://jsfiddle.net/beefchimi/jtxHd/2/ Now, I feel like the fiddle is not loading the resources, so thats a problem. But even with the resources this does not work, I get the fancybox error. Resources: http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.3 http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.3 Any help would be greatly appreciated. EDIT: So I can't submit my question without including some code, because linking to jsfiddle isn't okay, so, here is my fancybox initialization, which you will also find in the jsfiddle: $(document).ready(function() { $('a.inlinepopup').fancybox({ 'width' : '75%', 'height' : '75%', 'autoScale' : false, 'type' : 'iframe' }); });

    Read the article

  • Detecting when Javascript is performing poorly

    - by what-the-crap
    I'm working on a webapp in jquery that, on older machines or machines without much resources, may perform poorly. To get around this I'd like to make a degraded version that disables some of the features, particularly those that rely on large images. How can I tell if my app is running poorly on the user's computer in jquery or javascript in general? I just need a way to call a function that will degrade the app. (especially when the user may run low on system memory) The only way I can think of is for manual user intervention, but the option would add clutter for users that don't need it and users that do need it may not notice it. Thanks!

    Read the article

  • Button stops working after loading div via ajax

    - by asovgir
    I have two divs on the page: main div and secondary, which loads a separate html page using ajax. All the links within the main div trigerred by a click event continue to work correctly and reference the appropriate content, but none of the jquery outside this div works (such as the navigation). Here's my jQuery: var url; $('.main a').live('click',function() { url = $(this).attr('href'); $('.secondary').load(url); return false; }); Can anyone help me why this isn't working? I think I am supposed to trigger a callback event but I am not sure how to do so. I know this question has been asked multiple times already (usually suggesting to use .live() or .on()), but none of those solutions seemed to work for me.

    Read the article

  • Cant handle it (jQuery hanlder understanding needed)

    - by chainwork
    I'm embarrassed to even ask BUT could someone help me understand what a "handler" is. I am new to jQuery and the API constantly has references similar to the following: toggle( handler(eventObject), handler(eventObject), [ handler(eventObject) ] ) I scratch my head and say to myself "what the hell is a handler". Then I check my 2 jquery books and don't really see anything specific there. I get what an event handler does, it handles an event. But the word handler in the above context confuses me including "eventObject". I tried to google it but could not really find a really clear definition of what exactly a handler is as it relates to jquery. Thanks for your help =]

    Read the article

  • Load the main page if user visits a page meant for an ajax request?

    - by QAZ
    Hello, I am using jQuery for a simple website and have a main page 'index.html' which can load some content (e.g. 'info1.html' or 'info2.html') via jQuery ajax requests, and display the result of these requests inside an element in the 'index.html' page. If a user somehow visits say 'info1.html' directly, is their a way to redirect or load the main 'index.html' page? (or what's best practice for this type of thing) as Google is indexing all the small html files used for the ajax requests and sometimes a user can click into the site via these pages. Thanks.

    Read the article

  • prettyPhoto not working in my wordpress theme

    - by codemanic
    So friends I am trying to use prettyPhoto in my wordpress theme but its not working at all. Both of its files - prettyPhoto.css and jquery.prettyPhoto.js are correctly linked in header.php file. This is the linking of the files in my header.php file - <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/js/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" /> <script src="<?php bloginfo('stylesheet_directory'); ?>/js/prettyPhoto/js/jquery.prettyPhoto.js" type="text/javascript"></script> Please let me know if this problem is due to not using wp_enqueue_script(). And this is how I link the image to be used with prettyPhoto - <a title="test image" href="images/new-image.png" rel="prettyPhoto[]"><img src="images/new-image.png" alt="Some Alternate Text" /></a> When I click on image, it doesn't open in prettyPhoto.

    Read the article

  • Load the main page if user visits a page ment for an ajax request?

    - by QAZ
    Hello, I am using jQuery for a simple website and have a main page 'index.html' which can load some content (e.g. 'info1.html' or 'info2.html') via jQuery ajax requests, and display the result of these requests inside an element in the 'index.html' page. If a user somehow visits say 'info1.html' directly, is their a way to redirect or load the main 'index.html' page? (or what's best practise for this type of thing) as Google is indexing all the small html files used for the ajax requests and sometimes a user can click into the site via these pages. Thanks.

    Read the article

  • How to make my JavaScript code unusable by anyone else? [closed]

    - by egasimus
    Heh, that's something that many plugin authors do without needing help, isn't it? :) Here's the rub -- I'm coding a jQuery plugin which I have the intent to sell. I want to provide a live demo of it; of course, I don't want anyone just using the demo code. I know it's dumb, and it certainly doesn't bring any good karma, but what are some naughty things I can do in the demo script that would make life reasonably difficult for anyone trying to use it? Setting undefined = true comes to mind, as well as overriding jQuery methods. Any suggestions beyond that?

    Read the article

  • Create div tag template and reuse

    - by user1683645
    Is it possible to create a template e.g with lots of other elements inside it with proper attribute "tagging" and reuse it with jquery? For instance when you want to display user submitted comments without refreshing the page. The reason I ask this is because the code between the div tags are rather long. So using for instance prepend() would be to long to rewrite. Whats the best approach for larger manipulations? Create a separate html? Im pretty new to manipulation, but since I have a programming background i would expect that there is an efficient way to reuse already existing HTML instead of redefining it in jquery.

    Read the article

  • sIFR encoding the non-breaking space char - %20

    - by Jay Carroll
    Gotta be something I'm doing wrong when converting the ttf with OpensIFRr, but I'm seeing %20 chars for non-breaking spaces in all sIFR'd text. I'm using the jQuery sIFR plugin (3.04) with the following: <div><h1>My Example Text</h1></div> ... <script type="text/javascript"> <!-- var $j = jQuery; $j(document).ready(function(){ $j('h1').sifr({ path: '/fonts/', font: 'fancy_script' }); }); //--> </script> Happens no matter which font I use, TIA... -Jay

    Read the article

  • ajax redirect dillema, how to get redirect URL OR how to set properties for redirect request

    - by Anthony
    First, I'm working in Google Chrome, if that helps. Here is the behavior: I send an xhr request via jquery to a remote site (this is a chrome Extension, and I've set all of the cross-site settings...): $.ajax({ type: "POST", contentType : "text/xml", url: some_url, data: some_xml, username: user, password: pass, success: function(data,status,xhr){ alert(data); }, error: function(xhr, status, error){ alert(xhr.status); } }); The URL that is being set returns a 302 (this is expected), and Chrome follows the redirect (also expected). The new URL returns a prompt for credentials, which are not being pulled from the original request, so Chrome shows a login dialog. If I put in the original credentials, I get back a response about invalid request sent (it's a valid HTTP request -- 200 -- the remote server just doesn't like one of the headers). When viewing the developer window in Chrome, there are two requests sent. The first is to the original URL with all settings set in the ajax request. The second is to the redirect URL, with a method of "GET", nothing from the "POST" field, and no credentials. I am at a loss as to what I can do. I either need to: Get the redirect URL so I can send a second request (xhr.getResponseHeader("Location") does NOT work), Have the new redirect request preserver the settings from the original request, or Get the final URL that the error came from so I can send another request. Ideally I don't want the user to have to put in their credentials a second time in this dialog box, but I'll take what I can get if I can just get the final URL.

    Read the article

  • SimpleModal -- Open OnLoad

    - by Bill Griffith
    I'm new to JQuery -- not new to javascript. Was able to open the OSX STYLE DIALOG using the hyperlink button provided in the demo index.html page, but would like to open it on the page load. I read a couple links on StackOverflow (http://stackoverflow.com/questions/1611727/how-do-i-invoke-a-simplemodal-osx-dialog-on-page-load), but still could not get it to work in the exact same index.html page. I finally resorted to a stopgap measure by programmatically invoking the button click of a hidden button element -- see following fragment: onLoad="document.getElementById('load_OSX_Example').click();"> <input type="hidden" id="load_OSX_Example" value="" class='osx'> <script type="text/javascript" language="javascript"> //#### open the OSX Modal ########## $(document).ready(function(){ $("#osx-modal-content").modal(); }); </script> So I have two questions: How can you invoke the class='osx' using javascript/html programmatically? Why won't this work using the $("#osx-modal-content").modal(); call in javascript (see fragment above)? I tried this in multiple browsers, and the only content that displayed on the screen was content of this tag: "div id="osx-modal-title", and there was no error in the jscript console.

    Read the article

  • ASP.NET MVC View ReRenders Part of Itself

    - by Jason
    In all my years of .NET programming I have not run across a bug as weird as this one. I discovered the problem because some elements on the page were getting double-bound by jQuery. After some (ridiculous) debugging, I finally discovered that once the view is completely done rendering itself and all its children partial views, it goes back to an arbitrary yet consistent location and re-renders itself. I have been pulling my hair out about this for two days now and I simply cannot get it to render itself only once! For lack of any better debugging idea, I've painstakingly added logging tracers throughout the HTML just so I can pin down what may be causing this. For instance, this code ($log just logs to the console): ... <script type="text/javascript">var x = 0; $log('1');</script> <div id="new-ad-form"> <script type="text/javascript">x++;$log('1.5', x);</script> ... will yield ... <--- this happens before this snippet 1 1.5 1 ... 10 <--- bottom of my form, after snippet 1.5 2 <--- beginning of part that runs again! ... 9 <--- this happens after this snippet I've searched my codebase high and low, but there is NOTHING that says that it should re-render part of a page. I'm wondering if the jQueryUI has anything to do with it, as #new-ad-form is the container for a jQueryUI dialog box. If this is potentially the case, here's my init code for that: $('#new-ad-form').dialog({ autoOpen: false, modal: true, width: 470, title: 'Create A New Ad', position: ['center', 35], close: AdEditor.reset });

    Read the article

  • Zend/PHP: How to disable webpage behind popup ?

    - by NAVEED
    I am working on zend framework, PHP and jQuery. I am working on popups sometimes. When any popup is open on the screen, we can still clicks links on webpage behind popup which causes some unexpected behaviour. How can I disable a webpage behind popup. I have seen some web application in which when popup appears then webpage behind popup become shady. I have read some tutorial about this. In each tutorial a link is used to open a dialog and an special attribute is added in for modal. But I have a different case I have to open dialog on some condition in action. I check a condition in action after post like this: $form = new Edit_Form( ); $this->view->form = $form; $this->view->form->setAction($this->view->url()); $request = $this->getRequest(); if ( $request->isPost() ) { $values = $request->getParams(); if( $values['edit'] ) { $this->view->openEditBox(); } } Now check in view to see that it should open an edit pop or not: if( $this->openEditBox ){ $jsonOutput ['content'] = '<div class="DialogBox" title="Edit">' . $this->form->render() . '</div>'; echo Zend_Json::encode($jsonOutput); } Any Idea? Thanks

    Read the article

  • JQM Nested Popups

    - by mcottingham
    I am having a hard time with the new Alpha release of JQM not showing nested popups. For example, I am displaying a popup form that the user is supposed to fill out, if the server side validation fails, I want to display an error popup. I am finding that the error popup is not being shown. I suspect that it is being shown below the original popup. function bindSongWriterInvite() { // Bind the click event of the invite button $("#invite-songwriter").click(function () { $("#songwriter-invite-popup").popup("open"); }); // Bind the invitation click event of the invite modal $("#songwriter-invite-invite").click(function () { if ($('#songwriter-invite').valid()) { $('#songwriter-invite-popup').popup('close'); $.ajax({ type: 'POST', async: true, url: '/songwriter/jsoncreate', data: $('#songwriter-invite').serialize() + "&songName=" + $("#Song_Title").val(), success: function (response) { if (response.state != "success") { alert("Should be showing error dialog"); mobileBindErrorDialog(response.message); } else { mobileBindErrorDialog("Success!"); } }, failure: function () { mobileBindErrorDialog("Failure!"); }, dataType: 'json' }); } }); // Bind the cancel click event of the invite modal $("#songwriter-invite-cancel").click(function () { $("#songwriter-invite-popup").popup("close"); }); } function mobileBindErrorDialog(errorMessage) { // Close all open popups. This is a work around as the JQM Alpha does not // open new popups in front of all other popups. var error = $("<div></div>").append("<p>" + errorMessage + "</p>") .popup(); $(error).popup("open"); } So, you can see that I attempt to show the error dialog regardless of whether the ajax post succeeds or fails. It just never shows up. Anyone have any thoughts? Mike

    Read the article

  • How to display a JSON error message?

    - by Tiny Giant Studios
    I'm currently developing a tumblr theme and have built a jQuery JSON thingamabob that uses the Tumblr API to do the following: The user would click on the "post type" link (e.g. Video Posts), at which stage jQuery would use JSON to grab all the posts that's related to that type and then dynamically display them in a designated area. Now everything works absolutely peachy, except that with Tumblr being Tumblr and their servers taking a knock every now and then, the Tumblr API thingy is sometimes offline. Now I can't foresee when this function will be down, which is why I want to display some generic error message if JSON (for whatever reason) was unable to load the post. You'll see I've already written some code to show an error message when jQuery can't find any posts related to that post type BUT it doesn't cover any server errors. Note: I sometimes get this error: Failed to load resource: the server responded with a status of 503 (Service Temporarily Unavailable) It is for this 503 Error message that I need to write some code, but I'm slightly clueless :) Here's the jQuery JSON code: $('ul.right li').find('a').click(function() { var postType = this.className; var count = 0; byCategory(postType); return false; function byCategory(postType, callback) { $.getJSON('{URL}/api/read/json?type=' + postType + '&callback=?', function(data) { var article = []; $.each(data.posts, function(i, item) { // i = index // item = data for a particular post switch(item.type) { case 'photo': article[i] = '<div class="post_wrap"><div class="photo" style="padding-bottom:5px;">' + '<a href="' + item.url + '" title="{Title}" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/XSTldh6ds/photo_icon.png" alt="type_icon"/></a>' + '<a href="' + item.url + '" title="{Title}"><img src="' + item['photo-url-500'] + '"alt="image" /></a></div></div>'; count = 1; break; case 'video': article[i] = '<div class="post_wrap"><div class="video" style="padding-bottom:5px;">' + '<a href="' + item.url + '" title="{Title}" class="type_icon">' + '<img src="http://static.tumblr.com/ewjv7ap/nuSldhclv/video_icon.png" alt="type_icon"/></a>' + '<span style="margin: auto;">' + item['video-player'] + '</span>' + '</div></div>'; count = 1; break; case 'audio': if (use_IE == true) { article[i] = '<div class="post_wrap"><div class="regular">' + '<a href="' + item.url + '" title="{Title}" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/R50ldh5uj/audio_icon.png" alt="type_icon"/></a>' + '<h3><a href="' + item.url + '">' + item['id3-artist'] +' - ' + item['id3-title'] + '</a></h3>' + '</div></div>'; } else { article[i] = '<div class="post_wrap"><div class="regular">' + '<a href="' + item.url + '" title="{Title}" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/R50ldh5uj/audio_icon.png" alt="type_icon"/></a>' + '<h3><a href="' + item.url + '">' + item['id3-artist'] +' - ' + item['id3-title'] + '</a></h3><div class="player">' + item['audio-player'] + '</div>' + '</div></div>'; }; count = 1; break; case 'regular': article[i] = '<div class="post_wrap"><div class="regular">' + '<a href="' + item.url + '" title="{Title}" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/dwxldhck1/regular_icon.png" alt="type_icon"/></a><h3><a href="' + item.url + '">' + item['regular-title'] + '</a></h3><div class="description_container">' + item['regular-body'] + '</div></div></div>'; count = 1; break; case 'quote': article[i] = '<div class="post_wrap"><div class="quote">' + '<a href="' + item.url + '" title="{Title}" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/loEldhcpr/quote_icon.png" alt="type_icon"/></a><blockquote><h3><a href="' + item.url + '" title="{Title}">' + item['quote-text'] + '</a></h3></blockquote><cite>- ' + item['quote-source'] + '</cite></div></div>'; count = 1; break; case 'conversation': article[i] = '<div class="post_wrap"><div class="chat">' + '<a href="' + item.url + '" title="{Title}" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/MVuldhcth/conversation_icon.png" alt="type_icon"/></a><h3><a href="' + item.url + '">' + item['conversation-title'] + '</a></h3></div></div>'; count = 1; break; case 'link': article[i] = '<div class="post_wrap"><div class="link">' + '<a href="' + item.url + '" title="{Title}" class="type_icon"><img src="http://static.tumblr.com/ewjv7ap/EQGldhc30/link_icon.png" alt="type_icon"/></a><h3><a href="' + item['link-url'] + '" target="_blank">' + item['link-text'] + '</a></h3></div></div>'; count = 1; break; default: alert('No Entries Found.'); }; }) // end each if (!(count == 0)) { $('#content_right') .hide('fast') .html('<div class="first_div"><span class="left_corner"></span><span class="right_corner"></span><h2>Displaying ' + postType + ' Posts Only</h2></div>' + article.join('')) .slideDown('fast') } else { $('#content_right') .hide('fast') .html('<div class="first_div"><span class="left_corner"></span><span class="right_corner"></span><h2>Hmmm, currently there are no ' + postType + ' posts to display</h2></div>') .slideDown('fast') } // end getJSON }); // end byCategory } }); If you'd like to see the demo in action, check out Elegantem but do note that everything might work absolutely fine for you (or not), depending on Tumblr's temperament.

    Read the article

  • jQueryUI Tabs: how to keep them on a single line?

    - by Andi
    Hi all, Maybe my question is wired: is there a way to prevent jQueryUI tabs from floating if browser window is too small? Explanation: I have a simple horizontal tab using CSS only. The content is floating but not the tabs. Important: there is no width set manually, the current width is taken automatically. Here is the code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style type="text/css"> #tabs ul { white-space: nowrap; } #tabs ul li { display: inline; white-space: nowrap; } </style> <title>Tabs-CSS</title> </head> <body> <div class="demo"> <div id="tabs"> <ul> <li><a href="#tabs-1">Preloaded</a></li> <li><a href="ajax/content1.html">Tab 1</a></li> <li><a href="ajax/content2.html">Tab 2</a></li> <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li> <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li> <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li> <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li> <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li> <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> </div> </div> </div> </body> </html> This is exactly what I want. Next step: add jQueryUI Tab as unobtrusive Javascript. For example like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script> <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/> <style type="text/css"> #tabs ul { white-space: nowrap; } #tabs ul li { display: inline; white-space: nowrap; } </style> <title>Tabs-CSS</title> </head> <body> <div class="demo"> <div id="tabs"> <ul> <li><a href="#tabs-1">Preloaded</a></li> <li><a href="ajax/content1.html">Tab 1</a></li> <li><a href="ajax/content2.html">Tab 2</a></li> <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li> <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li> <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li> <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li> <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li> <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> </div> </div> </div> <script type="text/javascript"> //<![CDATA[ $(function() { $("#tabs").tabs({ ajaxOptions: { error: function(xhr, status, index, anchor) { $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. If this wouldn't be a demo."); }, } }); }); $(function() { $("#innertabs").tabs({ ajaxOptions: { error: function(xhr, status, index, anchor) { $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. If this wouldn't be a demo."); } } }); }); //]]> </script> </body> </html> Now I can see that the tabbar floats on minimizing the browser window. And there are some ugly effect with the tabs jumping around. My main questions is: can I avoid floating the tabbar and keep all tabs on one single line? Kind regards, Andi

    Read the article

  • jQueryUI Tabs: how too keep them on a single line?

    - by Andi
    Hi all, Maybe my question is wired: is there a way to prevent jQueryUI tabs from floating if browser window is too small? Explanation: I have a simple horizontal tab using CSS only. The content is floating but not the tabs. Important: there is no width set manually, the current width is taken automatically. Here is the code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style type="text/css"> #tabs ul { white-space: nowrap; } #tabs ul li { display: inline; white-space: nowrap; } </style> <title>Tabs-CSS</title> </head> <body> <div class="demo"> <div id="tabs"> <ul> <li><a href="#tabs-1">Preloaded</a></li> <li><a href="ajax/content1.html">Tab 1</a></li> <li><a href="ajax/content2.html">Tab 2</a></li> <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li> <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li> <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li> <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li> <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li> <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> </div> </div> </div> </body> </html> This is exactly what I want. Next step: add jQueryUI Tab as unobtrusive Javascript. For example like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script> <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/> <style type="text/css"> #tabs ul { white-space: nowrap; } #tabs ul li { display: inline; white-space: nowrap; } </style> <title>Tabs-CSS</title> </head> <body> <div class="demo"> <div id="tabs"> <ul> <li><a href="#tabs-1">Preloaded</a></li> <li><a href="ajax/content1.html">Tab 1</a></li> <li><a href="ajax/content2.html">Tab 2</a></li> <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li> <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li> <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li> <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li> <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li> <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li> </ul> <div id="tabs-1"> <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> </div> </div> </div> <script type="text/javascript"> //<![CDATA[ $(function() { $("#tabs").tabs({ ajaxOptions: { error: function(xhr, status, index, anchor) { $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. If this wouldn't be a demo."); }, } }); }); $(function() { $("#innertabs").tabs({ ajaxOptions: { error: function(xhr, status, index, anchor) { $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible. If this wouldn't be a demo."); } } }); }); //]]> </script> </body> </html> Now I can see that the tabbar floats on minimizing the browser window. And there are some ugly effect with the tabs jumping around. My main questions is: can I avoid floating the tabbar and keep all tabs on one single line? Kind regards, Andi

    Read the article

  • filtering jqgrid based on user input

    - by Rohan
    hi, everything is working fine with my jqgrid except a small issue. i have defined postData below: $(document).ready(function() { $("#ctl00_ContentPlaceHolder2_drpUSite").change(function() { site = ($("#ctl00_ContentPlaceHolder2_drpUSite").val()); loadusergrid(); }); var usrparams = new Object(); var site = ($("#ctl00_ContentPlaceHolder2_drpUSite").val()); //----grid code--------- $("#users").jqGrid({ prmNames: { _search: "isSearch", nd: null, rows: "numRows", page: "page", sort: "sortField", order: "sortOrder" }, // add by default to avoid webmethod parameter conflicts postData: { searchString: '', searchField: '', searchOper: '', sites: site }, datatype: function(postdata) { mtype: "GET", $.ajax({ url: 'Users.aspx/GetUsers', type: "POST", contentType: "application/json; charset=utf-8", data: JSON.stringify(postdata), dataType: "json", success: function(data, st) { if (st == "success") { var grid = $("#users")[0]; var m = JSON.parse(data.d); grid.addJSONData(m); } }, error: function() { alert("Loading Failed!"); } }); }, // this is what jqGrid is looking for in json callback jsonReader: { root: "rows", page: "page", total: "total", records: "records", cell: "cell", id: "login", repeatitems: true }, colNames: ['Login', 'First Name', 'Last Name', 'Email', 'Site', 'Role', 'Room', 'UnitID', 'Supervisor', 'Super'], colModel: [ { name: 'login', index: 'login', width: 20 }, { name: 'fname', index: 'fname', width: 20, hidden: true }, { name: 'lname', index: 'lname', width: 60, align: "center", sortable: true, searchoptions: { sopt: ['eq', 'ne']} }, { name: 'email', index: 'email', width: 20, align: "center", sortable: false }, { name: 'site', index: 'site', width: 50, align: "center", sortable: true, searchoptions: { sopt: ['eq', 'ne']} }, { name: 'role', index: 'role', width: 15, align: "center", sortable: true, searchoptions: { sopt: ['eq', 'ne']} }, { name: 'room', index: 'room', width: 30, align: "center", sortable: true }, { name: 'unitid', index: 'unitid', width: 10, align: "center", sortable: false }, { name: 'super', index: 'super', width: 20 }, { name: 'supername', index: 'supername', width: 10, align: "center", sortable: false }, ], pager: "#pageusers", viewrecords: true, caption: "Registered Users", imgpath: 'themes/steel/images', rowNum: 20, rowList: [10, 20, 30, 40, 50], sortname: "pname", sortorder: "desc", showpage: true, gridModel: true, gridToolbar: true, onSelectRow: function(id) { var ret = jQuery("#users").getRowData(id); accpara.id = ret.id; accpara.pname = ret.pname; accpara.pid = ret.pid; accpara.bld = ret.bld; accpara.cname = ret.cname; accpara.amt = ret.amt; accpara.status = ret.status; accpara.notes = ret.notes; accpara.lname = ret.lname; } }); jQuery("#users").navGrid('#pageusers', { view: false, del: false, add: false, edit: false }, {}, // default settings for edit {}, // default settings for add {}, // delete {closeOnEscape: true, multipleSearch: true, closeAfterSearch: true }, // search options {} ); $("#users").setGridWidth(1300, true); $("#users").setGridHeight(500, true); jQuery("#users").jqGrid('filterToolbar'); //----grid code ends here function loadusergrid() { $("#users").setGridParam({ page: 1 }, { pgbuttons: true }, { pginput: true }, { postData: { "site": site} }).trigger("reloadGrid"); } }); when page loads for the 1st time, this works.. now i have 4 drop-downs which filter users. i have written a function which reloads the grid when the dropdown is changed, but it isnt working.. what am i doing wrong here?? when i enable postback for the dropdowns, i get the filtered result. i want to avoid postbacks on my page :). right now i have added just the site dropdown as the filter. once this starts working ill add the remaining 3. firebug shows the ajax call is fired successfully but with an empty sitename. please note that the site dropdown cntains an empty value when page is loaded for the 1st time. thanks in advance

    Read the article

  • Insert random <script> for using $(document).ready(function()}); in Joomla

    - by Anriëtte Combrink
    Hi I have an article in which I use PHP code inside the text editor in Joomla, in the backend. I can see jQuery already called when the page loads, here is my code inside the Article edit textbox: <?php $username="XXX"; $password="XXX"; $database="XXX"; mysql_connect('localhost',$username,$password) or die(mysql_error()); mysql_select_db($database) or die("Unable to select database"); $result=mysql_query("SELECT * FROM birthdays ORDER BY name") or die(mysql_error()); echo "<table width='100%' cellspacing='10' cellpadding='0' border='0'>"; echo "<tr valign='top'><th align='left'></th><th align='left'>Name</th><th align='left'>Email</th><th align='left'>Day</th><th align='left'>Month</th></tr><tr><td>&nbsp;</td></tr>"; while ($row = mysql_fetch_array($result)) { echo "<tr>"; echo '<td valign="top"><a href="#" id="'.$row['id'].'" class="delete_birthday"><img src="administrator/components/com_media/images/remove.png" alt="Delete user" /></a><input type="hidden" name="id[]" value="'.$row['id'].'" /></td>'; echo "<td valign='top' style='border-bottom:1px dotted #333333; padding:2px;'>"; echo $row['name']; echo "</td>"; echo "<td valign='top' style='border-bottom:1px dotted #333333; padding:2px;'>"; echo $row['email']; echo "</td>"; echo "<td align='center' valign='top' style='border-bottom:1px dotted #333333; padding:2px;'>"; echo $row['birthday']; echo "</td>"; echo "<td align='center' valign='top' style='border-bottom:1px dotted #333333; padding:2px;'>"; echo $row['birthmonth']; echo "</td>"; echo "</tr>"; } echo "</table>"; ?> <script type="text/javascript"> $(document).ready(function() { alert("hello"); }); </script> At the moment, nothing alerts (just alerting for testing if jQuery gets recognised, I am obviously going to put in click handlers), so I assume the $(document).ready() never gets triggered. I can see the code in the source, but it just never gets called. Anybody have any advice? BTW. the SC jQuery plugin is installed already to prevent library conflicts.

    Read the article

  • HTML: Place an image on top of another one

    - by Dimitris Baltas
    Inside a div, there is a picture that should have 10px margin in all directions from the DIV's border. On the left bottom corner of the picture there is an about-image. The picture is only displayed when its loaded in the DOM through jquery. The problem is that the existence of the about-image dislocates the picture downwards as many pixels as the height of the about-image. I am looking for the cleanest possible alternative to keep the picture inside the DIV and still display the about-image on top of it. Setting the picture as background will not work since i need the picture to load at once. Any improvement on the #about css would be greatly appreciated. Below is a full html page that reproduces the issue <html> <head> <title>Troubleshooting :: align the main picture inside the DIV</title> <style type="text/css"> html, body { background-color: #000000; } #about { z-index:2; position:relative; top:82%; left:3%; } #pic { width:100%; height:96%; } #main-content-image { height:100%; margin-right:10px; margin-left:10px; margin-top:10px; margin-bottom:10px; } #main-content { height:490px; border-width: 1px; border-style: solid; border-color: #777777; } #main-content-image.loading { background: url(http://farros.gr/images/ajax-loader2.gif) no-repeat center center; } a { text-decoration: none; text-decoration: none; color: #868686; outline:none; } .hide { display:none; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> <!-- $(document).ready(function(){ $(function () { var img = new Image(); $(img).load(function () { $(this).hide(); $(this).width('100%'); $(this).height('96%'); $('#main-content-image').removeClass('loading').append(this); $(this).fadeIn(); }).error(function () { // notify the user that the image could not be loaded }).attr('src', 'http://farros.gr/images/bg.jpg'); }); }); </script> </head> <body> <div id="main-content"> <div id="main-content-image" class="loading"> <a href="#"><img id="about" src='http://farros.gr/images/about.png' alt='Haris Farros'/></a> </div> </div> </body> </html>

    Read the article

  • Image displays when clicked with multiple radio button groups

    - by Jean
    I'm creating a form that has seven different selection groups, most with radio buttons (ie: buns, cheese), a couple with check boxes (toppings). I need jQuery to differentiate the groups and display images when clicked. The value can't be part of the code as I use it as part of the php form in the next page. <html> <head> <script src="js/jquery-1.6.1.min.js" type="text/javascript"></script> </head> <body> <div id="myRadioGroup"> <input type="radio" name="cars" value="American" />Yellow American<br /> <input type="radio" name="cars" value="Swiss" />Jarlsberg Swiss<br /> <input type="radio" name="cars" value="Blue" />Blue<br /> <input type="radio" name="cars" value="Cheddar" />Aged Cheddar<br /> <div id="American" class="desc"><img class="item" src="images/american-cheese-slice.png"></div> <div id="Swiss" class="desc"><img class="item" src="images/swisscheese.png"></div> <div id="Blue" class="desc"><img class="item" src="images/bluecheese.png"></div> <div id="Cheddar" class="desc"><img class="item" src="images/agedcheddar.png"></div> </div> <div id="myBunGroup"> <input type="radio" name="buns" value="Whole Wheat" />Whole Wheat<br /> <input type="radio" name="buns" value="Classic" />Classic<br /> <input type="radio" name="buns" value="Gluten Free" />Gluten Free<br /> <input type="radio" name="buns" value="Wrap" />Wrap<br /> <div id="WholeWheat" class="desc"><img class="item" src="images/wholewheat.png"></div> <div id="Classic" class="desc"><img class="item" src="images/classic.png"></div> <div id="GlutenFree" class="desc"><img class="item" src="images/gf-buns.png"></div> <div id="Wrap" class="desc"><img class="item" src="images/tortilla.png"></div> </div> <div id="myToppingGroup"> </div> <!-- http://stackoverflow.com/questions/5940963/jquery-show-and-hide-divs-based-on-radio-button-click --> <script> $(document).ready(function() { $(".item").hide(); $("input[name$="['cars', 'buns']"]").click(function() { var test = $(this).val(); $(".item").hide(); $("#" + test).show(); }); }); </script> </body> </html>

    Read the article

facebook twitter digg google delicious technorati stumbleupon myspace wordpress linkedin gmail igoogle windows live tumblr viadeo yahoo buzz yahoo mail yahoo bookmarks favorites email print

< Previous Page | 433 434 435 436 437 438 439 440 441 442 443 444  | Next Page >