How do I create a row of block elements with auto widths using text-align:justify, display: grid, column-count and/or other CSS properties?
mardi 28 juin 2016
How do I create a row of justified elements with fluid spacing using CSS?
How to compile sass to css in django at runserver time?
Change CSS based on current page in Rails?
lundi 27 juin 2016
Custom component using material-ui theme [on hold]
Using Material-UI
I want to create a custom component that uses some of the theme properties from the mui light theme.
How do I make the theme available?
Insert bulk product into woocommerce
Is it possible to insert many product in woocommerce at once time? The product in excel not CSV. around 1000++ products there.
Any plugin that I can do use it?
Thanks
Gettin Bootstrap 3 Datepicker widget above everything else
Custom cursor image doesn't work in all IEs?
I think I have tried different methods suggested all over the internet but nothing worked. This is my current css code:
div {
cursor: url(images/zoomin.cur), auto;
}
It works fine except in IE...
Issues with font/text-color in css
I keep having issues with the text-color rule in css whereas I'll have a code like this:
#horizontal > ul > li > a:hover {
background-color: rgb(255,101,101);
text-color: black;
And the background color will change, but the text remains blue.
How to align two commandButtons inside a form
I have two <p:commandButton> elements inside <h:form> in my .xhtml page.
How to align them center?
Element in completely different place in Firefox
I've got a video slider on this site http://fatdonut.ie/#projects . The problem I'm having is that the slider navigation controls , next and previous (#controls) are showing up in a completely different place in firefox . They should be just inside the slider , which they are in all other browsers
3 divs with overflow scroll wont fit in page max-height 100%
body,html{
max-height:100vh;
}
#content{
max-height:100%;
}
#div1,#div2,#div3{
background:#fff;
overflow-y:scroll;
max-height: 30%;
}
I'm having hard time to make it work.
For example "title2" should be overflow scroll but instead it keeps overflowing its parent. Wont fit in page max-height 100%.
https://jsfiddle.net/cbjkc4dg/1/
Mouse Scroll wheell is not worked when mouse over the i-fame of the page
In my website there is a i-frame in a area of the page. All the page the mouse scroll is working perfectly but when the mouse over the i-fame the mouse scroll is not worked. This problem is shown in chrome only but the Firefox bowers is worked properly. I can not find the solution yet.Please help me.i am feed up to find the solution.please help.
Bootstrap - Center Align Image in the tablet view
I have a row that shows 3 images in a row on a desktop view
[1] [2] [3]
On a tablet view, it appears like
[1] [2]
[3]
What I want is 3rd image to appear in the center and not on the left of the second row (on tablet)
classes on my divs containing images are
col-md-4 col-sm-6
Ideas ??
How to rotate + flip element with CSS
The transform property lets you rotate or flip, but how can you do both at the same time? Say I want to rotate an element 90 degrees and flip it horizontally? Both are done with the same property, so the latter overwrites the former. Here's an example fiddle for convenience:
transform: rotate(90deg);
transform: scaleX(-1);
CSS font faces from imported files
So i have got font face
@font-face {
font-family:Butler;
src: url(../fonts/OpenSans-Light.ttf);
}
And two files user.css and options.css so how can i use this font in both of them without adding this code in every file. I tried creating new file font.css with @font-face {
@font-face {
font-family:Butler;
src: url(../fonts/OpenSans-Light.ttf);
}
And then import it in my user.css,but it did not work for me
How to hide the menu bar during a popup?
I got a plugin called Touchy for touch devices, so the menu bar stays on the top. But I have integrated live chat on my website, so the menubar doesn't disappear no matter what, and on mobile devices, you won't be able to close the chat because of the menu bar. You'll know if you'd look at my website on your device. http://bestprojects.in. Is there anything that can be done? Could we hide the menubar during the chat popup?
Is it better to have more sepecific class names, or paths? [closed]
From an optimization stand point is it more efficient to have longer more specific chains like:
.first {
/*some css*/
}
.first .second{
/*some css*/
}
.first .second .third{
/*some css*/
}
.first .second .third .fourth{
/*some css*/
}
Or is it more efficient to make more unique/specific class names like:
.first {
/*some css*/
}
.first-second{
/*some css*/
}
.first-second-third{
/*some css*/
}
.first-second-third-fourth{
/*some css*/
}
Is there perhaps a tipping point somewhere where longer paths become less efficient than unique names and vice/versa ?
layout.ejs does not work in node
How can I make the following code in jade to work in ejs.
So that I can render a uniform view across all pages and also include common css and js files.
layout.ejs
block main-content
include scripts
scripts.ejs
<script type="text/javascript" src="/vendor/jquery/jquery.js">
<script type="text/javascript" src="/vendor/angular/angular.js">
index.ejs
extends ../includes/layout
block main-content
section.content
h1 hello world
Does ejs provide such a layout feature?
Overlay div with position absoulte and height 100% not moving with the scroll
please look here and click the on button.
.darkClass
{
background-color: white;
filter:alpha(opacity=90); /* IE */
opacity: 0.9; /* Safari, Opera */
-moz-opacity:0.9; /* FireFox */
z-index: 2000;
height: 100%;
width: 100%;
background-repeat:no-repeat;
background-position:center;
position: absolute;
top: 0;
left: 0;
}
You will see that the overlay div is covering the whole screen as desired, but when I scroll it isn't moving with the scrolling as expected.
I would like to see the grey overlay moving with my scrolling.
what am I missing here CSS-wise?
Place navbar above <p> element and image
I have this nav bar formatting on my webpage. 
The picture is the figure element. Here's the index.html and css file. Thanks!
Wordpress isn't pulling font-awesome fonts
I'm using the maxcdn font-awesome url: https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css
The CSS pulls in fine and points to the fonts as expected (I can go to the file's the css references and they are there). However, in Chrome, the fonts aren't listed as resource and all font-awesome characters are a square. I've tried adding the fonts locally but I get the same result.
I also tested it against TwentySixteen and it didn't work there either.
I get the same result if I host the fonts and css myself. I've tested the font location in the css file and it points to the fonts correctly.
CSS triangle custom border color
Attempting to use a custom hex color for my css triangle (border). However since it uses border properties I am unsure how to go about doing this. I would like to steer clear of javascript and css3 simply because of compatibility. I am trying to have the triangle have a white background with a 1px border (around the angled sides of the triangle) with color #CAD5E0. Is this possible? Here's what I have so far:
.container {
margin-left: 15px;
width: 200px;
background: #FFFFFF;
border: 1px solid #CAD5E0;
padding: 4px;
position: relative;
min-height: 200px;
}
.container:after {
content: '';
display: block;
position: absolute;
top: 10px;
left: 100%;
width: 0;
height: 0;
border-color: transparent transparent transparent #CAD5E0;
border-style: solid;
border-width: 10px;
}
My fiddle: http://jsfiddle.net/4ZeCz/
Chrome: CSS properties with float values always have locale specific comma
first of all my finding/problem:
I get invalid css property values on setting float values in chrome dev tools.
document.body.style.left = "3.2323%"
The body applies the css code, but converts it to a locale string (I am living in Germany). All other major browsers do not seem to have this problem.
I found old posts on chrome version 6 and 19, where this kind of problem occured.
Anyone has an idea how to fix that or where to report this kind of problem?
Best regards
Michael
edit 1: Screenshot
Scala.js - Inject contents of css file into an inline <style> tag
I am trying to build a web app (in Scala.js and ScalaReact) which is going to be added as a self-contained widget inside a larger web app, over which I have no control (cannot write things into the tag).
My app is going to contain a few pages with different CSS styles but also a collection of generic styles, which need to be loaded together with the widget.
My only option is to add inline tags dynamically but I can't find a way to read the contents of a CSS file and dump it in the tag at compilation time.
I've tried using ScalaCSS which can do the trick but its DSL is incomplete and doesn't meet my requirements even closely.
How can I trick Scala.js into generating tags with contents taken from local CSS files?
How to deselect the text entered when you click on label in firefox 47?
How to deselect the text entered when you click on label in firefox 47 ?
In most browsers, everything is OK, except for firefox.
The problem is as follows: Everything works well the first time you enter. But when you shoot INPUT focus, and you click on label is an allocation of the text as in the image below
my code - https://jsfiddle.net/zcdftr4g/
label{
-moz-user-focus: ignore;
}<label>Click me <input type="text" /></label>I would be glad of any help. Thank you
SVG Image opacity gradient
I'm using this bit of code in an .svg file to apply a opacity fade out gradient on an element. The following code works well, but fades from left to right instead of vertically from top to bottom.
What code change would I need to make to achieve this? Thanks for the help!
SVG file:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1"
baseProfile="full">
<mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<linearGradient id="g" gradientUnits="objectBoundingBox" x2="1">
<stop stop-color="white" offset="0"/>
<stop stop-color="white" stop-opacity="0" offset="1"/>
</linearGradient>
<rect x="0" y="0" width="1" height="1" fill="url(#g)"/>
</mask>
</svg>
CSS:
mask: url(/mypath/mask.svg#m1);
My CSS won't link to my HTML file
I am trying to build a simple website in Sublime Text Editor 2, however, my CSS file won't link to my HTML file and therefore printing plain text. My HTML code is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Christopher Olson</title>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,600,700" rel="stylesheet" />
<link rel="stylesheet" href="css/style.css" />
As far as I know, the last line is supposed to link the CSS file.
This is part of the CSS that I have:
body, input, textarea
{
font-family: 'Open Sans', sans-serif;
line-height: 1.85em;
color: #888;
font-weight: 300;
}
Any ideas to fix? Please help
EDIT: I have the tags, I just ran out of room to post it
dimanche 26 juin 2016
ios address bar triggered when angular ui router state changes
I am using Angular UI Router. Whenever I click on a link with ui-sref the address bar from ios mobile browser shows up. For example when I scroll down, the address bar hides and if I click on a link and the page transition finishes the ui address bar shows up instantly. This makes it less user friendly as the page suddenly shifts a little downwards because of the address bar.
This website http://www.etq-amsterdam.com has the same issue that I have.
I have found a website that doesn't have this issue although they are not using angular. http://www.trefectamobility.com
This does not happen on android chrome. And only happens in the ios safari. The version that I have tested in was ios 9.
I have tried overflow hidden but this is not the solution that I want because then the address bar is always visible.
What's triggering this behavior?
What's difference between author's style , reader's style, agent's style (or author, user, user-agent styles)
In the book "CSS the definitive guide" , Chapter 3 which is about "The Cascade" , the book says:
There are three origins: author, reader and user agent. Under normal circumstances, the author's styles win out over the reader's styles. !important reader's styles are stronger than any other styles, including !important author styles. Both author and reader styles override the user agent's default styles.
I got two questions to ask:
In CSS, What are author's style , reader's style and agent's style?? I really get confused about there three concepts.
According to the above words from the book, seems author's style is stronger than reader's style, but why with
!importantindicator, the reader's style is stronger than author's style?? I get confused about this.
There's another terminology for this: author, user and user-agent styles
CSS translate3d
Ive been searching th internet for a few hours now and I cant fins a solution for what I would like to do.
on the child I have:
top: auto;
bottom: 0;
padding: 1em;
height: 100%;
background: red;
color: #3c4a50;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,93px,0);
transform: translate3d(0,93px,0);
And on hover I have:
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
What this is doing is starting the Y axis from the top and pushing it down 93px.
I need that to be reversed and make it so it reveals 93px on the bottom. So I need it to start at the bottom and pull up vs starting at the top and pushing down.
I didnt go into detail with html because I didnt think it would matter for this. if its needed let me know.
I have found things saying use:
transform-origin: center bottom;
However this I have not been able to get to work.
Any help is appreciated, as always.
Cheers
Special behavior for simple browsers that doesn't depend on sniffing or js support
I wrote some js that does an elevator-like scroll to an anchor when you click on a link above it, using setInterval(). It also sets up a few sounds (rumble, ding.) Works great on PC browsers, but I'd never get it to work on mobile. For that, I just want it to link to the anchor.
Some mobiles don't do js, so detecting browser w/ js won't work, and I want to avoid using navigator.userAgent.
So I'm doing this:
HTML:
<a id=noop_me onClick="javascript:elevator_button();" href="#anchor">Elevator</a>
JS:
elevator_button() {
// set up the fancy scrolling, etc.
// Before returning, nullify the href=
document.getElementById ("noop_me").href = "javascript:void(0)";
}
non-js browsers ignore the js call, and simply follow the unmolested href link. I put the nullifier here and not in onLoad, so there'd be just one bifurcation point. This assumes that the js is always executed before the href is looked at.
So far it works nicely on my Pop Astro (& PCs.) Does anyone see problems with this? Such as w/ other mobiles? Or is it too good to be true?
I'm trying to make div to auto adjust horizontally in the middle by using margin
I looked through example at stack overflow whose problem where similar to mine but without success. I do not know what am I doing that is wrong but the div is not going to horizontally middle well so far it only works for certain resolution screen but if I load it to different screen its not in the middle so i use margin: 0 auto; but still didn't work.
HTML
<div class="margin">
<div class="BoxContainer">
<a href="https://medium.com/@sudeep_shahi"><div class="box"><img src="img/medium.png" alt="medium" style="width:100%;height:100%;"></div></a>
<a href="www.linkedin.com/in/sudeep-shahi-92375010a"><div class="box"><img src="img/linkdin.png" alt="linkdin" style="width:100%;height:100%;"></div></a>
<a href="https://www.instagram.com/westkinz/?hl=en"><div class="box"><img class="effect" src="img/instagram.png" alt="Itragram" style="width:100%;height:100%;"></div></a>
</div>
</div>
CSS
.margin{
margin-left: auto;
margin-right:auto;
margin-bottom: 5px;
background-color: #EBEBEB;
}
.boxContainer {
display:inline-block;
border:thick dotted #060;
margin: 0px auto 10px auto;
text-align: left;
background-color:#EBEBEB;
}
.box {
width: 300px;
height: 300px;
background-color:#EBEBEB;
display: inline-block;
}
.box :hover{
border-radius: 50%;
transform: rotate(360deg);
}
Transition property doesn't apply
On my page, clicking on a link brings a menu to the screen while pushing the page to make room for the menu. It's all animated with transition CSS property. For some reason though, some elements get correctly animated while others don't: specifically, the top bar gets no animation at all. Can anybody tell me why?
CSS
#top_menu {
position: absolute;
top: 0;
background: #eee;
padding: 20px;
width: 100%;
}
#mobile_menu {
position: absolute;
left: -280px;
background: #ddd;
width: 280px;
height: 100%;
z-index: 99;
}
.left_0 {
left: 0 !important;
}
.left_280 {
left: 280px !important;
}
.left_minus_280 {
left: -280px !important;
}
body,
.wrap,
#mobile_menu,
#top_menu {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
HTML
<div id='wrap'>
<div id='mobile_menu'>
mobile menu
</div>
<div id='top_menu'>
<a href='#'>menu</a>
</div>
</div>
JavaScript
$( '#top_menu a' ).click(function() {
$( "#mobile_menu, #top_menu, #wrap" ).removeClass();
if( $('#mobile_menu').css('left') == '-280px' ) {
$( "#mobile_menu" ).addClass( 'left_0' );
$( "#top_menu" ).addClass( 'left_280' );
$( ".wrap" ).addClass( 'left_280' );
}
else {
$( "#mobile_menu" ).addClass( 'left_minus_280' );
$( "#top_menu" ).addClass( 'left_0' );
$( ".wrap" ).addClass( 'left_0' );
}
});
How can I properly make this into an image border?
Since I'm not sure if this programmatic-wise or photo edit-wise, I'm posting this here. I apologize if I had to post this somewhere else.
Anyways, I'm trying to use the border-image property to make a nice border using this image:
But it's not really working out with me. I'm getting weird appearences. Here's my code:
#div{
-webkit-border-image: url("http://i.imgur.com/BL9Mb7a.gif") 30 repeat; /* Safari 3.1-5 */
-o-border-image: url("http://i.imgur.com/BL9Mb7a.gif") 30 repeat; /* Opera 11-12.1 */
border-image: url("http://i.imgur.com/BL9Mb7a.gif") 30 repeat;
border-width: 100px;
border-style: solid;
height: 200px;
width: 100px;
} <body>
<div id="div">Hello world!!!</div>
</body>So, I need some tips on fixing this. The results should turn out something like this (Not exactly, similarly):
Note that the width won't be defined. Could be extended
Pretty much, It should be repeating the middle part of the image and leaving the edges. But I'm getting a result of a newborn's drawings. So, is there any tips or solutions for this?? I've done research but none include my desires.
Skewing elements breaking in column-count configuration on chrome
Given a container with 3 columns using the css property column-count, and each column is skewed with transform: skewX(-15deg), if I apply another skew operation inside of the columns, starting from the 2nd column the affected elements become invisible.
I made a little example illustrating the problem: https://jsfiddle.net/yvkeax2s/4/
.outer {
background-color: #aaffaa;
margin: 50px;
height: 200px;
width: 510px;
column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count-gap: 20px;
-mozcolumn-count-gap: 20px;
-webkitcolumn-count-gap: 20px;
}
.inner {
display: inline-block;
width: 150px;
transform: skewX(-15deg);
background-color: #ff9999;
height: 100%;
}
.unskewed {
transform: skewX(15deg);
}
<div class="outer">
<div class="inner">
<div class="unskewed">skewed 1 <img src="http://placehold.it/40x20"></div>
raw text 1 <img src="http://placehold.it/40x20">
</div>
<div class="inner">
<div class="unskewed">skewed 2 <img src="http://placehold.it/40x20"></div>
raw text 2 <img src="http://placehold.it/40x20">
</div>
<div class="inner">
<div class="unskewed">skewed 3 <img src="http://placehold.it/40x20"></div>
raw text 3 <img src="http://placehold.it/40x20">
</div>
</div>
On Google chrome (Version 51.0.2704.103 m), I get the following:
On Firefox (47.0) I get the correct, expected result:
(The skewed blocks getting truncated seems to be another problem, which I currently don't care about, but might still be noteworthy)
This seems to be a bug in chrome with column-count, but is there a workaround to get this to work?
EDIT: I tested this on Version 53.0.2780.0 canary, and it worked, so the bug seems already fixed for the future.
Is it possible to increase the padding of an element while not affecting its border?
I have a navigation bar that includes the usual links, and to improve the user experience I have a bottom border show on hover:
I achieve this with the following code:
body {
background-color: #E9EBEE;
color: #666666;
margin: 0px;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
font-size: 16px;
}
.nav {
padding-top: 50px;
padding-bottom: 5px;
margin-top: 2em;
margin-bottom: 6em;
background-color: #F6F7F9;
color: #666666;
font-size: 1.5em;
line-height: 1.5;
text-align: center;
}
.nav > .links {
margin-top: -36px;
border-left: solid 1px #E9EBEE;
font-size: 0.8em;
}
.nav > .links > .link {
float: left;
position: inherit;
border-right: solid 1px #E9EBEE;
border-bottom-width: 2px;
width: 8em;
transition: border-color .2s;
}
.nav > .links > .link:hover {
border-bottom: solid;
border-bottom-color: #3B5998;
border-bottom-width: 2px;
color: #3B5998;
}<body>
<div class="nav">
<div class="links">
<div class="link">
Servers
</div>
</div>
</div>
</body>I'd like the border to be on the bottom of nav; to do this I added padding-bottom:11px; to .nav > .links > .link, which resulted in this:
The result is exactly what I wanted, however notice that the right and left borders of each navigation item has been extended; something that I should've realised would happen when adding the padding-bottom attribute to .nav > .links > .link.
To fix this I thought that I could use a border-bottom-height since there is a border-bottom-width but apparently no such thing exists, and I don't want to use an additional element if possible to provide the left & right borders. As seen in the first image, the left and right borders should be approximately the height of the text contained.
Is this possible without an additional 'wrapper' element?
How to disable modal auto close
How do i disable bootstrap auto disappear?
I was doing an error message using bootstrap modal what i want is let use to click the button to close the error message.
But i was facing is the modal will be call out but it will auto disappear after 2 to 3 sec left the backdrop background only.
This is my error message but if user didn't click the leave button it will disappear
Than it will be like this
How do i solve this?
Here is my bootstrap modal coding
if($check==0){
if($total_user_in_any_chatroom >=2) {
echo "<script>$(document).ready(function(){ $('#remind-user-chatroom').modal('show'); });</script>
<a href='chatrooms.php'>
<div class ='modal fade' id ='remind-user-chatroom' role ='dialog'>
<div class ='modal-dialog'>
<div class ='modal-content'>
<div class ='modal-header'>
<button type='class' class ='close' data-dismiss ='modal'>×</button>
<label class ='modal-title'>Reminder</label>
</div>
<div class ='modal-body'>
<span>This room is full. While waiting you can enter other chat roon.Thank You</span>
<div class ='submit-container'>
<button type='button' class='btn content-btn'>Ok</button>
</div>
</div>
</div>
</div>
</div>
</a>";
}else {
$update_status="INSERT INTO chatroom_user (`chatroom_id`,`user_id`)VALUES ('$chatroomid','$id')";
$check_status=mysqli_query($connection,$update_status)or die(mysqli_error($connection));
$count=mysqli_query($connection,"SELECT * from chatroom_user WHERE chatroom_id ='$chatroomid' ")or die(mysqli_error($connection));
$total_user_in_any_chatroom = mysqli_num_rows($count);
echo " Total User : ". $total_user_in_any_chatroom. " " ;
}
}else if($check >0){
if($chatroomID == $chatroomid) {
$count=mysqli_query($connection,"SELECT * from chatroom_user WHERE chatroom_id ='$chatroomid' ")or die(mysqli_error($connection));
$total_user_in_any_chatroom = mysqli_num_rows($count);
echo " Total User : ". $total_user_in_any_chatroom. " " ;
}
else if($chatroomID != $chatroomid){
echo "<script>$(document).ready(function(){ $('#remind-user-chatroom').modal('show'); });</script>
<a href='chatrooms.php'>
<div class ='modal fade' id ='remind-user-chatroom' role ='dialog'>
<div class ='modal-dialog'>
<div class ='modal-content'>
<div class ='modal-header'>
<button type='class' class ='close' data-dismiss ='modal'>×</button>
<label class ='modal-title'>Reminder</label>
</div>
<div class ='modal-body'>
<span>You haven't leave previous chatroom.Which is ".$chatroomname." Please leave it and re-enter back. Thank You</span>
<div class ='submit-container'>
<button type='button' class='btn content-btn'>Leave</button>
</div>
</div>
</div>
</div>
</div>
</a>";
}
}
else{
$count=mysqli_query($connection,"SELECT * from chatroom_user WHERE chatroom_id ='$chatroomid' ")or die(mysqli_error($connection));
$total_user_in_any_chatroom = mysqli_num_rows($count);
echo " Total User : ". $total_user_in_any_chatroom. " " ;
}
Positioning with absolute positions as percentages is putting things at a weird place
I'm trying to make labels on my tick marks on a HTML5 range input.
My attempt looks like this (JSFiddle):
<div style="height: 20px; width: 100%;">
<span style="position: absolute; left: 0%; text-align: center;">0.01</span>
<span style="position: absolute; left: 9.90991%; text-align: center;">1</span>
<span style="position: absolute; left: 19.9199%; text-align: center;">2</span>
<span style="position: absolute; left: 27.027%; text-align: center;">e</span>
<span style="position: absolute; left: 29.9299%; text-align: center;">3</span>
<span style="position: absolute; left: 39.9399%; text-align: center;">4</span>
<span style="position: absolute; left: 49.9499%; text-align: center;">5</span>
<span style="position: absolute; left: 59.96%; text-align: center;">6</span>
<span style="position: absolute; left: 69.97%; text-align: center;">7</span>
<span style="position: absolute; left: 79.98%; text-align: center;">8</span>
<span style="position: absolute; left: 89.99%; text-align: center;">9</span>
<span style="position: absolute; left: 100%; text-align: center;">10</span>
</div>
<input type="range" list="ticks" min="0" max="100" style="width: 100%;">
<datalist id="ticks">
<option>
0
</option>
<option>
9
</option>
<option>
19
</option>
<option>
27
</option>
<option>
29
</option>
<option>
39
</option>
<option>
49
</option>
<option>
59
</option>
<option>
69
</option>
<option>
79
</option>
<option>
89
</option>
<option>
100
</option>
</datalist>
</div>
I would expect that my spans would line up with the ticks on my range slider. However, they don't.
The misalignment seems to be in the labels, not the range input. When I inspect the elements in my Chrome inspector, the spans look like they're in the wrong place, even though their parent div looks like it has the right width.
Using jQuery UI Tooltip with custom arrow causes tooltip issue
I'm using Tooltip custom style plugin...
Now I want to display my tool tip message as displayed on these sites and as shown in the photo (e.g., with an arrow to be part of the tooltip):
I try to apply several CSS rules, but I'm still not able to get it to look the way I want... please help me. Here is my CSS code:
body .ui-tooltip {
border-width:0;
}
.ui-tooltip,.arrow:after {
background:black;
border:0 solid white;
}
.ui-tooltip {
padding:10px;
color:white;
border-radius:5px;
font-family:Verdana, sans-serif;
font-size:12px;
text-transform:none;
}
.arrow {
width:70px;
height:16px;
position:absolute;
left:0!important;
margin-left:-25px;
top:55%;
}
.arrow.top {
top:-16px;
bottom:auto;
}
.arrow.left {
left:20%;
}
.arrow:after {
content:"";
position:absolute;
left:20px;
top:-20px;
width:25px;
height:25px;
box-shadow:6px 5px 9px -9px black;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
tranform:rotate(45deg);
}
.arrow.top:after {
bottom:-20px;
top:auto;
}
.ui-tooltip {
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
filter:alpha(opacity=70);
opacity:0.7;
}
My display when I apply the above CSS code does not display a full tooltip:
But I want it to look like this, full size:
My CSS code arrow has problems and it's doesn't look like the example I provided.
Edit:
Arrow problem is ok now... but if you see wanted display it's not same as i want
.ui-tooltip {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity:0.7;
}
I guess they haven't above CSS code... could you any one suggest to how their transparent work
How to make a div with arrowlike side without css border tricks?
I want to make menu navigation bar with several inline-block li elements, each of them must have arrow-like right side. Like this:
I googled for it and the most common answer is to use css tricks with transparent border. Like this one: http://jsfiddle.net/jx99z/5/
html:
<div class="text">Some Text<span class="arrow"></span></div>
css:
.text {
background-color:#ff0000;
color:#fff;
display:inline-block;
padding-left:4px;
}
.arrow {
border-style: dashed;
border-color: transparent;
border-width: 0.20em;
display: -moz-inline-box;
display: inline-block;
/* Use font-size to control the size of the arrow. */
font-size: 100px;
height: 0;
line-height: 0;
position: relative;
vertical-align: middle;
width: 0;
background-color:#fff; /* change background color acc to bg color */
border-left-width: 0.2em;
border-left-style: solid;
border-left-color: #ff0000;
left:0.25em;
}
It seems pretty good, but when I try to add other elements with :hover, they don't look and behave properly: http://jsfiddle.net/txayr2j6/
html:
<div class="text">Some Text<span class="arrow"></span></div>
<div class="text">Some Text<span class="arrow"></span></div>
css:
.text {
background-color:#ff0000;
color:#fff;
display:inline-block;
padding-left:4px;
}
.arrow {
border-style: dashed;
border-color: transparent;
border-width: 0.20em;
display: -moz-inline-box;
display: inline-block;
/* Use font-size to control the size of the arrow. */
font-size: 100px;
height: 0;
line-height: 0;
position: relative;
vertical-align: middle;
width: 0;
background-color:#fff; /* change background color acc to bg color */
border-left-width: 0.2em;
border-left-style: solid;
border-left-color: #ff0000;
left:0.25em;
}
.text:hover {
background-color:#ccc;
border-left-color: #ccc;
}
Another solution, which I found, is that I can draw any element using svg (whatever that means) like this: http://codepen.io/anon/pen/OXWoXd
html:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon points="
0,0
0,200
270,200
300,100
270,0
150,0
" />
<div>Item 1</div>
</svg>
css:
svg polygon {
fill: transparent;
stroke: black;
stroke-width: 2px;
}
svg {
background-color: #ccc;
height: 50%;
}
body, html {
height: 100%;
margin: .2em;
}
But that solution is even worse: somehow I can't make element wider than 300 px and look at those ugly border and background. Also, I want that bar to be responsive. Thanks!
Bootstrap 3 : Content in a new row is not aligned
I'm trying to display content horizontally, but the result is not as expected.
The fifth column ("content 5") should appear on the bottom left, and be aligned with the content above.
Here is my code:
<!DOCTYPE html>
<html class="no-js" lang="fr"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>test</title>
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-6">
<h3>Content 1</h3>
<h4><a href="#">test</a></h4>
<p>test</p>
<p><span class="my-title">0,00 €</span></p>
</div>
<div class="col-md-3">
<h3>Content 2</h3>
<h4><a href="#">test</a></h4>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p><span class="my-title">638,25 €</span></p>
</div>
<div class="col-md-3">
<h3>Content 3</h3>
<h4><a href="#">tablo</a></h4>
<p>tablo tablo tablo tablo tablo tablo tablo tablo tablo </p>
<p><span class="my-title">555,00 €</span></p>
</div>
<div class="col-md-3">
<h3>Content 4</h3>
<h4><a href="#">stage castagnettes avec toto</a></h4>
<p>stage castagnettes avec toto</p>
<p><span class="my-title">57,50 €</span></p>
</div>
<div class="col-md-3">
<h3>Content 5</h3>
<h4><a href="#">reservation trop cool</a></h4>
<p>reservation trop cool</p>
<p><span class="my-title">50,00 €</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Bootstrap nested accordion font-awesome icons
I've a 3 level nested bootstrap accordion which is working fine, but I want a change in the panel-heading div where I can use a font-awesome icon fa fa-chevron-down when the accordion is opened (Without affecting the nested accordions) and fa fa-chevron-right when accordion is collapsed. I'm using this code to changing the icon:
$('div.panel-collapse.collapse').on('shown.bs.collapse', function () {
$(this).parent().find(".fa-chevron-right").removeClass("fa-chevron-right").addClass("fa-chevron-down");
$(this).parent().find('.panel-heading').css('background', '#0271BC');
}).on('hidden.bs.collapse', function () {
$(this).parent().find(".fa-chevron-down").removeClass("fa-chevron-down").addClass("fa-chevron-right");
$(this).parent().find('.panel-heading').css('background', '#02A4EF');
});
HTML:
<a href="#aspnetcore" class="accordion-toggle tutorial-panel-heading" data-toggle="collapse" data-parent="#accordion">
<div class="panel panel-default">
<div class="panel-heading outer web">
<h4 class="panel-title fonter font-light-text">
<i class="fa fa-chevron-down pull-right"></i> Getting Starting with ASP.NET Core 1.0
</h4>
</div>
<div id="aspnetcore" class="panel-collapse collapse outer-arrow">
<div class="panel-body">
<div class="panel-group" id="webdevelopment">
<a href="#frontend" class="accordion-toggle tutorial-panel-heading" data-toggle="collapse" data-parent="#webdevelopment">
<div class="panel panel-default">
<div class="panel-heading middle-link-web">
<h4 class="panel-title font-light-text">
<i class="fa fa-chevron-down pull-right"></i> Front-End
</h4>
</div>
<div id="frontend" class="panel-collpase collapse outer-arrow">
<div class="panel-body">
<div class="panel-group" id="webdevelopment">
<a asp-controller="Web" asp-action="Grunt" class="accordion-toggle lab-link">
<div class="panel panel-default">
<div class="panel-heading middle-link">
<h4 class="panel-title font-light-text">
Grunt Task Runner
</h4>
</div>
</div>
</a>
<a href="#angular" class="accordion-toggle tutorial-panel-heading inner-link" data-toggle="collapse" data-parent="#frontend">
<div class="panel panel-default">
<div class="panel-heading middle-link-web">
<h4 class="panel-title font-light-text">
<i class="fa fa-chevron-down pull-right"></i> Angular
2
</h4>
</div>
<div id="angular" class="panel-collpase collapse">
<div class="panel-body">
<a asp-controller="Web" asp-action="Angular" class="accordion-toggle lab-link">
<div class="panel panel-default">
<div class="panel-heading middle-link">
<h4 class="panel-title font-light-text">
Introduction to Angular 2
</h4>
</div>
</div>
</a>
</div>
</div>
</div>
</a>
<a class="accordion-toggle lab-link">
<div class="panel panel-default">
<div class="panel-heading middle-link">
<h4 class="panel-title font-light-text">
LESS and SASS <i class="fa fa-cog fa-spin fa-fw"></i>
</h4>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</a>
<a href="#backend" class="accordion-toggle tutorial-panel-heading" data-toggle="collapse" data-parent="#webdevelopment">
<div class="panel panel-default">
<div class="panel-heading middle-link-web">
<h4 class="panel-title font-light-text">
<i class="fa fa-chevron-down pull-right"></i> Back-End
</h4>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</a>
But this code also change the icons of the nested accordions which are not opened yet. Is there any better way to resolve this issue will be appreciated.
The shadow doesn't appear at bottom of equal height divs
I have a layout consisting of responsive boxes which have equal height. They have box-shadow but bottom shadow doesn't appear. I think it's because overflow:hidden for div#latest which is set to make boxes equal height as it is recommended in One True Layout Method.
HTML Code:
<div id="latest">
<div id="section-header"><h4>NEWS</h4></div>
<div class="row">
<div id="article-container" class="col-md-3 col-sm-3">
<div id="article">
<figure>
<img class="img-responsive" src="http://i.imgur.com/74aBLNQ.jpg" />
</figure>
<h4><a href="#">About surviving despite of everything</a></h4>
<div id="meta" class="row">
<div id="meta-category" class="col-md-9"><a href="#">CATEGORY</a></div>
<div id="meta-view" class="col-md-2 col-md-offset-1">124</div>
</div>
</div>
</div>
<div id="article-container" class="col-md-3 col-sm-3">
<div id="article">
<figure>
<img class="img-responsive" src="http://i.imgur.com/m0D77HS.jpg" />
</figure>
<h4><a href="#">About surviving despite of everything</a></h4>
<div id="meta" class="row">
<div id="meta-category" class="col-md-9"><a href="#">CATEGORY</a></div>
<div id="meta-view" class="col-md-2 col-md-offset-1">124</div>
</div>
</div>
</div>
<div id="article-container" class="col-md-3 col-sm-3">
<div id="article">
<figure>
<img class="img-responsive" src="http://i.imgur.com/995osiQ.jpg" />
</figure>
<h4><a href="#">About surviving despite of everything</a></h4>
<div id="meta" class="row">
<div id="meta-category" class="col-md-9"><a href="#">CATEGORY</a></div>
<div id="meta-view" class="col-md-2 col-md-offset-1">124</div>
</div>
</div>
</div>
<div id="article-container" class="col-md-3 col-sm-3">
<div id="article">
<figure>
<img class="img-responsive" src="http://i.imgur.com/JI7P0ZJ.jpg" />
</figure>
<h4><a href="#">About surviving despite of everything</a></h4>
<div id="meta" class="row">
<div id="meta-category" class="col-md-9"><a href="#">CATEGORY</a></div>
<div id="meta-view" class="col-md-2 col-md-offset-1">124</div>
</div>
</div>
</div>
</div>
</div>
<div id="latest">
<div id="section-header"><h4>MOST READ</h4></div>
<div class="row">
<div id="article-container" class="col-md-3 col-sm-3">
<div id="article">
<figure>
<img class="img-responsive" src="http://i.imgur.com/74aBLNQ.jpg" />
</figure>
<h4><a href="#">About surviving despite of everything</a></h4>
<div id="meta" class="row">
<div id="meta-category" class="col-md-9"><a href="#">CATEGORY</a></div>
<div id="meta-view" class="col-md-2 col-md-offset-1">124</div>
</div>
</div>
</div>
<div id="article-container" class="col-md-3 col-sm-3">
<div id="article">
<figure>
<img class="img-responsive" src="http://i.imgur.com/m0D77HS.jpg" />
</figure>
<h4><a href="#">About surviving despite of everything</a></h4>
<div id="meta" class="row">
<div id="meta-category" class="col-md-9"><a href="#">CATEGORY</a></div>
<div id="meta-view" class="col-md-2 col-md-offset-1">124</div>
</div>
</div>
</div>
<div id="article-container" class="col-md-3 col-sm-3">
<div id="article">
<figure>
<img class="img-responsive" src="http://i.imgur.com/995osiQ.jpg" />
</figure>
<h4><a href="#">About surviving despite of everything</a></h4>
<div id="meta" class="row">
<div id="meta-category" class="col-md-9"><a href="#">CATEGORY</a></div>
<div id="meta-view" class="col-md-2 col-md-offset-1">124</div>
</div>
</div>
</div>
<div id="article-container" class="col-md-3 col-sm-3">
<div id="article">
<figure>
<img class="img-responsive" src="http://i.imgur.com/JI7P0ZJ.jpg" />
</figure>
<h4><a href="#">About surviving despite of everything</a></h4>
<div id="meta" class="row">
<div id="meta-category" class="col-md-9"><a href="#">CATEGORY</a></div>
<div id="meta-view" class="col-md-2 col-md-offset-1">124</div>
</div>
</div>
</div>
</div>
</div>
CSS Code:
body {
background: #ebebeb;
}
#article-container {
padding: 1em;
}
#article {
padding: 0;
background: #FFF;
height: auto;
margin-bottom: -99999px;
padding-bottom: 99999px;
box-shadow: 0 1px 3px 0 rgba(0,0,0,.2)
}
#article figure {
max-width: 100%;
height: auto;
}
#article figure img {
/*height: 30%;*/
}
#article h4 {
padding: 1em;
}
#article h4 a{
text-decoration: none;
color: #000;
}
#article h4 a:hover {
text-decoration: underline;
}
#meta{
color: #ccc;
width:100%;
padding-left: 1em;
}
#meta a {
text-decoration: none;
color: #ccc;
}
#meta a:hover {
text-decoration: underline;
}
#latest {
padding-left:2em;
overflow: hidden;
}
#section-header {
height: 40px;
width:100%;
background: #FFF;
display:table;
border-left: 5px #FFC640 solid;
margin-left: 0;
margin-top:2em;
box-shadow: 0 1px 3px 0 rgba(0,0,0,.2)
}
#section-header h4 {
padding-left: 1em;
vertical-align:middle;
display:table-cell;
}
Here is the screenshot showing how the problem occurs:
Fiddle : https://jsfiddle.net/hkxmuxdq/1/
P.S. I am using Bootstrap 3.
How to remove vertical space in True North WordPress theme? [on hold]
I am trying to disappear the space between this boxes without success. Is there any way to do it with CSS? I used WP Boxer Pro plugin and True North theme.
How to vertically-align media-body content in Twitter Bootstrap?
Pseudo element ::before causing horizontal scroll bar
I'm having an issue getting rid of a horizontal scroll bar. I have my design setup with the sizing and positioning right, but I just want the overflow of the ::before image element trick to be hidden.
you can see what I mean here: http://192.99.37.125/~uptownlounge/
I tried adding overflow-x: hidden; to the body element, but it gets messed up on mobile. any other ideas??
Unusual anomalies on my website
How can i get this highly performant Side-nav ui-element to work in a react Progressive web app?
Space between link and icon, fontawesome
How to build a CSS template from scratch
I want to build a CSS template of my imagination: this means from SCRATCH.
I want to do it like if I'm doing it with a pen, but just with the mouse. I have no idea about this field (css),that's why I'm asking. Many developers had made fantastic templates that rocks.
I want to know how do you create your CSS templates? (if you did) Do you start them from scratch, using a framework, using an application? Is that hard or easy?
Simply how you do it?
SCSS/SASS no mapping/compiling into CSS
I'm quite a fresh Sass user and I'm trying to get off the ground using it. I like the SMACSS hierarchy and have tried to incorporate that into my project as you see in the image here:
However, no matter what I do, the main.scss file isn't mapped and doesn't translate into the main.css file. The only thing in the main.css file is
/*# sourceMappingURL=main.css.map*/
I've searched the web and haven't found an answer. Any Sass users out there with some advice?
samedi 25 juin 2016
Bootstrap apply nav-stacked if small screen
Let's say we have a simple navigation bar like this:
http://getbootstrap.com/components/#nav-pills
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
How can I add the class "nav-stacked" to it when the window or parent element is smaller than say 940px. Or even better: as soon as the navigation bar can't fit all elements in the same line anymore.
This would be pretty straight forward in javascript, but I'd like to see a pure css/html solution, but without adding @media queries to the bootstrap source code.
clip-path in IE or alternative ways to create a skew lines design
I am working on a one page html page below design (this is simplified version on main design. the main design is here ).
As you see there are three section (or more) that created by a div(or any other block-level element).
The bottom edge of each div is made of three connected line (two of them are diagonal and another is solid).
In each section can insert any html content and background-color of them is not specified and can different.
I searched many on the web and found that to create clipped div(box) should I use clip-path new css property. that's awesome for this purpose but it is very new and some of browsers (in their older versions) and IE (that is important for me) does not supported.
Even, by Clippy tools, I created a simple design of a section that you can see on CodePen.
Can anyone help me that How can I design this scheme where been supported in major browsers.
Update: I change the design picture for More clarity
How to select only items in the last row?
I was wondering how I can select the last items in a row. I know the nth selector is to select the last items, for example the last 3 items in a row:
.post-entry:nth-last-child(-n+3) { margin-bottom: 0; }
But this doesn't meet my needs. It works great if there are 3 items at the end of the last row, but when there are just 2 last posts, it isn't working.
When you delete one item in the above example, the layout is messed up:
What I would like to know is how to select the last item(s) in the last row without messing up my layout like the image above. Also, if there are only two or maybe one items left.
.post {
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 3px solid red;
}
.post img {
width: 100%;
}
.post:nth-last-child(-n+3) {
margin-bottom: 0;
border: none;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-md-4 post"><img src="http://placehold.it/300x200"></div>
<div class="col-md-4 post"><img src="http://placehold.it/300x200"></div>
<div class="col-md-4 post"><img src="http://placehold.it/300x200"></div>
<div class="col-md-4 post"><img src="http://placehold.it/300x200"></div>
<div class="col-md-4 post"><img src="http://placehold.it/300x200"></div>
<div class="col-md-4 post"><img src="http://placehold.it/300x200"></div>
<div class="col-md-4 post"><img src="http://placehold.it/300x200"></div>
<div class="col-md-4 post"><img src="http://placehold.it/300x200"></div>
<div class="col-md-4 post"><img src="http://placehold.it/300x200"></div>
</div>Here is my Codepen: http://codepen.io/anon/pen/aZpqbK
Bootstrap dropdown-item are not vertically stacked in Windows 8.1 but they are in windows 7
I'm using the following example where dropdown items are vertically stacked in windows 7 but not in windows 8.1. What may be missing? Both machines are using IE 11 and latest version of Chrome. Both browsers in windows 8.1 have the same issue. Both machines are using same latest versions of Bootstrap and jquery via Visual Studio 2015 in an ASP.NET Core CR2 app.
HTML:
<div class="dropdown open">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
Windows 8.1 shows following:
UPDATE
Both machines are using the same ASP.NET Core app project in VS2015 and both machines have the exact same bower.json file as shown below (that also shows that Bootstrap 4-alpha is loaded):
{
"name": "asp.net",
"private": true,
"dependencies": {
"jquery": "2.2.3",
"jquery-validation": "1.15.0",
"jquery-validation-unobtrusive": "3.2.6",
"bootstrap": "4.0.0-alpha.2"
},
"resolutions": {
"jquery": ">=1.8",
"jquery-validation": "1.15.0"
}
}
Moreover, the source view of the generated html file on both machines is showing the following stylesheets in <head>...</head> section and script tags at the bottom of the <body>...</body> section:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home Page - ASP.NET Core RC2 Test</title>
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="/css/site.css" />
</haed>
<body>
....
.....
<script src="/lib/jquery/dist/jquery.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="/js/site.js?v=EWaMeWsJBYWmL2g_KkgXZQ5nPe-a3Ichp0LEgzXczKo"></script>
</body>
Dynamic Highcharts Position
How to display highchart in dynamic position?
like this
here is my code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<?php
for ($i = 1; $i <= 8 ; $i++){
$datakategori[$i] = mysqli_query($conn, "SELECT kategori, nama_ins, ( (SUM(nilai)/COUNT(nilai)) / 4 )*100 as nilainya
FROM tb_nilai n
JOIN tb_ins i ON n.user_ins=i.user_ins
JOIN tb_kues k ON n.id_kues= k.id_kues
WHERE n.id_kues=$i GROUP BY n.user_ins ORDER BY nilainya DESC");
$getnamakategori[$i] = mysqli_query($conn, "SELECT kategori FROM tb_kues WHERE id_kues=$i");
$namakategori[$i] = array();
while($row_namakategori[$i] = mysqli_fetch_array($getnamakategori[$i])){
$namakategori[$i][] = $row_namakategori[$i]['kategori'];
}
$pointkategori[$i] = mysqli_query($conn, "SELECT kategori, nama_ins, ( (SUM(nilai)/COUNT(nilai)) / 4 )*100 as nilainya
FROM tb_nilai n
JOIN tb_ins i ON n.user_ins=i.user_ins
JOIN tb_kues k ON n.id_kues= k.id_kues
WHERE n.id_kues=$i GROUP BY n.user_ins ORDER BY nilainya DESC");
?>
<script type="text/javascript">
$(function () {
$('#container<?php echo $i?>').highcharts({
chart: {
type: 'bar'
},
title: {
text: '<?php echo $namakategori[$i][0];?>'
},
xAxis: {
categories: [
<?php
while($row_datakategori[$i] = mysqli_fetch_array($datakategori[$i])){
echo "'".$row_datakategori[$i]['nama_ins']."',";
}
?>
],
title: {
text: null
}
},
yAxis: {
min: 0,
max: 100,
title: {
text: 'Point',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' point'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
},
colorByPoint: true
},
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.2f}'
}
}
},
credits: {
enabled: false
},
series: [{
showInLegend: false,
name: 'Nilai',
data: [
<?php
while($row_pointkategori[$i] = mysqli_fetch_array($pointkategori[$i])){
echo $row_pointkategori[$i]['nilainya'].",";
}
?>
]
}]
});
});
</script>
</head>
<body>
<div id="container<?php echo $i;?>" style=" width: 700px; height: 500px; margin: 0 auto; display: inline;"></div>
<?php
}
?>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/themes/grid-light.js"></script>
</body>
</html>
SB Admin 2 Navbar doesn't collapse anymore after delete some content
After editing the SB Admin 2 bootstrap template, the sideNavbar doesn't collapse anymore. I've just deleted some graphs and timelines, and this happened. I've already seen some solutions here on stackoverflow, but nothing was useful. This is the code of the page, i just removed some modals in order to be able to post here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Dashboard</title>
<!-- Bootstrap Core CSS -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="../bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<!-- Timeline CSS -->
<link href="../dist/css/timeline.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="../bower_components/morrisjs/morris.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- jQuery -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php"><span class="glyphicon glyphicon-dashboard"></span> Admin Dashboard</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul style="padding-top:0px" class="dropdown-menu dropdown-alerts">
<li>
<div class="panel panel-default" style="margin:0px">
<div class="panel-heading">
<i class="fa fa-user fa-fw"></i> Last Registrations
</div>
</div>
</li>
<li style="margin-top:0px" class="divider"></li>
<?php
$query_registrations="SELECT username,reg_date,status FROM User ORDER BY reg_date DESC LIMIT 5;";
$ris_queryregistrations=mysqli_query($conn,$query_registrations);
while($rows_queryregistrations=mysqli_fetch_array($ris_queryregistrations)){
echo'<li>
<a href="#">
<div>';
if($rows_queryregistrations['status']=='online')
echo' <span class="label label-success"> '.$rows_queryregistrations['username'].' </span>';
else
echo' <span class="label label-danger"> '.$rows_queryregistrations['username'].' </span>';
echo'
<span class="pull-right text-muted small"> '.$rows_queryregistrations['reg_date'].'</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
';
}
?>
<a class="text-center" href="Users.php">
<strong>See All Users</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- /.dropdown-registrations -->
</li>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
</li>
<li>
<a href="#"><i class="fa fa-check"></i> Online Users <?php $nOnlineUsers=getNOnlineUsers($conn); echo"<span class='label label-success'>$nOnlineUsers</span>";?></a>
<ul class="nav nav-second-level">
<?php
$onlineUsers=getOnlineUsers($conn);
while($rows_OnlineUsers=mysqli_fetch_array($onlineUsers)){
echo'
<li>
<a href="#"><i class="fa fa-check"></i> <span class="label label-success"> '.$rows_OnlineUsers['username'].'</span></a>
</li>';
}?>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<a href="#"><i class="fa fa-wrench"></i> Online Admins <?php $nOnlineAdmins=getNOnlineAdmins($conn); echo"<span class='label label-primary'>$nOnlineAdmins</span>";?></a>
<ul class="nav nav-second-level">
<?php
$onlineAdmins=getOnlineAdmins($conn);
while($rows_OnlineAdmins=mysqli_fetch_array($onlineAdmins)){
echo'
<li>
<a href="#"><i class="fa fa-wrench"></i> <span class="label label-primary"> '.$rows_OnlineAdmins['username'].'</span></a>
</li>';
}?>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<a href="../../index.php"><i class="fa fa-home"></i> Home</a>
</li>
<li>
<a href="index.php"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a>
</li>
<li>
<a href="#"><i class="fa fa-user"></i> Users<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<a href="#" data-toggle="modal" data-target="#addUser"><i class="fa fa-plus"></i> Add User</a>
</li>
<li>
<a href="Users.php"><i class="fa fa-wrench"></i> Manage Users <span class="badge"><?php $nUsers=nRegisteredUsers($conn); echo" $nUsers"?></span></a>
</li>
<li>
<a href="seeLogins.php"><i class="fa fa-sign-in"></i> Logins <span class="badge"><?php $nLogins=nLogins($conn); echo" $nLogins"?></span></a>
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<a href="#"><i class="fa fa-link"></i> Links<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<a href="#" data-toggle="modal" data-target="#addLink"><i class="fa fa-plus"></i> Add Link</a>
</li>
<li>
<a href="Links.php"><i class="fa fa-wrench"></i> Manage Links <span class="badge"><?php $nlinks=nLinks($connh); echo" $nlinks"?></span></a>
</li>
<li>
<a href="reportedLinks.php"><i class="fa fa-warning"></i> Reported Links <?php $nReportedLinks=nReportedLinks($connh); if($nReportedLinks!=0)echo"<span class='label label-danger'>$nReportedLinks</span>";?></a>
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<a href="#"><i class="fa fa-tasks"></i> Categories<span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<a href="#" data-toggle="modal" data-target="#addCategory"><i class="fa fa-plus"></i> Add Category</a>
</li>
<li>
<a href="Categories.php"><i class="fa fa-wrench"></i> Manage Categories <span class="badge"><?php $nCategories=nCategories($connh); echo" $nCategories"?></span></a>
</li>
</ul>
<!-- /.nav-second-level -->
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Dashboard</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-user fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<?php
$regUsers=nRegisteredUsers($conn);
echo'<div class="huge">'.$regUsers.'</div>'; ?>
<div>Registrated Users!</div>
</div>
</div>
</div>
<a href="#" data-toggle="modal" data-target="#RegUModal">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
<!-- Modal Registrations-->
<div id="RegUModal" class="modal fade" role="dialog"><div class="modal-dialog"><!-- Modal content--><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">×</button><h4 style="color:black" class="modal-title"><b>Registrated Users</b></h4></div><div class="modal-body">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<td class="text-center"><b><i class="fa fa-user"></i> Username</b></td>
<td class="text-center"><b><i class="fa fa-calendar"></i> Registration Date</b></td>
<td class="text-center"><b><i class="fa fa-clock-o"></i> Registration Time</b></td>
</tr>
</thead>
<tbody>
<?php
$registrations="SELECT username,DATE(reg_date) AS Date, TIME(reg_date) AS Time,status FROM User ORDER BY Date DESC,Time DESC;";
$query_registrations=mysqli_query($conn,$registrations);
while($rows_registrations=mysqli_fetch_array($query_registrations)){
echo'<tr>';
if($rows_registrations['status']=='online')
echo'<td class="text-center"><span class="label label-success">'.$rows_registrations['username'].'</span></td>';
else
echo'<td class="text-center"><span class="label label-danger">'.$rows_registrations['username'].'</span></td>';
echo'<td class="text-center"><span class="label label-info">'.$rows_registrations['Date'].'</span></td>';
echo'<td class="text-center"><span class="label label-info">'.$rows_registrations['Time'].'</span></td>';
echo'</tr>';}?>
</tbody>
</table>
</div> <!-- Table Responsive -->
</div><!-- Modal Body -->
<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div></div></div></div>
<!-- Modal Registrations -->
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel panel-green">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-check fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<?php
$onlineUToday=nUsersToday($conn);
echo'<div class="huge"> '.$onlineUToday.'</div>'; ?>
<div>Users Today!</div>
</div>
</div>
</div>
<a href="#" data-toggle="modal" data-target="#OnlineUsers">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
<!-- Modal OnlineUsers-->
<div id="OnlineUsers" class="modal fade" role="dialog"><div class="modal-dialog"><!-- Modal content--><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">×</button><h4 style="color:black" class="modal-title"><b>Online Users Today <?php echo'<span class="label label-info"> '.date("d/m/y").' </span>'; ?></b></h4></div><div class="modal-body">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<td class="text-center"><b><i class="fa fa-user"></i> Username</b></td>
<td class="text-center"><b><i class="fa fa-clock-o"></i> Last Log Time</b></td>
</tr>
</thead>
<tbody>
<?php
$onlineuserstoday="SELECT DISTINCT User.username,status,TIME(MAX(log_time)) as Time from login,User where DATE(curdate()) = DATE(log_time) AND User.username=login.username GROUP BY User.username,status;";
$query_onlineuserstoday=mysqli_query($conn,$onlineuserstoday);
while($rows_onlineuserstoday=mysqli_fetch_array($query_onlineuserstoday)){
echo'<tr>';
if($rows_onlineuserstoday['status']=='online')
echo'<td class="text-center"><span class="label label-success">'.$rows_onlineuserstoday['username'].'</span></td>';
else
echo'<td class="text-center"><span class="label label-danger">'.$rows_onlineuserstoday['username'].'</span></td>';
echo'<td class="text-center"><span class="label label-info">'.$rows_onlineuserstoday['Time'].'</span></td>';
echo'</tr>';}?>
</tbody>
</table>
</div> <!-- Table Responsive -->
</div><!-- Modal Body -->
<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div></div></div></div>
<!-- Modal OnlineUsers -->
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel panel-yellow">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-tasks fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<?php
$ncategories=nCategories($connh);
echo'<div class="huge">'. $ncategories.'</div>'; ?>
<div>Categories</div>
</div>
</div>
</div>
<a href="#" data-toggle="modal" data-target="#Categories">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
<!-- Modal OnlineUsers-->
<div id="Categories" class="modal fade" role="dialog"><div class="modal-dialog modal-lg"><!-- Modal content--><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">×</button><h4 style="color:black" class="modal-title"><b>Categories</b></h4></div><div class="modal-body">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<td class="text-center"><b><i class="fa fa-tasks"></i> Name</b></td>
<td class="text-center"><b><i class="fa fa-book"></i> Description</b></td>
</tr>
</thead>
<tbody>
<?php
$getCategories="SELECT NameCategory,Description FROM Category ORDER BY NameCategory ASC;";
$query_getCategories=mysqli_query($connh,$getCategories);
while($rows_getCategories=mysqli_fetch_array($query_getCategories)){
echo'<tr>';
echo'<td class="text-center"><span class="label label-info">'.$rows_getCategories['NameCategory'].'</span></td>';
echo'<td class="text-center" style="word-break:break-all;"><span class="label label-default">'.$rows_getCategories['Description'].'</span></td>';
echo'</tr>';}?>
</tbody>
</table>
</div> <!-- Table Responsive -->
</div><!-- Modal Body -->
<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div></div></div></div>
<!-- Modal Categories -->
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel panel-red">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-link fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<?php
$nlinks=nLinks($connh);
echo'<div class="huge">'.$nlinks.'</div>'; ?>
<div>Links</div>
</div>
</div>
</div>
<a href="#" data-toggle="modal" data-target="#Links">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
<!-- Modal OnlineUsers-->
<div id="Links" class="modal fade" role="dialog"><div class="modal-dialog modal-lg"><!-- Modal content--><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">×</button><h4 style="color:black" class="modal-title"><b>Links</b></h4></div><div class="modal-body">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<td class="text-center"><b><i class="fa fa-link"></i> Name</b></td>
<td class="text-center"><b><i class="fa fa-book"></i> Description</b></td>
</tr>
</thead>
<tbody>
<?php
$getLinks="SELECT url,name,description FROM Link ORDER BY name ASC;";
$query_getLinks=mysqli_query($connh,$getLinks);
while($rows_getLinks=mysqli_fetch_array($query_getLinks)){
echo'<tr>';
echo'<td class="text-center"><a href="'.$rows_getLinks['url'].'"><span class="label label-info">'.$rows_getLinks['name'].'</span></a></td>';
echo'<td class="text-center" style="word-break:break-all;"><span class="label label-default">'.$rows_getLinks['description'].'</span></td>';
echo'</tr>';}?>
</tbody>
</table>
</div> <!-- Table Responsive -->
</div><!-- Modal Body -->
<div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button></div></div></div></div>
<!-- Modal Links -->
</div>
</div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-8">
</div>
<!-- /.col-lg-8 -->
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-warning fa-fw"></i> Reported Links <?php $nReportedLinks=nReportedLinks($connh); if($nReportedLinks!=0) echo'<span class="label label-danger">'.$nReportedLinks.'</span>'; ?>
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="list-group">
<?php
$reportedlinks="SELECT name,time FROM Link,reported WHERE Link.url=reported.url ORDER BY time DESC LIMIT 5;";
$query_reportedlinks=mysqli_query($connh,$reportedlinks);
while($rows_reportedlinks=mysqli_fetch_array($query_reportedlinks)){
echo'<a href="#" class="list-group-item">
<i class="fa fa-link fa-fw"></i> '.$rows_reportedlinks['name'].'
<span class="pull-right text-muted small"><em>'.$rows_reportedlinks['time'].'</em>
</span>
</a>';
}?>
</div>
<!-- /.list-group -->
<a href="reportedLinks.php" class="btn btn-default btn-block">View All Reports</a>
</div>
<!-- /.panel-body -->
</div>
</div>
<!-- /.col-lg-4 -->
</div>
<!-- /.row -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Metis Menu Plugin JavaScript -->
<script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- Morris Charts JavaScript -->
<script src="../bower_components/raphael/raphael-min.js"></script>
<script src="../bower_components/morrisjs/morris.min.js"></script>
<script src="../js/morris-data.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
</body>
</html>
Inscription à :
Articles (Atom)