I was wondering if there is a way to use custom slick slider dots. When I search, all I can finds is examples on how to change the dots into thumbnails from the slides, however this is not what I'm trying to accomplish. I just want to use my own png pictures for the active and non-active dot navigation. I tried this:
$('.slick-dots li').html('<img src="slide-dot.png" />');
$('.slick-dots li.slick-active').html('<img src="slide-dot-active.png" />');
But that didn't work, though I recall I did something like that before. Am I missing something here ?
Thanks!
This can be done when initializing slick as one of the options:
JS
$(".slider").slick({
dots: true,
customPaging : function(slider, i) {
return '<img src="slide-dot.png" /><img src="slide-dot-active.png" />';
},
});
Then you can display the image you want based on the active state with CSS
<!-- language: lang-css -->
.slick-dots li img:nth-child(1) {
display: block;
}
.slick-dots li img:nth-child(2) {
display: none;
}
.slick-dots li.slick-active img:nth-child(1) {
display: none;
}
.slick-dots li.slick-active img:nth-child(2) {
display: block;
}
You can style slick dots with CSS only and avoid using inline images:
Using background image:
.slick-dots li button {
background: url(path/to/your-image.png);
text-indent: -9999px;
overflow:hidden;
/* more CSS */
}
Using pseudo element:
.slick-dots li button {
font-size: 0;
/* more CSS */
}
.slick-dots li button {
content:url(path/to/your-image.png);
}
Hello there i searched a lot but didn't find any solution so i created my own solution
you can do like this:
In html
<div class="card rounded-0 h-100">
<div class="card-body p-0">
<div id="slick-slider">
<img class="w-100" src="https://demo.activeitzone.com/ecommerce/public/uploads/all/kYLM906MNqYcHvm0bHLcIj3TxldjZfySHl26wHMu.png" alt="">
<img class="w-100" src="https://demo.activeitzone.com/ecommerce/public/uploads/all/ppB6tYYNgWM3vL3uq81n80fZCdxrgkMul9KPk9pm.png" alt="">
<img class="w-100" src="https://demo.activeitzone.com/ecommerce/public/uploads/all/Dp0DBHFbBuyRCAUi8Od6tk4izOsMg1mVB1v8QAeu.png" alt="">
</div>
<div class="slick-slider-nav"></div>
<div class="slick-slider-dots"></div>
</div>
</div>
And in javascript
$('#slick-slider').slick({
autoplay: true,
dots: true,
appendArrows: $('.slick-slider-nav'),
appendDots: $('.slick-slider-dots'),
prevArrow: "<button class='slick-prev btn btn-white rounded-circle'><i class='mdi mdi-chevron-left'></i></button>",
nextArrow: "<button class='slick-next btn btn-white rounded-circle'><i class='mdi mdi-chevron-right'></i></button>",
});
For dots style like this i am using SCSS
.slick-slider-dots{
position: absolute;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
display: flex;
ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
li {
margin: 0 4px;
button {
background: $gray-200;
height: 8px;
width: 35px;
overflow: hidden;
color: $gray-200;
border: none;
border-radius: 4px;
}
&.slick-active {
button {
background: $primary;
color: $primary;
}
}
}
}
}
Dots will look like this
you can use the option "appendDots" when initializing the slider.
For example: appendDots: '$('.your-dot')'
You can implement this simply by using CSS, and you don't need any JavaScript function.
1- choose the element you want the slider to be applied to
this code is pugjs
ul
li 01
li 02
li 03
li 04
li 05
2- Then apply the Slider function to this element
$("ul").slick()
3- Now add the dot feature to the slider and do it with true
$("ul").slick({
dots: true,
})
4- Now go to the points and click on them and open the console and drag the class named slick-dots
5- Add the formatting you want to the buttons inside, as shown in the following figure
.slick-dots li button
{
width:10px;height:10px;
background-color:red;border-radius:50%;
font-size:0px; // This step is very important to hide the numbers
border:0;
}
6- Now inside the console, you will notice the mechanism of action of this slider, as it puts an active class on the element that you click on, so we go to the css and we coordinate the active
.slick-dots .slick-active button
{
background-color:blue;
}
7- And in this way, you will end the customization of dot without the need for any JavaScript function.
Related
I have a menu with a list of items created dynamically using javascript.
They have different colour and country attributes created using setAttribute.
$("#menuList a").hover(
function() {
var countryName = $(this).attr('country');
var fruitColour = $(this).attr('colour');
$('#toshow').append($("countryName \n fruitColour"));
},
function() {}
);
.toshow {
display: none;
}
#menuList a:hover div.toshow {
top: 0;
right: 0;
display: block;
position: absolute;
z-index: 99999;
background: red;
width: 200px;
height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menubar" id="menuList">
<li>Watermelon</li>
<li>Grapes</li>
<li>Strawberry</li>
<li>Blueberry</li>
</ul>
<div class="toshow" id="toshow"></div>
Here, I want to have a separated hidden div (display at top right of the page or next to the menuList) that does not have any content until any of the <a> tag being hovered, and show its responding two attributes until no more mouse hovered.
The code does not have errors. But I don't see anything in red when the mouse hovered through the list. Is it possible to achieve what I am looking for?
You can use the mouseout event to hide the toshow div with hide as you leave a list element. And at each hover event, you can change the html of toshow to the values of the li element which the user is hovering over and use show to display it.
Also make sure you attach the event handlers after you've inserted the html of the dynamically generated list.:
function displayGeneratedList() {
$('#menuList').html(`
<li>Watermelon</li>
<li>Grapes</li>
<li>Strawberry</li>
<li>Blueberry</li>
`);
$("#menuList a").hover(function() {
var countryName = $(this).attr('country');
var fruitColour = $(this).attr('colour');
$('#toshow').html(`${countryName}<br>${fruitColour}`).show();
});
$('#menuList a').mouseout(function() {
$('#toshow').hide();
});
}
$(document).ready(function() {
displayGeneratedList();
});
#menuList {
display: inline-block;
}
.toshow {
display: none;
float: right;
background: maroon;
width: 200px;
height: 100px;
padding: 5px;
color: white
}
<ul class="menubar" id="menuList">
</ul>
<div class="toshow" id="toshow"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I have two images of arrows, up and down. My problem is when I use slideToggle(), it toggles up and down, but the image stays the same rather then changing. For instance, if I toggle up, the image should automatically change to the downward arrow and vice versa. Also, these arrows should be moved to the top of the page once the toggle happens. The current code displays two arrows, I would like that to be one arrow that changes based on the toggle.
What I have so far..
HTML:
<div id="toggleParam">
<input type="image" class="upArrow" src="~/Content/Images/Reserved.ReportViewerWebControl.png" name="Show / Hide Parameters" />
<input type="image" class="downArrow" src="~/Content/Images/downArrow.png" name="Show / Hide Parameters" />
</div>
CSS:
.upArrow{
display: block;
margin-left: 690px;
margin-top: 0px;
border-width: 5px;
padding-bottom: 0px;
cursor: pointer;
height: 7pt;
}
.downArrow{
display: block;
margin-left: 760px;
margin-right: 70px;
margin-top: -10px;
border-width: 5px;
padding-bottom: 0px;
cursor: pointer;
height: 7.5pt;
}
JavaScript/JQuery:
$(document).ready(function () {
$('#toggleParam').on("click", function () {
$('.dropdown').slideToggle();
});
What I need is shown in these two pictures..
I realize missing a lot of code on the JS part.. I am working on it while asking this question. Thanks for the help!
You need to simply include the arrows' elements in the toggle function accordingly:
$('#toggleParam').on("click", function () {
$('.downArrow, .upArrow').toggle();
$('.dropdown').slideToggle();
});
Also in the beginning you need to hide one of the arrows (not sure which one in your case):
.downArrow{
display: none;
...
.upArrow{
display: block;
Try this (note - there's n-ways to do this; this is just how i'd do it).
<!--index.html-->
<div id="toggleParam" class="toggle-param--up">
<input type="image" class="up-arrow" src="~/Content/Images/Reserved.ReportViewerWebControl.png" name="Show / Hide Parameters" />
<input type="image" class="down-arrow" src="~/Content/Images/downArrow.png" name="Show / Hide Parameters" />
</div>
/* app.css */
.toggle-param--up .down-arrow { display; none;}
.toggle-param--down .up-arrow { display; none;}
//app.js
$('#toggleParam').on("click", function (e) {
// the rest of your logic goes here....
var isUp = $(e.target).hasClass("toggle-param--up"),
directionClass = { true: "toggle-param--up", false: "toggle-param--down"};
$(e).target.removeClass(directionClass[isUp]).addClass(directionClass[!isUp];
});
Update
I'd modded the CSS given by David Thomas a bit. Its now a banner.
.div.popular::before {
/* setting the default styles for
the generated content: */
display: block;
width: 10em;
height: 2em;
line-height: 2em;
text-align: center;
background: #F60;
color: #fff;
font-size: 1.4rem;
position: absolute;
top: 30px;
right: 0px;
z-index: 1;
}
I would like to make a folded corner sort of like in this post: Folded banner using css
--- Original post ---
Let me first explain what I'm trying to do. I'm trying to give some post some extra attention by making a little circle with some call-to-action text in it.
But I only want this to trigger when a div has a specific class.
So if the div the class populair or sale I would like to have a little circle show up on that post. This script what I am using right now.
$(document).ready(function($){
if($("#front-page-items").hasClass('populair')){
$(".populair-div").show();
}
if($("#front-page-items").hasClass('sale')){
$(".sale-div").show();
}
});
And this HTML:
<div class="populair-div" style="display:none;">
<strong>Populair</strong>
</div>
<div class="sale-div" style="display:none;">
<strong>Sale</strong>
</div>
But this only show's the populair-div and not the other one. I'm guessing my script is wrong. Should I use else for all the other call-to-action classes?
$(document).ready(function($){
if($("#front-page-items").hasClass('populair')){
$(".populair-div").show();
}
else($("#front-page-items").hasClass('sale')){
$(".sale-div").show();
}
else($("#front-page-items").hasClass('Free')){
$(".free-div").show();
} // and so on
});
Is there someone that could help me out? Also is it possible to echo the div so I don't have to write a whole div for every call-to-action div?
For something like this, where the displayed text is explicitly linked to the class-name of the element it's easiest to use CSS and the generated content available, effectively hiding the elements you don't wish to show by default and then explicitly allowing elements you want to show, along with the generated content of those elements (using the ::before and ::after pseudo-elements:
div {
/* preventing <div> elements
from showing by default: */
display: none;
}
div.populair-div,
div.sale-div {
/* ensuring that elements matching
the selectors above (<div>
elements with either the 'sale-div'
or 'populair-div' class-names
are shown: */
display: block;
}
div.populair-div::before,
div.sale-div::before {
/* setting the default styles for
the generated content: */
display: block;
width: 4em;
height: 4em;
line-height: 4em;
text-align: center;
border: 3px solid transparent;
border-radius: 50%;
}
div.populair-div::before {
/* setting the text with the
"content" property: */
content: "Popular";
/* providing a specific colour
for the generated contents'
border: */
border-color: #0c0;
}
div.sale-div::before {
content: "Sale";
border-color: #f90;
}
/* entirely irrelevant, just so you can
see a (slightly prettified) difference
should you remove the default display
property for the <div> elements: */
code {
background-color: #ddd;
}
em {
font-style: italic;
}
<div class="neither-popular-nor-sale">
<p>
This element should not be shown, it has neither a class of <code>"populair-div"</code> <em>or</em> <code>"sale-div"</code>.
</p>
</div>
<div class="populair-div">
</div>
<div>Also not to be shown.</div>
<div class="sale-div">
</div>
You can use toggle function for this. It will be shorter and clearer.
Display or hide the matched elements.
Note: The buttons is for tests.
$(document).ready(function($){
init();
});
function init() {
$(".populair-div").toggle($("#front-page-items").hasClass('populair'));
$(".sale-div").toggle($("#front-page-items").hasClass('sale'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="front-page-items" class="populair sale"></div>
<div class="populair-div">populair-div</div>
<div class="sale-div">sale-div</div>
<hr />
<button onclick="document.getElementById('front-page-items').classList.toggle('populair');init()">toggle populair</button>
<button onclick="document.getElementById('front-page-items').classList.toggle('sale');init()">toggle sale</button>
I have an image with an overlay DIV which shows 2 images when I hover on the image, this works fine, but I want it to be dynamic and work for countless images on the page, currently it works for the first picture only, I'm not that good with javascript and jquery and would appreciate your help on this one.
Jquery Code:
$("#imageOverlay").hover(
function() {
$(this).children("img").fadeTo(200, 0.7).end().children("#hover").show();
},
function() {
$(this).children("img").fadeTo(200, 1).end().children("#hover").hide();
});
HTML Code:
<div id="imageOverlay">
<div id="hover">
<img src="http://placehold.it/100x30&text=Full View" />
<img src="http://placehold.it/100x30&text=Similar" />
</div>
<img src="http://placehold.it/1000x1000&text=Thumbnail">
</div>
CSS Code:
#imageOverlay {
display: inline;
position: relative;
}
#imageOverlay #hover {
display: none;
position: absolute;
margin-top: 10px;
margin-right: 10px;
z-index: 2;
}
#imageOverlay #hover a {
width: 100px;
height: 30px;
display: block;
margin-bottom: 5px;
}
Use a class for #imageOverlay and #hover, you can only have one instance of an ID, so when you have more than one of those IDs, the function is only finding the first one. Also, just fade the container box, not each individual image. Also, use stop() before an animation to make sure you don't get weird behavior when people are mousing on and off your element. Then, putting the main image first ensures that the hovered images are "on top" without having to worry about z-index.
HTML
<div class="imageOverlay">
<img src="http://placehold.it/1000x1000&text=Thumbnail">
<div class="hover">
<img src="http://placehold.it/100x30&text=Full View" />
<img src="http://placehold.it/100x30&text=Similar" />
</div>
</div>
JS
//fade out the images initially
$(".imageOverlay .hover").fadeTo(0, 0)
$(".imageOverlay").hover(
function() {
$(this).find(".hover").stop().fadeTo(200, 1);
},
function() {
$(this).find(".hover").stop().fadeTo(200, 0);
} //when writing clean code, be sure your closer ends at the same indent as your opener
);
CSS
.imageOverlay {
display: inline-block;
position: relative;
}
.imageOverlay .hover {
position: absolute;
top: 10px;
right: 10px;
}
.imageOverlay .hover a {
width: 100px;
height: 30px;
display: block;
margin-bottom: 5px;
}
And your images should show up on top when you hover!
Make #imageOverlay a class and apply it to multiple attributes in your html.
css:
.imageOverlay
//css rules
jquery:
$(".imageOverlay").hover(
function() {
$(this).children("img").fadeTo(200, 0.7).end().children("#hover").show();
},
function() {
$(this).children("img").fadeTo(200, 1).end().children("#hover").hide();
});
html:
<div class="imageOverlay">
// do stuff
</div>
<div class="imageOverlay">
// do stuff
</div>
I want tabs along the left side of the page instead of across the top. I'm already loading jQuery for other reasons (effects), so I prefer using jQuery to another UI framework. Searches on "vertical tabs jquery" yield links to works-in-progress.
Is getting Vertical Tabs to work across browsers fraught, or is it so trivial that, once you have a solution, it doesn't seem worthwhile to post example code?
Have a look at the jQuery UI vertical Tabs Docu.
I try out it, it worked fine.
<style type="text/css">
/* Vertical Tabs
----------------------------------*/
.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
</style>
<script>
$(document).ready(function() {
$("#tabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
$("#tabs li").removeClass('ui-corner-top').addClass('ui-corner-left');
});
</script>
Try here:
http://www.sunsean.com/idTabs/
A look at the Freedom tab might have what you need.
Let me know if you find something you like. I worked on the exact same problem a few months ago and decided to implement myself. I like what I did, but it might have been nice to use a standard library.
I've created a vertical menu and tabs changing in the middle of the page. I changed two words on the code source and I set apart two different divs
menu:
<div class="arrowgreen">
<ul class="tabNavigation">
<li> Tab 1</li>
<li> Tab 2</li>
</ul>
</div>
content:
<div class="pages">
<div id="first">
CONTENT 1
</div>
<div id="secund">
CONTENT 2
</div>
</div>
the code works with the div apart
$(function () {
var tabContainers = $('div.pages > div');
$('div.arrowgreen ul.tabNavigation a').click(function () {
tabContainers.hide().filter(this.hash).show();
$('div.arrowgreen ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
//o_O\\ (Poker Face) i know its late
just add beloww css style
<style type="text/css">
/* Vertical Tabs ----------------------------------*/
.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
</style>
UPDATED ! http://jqueryui.com/tabs/#vertical
I wouldn't expect vertical tabs to need different Javascript from horizontal tabs. The only thing that would be different is the CSS for presenting the tabs and content on the page. JS for tabs generally does no more than show/hide/maybe load content.
Another options is Matteo Bicocchi's jQuery mb.extruder tabs plug-in:
http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-extruder/
Have a look at Listamatic. Tabs are semantically just a list of items styled in a particular way. You don't even necessarily need javascript to make vertical tabs work as the various examples at Listamatic show.
super simple function that will allow you to create your own tab / accordion structure here: http://jsfiddle.net/nabeezy/v36DF/
bindSets = function (tabClass, tabClassActive, contentClass, contentClassHidden) {
//Dependent on jQuery
//PARAMETERS
//tabClass: 'the class name of the DOM elements that will be clicked',
//tabClassActive: 'the class name that will be applied to the active tabClass element when clicked (must write your own css)',
//contentClass: 'the class name of the DOM elements that will be modified when the corresponding tab is clicked',
//contentClassHidden: 'the class name that will be applied to all contentClass elements except the active one (must write your own css)',
//MUST call bindSets() after dom has rendered
var tabs = $('.' + tabClass);
var tabContent = $('.' + contentClass);
if(tabs.length !== tabContent.length){console.log('JS bindSets: sets contain a different number of elements')};
tabs.each(function (index) {
this.matchedElement = tabContent[index];
$(this).click(function () {
tabs.each(function () {
this.classList.remove(tabClassActive);
});
tabContent.each(function () {
this.classList.add(contentClassHidden);
});
this.classList.add(tabClassActive);
this.matchedElement.classList.remove(contentClassHidden);
});
})
tabContent.each(function () {
this.classList.add(contentClassHidden);
});
//tabs[0].click();
}
bindSets('tabs','active','content','hidden');