I am putting together a slide presentation using a jquery plugin called 'slick' (http://kenwheeler.github.io/slick/) using django and a bootstrap 3 template. I've got a basic carousel working using a django template that looks like:
<div class="your-class">
<div>your content</div>
<div><IMG src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSj2c33fdt1ugB8VBuE5V37wnmPoxWMknX9JnGycNiH2yr3BpDKVA"></div>
<div>your content</div>
</div>
I have a fiddle at http://jsfiddle.net/kc11/20a90mdm/1/
I'm wondering if there is a way to add arrows to the left and right of the slide, like in the first example (Single Item) on http://kenwheeler.github.io/slick/ . I can only see the prev and next buttons below the slides
Your arrows are already there, they are the Previous and Next buttons at the bottom of the page. You would need to include slick-theme.css or style them by yourself via css.
Here I try css code...
.slick-prev{
background:#000;
width:50px;
height:50px;
position:absolute;
left:0;
top:50%;
-ms-transform: translateY(-50%); /* IE 9 */
-webkit-transform: translateY(-50%); /* Safari */
transform: translateY(-50%);
}
.slick-next{
background:#000;
width:50px;
height:50px;
position:absolute;
right:0;
top:50%;
-ms-transform: translateY(-50%); /* IE 9 */
-webkit-transform: translateY(-50%); /* Safari */
transform: translateY(-50%);
}
NOTE
Give their parent class
position:relative
Also you can set left & right position as your need.
The color of the buttons in slick-theme.css is white, so not visible on a white background.
Change the color of the buttons there or overwrite in your own style sheet like this:
.slick-prev:before, .slick-next:before {
color: #000000;
}
Related
I'm very new to web development so have mercy with your responses.
I have a grid of images that I want to modify. When the mouse hovers over an image, I want an overlay with text to appear over the image (this may require the cell in the grid to expand to contain all the text).
When the image with the overlay is clicked, it should open a modal (I already have this working) with the full text and info inside.
All changes need to look smooth with transitions (overlay shouldn't just be there when the mouse touches, it should animate in, etc.) when they enter/exit.
I'm not sure what the right terminology is for this, so I'm struggling to find info searching on Google. So, if you could provide me with some resources to learn this, or provide some examples, it'd be much appreciated. Thanks in advance :)
Edit: Here's close to what I want to happen
There will be an image, like this:
After the mouse hover over this image, an overlay should animate in to look like this:
The difference between this and what I want, is I want to show text instead of an icon, and I also want the cell in the grid upon which the mouse is hovering to expand to more pleasantly present the text that will be shown on the overlay.
You can do this with just css first you need to wrap your image in a div and set the position to relative. Then place the image and the overlay inside of it. Then you can use css transitions to achieve the desired effect. You will set the original opacity of the overlay to 0 and set the hover opacity to 1. Below is an example. Since you haven't posted any code I can't tell what your markup will be so I just made an example.
.img-container{
position:relative;
display:inline-block;
}
.img-container .overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgb(0,170,170);
opacity:0;
transition:opacity 500ms ease-in-out;
}
.img-container:hover .overlay{
opacity:1;
}
.overlay span{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
color:#fff;
}
<div class="img-container">
<img src="https://placehold.it/300x300">
<div class="overlay">
<span>overlay content</span>
</div>
</div>
Set image as "block"
.img-container{
position:relative;
display:inline-block;
}
.img-container img{
display:block
}
.img-container .overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgb(0,170,170);
opacity:0;
transition:opacity 500ms ease-in-out;
}
.img-container:hover .overlay{
opacity:1;
}
.overlay span{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
color:#fff;
}
<div class="img-container">
<img src="https://placehold.it/300x300">
<div class="overlay">
<span>overlay content</span>
</div>
</div>
Sounds like you're looking for tooltip, see
https://getbootstrap.com/docs/4.0/components/tooltips/
Using Bootstrap and a bunch of custom CSS for social media icons (located here), I created a pen to demo (and test) my code. The goal was to create icons that would automatically fit there parent div (horizontal or vertical, etc), and I have everything working except for one small problem. I have both of the divs affixed (one horizontal, one vertical), and 100% opaque before the affix is triggered. However, and I know why, the view is still being rendered with what basically looks like a giant margin between the top of the document and the page title. How can I clear this, while still using display:inline-block?
Here is the CSS for the related divs & classes, but I'd recommend checking out the pen first because visually seeing it expalins the issue much better.:
.snav {
top:50%;
margin-left:-15px;
background: rgb(0, 0, 0);
width:5rem;
height:25rem;
display:inline-block;
z-index:99;
transition: 1s all ease-in;
transform: translate(0, -50%);
opacity:0;
}
.horiz{
top:0;
margin-left: auto;
margin-right:auto;
z-index:99;
left:50%;
transition: 1s all ease;
transform: translate(-50%, 0);
opacity:0;
display:inline-block;
}
#horiz{
background: rgb(0,0,0);
width:26.6rem;
height:5rem;
}
.affix{
opacity:.5;
}
.affix:hover{
opacity:.9;
}
The gap between the top of the page and the title is because the social icons widget is still within content flow.
Try adding position: fixed; to the .snav style rule to take it out of content flow and the title will go to the expected position.
I'm trying to center a div horizontally and verticlaly without knowing the height/width. I've achieved it within jquery but am struggling to convert it to pure js as I don't want dependancy.. any ideas?
<script>
$(document).ready(mt);
$(window).resize(mt);
function mt(){
var contentLocked = $('.lockerPopup').outerHeight();
marginTop = ( $(document).height() - contentLocked ) / 2;
$('.lockerPopup').css({'top': marginTop});}
</script>
Use .offsetWidth and .offsetHeight to get the dimensions of your element and window.innerWidth and window.innerHeight for the dimensions of the window. The rest of the logic is pretty straight forward to center it using .style.top and .style.left.
See http://codepen.io/anon/pen/JYjqWZ
Alternatively, if you want to center multiple things or you don't need it to be positioned absolutely, I would suggest looking into flexbox or use
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
in your CSS to stay away from JS entirely.
you can center by using left 50%; top 50% and -webkit-transform: translate(-50%,50%); (obviously add all of the other versions of webkit transform for cross-browser compatibility.
This will always center the div no matter what its width/height and parent container size.
You don't need javascript for that,
you can do it only using CSS: http://jsfiddle.net/leojavier/gjah19y7/
<div class="container">
<div class="element"><p>test</p></div>
</div>
CSS
html,body{
height:100%;
width:100%;
}
.container {
display:table;
height:100%;
width:100%;
background:#CCC;
}
.element {
display:table-cell;
vertical-align:middle;
text-align:center;
width:100px;
height:100px;
color:#222;
}
I have a div with a background image, but what I wanted is that when I hover that div, the background would turn with a filter transparent white (like 50% transparency), so we could see both the background and the image I have inside the div. I didn't want that this filter to affect the image inside it, only the background.
HTML:
<div class="col-xs-3 col-md-3 back-div">
<img src="imgs/logo.jpg">
</div>
CSS:
.back-div{
background-image: url("../imgs/imgbg.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
Is there any js framework to do this with some animations also?
Thanks
This can be achieved with some simple jQuery (allowing you to reuse it on multiple elements of similar structure). *I gave you jQuery because you asked form animation as well as the hover opacity effect and jQuery alleviates the various browser incompatibilities with css animations.
jsFiddle
New JS:
$(function(){
$('.back-div').hover(function(){
$('.back-div img').animate({opacity: 0.5},1000);
}, function(){
$('.back-div img').animate({opacity: 1},1000);
});
});
New CSS:
.back-div img {
opacity: 1;
}
You could use some jQuery to modify the div.
$(".back-div").css({ 'background': 'whatever'});
You can out it inside a function and you can play with it. It will give you a more personalized functionality.
If not, try play with this too (in CSS):
opacity: 0.4;
filter: alpha(opacity=40);
You must pretend the background by another internal div
<div class="your-cont">
<div class="fake-bg"></div>
<img src="imgs/logo.jpg">
</div>
CSS:
.your-cont {
position:relative;
}
.your-cont:hover .fake-bg {
opacity:0.5;
}
.fake-bg {
position:absolute;
z-index:-1;
left:0;
top:0;
width:100%;
height:100%;
}
I am looking for jquery plugin or something for my vertical menu. here is the scenario.. I have a long list of categories e.g. 70 categories, which I have to display in the right/left navigation, but I want them to display only 10 categories and soon as someone rolls over categories (up/down) it automatically scrolls up/down and shows remaining categories within the specific height (10 visible at a time), I hope my question is clear if not, I will demonstrate with images.. can someone please point me to the right direction.. thanks...
Edit: something like this but with only category names and in vertical direction : http://valums.com/files/2009/menu/final.htm
As MrOBrian said...you can edit the style part in the source code. This also depends on target browsers. Here is something to get you started...
div.sc_menu {
/* Set it so we could calculate the offsetLeft */
position: relative;
height: 145px;
width: 200px;
overflow: auto;
/* Added this part */
writing-mode: tb-lr;
filter: flipv fliph;
transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
/* Added this part */
}