Uncaught TypeError: view.css is not a function

Question

I am trying to scroll div using button. I am using this solution to resolve my problem. However I am getting error Uncaught TypeError: view.css is not a function. I added jquery plugins but still got this error.

Here is my code

<div class="bstimeslider">
<div id="rightArrow"></div>
    <div id="viewContainer">
        <div id="tslshow">
        <?php foreach($activity_data as $list):?>        
         <div class="bktibx">
          <div>
           <?php 
           if (isset( $list['coverimage']) && $list['coverimage']!=""){
            echo '<img src="'.$list["coverimage"].'" height="90" width="80" >';
          }else {
            echo '<img src="'.WEBSITE_URL.'views/site/activity_placeholder.png" height="90" width="80" >';
          } ?>
       </div>
     <div>
     <h4><a style="font-size: 20px;font-weight: bold;color:#48a4ca" href="<?php echo WEBSITE_URL ;?>site/eventDetail/<?php echo $list['_id']; ?>"><?php echo $list['title']; ?> </a></h4>
  <?php
  $ro= strlen($list['description']);
    if($ro >100){
      $small = substr($list['description'], 0, 100);
      echo  $small."...";
    } else {
      echo   strip_tags($list['description']);
    }
  ?>    
 </div>
</div>
<?php endforeach; ?>
</div>
    </div>
    <div id="leftArrow"></div>
</div>

and jquery

<script type="text/javascript">

    var view = $("#tslshow").attr('id');
    var move = "100px";
    var sliderLimit = -750

    $("#rightArrow").click(function(){
      var currentPosition = parseInt(view.css("left"));
      if (currentPosition >= sliderLimit) 
       view.stop(false,true).animate({left:"-="+move},{ duration: 400})
    });
    $("#leftArrow").click(function(){
      var currentPosition = parseInt(view.css("left"));
      if (currentPosition < 0) 
        view.stop(false,true).animate({left:"+="+move},{ duration: 400});
   });
</script>

When i click on button I got error saying Uncaught TypeError: view.css is not a function.

view is not a jquery object. Wrap it in $(view) to access jquery lib methods. — abhishekkannojia
– abhishekkannojia, Commented May 24, 2017 at 10:02
while you use Id you don't need to use var view = $("#tslshow").attr('id'); enough to use var view = $("#tslshow"); — Mohamed-Yousef
– Mohamed-Yousef, Commented May 24, 2017 at 10:03
$ is not defined this error mean jquery is not included .. but its unlogic to get Uncaught TypeError: view.css is not a function then you get $ is not defined if jquery not included you should get $ is not defined first — Mohamed-Yousef
– Mohamed-Yousef, Commented May 24, 2017 at 10:08

Mohamed-Yousef · Accepted Answer · 2017-05-24 10:33:58Z

1

1st: You need to be sure to include jquery if you don't have jquery file you can use this line on <head> or before </body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

2nd: You need to wrap your code after document ready .. like this

$(document).ready(function(){
   // code here
});

3rd: About your code

var view = $("#tslshow").attr('id'); // will output tslshow string not an object and while you use id you can just use `var view = $("#tslshow");`

about view.css("left") may be you need to set left to your element on css so if you decide to use view = $("#tslshow").attr('id'); you will use $('#'+view).css('left') and if you will use var view = $("#tslshow"); you will use view.css('left');

answered May 24, 2017 at 10:33

Mohamed-Yousef

24k3 gold badges21 silver badges28 bronze badges

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

Comments

RAUSHAN KUMAR · Accepted Answer · 2017-05-24 10:01:33Z

1

replace this

var currentPosition = parseInt(view.css("left"));

with

var currentPosition = parseInt($(view).css("left"));

answered May 24, 2017 at 10:01

RAUSHAN KUMAR

6,0345 gold badges38 silver badges70 bronze badges

Comments

Super User · Accepted Answer · 2017-05-24 10:06:10Z

0

You can use following code

var currentPosition = parseInt($("#tslshow").css("left"));

or

var view = "#tslshow";
var currentPosition = parseInt($(view).css("left"));

or

var currentPosition = parseInt($(view).css("left"));

answered May 24, 2017 at 10:06

Super User

9,6623 gold badges34 silver badges48 bronze badges

Comments

Sivasankar · Accepted Answer · 2017-05-24 10:17:17Z

0

Change var view = $("#tslshow").attr('id'); at Line no 1 to

var view = $("#tslshow");

You don't need the actual id. You just need a jQuery object to perform .css function call.

answered May 24, 2017 at 10:17

Sivasankar

8019 silver badges22 bronze badges

Comments

Bablu · Accepted Answer · 2017-05-24 10:46:25Z

0

Yeah I found my solution. I need to use some jquery plugins.

<script src="<?=WEBSITE_URL?>views/theme/_layout/js/animations/animate.js"></script> <script src="<?=WEBSITE_URL?>views/theme/_layout/js/viewport/jquery.viewport.js"></script>

That's all required to solve it

answered May 24, 2017 at 10:46

Bablu

45919 silver badges37 bronze badges

Collectives™ on Stack Overflow

Uncaught TypeError: view.css is not a function

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related