Search Results

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

Page 444/846 | < Previous Page | 440 441 442 443 444 445 446 447 448 449 450 451  | Next Page >

  • Function Triggered before fadeOut(); is finished

    - by willmcneilly
    Hi I'm new to javascript/jQuery this really has me stumped. What I'm trying to achieve here is On toggling a#sameDayTab jquery will look for .changeAlert and fadeOut it's container div, when toggled again the div will fade in (this works well.) Each toggle will also call a function that tells me how many .changeAlert's are present on the page and updates the number appropriately in a span. The problem is when I first click the toggled anchor the number of visible should be 0 as the .changeAlert has been hidden by fadeOut instead it returns the number of classes present on page load this value never changes no matter how many times the toggle is activated. Any help greatly appreciated. function totalNumFares () { var n = $('.changeAlert:visible').size(); $('.numFares').replaceWith('<span class=\"numFares\">'+ n +'</span>'); } totalNumFares(); //Toggle On/off Same Day Connections $('a#sameDayTab').toggle(function() { $('.changeAlert').parent().parent().parent().parent().parent().fadeOut(); totalNumFares(); },function(){ $('.changeAlert').parent().parent().parent().parent().parent().fadeIn(); totalNumFares(); });

    Read the article

  • What's the difference between UI development and front-end development?

    - by Nick Lowman
    I'm a front-end developer and really enjoy jQuery and JavaScript. I've built a lot a websites, done some good jQuery work and built a few JavaScript based applications and would really like to get in UI development. Or so I thought. I guessed it would be pretty similar to what I already do except maybe a little more JavaScript heavy but when I looked into it all the job specs said I needed to know about Scrum or Agile development, knowledge of testing frameworks and a good knowledge of JavaScript frameworks and custom events. So, from the specs I get the idea that a UI developer is actually a dedicated JavaScript developer. Is that the case? I understand (with much help from the users on stackoverflow), about JavaScript OO, inheritance, closures, custom events, debugging in Firefox or Aptana etc, and the people I work with seem to think I pretty OK at what I do but clearly my knowledge is not good enough to go for UI jobs. If anyone could tell me a little more about UI development and if there are any good resources for learning about it I would be most grateful as I couldn't find much on the internet.

    Read the article

  • How To: Custom HTML / CSS Text Button for "Facebook like" & "Twitter Follow"

    - by 1Line
    So i have had a little hunt online about creating custom Facebook like buttons and custom twitter follow button but not really found a solution so thought i would ask here and see if anyone knows of a solution for this (currently i have coded some jQuery to get Facebook and Twitter counts using JSON which works but want some custom buttons as per below) I have the count working all ok, just need to tackle the like and follow buttons - it is done in jquery at the moment so would like to continue to use that if this has to be done via that. at the moment i use the API for each to get the count, if i can integrate into the current js i have to get the calls / functions i require would be good: // grab from facebook var facebook = $.getJSON('https://graph.facebook.com/'+f_page+'?callback=?', function(data) { fb_count = data['likes'].toString(); fb_count_gt = data['likes'].toString(); fb_count = add_commas(fb_count); $('#fb_count').html(fb_count); }); // grab from twitter var twitter = $.getJSON("https://twitter.com/users/"+t_page+".json?callback=?",function(data) { twit_count = data['followers_count'].toString(); twit_count_gt = data['followers_count'].toString(); twit_count = add_commas(twit_count); $('#twitter_count').html(twit_count); }); Thanks in advance!

    Read the article

  • Picture lead-in to Youtube video

    - by cf_PhillipSenn
    I have the following, which displays an image and when the user clicks on the image, it takes them to the Youtube video: <html> <head> <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1", {uncompressed: true}); </script> <script> jQuery(function($){ $('a').click(function() { $(this).html('<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/Msef24JErmU&hl=en_US&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Msef24JErmU&hl=en_US&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>'); return false; }); }); </script> </head> <body> <a href="javascript:void();"><img src="http://www.clipov.net/pic/paul_oakenfold+%5Bstarry_eyed_surprise%5D+_+3-07+mtv_dance_beats+clear.jpg"></a> </body> </html> Q: How do I autoplay the video to keep the user from having to click on it (a second time)?

    Read the article

  • MVC2 AJAX - determining UpdateTargetId based on the returned data

    - by DanielJW
    The scenario: I'm creating a login form for an MVC2 application. How i'm doing it: The form submits to an MVC2 action which validates the username/password. If it fails validation the action returns the form (a partial view) for the user to try again. If it passes validation the action returns the page the user was visiting before they logged in (a view). What i want to happen: 1 - when the form is submitted and the user validates successfully, The returned result should replace the current page (like what happens if you don't set an UpdateTargetId). 2 - When the form is submitted and the user fails validation, the returned result should replace the form (like what happens if you set the UpdateTargetID to the form's containing element). The problem: I can make both of those things work, but not at the same time. I can either have it always replace the current page, or always just replace the contents of the UpdateTargetId element. But I need it to be able to do either depending on whether the user successfully validated or not. What I need The ideal solution would be to be able to examine the result of the ajax request and determine whether to use the UpdateTargetId (replacing just the form) or not (replacing the whole page). I expect it would involve some work with jquery (assuming it's possible) but i'm not really that great with jquery yet to figure out how to do it myself. If it can't be done this way I'm also open to other methods/solutions for making it work in a similar fashion. Thanks in advance ..

    Read the article

  • Why am I unable to prevent the animation queue from stacking without breaking my code?

    - by user1888886
    I am attempting to use jquery and CSS to animate the buttons of a navigation sidebar I am using to signify which button is selected when the mouse is hovered over each. Currently, my code for the CSS appears as such: #navbutton {position:relative; width:178px; height:35px; border:1px #FFF solid; z-index:+3; font-family:'Capriola', sans-serif; font-size:18px; text-align:center;} #navbutton.button {color:#77D; background-color: #F0B0D0;} #navbutton.button_hover {color:#66C; background-color: #FCF; padding:10px;} And my jquery: <script type="text/javascript"> $(document).ready(function(){ $("#sidebar div").mouseenter(buttonHover) function buttonHover(){ $(this).stop().switchClass('button','button_hover',500); } $("#sidebar div").mouseleave(button) function button(){ $(this).stop().switchClass('button_hover','button',500); } }); </script> Before I added the .stop() to each part of the animation, the animation queue would stack up for each time the mouse was moved over each button and then removed. Now that the .stop() has been applied, however, if the mouse is moved away from a button during its animation, the button will freeze and remain in its mid-animation state, unable to be fixed by being hovered over until the page is reloaded, rather than reverting to its original mouseleave state. From everything I've read, this should not be the case. Might anyone be able to tell why my animation queue becomes broken once the .stop() is applied?

    Read the article

  • Update MySQl table onDrop?

    - by dougvt
    Hi all. I am writing a PHP/MySQL application (using CodeIgniter) that uses some jQuery functionality for dragging table rows. I have a table in which the user can drag rows to the desired order (kind of a queue for which I need to preserve the rank of each row). I've been trying to figure out how to (and whether I should) update the database each time the user drops a row, in order to simplify the UI and avoid a "Save" button. I have the jQuery working and can send a serialized list back to the server onDrop, but is it good design practice to run an update query this often? The table will usually have 30-40 rows max, but if the user drags row 1 far down the list, then potentially all the rows would need to be updated to update the rank field. I've been wondering whether to send a giant query to the server, to loop through the rows in PHP and update each row with its own Update query, to send a small serialized list to a stored procedure to let the server do all the work, or perhaps a better method I haven't considered. I've read that stored procedures in MySQL are not very efficient and use a separate process for each call. Any advice as to the right solution here? Thanks very much for your help!

    Read the article

  • Using Javascript to get URL Vars, not working when multiple values present in QueryString

    - by bateman_ap
    Hi, I am using a Javascript function to get the values of a URL to pass to jQuery using the function below: function getUrlVars() { var vars = [], hash; var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); for(var i = 0; i < hashes.length; i++) { hash = hashes[i].split('='); vars.push(hash[0]); vars[hash[0]] = hash[1]; } return vars; } And then setting the value like this: var type = getUrlVars()["type"] This all works perfectly, however I have just come into a situation where I need to get multiple values, one of my form elements are checkboxes where multiple values can be checked, so my URL will look something like this: http://www.domain.com/test.php?type=1&cuisine[]=23&cuisine[]=43&name=test If I alert out the cuisine value using the function above I only ever get the final value: alert (getUrlVars()["cuisine[]"]); Would alert "43". What I would like it to be is a comma delimited string of all "cuisine" values. ie in the above example "23,43" Any help very welcome! In case any solution requires it I am using PHP 5.3 and Jquery 1.4

    Read the article

  • how Two elements - IMG - DIV when hover over IMG show/hide the DIV - added with hover hide/show on i

    - by Jan Fosgerau
    Im very new to the wonder that is jquery. and i just figure out how to make my img buttons show/hide with a opacity difference (as such) <script type="text/javascript"> <![CDATA[ $(".ExcommKnap").mouseover(function () { $(this).stop().fadeTo('fast', 0.5, function(){}) }); $(".ExcommKnap").mouseout(function () { $(this).stop().fadeTo('fast', 1.0, function(){}) }); ]]> </script> which is good and all. but i also need to make the button when hovered over show text just above it that is specific to that button. i made these here elements that are looped in a for each. <div style="top:10px; width:755px;text-align:right; position:absolute; "> <div id="Page-{@id}" class="headlinebox"> <xsl:value-of select="@nodeName"/> </div> </div> <a href="{umbraco.library:NiceUrl(@id)}"> <img class="ExcommKnap" src="{$media/data[@alias='umbracoFile']}" /> </a> i need to make the individual text appear when hovered over its button. hence i have the id="page-{@id}" looped out along and need to get this place in the jquery code i presume. so when i hover over a img class="ExcommKnap" it makes the correct text visible. But i need the div id="page-{id}" to be invisible to begin with on pageload and then visible when its button is being hovered over. can anyone help ?

    Read the article

  • div on other div

    - by Gisinior
    i have: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <style type="text/css"> #ONE { background-color: #888; width: 500px; height: 500px; } #TWO { background-color: blue; width: 50px; height: 50px; } #THREE { background-color: yellow; width: 200px; height: 200px; display: none; } #four { background-color: red; width: 200px; height: 200px; } </style> <script type="text/javascript"> $(document).ready( function() { $("#TWO").click( function() { $("#THREE").toggle(); }); }); </script> <div id="ONE"><div id="TWO"></div><div id="four"></div><div id="THREE"></div></div> default click for blue div how can i it make? best with transparent :)

    Read the article

  • Detect some conflictive characters in a string with javascript

    - by FranQ
    Hello. I have a file input in a form that uploads a mp3 file, but I´d like to detect conflictive characters to my system in the filename, like ! @ or any other. All codes I´ve found replace these characters, but I just want to detect them to alert the user. I think it will be easy with regular expressions, but I dont know about them. I´m using jquery/javascript. Thanks in advance for your help Edit to improve my problem description: I´m working in a CodeIgniter application that allows user to upload mp3 files to the server. I use jQuery to manage client side forms. The CI upload class converts spaces in the file name to underscores and everything works. But testing the application I uploaded a mp3 file with a (!) in the name, and I got troubles with it. I just want to insert a javascript conditional before the file is uploaded to evaluate if the user´s filename contains a (!) (or any other I´d like to add later) to ask for the file to be renamed if it does.

    Read the article

  • what this json must work?

    - by user1772630
    hi i search alot for get a respone from php back and if that respone is ok do someting and if its false do something else(!!!!!!!! WHENE I HAVE OTHER OUTPUT FROM THAT PHP !!!!!!) this is my index file <head> <script src="jquery-1.7.2.js" type="text/javascript"></script> <script src="js.js" type="text/javascript"></script> </head> <body> <p> click </p> <input type="text" id="who"> <br> <input type="text" id="why"> <div id="bg" align="center"> </div> </body> this is my JS file $(document).ready(function(){ $('p').click(function(){ var who = $('input#who').val(); var why = $('input#why').val(); $.post('file.php',{who:who,why:why},function(data) { if(data.success){ alert(data.message); } else{ alert('ERROR:' + data.message); } }); }); }); and this is my file.php <?php $response = array('success' => 'true', 'code' => "jQuery('#bg').html('\"Javascript\", \"json\", \"PHP\"');"); echo json_encode($response); ?> my question : 1- why this is not work i get alert (error:undifined) 2- how i can get some result from that php file when its have other output like this: <?php echo "1"; echo "2"; echo "3"; and now echo that json ?> thanks :(

    Read the article

  • way to change value of h2 on div hover

    - by user3624298
    So basically making some concept logic for a project I am working on. Basically it's a portfolio and each box will be a picture and I want to be able to change the value of a h2 to some type of description. Right now it's just a black box so 'square1, square2, square3...etc' will work for now. I looked up some stuff on jquery and found this link from an SO answer. Basically what I need but he is only shifting through one piece of information instead of many in my case. Wondering how I can achieve that via jquery. I imagine I would need to make an array with all the descriptions I need, and (this is where I am lost) somehow attach the value of array to the square and then from there change text of h2 to the array value. Thanks for any help in advance here's what I have so far (not much just did some foundation work). Not sure if this matters but if there is no hover I want the h2 to say nothing. HTML (makes me post code if I have jsfiddle) <div class="squares"> <div class="square1"></div> <div class="square2"></div> <div class="square3"></div> <div class="square4"></div> <div class="square5"></div> <h2 class="squareIdent"> </h2> </div>

    Read the article

  • Calling a javascript-method causes IE 8 to crash

    - by Andreas Niedermair
    good morning! some basic infos: engine is asp.net (specific version is not relevant) runs on iis (specific version is not relevant) asp-button is hidden why?! wtf?!: this example is used in some modal-confirmation: user clicks delete, ui shows modal-dialog. so, the visible button would be the yes-button, when clicked one, would cause a postback of the original asp-button (as i'm using the jquery-dialog plugin). and i have this html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> // head tags go here </head> <body> <div style="display: none;"> <asp:Button runat="server" ID="hiddenBt" /> </div> <button id="visibleBt">Yes</button> <script type="text/javascript"> $(document).ready(function() { var visibleButton = $('#visibleBt'); var hiddenButton = $('#<%= this.hiddenBt.ClientID %>'); visibleButton.click(function() { __doPostBack(hiddenButton.attr('name'); }); }); </script> </body> </html> so ... if i'm running IE8 and non-compatiblity view, hitting the yes-button will crash the ie8-rendering-engine Version=1 EventType=MSHTMLLAYOUTHARDASSERT EventTime=129197590067237499 Consent=1 UploadTime=129197590067257499 ReportIdentifier=4b752ddb-6c79-11df-8bf6-001aa0b266a7 WOW64=1 Response.BucketId=1064991109 Response.BucketTable=5 Response.type=4 Sig[0].Name=AppName Sig[0].Value=iexplore.exe Sig[1].Name=AppVer Sig[1].Value=8.00.7600.16385 (win7_rtm.090713-1255) Sig[2].Name=ModName Sig[2].Value=mshtml.dll Sig[3].Name=ModVer Sig[3].Value=8.00.7600.16385 (win7_rtm.090713-1255) Sig[4].Name=Offset Sig[4].Value=0x002B5031 DynamicSig[1].Name=OS Version DynamicSig[1].Value=6.1.7600.2.0.0.256.48 DynamicSig[2].Name=Locale ID DynamicSig[2].Value=3079 State[0].Key=Transport.DoneStage1 State[0].Value=1 FriendlyEventName=Webpage display problem ConsentKey=MSHTMLLAYOUTHARDASSERT AppName=Internet Explorer AppPath=C:\Program Files (x86)\Internet Explorer\iexplore.exe ReportDescription=A problem displaying a webpage caused Internet Explorer to refresh the page using Compatibility View. any help would be appreciated!

    Read the article

  • Javascript image copy protection

    - by Chris
    Is there a way to protect your images from being copied, specifically their URL's. So that if someone were to try right click the image and copy the URL I could pop up an embed box, or perhaps specify my own particular copy code so that I dictate the terms of the copy? An alternate to this would be popping up a custom dialog box on right click with copy / embed options... How would one do this?

    Read the article

  • Web Application Loading Screen

    - by Matt Charlton
    I have a web app that has several tree views. When the page loads i see the unordered lists and after a small latency the styling of the tree is rendered into the DOM. Is there a way to mask the webapp, and have a spinner in the middle of the screen, and when everything on the page is fully rendered the spinner goes away and the mask fades out? Kind of like a semi transparent mask that you would see on a lightbox pop-up dialog.

    Read the article

  • Multiple click events

    - by Le_Coeur
    I have some popup dialogs on my webpage, in each of this dialogs i have defined some click event with jquery : $(".links_view").click(function(e){ //code }); But the problem is when i activate one this click event, it will be executed in each dialog...

    Read the article

  • check if directory exists c#

    - by Ant
    I am trying to see if a directory exists based on an input field from the user. When the user types in the path, I want to check if the path actually exists. I have some c# code already. It returns 1 for any local path, but always returns 0 when I am checking a network path. static string checkValidPath(string path) { //Insert your code that runs under the security context of the authenticating user here. using (ImpersonateUser user = new ImpersonateUser(user, "", password)) { //DirectoryInfo d = new DirectoryInfo(quotelessPath); bool doesExist = Directory.Exists(path); //if (d.Exists) if(doesExist) { user.Dispose(); return "1"; } else { user.Dispose(); return "0"; } } } public class ImpersonateUser : IDisposable { [DllImport("advapi32.dll", SetLastError = true)] private static extern bool LogonUser(string lpszUsername, string lpszDomain, string lpszPassword, int dwLogonType, int dwLogonProvider, out IntPtr phToken); [DllImport("kernel32", SetLastError = true)] private static extern bool CloseHandle(IntPtr hObject); private IntPtr userHandle = IntPtr.Zero; private WindowsImpersonationContext impersonationContext; public ImpersonateUser(string user, string domain, string password) { if (!string.IsNullOrEmpty(user)) { // Call LogonUser to get a token for the user bool loggedOn = LogonUser(user, domain, password, 9 /*(int)LogonType.LOGON32_LOGON_NEW_CREDENTIALS*/, 3 /*(int)LogonProvider.LOGON32_PROVIDER_WINNT50*/, out userHandle); if (!loggedOn) throw new Win32Exception(Marshal.GetLastWin32Error()); // Begin impersonating the user impersonationContext = WindowsIdentity.Impersonate(userHandle); } } public void Dispose() { if (userHandle != IntPtr.Zero) CloseHandle(userHandle); if (impersonationContext != null) impersonationContext.Undo(); } } Any help is appreciated. Thanks! EDIT 3: updated code to use BrokenGlass's impersonation functions. However, I need to initialize "password" to something... EDIT 2: I updated the code to try and use impersonation as suggested below. It still fails everytime. I assume I am using impersonation improperly... EDIT: As requested by ChrisF, here is the function that calls the checkValidPath function. Frontend aspx file... $.get('processor.ashx', { a: '7', path: x }, function(o) { alert(o); if (o=="0") { $("#outputPathDivValid").dialog({ title: 'Output Path is not valid! Please enter a path that exists!', width: 500, modal: true, resizable: false, buttons: { 'Close': function() { $(this).dialog('close'); } } }); } }); Backend ashx file... public void ProcessRequest (HttpContext context) { context.Response.Cache.SetExpires(DateTime.Now); string sSid = context.Request["sid"]; switch (context.Request["a"]) {//a bunch of case statements here... case "7": context.Response.Write(checkValidPath(context.Request["path"].ToString())); break;

    Read the article

  • Combining a mousedown event with a keydown event

    - by gotguts
    I am trying to combine a keydown event with a mousedown event. Basically, I have a chat dialog, and if the user writes in one of 2 divs (keydown event) or makes a selection from either (or both) of 2 dropdowns (mousedown), I need these to have the same exact function. Thanks in advance. Code (to be combined): $('#usermsg').add('#otherComments').keydown(function() { // When key pressed and $('#strategies').add('#whySwitch').mousedown(function() { // When mouse is clicked //function body });

    Read the article

  • How to simulate a close() in facebox

    - by Bragaadeesh
    Hi, I am using facebox popup in one of my pages. I am having a button in the popup dialog. When I click that button the facebox popup should close (the same way it closes when we press outside the popup). How to do that? Also, I am doing some Ajax stuff when that button is being pressed so I cannot override the onClick event.

    Read the article

  • Boxy Submit Form

    - by jornbjorndalen
    I am using the boxy jQuery plugin in my page to display a form on a clickEvent for the fullCalendar plugin. It is working all right , the only problem I have is that the form in boxy brings up the confirmation dialog the first time the dialog is opened and when the user clicks "Ok" it submits the form a second time which generates 2 events on my calendar and 2 entries in my database. My code looks like this inside fullCalendar: dayClick: function(date, allDay, jsEvent, view) { var day=""+date.getDate(); if(day.length==1){ day="0"+day; } var year=date.getFullYear(); var month=date.getMonth()+1; var month=""+month; if(month.length==1){ month="0"+month; } var defaultdate=""+year+"-"+month+"-"+day+" 00:00:00"; var ele = document.getElementById("myform"); new Boxy(ele,{title: "Add Task", modal: true}); document.getElementById("title").value=""; document.getElementById("description").value=""; document.getElementById("startdate").value=""+defaultdate; document.getElementById("enddate").value=""+defaultdate; } I also use validators on the forms fields: $.validator.addMethod( "datetime", function(value, element) { // put your own logic here, this is just a (crappy) example return value.match(/^([0-9]{4})-([0-1][0-9])-([0-3][0-9])\s([0-1][0-9]|[2][0-3]):([0-5][0-9]):([0-5][0-9])$/); }, "Please enter a date in the format YYYY-mm-dd hh:MM:ss" ); var validator=$("#myform").validate({ onsubmit:true, rules: { title: { required: true }, startdate: { required: true, datetime: true }, enddate: { required: true, datetime: true } }, submitHandler: function(form) { //this function renders a new event and makes a call to a php script that inserts it into the db addTask(form); } }); And the form looks like this: <form id ='myform'> <table border='1' width='100%'> <tr><td align='right'>Title:</td><td align='left'><input id='title' name='title' size='30'/></td></tr> <tr><td align='right'>Description:</td><td align='left'><textarea id='description' name='description' rows='4' cols='30'></textarea></td></tr> <tr><td align='right'>Start Date:</td><td align='left'><input id='startdate' name='startdate' size='30'/></td></tr> <tr><td align='right'>End Date:</td><td align='left'><input id='enddate' name='enddate' size='30' /></td></tr> <tr><td colspan='2' align='right'><input type='submit' value='Add' /></td></tr> </table> </form>

    Read the article

  • 2 javascripts problem

    - by pradeep
    <?php global $user; $userId = $user->uid; /* start with default */ $myresult = ""; /* All Includes - start */ include_once('db.php'); include_once('valid-scripts/validateData.php'); /* All Includes - end */ /* Build All required Variables - start */ $alias = $_GET['alias']; $product = $_GET['product']; $product = strtolower(substr($product,0,-1)); $master_table = $product.'_master'; $rating_master_table = $product.'_rating_master'; $rating_table = $product.'_rating'; $numProperties = 15; /* Build All required Variables - end */ /* Add all Styles required - start */ $myresult .= '<link href="/jquery.rating.css" type="text/css" rel="stylesheet"/>'; /* Add all Styles required - end */ /* Show Hide Variables/parameters - start */ include_once('all_include_files/show_hide.php'); /* Show Hide Variables/parameters - end */ /* All Javascript - start */ //$myresult .= '<script src="/jquery.rating.js" type="text/javascript" language="javascript"></script>'; ?> <style> #tabs { //font-size: 90%; //margin: 20px 0; margin: 2px 0; } #tabs ul { float: right; background: #E3FEFA; width: 600px; //padding-top: 4px; } #tabs li { margin-left: 8px; list-style: none; } * html #tabs li { display: inline; /* ie6 double float margin bug */ } #tabs li, #tabs li a { float: left; } #tabs ul li a { text-decoration: none; //padding: 8px; color: #0073BF; font-weight: bold; } #tabs ul li.active { background: #CEE1EF url(/all_include_files/img/nav-right.gif) no-repeat right top; } #tabs ul li.active a { background: url(/all_include_files/img/nav-left.gif) no-repeat left top; color: #333333; } #tabs div { //background: #CEE1EF; clear: both; //padding: 20px; min-height: 200px; } #tabs div h3 { text-transform: uppercase; margin-bottom: 10px; letter-spacing: 1px; #tabs div p { line-height: 150%; } </style> <script src="/jquery.rating.js" type="text/javascript" language="javascript"></script> <script src="/jquery.metadata.js" type="text/javascript" language="javascript"></script> <script type='text/javascript'> function openComment(number) { alert('working'); $('#comment'+number).css('display',''); } $('.star').rating({ callback: function(value, link){ alert(value); } }); $(document).ready(function() { //$('#tabs div').hide(); //$('#tabs div:first').show(); $('#tabs ul li:first').addClass('active'); $('#tabs ul li a').click(function() { $('#tabs ul li').removeClass('active'); $(this).parent().addClass('active'); var currentTab = $(this).attr('href'); $('#tabs div').hide(); $(currentTab).show(); return false; }); $("#clickit").click(function() { $.post("/mobile/tablechange.php",{ p1:'<?php echo $brand ?>',p2:'<?php echo $model ?>',userid:'<?php echo $userid ?>' } ,function(data){ $("#changetable").html(data); }); }); $('div.expandable p').expander({ slicePoint: 200, // default is 100 expandText: 'more &raquo;', // default is 'read more...' collapseTimer: 0, // re-collapses after 5 seconds; default is 0, so no re-collapsing userCollapseText: '[^]' // default is '[collapse expanded text]' }); }); </script> <?php /* All Javascript - end */ /* Form Processing after submit - start */ /* Form Processing after submit - end */ /* Actual Form or Page - start */ /*fetch all data needed */ /* initial query */ $result_product = query_product_table($product,$alias); /*fetch property names of product */ $product_properties = master_table($master_table); /*rating table query */ $master_rating_properties = master_rating_table($rating_master_table); /*get user ratings*/ $user_ratings = user_ratings($userId,$alias,$rating_table); $myresult .= '<div class=\'Services\'>'; //$myresult .="<form name ='form1' id='form1' method = 'POST' action='".$_SERVER['php_self'] ."'>"; if(!$result_product) { header('Location: /page-not-found'); } else { $row_product = mysql_fetch_array($result_product); $myresult .= "<h3 class='newstyle'>".$row_product['alias']." <a style='float:right;padding-right:20px;color:white;text-decoration:underline;' href='/'>Back</a> </h3>"; /* start actual product display - start*/ $myresult .= "<div class=\"product\">"; /* start table 1*/ $myresult .= '<table border=\'0\' cellspacing=\'0\' cellpadding=\'0\' style=\'width:580px; table-layout:fixed;\'>'; $myresult .= '<tr>'; $myresult .='<td valign=\'top\'>'; /* start table 2*/ $myresult .='<table width=\'100%\' border=\'0\' cellspacing=\'0\' cellpadding=\'0\'>'; $myresult .= '<tr>'; $myresult .= '<td valign=\'top\' style=\'width:164px;\'>'; /* start table 3*/ $myresult .= '<table style=\'width:164px;\' border=\'0\' cellspacing=\'0\' cellpadding=\'0\'>'; $myresult .= "<tr>"; /* start of the pic row */ $myresult .= '<td align=\'center\' class=\'various_product\'>'; if($row_product['pic'] != "") { $myresult .= '<ul id=\'mycarousel\' style=\'display:\';>'; $myresult .= '<li><a href=\'/all_image_scripts/origpicdisplay.php?product='.rawurlencode($product).'&alias='.rawurlencode($alias).'&picid=pic&p= \'rel=\'lightbox[roadtrip]\'><img src=\'/all_image_scripts/picdisplay1.php?product='.rawurlencode($product).'&alias='.rawurlencode($alias).'\'></img></a></li>'; for($p = 1; $p <= 4; $p++) { if($row_product['pic'.$p] != "") { $myresult .= '<li><a href=\'/all_image_scripts/origpicdisplay.php?product='.rawurlencode($product).'&alias='.rawurlencode($alias).'&picid=pic'.rawurlencode($p).'&p='.rawurlencode($p).'\' rel=\'lightbox[roadtrip]\'><img src=\'/all_image_scripts/thumbpicdisplay.php?product='.rawurlencode($product).'&alias='.rawurlencode($alias).'&picid=pic'.rawurlencode($p).'\'></img></a></li>'; } } $myresult .= '</ul>'; } else { $myresult .= "<img width='50' height='70' src='/images/no-image.gif'></img>"; } jcarousel_add('#mycarousel', array('horizontal' => TRUE,'scroll' => 1,'visible' => 1)); $myresult .= "</td>"; /* end display of pic td*/ $myresult .= "</tr>"; /* end display of pic tr*/ $myresult .= "</table></td>"; /* end display of pic table and earlier td - Still 1 open TR td table tr -hint*/ $myresult .= '<td style=\'width:450px;\'>'; /*table - 4*/ $myresult .= '<table width=\'100%\' border=\'0\' cellspacing=\'0\' cellpadding=\'0\' style=\'display:block;\'>'; /* Start showing property and values */ $myresult .= '<tr>'; $myresult .= '<td class=\'tick\'><img src=\'/images/ul_li_bg.gif\' width=\'12\' height=\'12\' /></td>'; $myresult .= '<td class=\'leftText\'>'.ucfirst($product).':</td>'; $myresult .= '<td class=\'rightText\'>'.$row_product['alias'] .'</td>'; $myresult .= "</tr>"; for($j = 3; $j <= 5 ; $j++){ if($product_properties['property'.$j.'_name'] != "") { if($row_product['property'.$j] != "") { $myresult .= '<tr>'; $myresult .= '<td class=\'tick\'><img src=\'/images/ul_li_bg.gif\' width=\'12\' height=\'12\' /></td>'; $myresult .= '<td class=\'leftText\'>'.$product_properties['property'.$j.'_name'].':</td>'; $myresult .= '<td class=\'rightText\'>'.$row_product['property'.$j] .'</td>'; $myresult .= '</tr>'; } /* end if*/ } /* end if*/ } /* end for*/ /* show hide block */ $myresult .= '<tbody id=\'extra_properties\' style=\'display: none;\'>'; for($j = 6; $j <= 15 ; $j++){ if($product_properties['property'.$j.'_name'] != "") { if($row_product['property'.$j] != "") { $myresult .= '<tr>'; $myresult .= '<td class=\'tick\'><img src=\'/images/ul_li_bg.gif\' width=\'12\' height=\'12\' /></td>'; $myresult .= '<td class=\'leftText\'>'.$produtc_properties['property'.$j.'_name'].':</td>'; $myresult .= '<td class=\'rightText\'>'.$row_product['property'.$j] .'</td>'; $myresult .= '</tr>'; } /* end if*/ } /* end if*/ } /* end for */ $myresult .= '</tbody>'; /* end show/hide tbody */ $myresult .= '<tr>'; $myresult .= '<td>'; $myresult .= '&nbsp;'; $myresult .= '</td>'; $myresult .= '<td>'; $myresult .= '&nbsp;'; $myresult .= '</td>'; $myresult .= '<td align=\'right\' style=\'text-align:right;text-decoration:underline;\'>'; $myresult .= '<a class=\'right_link\' href=\'javascript:showMore()\'>Show Additional Details...</a>'; $myresult .= '</td>'; $myresult .= '</tr>'; /* End showing property and values */ $showreview = 'display:'; /* review show hide */ /*$myresult .= '<tbody '.$showreview.'>'; $myresult .= '<tr>'; $myresult .= '<td colspan=\'2\'><span class=\'reviews\'>'; //check //$numreviews = getreviewcount($brand,$model,'mobile_user_reviews'); if($numreviews > 0) { $myresult .= '<a href=\'mobilereviews?alias='.rawurlencode($alias).'\'> <span>$numreviews Reviews</span></a>'; } else { $myresult .= " $numreviews Reviews"; } $myresult .= "</span></td>"; $myresult .= "</tr>"; */ $myresult .= "</tbody>"; /* review show hide - end */ /* count show hide */ $myresult .= '<tbody '.$showcount.'>'; $myresult .= '<tr>'; $myresult .= '<td colspan=\'2\'><span class=\'reviews\'>'; //check //$totalvotes = gettotalvotes($row['property1'],$row['property2'],'mobile_rating'); $myresult .= "</td>"; $myresult .= "</tr>"; $myresult .= "</tbody>"; /* count show hide - end */ $myresult .= "</table></td>"; /* end table 4 */ $myresult .= '</tr>'; /* end 1 row and remaining tr , td ,table */ $myresult .= '</table></td>'; $myresult .= '</tr>'; /* remianing only 1 table */ /* ratings - positive last section starts here */ $max= array(); for ($l = 1 ; $l < 15; $l++){ if($row_product['property'.$l.'_avg']){ $maxarray = 0; $maxarray = $row_product['property'.$l.'_avg']; $max['rating'.$l.'_name'] = $maxarray; } } if(count($max) >0 ) { include('all_include_files/min_max_properties.php'); } if(($row_product['freshness'] <= strtotime("-3 month"))) { $image_type= 'old'; } else if(($row_product['freshness'] <= strtotime("-2 month"))) { $image_type= 'bitold'; } else if(($row_product['freshness'] <= strtotime("-1 month")) || ($row_product['freshness'] > strtotime("-1 month"))) { $image_type= 'new'; } $img_name = $image_type; $myresult .= "<tr>"; $myresult .= "<td>"; $myresult .= "<table width='100%' border='0'>"; $myresult .= "<tr>"; $myresult .= "<td width='170' class=\"ratingz\"><span><u>Overall rating</u></span></td>"; $myresult .= "<td width='150' class=\"ratingz\"><span><u>Positive</u></span></td>"; $myresult .= "<td width='150' class=\"ratingz\"><span><u>Negative</u></span></td>"; if($img_name == 'new'){ $images = "<img src='/sites/default/files/battery-discharging-100.png' width='40' height='40'></img>"; } else if($img_name == 'bitold'){ $images = "<img src='/sites/default/files/battery-discharging-80.png' width='40' height='40'></img>"; } else if($img_name == 'old'){ $images = "<img src='/sites/default/files/battery-discharging-0.png' width='40' height='40'></img>"; } else { $images = ""; } $myresult .= "<td rowspan='2'><p ".$showbattery.">". $images ."</p></td>"; $myresult .= "</tr>"; $myresult .= "<tr>"; $myresult .= "<td>"; $i++; for($k = 0.5; $k <= 10.0; $k+=0.5) { $overall = roundOff($row_product['overall_rating']); if($overall == $k) { $chk ="checked"; } else { $chk = ""; } $myresult .= '<input class=\'star {split:2}\' type=\'radio\' value=\''. $k .'\' '.$chk.' title=\''. $k.' out of 10 \' disabled />'; } $myresult .= '</td>'; $myresult .= '<td ><span>'.$positive.'</span></td>'; $myresult .= '<td ><span>'.$negative.'</span></td>'; $myresult .= '</tr>'; $myresult .= '</table></td>'; $myresult .= '</tr>'; /* ratings - positive last section ends here */ $myresult .= '<tr>'; if($row_product['description'] != ""){ if(words_count($row_product['description']) > 8){ $myresult .= '<td><p><span class=\'description\'><strong><u>Description</u>:</strong></span>&nbsp;&nbsp; <div class=\'expandable\'><p>'.$row_product['description'].'</div></p></p></td>'; } else { $myresult .= '<td><p><span class=\'description\'><strong><u>Description</u>:</strong></span>&nbsp;&nbsp;'. $row_product['description'] .'</p></td>'; } } $myresult .= '</tr>'; $myresult .= '</table>'; /* end 1st table */ $myresult .= '</div>'; /* start actual product display - end*/ /*start the form to take ratings */ $myresult .= '<div id=\'tabs\'>'; $myresult .= '<ul>'; $myresult .= '<li><a href=\'#tab-1\'>Ratings</a></li>'; $myresult .= '<li><a href=\'#tab-2\'>Click here to rate</a></li>'; $myresult .= '</ul>'; $myresult .= '<div id=\'tab-1\'>'; /* actual rating table - start - jsut display ratings */ $myresult .= '<table id=\'rounded-corner\'>'; /* thead - start */ $myresult .= '<thead>'; $myresult .= '<tr>'; $myresult .= '<th width=\'30%\' class=\'rounded-company\' scope=\'col\'><span style=\'font: normal 18px Arial, Helvetica, sans-serif; color:#FFF;\'>Ratings</span></th>'; $myresult .= '<th width=\'70%\' colspan=\'2\'class=\'rounded-q4\' scope=\'col\'><a href=\'#rounded-corner\' id=\'clickit\' style=\'color:white;text-decoration:underline;\' $disabled ></a></th> '; /*$myresult .= '<th width=\'70%\' colspan=\'2\'class=\'rounded-q4\' scope=\'col\'><a href=\'#rounded-corner\' id=\'clickit\' style=\'color:white;text-decoration:underline;\' $disabled >Click here to rate</a></th> ';*/ $myresult .= '</tr>'; $myresult .= '</thead>'; /* thead - end */ /* tbody - start */ $myresult .= '<tbody>'; /*start printing the table wth feature and ratings */ for ($i = 1 ; $i < $numProperties; $i++){ if($master_rating_properties['rating'.$i.'_name']){ $myresult .= '<tr>'; $myresult .= '<td width=\'22%\'>'; $indfeature = 0; $indfeature = $row_product['property'.$i.'_avg']; $myresult .= $master_rating_properties['rating'.$i.'_name'].' ( '.$indfeature .')'; $myresult .= '</td>'; $myresult .= '<td colspan=\'0\' width=\'38%\' >'; $tocheck = $indfeature; for($k = 0.5; $k <= 10.0; $k+=0.5){ $tocheck = roundOff($tocheck); if(($tocheck) == $k) { $chk = "checked"; } else { $chk = ""; } $myresult .= '<input class=\'star {split:2}\' type=\'radio\' name=\'drating'.$i.'\' id=\'drating'.$i.''.$k.'\' value=\''. $k .'\' '.$chk.' title=\''. $k.' out of 10 \' disabled \'/>'; } /* for k loop end */ $myresult .= '</tr>'; } /* end if loop */ } /* end i for loop */ $myresult .= '</tbody>'; /* end tbody */ /* footer round corner start */ $myresult .= '<tfoot>'; $myresult .= '<tr>'; $myresult .= '<td class=\'rounded-foot-left\'>&nbsp;</td>'; $myresult .= '<td class=\'rounded-foot-right\' colspan=\'4\' >'; $myresult .= '</td>'; $myresult .= '</tr>'; $myresult .= '</tfoot>'; $myresult .= '</table>'; /*round corner table end */ $myresult .= '</div>'; /*end 1st tab */ /*start 2nd tab */ $myresult .= '<div id=\'tab-2\'>'; $myresult .= '<form name =\'form1\' id=\'form1\' method = \'POST\' action=\''.$_SERVER['php_self'] .'\'>'; /* actual rating table - start - actual rate/update */ $myresult .= '<table id=\'rounded-corner\'>'; /* thead - start */ $myresult .= '<thead>'; $myresult .= '<tr>'; $myresult .= '<th width=\'30%\' class=\'rounded-company\' scope=\'col\'><span style=\'font: normal 18px Arial, Helvetica, sans-serif; color:#FFF;\'>Ratings</span></th>'; $myresult .= '<th width=\'70%\' colspan=\'2\'class=\'rounded-q4\' scope=\'col\'></th>'; $myresult .= '</tr>'; $myresult .= '</thead>'; /* thead - end */ /* tbody - start */ $myresult .= '<tbody>'; unset($i); /*start printing the table wth feature and ratings */ for ($i = 1 ; $i < $numProperties; $i++){ if($master_rating_properties['rating'.$i.'_name']){ $myresult .= '<tr>'; /*fetch ratings and comments - 1st make it to null */ $indfeature = 0; $comment = ''; $indfeature = $user_ratings['rating'.$i]; if($indfeature == NULL){ $indfeature = 0; } $comment = $user_ratings['rating'.$i.'_comment']; $myresult .= '<td width=\'22%\'>'; $myresult .= $master_rating_properties['rating'.$i.'_name'].' ( '.$indfeature.' )'; $myresult .= '</td>'; $myresult .= '<td colspan=\'0\' width=\'38%\' >'; if(($userId != '0') && (is_array($user_ratings))) { $tocheck = $indfeature; } else { $tocheck = '0'; } for($k = 0.5; $k <= 10.0; $k+=0.5){ $tocheck = roundOff($tocheck); if(($tocheck) == $k) { $chk = "checked"; } else { $chk = ""; } $myresult .= '<input class=\'star {split:2}\' type=\'radio\' name=\'rating'.$i.'\' id=\'rating'.$i.''.$k.'\' value=\''. $k .'\' '.$chk.' title=\''. $k.' out of 10 \' '.$disabled.' \' />'; } /* for k loop end */ $myresult .= '</td>'; $myresult .= '<td width=\'40%\'>'; $myresult .= '<input title=\'Reason for this Rating.. \'type=\'text\' size=\'25\' name=\'comment'.$i.'\' id=\'comment'.$i.'\' style=\'display:;\' maxlength=\'255\' value="'.$comment.'">'; $myresult .= '</td>'; $myresult .= '</tr>'; } /* end if loop */ } /* end i for loop */ $myresult .= '</tbody>'; /* end tbody */ /* footer round corner start */ $myresult .= '<tfoot>'; $myresult .= '<tr>'; $myresult .= '<td class=\'rounded-foot-left\'>&nbsp;</td>'; $myresult .= '<td class=\'rounded-foot-right\' colspan=\'4\' >'; if(($userId != '0') && (is_array($user_ratings))) { $myresult .= '<input type=\'button\' id=\'update_form\' value=\'Update\'>'; } else { $myresult .= '<input type=\'button\' id=\'save_form\' value=\'Save\'>'; } $myresult .= '</td>'; $myresult .= '</tr>'; $myresult .= '</tfoot>'; $myresult .= '</table>'; /*round corner table end */ $myresult .= '</form>'; /*end the form to take ratings */ $myresult .= '</div>'; /*end 2nd tab */ $myresult .= '</div>'; /*end tabs div */ /* actual rating table - end */ /* 1st form ends here id- ratings_form */ } /* end of if loop result_product loop */ /* start table 3 - overall comment*/ $myresult .= '<table border=\'0\' cellspacing=\'0\' cellpadding=\'0\' style=\'width:580px; table-layout:fixed;\' id=\'rounded-corner\'>'; $myresult .= '<tbody>'; /* thead - start */ $myresult .= '<thead>'; $myresult .= '<tr>'; $myresult .= '<th width=\'100%\' colspan=\'2\' class=\'rounded-company\' scope=\'col\'><span style=\'font: normal 18px Arial, Helvetica, sans-serif; color:#FFF;\'>Overall Comments</span></th>'; $myresult .= '<th colspan=\'3\' class=\'rounded-q4\' scope=\'col\'></th>'; $myresult .= '</tr>'; $myresult .= '</thead>'; /* thead - end */ $myresult .= '<tr>'; $myresult .= '<td colspan=\'4\'>'; $myresult .= '<textarea title=\'OverAll Comment\' name=\'overall_comment\' cols=\'65\'></textarea>'; $myresult .= '</td>'; $myresult .= '</tr>'; $myresult .= '<tbody>'; $myresult .= '</table>'; /* end table 3 - overall comment*/ /* start table 4 - summary*/ $myresult .= '<table border=\'0\' cellspacing=\'0\' cellpadding=\'0\' style=\'width:580px; table-layout:fixed;\' id=\'rounded-corner\'>'; $myresult .= '<tbody>'; /* thead - start */ $myresult .= '<thead>'; $myresult .= '<tr>'; $myresult .= '<th colspan=\'2\' class=\'rounded-company\' scope=\'col\'><span style=\'font: normal 18px Arial, Helvetica, sans-serif; color:#FFF;\'>Your Opinion</span></th>'; $myresult .= '<th colspan=\'2\'class=\'rounded-q4\' scope=\'col\'></th>'; $myresult .= '</tr>'; $myresult .= '</thead>'; /* thead - end */ $myresult .= '<tr>'; $myresult .= '<td colspan=\'2\'>'; $myresult .= 'Do you Agree with the Ratings'; $myresult .= '</td>'; $myresult .= '<td colspan=\'2\'>'; $myresult .= 'Was the Information Helpful'; $myresult .= '</td>'; $myresult .= '</tr>'; $myresult .= '<tr>'; $myresult .= '<form name=\'form2\' id=\'form2\' method=\'post\'>'; $myresult .= '<td>'; $myresult .= '<input type=\'button\' class=\'agree\' value=\'agree\'>'; $myresult .= '</td>'; $myresult .= '<td>'; $myresult .= '<input type=\'button\' class=\'disagree\' value=\'disagree\'>'; $myresult .= '</td>'; $myresult .= '<input type=\'hidden\' name=\'agree_disagree\' id=\'agree_disagree\'>'; $myresult .= '</form>'; $myresult .= '<form name=\'form3\' id=\'form3\' method=\'post\'>'; $myresult .= '<td>'; $myresult .= '<input type=\'button\' class=\'helpful\' value=\'Helpful\'>'; $myresult .= '</td>'; $myresult .= '<td>'; $myresult .= '<input type=\'button\' class=\'nothelpful\' value=\'Not Helpful\'>'; $myresult .= '</td>'; $myresult .= '<input type=\'hidden\' name=\'help_nohelp\' id=\'help_nohelp\'>'; $myresult .= '</form>'; $myresult .= '</tr>'; $myresult .= '</tbody>'; $myresult .= '</table>'; /*end table 4 summary table */ $myresult .= '</div>'; /* Actual Form or Page - end */ echo $myresult; //echo 'Product: '.$product; //echo '<br/>Alias: '.$alias; ?> hey this code is working fine for me . as required. the star class code is taken from http://www.fyneworks.com/jquery/star-rating/ ... it works well.. but when i insert code to add tabs for content ,the starts is not visible at all. but when i check source code. the stars are actually there . dono whats the prob. any suggestions on this this is the tabs code $('#tabs div').hide(); ('#tabs div:first').show(); $('#tabs ul li:first').addClass('active'); $('#tabs ul li a').click(function() { $('#tabs ul li').removeClass('active'); $(this).parent().addClass('active'); var currentTab = $(this).attr('href'); $('#tabs div').hide(); $(currentTab).show(); return false; });

    Read the article

  • datatables-multi-filter-select

    - by user1871603
    I am using the jquery plug-in datatables. I am using the feature, datatables-multi-filter-select on my website with php code. I want to move the drop down filter from the footer to the header like in the following example: http://www.datatables.net/extras/thirdparty/ColumnFilterWidgets/DataTables/extras/ColumnFilterWidgets/ Can anyone please update the following PHP code sample to accomplish this? Code: /** * Register necessary Plugin Filters */add_filter( 'tablepress_shortcode_table_default_shortcode_atts', 'tablepress_add_shortcode_parameters_multi_filter_select' );add_filter( 'tablepress_table_render_options', 'tablepress_set_table_foot_option', 10, 2 );add_filter( 'tablepress_table_js_options', 'tablepress_add_multi_filter_select_js_options', 10, 3 );add_filter( 'tablepress_datatables_command', 'tablepress_add_multi_filter_select_js_command', 10, 5 ); /** * Add "datatables_multi_filter_select" as a valid parameter to the [table /] Shortcode */function tablepress_add_shortcode_parameters_multi_filter_select( $default_atts ) { $default_atts['datatables_multi_filter_select'] = false; return $default_atts;} /** * Make sure that "table_foot" and "datatables_scrollX" are false, if "datatables_multi_filter_select" is true, * as the footer will be appended by the JS. Scrolling will not work with automatically added content */function tablepress_set_table_foot_option( $render_options, $table ) { if ( $render_options['datatables_multi_filter_select'] ) { $render_options['table_foot'] = false; $render_options['datatables_scrollX'] = false; } return $render_options;} /** * Pass "datatables_multi_filter_select" from Shortcode parameters to JavaScript arguments */function tablepress_add_multi_filter_select_js_options( $js_options, $table_id, $render_options ) { $js_options['datatables_multi_filter_select'] = $render_options['datatables_multi_filter_select']; // register the JS if ( $js_options['datatables_multi_filter_select'] ) { $suffix = ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) ? '' : '.min'; $js_multi_filter_select_url = plugins_url( "multi-filter-select{$suffix}.js", __FILE__ ); wp_enqueue_script( 'tablepress-multi_filter_select', $js_multi_filter_select_url, array( 'tablepress-datatables' ), '1.0', true ); } return $js_options;} /** * Evaluate "datatables_multi_filter_select" parameter and add corresponding JavaScript code, if needed */function tablepress_add_multi_filter_select_js_command( $command, $html_id, $parameters, $table_id, $js_options ) { if ( ! $js_options['datatables_multi_filter_select'] ) return $command; $name = str_replace( '-', '_', $html_id ); $datatables_name = "DT_{$name}"; $command = <<<JSvar {$name} = $('#{$html_id}'), {$datatables_name} = {$name}.dataTable({$parameters}), {$name}_tfoot, {$name}_selects, ths = '<tfoot>';{$name}.find('thead th').each( function( i ) { ths += '<th>' + datatables_fnCreateSelect( {$datatables_name}.fnGetColumnData(i) ) + '</th>';} );ths += '</tfoot>';{$name}_tfoot = {$name}.append(ths).find('tfoot');{$name}_selects = {$name}_tfoot.find('select');{$name}_tfoot.on( 'change', 'select', function() { {$datatables_name}.fnFilter( $(this).val(), {$name}_selects.index(this) );} );JS; return $command;} (function($) {/* * Function: fnGetColumnData * Purpose: Return an array of table values from a particular column. * Returns: array string: 1d data array * Inputs: object:oSettings - dataTable settings object. This is always the last argument past to the function * int:iColumn - the id of the column to extract the data from * bool:bUnique - optional - if set to false duplicated values are not filtered out * bool:bFiltered - optional - if set to false all the table data is used (not only the filtered) * bool:bIgnoreEmpty - optional - if set to false empty values are not filtered from the result array * Author: Benedikt Forchhammer <b.forchhammer /AT\ mind2.de> */$.fn.dataTableExt.oApi.fnGetColumnData = function ( oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty ) { // check that we have a column id if ( typeof iColumn == "undefined" ) return new Array(); // by default we only wany unique data if ( typeof bUnique == "undefined" ) bUnique = true; // by default we do want to only look at filtered data if ( typeof bFiltered == "undefined" ) bFiltered = true; // by default we do not wany to include empty values if ( typeof bIgnoreEmpty == "undefined" ) bIgnoreEmpty = true; // list of rows which we're going to loop through var aiRows; // use only filtered rows if (bFiltered == true) aiRows = oSettings.aiDisplay; // use all rows else aiRows = oSettings.aiDisplayMaster; // all row numbers // set up data array var asResultData = new Array(); for (var i=0,c=aiRows.length; i<c; i++) { iRow = aiRows[i]; var aData = this.fnGetData(iRow); var sValue = aData[iColumn]; // ignore empty values? if (bIgnoreEmpty == true && sValue.length == 0) continue; // ignore unique values? else if (bUnique == true && jQuery.inArray(sValue, asResultData) > -1) continue; // else push the value onto the result data array else asResultData.push(sValue); } return asResultData;}}(jQuery)); function datatables_fnCreateSelect( aData ) { var r = '<select><option value=""></option>', i, iLen = aData.length; for ( i=0 ; i<iLen ; i++ ) { r += '<option value="'+aData[i]+'">'+aData[i]+'</option>'; } return r + '</select>';}

    Read the article

  • Trying to create scrolling horizontal thumbnail navigation that hides on left side when not in use

    - by user346602
    Hi, I am trying recreate the following type of scrolling thumbnail navigation as described in the following tutorial: http://tympanus.net/codrops/2010/05/10/scrollable-thumbs-menu/ I require my thumbs to slide out horizontally from the left. I have amended the code to the best of my abilities, but I can't get it to work. (Think the problem is in the top third of the jquery). Here is what I have to date: HTML <ul class="menu" id="menu"> <li> <a href="#"></a> <div class="sc_menu_wrapper"> <div class="sc_menu"> <a href="#"><img src="images/gallery/1.jpg" alt=""/></a> <a href="#"><img src="images/gallery/2.jpg" alt=""/></a> <a href="#"><img src="images/gallery/3.jpg" alt=""/></a> <a href="#"><img src="images/gallery/4.jpg" alt=""/></a> <a href="#"><img src="images/gallery/5.jpg" alt=""/></a> </div> </div> </li> </ul> CSS /* Navigation Style */ ul.menu{ position: fixed; top: 0px; left:0px; width: 100%; } ul.menu li{ position:relative; width: 100% } ul.menu li > a{ position:absolute; top:300px; left:0px; width:40px; height:200px; background-color:#e7e7e8; } /* Thumb Scrolling Style */ div.sc_menu_wrapper { position: absolute; right: 0px; height: 220px; overflow: hidden; top: 300px; left:0px; visibility:hidden; } div.sc_menu { height: 200px; visibility:hidden; } .sc_menu a { display: block; background-color:#e7e7e8; } .sc_menu img { display: block; border: none; opacity:0.3; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30); } JQUERY $(function(){ // function to make the thumbs menu scrollable function buildThumbs($elem){ var $wrapper = $elem.next(); var $menu = $wrapper.find('.sc_menu'); var inactiveMargin = 220; // move the scroll down to the beggining (move as much as the height of the menu) $wrapper.scrollRight($menu.outerHeight()); //when moving the mouse up or down, the wrapper moves (scrolls) up or down $wrapper.bind('mousemove',function(e){ var wrapperWidth = $wrapper.width(); var menuWidth = $menu.outerWidth() + 2 * inactiveMargin; var top = (e.pageX - $wrapper.offset().right) * (menuWidth - wrapperWidth) / wrapperWidth - inactiveMargin; $wrapper.scrollRight(right+10); }); } var stacktime; $('#menu li > a').bind('mouseover',function () { var $this = $(this); buildThumbs($this); var pos = $this.next().find('a').size(); var f = function(){ if(pos==0) clearTimeout(stacktime); $this.next().find('a:nth-child('+pos+')').css('visibility','visible'); --pos; }; // each thumb will appear with a delay stacktime = setInterval(f , 50); }); /// on mouseleave of the whole <li> the scrollable area is hidden $('#menu li').bind('mouseleave',function () { var $this = $(this); clearTimeout(stacktime); $this.find('.sc_menu').css('visibility','hidden').find('a').css('visibility','hidden'); $this.find('.sc_menu_wrapper').css('visibility','hidden'); }); // when hovering a thumb, change its opacity $('.sc_menu a').hover( function () { var $this = $(this); $this.find('img') .stop() .animate({'opacity':'1.0'},400); }, function () { var $this = $(this); $this.find('img') .stop() .animate({'opacity':'0.3'},400); } ); }); Wondering if some eagle eye might be able to point out where I am going wrong. As my knowledge of JQuery is limited, I'm guessing it is in there. I really appreciate anyone taking the time to look this over. Thank you!

    Read the article

< Previous Page | 440 441 442 443 444 445 446 447 448 449 450 451  | Next Page >