[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

cfslider not formatting correctly

Posted on 2010-03-29
5
Medium Priority
?
401 Views
Last Modified: 2012-05-09
I'm trying to use multiple cfslider tags on a webpage, but for some reason, the sliders always group together at the top. Does anyone know how to make the sliders follow the html formatting?

What I want:

Title
slider

Title
slider

Title
slider

What I get:

Title
slider
slider
slider

Title

Title
<p>Slider Goes Here.</p>
<cfform>
<cfslider name="progress" 
format="HTML" 
vertical="false" 
width="150" 
value="50" 
min="0" 
max="100" 
tip="true"/>
</cfform>

<p>Slider Goes Here.</p>
<cfform>
<cfslider name="progress" 
format="HTML" 
vertical="false" 
width="150" 
value="50" 
min="0" 
max="100" 
tip="true"/>
</cfform>

<p>Slider Goes Here.</p>
<cfform>
<cfslider name="progress" 
format="HTML" 
vertical="false" 
width="150" 
value="50" 
min="0" 
max="100" 
tip="true"/>
</cfform>

Open in new window

Screen-shot-2010-03-29-at-2.40.2.png
0
Comment
Question by:cmckoy
  • 3
5 Comments
 
LVL 53

Expert Comment

by:_agx_
ID: 29047649
I strongly suspect this a bug.  Notice if you give the cfslider's different names, like progress1, progress2, etc... it works as you expect? Unfortunately ... this tag doesn't allow an "ID", which limits the options. Nothing else I've tried so far works. Maybe someone else has a workaround.  Either way, consider reporting it as a bug.


<p>Slider Goes Here.</p>
<cfform>
<cfslider name="progress1" 
	format="HTML" 
	vertical="false" 
	width="150" 
	value="50" 
	min="0" 
	max="100"
	tip="true"/>
</cfform>

<p>Slider Goes Here.</p>
<cfform>
	<cfslider name="progress2" 
	format="HTML" 
	vertical="false" 
	width="150" 
	value="50" 
	min="0" 
	max="100" 
	tip="true"/>
</cfform>

Open in new window

0
 
LVL 27

Accepted Solution

by:
azadisaryev earned 2000 total points
ID: 29063091
yes, the only way to display sliders separately (instead of grouped together) is to give them unique NAMEs.

whether this is a bug or not - i am not sure: as with most cf controls you really should give them unique NAMEs (unless it is a radio/checkbox group, + in a few other cases).

when all your sliders have the same name, cf generates a container div element for each, but all with same ID (= '_cfslider_' + the NAME of your slider).
the javascript behind the slider control renders the slider interface to a container with that specific ID - and when you have several containers with the same ID, only the first one will be used to render all sliders in since reference to the first container is returned by document.getElementById('progress'). plus your page will have invalid html/xhtml as element IDs should be unique per page...

i think that requesting the slider to support ID attribute may be a valid enhancement request.

Azadi
0
 
LVL 53

Expert Comment

by:_agx_
ID: 29092606
I think it's a bug. You can at least give most other elements a unique ID, which is what counts when it comes down to the CSS.  Not that my opinion matters here ... :P
0
 
LVL 53

Expert Comment

by:_agx_
ID: 29106968
... and you're welcome cmckoy ;-)
0
 

Author Comment

by:cmckoy
ID: 29111448
Thanks so much! Solved my issue.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
There is a wide range of advantages associated with the use of ASP.NET. This is why this programming framework is used to create excellent enterprise-class websites, technologies, and web applications.
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
Learn how to set-up custom confirmation messages to users who complete your Wufoo form. Include inputs from fields in your form, webpage redirects, and more with Wufoo’s confirmation options.
Suggested Courses
Course of the Month8 days, 23 hours left to enroll

590 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question