using 2 jquery in one page 2nd jquery ul and li class and style get change

Question

My 1st jquery .css

ol,ul
{
list-style: none;
padding: 0;
margin: 0 auto;
width: 42em;
height: 28em;
}
li
{
height: 24em;
width: 24em;
text-align: center;
cursor: pointer;
}
li img
{
width: 100%;
}
li.roundabout-in-focus
{
cursor: default;
}
li span
{
display: block;
padding-top: 6em;
}
#carbonads-container 
.carbonad
{
margin: 0 auto;
}

.html code

<script src="js/jquery_002.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script language="javascript">
    $(document).ready(function () {
        $('ul').roundabout();
    });
</script>
<ul class="roundabout-moveable-item roundabout-in-focus" style="padding: 0px; position: relative;">
<li style="position: absolute; opacity: 1; z-index: 280;" class="roundabout-moveable-item">
<img src="img1.jpg" /></li></ul>

Note:

repeat 5 li tag with image, display like this enter image description here

and its working fine

But in same page i have used another jquery and its .css class is

.slider {
float:left;
left: -5000px; 
margin:10px; 
position:relative; 
visibility:hidden;  
}   
.slider ul.menu {
height:100px;
width:990px; 
}
.slider ul.menu li.menu1 {
padding:0px 4px 0px 4px;
}
.slider ul.menu li.menu1 img {
cursor:pointer;
height:110px; 
padding-top:0px;
width:177px;  
 }

.html code is

<script type="text/javascript" src="js1/jcarousellite_1.0.1.pack.js"></script>
<script type="text/javascript" src="js1/captify.tiny.js"></script>
<script type="text/javascript">
    $(function () {
        $(".slider").jCarouselLite({
            btnNext: ".next",
            btnPrev: ".prev",
            visible: 5
        });
    });

    $(document).ready(function () {
        $('img.captify').captify({               
            speedOver: 'fast',
});
    });

</script>

 <div class="slider">
<ul class="menu">
<li class="menu1">
<img src="images/gallery1/1.jpg" border="0" alt="" /></li></ul></div>

Note: Repeat li tag and it seems as slider

but on inspect element i see above ul class as class="menu roundabout-holder" and li class as class="menu1 roundabout-moveable-item roundabout-in-focus" and with different style and 2 nd script is not working

score 0 · Accepted Answer · answered Oct 28 '13 at 08:01

0

Change the code in your first html file so the javascript code looks like:

$(document).ready(function () {
    $('ul.roundabout-moveable-item').roundabout();
});

Now, the roundabout plugin will only affect the list with class '.roundabout-moveable-item' and will not touch the list with class '.menu'.

answered Oct 28 '13 at 08:01

Tomasz Nguyen

2,561
22
25

yes its working but in here style is showing as style="overflow: hidden; float: left; width: 384px; height: 384px;" but it should be seem as style="overflow: hidden; float: left; width: 177px; height: 115px;" here width and height gets clash this is of li – Mitesh Jain Oct 28 '13 at 08:09
and ul style is seeming as style="margin: 0px; padding: 0px; position: relative; list-style-type: none; z-index: 1; width: 5880px; left: -1960px;" instead of style="margin: 0px; padding: 0px; position: relative; list-style-type: none; z-index: 1; width: 2775px; left: -925px;" – Mitesh Jain Oct 28 '13 at 08:11
Good point. Put the '.roundabout-moveable-item' class in front of the ul, ol, and li selectors in your first css file like: .roundabout-moveable-item ol, .roundabout-moveable-item ul, and .roundabout-moveable-item li et cetera. So, the classes in your first css file only affect the list elements of the .roundabout-moveable-item list. – Tomasz Nguyen Oct 28 '13 at 08:16
will u???? http://stackoverflow.com/questions/17124349/call-script-or-css-style-in-the-update-panel – Mitesh Jain Oct 28 '13 at 08:30
Could you send me the html output of the html/asp.net script? – Tomasz Nguyen Oct 28 '13 at 08:43
hey i have now new problem held in same question....my upper script is now not working – Mitesh Jain Oct 28 '13 at 08:44
Change 'roundabout-moveable-item li' to '.roundabout-moveable-item li'. 'li span' should probably be '.roundabout-moveable-item li span'. You have to test the latter. – Tomasz Nguyen Oct 28 '13 at 08:47
I think I see the problem. '.roundabout-moveable-item' is probably reserved by the roundabout plugin. What if you modify '.roundabout-moveable-item' to '.rabout' (or something else) in your css and replace 'ul.roundabout-moveable-item' by 'ul.rabout' in your javascript. I think that should work. – Tomasz Nguyen Oct 28 '13 at 08:56
on changing 'ul.roundabout-moveable-item' by 'ul.rabout' script gets off completely...and on '.roundabout-moveable-item' to '.rabout' same result – Mitesh Jain Oct 28 '13 at 09:27
Add 'rabout' to your html as well: ul class="rabout roundabout-moveable-item ..." – Tomasz Nguyen Oct 28 '13 at 09:35
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/40105/discussion-between-mitesh-jain-and-tomasz-nguyen) – Mitesh Jain Oct 28 '13 at 09:49

Mitesh Jain · Answer 2 · 2013-10-28T10:03:22.517

in .css i have done

  ol.rabout, ul.rabout
 {
list-style: none;
padding: 0;
margin: 0 auto;
width: 42em;
height: 28em;
}
.rabout li
{
height: 24em;
width: 24em;
text-align: center;
cursor: pointer;
}
 .rabout li img
{
width: 100%;
}
.rabout li.roundabout-in-focus
 {
cursor: default;
 }
.rabout li span
{
display: block;
padding-top: 6em;
}

and .html as

 <script language="javascript">
    $(document).ready(function () {
        $('ul.rabout').roundabout();
    });
</script>

and down slider works well but mu upper j query now seems as

enter image description here

using 2 jquery in one page 2nd jquery ul and li class and style get change

2 Answers2