JSFiddle

alano's public fiddles

• Revised solution for Jerome

  jQuery 1.8.3, HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Solution for Jerome

  jQuery 1.8.3, HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Cloning and copying div's

  jQuery 1.8.3, HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Animation chaining

  jQuery 1.8.3, HTML, CSS, JavaScript

• Private fiddle Extra
• Delete fiddle
Groups Extra
• GPS mapping with HTML5 and JavaScript

  Will not work on jsFiddle website because the google map api doesn't like the way it's called by jsFiddle. Works on my own localhost sever, fails on jsFiddle

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Solution for GGev - jQuery version

  The jQuery version of my solution works like this:- Create a simple html <div> element for each advert and provide a custom parameter (e.g. data-ad-url) to specify the url of the related script. The loadAd function has been modified to receive an event data type to make life easy. Once the DOM has loaded (.ready()), generate your scripts for each advert (I have created two dummy ones just to show that they do indeed run immediately upon loading). Then add event handlers to each div, which will fire the $.getScript() method. -------------------------- In answer to:- https://forum.jquery.com/topic/dynamically-loading-external-js-file-or-it-s-content

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Solution for GGev

  Solution works like this:- Create a simple html <div> element for each advert and provide a custom parameter (e.g. data-ad-url) to specify the url of the related script. The loadAd function has been modified to receive an event data type to make life easy. Once the DOM has loaded (window.onload), generate your scripts for each advert (I have created two dummy ones just to show that they do indeed run immediately upon loading). Then add event handlers to each div, which will call your loadAd function. -------------------------- In answer to:- https://forum.jquery.com/topic/dynamically-loading-external-js-file-or-it-s-content

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Answer to mike's question - expanded

  This expanded version of solution makes use of data fields and the new HTML5 <input. tags such as telephone, email and date. Date, for example, pops up a calendar. ---------------------- In answer to:- https://forum.jquery.com/topic/hello-friends-i-need-a-better-way-to-shorten-code-please

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Answer to mike's question

  In html, define only the structure. In jQuery, define all the helper effects such as this tooltip. I am using the <input> element's ID to act as the text for the placeholder text and balloon text. You could also/instead add separate parameters within the <input> element, such as perhaps a data-longtext parameter, which the jQuery could then insert into the balloon. See second solution:- http://jsfiddle.net/alano/UZLMY/ My solution works like this... wrap a <div> around each <input> to provide a solid positional reference container, then add a hidden tooltip balloon and arrow for each <input>. Set the <input> placeholder and balloon text to the value of the <input> element's ID. Finally, use .hover() to show/hide the tooltips as required. ---------------------- In answer to:- https://forum.jquery.com/topic/hello-friends-i-need-a-better-way-to-shorten-code-please

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Solution for kali90

  Complete re-write of jQuery, simplification of html and css. The major change is to use <div> and <img> instead of the <div> + <a> + <img>. ---------------------------------------- In answer to:- https://forum.jquery.com/topic/hover-append-element-can-t-remove-on-mouseout

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Solution for aspectratio

  Hugely simplified. Requires the jquery.cookie.js plugin:- https://github.com/carhartl/jquery-cookie . Also available via nuget -------------- In answer to:- https://forum.jquery.com/topic/preserving-links-and-creating-default-state-with-cookies

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Solution for Gani4u

  On the assumption that you simply wish to display the index, I have utilised the 'value' attribute of the <li> element for simplicity. I have also added a pointer cursor and highlighting colour to improve user-friendliness. ----------------------------------- In answer to:- https://forum.jquery.com/topic/unable-to-display-selected-value-in-jquery-selectable

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Testing for Garavani

  This seems to work perfectly. I'm not sure what you did wrong. Perhaps your version of jQuery or jQuery UI was corrupted? Or perhaps you didn't correctly set the initial state of the elements (which I have done in the CSS pane of this fiddle)?

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Answer to mike's other problems

  I think I have solved the problems - by reducing the number of event handlers to an absolute minimum and making the user selection event fire once only. I have assumed that the page will be refreshed after the selection has been processed - thus re-enabling the single-shot .one() event handler. If you don't refresh the page after a selection then you simply need to move the handler code from .one() up into a "click" clause of the .on() handler above it. I have also shortened the initial declaration of $tip_provincia. I don't know what this line did, because I do not think there is a selector called ":none". :- $lists.not(this).find('<ol:none>').hide(); ....so, I have removed it completely. Whilst I was writing some code yesterday evening I stumbled across an article saying that .hover() with two functions has been deprecated in jQuery v1.8, so I used this opportunity to change the .hover() into two .on() clauses instead. ----------------------- Answer to https://forum.jquery.com/topic/please-help-to-correct-program-tool-tip#14737000003572162

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Answer to sepuede28cba's question

  The code shows the tooltip upon mouseenter. When the <select> is clicked the code shows the tooltip and also set a variable to tell us later that the user is in the process of selecting something. If the user has not clicked <select> then the tooltip is hidden immediately upon mouseout. If the user has clicked <select>, which we know because of our variable, we will only hide the tooltip once an option has been selected. Notice that I've had to include a "stopPropagation" flag to tell the code to ignore the first click after an option has been selected (by means of the change event). ----------------------------- In answer to:- https://forum.jquery.com/topic/i-need-help-to-ignore-id-in-effect-tool-tip-please

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Answer to mike's question

  Firstly, there were several semicolons and parentheses missing. I don't believe they were causing a problem but I have corrected them anyway. My suggested solutions is to use the two-function version of .hover(). In the first function (mouseenter) I have changed the behaviour to always show the tooltip, then in the new second function (mouseleave) the code will hide the tooltip only when a menu option has been selected (if the options menu has already been opened). I have use a data('activemenu') parameter to indicate when the options menu has been opened. I have assumed that was the purpose of your data('activesong') parameter so I have removed those references - but you can easily put them back in if you need them. ----------------------- Answer to https://forum.jquery.com/topic/please-help-to-correct-program-tool-tip#14737000003572162

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Answer to jhalligan's question

  In answer to http://forum.jquery.com/topic/help-please-i-think-this-is-a-relatively-easy-image-swap-solution-but-for-the-life-of-me-i-cant-seem-to-get-it#14737000003574523 Simply, all you need to do is create a new class called something like "show" and write a quick jQuery event handler (or plain JavaScript if you'd prefer) to add the class to the <p> element when mouse enters an element. When mouse enters an element the first action should be to remove the "show" class from all <p>'s before then setting the single one you want. You'll notice I have removed all the styling into the CSS because I couldn't see wood from trees, and I have removed the <span> which isn't presently being used. When you productionise your code you'd also probably benefit from using repeating relative positioning instead of using absolute positions each time.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• RegEx parsing of LINQ lambdas

  Tested in Chrome v21 and Chrome Canary v23, IE9

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Recombine broken-up text in paragraph and find chosen text

  Starting from the bottom of the code, the main .each() block iterates through each paragraph at a time and firstly gets rid of any highlighted text from a previous usage, gathers each textNode and then splits each into precisely one textNode per character, relists each textNode (each one char long), then matches each letter where there's a match to the selected word and highlights each of those characters. I borrowed some ideas from jQuery/Sizzle .text() method for my getTextOnly() function.

• Private fiddle Extra
• Delete fiddle
Groups Extra
• Recombine broken-up text in paragraph and replace

  The first lines of JavaScript simply make reference to my pseudo-iframe and the search text box. Working through each para within iframe, flatten the para (remove sub-elements); place a formatting span around the search text; update para in iframe with processed version

• Private fiddle Extra
• Delete fiddle
Groups Extra

• 1
• ◀︎
• 3
• 4
• 5
• ▶︎
• 6