Im trying to make my bottom sheet responsive to mobile and desktop. you can see in laptop the bottom sheet when you click new topic it works all fine:
But then lets see it in a mobile version(On a regular Iphone 5):
You can see its beyond terrible... My HTML For that view is(Minimized):
<div class="toolbar_new_topic" ng-if="authDataDesc!=null">
<md-button id="NEW_TOPIC_BUTTON" ng-click="showNewTopic($event)">
<ng-md-icon icon="add_box" style="fill: white" size="20" id="add_icon"></ng-md-icon>
<span id="text_new_topic" color="white">Create a New Topic</span>
</md-button>
</div>
And my CSS Is:
.listdemoListControls md-divider {
margin-top: 0;
margin-bottom: 0
}
.listdemoListControls md-list {
padding-top: 0
}
.listdemoListControls md-list-item ._md-list-item-inner>._md-list-item-inner>p,
.listdemoListControls md-list-item ._md-list-item-inner>p,
.listdemoListControls md-list-item>._md-list-item-inner>p,
.listdemoListControls md-list-item>p {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
body,
html {
background: #DDD
}
#MD-ICON-1 {
position: relative;
left: -40px;
bottom: -23px
}
.avatar_custom {
width: 20px;
height: 20px
}
.avatar_creator {
border-radius: 50%;
position: relative;
height: 30px;
top: 10px;
width: 30px
}
.toolbar_new_topic {
display: flex;
flex-direction: row;
justify-content: flex-end
}
#NEW_TOPIC_BUTTON {
background-color: #81C784;
font-weight: 700;
margin-right: 50px
}
span.views_icon {
position: relative;
top: 5px
}
span.replies_list.md-secondary.ng-binding {
position: relative;
left: -55px;
top: 18px
}
.user-avatar-wrapper {
padding: 0;
margin: 0;
height: 50px;
width: 50px;
border-radius: 50%;
min-width: 50px;
display: flex;
align-items: center
}
.tags a,
.tags li {
height: 24px;
line-height: 24px;
font-size: 11px
}
.search_autocomplete,
input#input-0 {
font-family: FontAwesome;
font-style: normal;
font-weight: 400;
text-decoration: inherit
}
.tags {
margin: 0;
padding: 0;
position: absolute;
right: 24px;
bottom: -12px;
list-style: none
}
.tags li {
float: left;
position: relative
}
.tags a:after,
.tags a:before {
content: "";
position: absolute;
float: left
}
.tags a {
float: left;
margin-left: 20px;
padding: 0 10px 0 12px;
background: #0089e0;
color: #fff;
text-decoration: none;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
-moz-border-radius-topright: 4px;
-webkit-border-top-right-radius: 4px;
border-top-right-radius: 4px
}
.tags a:before {
top: 0;
left: -12px;
width: 0;
height: 0;
border-color: transparent #0089e0 transparent transparent;
border-style: solid;
border-width: 12px 12px 12px 0
}
.tags a:after {
top: 10px;
left: 0;
width: 4px;
height: 4px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
background: #fff;
-moz-box-shadow: -1px -1px 2px #004977;
-webkit-box-shadow: -1px -1px 2px #004977;
box-shadow: -1px -1px 2px #004977
}
.tags a:hover {
background: #555
}
.tags a:hover:before {
border-color: transparent #555 transparent transparent
}
span.last_activity.ng-binding {
position: relative;
right: 129px
}
ul.tags {
position: absolute;
right: 1138px;
bottom: 20px
}
span.bookmark_icon {
position: relative;
right: 130px;
top: 1px
}
.user-avatar {
height: 50px;
width: 50px;
border-radius: 50%
}
md-list.ng-scope.md-whiteframe-24dp.flex-sm-55.flex-gt-sm-45.flex-gt-md-45 {
position: relative;
top: 25px;
left: 25px;
background: #EF5350
}
md-list-item.md-3-line.ng-scope.md-clickable {
background-color: #EF5350
}
.tags a {
position: relative;
left: 800px
}
Im currently Programming this website here so if you go there we can fix this problem real quick:
https://ide.c9.io/amanuel2/ng-fourm
Thanks for your time!
You need to use media queries in your CSS to target mobile device sizes. For example:
#media (max-width: 420px) {
/* your styles here */
}
Related
I'm a newbie and practicing dropdown menu using the following Youtube video https://www.youtube.com/watch?v=uFIl4BvYne0. Everything is working except the onclick function.
Can anyone point out where I'm going wrong?
function show(anything) {
document.querySelector('.textBox').value =
anything;
}
let dropdown = document.querySelector('.dropdown');
dropdown.onclick = function() {
dropdown.classList.toggle('active');
}
#import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
min-height: 100vh;
background: #fafafa;
}
.dropdown {
position: relative;
margin-top: 100px;
width: 300px;
height: 50px;
}
.dropdown::before {
content: "";
position: absolute;
right: 20px;
top: 15px;
z-index: 10000;
width: 8px;
height: 8px;
border: 2px solid #333;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(-45deg);
transition: 0.5s;
pointer-events: none;
}
.dropdown.active::before {
top: 22px;
transform: rotate(-225deg);
}
.dropdown input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100;
cursor: pointer;
background: #fff;
border: none;
outline: none;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
padding: 12px 20px;
border-radius: 10px;
}
.dropdown .option {
position: absolute;
top: 70px;
width: 100%;
background: #fff;
box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.05);
border-radius: 10px;
overflow: hidden;
/*display: none*/
;
}
.dropdown.active .option {
display: block;
}
.dropdown .option div {
padding: 10px 20px;
cursor: pointer;
}
.dropdown .option div:hover {
background: #62baea;
color: #fff;
}
<body>
<h2>Converter</h2>
<label>Litres</label>
<div class="dropdown">
<input type="text" class="textBox" placeholder="HTML" readonly>
<div class="option">
<div onlcick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
</div>
</div>
</body>
I have tried some fixes but couldn't find out the problem.
Note: I'm pretty new in this field.
You need to add addEventListener in order to append an action:
function show(anything) {
document.querySelector('.textBox').value =
anything;
}
let dropdown = document.querySelector('.dropdown');
dropdown.addEventListener('click', function(event) { // add click function
dropdown.classList.toggle('active'); // i don't know what class you want to change so i changed the background to a class to demonstrate the click
});
#import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
min-height: 100vh;
background: #fafafa;
}
.dropdown {
position: relative;
margin-top: 100px;
width: 300px;
height: 50px;
}
.dropdown::before {
content: "";
position: absolute;
right: 20px;
top: 15px;
z-index: 10000;
width: 8px;
height: 8px;
border: 2px solid #333;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(-45deg);
transition: 0.5s;
pointer-events: none;
}
.dropdown.active::before {
top: 22px;
transform: rotate(-225deg);
}
.dropdown input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100;
cursor: pointer;
background: #fff;
border: none;
outline: none;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
padding: 12px 20px;
border-radius: 10px;
}
.dropdown .option {
position: absolute;
top: 70px;
width: 100%;
background: #fff;
box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.05);
border-radius: 10px;
overflow: hidden;
/*display: none*/
;
}
.dropdown.active .option {
display: block;
background-color: grey;
}
.dropdown .option div {
padding: 10px 20px;
cursor: pointer;
}
.dropdown .option div:hover {
background: #62baea;
color: #fff;
}
<body>
<h2>Converter</h2>
<label>Litres</label>
<div class="dropdown">
<input type="text" class="textBox" placeholder="HTML" readonly>
<div class="option">
<div onlcick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
<div onclick="show('HTML')">HTML</div>
</div>
</div>
</body>
I have a bootstrap card that is adding chat bubbles to a list group. I want to align the content to the right so the bubble isn't just in the middle. I tried using align=right and wrapping that div tag in:
$("#messages").append($("<div align=right><div class=bubble-r><li></div></div><br />").text(msg));
but that didn't work. What am I missing?
$("#messages").append(
$("<div class=bubble-r><li></div><br />").text(msg)
);
} else {
$("#messages").append(
$("<div class=bubble><li></div> <br />").text(msg)
);
}
});
}
render() {
return (
<ul id="messages">
<div />
</ul>
);
}
CSS
.chat {
color: white;
}
.chat .dropdown-toggle:after {
content: none;
}
.userbutton {
size: 2px;
}
.card {
color: black;
}
.card-text {
overflow: auto;
height: 10rem;
}
.onlinebar {
position: "absolute";
color: red;
bottom: 0;
left: 0;
}
#chatbtn {
color: black;
width: 200px;
margin-left: 5px;
margin-top: 0px;
}
.chatcollapse {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#chatHeader {
margin: 0px;
padding: 0px;
}
#chatcard {
width: 2rem;
}
.card-deck .card {
max-width: calc(25% + 80px);
}
.card-body {
padding: 0px;
margin: 0px;
}
.bubble-r {
align-items: flex-end;
position: relative;
background: #0072c6;
max-width: 100px;
padding: 5px;
font-family: arial;
margin: 0 auto;
font-size: 14px;
color: white;
border-radius: 6px;
}
.bubble-r:after,
.bubble-r:before {
left: 100%; /*change this from right to left*/
top: 42%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.bubble-r:after {
border-color: rgba(200, 200, 204, 0);
border-left-color: #0072c6; /*change this from right to left */
border-width: 8px;
margin-top: -3px;
}
.bubble-r:before {
border-color: rgba(200, 204, 0, 0);
border-left-color: #0072c6; /*change this from right to left*/
border-width: 8px;
margin-top: -3px;
}
.bubble {
position: relative;
background: #cad5d7;
max-width: 100px;
padding: 5px;
font-family: arial;
margin: 0 auto;
font-size: 14px;
border-radius: 6px;
}
.bubble:after,
.bubble:before {
right: 100%;
top: 42%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.bubble:after {
border-color: rgba(255, 255, 204, 0);
border-right-color: #cad5d7;
border-width: 8px;
margin-top: -3px;
}
.bubble:before {
border-color: rgba(255, 204, 0, 0);
border-right-color: #cad5d7;
border-width: 8px;
margin-top: -3px;
}
I've spent a long time trying to get this working.
I have a section called "RightExtra" and a div inside it called "RightExtraContent". I'm trying to make it so that these two divs can move freely when the window is resized up to a certain point, without affecting the position of any other divs.
Here is a visual explanation of what I mean:
http://i.imgur.com/A3qBGsj.png
And here is the fiddle: http://jsfiddle.net/c21nzs13/1/
I've tried a bunch of different code combinations and still no success.
* {
padding: 0;
margin: 0;
}
html {
background: #1e1e1e;
/*Back Colors 1*/
}
body {
background-color: #1e1e1e;
/*background:url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/4657039731.jpg');*/
}
a {
color: #FFFFFF;
text-decoration: none;
}
a:active,
a:hover {
text-decoration: underline;
}
.nofancy a {
text-decoration: none;
}
/*These nofancies don't work*/
.nofancy a:hover {
text-decoration: none;
}
/*These nofancies don't work*/
#heady {
text-align: center;
width: 100%;
height: 75px;
background-color: #1e1e1e;
/*Back Colors 2*/
font-family: Tahoma;
font-size: 16px;
color: #000000;
position: relative;
margin-bottom: 30px;
}
#wrapper {
text-align: center;
width: 1000px;
height: 100%;
margin-left: auto;
margin-right: auto;
/*background-color:#1e1e1e; Back Colors 3*/
font-family: Tahoma;
font-size: 16px;
position: relative;
}
#RightExtra {
background-color: none;
width: 500px;
float: right;
margin-left: auto;
margin-right: auto;
position: relative;
}
#RightExtraContent {
font-family: Tahoma;
font-size: 16px;
height: 800px;
width: 300px;
color: white;
background-color: #343434;
text-align: center;
border-radius: 30px;
position: fixed;
float: right;
}
#followfoot {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 180px;
background-color: none;
text-align: center;
/*display:none;*/
}
#mag {
background-color: #739FE0;
border-color: #739FE0;
border-style: solid;
border-width: 2px;
border-radius: 20px;
line-height: 10px;
text-align: center;
margin-left: 8px;
cursor: pointer;
}
#feety {
text-align: center;
width: 100%;
height: 0px;
//100px background-color:darkslateblue;
/*Back Colors 4*/
font-family: Tahoma;
font-size: 16px;
color: white;
position: fixed;
//Changing this to relative makes followfoot disappear when you scroll long enough.
}
.UpCenter {
/*background-color:#1e1e1e; Back Colors 5*/
padding-top: 30px;
margin-bottom: 50px;
height: 90px;
}
.SignUp {
background-color: #ccc;
border-width: 1px;
border-color: #ccc;
border-radius: 10px;
width: 75px;
padding: 0px 0px;
margin-left: 30px;
text-align: center;
float: right;
}
/* clearfix */
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.cf:after {
clear: both;
}
.cf {
* zoom: 1;
}
ul.navbar {
border-style: solid;
border-width: 1px;
border-color: #739FE0;
width: 100px;
/*Widthchanger1*/
border-radius: 4px;
margin-left: 0px;
margin-right: 0px;
font-size: 14px;
height: 33px;
}
ul.navbar li a.ActiveListItem {
color: white;
!important;
background-color: #222 !important;
padding: 7.5px 0px !important;
font-weight: normal !important;
margin-left: 0px;
/*Widthchanger2, got the activeitem centered with list text this way*/
margin-right: 0px;
border-radius: 4px;
height: 18px;
width: 100px;
/*kinda messes with width of text*/
margin-bottom: 1px;
}
ul.navbar li {
position: relative;
width: 100px;
/*Changes width of actual list*/
}
ul.navbar li a {
display: block;
color: white;
padding: 10px 5px;
text-decoration: none;
transition: all .1s ease-in;
}
ul.navbar li a:hover,
ul.navbar li:hover > a {
/*background:black; */
background: #739FE0;
color: #FFFFFF;
/*font-weight:600;*/
/*border-bottom-color:#FFFFFF;
border-bottom-style:solid;*/
/*border-color:#FFFFFF;
border-style:solid;
border-width:1px; */
}
ul.navbar li ul {
margin-top: 0px;
/*Controls space from listdropdown to listchooser*/
position: absolute;
background: #222;
font-size: 14px;
/* min-width: 200px; */
display: none;
z-index: 99;
box-shadow: inset 0 0px 3px rgba(0, 0, 0, .6), 0 5px 10px rgba(0, 0, 0, .6);
}
ol,
ul {
list-style: outside none none;
}
.hidden {
display: none;
}
/*Lister*/
form {} .lister input {
width: 235px;
/*width of todo input box*/
height: 33px;
padding-left: 10px;
padding-right: 10px;
border-width: 1px;
border-style: solid;
border-color: #739FE0;
float: left;
margin-bottom: 20px;
font-size: 14px;
font-family: "Tahoma";
background-color: #222;
color: white;
}
.lister input:focus {
outline: none;
border-color: #739FE0;
/*ccc*/
box-shadow: 0px 0px 7px 0px #739FE0;
}
.lister ul {
/*list-style: square inside;*/
padding: 10px 0px 55px 0px;
/* padding for outside area of list*/
/* This is what's visible when not in use Used to be 10*/
/*height:50px;*/
/*background: #0f705d; DarkerOutsideColor*/
background: none;
/*width: 100%;*/
font-family: "Tahoma";
}
.active {
text-align: center;
}
.inactive {
display: none;
}
.lister li {
font-size: 14px;
/*font size of list items*/
/*font-weight: 600;*/
color: #181818;
/*Font Color d5faf3*/
display: inline-block;
/*This makes the items side-by-side and not columns*/
padding: 9px;
margin-bottom: 5px;
/*SEPARATE*/
/* float:left; Interferes with text-align of Active*/
}
.lister li:nth-child(odd) {
background: #343434;
/*LighterInside Color,Odd*/
border-color: #ccc;
border-width: 1px;
border-radius: 5px;
border-style: solid;
box-shadow: 0px 0px 10px 0px #000000;
color: #ccc;
/*opacity:0.6;
filter:alpha(opacity=60);*/
}
.lister li:nth-child(even) {
background: #343434;
/*LighterInside Color,Even*/
border-color: #ccc;
border-width: 1px;
border-radius: 5px;
border-style: solid;
box-shadow: 0px 0px 10px 0px #000000;
color: #ccc;
}
.lister li > a {
/*float: right;*/
text-decoration: none;
color: white;
font-weight: bold;
/*transition: all .2s ease-in-out;*/
/*position:relative;*/
margin-top: 2px;
display: inline-block;
}
.lister li > a:hover {
/*font-size: 105%;*/
/*color: #c0392b;*/
color: #000000;
}
.lister li > span {
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 379px;
}
/*Clearable*/
.clearable {
/*background: #fff; */
/*background:url(../images/splusgreen.png); */
background-repeat: no-repeat;
background-size: 10px 10px;
background-position: right 5px center;
/* -15*/
transition: background 0.4s;
}
.clearable.x {
/*background-position: right 5px center;*/
}
.clearable.onX {
cursor: pointer;
}
<section id="heady">
<div style="width:1000px;margin-left:auto;margin-right:auto;">
<div style="text-align: left;padding:25px 0px;display:inline-block;float:left;font-size:18px;"><b>Calories</b>
</div>
<div style="text-align: right;padding:25px 00px;display:inline-block;float:right;">
<!--Home | --> Sign In | Sign Up
</div>
</div>
</section>
<section id="RightExtra">
<div id="RightExtraContent">Yes hello....!</div>
</section>
<section id="wrapper">
<br>
<br>
<div class="UpCenter">
<div style="vertical-align:top;display:inline-block;">
<ul class="navbar cf">
<li> Category
<ul></ul>
</li>
</ul>
</div>
<div class="lister" style="display:inline-block;vertical-align:top;padding:0px 0px 0px 10px;">
<form action="">
<input type="text" class="clearable" placeholder="Add your meals here..." autocomplete="off">
</form>
</div>
<div id="mag" style="display:inline-block;vertical-align:top;">
<img src="images/magCircy.png" width="33px" height="33px" onClick="changeHeight(this,event);"></img>
</div>
</div>
</div>
</section>
<section id="followfoot"></section>
In order to achieve this, I increased the width of the wrapper and moved the new div into it.
I am new here, i need little help from you guys. I tried all the way to sort out this problem but found no way, hope someone can help me out.
here is my website http://www.newwebdemo.com/susan/
if you scroll down to section "What People Are Saying" where testimonials appears.
You will notice that left arrow is not appears but right one appears fine, even left side arrow box have arrow as well, but still not appears, can someone help me find where the issue is coming and why it is not appear.
Here is code section of that
<ul class="flex-direction-nav">
<li>
<a class="flex-prev" href="#"></a>
</li>
<li>
<a class="flex-next" href="#"></a>
</li>
</ul>
and here is css of it
.flex-direction-nav a {
width: 42px;
height: 42px;
font-size: 24px;
line-height: 42px;
margin-top: -21px;
border-radius: 5px;
border: 1px solid #e9e9e9;
background: #fff;
color: #b1b1b1;
text-shadow: none !important;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" !important;
opacity: 0 !important;
}
.flex-direction-nav a:hover {
background: #000;
color: #fff;
border-color: transparent;
}
.flex-direction-nav a.flex-prev {
left: 0 !important;
}
.flex-direction-nav a.flex-next {
right: 0 !important;
left: auto !important;
}
.flex-direction-nav a:before {
position: relative;
font-size: 30px;
font-family: fontello;
margin-top: -1px;
}
.flex-direction-nav a.flex-prev:before {
margin-left: 14px;
content: "î";
z-index:999999;
}
.flex-direction-nav a.flex-next:before {
margin-right: 14px;
content: "îž";
}
.mini .flex-direction-nav a {
border: none;
color: #fff;
background: #ccc;
background: rgba(0,0,0,.2);
}
.mini .flex-direction-nav a:before {
top: 1px;
}
.mini .flex-direction-nav a.flex-prev {
border-radius: 0 5px 5px 0;
}
.mini .flex-direction-nav a.flex-next {
border-radius: 5px 0 0 5px;
}
.mini .flex-direction-nav a:hover {
background: #000;
color: #fff;
border-color: transparent;
}
.flex-control-nav {
width: 100%;
left: 0;
bottom: auto;
}
.flex-control-nav li {
margin: 0 2px;
display: inline-block;
}
.flex-control-nav li a {
width: 7px;
height: 7px;
display: block;
background-color: #b9b9b9;
cursor: pointer;
text-indent: -9999px;
border-radius: 4px;
box-shadow: none !important;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" !important;
opacity: 0 !important;
}
.flex-control-nav li a.flex-active {
background-color: #e54939;
}
.nav-bullets-top .flex-control-nav {
top: -40px;
}
.nav-bullets-bottom .flex-control-nav {
bottom: -70px;
}
.flex-direction-nav a {
width: 42px;
height: 42px;
font-size: 24px;
line-height: 42px;
margin-top: -21px;
border-radius: 5px;
border: 1px solid #e9e9e9;
background: #fff;
color: #b1b1b1;
text-shadow: none !important;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" !important;
opacity: 0 !important;
}
.flex-direction-nav a:hover {
background: #000;
color: #fff;
border-color: transparent;
}
.flex-direction-nav a.flex-prev {
left: 0 !important;
}
.flex-direction-nav a.flex-next {
right: 0 !important;
left: auto !important;
}
.flex-direction-nav a:before {
position: relative;
font-size: 30px;
font-family: fontello;
margin-top: -1px;
}
.flex-direction-nav a.flex-prev:before {
margin-left: 14px;
content: "î";
z-index:999999;
}
.flex-direction-nav a.flex-next:before {
margin-right: 14px;
content: "îž";
}
.mini .flex-direction-nav a {
border: none;
color: #fff;
background: #ccc;
background: rgba(0,0,0,.2);
}
.mini .flex-direction-nav a:before {
top: 1px;
}
.mini .flex-direction-nav a.flex-prev {
border-radius: 0 5px 5px 0;
}
.mini .flex-direction-nav a.flex-next {
border-radius: 5px 0 0 5px;
}
.mini .flex-direction-nav a:hover {
background: #000;
color: #fff;
border-color: transparent;
}
.flex-control-nav {
width: 100%;
left: 0;
bottom: auto;
}
.flex-control-nav li {
margin: 0 2px;
display: inline-block;
}
.flex-control-nav li a {
width: 7px;
height: 7px;
display: block;
background-color: #b9b9b9;
cursor: pointer;
text-indent: -9999px;
border-radius: 4px;
box-shadow: none !important;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" !important;
opacity: 0 !important;
}
.flex-control-nav li a.flex-active {
background-color: #e54939;
}
.nav-bullets-top .flex-control-nav {
top: -40px;
}
.nav-bullets-bottom .flex-control-nav {
bottom: -70px;
}
flex-prev not showing arrow, however flex-next class is showing fine the arrow
both contain css classes working, not sure what else is causing here....
Do one thing go to the demo of flexslider.right click then click on view page source.after that go into the source of the demo and locate flexslider.css.just copy the css code into your flexslider.css code.then google look for bg_direction_nav.png flexslider.
You'll find two arrow image.download it into your system.then go to flexslider.css and change on line 51:
.flex-direction-nav a {
width: 30px;
height: 30px;
margin: -20px 0 0;
display: block;
background: url(images/bg_direction_nav.png) no-repeat 0 0;
position: absolute; top: 50%; cursor: pointer;
text-indent: -9999px;
opacity: 0;
-webkit-transition: all .3s ease;
}
Change background:url(point to the newly saved image)
Then save everything.refresh page and u'll get the arrows.
If you post useful please log on to www.facebook.com/brightinfoway and like that page. It is a request. Thanks
I'm using jCarousel and there's a weird bug on my page and I can't figure it out! Essentially, I'm trying to overlay a <div> on top of my carousel.
When I place the <div> on top, this weird gap pops up on top of the carousel! I don't know where it's coming from. Is it in the JavaScript?
The black box, I can format later. Just need to know why the white space is appearing.
JsFiddle from the bug
HTML
<div class="carousel-wrapper">
<div class="jcarousel-wrapper">
<div class="jcarousel">
<ul>
<li>
<img src="http://placekitten.com/850/500" width="850" height="500" alt="">
</li>
<li>
<img src="http://placekitten.com/850/500" width="850" height="500" alt="">
</li>
<li>
<img src="http://placekitten.com/850/500" width="850" height="500" alt="">
</li>
</ul>
</div>
‹
›
<p class="jcarousel-pagination"></p>
</div>
</div>
CSS
#login-carousel-wrapper {
width: 850px;
height: 500px;
margin: 0px auto;
}
#login-carousel-area {
background-color: #000;
z-index: 999;
width: 200px;
height: 200px;
position: relative;
top: 200px;
left: 100px;
}
#body-wrapper {
width: 970px;
height: 100%;
margin: 0px auto;
text-align: top;
}
.carousel-wrapper {
max-width: 850px;
/*padding: 0 20px 40px 20px;*/
margin: auto;
}
.jcarousel-wrapper {
margin: 20px auto;
position: relative;
border: 10px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;
}
.jcarousel-wrapper .photo-credits {
position: absolute;
right: 15px;
bottom: 0;
font-size: 13px;
color: #fff;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
opacity: .66;
}
.jcarousel-wrapper .photo-credits a {
color: #fff;
}
/** Carousel **/
.jcarousel {
position: relative;
overflow: hidden;
width: 850px;
height: 500px;
}
.jcarousel ul {
width: 20000em;
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
.jcarousel li {
float: left;
}
/** Carousel Controls **/
.jcarousel-control-prev, .jcarousel-control-next {
position: absolute;
top: 200px;
width: 30px;
height: 30px;
text-align: center;
background: #4E443C;
color: #fff;
text-decoration: none;
text-shadow: 0 0 1px #000;
font: 24px/27px Arial, sans-serif;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 0 0 2px #999;
-moz-box-shadow: 0 0 2px #999;
box-shadow: 0 0 2px #999;
}
.jcarousel-control-prev {
left: -50px;
}
.jcarousel-control-next {
right: -50px;
}
.jcarousel-control-prev:hover span, .jcarousel-control-next:hover span {
display: block;
}
.jcarousel-control-prev.inactive, .jcarousel-control-next.inactive {
opacity: .5;
cursor: default;
}
/** Carousel Pagination **/
.jcarousel-pagination {
position: absolute;
bottom: 0;
left: 15px;
}
.jcarousel-pagination a {
text-decoration: none;
display: inline-block;
font-size: 11px;
line-height: 14px;
min-width: 14px;
background: #fff;
color: #4E443C;
border-radius: 14px;
padding: 3px;
text-align: center;
margin-right: 2px;
opacity: .75;
}
.jcarousel-pagination a.active {
background: #4E443C;
color: #fff;
opacity: 1;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
}
Live Demo
If you are talking about the 20px white line in the top, that comes from .jcarousel-wrapper's margin: 20px auto;.
Just change 20px to 0px or add a new line overwriting margin-top if you want to keep the bottom margin:
.jcarousel-wrapper {
margin: 20px auto;
margin-top: 0px;
}