Have Geek Brain

How to distinguish two classes with the same name in different css on the same page

in my asp.net page I link 2 css files that are used by two different controls but the main problem is that one class name is the same for both so they conflict with each other please tell me how can I distinguish between them.

Both have jquery, 1 is slider and the other is timer control. and they clash with the background image as I want to change the background image of the slider control scroller. Please give me a solution ..

code for using the slider:

    <div id="time1" style="float: left; width: 100px" >
                             <code>$('#time1 input').ptTimeSelect({ popupImage: 
  '<img  alt="Select" src="../images/icon_clock_2.gif"
                                style="border-right: 0px; border-top: 0px;    border-left: 0px; border-bottom: 0px" />'
                                }); </code>
                            <div >
                                <input id="s2Time1" runat="server" name="s2Time1" readonly="readonly" style="width: 60px" />
                            </div>
                        </div>

below code is for timing:

 <div id="time2" style="float: left; width: 100px">
                            <code>$('#time2 input').ptTimeSelect({ popupImage: '<img alt="Select" src="../images/icon_clock_2.gif"
                                style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" />'
                                }); </code>
                            <div>
                                <input id="s2Time2" runat="server" name="s2Time2" readonly="readonly" style="width: 60px" /></div>
                        </div>
+2


a source to share


3 answers


You can add a second class to one of the controls.

<div class = "first_class second_class">
<div class = "first_class">

Then do something like:



first_class {
   attributes
}

second_class {
   more attributes that may or may not write over first_class attributes
}

Make sense?

+2


a source


Place a <div>

around the slider part, give it a class ( class='myslider'

) and a css slider prefix .myname

.

Do the same with the date picker part, <div class='myDatePicker'>

and prefix the css with jQuery date picker with.mYDatePicker



This should fix the problem.

+1


a source


NOTE. This answer is a combination of my comments to formulate a solution, which is the same as the other option posted here and contributes.

First of all, a quick question: why do you have javascript / jquery around <code>

instead of <script>

in your example?

Edelcom's answer follows the correct approach, but did not provide any sample code. Here's how I would approach it using a method that is basically identical to his:

Slider code

<div id="slider"><div id="time1" style="float: left; width: 100px">
<script type="text/javascript">$('#slider #time1 input').ptTimeSelect({ popupImage: '<img alt="Select" src="../images/icon_clock_2.gif" style="border-right: 0px; border-top: 0px;    border-left: 0px; border-bottom: 0px" />'
}); </script>
<input id="s2Time1" runat="server" name="s2Time1" readonly="readonly" style="width: 60px" />
</div></div>

Here I have surrounded this whole element with another div ( id = "slider"

). So my jQuery code is:$('#slider #time1 input') ...

Date picker code

<div id="datepick"><div id="time2" style="float: left; width: 100px">
<script type="text/javascript">$('#datepick #time2 input').ptTimeSelect({ popupImage: '<img alt="Select" src="../images/icon_clock_2.gif" style="border-right: 0px; border-top: 0px;    border-left: 0px; border-bottom: 0px" />'
}); </script>
<input id="s2Time2" runat="server" name="s2Time2" readonly="readonly" style="width: 60px" />
</div></div>

I did the same thing here, except that the big div is now called "datepick"

.

Basically, how can this be done. You can of course select these dumpers directly with an id via a selector, without creating any other divs or anything as you gave them different names.

+1


a source






More articles:


All Articles