JQuery :: Plugin: SpinBox / SpinButton Control (with No Extra Markup)
Aug 11, 2006
I've been working on a Spin Control that uses only a standard textbox. <input type="text" /> With Javascript enabled the textbox looks and acts like a spin-button control without adding any extra elements. [URL] The up/down arrows are achieved using a background image, the rest is handled by Javascript/JQuery. I hope it is useful for some of you. I'm also working on a drop down date-picker that uses similar principles. (I just don't like solutions that add loads of extra markup!) Feedback/comments are welcomed, though I won't be able to respond to
I am unable to see, or rather the plugin does not display in myadmin...I uploaded the plugin into my plugins folder (i have the latest WP)and i still cannot see it?
how to modify the DOM with jQuery in order to correct an (dynamic) HTML structure. I have a markup like this: Thinking about a replacewith or append or a combination??
<ul class="MyClass"> Test1 <br />Test2</ul>
But I need to get all texts in the UL be surronded by LIs, and to delete the br.
I'm just starting out, and having a little difficulty understanding how to target other html markup around a certain 'on click' item.[code]So when the user clicks the anchor the text is inserted into the following textarea. I achieved this by:[code]
I have been trying to figure out how to find all instances of a certain word or phrase within an element and wrap those words in <span> tags or other html. I.e. change all instances of 'the keywords' to <span>the keywords</span>So far I've found a lot of references to :contains() but that will change the element the text is inside of rather than just the text itself
On my site I use an SVG image. The <embed> tag works fine in Opera and Firefox. And <img> works fine in Chrome and Safari. I would like to know if it is possible to change the tag with an 'if' browser statement, and if it is ho would I write it.
if (jQuery.browser.webkit) { * // Replace <embed> with <img> }
I have a js application, that loads formular-markup dynamically for a specific entity. Is there a way to access elements within this dynamically loaded markup through jquery?
eg. in the form load function: $('#container').empty().append($(entityForm.markup).addClass ("formContainer"));
I have an application that produces a dynamic unordered list from DB categories table. The list is representing the hierarchy by adding a “..” (Double dot) in front of the list item name for each hierarchy level like so:
I inherited Javascript and jQuery for a sliding belt (carousel) module. Basically, left and right navigation arrows would appear to the sides of the belt if there were more slides to show.
The jQuery and Javascript code was originally a singleton, so I decided to convert it into a jQuery plug-in in case the belt HTML markup was instantiated more than once. We have a CMS, so multiple belt modules theoretically could be placed on the same template.
Below is test page with two belts on the same page and the associated Javascript jQuery.
My problem is that when you click on the arrows or the slides, I found that the second belt works fine but not the first one. The first one does not show a left arrow when you page to the right. Likewise, the first belt gets mixed up going to the left. Somehow, only the second belt works as expected.
What I would like to do is when I attach my plug-in to a DIV, I want each belt to operate independently of each other (i.e keep its own local variables, functions, etc.).
I am not sure what I am missing here. what I am doing wrong? (You should be able to copy and paste the code into jsFiddle to see how it currently works.)
The childNodes[0] that the script keeps editing is the text node that starts out as "test". The problem is that I want the text that I put in the table to be parsed if any markup is in it (so that a <br /> will become a break, and not literally printed out as "<br />"), something that the DOM automatically escapes. It seems a very cumbersome means of doing this is to write a javascript parser, which would go through the text and create different types of nodes as it stumbles upon markup.
Im trying to find if a particular html markup pattern (<ROD> ... </ROD>) within a string and if its found then replace it with another string.eg."This is my string and it might <ROD>PartNumber123</ROD> contain HTML markup"So in this case I want to replace "<ROD>PartNumber123</ROD>" with {0}. If there is no <ROD>...</ROD> then dont do anything.Im sure im doing this the wrong way, maybe a regular expression would be best.Although this works its not very clean and I just cant find the correct solution.
function parseData(data){ var r1 = data.indexOf("<ROD>",0); var r2 = data.indexOf("</ROD>",0);
Situation:I have a very long page divided into many sections vertical-wise marked by bookmarks, say pageX.html#s1 to s10. I need to show the section inside an iframe (iFrame1) on the mainpage (mainpage.html). I am thinking of having 4 buttons, sitting on the mainpage, to help navigate between these sections on pageX, namely NEXT, PREVIOUS, TOP, END.condition of the frame, fixed width/height, no scroll, no border.Very new to javascript but need this code to make a page work for BIZ.
From my understanding the main feature of unobtrusive JavaScript is to remove event handing from the markup.The main reason for doing this is to avoid repetition of code.There are also other reasons but that is the main one. e.g. no having to write <tag onclick="function()" > over and over again. This traditional event handling method makes code less maintainable.However is it worth writing unobtrusive code when we consider the following:
1, Server sider scripting laguages can be used to avoid code repetition. e.g. we can use a loop to add multiple onclick event handlers to all the elements of a navigation list. Thus we would only have to write onclick="function()" once.
2, Unobtrusive coding makes the code harder to follow.It is easier to look at the markup to find out what happens when an event occurs on an element rather than having to look through wades of JS code to find the correct event listener. This is especially true when a team is working on a project. It is easier to find out what another person has done when the traditional model of event handling is used.
3, Unobtrusive coding means longer and more complicated code. Also there there is a need for having to deal with browser differences.I know this can be reduced using libraries such as JQuery. Is it worth using such a library?
<div> </div><div>This is hopefully simple. I have a bunch of links with titles, like TITLE="Facebook" and so on. I am adding JQuery to make the links open in a new window and
I cannot believe this is NOT possible but thus far, I've scoured the web for hours looking for an easy way to make a radio button about 10 times larger than it normally is, and make it use custom colors. For example, I'd like to use custom images for the "selected" "unselected" and forgo the normal radio button entirely. However, I'm hoping to keep the radio button as an input method in the HTML, since jQuery has some super useful tools to manipulate input via radiobutton (or other selectors).
I have an accordion in which all the data is being populated from a database. The problem is that after it runs through the query and adds my data it leaves alot of extra spaces which leads the user to have to scroll a great deal before finding the next header.
Here is my code.
<? $sqlQuery = "SELECT id, date, name FROM webinars "; $result = mysql_query($sqlQuery); ?>
I'm currently using the Jquery Flipv plugin, which works well. The only problem is, some words have extra padding at the end, depending on how many characters.
I'm not sure why this is, but it seems that the conversion to vertical text creates some extra spacing on certain browsers.
I've been banging my head against this extremely frustrating bug but I finally managed to get an isolated test case. Call .animate() on two different elements one after the other and give the second one a "complete" callback. In the callback function call .stop() on the first element, the one with no callback.
The callback function should only fire once (when the second element's animation completes) but instead it fires twice. It only occurs when the animations are started in that order and stop() is called inside the callback.[URL]...
the "li.sf-with-ul" class has extra padding which i can't seem to find where its coming from.[URL]..menu items with UL under them (sub items) have padding that makes the items different from the normal links. i would like to get rid of it. i can't find anything related to this in the CSS.
I like the looks of the validation engine plugin, but I can't figure out one thing... For a particular form field, I need to use an Ajax service to validate the data. I have to pass the value of the text input, of course, but I also need to pass a couple of other key=value pairs along with it. In the file with the selectors there's the option to add extraData (like extraData="name=eric") but I need to set these parameters based on some dynamic info.Is there a way to pass extra information to the ajax service?
