Using keyboard on multiple fotorama slideshows - javascript

I've an HTML page with two Fotorama slideshows, one in the top and another in the bottom of the page.
I can't use the keyboard to move between photos for the second slideshow, even if I click with the mouse on the second slideshow trying to get the focus.
I tried also with the API with no results.
Here's the code:
<!-- Link to jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- fotorama.css & fotorama.js. -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet"> <!-- 3 KB -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
<!-- First slideshow -->
<div id="fotorama1" class="fotorama" data-keyboard="true" data-arrows="true">
<img src="http://s.fotorama.io/1.jpg">
<img src="http://s.fotorama.io/2.jpg">
<img src="http://s.fotorama.io/3.jpg">
</div>
<!-- Second slideshow -->
<div id="fotorama2" class="fotorama" data-keyboard="true" data-arrows="true">
<img src="http://s.fotorama.io/4.jpg">
<img src="http://s.fotorama.io/5.jpg">
<img src="http://s.fotorama.io/1.jpg">
</div>
Can anyone suggest me a solution?
Thanks in advance,
Luca

Related

Why my OwlCarousel2 banner isn't working?

In my main tag, I have implement the images for my slide banners.
<main id="main-site">
<!-- Owl Carousel code-->
<section id="banner-area">
<div class="owl-carousel owl-theme">
<div class="item">
<img src="./images/banner.png" alt="Banner1">
</div>
<div class="item">
<img src="./images/banner2.png" alt="Banner2">
</div>
</div>
</section>
</main>
and I have initialize the Owl Carousel on Javascript.
$(document).ready(function() {
$("#banner-area.owl-carousel").owlCarousel( {
dots: true,
items: 1
});
});
And linked the javascript and also the Owl Carousel jQuery plugin to access the javascript file.
<!--Owl Carousel JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"
integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!--Custom JS-->
<script src="./index.js"></script>
But even after all these. I still didn't get any banner on my page... what's the problem?
Screenshot
Edit: I was able to fix it. but I only can fix it when I delete the #banner-area, but I wish to fix it without deleting the id.
You should add a space here :
$("#banner-area .owl-carousel").owlCarousel( {

How to open a modal on an element when the page loads?

I am trying to call the specific link id #ext when page loads instead of clicking it manually to show the modal popup. However I am not able to achieve it. Can someone look into code and suggest a change?
<!-- Modal HTML embedded directly into document -->
<div id="ex1" class="modal">
<img src="image.jpg" />
</div>
<!-- Link to open the modal -->
<p>Open Modal</p>
The above code works fine when I do click on the link on the page "Open Modal". I want it to be called when page is loaded to show popup auto.
JSfiddle
Just for reference I am using this to show a modal popup: https://jquerymodal.com/
From the documentation:
You can manually open a modal by calling the .modal() method on the element:
As such you just need to call the modal() method on $('#ex1') when the page loads:
jQuery(function($) {
$('#ex1').modal();
});
jQuery(function($) {
$('#ex1').modal();
});
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css">
<div id="ex1" class="modal">
<img src="image.png" />
</div>
<p>
Open Modal
</p>

jQuery Load Divs Broken

I am trying to create an HTML order type page with 3 buttons using jQuery Mobile:
Pick Up
Drop Off
Ship It
I've created the buttons and placed them properly on the page. Now, I'd like to display a unique form based on which button is clicked by the user.
Taking a look at examples it appears my options are jQuery, AJAX or Javascript. I'm already using jQuery so I tried going that route with no luck. Having added in the load HTML and JS Alert... my page will completely ignore the loading of HTML, but still display the alert. I've verified that my divs are properly named and that each link has a proper id set. So I gave up on jQuery for a bit.
On to javascript... add my logic in the between tags and again... it ignores loading of HTML content. I've tried putting things in divs, renaming divs, moving my form code to a seperate .html and .txt, but still no luck. I found a working example here and tried forcing its code into my page. Again, it does not load anything on button click when included in my page. (I'm using Chrome Version 35.0.1916.153)
Currently, the code for my page is as follows:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Order Type</title>
<script type="text/javascript">
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
sel[i].style.display = 'none';
}
document.getElementById('result'+idInfo).style.display = 'block';
}
</script>
<link rel="stylesheet" href="assets/css/pp_mis_oa.css" />
<!-- Standard jQquery Mobile themes can be created and replaced, to apply universal styling -->
<!-- Go to: http://jquerymobile.com/themeroller/index.php to build one, and download it to the themes directory. -->
<link rel="stylesheet" href="themes/jqm-test/theme.min.css" />
<!-- Do not edit or remove the following jQuery framework files. -->
<link rel="stylesheet" href="lib/jquery.mobile.structure-1.3.1.min.css" />
<script src="lib/jquery-1.9.1.min.js"></script>
<script src="lib/jquery.mobile-1.3.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.4.min.js" type="text/javascript"></script>
</head>
<body>
<!-- Start Main Landing Page -->
<div data-role="page" data-theme="b" class="has_footer">
<div data-role="content">
<p>
<div id="buttonDiv" data-role="navbar">
<ul>
<li>Pick Up</li>
<li>Drop Off</li>
<li>Ship It</li>
</ul>
</div><!-- /navbar -->
<div id="result" style="clear:both;"></div>
</div> <!-- End Content Div -->
<!-- start footer -->
<div data-role="footer" data-position="fixed" data-id="footer-nav" data-theme="d" class="footer-bar">
<div class="ui-grid-solo">
<div class="ui-block-a"><button type="v" data-theme="b">Continue</button></div>
</div>
</div><!-- end footer -->
</div>
<!-- End Main Landing Page -->
<div id="divLinks">
<div id="container1">Container #1<p>Whole bunch of text 1</div>
<div id="container2">Container #2<p>Whole bunch of text 2</div>
<div id="container3">Container #3<p>Whole bunch of text 3</div>
</div>
</body>
What is going on here that jQuery/Javascript refuse to load in my content to my divs? Can someone help point me in the right direction?
Thank you!
If you wanted to do this with jQuery, you could change your showDiv function to the following:
function showDiv(idInfo) {
//hide all divs
$('#divLinks div').each(function() { $(this).hide(); });
//show the one selected
$('#container'+idInfo).show();
}
To move content from your "container" divs to your "result" div:
function showDiv(idInfo) {
//populate "result" div with selected content
$('#result').html($('#container'+idInfo).html());
}
I think you're trying to show divs with ids "result"+IdInfo where your div ids are container1, container2 and container3, so you should replace:
document.getElementById('result'+idInfo).style.display = 'block';
for
document.getElementById('container'+idInfo).style.display = 'block';
Also keep in mind that loading all the forms in the html (even if they are hidden) is not a good practice, so someone could see what he doesn't have to (and also can submit it). Consider to use some dynamic language (such PHP) to load only the form needed as the user type.

Colorbox doesn't open on second click

I have strange problem with colorbox, the code I have is like:
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.colorbox-min.js"></script>
<img
src='/someimage.jpg' height="100px" width="100px"
onclick='$.colorbox({inline:true, href:"#inline_content"});' />
<!-- This contains the hidden content for inline calls -->
<div style='display:none'>
<div id='inline_content' style='padding:10px; background:#fff;'>
Some test inline
</div>
</div>
So, first time I click, it fades the page and opens me hidden content as popup, but when I close that popup, then click on the image again, second and all further times, it just fades the page, but doesn't show me popup with hidden content. What it could be? Appreciate any help. Thanks!
Found the problem, I used minified version
<script src="jquery.colorbox-min.js"></script>
when I changed to normal version
<script src="jquery.colorbox.js"></script>
it started to work.

Nivo Slider transitions not rendering correctly and increase in web page length

I am developing an application in Rails 3.2 and trying to add a Nivo Slider to the front page. After it loads, the transitions look like this. Other transitions have similar distortions.
When the first transition occurs, the length of the page increases by thousands of pixels. I've determined that it is the #slider div that is increasing in size. This resets occasionally, but then I see it redraw the thousands of pixels down again.
The div containing the Nivo Slider:
<div id="content">
<link href="/assets/nivo-slider-themes/default/default.css?body=1" media="screen" rel="stylesheet" type="text/css" />
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<img src="assets/index_slider_1.jpg">
<img src="assets/index_slider_2.jpg">
<img src="assets/index_slider_3.jpg">
</div>
<div id="htmlcaption" class="nivo-html-caption">
</div>
</div>
I am using the default packaged CSS files that come with Nivo Slider 3.1.
JSFiddle containing the problem
What is causing the transition corruption, and the increase in page length due to the slider div's length increasing?
The CSS file you are using from Nivo is causing the bug. I grabbed a stylesheet from one of the Nivo examples and updated the jsfiddle to this: http://jsfiddle.net/ppDhT/
<link rel='stylesheet' id='nivoslider-css' href='http://nivo.dev7studios.com/wp-content/plugins/nivo-slider/scripts/nivo-slider/nivo-slider.css?ver=3.4.2' type='text/css' media='all' />

Categories