Search Results

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

Page 16/20 | < Previous Page | 12 13 14 15 16 17 18 19 20  | Next Page >

  • getDate with Jquery Datepicker

    - by matt
    i am trying to get date from my implementation of jquery date picker, add it to a string and display the resulting image in my div. Something however is just not working. Can anyone check out the code and have a look at it? The code is supposed to take the date from date picker, combine it in a string which is to have the necessary code to display tag, images are located in /image and in the format aYY-MM-DD.png, new to this date picker and can't quite get it down yet. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script> <script type="text/javascript"> $(function(){ // Datepicker $('#datepicker').datepicker({ dateFormat: 'yy-mm-dd', inline: true, minDate: new Date(2010, 1 - 1, 1), maxDate:new Date(2010, 12 - 1, 31), altField: '#datepicker_value', }); //hover states on the static widgets $('#dialog_link, ul#icons li').hover( function() { $(this).addClass('ui-state-hover'); }, function() { $(this).removeClass('ui-state-hover'); } ); }); //var img_date = .datepicker('getDate'); var day1 = $("#datepicker").datepicker('getDate').getDate(); var month1 = $("#datepicker").datepicker('getDate').getMonth() + 1; var year1 = $("#datepicker").datepicker('getDate').getFullYear(); var fullDate = year1 + "-" + month1 + "-" + day1; var str_output = "<h1><center><img src=\"/images/a" + fullDate + ".png\"></center></h1><br/><br>"; page_output.innerHTML = str_output; // writing the results to the div element (page_out) </script> </head> <body style="background-color:#000;color:#fff;margin: auto auto;"> <!-- Datepicker --> <div id="datepicker"></div> <!-- Highlight / Error --> <p>Date Value: <input type="text" id="datepicker_value" /></p> <div id="page_output" style="text-align:center; margin-top:80px; margin-bottom:20px; "></div> </body>

    Read the article

  • jQuery load Google Visualization API with AJAX

    - by Curro
    Hello. There is an issue that I cannot solve, I've been looking a lot in the internet but found nothing. I have this JavaScript that is used to do an Ajax request by PHP. When the request is done, it calls a function that uses the Google Visualization API to draw an annotatedtimeline to present the data. The script works great without AJAX, if I do everything inline it works great, but when I try to do it with AJAX it doesn't work!!! The error that I get is in the declaration of the "data" DataTable, in the Google Chrome Developer Tools I get a Uncaught TypeError: Cannot read property 'DataTable' of undefined. When the script gets to the error, everything on the page is cleared, it just shows a blank page. So I don't know how to make it work. Please help Thanks in advance $(document).ready(function(){ // Get TIER1Tickets $("#divTendency").addClass("loading"); $.ajax({ type: "POST", url: "getTIER1Tickets.php", data: "", success: function(html){ // Succesful, load visualization API and send data google.load('visualization', '1', {'packages': ['annotatedtimeline']}); google.setOnLoadCallback(drawData(html)); } }); }); function drawData(response){ $("#divTendency").removeClass("loading"); // Data comes from PHP like: <CSV ticket count for each day>*<CSV dates for ticket counts>*<total number of days counted> // So it has to be split first by * then by , var dataArray = response.split("*"); var dataTickets = dataArray[0]; var dataDates = dataArray[1]; var dataCount = dataArray[2]; // The comma separation now splits the ticket counts and the dates var dataTicketArray = dataTickets.split(","); var dataDatesArray = dataDates.split(","); // Visualization data var data = new google.visualization.DataTable(); data.addColumn('date', 'Date'); data.addColumn('number', 'Tickets'); data.addRows(dataCount); var dateSplit = new Array(); for(var i = 0 ; i < dataCount ; i++){ // Separating the data because must be entered as "new Date(YYYY,M,D)" dateSplit = dataDatesArray[i].split("-"); data.setValue(i, 0, new Date(dateSplit[2],dateSplit[1],dateSplit[0])); data.setValue(i, 1, parseInt(dataTicketArray[i])); } var annotatedtimeline = new google.visualization.AnnotatedTimeLine(document.getElementById('divTendency')); annotatedtimeline.draw(data, {displayAnnotations: true}); }

    Read the article

  • How to make multiple Popups using Jquery

    - by Rajasekar
    For pop up im using the following code style : a.selected { background-color:#1F75CC; color:white; z-index:100; } .messagepop { background-color:#FFFFFF; border:1px solid #999999; cursor:default; display:none; margin-top: 15px; position:absolute; text-align:left; width:394px; z-index:50; padding: 25px 25px 20px; } label { display: block; margin-bottom: 3px; padding-left: 15px; text-indent: -15px; } .messagepop p, .messagepop.div { border-bottom: 1px solid #EFEFEF; margin: 8px 0; padding-bottom: 8px; } JavaScript : $(function() { $("#contact").live('click', function(event) { $(this).addClass("selected").parent().append('<div class="messagepop pop"><form method="post" id="new_message" action="/messages"><p><label for="email">Your email or name</label><input type="text" size="30" name="email" id="email" /></p><p><label for="body">Message</label><textarea rows="6" name="body" id="body" cols="35"></textarea></p><p><input type="submit" value="Send Message" name="commit" id="message_submit"/> or <a class="close" href="/">Cancel</a></p></form></div>'); $(".pop").slideFadeToggle() $("#email").focus(); return false; }); $(".close").live('click', function() { $(".pop").slideFadeToggle(); $("#contact").removeClass("selected"); return false; }); }); $.fn.slideFadeToggle = function(easing, callback) { return this.animate({ opacity: 'toggle', height: 'toggle' }, "fast", easing, callback); }; and finally <a href="/contact" id="contact">Contact Us</a> I need to include another pop up when the register link is clicked. Whether i should use the same function with modifications or seperate functions. Please provide me the code with modifications. Im so weird. Help me.

    Read the article

  • How to check if a checkbox in a checkbox array is checked with jquery

    - by eddy
    Hello everyone. I have a html table with a column of text boxes (mileage), all of them are disabled when the page loads, and I need that when user clicks on a check box, the text box for that column should be enabled and become a required field, and then if the user unchecks the checkbox, the textbox on that row must be disabled and the required class removed. I already have the function to enable and disable the text boxes (column mileage) when the user clicks on the corresponding checkbox, but it is written in javascript.However, for some reason it only works in IE). Here is the html code <tbody> <c:forEach items="${list}" var="item"> <tr> <td align="center"> <input type="checkbox" name="selectItems" value="<c:out value="${item.numberPlate}"/>" onchange="enableTextField(this)" /> </td> <td align="left"><c:out value="${item.numberPlate}"/></td> <td align="left"><c:out value="${item.driver.fullName}"/></td> <td align="left"><input type="text" name="mileage_<c:out value="${item.numberPlate}"/>" value="" disabled="true"/></td> </tr> </c:forEach> </tbody> And the javascript code: function enableTextField(r) { var node = r.parentNode; while( node && node.tagName !== 'TR' ) { node = node.parentNode; } var i=node.rowIndex; if(document.form1.selectItems[i-1].checked) { document.getElementById('mileage_' + document.form1.selectItems[i-1].value).disabled=false; } else { document.getElementById('mileage_' + document.form1.selectItems[i-1].value).value=""; document.getElementById('mileage_' + document.form1.selectItems[i-1].value).disabled=true; } } Now, I know that in order to add or remove dynamically validation rules I have to use: addClass('required'); o removeClass('required') ,but I don't know how to detect whether a check box is selected or not, and based on that ,enable or disable the text box for that row. I really hope you can help me out with this.

    Read the article

  • How do I prevent the concurrent execution of a javascript function?

    - by RyanV
    I am making a ticker similar to the "From the AP" one at The Huffington Post, using jQuery. The ticker rotates through a ul, either by user command (clicking an arrow) or by an auto-scroll. Each list-item is display:none by default. It is revealed by the addition of a "showHeadline" class which is display:list-item. HTML for the UL Looks like this: <ul class="news" id="news"> <li class="tickerTitle showHeadline">Test Entry</li> <li class="tickerTitle">Test Entry2</li> <li class="tickerTitle">Test Entry3</li> </ul> When the user clicks the right arrow, or the auto-scroll setTimeout goes off, it runs a tickForward() function: function tickForward(){ var $active = $('#news li.showHeadline'); var $next = $active.next(); if($next.length==0) $next = $('#news li:first'); $active.stop(true, true); $active.fadeOut('slow', function() {$active.removeClass('showHeadline');}); setTimeout(function(){$next.fadeIn('slow', function(){$next.addClass('showHeadline');})}, 1000); if(isPaused == true){ } else{ startScroll() } }; This is heavily inspired by Jon Raasch's A Simple jQuery Slideshow. Basically, find what's visible, what should be visible next, make the visible thing fade and remove the class that marks it as visible, then fade in the next thing and add the class that makes it visible. Now, everything is hunky-dory if the auto-scroll is running, kicking off tickForward() once every three seconds. But if the user clicks the arrow button repeatedly, it creates two negative conditions: Rather than advance quickly through the list for just the number of clicks made, it continues scrolling at a faster-than-normal rate indefinitely. It can produce a situation where two (or more) list items are given the .showHeadline class, so there's overlap on the list. I can see these happening (especially #2) because the tickForward() function can run concurrently with itself, producing different sets of $active and $next. So I think my question is: What would be the best way to prevent concurrent execution of the tickForward() method? Some things I have tried or considered: Setting a Flag: When tickForward() runs, it sets an isRunning flag to true, and sets it back to false right before it ends. The logic for the event handler is set to only call tickForward() if isRunning is false. I tried a simple implementation of this, and isRunning never appeared to be changed. The jQuery queue(): I think it would be useful to queue up the tickForward() commands, so if you clicked it five times quickly, it would still run as commanded but wouldn't run concurrently. However, in my cursory reading on the subject, it appears that a queue has to be attached to the object its queue applies to, and since my tickForward() method affects multiple lis, I don't know where I'd attach it.

    Read the article

  • h:dataTable alternating rows in JSF2

    - by Benchik
    Hello. I'm trying to make alternating rows in JSF2 h:dataTable (no richfaces or such) but i get an unexpected result. the table is built but it has a white grid shown (but i didn't specifiy any border) and there's no buttom line under each row. The CSS: .order-table{ border-collapse:collapse; } .order-table-header{ text-align:center; background:none repeat scroll 0 0 #E5E5E5; border-bottom:1px solid #95bce2; padding:16px; } .order-table-odd-row{ text-align:center; background:none repeat scroll 0 0 #FFFFFFF; border-top:1px solid #000000; } .order-table-even-row{ text-align:center; background:none repeat scroll 0 0 #ecf6fc; border-top:1px solid #BBBBBB; } table.order-table tr.over { background-color: #bcd4ec; } The table: <h:dataTable id="personsTable" value="#{personController.allPersons}" var="bean" styleClass="order-table" headerClass="order-table-header" rowClasses="order-table-odd-row,order-table-even-row"> <h:column> <f:facet name="header"> <h:outputText value="First Name" /> </f:facet> <h:outputText value="#{bean.firstName}"/> </h:column> <h:column> <f:facet name="header"> <h:outputText value="Last Name" /> </f:facet> <h:outputText value="#{bean.lastName}"/> </h:column> <h:column> <f:facet name="header"> <h:outputText value="Phone" /> </f:facet> <h:outputText value="#{bean.phone}"/> </h:column> </h:dataTable> and a small JQuery script: <script type="text/javascript"> $(document).ready(function(){ $(".order-table tr").mouseover(function(){ $(this).addClass("over"); }); $(".order-table tr").mouseout(function(){ $(this).removeClass("over"); }); }); </script> The result is (notice the white grid that came from i don't know where. And also no underline which should come from the CSS): http://imagebin.org/132574

    Read the article

  • jQuery tabs using radio buttons instead of list navigation

    - by caleb
    I'm following a tutorial to create a simple jquery tabs show/hide content. Wondering if there's a way to re-engineer it to use a list of radio buttons instead of a list? Tutorial here: http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/ My js: $(".tab_content").hide(); //Hide all content $("ul.tabs li:first").addClass("active").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active").children("input[@type=radio]").click(); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = "#" + $(this).children("input").attr("value"); //Find the href attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active ID content return false; }); My HTML: <ul class="tabs"> <li><input type="radio" name="card" id="one" value="gallery" /> <label for="one">gallery</label></li> <li><input type="radio" name="card" id="two" value="submit" /> <label for="two">submit</label></li> <li><input type="radio" name="card" id="three" value="resources" /> <label for="three">resources</label></li> <li><input type="radio" name="card" id="four" value="contact" /> <label for="four">contact</label></li> </ul> <div class="tab_container"> <div id="gallery" class="tab_content"> <h2>Gallery</h2> </div> <div id="submit" class="tab_content"> <h2>Submit</h2> </div> <div id="resources" class="tab_content"> <h2>Resources</h2> </div> <div id="contact" class="tab_content"> <h2>Contact</h2> </div> </div> I'm able to actively select the radio button within the list, but not activate the actual div.

    Read the article

  • jquery sortable item cached? #sortable items: '.class1' filter is not working when class is changed

    - by liz
    hello everyone, i came across a weird problem today: i created a sortable list of divs. each div has a class="class1" and items is set to 'class1' (see below simplified code). each div has an a href link that calls a function toggleLock. this function replaces class="class1" with class="locked" for that div. for example: will become the problem is: even though #sortable is set to "make" only items with class="class1" sortable, replacing the class still allows to be sortable. seems like item class is cached at some point. i've tried to refresh #sortable ($('#sortable').sortable("refreshPosition") and $('#sortable').sortable("");), but that didn't work. i've tried both ways of replacing the class: attr('class','lock') and removeClass(), then addClass(). still is sortable. if class is not changed dynamically, but loads into DOM as , then it's not sortable as expected. why wouldn't replacement of the class from class1 to locked prevent that div from being sortable? am i missing something? sample code: <div id="sortable"> <div class="class1" id="1"> <div class="sortHandle">....</div> <href="javascript:void(null);" onclick="toggleLock($(this).attr('id').replace('R',''));" id="R1">lock</a> <p>This is item 1</p> </div> <div class="class1" id="2"> <div class="sortHandle"></div> <href="javascript:void(null);" onclick="toggleLock($(this).attr('id').replace('R',''));" id="R2">lock</a> <p>This is item 2</p> </div> <div class="class1" id="3"> <div class="sortHandle"></div> <href="javascript:void(null);" onclick="toggleLock($(this).attr('id').replace('R',''));" id="R3">lock</a> <p>This is item 3</p> </div> </div> js: $(function() { $("#sortable").sortable({ items: '.class1', handle: '.sortHandle', cursor: 'move', start: function(e,ui) { el = e.target; startPos = ui.item.prevAll().length+1; }, update: function(event, ui) { data = $('.class1').sortable('toArray'); newPos = ui.item.prevAll().length+1; alert("position: "+startPos+"; newposition: "+newPos); } }).disableSelection(); });

    Read the article

  • Jquery hasClass conditional not working

    - by Wade D Ouellet
    Hey, I have my site going here: http://www.treethink.com I am trying to make it so when a navigation item is clicked, it retracts the news ticker on the right and then doesn't run any of the extracting/timer functions anymore. I got it to retract but it still extracts. How I am doing it is I am adding a "noTicker" class with the nav buttons and removing it with colorbox's close button. The function runs on the page initially and if there isn't a "noTicker" class it runs the news ticker as planned. When a nav or close button is clicked it runs the function again which checks again to see if it has that class. So if it has the class it should retract (which it is so that must mean it's adding the class properly) and then not run any of the timer functions, but it still runs the timer functions for some reason. Here is my jQuery. /* Initially hide all news items */ $('#ticker1').hide(); $('#ticker2').hide(); $('#ticker3').hide(); var randomNum = Math.floor(Math.random()*3); /* Pick random number */ newsTicker(); function newsTicker() { if (!$("#ticker").hasClass("noTicker")) { $("#ticker").oneTime(2000,function(i) { /* Do the first pull out once */ $('div#ticker div:eq(' + randomNum + ')').show(); /* Select div with random number */ $("#ticker").animate({right: "0"}, {duration: 800 }); /* Pull out ticker with random div */ }); $("#ticker").oneTime(15000,function(i) { /* Do the first retract once */ $("#ticker").animate({right: "-450"}, {duration: 800}); /* Retract ticker */ $("#ticker").oneTime(1000,function(i) { /* Afterwards */ $('div#ticker div:eq(' + (randomNum) + ')').hide(); /* Hide that div */ }); }); $("#ticker").everyTime(16500,function(i) { /* Everytime timer gets to certain point */ /* Show next div */ randomNum = (randomNum+1)%3; $('div#ticker div:eq(' + (randomNum) + ')').show(); $("#ticker").animate({right: "0"}, {duration: 800}); /* Pull out right away */ $("#ticker").oneTime(15000,function(i) { /* Afterwards */ $("#ticker").animate({right: "-450"}, {duration: 800});/* Retract ticker */ }); $("#ticker").oneTime(16000,function(i) { /* Afterwards */ /* Hide all divs */ $('#ticker1').hide(); $('#ticker2').hide(); $('#ticker3').hide(); }); }); } else { $("#ticker").animate({right: "-450"}, {duration: 800}); /* Retract ticker */ $("#ticker").oneTime(1000,function(i) { /* Afterwards */ $('div#ticker div:eq(' + (randomNum) + ')').hide(); /* Hide that div */ }); } } /* when nav item is clicked re-run news ticker function but give it new class to prevent activity */ $("#nav li").click(function() { $("#ticker").addClass("noTicker"); newsTicker(); }); /* when close button is clicked re-run news ticker function but take away new class so activity can start again */ $("#cboxClose").click(function() { $("#ticker").removeClass("noTicker"); newsTicker(); }); Thanks, Wade

    Read the article

  • How would you organize a large complex web application (see basic example)?

    - by Anurag
    How do you usually organize complex web applications that are extremely rich on the client side. I have created a contrived example to indicate the kind of mess it's easy to get into if things are not managed well for big apps. Feel free to modify/extend this example as you wish - http://jsfiddle.net/NHyLC/1/ The example basically mirrors part of the comment posting on SO, and follows the following rules: Must have 15 characters minimum, after multiple spaces are trimmed out to one. If Add Comment is clicked, but the size is less than 15 after removing multiple spaces, then show a popup with the error. Indicate amount of characters remaining and summarize with color coding. Gray indicates a small comment, brown indicates a medium comment, orange a large comment, and red a comment overflow. One comment can only be submitted every 15 seconds. If comment is submitted too soon, show a popup with appropriate error message. A couple of issues I noticed with this example. This should ideally be a widget or some sort of packaged functionality. Things like a comment per 15 seconds, and minimum 15 character comment belong to some application wide policies rather than being embedded inside each widget. Too many hard-coded values. No code organization. Model, Views, Controllers are all bundled together. Not that MVC is the only approach for organizing rich client side web applications, but there is none in this example. How would you go about cleaning this up? Applying a little MVC/MVP along the way? Here's some of the relevant functions, but it will make more sense if you saw the entire code on jsfiddle: /** * Handle comment change. * Update character count. * Indicate progress */ function handleCommentUpdate(comment) { var status = $('.comment-status'); status.text(getStatusText(comment)); status.removeClass('mild spicy hot sizzling'); status.addClass(getStatusClass(comment)); } /** * Is the comment valid for submission */ function commentSubmittable(comment) { var notTooSoon = !isTooSoon(); var notEmpty = !isEmpty(comment); var hasEnoughCharacters = !isTooShort(comment); return notTooSoon && notEmpty && hasEnoughCharacters; } // submit comment $('.add-comment').click(function() { var comment = $('.comment-box').val(); // submit comment, fake ajax call if(commentSubmittable(comment)) { .. } // show a popup if comment is mostly spaces if(isTooShort(comment)) { if(comment.length < 15) { // blink status message } else { popup("Comment must be at least 15 characters in length."); } } // show a popup is comment submitted too soon else if(isTooSoon()) { popup("Only 1 comment allowed per 15 seconds."); } });

    Read the article

  • Insert default value if input-text is deleted

    - by Kim Andersen
    Hi all I have the following piece of jQuery code: $(".SearchForm input:text").each(function(){ /* Sets the current value as the defaultvalue attribute */ if(allowedDefaults.indexOf($(this).val()) > 0 || $(this).val() == "") { $(this).attr("defaultvalue", $(this).val()); $(this).css("color","#9d9d9d"); /* Onfocus, if default value clear the field */ $(this).focus(function(){ if($(this).val() == $(this).attr("defaultvalue")) { $(this).val(""); $(this).css("color","#4c4c4c"); } }); /* Onblur, if empty, insert defaultvalue */ $(this).blur(function(){ alert("ud"); if($(this).val() == "") { $(this).val($(this).attr("defaultvalue")); $(this).css("color","#9d9d9d"); }else { $(this).removeClass("ignore"); } }); } }); I use this code to insert some default text into some of my input fields, when nothing else is typed in. This means that when a user sees my search-form, the defaultvalues will be set as an attribute on the input-field, and this will be the value that is shown. When a user clicks inside of the input field, the default value will be removed. When the user sees an input field at first is looks like this: <input type="text" value="" defaultvalue="From" /> This works just fine, but I have a big challenge. If a user have posted the form, and something is entered into one of the fields, then I can't show the default value in the field, if the user deletes the text from the input field. This is happening because the value of the text-field is still containing something, even when the user deletes the content. So my problem is how to show the default value when the form is submitted, and the user then removes the typed in content? When the form is submitted the input looks like this, and keeps looking like this until the form is submitted again: <input type="text" value="someValue" defaultvalue="From" /> So I need to show the default value in the input-field right after the user have deleted the content in the field, and removed the focus from the field. Does everyone understand what my problem is? Otherwise just ask, I have struggled with this one for quite some times now, so any help will be greatly appreciated. Thanks in advance, Kim Andersen

    Read the article

  • jquery css menu not selecting the active link

    - by Ronedog
    What is wrong with this and how could I fix it. I have css menu (horizontal) that I want the background and font to be changed when one of the items is selected. I found another post that gave me some jquery code to help make it work, and I thought I had it coded right, but when I click on an item to change its class it adds the class, but the background and font stay the same? Any ideas here? Heres the HTML <ul id="menu_nav" class="buttons"> <li> <a href="#" onclick="' . $menu_path . '">Item 1</a> </li> <li> <a href="#" onclick="' . $menu_path . '">Item 2</a> </li> <li> <a href="#" onclick="' . $menu_path . '">Item 3</a> </li> </ul> Heres the CSS: ul#menu_nav { float:left; width:790px; padding:0; margin:0; list-style-type:none; background-color:#000099; } ul#menu_nav a { float:left; text-decoration:none; color:white; background-color:#000099; padding:0.2em 0.6em; border-right:1px solid #CCCCCC; font-family: Tahoma; font-size: 11px; font-style: normal; font-weight: bold; position: relative; height: 21px; line-height:1.85em; } ul#menu_nav a:hover { background-color:#F1F4FE; color:#000099; border-top:1px solid #CCCCCC; } ul#menu_nav li {display:inline;} .selected { background-color:#F1F4FE; color:#000099; border-top:1px solid #CCCCCC; } Here's the Jquery: $(function(){ $(".buttons li>a").click(function(){ $(this).parent().addClass('selected'). // <li> siblings().removeClass('selected'); }); });

    Read the article

  • Jquery Automatic Image Slider w/ CSS & jQuery

    - by Jacinto
    This is Automatic Image Slider w/ CSS & jQuery by Soh Tanaka I am trying to customize it to show .desc when the mouse hover overs the slider but it does not seem to work any help? //Set Default State of each portfolio piece $(".paging").show(); $(".paging a:first").addClass("active"); //Get size of images, how many there are, then determin the size of the image reel. var imageWidth = $(".window").width(); var imageSum = $(".image_reel ul.examples").size(); var imageReelWidth = imageWidth * imageSum; //Adjust the image reel to its new size $(".image_reel").css({'width' : imageReelWidth}); //Paging + Slider Function rotate = function(){ var triggerID = $active.attr("rel") - 1; //Get number of times to slide var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide $(".paging a").removeClass('active'); //Remove all active class $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function) //Slider Animation $(".image_reel").animate({ left: -image_reelPosition }, 500 ); }; //Rotation + Timing Event rotateSwitch = function(){ play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds $active = $('.paging a.active').next(); if ( $active.length === 0) { //If paging reaches the end... $active = $('.paging a:first'); //go back to first } rotate(); //Trigger the paging and slider function }, 7000); //Timer speed in milliseconds (3 seconds) }; rotateSwitch(); //Run function on launch //On Hover $(".image_reel").hover(function() { clearInterval(play); //Stop the rotation }, function() { rotateSwitch(); //Resume rotation }); //Hide the tooglebox when page load $(".desc").hide(); //slide up and down when hover over heading 2 $(".image_reel").hover(function(){ // slide toggle effect set to slow you can set it to fast too. $(this).next(".desc").slideToggle("slow"); return true; }); //On Click $(".paging a").click(function() { $active = $(this); //Activate the clicked paging //Reset Timer clearInterval(play); //Stop the rotation rotate(); //Trigger rotation immediately rotateSwitch(); // Resume rotation return false; //Prevent browser jump to link anchor });

    Read the article

  • jquery checkbox help

    - by sea_1987
    The Problem I am trying to run some ajax on one my pages for my website, basically I have three checkboxes all of which on pageload are unselected, when a checkbox is clicked I need to be able load in via ajax the relevant HTML. This system is currently a PHP script that depending on what the POST is set returns a different view, so I think all I need to is send the POST via AJAX, but I need to do everytime a new checkbox is checked. My HTML looks like this, div class="segment"> <div class="label"> <label>Choose region: </label> </div> <div class="column w190"> <div class="segment"> <div class="input"> <input type="checkbox" checked="checked" class="radio checked" value="Y" name="area[Nationwide]" id="inp_Nationwide"> </div> <div class="label "> <label for="inp_Nationwide">Nationwide</label> </div> <div class="s">&nbsp;</div> </div> </div> <div class="column w190"> <div class="segment"> <div class="input"> <input type="checkbox" checked="checked" class="radio checked" value="Y" name="area[Lancashire]" id="inp_Lancashire"> </div> <div class="label "> <label for="inp_Lancashire">Lancashire</label> </div> <div class="s">&nbsp;</div> </div> </div> <div class="column w190"> <div class="segment"> <div class="input"> <input type="checkbox" checked="checked" class="radio" value="Y" name="area[West_Yorkshire]" id="inp_West_Yorkshire"> </div> <div class="label "> <label for="inp_West_Yorkshire">West Yorkshire</label> </div> <div class="s">&nbsp;</div> </div> <div class="s">&nbsp;</div> </div> </div> My current attempt was to ascertain whether the input has been clicked so I have done this with my javascript, though this is probably wrong, $('input.radio').click(function(){ if($(this).hasClass('clicked')) { $(this).removeClass('clicked'); } else { $(this).addClass('clicked'); } });

    Read the article

  • How would you organize this Javascript?

    - by Anurag
    How do you usually organize complex web applications that are extremely rich on the client side. I have created a contrived example to indicate the kind of mess it's easy to get into if things are not managed well for big apps. Feel free to modify/extend this example as you wish - http://jsfiddle.net/NHyLC/1/ The example basically mirrors part of the comment posting on SO, and follows the following rules: Must have 15 characters minimum, after multiple spaces are trimmed out to one. If Add Comment is clicked, but the size is less than 15 after removing multiple spaces, then show a popup with the error. Indicate amount of characters remaining and summarize with color coding. Gray indicates a small comment, brown indicates a medium comment, orange a large comment, and red a comment overflow. One comment can only be submitted every 15 seconds. If comment is submitted too soon, show a popup with appropriate error message. A couple of issues I noticed with this example. This should ideally be a widget or some sort of packaged functionality. Things like a comment per 15 seconds, and minimum 15 character comment belong to some application wide policies rather than being embedded inside each widget. Too many hard-coded values. No code organization. Model, Views, Controllers are all bundled together. Not that MVC is the only approach for organizing rich client side web applications, but there is none in this example. How would you go about cleaning this up? Applying a little MVC/MVP along the way? Here's some of the relevant functions, but it will make more sense if you saw the entire code on jsfiddle: /** * Handle comment change. * Update character count. * Indicate progress */ function handleCommentUpdate(comment) { var status = $('.comment-status'); status.text(getStatusText(comment)); status.removeClass('mild spicy hot sizzling'); status.addClass(getStatusClass(comment)); } /** * Is the comment valid for submission */ function commentSubmittable(comment) { var notTooSoon = !isTooSoon(); var notEmpty = !isEmpty(comment); var hasEnoughCharacters = !isTooShort(comment); return notTooSoon && notEmpty && hasEnoughCharacters; } // submit comment $('.add-comment').click(function() { var comment = $('.comment-box').val(); // submit comment, fake ajax call if(commentSubmittable(comment)) { .. } // show a popup if comment is mostly spaces if(isTooShort(comment)) { if(comment.length < 15) { // blink status message } else { popup("Comment must be at least 15 characters in length."); } } // show a popup is comment submitted too soon else if(isTooSoon()) { popup("Only 1 comment allowed per 15 seconds."); } });

    Read the article

  • jQuery ajaxSubmit ignored by IE8

    - by George Burrell
    Hi there, I am combing the jQuery validation plug-in with the jQuery Form Plugin to submit the form via AJAX. This works perfectly in Firefox & Chrome, but (as usual) Internet Explorer is being a pain. For reasons that are alluding me, IE is ignoring the ajaxSubmit, as a result it submits the form in the normal fashion. I've followed the validation plug-in's documentation when constructing my code: JS: $(document).ready(function() { var validator = $("#form_notify").validate({ messages: { email: { required: 'Please insert your email address. Without your email address we will not be able to contact you!', email:'Please enter a valid email address. Without a valid email address we will not be able to contact you!' } }, errorLabelContainer: "#error", success: "valid", submitHandler: function(form) {$(form).ajaxSubmit();} }); $('#email').blur(function() { if (validator.numberOfInvalids() 0) { $("#label").addClass("label_error"); return false; } else {$("#label").removeClass("label_error");} }); $('#form_notify').submit(function() { if (validator.numberOfInvalids() == 0) { $(this).fadeOut('fast', function() {$('#thank-you').fadeIn();}); return true; } return false; }); }); Form HTML: <form id="form_notify" class="cmxform" name="form_notify" action="optin.pl" method="get"> <fieldset> <div class="input"> <label id="label" for="email">Email Address:</label> <input type="text" id="email" name="email" value="" title="email address" class="{required:true, email:true}"/> <div class="clearfix"></div> </div> <input type="hidden" name="key" value="sub-745-9.224;1.0.0.0.0.0.0.0.0.0.0.0.0.0.0.0;;subscribe-224.htm"> <input type="hidden" name="followup" value="19"> <input type="submit" name="submit" id="submit-button" value="Notify Me"> <div id="error"></div> </fieldset> </form> I can't understand what is causing IE to act differently, any assistance would be greatly appreciated. I can provide more information if needed. Thanks in advance!

    Read the article

  • Asp.net MVC appliction showing popup message after updating user

    - by kumar
    This is my Update Json method.. public JsonResult Update(StudentInfo e) { var cache = CacheFactory.GetCacheManager(); var Status= false; for (int i = 0; i <= cache.Count; i++) { var x = (StudentInfo )cache.GetData("a" + i); if (x != null) { Status= common.UpdateStudent(e.Student); } } return Json(Status); } this is my veiw.. <% using (Html.BeginForm("Update", "home", FormMethod.Post)) { %> <%= Html.ValidationSummary(true)%> my scripts.. <script type="text/javascript"> $(document).ready(function() { $('#btnSelectAll').click(function() { $('#btnSelect').click(function() { $('#input[type=checkbox]').attr('checked', 'checked'); }); function validate_excpt(formData, jqForm, options) { var form = jqForm[0]; return true; } // post-submit callback function showResponse(responseText, statusText, xhr, $form) { if (responseText[0].substring(0, 16) != "System.Exception") { $('#error-msg- span:last').html('<strong>Update successful.</strong>'); } else { $('#error-msg- span:last').html('<strong>Update failed.</strong> ' + responseText[0].substring(0, 48)); } $('#error-msg-').removeClass('hide'); $('#gui-stat-').html(responseText[1]); } // post-submit callback $('#exc-').ajaxForm({ target: '#error-msg-', beforeSubmit: validate_excpt, success: showResponse, dataType: 'json' }); $('.button').button(); }); $('.button').button(); $("input[id^='exc-flwup-']").datepicker({ duration: '', showTime: true, constrainInput: true, stepMinutes: 30, stepHours: 1, altTimeField: '', time24h: true, minDate: 0 }); $('#ui-timepicker-div').bgiframe(); }); </script> I am getting popupmessage when Jsonresult Update method has done..but I am seeing that user is updating perfectly.. popup window saying something like you have choosed to open if I open that I am getting string as True in the file.. is that above code I am doing something wrong?

    Read the article

  • Javascript How to automatically change word when click without need to refresh browser.?

    - by Fakhrul Zakry
    im quite lost here and not really expert about javascript. I want to change the content when user click with "Thanks for vote" automatically without need to refresh the page. Here is my html: {% if poll.privacy == "own" and request.user.get_profile.parliment != poll.location %} You do not have permission to vote this. {% else %} {% if has_vote %} {% if poll.rating_option == '1to5' %} <div class="rate"> <div id="poll-rate-{{ poll.pk }}"></div> </div> {% else %} Thanks for your vote. {% endif %} {% else %} {% if poll.rating_option == 'yes_no' %} <a href="javascript:void(0)" class="rate btn btn-xs btn-success mr5 vote-positive" rel="{% url 'vote_vote' poll.pk 1 %}" alt="{{ poll.pk }}">Yes</a> <a href="javascript:void(0)" class="rate btn btn-xs btn-danger vote-negative" rel="{% url 'vote_vote' poll.pk 0 %}" alt="{{ poll.pk }}">No</a> {% elif poll.rating_option == 'like_dislike' %} <a href="javascript:void(0)" class="rate btn btn-xs btn-success mr5 vote-positive" rel="{% url 'vote_vote' poll.pk 1 %}" alt="{{ poll.pk }}">Like</a> <a href="javascript:void(0)" class="rate btn btn-xs btn-danger vote-negative" rel="{% url 'vote_vote' poll.pk 0 %}" alt="{{ poll.pk }}">Dislike</a> {% elif poll.rating_option == '1to5' %} <div class="rate"> <div id="poll-rate-{{ poll.pk }}"></div> </div> {% endif %} {% endif %} {% endif %} and here is my javascript: function bindVoteHandler() { $('a.vote-positive, a.vote-negative').click(function(event) { event.preventDefault(); var link = $(this).attr('rel'); var poll_pk = $(this).attr('alt'); var selected_div = $(this).parent('div'); selected_div.html('<img src="{{ STATIC_URL }}img/loading_small.gif" />'); $.ajax(link).done(function( data ) { var result_div = $('div#vote-result-'+poll_pk); result_div.html(data); result_div.removeClass('vote-result-grey-out'); selected_div.html('<small>Thanks for your vote.</small>'); }); }); }; did anyone know what is the problem why i need to refresh my page after Like/Vote/rate to make it become (Thanks For your vote) ? please someone know help or share link with me. Below is the image: before click Like: after click Like: then when refreshed the word just displayed, it supposed automatically display when click Like. Thank you in advance..

    Read the article

  • how to make my code scalable on iphone ..thanks

    - by zjm1126
    this is my code: <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=0,maximum-scale=2.0><!--,user-scalable=no">--> </head> <body onorientationchange="updateOrientation();"> <div id="a"> <input id='ab' type="button" value="button" /> </div> <div id=b style="display: none"></div> <style type="text/css"> *{ margin:0; padding:0; } body{ /*height: 356px;* } /* Reposition on orientation change */ body.landscape{ height: 208px; } body.landscape div#a{ line-height:104px; } div#a{ height:50%; line-height:178px; text-align:center; } #b{ width:100%; height:50%; background:red; } </style> <script src="jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> function updateOrientation() { var orientation = window.orientation; switch (orientation) { // If we're horizontal case 90: case -90: // Set orient to landscape $(document.body).addClass("landscape"); break; // If we're vertical default: // Set orient to portrait $(document.body).removeClass("landscape"); break; } } $('#ab').click(function(){ if($('#b').css('display')=='none')$('#b').css('display','block') else $('#b').css('display','none') }) </script> </body> </html> thanks

    Read the article

  • Where i am doing wrong in this?

    - by kumar
    <script type="text/javascript"> $(document).ready(function() { $('#PbtnSubmit').attr('disabled', 'disabled'); $('#PbtnCancel').attr('disabled', 'disabled'); $('#PbtnSelectAll').click(function() { $('#PricingEditExceptions input[type=checkbox]').attr('checked', 'checked'); $('#PbtnSubmit').removeAttr('disabled'); $('#PbtnCancel').removeAttr('disabled'); $('fieldset').find("input,select,textarea").removeAttr('disabled'); }); $('#PbtnCancel').click(function() { $('#PricingEditExceptions input[name=PMchk]').attr('checked', false); $('#PbtnSubmit').attr('disabled', 'disabled'); $('#PbtnCancel').attr('disabled', 'disabled'); $('fieldset').find("input:not(:checkbox),select,textarea").attr('disabled', 'disabled'); $('#genericfieldset').find("input,select,textarea").removeAttr('disabled'); }); $('#PbtnSubmit').click(function() { $('#PricingEditExceptions input[name=PMchk]').each(function() { if ($("#PricingEditExceptions input:checkbox:checked").length > 0) { var checked = $('#PricingEditExceptions input[type=checkbox]:checked'); var PMstrIDs = checked.map(function() { return $(this).val(); }).get().join(','); $('#1_exceptiontypes').attr('value', exceptiontypes) $('#1_PMstrIDs').attr('value', PMstrIDs); } else { alert("Please select atleast one exception"); return false; } }); }); function validate_excpt(formData, jqForm, options) { var form = jqForm[0]; } // post-submit callback function showResponse(responseText, statusText, xhr, $form) { if (responseText[0].substring(0, 16) != "System.Exception") { $('#error-msg-ID span:last').html('<strong>Update successful.</strong>'); } else { $('#error-msg-ID span:last').html('<strong>Update failed.</strong> ' + responseText[0].substring(0, 48)); } $('#error-msg-ID').removeClass('hide'); } $('#exc-').ajaxForm({ target: '#error-msg-ID', beforeSubmit: validate_excpt, success: showResponse, dataType: 'json' }); $('.button').button(); }); </script> This is my button.. at very first when page load I am trying Make Disabled PbtnSubmit and PbtnCancel and when we click PbtnSelectAll I am enabling back again.. but its not doing with this code. is that something I am doing worng in this? thanks

    Read the article

  • jQuery: tabs where the tab/content can be linked to

    - by Ricardo Zea
    My issue is simple. I have already implemented a tab system, and I'd probably spend more time implementing another one with the solution I need, than giving a shot at adapting the code I have, and learn something while asking :) My problem is that the tabs can't be linked to, I need to be able to link to a tab from another website or page, and have that tab get selected upon page load. ie: I have three tabs showing different products, by default tab 1 is active/selected when the page loads. From the home page I want to link to tab 2 but I can't link to tab 2 because it doesn't get selected. Not sure if that makes sense. Tabs: <ul> <li><a href="products.php">Product 1</a></li> <li><a href="products.php">Product 2</a></li> <li><a href="products.php">Product 3</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content">Product 1 info...</div> <div id="tab2" class="tab_content">Product 2 info...</div> <div id="tab3" class="tab_content">Product 3 info...</div> </div> my jQuery: $(document).ready(function() { //Default Action $(".tab_content").hide(); $("ul.tabs li:first").addClass("active").show(); $(".tab_content:first").show(); //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); $(this).addClass("active"); $(".tab_content").hide(); var activeTab = $(this).find("a").attr("href"); $(activeTab).fadeIn(); return false; }); }); Is there a way this code can be adapted to be able to link to any tab from anywhere and have that tab get selected when the page loads? Thanks in advance.

    Read the article

  • Callback function in jquery doesn't seem to work......

    - by Pandiya Chendur
    I use the following jquery pagination plugin and i got the error a.parentNode is undefined when i executed it... <script type="text/javascript"> $(document).ready(function() { getRecordspage(1, 5); $(".pager").pagination(17, { callback: pagechange, current_page: '0', items_per_page: '5', num_display_entries : '5', next_text: 'Next', prev_text: 'Prev', num_edge_entries: '1' }); }); function pagechange() { $("#ResultsDiv").empty(); $("#ResultsDiv").css('display', 'none'); getRecordspage($(this).text(), 5); } function getRecordspage(curPage, pagSize) { $.ajax({ type: "POST", url: "Default.aspx/GetRecords", data: "{'currentPage':" + curPage + ",'pagesize':" + pagSize + "}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(jsonObj) { var strarr = jsonObj.d.split('##'); var jsob = jQuery.parseJSON(strarr[0]); var divs = ''; $.each(jsob.Table, function(i, employee) { divs += '<div class="resultsdiv"><br /><span class="resultName">' + employee.Emp_Name + '</span><span class="resultfields" style="padding-left:100px;">Category&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.Desig_Name + '</span><br /><br /><span id="SalaryBasis" class="resultfields">Salary Basis&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.SalaryBasis + '</span><span class="resultfields" style="padding-left:25px;">Salary&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.FixedSalary + '</span><span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee.Address + '</span></div>'; }); $("#ResultsDiv").append(divs).show('slow'); $(".resultsdiv:even").addClass("resultseven"); $(".resultsdiv").hover(function() { $(this).addClass("resultshover"); }, function() { $(this).removeClass("resultshover"); }); } }); } </script> and in my page, <div id="ResultsDiv" style="display:none;"> </div> <div id="pager" class="pager"> </div> Any suggestion....

    Read the article

  • content show problem

    - by nonab
    I still fight with some jquery scripts:) With my first problem Jens Fahnenbruck helped me here: http://stackoverflow.com/questions/3021476/problem-with-hide-show-in-jquery thanks:) Now i added another fancy thing - jquery tabs Made a few modifications and it works like this: When you click on tab and it loads different main image for every tab. The problem is that i used $(document).ready(function() to handle those image changes. When i click any of 2x2 box images (on any tab) it will permanently change the image on the right and when i click on tabs it won't work like it did at the beginning. online example: http://rarelips.ayz.pl/testy/2/ code: <style type="text/css"> body { font: Arial, Helvetica, sans-serif normal 10px; margin: 0; padding: 0; } * {margin: 0; padding: 0;} img {border: none;} .container { height: 500px; width: 1000px; margin: -180px 0 0 -450px; top: 50%; left: 50%; position: absolute; } ul.thumb { float: left; list-style: none; margin: 0; padding: 10px; width: 360px; } ul.thumb li { margin: 0; padding: 5px; float: left; position: relative; width: 165px; height: 165px; } ul.thumb li img { width: 150px; height: 150px; border: 1px solid #ddd; padding: 10px; background: #f0f0f0; position: absolute; left: 0; top: 0; -ms-interpolation-mode: bicubic; } ul.thumb li img.hover { background:url(thumb_bg.png) no-repeat center center; border: none; } #main_view { float: left; padding: 9px 0; margin-left: -10px; } #main_view2 { float: left; padding: 9px 0; margin-left: -10px; } #main_view3 { float: left; padding: 9px 0; margin-left: -10px; } #main_view4 { float: left; padding: 9px 0; margin-left: -10px; } #wiecej { float: right; padding: 9px 0; margin-right: 20px; } .demo-show { width: 350px; margin: 1em .5em; } .demo-show h3 { margin: 0; padding: .25em; background: #bfcd93; border-top: 1px solid #386785; border-bottom: 1px solid #386785; } .demo-show div { padding: .5em .25em; } /* styl do tabek */ ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 32px; /*--Set height of tabs--*/ border-bottom: 1px solid #999; border-left: 1px solid #999; width: 100%; } ul.tabs li { float: left; margin: 0; padding: 0; height: 31px; /*--Subtract 1px from the height of the unordered list--*/ line-height: 31px; /*--Vertically aligns the text within the tab--*/ border: 1px solid #999; border-left: none; margin-bottom: -1px; /*--Pull the list item down 1px--*/ overflow: hidden; position: relative; background: #e0e0e0; } ul.tabs li a { text-decoration: none; color: #000; display: block; font-size: 1.2em; padding: 0 20px; border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/ outline: none; } ul.tabs li a:hover { background: #ccc; } html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/ background: #fff; border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/ } .tab_container { border: 1px solid #999; border-top: none; overflow: hidden; clear: both; float: left; width: 100%; background: #fff; } .tab_content { padding: 20px; font-size: 1.2em; } </style> <script type="text/javascript" src="index_pliki/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function(){ //Larger thumbnail preview $("ul.thumb li").hover(function() { $(this).css({'z-index' : '10'}); $(this).find('img').addClass("hover").stop() .animate({ marginTop: '-110px', marginLeft: '-110px', top: '50%', left: '50%', width: '200px', height: '200px', padding: '5px' }, 200); } , function() { $(this).css({'z-index' : '0'}); $(this).find('img').removeClass("hover").stop() .animate({ marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '150px', height: '150px', padding: '10px' }, 400); }); //Swap Image on Click $("ul.thumb li a").click(function() { var mainImage = $(this).attr("href"); //Find Image Name $("#main_view img").attr({ src: mainImage }); $("#main_view2 img").attr({ src: mainImage }); $("#main_view3 img").attr({ src: mainImage }); $("#main_view4 img").attr({ src: mainImage }); return false; }); }); </script> <script type="text/javascript"> $(document).ready(function() { $("#main_view img").attr({ src: './index_pliki/max1.jpg' }); $("#slickbox div[data-id=" + '01' + "].slickbox").show('slow'); $('a.slick-toggle').click(function() { var dataID = $(this).attr("data-id"); $('#slickbox div.slickbox').hide(); $("#slickbox div[data-id=" + dataID + "].slickbox").show('slow'); return false; }); }); </script> <script type="text/javascript"> $(document).ready(function() { $("#main_view2 img").attr({ src: './index_pliki/max2.jpg' }); $("#slickbox2 div[data-id=" + '11' + "].slickbox2").show('slow'); $('a.slick-toggle').click(function() { var dataID = $(this).attr("data-id"); $('#slickbox2 div.slickbox2').hide(); $("#slickbox2 div[data-id=" + dataID + "].slickbox2").show('slow'); return false; }); }); </script> <script type="text/javascript"> $(document).ready(function() { $("#main_view3 img").attr({ src: './index_pliki/max3.jpg' }); $("#slickbox3 div[data-id=" + '21' + "].slickbox3").show('slow'); $('a.slick-toggle').click(function() { var dataID = $(this).attr("data-id"); $('#slickbox3 div.slickbox3').hide(); $("#slickbox3 div[data-id=" + dataID + "].slickbox3").show('slow'); return false; }); }); </script> <script type="text/javascript"> $(document).ready(function() { $("#main_view4 img").attr({ src: './index_pliki/max4.jpg' }); $("#slickbox4 div[data-id=" + '31' + "].slickbox4").show('slow'); $('a.slick-toggle').click(function() { var dataID = $(this).attr("data-id"); $('#slickbox4 div.slickbox4').hide(); $("#slickbox4 div[data-id=" + dataID + "].slickbox4").show('slow'); return false; }); }); </script> <script type ="text/javascript"> $(document).ready(function() { //When page loads... $(".tab_content").hide(); //Hide all content $("ul.tabs li:first").addClass("active").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active ID content return false; }); }); </script> </head> <body> <div class="container"> <ul class="tabs"> <li><a href="#tab1">1</a></li> <li><a href="#tab2">2</a></li> <li><a href="#tab3">3</a></li> <li><a href="#tab4">4</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content"> <!--Content--> <ul class="thumb"> <li><a class="slick-toggle" href="./index_pliki/max1.jpg" data-id="01"><img src="./index_pliki/min1.jpg" alt="" /></a></li> <li><a class="slick-toggle" href="./index_pliki/max2.jpg" data-id="02"><img src="./index_pliki/min2.jpg" alt="" /></a></li> <li><a class="slick-toggle" href="./index_pliki/max3.jpg" data-id="03"><img src="./index_pliki/min3.jpg" alt="" /></a></li> <li><a class="slick-toggle" href="./index_pliki/max4.jpg" data-id="04"><img src="./index_pliki/min4.jpg" alt="" /></a></li> </ul> <div id="main_view"> <a href="index.htm"><img src="index_pliki/max1.jpg" alt=""/></a> <small style="float: right; color: rgb(153, 153, 153);"> </small> </div> <div id="wiecej"> <div id="slickbox"> <div id="someOtherID" class="slickbox" data-id="01" style="display: none;"> 1.1 </div> <div id="someOtherID" class="slickbox" data-id="02" style="display: none;"> 1.2 </div> <div id="someOtherID" class="slickbox" data-id="03" style="display: none;"> 1.3 </div> <div id="someOtherID" class="slickbox" data-id="04" style="display: none;"> 1.4 </div> <!-- <a href="#" id="slick-show"><img src="http://www.amptech.pl/images/more.jpg" alt="Zobacz wiecej" /></a> <a href="#" id="slick-hide"><img src="http://www.amptech.pl/images/online.jpg" alt="Zobacz wiecej" /></a>&nbsp;&nbsp; --> </div> </div> </div> <!-- tutaj wklejalem reszte --> <div id="tab2" class="tab_content"> <!--Content--> <ul class="thumb"> <li><a class="slick-toggle" href="./index_pliki/max4.jpg" data-id="11"><img src="./index_pliki/min4.jpg" alt="" /></a></li> <li><a class="slick-toggle" href="./index_pliki/max3.jpg" data-id="12"><img src="./index_pliki/min3.jpg" alt="" /></a></li> <li><a class="slick-toggle" href="./index_pliki/max2.jpg" data-id="13"><img src="./index_pliki/min2.jpg" alt="" /></a></li> <li><a class="slick-toggle" href="./index_pliki/max1.jpg" data-id="14"><img src="./index_pliki/min1.jpg" alt="" /></a></li> </ul> <div id="main_view2"> <a href="index.htm"><img src="index_pliki/max1.jpg" alt=""/></a> <small style="float: right; color: rgb(153, 153, 153);"> </small> </div> <div id="wiecej"> <div id="slickbox2"> <div id="someOtherID" class="slickbox2" data-id="11" style="display: none;"> 2.1 </div> <div id="someOtherID" class="slickbox2" data-id="12" style="display: none;"> 2.2 </div> <div id="someOtherID" class="slickbox2" data-id="13" style="display: none;"> 2.3 </div> <div id="someOtherID" class="slickbox2" data-id="14" style="display: none;"> 2.4 </div> </div> </div> </div> <div id="tab3" class="tab_content"> <ul class="thumb"> <li><a class="slick-toggle" href="./index_pliki/max4.jpg" data-id="21"><img src="./index_pliki/min4.jpg" alt="" /></a></li> <li><a class="slick-toggle" href="./index_pliki/max3.jpg" data-id="22"><img src="./index_pliki/min3.jpg" alt="" /></a></li> <li><a class="slick-toggle" href="./index_pliki/max2.jpg" data-id="23"><img src="./index_pliki/min2.jpg" alt="" /></a></li> <li><a class="slick-toggle" href="./index_pliki/max1.jpg" data-id="24"><img src="./index_pliki/min1.jpg" alt="" /></a></li> </ul> <div id="main_view3"> <a href="index.htm"><img src="index_pliki/max1.jpg" alt=""/></a> <small style="float: right; color: rgb(153, 153, 153);"> </small> </div> <div id="wiecej"> <div id="slickbox3"> <div id="someOtherID" class="slickbox3" data-id="21" style="display: none;"> 3.1 </div> <div id="someOtherID" class="slickbox3" data-id="22" style="display: none;"> 3.2 </div> <div id="someOtherID" class="slickbox3" data-id="23" style="display: none;"> 3.3 </div> <div id="someOtherID" class="slickbox3" data-id="24" style="display: none;"> 3.4 </div> </div> </div> </div> <div id="tab4" class="tab_content"> <ul class="thumb"> <li><a class="slick-toggle" href="./index_pliki/max4.jpg" data-id="31"><img src="./index_pliki/min4.jpg" alt="" /></a></li> <li><a class="slick-toggle" href="./index_pliki/max3.jpg" data-id="32"><img src="./index_pliki/min3.jpg" alt="" /></a></li> <li><a class="slick-toggle" href="./index_pliki/max2.jpg" data-id="33"><img src="./index_pliki/min2.jpg" alt="" /></a></li> <li><a class="slick-toggle" href="./index_pliki/max1.jpg" data-id="34"><img src="./index_pliki/min1.jpg" alt="" /></a></li> </ul> <div id="main_view4"> <a href="index.htm"><img src="index_pliki/max1.jpg" alt=""/></a> <small style="float: right; color: rgb(153, 153, 153);"> </small> </div> <div id="wiecej"> <div id="slickbox4"> <div id="someOtherID" class="slickbox4" data-id="31" style="display: none;"> 4.1 </div> <div id="someOtherID" class="slickbox4" data-id="32" style="display: none;"> 4.2 </div> <div id="someOtherID" class="slickbox4" data-id="33" style="display: none;"> 4.3 </div> <div id="someOtherID" class="slickbox4" data-id="34" style="display: none;"> 4.4 </div> </div> </div> </div> </div> </div>

    Read the article

  • Why won't this Jquery run on IE?

    - by Charles Marsh
    Hello All, I have this Jquery code (function($){ $.expr[':'].linkingToImage = function(elem, index, match){ // This will return true if the specified attribute contains a valid link to an image: return !! ($(elem).attr(match[3]) && $(elem).attr(match[3]).match(/\.(gif|jpe?g|png|bmp)$/i)); }; $.fn.imgPreview = function(userDefinedSettings){ var s = $.extend({ /* DEFAULTS */ // CSS to be applied to image: imgCSS: {}, // Distance between cursor and preview: distanceFromCursor: {top:2, left:2}, // Boolean, whether or not to preload images: preloadImages: true, // Callback: run when link is hovered: container is shown: onShow: function(){}, // Callback: container is hidden: onHide: function(){}, // Callback: Run when image within container has loaded: onLoad: function(){}, // ID to give to container (for CSS styling): containerID: 'imgPreviewContainer', // Class to be given to container while image is loading: containerLoadingClass: 'loading', // Prefix (if using thumbnails), e.g. 'thumb_' thumbPrefix: '', // Where to retrieve the image from: srcAttr: 'rel' }, userDefinedSettings), $container = $('<div/>').attr('id', s.containerID) .append('<img/>').hide() .css('position','absolute') .appendTo('body'), $img = $('img', $container).css(s.imgCSS), // Get all valid elements (linking to images / ATTR with image link): $collection = this.filter(':linkingToImage(' + s.srcAttr + ')'); // Re-usable means to add prefix (from setting): function addPrefix(src) { return src.replace(/(\/?)([^\/]+)$/,'$1' + s.thumbPrefix + '$2'); } if (s.preloadImages) { (function(i){ var tempIMG = new Image(), callee = arguments.callee; tempIMG.src = addPrefix($($collection[i]).attr(s.srcAttr)); tempIMG.onload = function(){ $collection[i + 1] && callee(i + 1); }; })(0); } $collection .mousemove(function(e){ $container.css({ top: e.pageY + s.distanceFromCursor.top + 'px', left: e.pageX + s.distanceFromCursor.left + 'px' }); }) .hover(function(){ var link = this; $container .addClass(s.containerLoadingClass) .show(); $img .load(function(){ $container.removeClass(s.containerLoadingClass); $img.show(); s.onLoad.call($img[0], link); }) .attr( 'src' , addPrefix($(link).attr(s.srcAttr)) ); s.onShow.call($container[0], link); }, function(){ $container.hide(); $img.unbind('load').attr('src','').hide(); s.onHide.call($container[0], this); }); // Return full selection, not $collection! return this; }; })(jQuery); It works perfectly in all browsers apart from IE, which it does nothing, no errors, no clues? I have a funny feeling IE doesn't support attr? Can anyone offer any advice?

    Read the article

  • siblings in jquery hide everything

    - by user2658615
    This is my html code : <div id="tabbase"> <ul> <li>a</li> <li>b</li> </ul> <div id="tabs-0"></div> <div id="tabs-1"> <div class="width50"> <h5>title1</h5> <div class="da-desc">a</div> <button>continue</button> </div> <div class="width50"> <h5>title2</h5> <div class="da-desc">b</div> <button>continue</button> </div> </div> </div> and this is CSS code : #tabbase { margin:16px; } #tabbase ul li { display:inline-block; margin:5px 0px 5px 0; background:rgb(224,224,224); padding:5px; border:1px solid rgb(153,153,153); cursor:pointer; } #tabs-0, #tabs-1 { border:1px solid rgb(153,153,153); background:rgb(255,255,255); padding:5px; margin:-5px 0 0 0; } #tabbase ul li.active { background:rgb(255,255,255) !important; } and this is jquery code : $(document).ready(function(e) { $("#tabs-1").hide(0); $("#tabbase ul li:first").addClass("active"); $("#tabbase ul li").click(function(e) { $(this).addClass("active"); $(this).siblings(this).removeClass("active"); count = $("#tabbase ul li").index(this); $('#tabs-'+count).slideDown(500).siblings(this).slideUp(500); }); }); so you can see that when you click on a tab , all tabs are gone and how can I fix this?

    Read the article

< Previous Page | 12 13 14 15 16 17 18 19 20  | Next Page >