1

want to change the width of class owl-item in jquery. How to do that. Kindly help.

Please see the link

link

I need to reduce the width of the box. Please suggest

I am adding the the javascript for your reference:-

Please see the JS code so we can get an idea:-

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/owl.carousel.js"></script> <script type="text/javascript"> $(document).ready(function () { var owl = $("#owl-demo"), status = $("#owlStatus"); owl.owlCarousel({ navigation: true, afterAction: afterAction }); function updateResult(pos, value) { status.find(pos).find(".result").text(value); } function afterAction() { updateResult(".owlItems", this.owl.owlItems.length); updateResult(".currentItem", this.owl.currentItem); updateResult(".prevItem", this.prevItem); updateResult(".visibleItems", this.owl.visibleItems); updateResult(".dragDirection", this.owl.dragDirection); } }); $(document).ready(function () { var owl = $("#owl-demo1"), status = $("#owlStatus1"); owl.owlCarousel({ navigation: true, afterAction: afterAction }); function updateResult(pos, value) { status.find(pos).find(".result").text(value); } function afterAction() { updateResult(".owlItems", this.owl.owlItems.length); updateResult(".currentItem", this.owl.currentItem); updateResult(".prevItem", this.prevItem); updateResult(".visibleItems", this.owl.visibleItems); updateResult(".dragDirection", this.owl.dragDirection); } }); </script>
Improve this question
4
  • i suggest doing a tutorial: try.jquery.com Commented Jan 15, 2015 at 13:25
  • $('.owl-item').width(250); // or whatever Commented Jan 15, 2015 at 13:26
  • @Andy: Sure will do that, but for this situation what Shd I do Commented Jan 15, 2015 at 13:26
  • @salniro: where shd I change that ? Commented Jan 15, 2015 at 13:27

4 Answers 4

Reset to default
1

You can get all the elements of a class like this: 

 $('.owl-item').css('width', '200px'); //Choose whichever new width you want

If you want a specific one then you need to assign an id attribute and choose that one specifically using $('#elementID')...

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

where should I add this ?
@Nadeem Wherever you need to do so. When do you need to apply this change? when the page loads/after you click something/etc.. ?
@Nadeem Yes, this is JQuery, you can run it whenever other JQuery code runs.
I added it, but nothing is happening
@Nadeem You can add it as the first line after $(document).ready(function () {, but if you do that then why not just change the initial width ?
0

use:

 $(document).ready(function(){ $('.owl-item').css('width','300px'); });

you need to put jquery inside the $(document).ready block

Improve this answer

Comments

0 
// only did first because `.owl-item` is a class. if more targeted selection is needed, use an ID instead var $el = $('.owl-item:first'), elW = $el.width(); function reduceWidthOfOwlItemFuntion(amt) { elW -= amt; $el.width(elW); }
Improve this answer

Comments

0

Do you want an onclick function on page load? what? Please be more specific to your needs. 

 <script> $(".owl-item").css({width: '100'}); </script>

Why cant you just set the width using CSS?

Change '100' to your desired px width. Add this anywhere on your page, in your js file etc. Make sure you have the jQuery library installed either through an external link or within your root directory

Improve this answer

Comments