I'm quite new to javascript & jquery and wanted to use the snappuzzle plugin:
snappuzzle plugin
I thought that i should just download & link in my html-file to jquery, jquery ui & the snappuzle.js, as well as link to a code.js file where i put the $(document).ready()(
But somehow I can't seem to figure out what to do exactly to implement this plugin - both in my html as well as what i should do with the javascript
Can anyone help me?
Edit: Do you know if it's possible to change the background/template picture of the puzzle? As in, I would like to use another picture as the source of the template than the puzzle itself. I can't seem to find the code that does that..
$(document).ready(function() {
});
body {
font-family: 'Roboto', sans-serif;
background: #ee9ca7; /* fallback for old browsers */
background: -webkit-linear-gradient(to left, #ee9ca7 , #ffdde1); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to left, #ee9ca7 , #ffdde1); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
* {
margin: 0;
padding: 0;
}
.ref_imgWrap {
max-width: 200px;
margin: 0 auto;
overflow: hidden;
margin-top: 1em;
position: relative;
}
.ref_imgWrap img {
max-width: 100%;
float: left;
height: auto;
}
.contRofl_clr,
.wrap {
width: 100%;
float: left;
}
.restartPuzzleWrap {
width: 100%;
float: left;
text-align: center;
padding: 1em 0;
}
.restart_puzzleX999 {
padding: 1.6em;
display: inline-block;
background: orange;
color: #ffffff;
letter-spacing: 1px;
font-weight: 300;
border-radius: 2px;
cursor: pointer;
-webkit-box-shadow: 1px 1px 6px 0px rgba(50, 50, 50, 0.35);
-moz-box-shadow: 1px 1px 6px 0px rgba(50, 50, 50, 0.35);
box-shadow: 1px 1px 6px 0px rgba(50, 50, 50, 0.35);
}
.snappuzzle-piece {
-webkit-box-shadow: 1px 1px 6px 0px rgba(50, 50, 50, 0.35);
-moz-box-shadow: 1px 1px 6px 0px rgba(50, 50, 50, 0.35);
box-shadow: 1px 1px 6px 0px rgba(50, 50, 50, 0.35);
}
/* required snapPuzzle styles */
.puzzleX999_paddedWrap {
width: 100%;
float: left;
position: relative;
overflow: hidden;
}
.puzzleX999_imgWrap {
max-width: 560px;
padding: 5%;
padding-top: 0;
margin: 0 auto;
box-sizing: border-box;
position: relative;
}
.puzzleX999_imgWrap img {
max-width: 100%;
float: left;
height: auto;
}
.puzzleX999_relWrap {
position: relative;
display: block;
max-width: 500px;
float: left;
}
#puzzleX999_Main {
width: 100%;
float: left;
}
.snappuzzle-wrap {
position: relative;
display: block;
}
/*snappuzzle-pile { position: relative; }*/
.snappuzzle-piece {
cursor: move;
}
.snappuzzle-slot {
position: absolute;
background: #fff;
opacity: .8;
}
.snappuzzle-slot-hover {
background: #eee;
}
<!DOCTYPE html>
<head>
<title>Test puzzle</title>
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
<script src="code.js"></script>
<script src="jquery-3.2.1.min.js"></script>
<script src="jquery-ui-1.12.1.js"></script>
<script src="jQuery-snapPuzzle.js"></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js'></script>
</head>
<body>
<div class="contRofl_clr">
<div class="ref_imgWrap">
<img src="https://images.unsplash.com/photo-1462524500090-89443873e2b4?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=991&h=661&q=80" alt="" />
</div>
<div class="restartPuzzleWrap">
<span class="restart_puzzleX999">
Restart Puzzle
</span>
</div>
</div>
<div class="puzzleX999_paddedWrap">
<div class="puzzleX999_imgWrap">
<img class="puzzleX999_img" src="https://images.unsplash.com/photo-1462524500090-89443873e2b4?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=991&h=661&q=80" alt="" />
<div id="puzzleX999_Main">
</div>
</div>
</div>
</body>
</html>
Related
Hi Everyone!
I want to make an editor for my website with functions like working light/dark toggle button, Working editor that really shows the result and Syntax Hilighting. I have made the frame of the editor...
function compile(){
var html = document.getElementById("html");
var css = document.getElementById("css");
var js = document.getElementById("js");
var code = document.getElementById("code").contentWindow.document;
document.body.onkeyup = function(){
code.open();
code.writeln(html.value+"<style>"+css.value+"<\/style>" + "<script>"+js.value+"<\/script>")
code.close();
}
}
compile();
* {
padding: 0;
margin: 0;
outline: 0;
}
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-thumb:hover {
background: #444444;
}
::-webkit-scrollbar-thumb {
border-radius: 30px;
background: #666666;
box-shadow: inset 2px 2px 2px rgba(255,255,255,.25), inset -2px -2px 2px rgba(0,0,0,.25);
}
::-webkit-scrollbar-track {
background-color: #fff;
background: linear-gradient(to right,#ff1010,#201c29 1px,#100e17 1px,#100e17);
}
textarea ::-webkit-scrollbar {
width: 8px;
}
textarea ::-webkit-scrollbar-thumb {
border-radius: 30px;
background: #666666;
box-shadow: inset 2px 2px 2px rgba(255,255,255,.25), inset -2px -2px 2px rgba(0,0,0,.25);
}
textarea ::-webkit-scrollbar-track {
background-color: #fff;
background: linear-gradient(to right,#ff1010,#201c29 1px,#100e17 1px,#100e17);
}
header#playground_header {
background: #1e1f26;
height: 65px;
}
header#playground_header > h1 {
padding: 0;
text-align: center;
color: #fff;
font-weight: 700;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
line-height: 35px;
font-family: 'IBM Plex Sans', sens-serif;
}
iframe#code {
bottom: 0;
position: relative;
width: 100%;
height: 40vh;
border: unset;
background: #f2f4f6;
}
.prism-live {
min-height: 350px;
overflow-x: hidden;
width: 100%;
}
div#coding_area > div {
width: 100%;
border-left: 15px solid #555865;
}
div#coding_area > div:first-child {
border-left: none;
}
div#coding_area {
width: 100%;
height: calc(60vh - 60px);
min-height: 125px;
display: flex;
overflow: hidden;
border-bottom: 15px solid #555865;
}
textarea {
font-size: 15px;
color: #fff;
background: #000000;
}
div#code_output {
height: 100%;
}
<head>
<title>Coding Playground | #Programmer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght#500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://codemirror.net/mode/xml/xml.js"></script>
<script src="https://codemirror.net/mode/css/css.js"></script>
<script src="https://codemirror.net/mode/javascript/javascript.js"></script>
</head>
<body>
<div id="coding_playground_outer">
<header id="playground_header">
<h1>Coding Playground | #Programmer</h1>
</header>
<hr color="#fff">
<div class="page-wrap twilight">
<div class="boxes">
<div id="coding_area">
<textarea id="html" placeholder="HTML" class="prism-live language-html"></textarea>
<textarea id="css" placeholder="CSS" class="prism-live language-css"></textarea>
<textarea id="js" placeholder="JavaScript" class="prism-live language-js"></textarea>
</div>
<div id="code_output">
<iframe id="code"></iframe>
</div>
</div>
</div>
</div>
<body>
This code is 65% working as I imagined it. Just need a working toggle light/dark switch button now and a Syntax Hilight. Please help me as soon as possible...
I am creating a radial gauge for a dashboard. The following code is my work.
I need to know how to make the starting angle of this to be 15 degrees and how to make the ending angle 165 degrees. Please help me with it.
I need to implement this system so looking forward to getting this done.
I also need to add the tick marks t this. How can I do it? I am trying to use Chart JavaScript for that so please guide me on how can i do it?
Regards.
body {
background: #fff;
}
#radial:before {
background: yellowgreen;
border-radius: 220px 220px 0 0;
/* box-shadow: 3px 1px 8px rgba(2, 1, 1, 0.15) inset; */
content: "";
height: 100px;
position: absolute;
width: 350px;
}
#radial {
border-radius: 400px 400px 0 0;
height: 100px;
margin: 50px auto 0;
overflow: hidden;
position: relative;
width: 200px;
}
#radial:after {
background: rgb(255, 255, 255);
border-radius: 140px 140px 0 0;
bottom: 0;
box-shadow: 3px 1px 8px rgba(0, 0, 0, 0.15);
/* color: rgba(255, 80, 0, 0.7); */
content: "";
font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 3.5em;
font-weight: 100;
height: 70px;
left: 30px;
line-height: 95px;
position: absolute;
text-align: center;
width: 140px;
}
#needle {
background: radial-gradient(black, red);
border-radius: 8px;
bottom: -4px;
/* box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.4); */
display: block;
height: 8px;
position: absolute;
width: 100px;
transform-origin: 100% 4px;
transform: rotate(0deg);
transition:4s ;
z-index: 2;
/* border-top-left-radius: 5px;
border-top-right-radius: 5px; */
clip-path: polygon(100% 0%, 0% 50%, 100% 100% );
}
#radial:hover span {
transform: rotate(180deg);
}
/* h1,
p,
strong {
display: block;
font-family: Lato;
text-align: center;
}
h1 {
margin-bottom: 0.1em;
}
p {
margin-top: 0;
}
strong {
color: #be1e1e;
font-size: 2.5em;
} */
<html>
<head>
<tite></tite>
<link rel="stylesheet" href="GaugeCss_last.css">
<!-- <script type="text/javascript"></script> -->
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
</head>
<head>
</head>
<body>
<div id="radial" data-value="0">
<span id="needle" value="8"></span>
</div>
</body>
<script>
</script>
</html>
Please check may be you want this
body {
background: #fff;
}
#radial:before {
background: yellowgreen;
border-radius: 220px 220px 0 0;
/* box-shadow: 3px 1px 8px rgba(2, 1, 1, 0.15) inset; */
content: "";
height: 100px;
position: absolute;
width: 350px;
}
#radial {
border-radius: 400px 400px 0 0;
height: 100px;
margin: 50px auto 0;
overflow: hidden;
position: relative;
width: 200px;
}
#radial:after {
background: rgb(255, 255, 255);
border-radius: 140px 140px 0 0;
bottom: 0;
box-shadow: 3px 1px 8px rgba(0, 0, 0, 0.15);
/* color: rgba(255, 80, 0, 0.7); */
content: "";
font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 3.5em;
font-weight: 100;
height: 70px;
left: 30px;
line-height: 95px;
position: absolute;
text-align: center;
width: 140px;
}
#needle {
background: radial-gradient(black, red);
border-radius: 8px;
bottom: -4px;
/* box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.4); */
display: block;
height: 8px;
position: absolute;
width: 100px;
transform-origin: 100% 4px;
transform: rotate(15deg);
transition:4s ;
z-index: 2;
/* border-top-left-radius: 5px;
border-top-right-radius: 5px; */
clip-path: polygon(100% 0%, 0% 50%, 100% 100% );
}
#radial:hover span {
transform: rotate(165deg);
}
/* h1,
p,
strong {
display: block;
font-family: Lato;
text-align: center;
}
h1 {
margin-bottom: 0.1em;
}
p {
margin-top: 0;
}
strong {
color: #be1e1e;
font-size: 2.5em;
} */
<html>
<head>
<tite></tite>
<link rel="stylesheet" href="GaugeCss_last.css">
<!-- <script type="text/javascript"></script> -->
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
</head>
<head>
</head>
<body>
<div id="radial" data-value="0">
<span id="needle" value="8"></span>
</div>
</body>
<script>
</script>
</html>
You need to change 2 things at your css
1 - for ID #needle
transform: rotate(15deg);
2 - for hover #radial:hover span
transform: rotate(165deg);
I cannot seem to figure out what the jQueryUI resizable function is doing to cause the anchor point of the "chat box" div element I've created. The problem is that when you resize this element by dragging the top right corner, it does resize correctly, but when you press the close button to play the jQuery animation to collapse it, it will collapse in the wrong direction. If you do not resize the box at all then this collapse animation works correctly.
There seems to be another problem where resizing it causes the box to jump higher on the page, but this only seems to happen on Google Chrome, Firefox works fine, and not sure why!
Try resizing the box and then closing it to see the problem:
$(document).ready(function() {
// controls resizing of the chat box
$('.chat_box').resizable({
handles: 'n, e, ne',
minWidth: 300,
minHeight: 100,
maxWidth: 700,
maxHeight: 500,
});
});
function minimize(chatId) {
var bottom_bar = document.getElementById("bottom_bar");
var box = bottom_bar.getElementsByClassName("chat_box")[chatId];
var bar = bottom_bar.getElementsByClassName("chat_bar")[chatId];
bar.className = "chat_bar chat_box_minimized";
$(box).stop().animate({
height: "0px",
width: bar.offsetWidth,
},
'normal', function() {
$(box).hide();
}
);
}
#bottom_bar {
position: fixed;
z-index: 10;
bottom: 0px;
left: 0px;
right: 0px;
max-height: 40px;
background-color: #0042b3;
padding: 2px 20px;
}
div.chat_box {
position: fixed;
width: 350px;
height: 180px;
margin: 0px 4px;
bottom: 45px;
}
div.close_btn {
position: absolute;
top: 0px;
right: 0px;
width: 30px;
height: 100%;
}
div.close_btn:before {
content: 'x';
display: block;
text-align: center;
vertical-align: middle;
line-height: 25px;
font-weight: bold;
font-family: Arial, sans-serif;
pointer-events: none;
}
div.close_btn:hover {
background-color: rgba(0, 9, 26, 0.8);
cursor: pointer;
}
div.chat_box_maximized {
background-color: white;
width: 350px;
margin: 5px 0px;
padding: 2px;
border: 3px solid #0045cc;
border-radius: 5px;
display: inline-block;
}
div.chat_box_maximized input {
width: 100%;
border: none;
}
div.chat_box_maximized p {
display: none;
}
div.chat_box_minimized {
background-color: #002266;
;
max-width: 200px;
min-width: 80px;
margin: 5px 0px;
padding: 2px;
border: 3px solid #002266;
;
border-radius: 5px;
display: inline-block;
}
div.chat_box_minimized:hover {
background-color: #3378ff;
border: 3px solid #3378ff;
cursor: pointer;
}
div.chat_box_minimized form {
display: none;
}
div.chat_box_minimized p {
margin: 0px 5px;
font-size: 10pt;
color: white;
font-weight: bold;
pointer-events: none;
}
.light_container,
.dark_container {
-webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.57);
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.57);
border: 1px solid #005eff;
padding: 1px;
}
.light_container {
background-color: rgba(0, 34, 102, 0.9);
}
.dark_container {
background-color: rgba(0, 9, 26, 0.9);
}
.light_container .body,
.dark_container .body {
padding: 5px;
}
div.basic_title {
position: relative;
width: 100%;
background-color: #005eff;
padding: 4px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
div.basic_title p {
margin: 0px;
pointer-events: none;
}
div.basic_panel div.basic_title {
font-size: 14px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="bottom_bar">
<div class="chat_box dark_container">
<div class="basic_title">
<p>Chat Box</p>
<div class="close_btn" onclick="minimize(0)"></div>
</div>
<div class="body"></div>
</div>
<div class="chat_bar chat_box_maximized">
<p>Chat Box</p>
<form>
<input type="text" placeholder="send a message">
</form>
</div>
</div>
When you resize from top handle, it changes top coordinate and height. Since you set the position with bottom, normally on animate the height will change but not bottom coordinate. But as soon as resizable sets top coordinate, then the animation will be made but with top coordinate remaining.
What you can do is use resize callback to prevent top coordinate to be set when you resize. Then it'll keep the proper direction on animation, and the resize will work as well.
$(document).ready(function() {
// controls resizing of the chat box
$('.chat_box').resizable({
handles: 'n, e, ne',
minWidth: 300,
minHeight: 100,
maxWidth: 700,
maxHeight: 500,
resize: function(event, ui) {
ui.helper.css('top', '');
}
});
});
function minimize(chatId) {
var bottom_bar = document.getElementById("bottom_bar");
var box = bottom_bar.getElementsByClassName("chat_box")[chatId];
var bar = bottom_bar.getElementsByClassName("chat_bar")[chatId];
bar.className = "chat_bar chat_box_minimized";
$(box).stop().animate({
height: "0px",
width: bar.offsetWidth,
},
'normal', function() {
$(box).hide();
}
);
}
#bottom_bar {
position: fixed;
z-index: 10;
bottom: 0px;
left: 0px;
right: 0px;
max-height: 40px;
background-color: #0042b3;
padding: 2px 20px;
}
div.chat_box {
position: fixed;
width: 350px;
height: 180px;
margin: 0px 4px;
bottom: 45px;
}
div.close_btn {
position: absolute;
top: 0px;
right: 0px;
width: 30px;
height: 100%;
}
div.close_btn:before {
content: 'x';
display: block;
text-align: center;
vertical-align: middle;
line-height: 25px;
font-weight: bold;
font-family: Arial, sans-serif;
pointer-events: none;
}
div.close_btn:hover {
background-color: rgba(0, 9, 26, 0.8);
cursor: pointer;
}
div.chat_box_maximized {
background-color: white;
width: 350px;
margin: 5px 0px;
padding: 2px;
border: 3px solid #0045cc;
border-radius: 5px;
display: inline-block;
}
div.chat_box_maximized input {
width: 100%;
border: none;
}
div.chat_box_maximized p {
display: none;
}
div.chat_box_minimized {
background-color: #002266;
;
max-width: 200px;
min-width: 80px;
margin: 5px 0px;
padding: 2px;
border: 3px solid #002266;
;
border-radius: 5px;
display: inline-block;
}
div.chat_box_minimized:hover {
background-color: #3378ff;
border: 3px solid #3378ff;
cursor: pointer;
}
div.chat_box_minimized form {
display: none;
}
div.chat_box_minimized p {
margin: 0px 5px;
font-size: 10pt;
color: white;
font-weight: bold;
pointer-events: none;
}
.light_container,
.dark_container {
-webkit-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.57);
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.57);
border: 1px solid #005eff;
padding: 1px;
}
.light_container {
background-color: rgba(0, 34, 102, 0.9);
}
.dark_container {
background-color: rgba(0, 9, 26, 0.9);
}
.light_container .body,
.dark_container .body {
padding: 5px;
}
div.basic_title {
position: relative;
width: 100%;
background-color: #005eff;
padding: 4px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
div.basic_title p {
margin: 0px;
pointer-events: none;
}
div.basic_panel div.basic_title {
font-size: 14px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="bottom_bar">
<div class="chat_box dark_container">
<div class="basic_title">
<p>Chat Box</p>
<div class="close_btn" onclick="minimize(0)"></div>
</div>
<div class="body"></div>
</div>
<div class="chat_bar chat_box_maximized">
<p>Chat Box</p>
<form>
<input type="text" placeholder="send a message">
</form>
</div>
</div>
I have this JAVA script at the moment.
/* ******************************************************************** */
/* Generated by: http://csscreator.com */
/* ******************************************************************** */
html,
body {
margin: 0;
padding: 0;
text-align: center;
BACKGROUND: #fff;
font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif;
}
a {
color: #fff;
text-decoration: none;
white-spaces: nobreak
}
li {
color: #fff;
}
body {
color: #BAC6DE
}
#pagewidth {
width: 1395px;
text-align: left;
margin: 0px auto;
}
#header {
position: relative;
height: 100px;
width: 1395px;
display: block;
overflow: none;
padding: 0px 0px 0px 0px;
}
#header h2 {
color: #fff;
padding: 0px 0px 0px 60px;
}
#header p {
color: #fff;
padding: 10px 0px 0px 60px;
}
#maincol {
background-color: #BAC6DE;
position: relative;
width: 1395px;
height: 800px;
padding: 0px 0px 0px 0px;
Margin: 0px 0px 0px 0px;
}
#widgetcontainer {
background-color: #00386B;
position: relative;
width: 1175px;
height: 100%;
Margin: 0px 0px 0px 0px;
Padding: 0px 0px 0px 10px;
Overflow: auto;
}
.widget {
background-color: #BAC6DE;
float: left;
width: 200px;
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 10px;
}
#result p {
color: #000;
}
#footer h2 {
color: fff;
padding: 0px 0px 0px 0px;
}
#footer p {
color: fff;
padding: 0px 50px 0px 60px;
font-family: 'Monotype Corsiva', 'Apple Chancery', 'ITC Zapf Chancery', 'URW Chancery L', cursive;
font-size: 120%;
margin-right: 2px;
margin-top: 8px;
}
/* ******************************************************************** */
/* Clearfix: http://csscreator.com/attributes/containedfloat.php */
/* ******************************************************************** */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility;
hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */
/* ******************************************************************** */
/* Styling for widgets hover */
/* ******************************************************************** */
.current {
color: #00386B;
display: block;
}
.imgHover {
display: inline;
position: relative;
}
.imgHover .hover {
display: none;
position: absolute;
z-index: 1;
}
.hover {
height: 575px;
width: 200px;
background: #BAC6DE;
}
.hover a {
display: block;
padding: 2px;
font-size: 80%;
padding-left: 5px;
}
.hover a:link {
/* Applies to all unvisited links */
text-decoration: none;
font-weight: none;
background-color: #BAC6DE;
color: #fff;
}
.hover a:hover {
/* Applies to links under the pointer */
text-decoration: none;
font-weight: bold;
background-color: #BAC6DE;
color: #fff;
}
.input {
border: 2px inset #fff;
background: #eee;
height: 30px;
margin-bottom: 40px;
}
.input:hover {
border: 2px solid #f00;
background: #ff6;
}
.button {
display: none;
}
label {
display: block;
width: 150px;
float: left;
margin: 2px 4px 6px 4px;
text-align: right;
}
br {
clear: left;
}
/* ******************************************************************** */
/* Styling for console panel */
/* ******************************************************************** */
a:focus {
outline: none;
}
a.trigger {
position: absolute;
background: #9E00F8 url(../images/plus.png) 6% 55% no-repeat;
text-decoration: none;
font-size: 16px;
letter-spacing: -1px;
font-family: verdana, helvetica, arial, sans-serif;
color: #fff;
padding: 4px 12px 6px 30px;
font-weight: bold;
z-index: 2;
}
a.trigger.left {
left: 0;
border-top-right-radius: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
}
a.trigger.right {
right: 0;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
}
a.trigger:hover {
background-color: #59B;
}
a.active.trigger {
background: #666 url(../images/minus.png) 6% 55% no-repeat;
}
.panel {
color: #CCC;
position: absolute;
display: none;
background: #9E00F8;
height: 800px;
width: 800px;
z-index: 1;
}
.panel.left {
left: 0;
padding: 26px 0px;
border-top-right-radius: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-bottomright: 15px;
-webkit-border-bottom-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.panel p {
font-size: 11px;
}
<!doctype html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<title>Hub Page</title>
<meta charset="utf-8" />
<meta generator="csscreator.com" />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/+sfgRmluamFuX1R5cGU9amF2YV9zY3JpcHQmRmluamFuX0xhbmc9SmF2YVNjcmlwdA==+/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.slidePanel.min.js"></script>
<script>
$(function() {
$(".imgHover").hover(function() {
$(this).children("img").fadeTo(200, 0.1).end().children(".hover").show();
}, function() {
$(this).children("img").fadeTo(200, 1).end().children(".hover").hide();
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
// default settings
// $('.panel').slidePanel();
// custom settings
$('#panel2').slidePanel({
triggerName: '#trigger1',
triggerTopPos: '0px',
panelTopPos: '0px'
});
});
</script>
<SCRIPT LANGUAGE="JavaScript">
function ClipBoard() {
holdtext.innerText = copytext.innerText;
Copied = holdtext.createTextRange();
Copied.execCommand("RemoveFormat");
Copied.execCommand("Copy");
alert("Template Copied");
}
</SCRIPT>
<!-- Please link back to http://csscreator.com -->
<link rel="stylesheet" href="style/homepage.css" type="text/css" />
</head>
<body>
<div id="pagewidth">
<div id="header">
<IMG SRC="images/header.jpg" align=right>
</a>
<TEXTAREA ID="holdtext" STYLE="display:none;">
</TEXTAREA>
<SPAN ID="copytext" STYLE="height:150;width:162;display:none;">
http://kana.ifdsgroup.co.uk/attachments/attach/uk/</SPAN>
</P>
</div>
<div id="wrapper" class="clearfix">
<div id="maincol">
<div class="widget">
<div class="hover">
<!----------START NAVIGATION PANEL----------->
TEAM HOME
KANA IQ
EMAIL DRAFT
TEAM DOCUMENTS
<!----------END NAVIGATION PANEL----------->
</div>
</div>
<div id="widgetcontainer">
<!----------Start Team Home Links----------->
<font size=5><strong><p>Bulletin Board. . .</p></strong></font>
<P>Please Enter Your First Bulletin Here . . .</P>
<!----------End Team Home Links----------->
</div>
<br clear=all>
</div>
</div>
</div>
</div>
</body>
</html>
Please can someone tell me why the text in the right hand DIV (Dark blue) is lower than the text in the left DIV (light blue)?
I have changed the padding, the margins but i cant get it to line up correctly.
You have to take note that browsers have their own pre-defiend styles for elements.
As "Bulletin Board..." is a p tag, browsers will add their own margins to that element. Most developers will use a reset stylesheet to avoid these issues. You could also just add margin: 0px; to the p tag and it would solve the issue.
<p> has a margin of 1em. Just inspect the the code using dev console.
p{
margin :0;
}
This will fix it. But please use normalize.css to fix browser specific default values.
Try this: your problem is margin of p tag. it have default margin. so, you can reset the margin of p tag by following code
Add p{margin:0;}code in css
This is because most browsers by default add some margins and paddings to the paragraph tags. You can either use a css reset file or just remove the margins yourself.
#widgetcontainer p{
margin: 0px;
}
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;
}