I have an owl carousel,
The navigation on it looks like this:
I want to make only two navigation buttons that look like this:
I tried to do addinf this line :
$(".owl-carousel").owlCarousel({
navigation: true,
navigationText: ["<img src='resources/img/arrow-left.png'>","<img src='resources/img/arrow-right.png'>"]
});
But it doesn't work. Is there a way that I can delete one of the dots and make the other two apear like in the picture.
Add this
<script type="text/javascript">
jQuery(document).ready(function()
{
jQuery('.owl-carousel').owlCarousel({
loop:true,
dots:false,
nav:true,
});
});
</script>
Another Solution is just remove *= require owl.theme this css
and keep only navigation: true
$(".owl-carousel").owlCarousel({
navigation: true
});
Related
I'm using FullCalendar and I just integrated tippyJs for popover. It is having layout issues related to what seems to be zIndex. I have attached the Screenshot of my problem. You can see that popover is hiding behind the event wrapper. plus it is also not clickable. I can use some help in showing complete popover box above anything. Your help is greatly appreciated. Thanks
tippy(arg.el, {
content: ReactDOMServer.renderToStaticMarkup(
//my html for popover
),
allowHTML: true,
placement: 'auto',
interactive: true,
theme: 'light',
zIndex: 9999,
});
tippy v6.x has prop appendTo read here
so you can try appendTo: () => document.body
tippy(arg.el, {
content: ReactDOMServer.renderToStaticMarkup(
//my html for popover
),
allowHTML: true,
placement: 'auto',
interactive: true,
appendTo: () => document.body,
theme: 'light',
zIndex: 9999,
I don't know if you found a solution about it but I had the same problem. The library (CSS) was badly imported for tippy.js and popper.
So I just had to add the cdn file in the index.html and all worked fine.
I had these files in index.html
<!-- Development -->
<script src="https://unpkg.com/popper.js#1"></script>
<script src="https://unpkg.com/tippy.js#5"></script>
<!-- Production -->
<script src="https://unpkg.com/popper.js#1"></script>
<script src="https://unpkg.com/tippy.js#5/dist/tippy-bundle.iife.js">
tippy(arg.el, {
content: ReactDOMServer.renderToStaticMarkup(
//my html for popover
),
allowHTML: true,
placement: 'auto',
theme: 'light',
zIndex: 9999,
});
Remove the interactive params, it should normaly works :)
How would I loop over some links in a div and apply the Bootstrap tooltips to them based on their title text. So for example I would need this:
Link 1
Link 2
Link 3
To become this:
Link 1
Link 2
Link 3
Check it:
$('a').each(function () {
$(this).data('toggle', 'tooltip');
$(this).data('placement', 'bottom');
$(this).tooltip()
});
//for disable :
$('a').each(function () {
$(this).removeAttr("data-toggle");
$(this).removeAttr("data-placement");
$(this).tooltip('disable');
});
Try this:-
$('a').each(function(){
$(this).attr({
'data-toggle': 'tooltip',
'data-placement': 'bottom',
}).tooltip();
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Link 1
Link 2
Link 3
I am trying to change the CSS on specific elements inside the page (since I need them to be different on specific pages) Trying to do this to no avail.
<script>
$(document).find('#nav-icon span').css({
'background-color': '#333'
});
$(document).find('.screen-nav li a').css({
'color': '#fff'
});
$(document).find('.screen-nav li a:after').css({
'background-color': '#fff'
});
</script>
However you are trying to find the html element from document which runs before DOM is ready. Therefore you need to bind you find function after DOM is ready and jquery script should be with in document.ready function and try to change css property from jQuery like this:
HTML
<nav class="screen-nav">
<ul>
<li>AA</li>
<li>BB</li>
<li>CC</li>
<li>DD</li>
</ul>
</nav>
JQUERY
$(document).ready(function(){
$('.screen-nav li a').css({
"background-color": "yellow",
"font-size": "200%",
"color":"#000"
});
});
Working demo here
Its better to execute these CSS changes after the document has completed loading.
$(document).ready(function(){
$(document).find('#nav-icon span').css({
'background-color': '#333'
});
});
You can also reduce the code above to simply query the objects from the class. Since your parent object is the document, you can directly use JQuery selectors on the CSS classes
$(document).ready(function(){
$('#nav-icon span').css({
'background-color': '#333'
});
});
May be for you guys is obvious but for me is not.
I would like to create an i help image, that when it is clicked it pop ups a window with information.
I have tried something like this but it does not help:
<a id="dialog-1" href="#"><button id="opener" >i</button></a>
<script>
$(function() {
$( "#dialog-1" ).dialog({
autoOpen: false,
});
$( "#opener" ).click(function() {
$( "#dialog-1" ).dialog( "open" );
});
});
</script>
application.js
//= require jquery
//= require jquery_ujs
//= jquery-ui
//= require turbolinks
//= require_tree .
answer from my comments
Did you include the library jquery-ui?
include the jquery-ui library in your application.js file.
There are many many ways to accomplish what you need.
I will make a suggestion, there are probably other ways but this is something simple.
For the "i" image, I recommend you getting an actual image, better a png with transparent background.
Another option is using an iconic font, such as Font Awesome (example). It looks like an image, but it is treated like a font, so you can change the color, size, etc.
For the pop-up. Single option is creating a hidden div with absolute positioning and opening it with javascript/jQuery and maybe fading the background a little bit. You can google it a little bit and will find many solutions, one will fit your need for sure.
As a second improvement: If the content is very heavy, you may want to load it on demand via AJAX or other async ways, but first get the info window working :)
maybe you miss the $( document ).ready(function() { ... });
try with this:
<a id="dialog-1" href="#"><button id="opener" >i</button></a>
<script>
$(function() {
$( document ).ready(function() {
$( "#dialog-1" ).dialog({
autoOpen: false,
});
$( "#opener" ).click(function() {
$( "#dialog-1" ).dialog( "open" );
});
});
});
</script>
I need my images to appear with its original ratio on my tumblr posts, but for some reason they lose a little bit of their bottom when stacked with multiple images. I'm no programmer, my limited knowledge allowed me to find where the code for that might be but I don't know how to program it to fix this issue.
Here's an image demonstrating the problem: http://i.stack.imgur.com/Ta0Tm.jpg
Where I think the code might be:
</script>
<script src="http://static.tumblr.com/wofln30/2XXmyt1i0/jquery.colorbox.js"></script>
<script src="http://static.tumblr.com/wofln30/lFrmyt0d1/jquery.photoset-grid.min.js"></script>
<script>
$('.photoset').photosetGrid({
highresLinks: true,
rel: 'withhearts-gallery',
gutter: '5px',
onComplete: function(){
$('.photoset-grid-lightbox').attr('style');
$('.photoset-grid-lightbox a.photoset-cell').colorbox({
transition: "none",
photo: true,
scalePhotos: true,
maxHeight:'90%',
maxWidth:'90%'
});
}
});
</script>
Thanks in advance and sorry for eventual "noobiness", feel free to call me out on that.