Search Results

Search found 482 results on 20 pages for 'removeclass'.

Page 4/20 | < Previous Page | 1 2 3 4 5 6 7 8 9 10 11 12  | Next Page >

  • add tabs reload ajax

    - by alkitbi
    I want to add to this simple file ... When you click on a tab updated contents of the page or reload $(function(){ $('#tabs #nav li a').click(function(){ var currentNum = $(this).attr('id').slice(-1); $('#tabs #nav li a').removeClass('current'); $(this).addClass('current'); $('#tabs #content .tab-slide').hide(); $('#tabs #content #slide-'+currentNum+'.tab-slide').show(); }); $('#tabsSlide #nav li a').click(function(){ var currentNum = $(this).attr('id').slice(-1); $('#tabsSlide #nav li a').removeClass('current'); $(this).addClass('current'); $('#tabsSlide #content .tab-slide').slideUp(300); $('#tabsSlide #content #slide-'+currentNum+'.tab-slide').slideDown(300); }); });

    Read the article

  • jquery change function into code for plugin

    - by jaap Klevering
    Help would be greatly appreciated. What is the correct markup that would change this function into a plugin. I tried, but cant make it to work. $(document).ready(function(){ $('ul.tabNav a').click(function() { var curChildIndex = $(this).parent().prevAll().length + 1; $(this).parent().parent().children('.current').removeClass('current'); $(this).parent().addClass('current'); $(this).parent().parent().next('.tabContainer').children('.current').slideUp('fast',function() { $(this).removeClass('current'); $(this).parent().children('div:nth-child('+curChildIndex+')').slideDown('normal',function() { $(this).addClass('current'); }); }); return true; }); });

    Read the article

  • jQuery Validation - Highlighting Radio Labels

    - by Michael
    I'm trying to use jQuery validation to highlight the labels for my radio buttons only, and not the labels for my other inputs. I have a label for my radio button set called 'type'. I can't seem to get it to work! $(document).ready(function(){ $("#healthForm").validate({ highlight: function(element, errorClass) { $(element).addClass(errorClass) $(element.form).find("label[for='type']") .addClass("radioerror"); }, unhighlight: function(element, errorClass) { $(element).removeClass(errorClass) $(element.form).find("label[for='type']") .removeClass("radioerror"); }, errorPlacement: function(error, element) { } }); });

    Read the article

  • Global javascript variable inside ready

    - by w0rldart
    Which is the right way of declaring a global javascript variable? The way I'm trying it, doesn't work $(document).ready(function() { var intro; if ($('.intro_check').is(':checked')) { intro = true; $('.intro').wrap('<div class="disabled"></div>'); }; $('.intro_check').change(function(){ if(this.checked) { intro = false; $('.enabled').removeClass('enabled').addClass('disabled'); } else { intro = true; if($('.intro').exists()) { $('.disabled').removeClass('disabled').addClass('enabled'); } else { $('.intro').wrap('<div class="disabled"></div>'); } } }); }); console.log(intro);

    Read the article

  • Another passing variable through function jQuery/JS problem...

    - by dallen
    Here's my code: function mouseOver(variable) { return function() { $(variable).fadeIn(100); }; } function mouseOut(variable) { return function() { $(variable).fadeOut(100); }; } function lawyer(var1, var2, var3, var4) { return function() { $(var1).bind('mouseenter', mouseOver(var2)).bind('mouseleave', mouseOut(var2)).click( function() { $(var1).unbind('mouseenter').unbind('mouseleave'); $(var1).removeClass('off').addClass('on'); $(var3).bind('mouseenter', mouseOver(var4)).bind('mouseleave', mouseOut(var4)); $(var3).removeClass('on').addClass('off'); $(var4).hide(); }); } } lawyer("#group", ".b", "#group2", ".l"); What would be the reason for this not working? It works in that it hides $(var4).hide();, but clicking on the object doesn't seem to do anything. It works if I take the code out of a function and just copy/paste it a few times and change the targets. I'm not seeing it... Any help would be appreciated!

    Read the article

  • How do I separate functionality with Javascript code to set Timeout?

    - by GIVE-ME-CHICKEN
    I have the following code: var comparePanel = $(__this.NOTICE_BODY); clearTimeout(__this._timeout); comparePanel.addClass(__this.VISIBLE); __this._timeout = setTimeout(function () { comparePanel.removeClass(__this.CL_VISIBLE); }, 3000); } }) The following has been repeated a few times: __this._timeout = setTimeout(function () { comparePanel.removeClass(__this.CL_VISIBLE); }, 3000); I want to be able to do something like this: __this._timeout = setTimeout(comparePanel, 3000); How do I define and call that function? PS. I am very very new to JavaScript so any explanation of what is going on is greatly appreciated.

    Read the article

  • List/Grid Toggle for Photo Gallery with Shadowbox

    - by InfamouslyBubbly
    so I'm new to this site, and new to jquery, and javascript as a whole really, but I have very good comprehension of HTML and CSS. For a class in school, I'm making a photo gallery webpage using the Shadowbox plugin. I have that part all down, but one of the requirements is to add some sort of user option that the user can change that will get saved in a cookie. (I haven't gotten to the cookie part yet) For my option, I decided to add a toggle that will switch the view of the page from a grid view (default) with images, to a list view of just the captions of the images. I figured out how to do that, but decided it could probably done in a much simpler fashion with the use of loops. Here is the HTML I have: <body> <div id="preferences"> <h1>My Photo Gallery</h1> <ul id="options"> <li><a href="#" id="list"><img src="media/listview.png" alt="List view"/></a></li> <li><a href="#" id="grid"><img src="media/gridview.png" alt="List view"/></a></li> </ul> </div> <div id="gallery"> <a rel="shadowbox[Gallery]" class="l1 img" href="media/img1.jpg" title="Black and White Leopard Pattern"><img src="media/thumb1.jpg" alt="Black and White Leopard Pattern"/></a> <a rel="shadowbox[Gallery]" class="l2 img" href="media/img2.jpg" title="Snow Leopard Pattern"><img src="media/thumb2.jpg" alt="Snow Leopard Pattern"/></a> <a rel="shadowbox[Gallery]" class="l3 img" href="media/img3.jpg" title="Colorful Triangle Pattern"><img src="media/thumb3.jpg" alt="Colurful Triangle Pattern"/></a> <a rel="shadowbox[Gallery]" class="l4 img" href="media/img4.jpg" title="Tie Dye Zebra Stripe Pattern"><img src="media/thumb4.jpg" alt="Tie Dye Zebra Stripe Pattern"/></a> <a rel="shadowbox[Gallery]" class="l5 img" href="media/img5.jpg" title="Blue Knitted Pattern"><img src="media/thumb5.jpg" alt="Blue Knitted Pattern"/></a> <a rel="shadowbox[Gallery]" class="l6 img" href="media/img6.jpg" title="Black and White Damask Pattern"><img src="media/thumb6.jpg" alt="Black and White Damask Pattern"/></a> <a rel="shadowbox[Gallery]" class="l7 img" href="media/img7.jpg" title="Wooden Panel Pattern"><img src="media/thumb7.jpg" alt="Wooden Panel Pattern"/></a> <a rel="shadowbox[Gallery]" class="l8 img" href="media/img8.jpg" title="Brick Pattern"><img src="media/thumb8.jpg" alt="Brick Pattern"/></a> <a rel="shadowbox[Gallery]" class="l9 img" href="media/img9.jpg" title="Watercolor Pattern"><img src="media/thumb9.jpg" alt="Watercolor Pattern"/></a> <a rel="shadowbox[Gallery]" class="l10 img" href="media/img10.jpg" title="Orange Stripe Pattern"><img src="media/thumb10.jpg" alt="Orange Stripe Pattern"/></a> <a rel="shadowbox[Gallery]" class="l11 img" href="media/img11.jpg" title="Blue Scales Pattern"><img src="media/thumb11.jpg" alt="Blue Scales Pattern"/></a> <a rel="shadowbox[Gallery]" class="l12 img" href="media/img12.jpg" title="Woven Pattern"><img src="media/thumb12.jpg" alt="Woven Pattern"/></a> </div> </body> So here is the sample that works (for the list portion anyways), but seems excessive in terms of code since I'd have to repeat for each image: $(document).ready(function(){ $( "#list" ).click(function() { $( "a.l1" ).removeClass( "img" ); $( "a.l1" ).addClass( "lst" ); $( "a.l1" ).text( $( "a.l1" ).attr( "title" ); //repeat for l1 through l12 (that`s the letter L not a 1) }); $( "#grid" ).click(function() { $( "a.l1" ).removeClass( "lst" ); $( "a.l1" ).addClass( "grid" ); //actually have no idea at all how to get this back to the original img tag other than maybe .innerHTML??? //repeat for l1 through l12 (again, that`s the letter L not a 1) }); }): And here is kinda how I'd like it (Y'know, except in a way that works) $(document).ready(function(){ var i = 1; var selcur = $( "'a.l" + i + "'" ); var title = selcur.attr( "title" ); var image = '<img src="media/thumb' + i + '.jpg" alt="' + title + '"/>'; $( "#list" ).click(function() { while (1<=12) { selcur.addClass("lst"); selcur.removeClass("img"); selcur.text( title ); i++; } i = 1; }); $( "#grid" ).click(function() { while (1<=12) { selcur.removeClass("lst"); selcur.addClass("img"); selcur.text( image ); i++; } i = 1; }); }); Please tell me how I am going about this wrong, keep in mind again I'm new to this, I appreciate any and all responses! Is there a better way to do this? I really want to keep it simple.

    Read the article

  • I get an `Cannot read property 'slice' of undefined` message when I use the scrollTo jQuery plugin inside this function

    - by alexchenco
    I'm using the jQuery scrollTo plugin. I get this error in my JS Console: 16827Uncaught TypeError: Cannot read property 'slice' of undefined d.fn.scrollToindex.html.js:16827 jQuery.extend.eachindex.html.js:662 d.fn.scrollToindex.html.js:16827 jQuery.extend.eachindex.html.js:662 jQuery.fn.jQuery.eachindex.html.js:276 d.fn.scrollToindex.html.js:16827 popupPlaceindex.html.js:18034 (anonymous function)index.html.js:17745 jQuery.extend._Deferred.deferred.resolveWithindex.html.js:1018 doneindex.html.js:7247 jQuery.ajaxTransport.send.script.onload.script.onreadystatechange When I place $(".menu").scrollTo( $("li.matched").attr("id"), 800 ); inside it. function popupPlace(dict) { $popup = $('div#dish-popup'); $popup.render(dict,window.dishPopupTemplate); if(typeof(dict.dish) === 'undefined') { $popup.addClass('place-only'); } else { $popup.removeClass('place-only'); } var $place = $('div#dish-popup div.place'); var place_id = dict.place._id; if(liked[place_id]) { $place.addClass('liked'); } else { $place.removeClass('liked'); } if(dict.place.likes) { $place.addClass('has-likes'); } else { $place.addClass('zero-likes'); } var tokens = window.currentSearchTermTokens; var tokenRegex = tokens && new RegExp($.map(tokens, RegExp.escape).join('|'), 'gi'); $.each(dict.place.products, function(n, product) { $product = $('#menu-item-'+product.id); if(liked[place_id+'/'+product.id]) { $product.addClass('liked'); } if(tokens && matchesDish(product, tokens)) { $product.addClass('matched'); $product.highlight(tokenRegex); } else { $product.removeClass('matched'); $product.removeHighlight(); } if(product.likes) { $product.addClass('has-likes'); } else { $product.addClass('zero-likes'); } }); $('#overlay').show(); $('#dish-popup-container').show(); // Scroll to matched dish //$("a#scrolll").attr("href", "#" + $("li.matched").attr("id")); //$("a#scrolll").attr("href", "#" + $("li.matched").attr("id")); //$("a#scrolll").trigger("click"); $(".menu").scrollTo( $("li.matched").attr("id"), 800 ); // Hide dish results on mobile devices to prevent having a blank space at the bottom of the site if (Modernizr.mq('only screen and (max-width: 640px)')) { $('ol.results').hide(); } $(".close-dish-popup").click(function() { $("#overlay").hide(); $("#dish-popup-container").hide(); $('ol.results').show(); changeState({}, ['dish', 'place', 'serp']); }); showPopupMap(dict.place, "dish-popup-map"); } Any suggestion to fix this?

    Read the article

  • jQuery automatic scroll / slideshow

    - by tony noriega
    Could i modify this existing code to automatically scroll through the list items to display the content? Sorry, the: ul li a {} links. Maybe using "interval" method? $(document).ready(function(){ $('ul.tabNav a').click(function() { var curChildIndex = $(this).parent().prevAll().length + 1; $(this).parent().parent().children('.current').removeClass('current'); $(this).parent().addClass('current'); $(this).parent().parent().prev('.tabContainer').children('.current').fadeOut('fast',function() { $(this).parent().children('div:nth-child('+curChildIndex+')').fadeIn('fast',function() { $(this).addClass('current'); }); $(this).removeClass('current'); }); return false; }); });

    Read the article

  • how does this animation work?

    - by icicleking
    I'm working with cookies to run or not run a jQuery animation someone else built: $(function () { $('div.transitional').click(function () { $('div.intro').removeClass('hidden'); $('div.final').off('click'); }); ShowDiv($("div.transitional.hidden")[0]); }); function ShowDiv(target) { target = $(target); target.removeClass('hidden'); target.delay(500).animate({ opacity: 1.0 }, 300, 'easeInExpo', function () { ShowDiv($("div.transitional.hidden")[0]); }) } I have the cookie part working, but I'm confused about the anonymous function and the "ShowDiv" function. What is each part doing? Functionally, the animation makes visible a series of pictures, then the whole site. I want to skip the animation and just make the whole site visible(if cookies='visited'). I'd like to do this without rewriting the animation script. here's a link. What happens now is if you have the cookie the animation doesn't run and everything is hidden.

    Read the article

  • Adding the text area input to a list with jquery

    - by amylynn83
    I am making a shopping list app. When an item is added to the text input, it should be converted into a list item with a class of "tile" and added to the beginning of the list with a class of ".shopping_item_list". Here is my HTML: <section> <h1 class="outline">Shopping List Items</h1> <ul class="shopping_item_list"> <li class="tile">Flowers<span class="delete">Delete</span></li> </ul> </section> My jQuery: $("input[name='shopping_item']").change(function() { var item = $(this).val(); $("<li class='tile'>+ item +</li>").prependTo(".shopping_item_list"); $(".tile").removeClass("middle"); $(".shopping_item_list li:nth-child(3n+2)").addClass("middle"); }); This isn't working, and I can't figure out why. I'm new to jQuery. Also, I need to add the "delete" span to the list item and am not sure how. Thanks for any help you can offer! Edited to add: Thanks to the feedback here, I was able to make it work with: $("input[name='shopping_item']").change(function() { var item = $(this).val(); $("<li class='tile'>" + item + "<span class='delete'>Delete</span>" + " </li>").prependTo(".shopping_item_list"); $(".tile").removeClass("middle"); $(".shopping_item_list li:nth-child(3n+2)").addClass("middle"); }); However, in my jquery, I have functions for the classes "tile" and "delete" that are not working for newly added items. // hide delete button $(".delete").hide(); // delete square $(".tile").hover(function() { $(this).find(".delete").toggle(); }); $(".tile").on("click", ".delete", function() { $(this).closest("li.tile").remove(); $(".tile").removeClass("middle"); $(".shopping_item_list li:nth-child(3n+2)").addClass("middle"); }); // cross off list $(".tile").click(function() { $(this).toggleClass("deleteAction"); }); The new items, which have these classes applied aren't using these functions at all. Do I need to add the functions below the add item? Does the order in which they appear in my js file matter? Do I need to add some kind of function?

    Read the article

  • jquery selection with .not()

    - by Yako
    Hello, I have some troubles with jQuery. I have a set of Divs with .square classes. Only one of them is supposed to have an .active class. This .active class may be activated/de-activated onClick. Here is my code : jQuery().ready(function() { $(".square").not(".active").click(function() { //initialize $('.square').removeClass('active'); //activation $(this).addClass('active'); // some action here... }); $('.square.active').click(function() { $(this).removeClass('active'); }); }); My problem is that the first function si called, even if I click on an active .square, as if the selector was not working. In fact, this seems to be due to the addClass('active') line... Would you have an idea how to fix this ? Thanks

    Read the article

  • Deselecting an element in jQuery

    - by Michael Itzoe
    I have a collection of span elements. In the code I have a global variable that represents the "selected" object. Using the click event when a span is clicked I reset the object's class, reset the global variable, then set the object to the variable and change its class (to make it "highlighted"). This effectively toggles selection when clicking an object. var currentItem = null; $( ".item" ).click( function() { if( $( this ).hasClass( "selected" ) ) { $( this ).removeClass( "selected" ) currentItem = null; } else { if( $( ".item" ).hasClass( "selected" ) ){ $( ".item" ).removeClass( "selected" ) } $( this ).addClass( "selected" ); currentItem = $( this ); } } ); What I'd like to be able to do is unselect when clicking on an empty area of the page. I tried creating a click event on the body object, but that overrode the span click event so nothing was selected. I'm a complete jQuery noob and not sure where to go with this.

    Read the article

  • Remove Class on input cheched not working

    - by Manna
    I have set that if the Input checkbox is checked the opacity turn from 0.5 to 1. It'not working, it actually works if i do the opposite, but this is not my goal! My CSS code .opacitychange {opacity: 1;} #total {opacity: 0.5} and if($("#iva").is(':checked')) { $('#total').html('+' + vat); total += vat; $('#total').addClass("opacitychange"); } else $('#total').html('0.00').removeClass("opacitychange"); if($("#irpef").is(':checked')) { $('#total1').html('-' + irpf); total -= irpf; $('#total1').addClass("opacitychange"); } else $('#total1').html('0.00').removeClass("opacitychange"); $("#total2").html(total.toFixed(2)); }; What's wrong? Here the case

    Read the article

  • jQuery: Scroll the window then addClass() - how to callback

    - by carillonator
    Inside a jQuery event handler, I would like to scroll the window and then add a class to something. This is my code: $('#foo').click(function() { window.scrollTo(y); $('#bar').addClass('active'); }); $(window).scroll(function() { $('#bar').removeClass('active'); }); Notice I have another handler to remove that same class whenever the window is scrolled. The scrolling part works fine, but seems to run asynchronously, so removeClass() happens after addClass() but before the scrolling is finished. I don't know how to do this in plain javascript. I know there is a jQuery scrollTop() function that does the same thing (but seems to have cross-browser issues), but it doesn't accept a callback. What I really need is a callback to add the class after the scrolling is finished. thanks!

    Read the article

  • Toggling between states on 3 containers in jQuery

    - by Saif Bechan
    Hello, i have an php/mysql/ajax auction application application. Now there is a section that can have 3 states. State one, the user can place a bid.(Bid button is shown) State two, the user has to wait before he can place a new bid(number of sec is shown) State three, the user has an auto bidding system enabled.(The price maximum and amount ate shown). Now i get these values trough jquery ajax, and i want to present the user the right section. Now the code i have is as follows: if(data[i].bidwait >= 0 && data[i].amount == ''){ // In this section the user has no autobiddings, and can place a bidding $(productContainer+' .bid-wrapper').removeClass('none'); $(productContainer+' .bidwait-wrapper').addClass('none'); $(productContainer+' .autobid-wrapper').addClass('none'); }else if(data[i].bidwait < 0 && data[i].amount == ''){ // In this section the user has to wait the amount of sec to place a new bid $(productContainer+' .bid-wrapper').addClass('none'); $(productContainer+' .bidwait-wrapper').removeClass('none'); $(productContainer+' .autobid-wrapper').addClass('none'); $(productContainer+' .bidwait-text').text(data[i].bidwait * -1); }else{ // In the last section the user has the auto bidder enabled, so that is shown $(productContainer+' .bid-wrapper').addClass('none'); $(productContainer+' .bidwait-wrapper').addClass('none'); $(productContainer+' .autobid-wrapper').removeClass('none'); $(productContainer+' .amount').html(data[i].amount == 0 ? '&#8734;' : data[i].amount); $(productContainer+' .maxprice').html(data[i].maxprice == 0 ? '&#8734;' : data[i].maxprice); } This looks like an awful lot of code for something so small. I was wondering if there is an easier method to accomplish such a thing. Speed is a huge issue for me because this has to run every second in the users browser. If there is no other option i am just going to remove this option and go with a no ajax approuch. If you have been, thank you for reading!

    Read the article

  • Highlighting current and previous stars on mouseover

    - by mpet
    I'm trying to make simple five star rating system using Twitter Bootstrap 3 i jQuery. For now, I'm trying to set .hover() and .mouseout() events using counter by writing this code that doesn't work: var i; for (i = 1; i <= 5; i++) { $('#overall_rating_' + i).hover(function(){ $('#overall_rating_' + i).removeClass("glyphicon-star-empty").addClass("glyphicon-star"); }); $('#overall_rating_' + i).mouseout(function(){ $('#overall_rating_' + i).removeClass("glyphicon-star").addClass("glyphicon-star-empty"); }); } Trying to highlight current and previous stars on mouseover. The code is not complete, it would be accompanied by additional sub-counters, but this part doesn't work for now. Any better methods are welcome. What's broken here?

    Read the article

  • Toggling row colors

    - by cf_PhillipSenn
    I have a table cell in the footer that allows the user to turn on row coloring: $('#highlight').click(function() { $(this).parents('table').RowColors(); }) // From Chapter 7 of Learning jQuery $.fn.RowColors = function() { $('tbody tr:odd', this).removeClass('even').addClass('odd'); $('tbody tr:even', this).removeClass('odd').addClass('even'); return this; }; Q: How do I write a selector that says: IF there is at least 1 row with class="even", then remove both "even" and "odd" ELSE execute the RowColors function.

    Read the article

  • Using jQuery, CKEditor, AJAX in ASP.NET MVC 2

    - by Ray Linder
    After banging my head for days on a “A potentially dangerous Request.Form value was detected" issue when post (ajax-ing) a form in ASP.NET MVC 2 on .NET 4.0 framework using jQuery and CKEditor, I found that when you use the following: Code Snippet $.ajax({     url: '/TheArea/Root/Add',     type: 'POST',     data: $("#form0Add").serialize(),     dataType: 'json',     //contentType: 'application/json; charset=utf-8',     beforeSend: function ()     {         pageNotify("NotifyMsgContentDiv", "MsgDefaultDiv", '<img src="/Content/images/content/icons/busy.gif" /> Adding post, please wait...', 300, "", true);         $("#btnAddSubmit").val("Please wait...").addClass("button-disabled").attr("disabled", "disabled");     },     success: function (data)     {         $("#btnAddSubmit").val("Add New Post").removeClass("button-disabled").removeAttr('disabled');         redirectToUrl("/Exhibitions");     },     error: function ()     {         pageNotify("NotifyMsgContentDiv", "MsgErrorDiv", '<img src="/Content/images/content/icons/cross.png" /> Could not add post. Please try again or contact your web administrator.', 6000, "normal");         $("#btnAddSubmit").val("Add New Post").removeClass("button-disabled").removeAttr('disabled');     } }); Notice the following: Code Snippet data: $("#form0Add").serialize(), You may run into the “A potentially dangerous Request.Form value was detected" issue with this. One of the requirements was NOT to disable ValidateRequest (ValidateRequest=”false”). For this project (and any other project) I felt it wasn’t necessary to disable ValidateRequest. Note: I’ve search for alternatives for the posting issue and everyone and their mothers continually suggested to disable ValidateRequest. That bothers me – a LOT. So, disabling ValidateRequest is totally out of the question (and always will be).  So I thought to modify how the “data: “ gets serialized. the ajax data fix was simple, add a .html(). YES!!! IT WORKS!!! No more “potentially dangerous” issue, ajax form posts (and does it beautifully)! So if you’re using jQuery to $.ajax() a form with CKEditor, remember to do: Code Snippet data: $("#form0Add").serialize().html(), or bad things will happen. Also, don’t forget to set Code Snippet config.htmlEncodeOutput = true; for the CKEditor config.js file (or equivalent). Example: Code Snippet CKEDITOR.editorConfig = function( config ) {     // Define changes to default configuration here. For example:     // config.language = 'fr';     config.uiColor = '#ccddff';     config.width = 640;     config.ignoreEmptyParagraph = true;     config.resize_enabled = false;     config.skin = 'kama';     config.enterMode = CKEDITOR.ENTER_BR;       config.toolbar = 'MyToolbar';     config.toolbar_MyToolbar =     [         ['Bold', 'Italic', 'Underline'],         ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', 'Font', 'FontSize', 'TextColor', 'BGColor'],         ['BulletedList', 'NumberedList', '-', 'Outdent', 'Indent'],         '/',         ['Scayt', '-', 'Cut', 'Copy', 'Paste', 'Find'],         ['Undo', 'Redo'],         ['Link', 'Unlink', 'Anchor', 'Image', 'Flash', 'HorizontalRule'],         ['Table'],         ['Preview', 'Source']     ];     config.htmlEncodeOutput = true; }; Happy coding!!! Tags: jQuery ASP.NET MVC 2 ASP.NET 4.0 AJAX

    Read the article

  • Using jQuery Live instead of jQuery Hover function

    - by hajan
    Let’s say we have a case where we need to create mouseover / mouseout functionality for a list which will be dynamically filled with data on client-side. We can use jQuery hover function, which handles the mouseover and mouseout events with two functions. See the following example: <!DOCTYPE html> <html lang="en"> <head id="Head1" runat="server">     <title>jQuery Mouseover / Mouseout Demo</title>     <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script>     <style type="text/css">         .hover { color:Red; cursor:pointer;}     </style>     <script type="text/javascript">         $(function () {             $("li").hover(               function () {                   $(this).addClass("hover");               },               function () {                   $(this).removeClass("hover");               });         });     </script> </head> <body>     <form id="form2" runat="server">     <ul>         <li>Data 1</li>         <li>Data 2</li>         <li>Data 3</li>         <li>Data 4</li>         <li>Data 5</li>         <li>Data 6</li>     </ul>     </form> </body> </html> Now, if you have situation where you want to add new data dynamically... Lets say you have a button to add new item in the list. Add the following code right bellow the </ul> tag <input type="text" id="txtItem" /> <input type="button" id="addNewItem" value="Add New Item" /> And add the following button click functionality: //button add new item functionality $("#addNewItem").click(function (event) {     event.preventDefault();     $("<li>" + $("#txtItem").val() + "</li>").appendTo("ul"); }); The mouse over effect won't work for the newly added items. Therefore, we need to use live or delegate function. These both do the same job. The main difference is that for some cases delegate is considered a bit faster, and can be used in chaining. In our case, we can use both. I will use live function. $("li").live("mouseover mouseout",   function (event) {       if (event.type == "mouseover") $(this).addClass("hover");       else $(this).removeClass("hover");   }); The complete code is: <!DOCTYPE html> <html lang="en"> <head id="Head1" runat="server">     <title>jQuery Mouseover / Mouseout Demo</title>     <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script>     <style type="text/css">         .hover { color:Red; cursor:pointer;}     </style>     <script type="text/javascript">         $(function () {             $("li").live("mouseover mouseout",               function (event) {                   if (event.type == "mouseover") $(this).addClass("hover");                   else $(this).removeClass("hover");               });             //button add new item functionality             $("#addNewItem").click(function (event) {                 event.preventDefault();                 $("<li>" + $("#txtItem").val() + "</li>").appendTo("ul");             });         });     </script> </head> <body>     <form id="form2" runat="server">     <ul>         <li>Data 1</li>         <li>Data 2</li>         <li>Data 3</li>         <li>Data 4</li>         <li>Data 5</li>         <li>Data 6</li>     </ul>          <input type="text" id="txtItem" />     <input type="button" id="addNewItem" value="Add New Item" />     </form> </body> </html> So, basically when replacing hover with live, you see we use the mouseover and mouseout names for both events. Check the working demo which is available HERE. Hope this was useful blog for you. Hope it’s helpful. HajanReference blog: http://codeasp.net/blogs/hajan/microsoft-net/1260/using-jquery-live-instead-of-jquery-hover-function

    Read the article

  • Contact Form + jQuery validationengine

    - by BigMad
    I created this contact form, inserting jQuery fadeLabel and validationEngine to beautify the form the file index.php / .html (I have not yet figured out which of the two versions put it) scripts are index: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="/js/backtop.js"></script> <script src="/js/fadeLabel.js"></script> <script> $(document).ready(function () { $('form .fadeLabel').fadeLabel(); }); </script> <script src="/js/validationEngine-it.js"></script> <script src="/js/validationEngine.js"></script> <script> $(document).ready(function(){ $("#form_box").validationEngine({ ajaxSubmit: true, ajaxSubmitFile: "contact.php", ajaxSubmitMessage: "Thank you, We will contact you soon !", success : false, failure : function() {} }) }); </script> <script src="/js/contactform.js"></script> however this is the part of the form's code <p id="form_success" class="success hide"><strong>Grazie!</strong> Il tuo messaggio è stato inviato con successo.</p> <form id="form_box"> <fieldset> <p><label for="name">Nome*</label><input type="text" id="name" name="name" class="validate[required] fadeLabel" value=""/></p> <p><label for="email">E-mail*</label><input type="email" id="email" name="email" class="validate[required,custom[email]] fadeLabel" value=""/></p> <p><label for="website">Sito web</label><input type="url" id="website" name="website" class="fadeLabel" value=""/></p> <p><label for="message">Messaggio*</label><textarea id="message" name="message" class="validate[required] fadeLabel" cols="30" rows="10" value=""></textarea></p> </fieldset> <p id="form_submit" class="submit"><button class="send">Invia</button> *Campi obbligatori</p> <p id="form_send" class="send hide">Invio in corso&hellip;</p> <p id="form_error" class="submit error hide"><button class="send">Invia</button> Si prega di correggere l'errore e re-inviarlo.</p> </form> This is the contact.php where it receives the data and sends 2 emails (one for me with the data and a thank you to those who contacted me) contact.php: <?php //include variables $my_email = "[email protected]"; $my_site = "adrianogenovese.com"; session_start(); $name = $_POST['name']; $email = $_POST['email']; $website = $_POST['website']; $message = $_POST['message']; $ip = $_SERVER['REMOTE_ADDR']; //beginning to email me $to = $my_email; $sbj = "Richiesta Informazioni - $my_site"; $msg = " <html> ... //the body of the email to me ... </html> "; $from = $email; $headers = 'MIME-Version: 1.0' . "\n"; $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\n"; $headers .= "From: $from"; mail($to,$sbj,$msg,$headers); //email sent to me //beginning of the email recipient $toClient = $email; $msgClient = " <html> ... //the body of the email recipient ... </html> "; $fromClient = $my_email; $sbjClient = "Grazie $name per aver contattato $my_site "; $headersClient = 'MIME-Version: 1.0' . "\r\n"; $headersClient .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n"; $headersClient .= "From: $fromClient"; mail($toClient,$sbjClient,$msgClient,$headersClient); //mail inviata al cliente //order confirmation email //Reset error session_destroy(); exit; ?> this is the contact form jscript contactform.js: $(document).ready(function() { $(".send").click(function(){ $("#form_send").removeClass('hide'); $("#form_submit").addClass('hide'); $("#form_error").addClass('hide'); var name = $("#name").val(); var email = $("#email").val(); var website = $("#website").val(); var message = $("#message").val(); if (name == "" || email == "" ) { $("#form_send").addClass('hide'); $("#form_error").removeClass('hide'); } else { $.ajax({ type: "POST", url: "contatti/contact.php", data: "name=" + name + "&email=" + email + "&message=" + message + "&website=" + website, dataType: "html", success: function(msg) { $("#form_send").addClass('hide').delay(3000).fadeOut(3000); $("#form_success").removeClass('hide'); $("#form_box").addClass('hide').slideUp(2000).fadeOut(); }, error: function() { alert("An unexpected error occurred..."); } }); } }); //end form });//end Dom The jQuery seem to work very well, I wanted to make sure that the page is not of the form updated or go to another page (the only thing that works for now) compensation reflected in the following problems: I always leave the alert of contactform.js Does not send any mail, it to me to recipient I can not do the work properly. delay () .fadeOut / fadeIn and. SlideUp (). FadeOut () so that the sending of this email appears for 3 seconds "$ (" # form_send "). addClass ('hide')" before you do anything else then the form disappears up using some second type slideUp "$ (" # form_box "). addClass ('hide')" by displaying just the "$ (" # form_success "). removeClass ('hide')" in the address bar also appears the form data (e.g. ../index.php?name=test&email=example%40mail.com&website=&message=helloworld)

    Read the article

  • jQuery, array form radio button name problem.

    - by borayeris
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>click div to select hidden options</title> <script type="text/javascript" src="jquery-1.4.4.js"></script> <style type="text/css"> .clickDiv { width:50px; height:50px; cursor:crosshair; } .red {border:1px #000 solid;} .green {border:1px #000 solid;} .redBG {background:#F00;} .greenBG {background:#0F0;} </style> <script type="text/javascript"> $(function() { $('div.clickDiv.red').click(function(){ var secilenMadde=$(this).attr('madde'); $('div#write').text(secilenMadde); $('input[name='+secilenMadde+'][value=red]').attr('checked', 'checked'); $('div.clickDiv.red[madde='+secilenMadde+']').addClass('redBG'); $('div.clickDiv.green[madde='+secilenMadde+']').removeClass('greenBG'); }); $('div.clickDiv.green').click(function(){ var secilenMadde=$(this).attr('madde'); $('div#write').text(secilenMadde); $('input[name='+secilenMadde+'][value=green]').attr('checked', 'checked'); $('div.clickDiv.green[madde='+secilenMadde+']').addClass('greenBG'); $('div.clickDiv.red[madde='+secilenMadde+']').removeClass('redBG'); }); }); </script> </head> <body> <div id="write"></div> <form id="formId" name="formName" method="post"> <table> <tr> <td><div class="clickDiv red" madde="line1"></div></td> <td><div class="clickDiv green" madde="line1"></div></td> </tr> <tr> <td><div class="clickDiv red" madde="line2"></div></td> <td><div class="clickDiv green" madde="line2"></div></td> </tr> </table> <label for="line1red"><input id="line1red" type="radio" name="line1" value="red" /> Red</label> <label for="line1green"><input id="line1green" type="radio" name="line1" value="green" /> Green</label><br /> <label for="line2red"><input type="radio" name="line2" value="red" /> Red</label> <label for="line2green"><input type="radio" name="line2" value="green" /> Green</label> </form> </body> </html> This works. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>click div to select hidden options</title> <script type="text/javascript" src="jquery-1.4.4.js"></script> <style type="text/css"> .clickDiv { width:50px; height:50px; cursor:crosshair; } .red {border:1px #000 solid;} .green {border:1px #000 solid;} .redBG {background:#F00;} .greenBG {background:#0F0;} </style> <script type="text/javascript"> $(function() { $('div.clickDiv.red').click(function(){ var secilenMadde=$(this).attr('madde'); $('div#write').text(secilenMadde); $('input[name='+secilenMadde+'][value=red]').attr('checked', 'checked'); $('div.clickDiv.red[madde='+secilenMadde+']').addClass('redBG'); $('div.clickDiv.green[madde='+secilenMadde+']').removeClass('greenBG'); }); $('div.clickDiv.green').click(function(){ var secilenMadde=$(this).attr('madde'); $('div#write').text(secilenMadde); $('input[name='+secilenMadde+'][value=green]').attr('checked', 'checked'); $('div.clickDiv.green[madde='+secilenMadde+']').addClass('greenBG'); $('div.clickDiv.red[madde='+secilenMadde+']').removeClass('redBG'); }); }); </script> </head> <body> <div id="write"></div> <form id="formId" name="formName" method="post"> <table> <tr> <td><div class="clickDiv red" madde="line[1]"></div></td> <td><div class="clickDiv green" madde="line[1]"></div></td> </tr> <tr> <td><div class="clickDiv red" madde="line[2]"></div></td> <td><div class="clickDiv green" madde="line[2]"></div></td> </tr> </table> <label for="line1red"><input id="line1red" type="radio" name="line[1]" value="red" /> Red</label> <label for="line1green"><input id="line1green" type="radio" name="line[1]" value="green" /> Green</label><br /> <label for="line2red"><input type="radio" name="line[2]" value="red" /> Red</label> <label for="line2green"><input type="radio" name="line[2]" value="green" /> Green</label> </form> </body> </html> This doesn't. I need input names as an array but it breaks my script. Why?

    Read the article

  • Highlighting rows and columns in an HTML table using JQuery

    - by nikolaosk
    A friend of mine was seeking some help regarding HTML tables and JQuery. I have decided to write a few posts demonstrating the various techniques I used with JQuery to achieve the desired functionality. ?here are other posts in my blog regarding JQuery.You can find them all here.I have received some comments from visitors of this blog that are "complaining" about the length of the blog posts. I will not write lengthy posts anymore...I mean I will try not to do so..We will demonstrate this with a step by step example. I will use Visual Studio 2012 Ultimate. You can also use Visual Studio 2012 Express Edition. You can also use VS 2010 editions. 1) Launch Visual Studio. Create an ASP.Net Empty Web application. Choose an appropriate name for your application.2) Add a web form, default.aspx page to the application.3) Add a table from the HTML controls tab control (from the Toolbox) on the default.aspx page4) Now we need to download the JQuery library. Please visit the http://jquery.com/ and download the minified version.5) We will add a stylesheet to the application (Style.css)5) Obviously at some point we need to reference the JQuery library and the external stylesheet. In the head section ? add the following lines.   <link href="Style.css" rel="stylesheet" type="text/css" />       <script src="jquery-1_8_2_min.js" type="text/javascript"></script> 6) Now we need to highlight the rows when the user hovers over them.7) First we need to type the HTML markup<body>    <form id="form1" runat="server">    <div>        <h1>Liverpool Legends</h1>        <table style="width: 50%;" border="1" cellpadding="10" cellspacing ="10">            <thead>                <tr><th>Defenders</th><th>MidFielders</th><th>Strikers</th></tr>            </thead>            <tbody>            <tr>                <td>Alan Hansen</td>                <td>Graeme Souness</td>                <td>Ian Rush</td>            </tr>            <tr>                <td>Alan Kennedy</td>                <td>Steven Gerrard</td>                <td>Michael Owen</td>            </tr>            <tr>                <td>Jamie Garragher</td>                <td>Kenny Dalglish</td>                <td>Robbie Fowler</td>            </tr>            <tr>                <td>Rob Jones</td>                <td>Xabi Alonso</td>                <td>Dirk Kuyt</td>            </tr>                </tbody>        </table>            </div>    </form></body>8) Now we need to write the simple rules in the style.css file.body{background-color:#eaeaea;}.hover { background-color:#42709b; color:#ff6a00;} 8) Inside the head section we also write the simple JQuery code.  <script type="text/javascript"> $(document).ready(function() { $('tr').hover( function() { $(this).find('td').addClass('hover'); }, function() { $(this).find('td').removeClass('hover'); } ); }); </script>9) Run your application and see the row changing background color and text color every time the user hovers over it. Let me explain how this functionality is achieved.We have the .hover style rule in the style.css file that contains some properties that define the background color value and the color value when the mouse will be hovered on the row.In the JQuery code we do attach the hover() event to the tr elements.The function that is called when the hovering takes place, we search for the td element and through the addClass function we apply the styles defined in the .hover class rule in the style.css file.I remove the .hover rule styles with the removeClass function. Now let's say that we want to highlight only alternate rows of the table.We need to add another rule in the style.css.alternate { background-color:#42709b; color:#ff6a00;} The JQuery code (comment out the previous JQuery code) follows  <script type="text/javascript">        $(document).ready(function() {                     $('table tr:odd').addClass('alternate');        });    </script>  When I run my application through VS I see the following result You can do that with columns as well. You can highlight alternate columns as well.The JQuery code (comment out the previous JQuery code) follows  <script type="text/javascript">        $(document).ready(function() {                      $('td:nth-child(odd)').addClass('alternate');        });    </script>  In this script I use the nth-child() method in the JQuery code.This method retrieves all the elements that are nth children of their parent.Have a look at the picture below to see the resultsYou can also change color to each individual cell when hovered on.The JQuery code (comment out the previous JQuery code) follows    <script type="text/javascript">        $(document).ready(function() {          $('td').hover(                  function() {                 $(this).addClass('hover');               },                function() {                    $(this).removeClass('hover');                }                );        });    </script> Have a look at the picture below to see the results. Hope it helps!!!

    Read the article

  • Show/hide glossary page in YUI

    - by QLiu
    Hello All, I am trying to develop a toggle function like http://www.lutsr.nl/yui/toggle/ But it works a little different as them. When user enters the glossary page, he sees a full list of Alphabet with all the techical terms explaination All — A | B | C | E | G | H | M | P | Q | R | S | T | U | Z | ActiveSync® Microsoft® ActiveSync est l’ application permettant à un pocket pc d’ échanger des informations avec un ordinateur . Le Pocket PC doit utiliser Microsoft Windows Mobile™ ou Windows CE. Bluetooth® Le Bluetooth permet aux informations d’ être transmises entre les appareils électroniques qui ont le Bluetooth. Si vous utilisez le Bluetooth, vous n'avez pas besoin de connecter les périphériques à l'aide de câbles. ............................. If the user clicks B Alphabet, the rest of content will hide, except B. and B will be move to top of the section. If the user clicks All aplphabet, the whole list will be reset. What I have now, it is able to show/hide and listen to click event. Here is my source code: <a href="#A" class ="toggle" rel="A_section,fade,20"> A</a> | <a href="#B" class ="toggle" rel="B_section,fade,20"> B</a> | Script: //Load JavaScript Ready event. this.toggleLinks=YAHOO.util.Dom.getElementsByClassName("toggle"); for(var i=0; i<this.toggleLinks.length; i++) { YAHOO.util.Event.addListener(this.toggleLinks[i], "click", this.animateElements,this); } toggleElements : function(e,controlNode,refEl) { if(controlNode && refEl) { if(YAHOO.util.Dom.hasClass(refEl,"show")) { YAHOO.util.Dom.removeClass(controlNode,"selected"); YAHOO.util.Dom.removeClass(refEl,"show"); } else { YAHOO.util.Dom.addClass(controlNode,"selected"); YAHOO.util.Dom.addClass(refEl,"show"); } } // to disable control node's default behaviour return false; }, animateElements : function(e,obj) { // obj = javascript toggle object // this = link clicked YAHOO.util.Event.preventDefault(e); if(this.rel) { controlNode = this; } if(typeof(controlNode) == "string") { controlNode = YAHOO.util.Dom.get(controlNode); } // objParameters // [0] = object id // [1] = animation type (fade, slide) // [2] = animation duration (seconds) var linkClicked = this; var objParameters = controlNode.rel.split(","); var refEl = YAHOO.util.Dom.get(objParameters[0]); var objStatus = YAHOO.util.Dom.hasClass(refEl,"show"); // if true, object is shown switchClasses = function() { obj.toggleOtherElements(e,linkClicked,refEl); obj.toggleElements(e,linkClicked,refEl); } if(objParameters[1] == "fade") { if(objStatus == true) { var attributes = { opacity: {from: .999, to: 0} } var objAnim = new YAHOO.util.Anim(objParameters[0],attributes); objAnim.useSeconds = false; objAnim.duration = objParameters[2]; objAnim.onComplete.subscribe(switchClasses); objAnim.animate(); } else { YAHOO.util.Dom.setStyle(objParameters[0],"opacity",0); switchClasses(); var attributes = { opacity: {from: 0, to: .999} } var objAnim = new YAHOO.util.Anim(objParameters[0],attributes); objAnim.useSeconds = false; objAnim.duration = objParameters[2]; objAnim.animate(); } } else if (objParameters[1] == "slide") { // not implemented yet } else { // NO ANIMATION - switch classes switchClasses(); } }, toggleOtherElements : function(e,linkClicked,refEl) { // toggle selected state of other elements pointing to the same source for(var i=0; i<this.toggleLinks.length; i++) { var objParameters = this.toggleLinks[i].rel.split(","); var linkClickedParameters = linkClicked.rel.split(","); if(objParameters[0] == linkClickedParameters[0]) { if(YAHOO.util.Dom.hasClass(this.toggleLinks[i],"selected")) { YAHOO.util.Dom.removeClass(this.toggleLinks[i],"selected"); } else { YAHOO.util.Dom.addClass(this.toggleLinks[i],"selected"); } } } }

    Read the article

  • Jquery calendar and tab sliding div clash...

    - by StealthRT
    Hey all, i am trying my best to figure out another way around this problem i seem to have encountered. On my website i have a jquery calendar and also a jquery div tab slider (this: http://www.queness.com/resources/html/tabmenu/jquery-tabbed-menu-queness.html). The problem comes into play with the DIV tag. The calender loads up inside a DIV with a id of 'calender'. The CSS for the tabs have the DIV hidden: CSS: .boxBody div {display:none;} .boxBody div.show {display:block;} .boxBody #category a {display:block;} And because of that, the calender never shows on the page. However, if i comment out that css code above, it shows up but does not cover each section as it should. In other words, everything is shown when it should be hidden until the tabs are clicked on to revel it. code: <script type="text/javascript"> $(document).ready(function() { $('#tabMenu > li').click(function(){ $('#tabMenu > li').removeClass('selected'); $(this).addClass('selected'); $('.boxBody div').slideUp('1500'); $('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500'); }).mouseover(function() { $(this).addClass('mouseover'); $(this).removeClass('mouseout'); }).mouseout(function() { $(this).addClass('mouseout'); $(this).removeClass('mouseover'); }); $('.boxBody #category li').mouseover(function() { $(this).css('backgroundColor','#888'); $(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300}); }).mouseout(function() { $(this).css('backgroundColor',''); $(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300}); }); $('.boxBody li').click(function(){ window.location = $(this).find("a").attr("href"); }).mouseover(function() { $(this).css('backgroundColor','#888'); }).mouseout(function() { $(this).css('backgroundColor',''); }); }); </script> <div align="center"> <div class="Mainbox"> <ul id="tabMenu"> <div id="theLogo"><[img] src="img/theLogo.png" width="415" height="146" /></div> <li class="stats"><[img] src="img/Stats.png" width="70" height="52" id="tab1" /></li> <li class="cal"><[img] src="img/cal.png" width="70" height="52" id="tab2" /></li> <li class="loyalty"><[img] src="img/Loyalty.png" width="70" height="52" id="tab3" /></li> <li class="Employees"><[img] src="img/Employees.png" width="70" height="52" id="tab4" /></li> <li class="txtemail"><[img] src="img/TxtEmail.png" width="70" height="52" id="tab5" /></li> </ul> <div class="boxTop"></div> <div class="boxBody"> <div id="stats" class="show"> Just a test here.... </div> <div id="cal"> <div id='calendar'></div> </div> <div class="boxBottom"></div> </div> </div> How can i change the tab javascript code so that it does not have to hide the DIV's so that the calendar will work? I've tried to replace all div's with 'span' or 'p' but that does not seem to work at all. Any help would be great as i am stuck on this and can not go any further without it being solved! :) David

    Read the article

< Previous Page | 1 2 3 4 5 6 7 8 9 10 11 12  | Next Page >