Showing posts with label slider. Show all posts
Showing posts with label slider. Show all posts

Wednesday, January 31, 2018

How do I include a Jquery UI slider in my view?

By Hường Hana 3:00 PM , , , , Leave a Comment

I'm trying to incorporate a slider (http://simeydotme.github.io/jQuery-ui-Slider-Pips/#installation) into my view, which is supposedly part of jquery-ui. I have these in my Gemfile

gem 'jquery-rails' gem 'jquery-ui-rails'

And when i open Gemfile.lock I see

jquery-rails (4.3.1)   rails-dom-testing (>= 1, < 3)   railties (>= 4.2.0)   thor (>= 0.14, < 2.0) jquery-ui-rails (6.0.1)   railties (>= 3.2.16)

But although I have this HTML on my page

<div class="slider"></div>

and I include this Javascript

$('.slider').slider().slider('pips');

I get the JS console error

Uncaught TypeError: $(...).slider is not a function

when my page loads. The documentation says I have to include jQuery 2.1.1 and Jquery UI 2.1.1. I can't tell if I'm doing that properly or not.

Edit: Including content of app/assets/application.js in response to answer given ...

//= require jquery //= require jquery_ujs //= require turbolinks //= require_tree .

2 Answers

Answers 1

Seems everything is ok, you need some customization like on the assets/application.js top of the file add sorting like

//= require jquery //= require jquery_ujs

Make sure jquery not rendering twice and your slider library include properly then edit your slider JS like below

(function($){     "use strict";     $(document).on('ready', function(){         $('.slider').slider().slider('pips');     }); });

Or like below

$(document).on('turbolinks:load', function(){     $('.slider').slider().slider('pips'); });

For refactoring you can use this js on the same page underneath where your slider using <script type="text/javascript"> .... </script> tag

Restart the server after implementing this

Hope it helps

Answers 2

Try this instead: Include the js from within the html

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

See if it works after that.

Read More

Wednesday, March 30, 2016

HTML5 video won't work with jquery bxSlider plugin on iPad

By Hường Hana 12:00 PM , , , Leave a Comment

I'm using the Jquery bxSlider plugin to create a slider gallery of images and video for the iPad. I'm using the HTML5 video tag for video implementation:

<video width="400" height="260" controls> <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> </video>

Video source code works fine on iPad when on its own, however when merged with slider markup, the video does not play.

Test link: http://www.ekimmedia.com/totem/TIC/MG/

If I remove this script:

<script src="js/jquery.bxSlider.js" type="text/javascript"></script>

from the source code, the video then works on iPad.

Test link with bxSlider script removed: http://www.ekimmedia.com/totem/TIC/MG/index10.html

Not sure what is causing the conflict.

Thanks,

3 Answers

Answers 1

The only way how I get this slider to work was to download it locally from the bxslider official website. And try to follow their tutorial on how to make responsive video slider. They do not mention anywhere about these arrow images as they do not come in the css. So, remember to grab an images folder from the downloaded bxslider zip and paste it into js folder of your project.

In my final setup I have had 4 local files in js folder: jquery-2.2.2.min.js, jquery.bxslider.css, jquery.bxslider.js and jquery.fitvids.js. js folder also included images subfolder where were controls.png and bx_loader.gif.

This all was then referenced in HTML file as follows:

<head>   <link rel="stylesheet" href="js/jquery.bxslider.css">   <script src="js/jquery-2.2.2.min.js"></script>   <script src="js/jquery.fitvids.js"></script>   <script src="js/jquery.bxslider.js"></script>   <script type="text/javascript">     $(document).ready(function () {     $('.bxslider').bxSlider({     video: true,     useCSS: false     });     });   </script> </head> <body>     <ul class="bxslider">         <li>             <iframe src="YOUR_LINK_TO_VIDEO" width="400" height="260" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>         </li>         <li>             <iframe src="YOUR_LINK_TO_VIDEO" width="400" height="260" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>         </li>     </ul> </body>

I have tested my solution on iOS device and everything seems to work fine. There is somewhat similar solution to this problem, you can also look into it.

Answers 2

Try viewing the video element with a debugging tool like firebug or safari developer tools. You may have to use a PC/Mac browser to do this. See if the video element loses any attributes, or gets extra things added after your jquery script runs. Having done some mobile development involving videos I can tell you it is very touchy, especially since there are approximately 82 billion different browsers and OS versions floating around on mobile devices. If you see that the video element is changed, then you will need to add a script that takes it back to something viewable on your iPad.

You might also make sure your videos are wrapped correctly. It looks like this slider script requires the following format:

<div id="slideshowcontainer">  <div>slide1 content</div>  <div>slide2 content</div>  <div>etc...</div> </div>  OR  <ul id="slideshowcontainer">  <li>slide1 content</li>  <li>slide2 content</li>  <li>etc...</li> </ul>

Answers 3

Try to change the position of 

 `<script src="js/jquery.bxSlider.js" type="text/javascript"></script>`

my be it is due to confliction of libraries, put it in middle of all scripts or in bottom or anywhere elc, i am sure it gona work.

Read More