I am using owl carousel as a slider but sometimes when the page loads the slider is not displayed. Inspect element tells me that the slider it's missing some styles. I have included the styles in the head of my page. I included jquery and then the owl carousel link. I am getting the data for the carousel with AJAX.
This is the code
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
<script defer="defer" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js">
</script>
$(document).ready(function(){
$("#testimonial-slider").owlCarousel({
items:3,
itemsDesktop:[1000,3],
itemsDesktopSmall:[980,2],
itemsTablet:[768,2],
itemsMobile:[650,1],
pagination:true,
navigation:false,
slideSpeed:1000,
autoPlay:true
});
});
</body>
No style is missing on the code you shared, the problem lies somewhere else
$(document).ready(function(){
$("#testimonial-slider").owlCarousel({
items:3,
itemsDesktop:[1000,3],
itemsDesktopSmall:[980,2],
itemsTablet:[768,2],
itemsMobile:[650,1],
pagination:true,
navigation:false,
slideSpeed:1000,
autoPlay:true
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
</head>
<body>
<script defer="defer" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js">
</script>
<div id="testimonial-slider">
<div> Slide 1</div>
<div> Slide 2 </div>
<div> Slide 3 </div>
</div>
</body>
Related
I have already tried but could not find any answer to my question.
I want to use a semantic modal,the first, this!
my imports are:
<link rel="stylesheet" type="text/css" href="moduli/semantic/dist/semantic.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="moduli/semantic/dist/components/modal.css">
<link rel="stylesheet" type="text/css" href="moduli/semantic/dist/components/modal.min.css">
<script type="text/javascript" src="moduli/semantic/dist/semantic.min.js"> </script>
<script type="text/javascript" src="moduli/semantic/dist/main.js"></script>
<script type="text/javascript" src="moduli/semantic/dist/jquery.min.js"> </script>
<script type="text/javascript" src="js/function.js"></script>
<script type="text/javascript" src="moduli/jquery-ui/jquery-ui.js"></script>
<script src="moduli/semantic/dist/components/modal.min.js"></script>
Error on console :
modal.min.js:11 Uncaught TypeError: O.transition is not a function
modal.min.js:11 Uncaught TypeError: q.dimmer is not a function
when I click on a button, I call the follow js function:
$('.ui.modal')
.modal({onShow: function(){}})
.modal('show');
I think that your error simply comes from the order of your <script> imports, since semantic.min.js depends on jQuery you must include jQuery before semantic.min.js
So use:
...
<script type="text/javascript" src="moduli/semantic/dist/jquery.min.js"></script>
<script type="text/javascript" src="moduli/semantic/dist/semantic.min.js"></script>
<script type="text/javascript" src="moduli/semantic/dist/main.js"></script>
...
Instead of:
...
<script type="text/javascript" src="moduli/semantic/dist/semantic.min.js"></script>
<script type="text/javascript" src="moduli/semantic/dist/main.js"></script>
<script type="text/javascript" src="moduli/semantic/dist/jquery.min.js"></script>
...
You can see the working sample there:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<input type="button" value="showModal" onClick="$('.ui.modal').modal('show');"></input>
<div class="ui modal">
<div class="header">Header</div>
<div class="content">
<p>some Content</p>
<p></p>
<p></p>
</div>
</div>
Hope it helps,
I have got this html div
<div id="CropToolDiv"></div>
And this Jquery
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#CropToolDiv').draggable();
$('#CropToolDiv').resizable();
});
</script>
But it gives an error
$(...).draggable is not a function
What am i doing wrong?
Put your code
<script type="text/javascript">
$(document).ready(function() {
$('#CropToolDiv').draggable();
$('#CropToolDiv').resizable();
});
</script>
At the bottom of the page.. See -- It works here
FIDDLE
Hi so I'm trying to like a javascript file to my web page, when it was in the HTML file it worked fine, but I won't to neaten it up a little by putting the JS in a different file
HTML:
<head>
<meta charset="utf-8" />
<title>Digital Canvas Web Designs</title>
<link rel="stylesheet" href="/CSS/Template.css"/>
<link rel="stylesheet" href="/CSS/news.css"/>
<link rel="shortcut icon" href="images/tablogo.ico" > <!-- tab logo generated at http://www.favicongenerator.com/ -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="Javascript/newshide.js" type="text/javascript"></script>
</head>
<body>
and Javascript:
<script type="text/javascript">
$(document).ready(function(){
$("#show").click(function() {
$("#hidden").show();
});
$("#hide").click(function() {
$("#hidden").hide();
});
});
</script>
And the part of HTML where the JS should work.
<span id="show">more>></span>
<p id="hidden" hidden>COOL STORY BRO
<span id="hide">less</span> </p>
wrap all into document.ready
<script type="text/javascript">
$(document).ready(function(){
$("#show").click(function() {
$("#hidden").show();
});
$("#hide").click(function() {
$("#hidden").hide();
});
});
</script>
Also: you have another bug, change the last script for:
<script src="Javascript/newshide.js" type="text/javascript"></script>
Docs
Change this
<script src=".\Javascript\newshide.js" type="text/javascript"></script>
To this
<script src="Javascript/newshide.js" type="text/javascript"></script>
I cant get the greenbar to slidedown when the page loads. Can anyone tell me what's wrong with my code?
HTML
<html>
<head>
<title>
Live Green Plants
</title>
<link rel="stylesheet" type="text/css" href="home.css">
<script src="home.js"></script>
</head>
<body>
<div class="headerBar">
<img src="headerBar.png" width="657" height="34" alt=""/>
</div>
<script type="text/javascript" src="Script/jquery-1.9.2.min.js"></script>
<script type="text/javascript" src="Script/jquery-ui-1.8.18.min.js"></script>
</script>
</body>
</html>
Javascript
$(document).ready(function(){
$('.headerBar').slideDown('slow');
});
It needs to start off as invisible, using style="display:none"
See it in action: http://jsfiddle.net/jas6H/5/
I have a problem when I using slider and nivo lightbox together in one php file.
Ok, I have this code:
<script type="text/javascript" src="js/slider/jquerySlider.min.js"></script>
<script type="text/javascript" src="js/slider/jquery.mobile.customized.min.js"></script>
<script type="text/javascript" src="js/slider/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/slider/camera.min.js"></script>
<script>
jQuery(function(){
jQuery('#camera_wrap_1').camera({
thumbnails: false,
loader: 'bar',
pagination: false,
height: '300px',
});
});
</script>
<!--Nivo LightBox-->
<link rel="stylesheet" href="css/nivo-lightbox.css" type="text/css" />
<link rel="stylesheet" href="themes/default/default.css" type="text/css" />
<script type="text/javascript" src="js/nivoLightbox/jquery.min.js"></script>
<script type="text/javascript" src="js/nivoLightbox/nivo-lightbox.min.js"></script>
<script>
$(document).ready(function(){
$('a').nivoLightbox();
});
</script>
Now it's working only Nivo Lightbox, slider doesn't work. If I delete row with
src="js/nivoLightbox/jquery.min.js, slider now working and the lightbox doesn't.
I think that jQuerySlider.min.js is another version of jquery.min.js. In general, all two scripts are some versions of jQuery library. When I both delete and replaced it one, the newest, it still doesn't work.
Please can anyone rewrite this code to working solution?
you can find your solution below..
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/slider/jquery.mobile.customized.min.js"></script>
<script type="text/javascript" src="js/slider/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/slider/camera.min.js"></script>
<!--Nivo LightBox-->
<link rel="stylesheet" href="css/nivo-lightbox.css" type="text/css" />
<link rel="stylesheet" href="themes/default/default.css" type="text/css" />
<script type="text/javascript" src="js/nivoLightbox/nivo-lightbox.min.js"></script>
<script>
$(document).ready(function(){
$('#camera_wrap_1').camera({
thumbnails: false,
loader: 'bar',
pagination: false,
height: '300px',
});
$('a').nivoLightbox();
});
</script>