Hover text assistance - php

<div class="col-md-4">
<div class="top-bar-right">
<div class="social">
<a href="">
<img src="img/member_login1.png" height="40" width="40" >
</a>
</div>
I am attempting to show text titled "LogIn" when one hovers over the member_login image


with my code this might help..
body{
background-color: #000;
}
.container{
display: flex;
justify-content: space-around;
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
figure{
width: 5rem;
height: 5rem;
clip-path: circle(50% at 50% 50%);
cursor: pointer;
position: relative;
}
img {
width: 100%;
height: 100%;
transform: scale(0.75);
transition: all 0.4s ease;
}
figcaption{
color: white;
font-size: 0.9rem;
text-transform: uppercase;
text-align: center;
letter-spacing: 2px;
transition: all 0.6s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -40%);
}
figure:hover img{
transform: scale(0.5);
filter: blur(4px) brightness(70%);
}
figure:hover figcaption{
opacity: 1;
transform: translate(-50%, -50%);
}
<html>
<head>
<title>Membuat Efek Hover Pada Image Caption</title>
</head>
<body>
<div class="container">
<figure>
<img src="https://www.inpows.com/media/2020/01/cropped-Logo-Inpows-2.png">
<figcaption>
Login
</figcaption>
</figure>
</div>
</body>
</html>


All you need is the title attribute!
<div class="col-md-4">
<div class="top-bar-right">
<div class="social">
<a href="">
<img
src="https://www.nasa.gov/images/content/296673main_scn1-226.jpg"
title="Hover to see me!" >
</a>
</div>
</div>
</div>


If you want more control over the styling of the hover text, use a span or something and set it to display: none when the preceding image is not being hovered.
.social {
position: relative;
}
.tooltip {
position: absolute;
top: 2px;
left: 2px;
color: saddlebrown;
background-color: white;
padding: 2px;
z-index: 2;
}
img:not(:hover) + .tooltip:not(:hover) {
display: none;
}
<div class="col-md-4">
<div class="top-bar-right">
<div class="social">
<a href="">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/LotusBud0048a.jpg/420px-LotusBud0048a.jpg" height="40" width="40" >
<span class="tooltip">LogIn</span>
</a>
</div>
</div>
</div>

Related

How to make my loading screen div take up my whole entire screen, even everything below it

I'm trying to make a loading screen cause I'm using PHP to dynamically bring in specific services for this website I'm making and I tried using height: 100% on my wrapper div and it just does not work. I got to a point where I tried height: 100vh but obviously it only takes 100% of the view area so I can just scroll down and see the other content.
HTML
<?php include ('header.php'); ?>
</head>
<body>
<div class="background-loading">
<div class="wrapper">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="shadow"></div>
<div class="shadow"></div>
<div class="shadow"></div>
<span>Loading</span>
</div>
</div>
<div class="banner-section" style="background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(images3/heroImage.jpg);">
<h1>Services</h1>
</div>
<div class="services-section">
<div class="services">
<?php
require_once 'includes/dbh-inc.php';
$sql = "SELECT serviceName, servicePageName, serviceImage FROM addService";
$result = $conn-> query($sql);
if ($result-> num_rows > 0) {
while ($row = $result-> fetch_assoc()) {
echo '<div class="service-title">';
echo '<h2>'. $row["serviceName"] .'</h2>';
echo '</div>';
echo '<a href='. $row["servicePageName"] .'>';
echo '<div class="service-container" style="background-image: url(data:image/jpg;base64,'.base64_encode($row['serviceImage']).')">';
echo '<h1>Click Me!</h1>';
echo '</div>';
echo '</a>';
}
}
$conn-> close();
?>
<!--
<div class="service-title">
<h2>Business Printing</h2>
</div>
<a href="businessPrinting.php">
<div class="service-container" style="background-image: url(images3/business1.jpg);">
<h1>Click Me!</h1>
</div>
</a>
<div class="service-title">
<h2>Canvas Printing</h2>
</div>
<a href="canvasPrinting.php">
<div class="service-container" style="background-image: url(images3/canvas1.jpg);">
<h1>Click Me!</h1>
</div>
</a>
<div class="service-title">
<h2>Custom Apperal</h2>
</div>
<a href="">
<div class="service-container" style="background-image: url(images3/apperal1.jpg);">
<h1>Click Me!</h1>
</div>
</a>
<div class="service-title">
<h2>Embroidery</h2>
</div>
<a href="">
<div class="service-container" style="background-image: url(images3/embroidery1.jpg);">
<h1>Click Me!</h1>
</div>
</a>
<div class="service-title">
<h2>Engraving</h2>
</div>
<a href="">
<div class="service-container" style="background-image: url(images3/engraving1.jpg);">
<h1>Click Me!</h1>
</div>
</a>
<div class="service-title">
<h2>Signs</h2>
</div>
<a href="signsAndBanners.php">
<div class="service-container" style="background-image: url(images3/signs1.jpg);">
<h1>Click Me!</h1>
</div>
</a>
-->
</div>
</div>
<?php include ('footer.php'); ?>
CSS
/* Screen Loader */
.background-loading {
background-color: var(--clr-primary);
z-index: 1000;
height: 100vh;
position: sticky;
}
.wrapper{
width:200px;
height:60px;
position: absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}
.circle{
width:20px;
height:20px;
position: absolute;
border-radius: 50%;
background-color: #fff;
left:15%;
transform-origin: 50%;
animation: circle .5s alternate infinite ease;
}
#keyframes circle{
0%{
top:60px;
height:5px;
border-radius: 50px 50px 25px 25px;
transform: scaleX(1.7);
}
40%{
height:20px;
border-radius: 50%;
transform: scaleX(1);
}
100%{
top:0%;
}
}
.circle:nth-child(2){
left:45%;
animation-delay: .2s;
}
.circle:nth-child(3){
left:auto;
right:15%;
animation-delay: .3s;
}
.shadow{
width:20px;
height:4px;
border-radius: 50%;
background-color: rgba(0,0,0,.5);
position: absolute;
top:62px;
transform-origin: 50%;
z-index: -1;
left:15%;
filter: blur(1px);
animation: shadow .5s alternate infinite ease;
}
#keyframes shadow{
0%{
transform: scaleX(1.5);
}
40%{
transform: scaleX(1);
opacity: .7;
}
100%{
transform: scaleX(.2);
opacity: .4;
}
}
.shadow:nth-child(4){
left: 45%;
animation-delay: .2s
}
.shadow:nth-child(5){
left:auto;
right:15%;
animation-delay: .3s;
}
.wrapper span{
position: absolute;
top:75px;
font-family: 'Lato';
font-size: 20px;
letter-spacing: 12px;
color: #fff;
left:15%;
}

What you are looking for is called modal. One way to do that is use position fixed, a non-transparent background, 100% width and height and a higher z-index than the rest of your content. Then pin it to the top left.
Then when you are done loading, set its display to "none".
window.setTimeout(()=>{document.getElementById('background-loading').style.display = 'none';}, 3000);
#background-loading {
background-color: white;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.wrapper{
width:200px;
height:60px;
position: absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}
.circle{
width:20px;
height:20px;
position: absolute;
border-radius: 50%;
background-color: #fff;
left:15%;
transform-origin: 50%;
animation: circle .5s alternate infinite ease;
}
#keyframes circle{
0%{
top:60px;
height:5px;
border-radius: 50px 50px 25px 25px;
transform: scaleX(1.7);
}
40%{
height:20px;
border-radius: 50%;
transform: scaleX(1);
}
100%{
top:0%;
}
}
.circle:nth-child(2){
left:45%;
animation-delay: .2s;
}
.circle:nth-child(3){
left:auto;
right:15%;
animation-delay: .3s;
}
.shadow{
width:20px;
height:4px;
border-radius: 50%;
background-color: rgba(0,0,0,.5);
position: absolute;
top:62px;
transform-origin: 50%;
z-index: -1;
left:15%;
filter: blur(1px);
animation: shadow .5s alternate infinite ease;
}
#keyframes shadow{
0%{
transform: scaleX(1.5);
}
40%{
transform: scaleX(1);
opacity: .7;
}
100%{
transform: scaleX(.2);
opacity: .4;
}
}
.shadow:nth-child(4){
left: 45%;
animation-delay: .2s
}
.shadow:nth-child(5){
left:auto;
right:15%;
animation-delay: .3s;
}
.wrapper span{
position: absolute;
top:75px;
font-family: 'Lato';
font-size: 20px;
letter-spacing: 12px;
color: #fff;
left:15%;
}
<div id="background-loading">
<div class="wrapper">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="shadow"></div>
<div class="shadow"></div>
<div class="shadow"></div>
<span>Loading</span>
</div>
</div>
Other content

My stylesheet works only when in mobile view, it worked fine yesterday but today all styles are gone if viewed on desktop

So I wrote a small website and everything was working great, all styles were working but today it only displays the style sheet in mobile view in the normal desktop view it disregards all the styles in my css/style.css
The navbar and header imag keeps their style regardless of the size of the browser just the rest of the styles are gone when in desktop view
My header and footer is included in all pages with php includes the files is in includes/header.php and includes/footer.php
Here is the link to the project as well to look at maxi.maxihome.co.za
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Bootstrap--!>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Style sheet -->
<link rel="stylesheet" href="css/style.css">
<!--Google Fonts -->
<link href="https://fonts.googleapis.com/css?
family=Acme|Neuton&display=swap" rel="stylesheet"><link
href="https://fonts.googleapis.com/css?
family=Acme|Neuton|PT+Mono&display=swap" rel="stylesheet"><link
href="https://fonts.googleapis.com/css?
family=Acme|Neuton|PT+Mono|Sintony&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?
family=Acme|Molengo|Neuton|PT+Mono|Sintony&display=swap"
rel="stylesheet">
<!-- js script header -->
<script type="text/javascript"src="js/app.js">
</script>
<title>Maxi Home Renovations</title>
</head>
<body>
<section class="header">
<!-- custom menu -->
<div class="nav">
<div class="logo">
<img class="imagelogo"src="images/name.png" alt="">
</div>
<div class="togg">
<div></div>
<div></div>
<div></div>
</div>
<ul class="firstlevel">
<li></li>
<li></li>
<li>Home</li>
<li>Services</li>
<li class="has-sub"><a>Renovations</a>
<ul class="sub">
<li>Kitchen</li>
<li>Bathroom</li>
<li>Living Area</li>
<li>Total Renovation</li>
</ul></li>
<li>Contact Us</li>
<li><i class="fa fa-facebook-square"></i></li>
</ul>
</div>
<img class="headerImage" src="images/headerImg.png"
alt="HeaderImage">
</section>
</body>
/*index page*/
<?php
include "includes/header.php" ?>
<section class="feature">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div id="carouselExampleInterval" class="carousel slide" data-
ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-interval="5000">
<img class="imgCar"src="images/h1.JPG" class="d-block w-100"
alt="...">
</div>
<div class="carousel-item" data-interval="5000">
<img class="imgCar"src="images/h2.JPG" class="d-block w-100"
alt="...">
</div>
<div class="carousel-item" data-interval="5000">
<img class="imgCar" src="images/h3.jpg" class="d-block w-100"
alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleInterval"
role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true">
</span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleInterval"
role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true">
</span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<?php
include "includes/footer.php" ?>
.headerImage{
width: 100%;
heigth: 300px;
padding-top:75px;
color:#bf2132;
}
.fimage{
width: 100%;
heigth: 300px;
padding-top:75px;
}
.navbar-default{
background-color:#bf2132;
border-color: #bf2132;
}
/* navigation */
.nav
{
width:100%;
background-color:#ccc;
position:fixed;
top:0;
left:0;
z-index: 9999;
}
.nav .logo
{
display:flex;
width:200px;
height: 50px;
flex-wrap:wrap;
justify-content: center;
align-items: center;
text-transform:uppercase;
cursor:pointer;
}
.imagelogo{
width:100px;
heigth:50px;
}
.togg
{
position:absolute;
right:40px;
top:20px;
display:none;
z-index: 5;
}
.togg div {
width: 36px;
height: 2px;
background-color: red;
margin: 6px 0px;
position: relative;
transition:all .8s ease;
}
.togg.lijo div
{
position:absolute;
transition:all .8s ease;
}
.togg.lijo div:nth-child(1){
transform: rotate(48deg);
top: 7px;
/* position: absolute; */
right: 0px;
}
.togg.lijo div:nth-child(2)
{
width:0px;
top: 7px;
/* position: absolute; */
right: 0px;
}
.togg.lijo div:nth-child(3)
{
transform: rotate(-48deg);
top: 7px;
right: 0px;
}
.nav ul.firstlevel
{
list-style:none;
width:calc(100% - 200px);
background: rgb(191,33,50);
background: linear-gradient(0deg, rgba(191,33,50,1) 0%,
rgba(247,77,5,0.9976365546218487) 33%, rgba(191,33,50,1) 100%);
margin-bottom:0px;
padding-left:0px;
}
.nav ul.firstlevel li
{
display:inline-block;
margin-bottom:0px;
color:#000;
}
.nav ul.firstlevel li a
{
cursor:pointer;
display:block;
padding:15px;
transition:.8s ease;
text-decoration:none;
text-transform:uppercase;
color:#fff;
}
.nav ul.firstlevel li a:hover
{
text-decoration:none;
}
.nav ul.firstlevel li ul.sub li {
display: block;
background-color:rgba(191,33,50,1);
}
.nav ul.firstlevel li ul.sub li:hover {
display: block;
background-color:rgba(172, 78, 2, 0.79);
}
.nav ul.firstlevel li ul.sub li a{
color:#fff;
}
.nav ul.firstlevel li ul.sub
{
width:200px;
position:absolute;
padding-left:0px;
opacity:0;
visibility: hidden;
transform:translateY(30px);
transition:.5s linear;
padding-top:20px;
}
.nav ul.firstlevel li ul.sub:after {
content: '';
width: 41px;
height: 20px;
border-bottom: solid 18px rgba(191,33,50,1);
border-left: solid 20px transparent;
border-right: solid 21px transparent;
top: 0px;
display: block;
position: absolute;
left: 16px;
}
#media(min-width:1024px)
{
.nav ul.firstlevel li:hover ul.sub
{
visibility:visible;
opacity:1;
transform:translateY(0px);
}
.nav ul.firstlevel li:hover
{
display:inline-block;
margin-bottom:0px;
background-color: rgba(27, 27, 27, 0.32);;
color:#fff !important;
}
.nav ul.firstlevel li:hover a
{
color:#fff !important;
}
}
#media(max-width:1024px)
{
.nav
{
min-height:50px;
}
.togg
{
display:block;
top:10px;
}
.nav ul.firstlevel
{
position: absolute;
top: 50px;
transform: translateX(100%);
right: 0;
transition:.8s ease;
width:40%;
height: calc(100vh - 50px);
z-index: fixed;
}
.nav ul.firstlevel li {
display: block;
}
.nav ul.firstlevel.surya {
transform: translateX(0%);
}
.nav ul.firstlevel li ul.sub
{
opacity: 1;
visibility: visible;
display:none;
position:relative;
padding-top:0px;
width:100%;
transition:0s;
transform: translateY(0px);
}
.nav ul.firstlevel li ul.sub:after
{
display:none;
}
/* Feature */
.feature{
padding-left: 100px;
padding-right: 100px;
padding-top: 70px;
padding-bottom: 70px;
background-image: url("../images/paper.jpg");
text-align:center;
}
.houseimg{
width: 400px;
height: 350px;
border:5px solid rgb(191,33,50);
background-color:#ff0;
}
.about{
padding-right: 100px;
padding-left: 100px;
padding-bottom: 70px;
text-align:center;
background-image: url("../images/paper.jpg");
}
/* spinning text */
#blink{
width:100%;
height: 50px;
padding: 15px;
text-align: center;
line-height: 50px;
}
.htext{
font-family: "Alfa Slab One";
color: rgb(191,33,50);
animation: blink 1.5s linear infinite;
padding-bottom: 100px;
}
#keyframes blink{
0%{opacity: 0;}
50%{opacity: .5;}
100%{opacity: 1;}
}
/* paragraph background */
.backpar{
border-radius: 25px;
background: rgb(191,33,50);
background: linear-gradient(0deg, rgba(191,33,50,1) 0%,
rgba(247,77,5,0.9976365546218487) 33%, rgba(191,33,50,1) 100%);
padding: 20px;
width: 100%;
height: 100%;
color: white;
font-family: "Concert One";
}
.footer{
background-image: url("../images/footer.png");
}
/* Contact */
.contact{
padding-left: 70px;
padding-right: 70px;
padding-top: 70px;
padding-bottom: 70px;
background-image:url("../images/paper.jpg");
}
.jumbotron {
background: rgb(191,33,50);
color: #FFF;
border-radius: 0px;
}
.jumbotron-sm { padding-top: 24px;
padding-bottom: 24px; }
.jumbotron small {
color: #FFF;
}
.h1 small {
font-size: 24px;
}
/* carousel homepage*/
.carousel-item{
width: 100% !important;
Height: 350px !important;}
.imgCar{
width: 100% !important;
Height: 350px !important;
border: 2px solid red;
border-radius: 5px;
}

I have noticed I left out a curly bracket everything is working again
Embarrassed Thank you

Bootstrap distorting the Border-Radius icon/image

So Im working on a project for a client and ran into an issue with Border-Radius + Bootstrap,
<div class="header">
<div class="top-nav">
<div class="container">
<div class="row">
<img class="logo" src="<?php if($custom_logo){echo $custom_logo; }else{echo $avatar;} ?>">
<nav class="social-media-top">
<h1 class="col-xs-12">Hello, I am <span><?php echo $twitch_username; ?></span></h1>
<?php if($twitch_username){ ?>
<li><i class="fa fa-twitch"></i></li>
This is after adding bootstrap to make it more responsive on mobile, well after doing that this is what the top now looks like;
This is what it looks like when I remove the Bootstrap code;
This is the code with out bootstrap on the image
<div class="header">
<div class="top-nav">
<div class="container">
<div class="row">
<img class="logo" src="<?php if($custom_logo){echo $custom_logo; }else{echo $avatar;} ?>">
<nav class="social-media-top">
<h1 class="col-xs-12">Hello, I am <span><?php echo $twitch_username; ?></span></h1>
<?php if($twitch_username){ ?>
<li><i class="fa fa-twitch"></i></li>
This is my css
/* Top Header */
.header {
padding-top: 1.5em;
border-top: solid .3em rgba(46, 204, 113, 1.0);
}
.top-nav {
margin-top: 1.2em;
margin-right: auto;
margin-bottom: .8em;
margin-left: auto;
width: 30em;
}
.logo {
float: left;
width: 5em;
height: 5em;
border: solid .1em rgba(46, 204, 113, 1.0);
border-radius: 50%;
}
.social-media-top {
float: right;
padding-bottom: 1em;
}
.social-media-top h1 {
margin: 0;
padding: 0;
color: #41eb71;
font-weight: 100;
font-size: 2em;
align-content: center;
}
.social-media-top h1 span {
color: #41eb71;
text-transform: capitalize;
font-weight: 600;
}
.social-media-top li {
display: inline-block;
}
.social-media-top li i {
display: inline-block;
width: 2em;
height: 2em;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: rgba(46, 204, 113, 1.0);
color: white;
text-align: center;
line-height: 2em;
}

Jssor Slider Bootstrap Compatibility

I'm developing a website which is bootstrap compatible. In my website I'm also using a jssor image slider. The slider works perfectly but in bootstrap mode, it goes off to the right as shown here.
The slider works fine for me on normal web browsers but when I use the site on mobile devices or in bootstrap mode I face this problem.
For your reference I'm putting below the HTML code and jQuery code of the slider. All the necessary library files have been included.
<script>
jssor_1_slider_init = function() {
var jssor_1_SlideoTransitions = [
[{b:0,d:600,y:-290,e:{y:27}}],
[{b:0,d:1000,y:185},{b:1000,d:500,o:-1},{b:1500,d:500,o:1},{b:2000,d:1500,r:360},{b:3500,d:1000,rX:30},{b:4500,d:500,rX:-30},{b:5000,d:1000,rY:30},{b:6000,d:500,rY:-30},{b:6500,d:500,sX:1},{b:7000,d:500,sX:-1},{b:7500,d:500,sY:1},{b:8000,d:500,sY:-1},{b:8500,d:500,kX:30},{b:9000,d:500,kX:-30},{b:9500,d:500,kY:30},{b:10000,d:500,kY:-30},{b:10500,d:500,c:{x:87.50,t:-87.50}},{b:11000,d:500,c:{x:-87.50,t:87.50}}],
[{b:0,d:600,x:410,e:{x:27}}],
[{b:-1,d:1,o:-1},{b:0,d:600,o:1,e:{o:5}}],
[{b:-1,d:1,c:{x:175.0,t:-175.0}},{b:0,d:800,c:{x:-175.0,t:175.0},e:{c:{x:7,t:7}}}],
[{b:-1,d:1,o:-1},{b:0,d:600,x:-570,o:1,e:{x:6}}],
[{b:-1,d:1,o:-1,r:-180},{b:0,d:800,o:1,r:180,e:{r:7}}],
[{b:0,d:1000,y:80,e:{y:24}},{b:1000,d:1100,x:570,y:170,o:-1,r:30,sX:9,sY:9,e:{x:2,y:6,r:1,sX:5,sY:5}}],
[{b:2000,d:600,rY:30}],
[{b:0,d:500,x:-105},{b:500,d:500,x:230},{b:1000,d:500,y:-120},{b:1500,d:500,x:-70,y:120},{b:2600,d:500,y:-80},{b:3100,d:900,y:160,e:{y:24}}],
[{b:0,d:1000,o:-0.4,rX:2,rY:1},{b:1000,d:1000,rY:1},{b:2000,d:1000,rX:-1},{b:3000,d:1000,rY:-1},{b:4000,d:1000,o:0.4,rX:-1,rY:-1}]
];
var jssor_1_options = {
$AutoPlay: true,
$Idle: 2000,
$CaptionSliderOptions: {
$Class: $JssorCaptionSlideo$,
$Transitions: jssor_1_SlideoTransitions,
$Breaks: [
[{d:2000,b:1000}]
]
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizing
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 500);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
//responsive code end
};
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
jssor_1_slider_init = function() {
var jssor_1_SlideoTransitions = [
[{b:0,d:600,y:-290,e:{y:27}}],
[{b:0,d:1000,y:185},{b:1000,d:500,o:-1},{b:1500,d:500,o:1},{b:2000,d:1500,r:360},{b:3500,d:1000,rX:30},{b:4500,d:500,rX:-30},{b:5000,d:1000,rY:30},{b:6000,d:500,rY:-30},{b:6500,d:500,sX:1},{b:7000,d:500,sX:-1},{b:7500,d:500,sY:1},{b:8000,d:500,sY:-1},{b:8500,d:500,kX:30},{b:9000,d:500,kX:-30},{b:9500,d:500,kY:30},{b:10000,d:500,kY:-30},{b:10500,d:500,c:{x:87.50,t:-87.50}},{b:11000,d:500,c:{x:-87.50,t:87.50}}],
[{b:0,d:600,x:410,e:{x:27}}],
[{b:-1,d:1,o:-1},{b:0,d:600,o:1,e:{o:5}}],
[{b:-1,d:1,c:{x:175.0,t:-175.0}},{b:0,d:800,c:{x:-175.0,t:175.0},e:{c:{x:7,t:7}}}],
[{b:-1,d:1,o:-1},{b:0,d:600,x:-570,o:1,e:{x:6}}],
[{b:-1,d:1,o:-1,r:-180},{b:0,d:800,o:1,r:180,e:{r:7}}],
[{b:0,d:1000,y:80,e:{y:24}},{b:1000,d:1100,x:570,y:170,o:-1,r:30,sX:9,sY:9,e:{x:2,y:6,r:1,sX:5,sY:5}}],
[{b:2000,d:600,rY:30}],
[{b:0,d:500,x:-105},{b:500,d:500,x:230},{b:1000,d:500,y:-120},{b:1500,d:500,x:-70,y:120},{b:2600,d:500,y:-80},{b:3100,d:900,y:160,e:{y:24}}],
[{b:0,d:1000,o:-0.4,rX:2,rY:1},{b:1000,d:1000,rY:1},{b:2000,d:1000,rX:-1},{b:3000,d:1000,rY:-1},{b:4000,d:1000,o:0.4,rX:-1,rY:-1}]
];
var jssor_1_options = {
$AutoPlay: true,
$Idle: 2000,
$CaptionSliderOptions: {
$Class: $JssorCaptionSlideo$,
$Transitions: jssor_1_SlideoTransitions,
$Breaks: [
[{d:2000,b:1000}]
]
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizing
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 500);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$Jssor$.$AddEvent(window, "load", ScaleSlider);
$Jssor$.$AddEvent(window, "resize", ScaleSlider);
$Jssor$.$AddEvent(window, "orientationchange", ScaleSlider);
//responsive code end
};
</script>
<div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 600px; height: 300px; overflow: hidden; visibility: hidden;">
<!-- Loading Screen -->
<div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
<div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
</div>
<div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 600px; height: 300px; overflow: hidden;">
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/002.jpg" />
<!--<div data-u="caption" data-t="0" style="position: absolute; top: 320px; left: 30px; width: 350px; height: 30px; background-color: rgba(235,81,0,0.5); font-size: 20px; color: #ffffff; line-height: 30px; text-align: center;"></div>-->
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/007.jpg" />
<!--<div data-u="caption" data-t="1" data-3d="1" style="position: absolute; top: -50px; left: 125px; width: 350px; height: 30px; background-color: rgba(235,81,0,0.5); font-size: 20px; color: #ffffff; line-height: 30px; text-align: center;">time lined layer animation</div>-->
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/003.jpg" />
<!--<div data-u="caption" data-t="2" style="position: absolute; top: 30px; left: -380px; width: 350px; height: 30px; background-color: rgba(235,81,0,0.5); font-size: 20px; color: #ffffff; line-height: 30px; text-align: center;">finger catchable right to left</div>-->
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/004.jpg" />
<!--<div data-u="caption" data-t="3" style="position: absolute; top: 30px; left: 30px; width: 350px; height: 30px; background-color: rgba(235,81,0,0.5); font-size: 20px; color: #ffffff; line-height: 30px; text-align: center;">responsive, scale smoothly</div>-->
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/005.jpg" />
<!--<div data-u="caption" data-t="4" style="position: absolute; top: 30px; left: 30px; width: 350px; height: 30px; background-color: rgba(235,81,0,0.6); font-size: 20px; color: #ffffff; line-height: 30px; text-align: center;">image, text, and custom layers</div>-->
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/006.jpg" />
<!--<div data-u="caption" data-t="5" style="position: absolute; top: 30px; left: 600px; width: 350px; height: 30px; background-color: rgba(235,81,0,0.5); font-size: 20px; color: #ffffff; line-height: 30px; text-align: center;">tons of transition type</div>-->
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/009.jpg" />
<!--<div data-u="caption" data-t="6" style="position: absolute; top: 30px; left: 30px; width: 350px; height: 30px; background-color: rgba(235,81,0,0.5); font-size: 20px; color: #ffffff; line-height: 30px; text-align: center;">visual slider maker</div>-->
</div>
<div data-b="0" data-p="112.50" style="display: none;">
<img data-u="image" src="img/008.jpg" />
<!--<div data-u="caption" data-t="7" style="position: absolute; top: -50px; left: 30px; width: 350px; height: 30px; background-color: rgba(235,81,0,0.5); font-size: 20px; color: #ffffff; line-height: 30px; text-align: center;">play in and play out</div>-->
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/011.jpg" />
<!--<div data-u="caption" data-t="8" data-3d="1" style="position: absolute; top: 25px; left: 150px; width: 250px; height: 250px; background-color: rgba(40,177,255,0.6); overflow: hidden;">-->
<!--<div data-u="caption" data-t="9" style="position: absolute; top: 100px; left: 25px; width: 200px; height: 50px; font-size: 24px; line-height: 50px;">A Child Layer</div>-->
<!--</div>-->
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="img/010.jpg" />
<!--<div data-u="caption" data-t="10" data-3d="1" style="position: absolute; top: 25px; left: 100px; width: 250px; height: 250px; background-color: rgba(40,177,255,0.6);">
<div style="margin: 15px; font-size: 20px;">
<p>This is full customized content layer.<br />
</p>
<p>
Everything is allowed
</p>
You can put
<a href="http://wwww.jssor.com">
a link
</a> or an image
<img src="img/icon_chrome.png" /> here.
</div>
</div>-->
</div>
<a data-u="ad" href="http://www.jssor.com" style="display:none">Responsive Slider</a>
</div>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb01" style="bottom:16px;right:16px;">
<div data-u="prototype" style="width:12px;height:12px;"></div>
</div>
<!-- Arrow Navigator -->
<span data-u="arrowleft" class="jssora02l" style="top:0px;left:8px;width:55px;height:55px;" data-autocenter="2"></span>
<span data-u="arrowright" class="jssora02r" style="top:0px;right:8px;width:55px;height:55px;" data-autocenter="2"></span>
</div>
Could anyone here help me style this properly so it is bootstrap compatible?

With the code posted above, the slider will fit the width of parent container.
Please check the width of the parent container.

Why isn't the `background-image` on this <a> tag not visible?

JSFiddle here.
Why isn't my a.previous-slide-arrows' and a.next-slide-arrows' background-image visible at all?
I was working on a web page in which I had included this code for the slideshow through the PHP include statement. There, the vertical-align applied to a.previous-slide-arrow and a.next-slide-arrow does not seem to work at all.
I posted the same code here (changed the paths to images as the ones I was using there were on localhost, and changed some PHP for loops for writing the <img> tag which appears 6 times) - and strangely the vertical-align does work here, but the background-image applied to a.previous-slide-arrow and a.next-slide-arrow is not visible. Why?
.image-slideshow-container {} .image-slideshow-container img {
position: fixed;
display: none;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
img.slider-image1 {
display: block;
}
.first-viewport {
height: 100%;
width: 100%;
position: absolute;
display: table;
}
a.previous-slide-arrow,
a.next-slide-arrow {
display: table-cell;
vertical-align: middle;
position: relative;
color: transparent;
opacity: 0.7;
text-align: center;
/* =s */
left: 20px;
background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-left-128.png");
background-repeat: no-repeat;
}
a.next-slide-arrow {
right: 20px;
left: auto;
background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png");
}
.navigation-arrows-container a.previous-slide-arrow:hover,
.navigation-arrows-container a.next-slide-arrow:hover {
opacity: 1;
}
.navigation-bullets-container {
text-align: center;
margin-top: 20px;
margin-bottom: 60px;
display: table-cell;
vertical-align: bottom;
position: relative;
}
.navigation-bullets-container span {
display: none;
}
.navigation-bullets-container a {
width: 20px;
height: 20px;
display: inline-block;
margin-right: 5px;
background: #4b4040;
}
.navigation-bullets-container a:hover {
background: black;
}
.navigation-bullets-container a.active {
background: black;
}
<div class="image-slideshow-container">
<img class="slider-image1" src="http://i992.photobucket.com/albums/af42/webtreatsetc/Textures%20Patterns%20Brushes%20from%20Webtreats/LightBlur.png" alt="pitcher!" />
<img class="slider-image2" src="http://m.rgbimg.com/cache1vNdB6/users/x/xy/xymonau/600/ooNRizq.jpg" alt="pitcher!" />
<img class="slider-image3" src="http://cdn.desktopwallpapers4.me/media/thumbs_400x250/3/23394.jpg" alt="pitcher!" />
<img class="slider-image4" src="http://papers.co/wallpaper/papers.co-sd19-sand-storm-gradient-blur-8-wallpaper.jpg" alt="pitcher!" />
<img class="slider-image5" src="http://m.rgbimg.com/cache1sw4YI/users/x/xy/xymonau/600/nxXqi9O.jpg" alt="pitcher!" />
<img class="slider-image6" src="http://previews.123rf.com/images/hospitalera/hospitalera0805/hospitalera080500016/3089997-Halftone-blue-pattern-with-little-dots-and-some-zoom-blur-applied--Stock-Photo.jpg" alt="pitcher!" />
</div>
<div class="first-viewport">
<a class="previous-slide-arrow" href="#"><</a>
<div class="navigation-bullets-container">
<a class="navigation-bullet1" href="javascript: changeImage(1)">
<span>Bullet</span>
</a>
<a class="navigation-bullet2" href="javascript: changeImage(1)">
<span>Bullet</span>
</a>
<a class="navigation-bullet3" href="javascript: changeImage(1)">
<span>Bullet</span>
</a>
<a class="navigation-bullet4" href="javascript: changeImage(1)">
<span>Bullet</span>
</a>
<a class="navigation-bullet5" href="javascript: changeImage(1)">
<span>Bullet</span>
</a>
<a class="navigation-bullet6" href="javascript: changeImage(1)">
<span>Bullet</span>
</a>
</div>
<a class="next-slide-arrow" href="#">></a>
</div>
EDIT: #EternalHour

Please use background instead of background-image and also give the width and height of the image.

You can add this background-size: contain; to the previous and next arrow classes.

Just add "background-size: 100% 50%;"
a.previous-slide-arrow,
a.next-slide-arrow {
display: table-cell;
vertical-align: middle;
position: relative;
color: transparent;
opacity: 0.7;
text-align: center;
/* =s */
left: 20px;
background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-left-128.png");
background-repeat: no-repeat;
background-size: 100% 50%;
}

It's because you are using a background url, in these circumstances you need to specify a width and height for the container. In this case a, otherwise it will not be visible.
a.previous-slide-arrow, a.next-slide-arrow {
height: 128px;
width: 128px;
...
}

Categories