DHTML Slider Widget
Aug 5, 2002
Using ViewLink behaviors (IE5.5+) and XBL bindings (Gecko-only - NS6+, Mozilla, etc), I basically created an encapsuled widget. That means you can infinitely reuse it with no conflicts.
To implement on a page, you'll need to add this attribute to the <html> tag to make IE happy:
xmlns:rdhtml="http://rdhtml.resource-locator.com/xmlns"
As well as add another thing to keep IE happy - a proprietary import processing instruction, before the <head> tag:
<?import namespace="rdhtml" implementation="slider.htc"?>
And define this style somewhere and apply it to the page:
rdhtml:slider {
-moz-binding: url(slider.xml#slider);
-moz-user-focus: normal;
-moz-user-input: enabled;
display: block;
padding: 0;
margin: 0;
position: relative;
}
After all of that, to add as many as you want to a page:
<rdhtml:slider width="width in pixels - defaults to 150 if not present" onvaluechange="event to fire when the gripper is moved"></rdhtml:slider>
If I feel the need, I will also implement a "value" attribute which sets the default value of the slider.
Speaking of which, the value property of the element is 0 - 100, reflecting the percentage of the slid amount. And is read/write. :)
(In Mozilla, I implemented a read/write width property as well, and intend to eventually add that in the IE implementation)
You can manipulate the value and position of the gripper by dragging the gripper, clicking on the track (really an hr), or focusing it, and using arrow keys, page up/down, or home/end.
To customize the look, slider.css is applied to every slider.
Required files are:
slider.css (styles the sliders)
slider.xml (XBL binding for Gecko)
slider.htc (ViewLink behavior for IE5.5+)
I've only had it tested in Win2k, XP Home, XP Pro in IE6, and in Win2k and WinXP Pro in a 1.1 trunk Mozilla.
I've been told that it is "sluggish" in IE6, but on my pc it is very smooth. Is it just me where it performs satisfactorily in IE6?
And I'm aware of a weird bug in my implemention of it in Mozilla where clicking on a slider bar sometimes moves the last focused slider instead...
If an IE5 user could confirm that it doesn't work for them, that would be great, and I still need someone in IE5.5 to tell me it works....
Someone with a 1.0 trunk of Mozilla would be much appreciated too. :)
Any ideas for additions would be cool too, though I'm not sure what other attributes I could add that would be useful?
View 6 Replies
ADVERTISEMENT
Dec 20, 2010
1) Script Title: Ajax Tabs Content Script (v 2.2) and Featured Content Slider Using jQuery UI
2) Script URL (on DD): [URL]
3) Script URL of Featured Content Slider Using jQuery UI [URL]
4) Script URL of my implementation of both script. [URL]
5) Problem: I've integrated the featured content slider in one of the default content section of the tab menu as you can see on the link on point 4. The slider is working perfectly when until i click on other tab menu and then back tab menu 1. The slider seize to work no more and worst the other featured content slides are appearing below the first one.
View 6 Replies
View Related
Dec 16, 2011
I have a form with two slider on it so the user can select an amount. The slider works fine and passes the values to email ok etc. but when the page is loaded there is "[object Object]" in box of the second slider. I can't find the problem with the code as it is the same for the first slider.
Here is a link to the form: [url]
<script>
View 1 Replies
View Related
Jun 27, 2011
I got 2 sliders in a List:
<li data-role="fieldcontain">
<label for="slider_year"><big>Jahr auswählen</big></label>
<input type="range" name="slider_year" id="slider_year" value="2000" min="2000" max="2011" />
[Code]....
Both alerts wont get called...
I know this should be very easy, but i dont get it.
View 1 Replies
View Related
Oct 12, 2009
1.I found a Slider Toggle thats demonstrated here [URL] and it seems to work fine but only if the link is placed above the div that slides down.. im trying to make the div slide down from above my menu and i want 1 of the links on my menu to toggle the slider. how do i get it work to where I can place the link below the sliding div? 2. the script originally used .fader{opacity:0;display:none;} but I wanted the slider div to be visible if javascript was disabled so I added
jQuery(".fader").hide(); so its now
<script type="text/javascript">
$(document).ready(function() {
jQuery(".fader").hide();
$(".fadeNext").click(function(){
$(this).next().fadeSliderToggle()
[Code]...
View 4 Replies
View Related
Feb 16, 2011
i am using jquery slider.i need to display the values on mouseover of the slider handle
View 4 Replies
View Related
Aug 11, 2010
I have to change the slider color depending on its value, but I didn't manage to do it, I changed the attribute "background" of the class "ui-slider-range" this way : $("#slider.ui-slider-range").css("background","red"); Since I have three states (red, orange and green) I have to use three sliders, each one has one color, all hidden at the beginning then I show the appropriate slider when the value changes.
View 1 Replies
View Related
Nov 2, 2010
I've got the following problem: I have a Jquery slider and I want to disable the click on the slider. I only want to change the slider when I click and drag the pointer. Standard you can also click everywhere on the slider and the pointer will go to that point. That I don't want. .
Code HTML4Strict:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
[Code]....
View 4 Replies
View Related
Jun 9, 2011
I have a php code that creates a select combo box depending on some values stored in a database and I am trying to make it look nicer I found the jquery slider I found this but it does not work in the environment I am working (joomla) well, it does but it disappears as soon as I move the slider. so if I had
Code HTML4Strict:
<select id="someId" >
<option>1</option>
<option>1</option>
<option>1</option>
</select>
is there an easy way to transform that into a slider?
View 1 Replies
View Related
Sep 6, 2004
At work, I'm mucking around with a prototype client using XMLHttpReqest for pulling server data (REST or XML-RPC or SOAP) and I want to now use a JS widget API for building re-usable widgets for use in 'pages'.
I was having a look at DynAPI, but it seems to not be a high enough level for what I want.
Just wondering, has anyone toyed with a high level client JS API for building nice DHTML UI's or can point me to some?
View 2 Replies
View Related
Sep 9, 2005
I have a function (below) which is executed upon the clicking of a
checkbox called 'yeschk'. This function works as expected for FireFox,
i.e., the 4 widgets (nametext, emailtext, addme, and removeme) disable
or enable immediately when the 'yeschk' checkbox is clicked. But in IE,
this doesn't happen immediately. Instead, the mouse has to be clicked
somewhere else on the page, first. So in IE, to disabled/enable the 4
widgets, I need to click the 'yeschk' checkbox, then click anywhere else
except 'yeschk'. I don't understand why this is, and it is aggravating.
Is there a known trick that I could implement that would cause IE to
enable/disable the 4 widgets immediately on a 'yeschk' click?
function chkboxChange() {
document.email.nametext.disabled = !document.email.yeschk.checked;
document.email.emailtext.disabled = !document.email.yeschk.checked;
document.email.addme.disabled = !document.email.yeschk.checked;
document.email.removeme.disabled = !document.email.yeschk.checked;
}
View 2 Replies
View Related
Oct 21, 2003
Should work on IE5.5+ and recent Mozilla clones.
Download size ~30K
Open source (GPL license)
Not released yet, no API documentation (will be soon)
Basically the question is - does it make sense at all? What's your current experience with client-side widgets - too slow, too heavy or there is still a place for things like that?
View 4 Replies
View Related
Jan 27, 2011
This isn't really a beginner question. I need to build a webpage that has some form elements on it. These form elements act like filters on a set of page elements. Several input element can be grouped as one of many filters. For example six checkboxes are filter 1 and a radiobutton and a pulldown element are filter 2.
When the user makes some changes in these filters a server request is send and an answer is send back with the result. Depending on the result every filter (group of elements) need to be re-initialized to reflect the new model state on the server.
So my question is: Is it right to see the filters as widgets in a Jquery UI sense? Or is it more appropriate to just see them as plugins. Can someone please share some insight?
View 4 Replies
View Related
Aug 23, 2010
I'm just getting started with jQuery.
I just made a form with a datepicker, which works fine. But I can't get the widget button to work.
I downloaded a theme and I'm importing the files as you can see in the code below. Do I have to download anything else to get the button to work?
My code looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
[Code]....
View 4 Replies
View Related
May 25, 2011
I integrated JQuery UI, and I have the JQuery tabs working. Since Joomla uses mootols, I had to include thejQuery.noConflict(); And the tabs script " $ " is replaced by JQuery.
However, when I add the Cycle widget, and I replace the $ sign for JQuery, the widget does not work. If I use the $ sign, the widget works. I want to keep my code tidy. Can somebodyenlightenme on this situation?
View 1 Replies
View Related
Mar 19, 2010
I want to display on the partener's website some informations contained on my serveur relative to him (i have multiple parteners) and i thought it would be great to display them like the facebook badge (it's the only example which comes to my mind)
The thing : i really don't know what to do / how to begin :
I cannot use jquery, because it would involve that the parteneer website has jQuery.
I have multiple possibilites on the source of the information :
I can cache a PHP file wich contains informations (but i have 25 parteners so it would be 25 files cached ? -> bad )
I've a XML file [url] but i don't know how to parse an xml file either :O to give you an example i just want to display on crystal-serv information contained between the <GSP> tag where nom = crystal-serv
View 2 Replies
View Related
Nov 14, 2011
I have a problem with width() of jQuery.Normally, width() will return an exact value of element's width instead of the percentage (if we use width: 100%).
I'm writing a widget using jQuery. I have a function to build my widget and set its width based on the outer-bound. I need the exact value of width to arrange the element inside that widget. But when using width(), it returns 100 (means 100%), not the value in pixel (must be 1200px).
View 2 Replies
View Related
May 14, 2009
its an accordion like tool. It functions just how Ineed it, except id love to make it sortable.with the codeupdate?jQuery :
$(function() {
$("#accordion1").addClass("ui-accordion ui-widget ui-helper-reset")
.find("h3")
[code]....
View 1 Replies
View Related
Oct 2, 2011
I am trying to get an external php page to display on any website. What I have is a side button that opens a small new window (an example of which is at my username website.)
What I want to do is place a php page full of dynamic goodies in a way that someone can have that box on their site by just copying code and paste it into their website. The result would be that their website will then have a php page from my server showing up in the box. one they can dynamically control through a database (again on my server, hence the need for a php page from my server) I have tried a different approach using a similar script that when you put two lines of code on the bottom of a remote web page it brings in everything but unless the content is within the same domain the java script will not let the page pull out.
I can not seem to find anything about this. I am not familiar with Iframes but maybe I should look into that.
View 1 Replies
View Related
Jul 23, 2009
how to insert a javascript widget to a publisher webpage , i can't seem to be able to enable javascript in publisher 2003. if you can can you let me know how i can activate the widget other wise.
View 1 Replies
View Related
Oct 26, 2011
I have recently downloaded a custom jQuery UI Pack, only using core and tab widget. On the examples in the index.html file, everything loads fine. Then I copy the files to my website directory, (all locally) and the images files just contain a question mark.
View 3 Replies
View Related
May 11, 2010
I was wondering if someone can help me out here. I was wondering if its possible to get this Jquery Image Slider to fit a 250x250 Pixels I want to create a widget on Wordpress.[URL]..If possible in order to get this done we could move the control with the numbers on the bottom and keep the descriptions on top.
If this cant be done, do any of you know any 250x250 Jquery Image sliders. That can possibly work in this format? I'm trying to stay away from Flash much as possible.
View 1 Replies
View Related
Jul 23, 2005
Scrollable table widget with fixed header is there such thing ?
View 2 Replies
View Related
Dec 24, 2011
I have a text field
<input type="text" id="f">
I transorm it to autocomplete widget$('#f').autocomplete()How to access widget's methods and properties by id of the field?I need to access initialized widget to call some of its methods, modify properties etc.
View 1 Replies
View Related
Nov 14, 2011
I have a function in my widget :
this.element.find('.abc').live(this.options.event,jQuery.proxy(this._onCollapse, this));
[Code]...
View 1 Replies
View Related
Mar 11, 2011
[URL]In the documentation there write that i can save the state of my open and added widgets. But how?
View 6 Replies
View Related
