I need to align all p element in a single line.But its not aligned.Its scroll append in vertical.But i need horizontal.And all the content align inline.
I Try with display:inline but no use.
see the below snippet:
$('.pin_box p').map(function () { $(this).html(katex.renderToString("\\displaystyle{"+$(this).text()+"}"));
})
.pin_box{
z-index:1;
width:300px;
height:40px;
background-color:#fcfcfc;
overflow:auto;
}
.pin_box p{
position:relative;
float:left;
display:inline-block;
height:40px;
width:40px;
border-right:1px solid #ccc;
margin:0;
font-size:12px;
text-align:center;
line-height:40px;
padding:0px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://khan.github.io/KaTeX/bower_components/katex/dist/katex.min.css">
<script src="https://khan.github.io/KaTeX/bower_components/katex/dist/katex.min.js"></script>
<div class="pin_box">
<p>x^{2}</p>
<p>{x}_{0}</p>
<p>\frac{10}{20}</p>
<p>\frac{d}{dx}{()}</p>
<p>\int{}</p>
<p>\int{}{()}dx</p>
<p>\int_{0}^{0}</p>
<p>\int_{0}^{0}{()}dx</p>
</div>
Any one help me to solve my problem.
Thanks in advance.
You can use CSS Flexbox if you need your a fixed width (as you've right now - 300px). Just make your .pin_box a flex container.
Just like:
.pin_box {
display: flex;
}
Have a look at the snippet below:
$('.pin_box p').map(function () { $(this).html(katex.renderToString("\\displaystyle{"+$(this).text()+"}"));
})
.pin_box{
display: flex;
z-index:1;
width: 300px;
height: 60px;
background-color:#fcfcfc;
overflow:auto;
}
.pin_box p{
position:relative;
float:left;
display:inline-block;
height:40px;
width:40px;
border-right:1px solid #ccc;
margin:0;
font-size:12px;
text-align:center;
line-height:40px;
padding:0px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://khan.github.io/KaTeX/bower_components/katex/dist/katex.min.css">
<script src="https://khan.github.io/KaTeX/bower_components/katex/dist/katex.min.js"></script>
<div class="pin_box">
<p>x^{2}</p>
<p>{x}_{0}</p>
<p>\frac{10}{20}</p>
<p>\frac{d}{dx}{()}</p>
<p>\int{}</p>
<p>\int{}{()}dx</p>
<p>\int_{0}^{0}</p>
<p>\int_{0}^{0}{()}dx</p>
</div>
Hope this helps!
You can make the width as auto in your css and increase the height to 50px
$('.pin_box p').map(function () { $(this).html(katex.renderToString("\\displaystyle{"+$(this).text()+"}"));
})
.pin_box{
z-index:1;
width:auto;
height:50px;
background-color:#fcfcfc;
overflow:auto;
}
.pin_box p{
position:relative;
float:left;
display:inline-block;
height:40px;
width:40px;
border-right:1px solid #ccc;
margin:0;
font-size:12px;
text-align:center;
line-height:40px;
padding:0px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://khan.github.io/KaTeX/bower_components/katex/dist/katex.min.css">
<script src="https://khan.github.io/KaTeX/bower_components/katex/dist/katex.min.js"></script>
<div class="pin_box">
<p>x^{2}</p>
<p>{x}_{0}</p>
<p>\frac{10}{20}</p>
<p>\frac{d}{dx}{()}</p>
<p>\int{}</p>
<p>\int{}{()}dx</p>
<p>\int_{0}^{0}</p>
<p>\int_{0}^{0}{()}dx</p>
</div>
Trying to code a similar feel to the ios8 Lockscreen, having a dragable item only move on the x axis.
$( "#IDlsDragable" ).draggable({ axis: "x" });
.lockscreen {
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:rgba(89,54,158,1);
background-image:url('../pics/wall.png');
background-size:cover;
background-position:center center;
}
.lockscreenFace {
position:absolute;
top:0px;
left:1080px;
width:1080px;
height:1920px;
}
.lockscreenSlider {
position:absolute;
top:0px;
left:-1080px;
width:200%;
height:100%;
}
.lockscreenClock {
position:absolute;
top:110px;
left:0px;
width:100%;
height:300px;
font-size: 296px;
color:white;
text-align:center;
}
.lockscreenDate {
position:absolute;
top:432px;
left:0px;
width:100%;
height:80px;
font-size: 60px;
color:white;
text-align:center;
}
.lockscreenSlideText {
position:absolute;
bottom:234px;
left:0px;
width:100%;
height:80px;
font-size: 80px;
font-weight:bold;
color:white;
text-align:center;
background:url('../pics/highlight.png');
-webkit-animation: slidetounlock 3s infinite linear;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.lockscreenSlideText:before {
content: "\f105";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
font-size:85px;
line-height:1;
-webkit-font-smoothing: antialiased;
}
#-webkit-keyframes slidetounlock {
0% {
background-position: -880px 0;
}
100% {
background-position: 0px 0;
}
}
<div class="lockscreen">
<div id="IDlsDragable" class="lockscreenSlider">
<div class="lockscreenFace">
<div id="IDlsClock" class="lockscreenClock">
#TIME#
</div>
<div id="IDlsDate" class="lockscreenDate">
#DATE#
</div>
<div class="lockscreenSlideText">
slide to unlock
</div>
<div class="cameraGrabby">
</div>
</div>
</div>
</div>
When I begin to drag it to the right the div "lockscreenSlider" jerks to the right.
transform:scale([anything]);
this causes issues with mouse offset
as you can see in the code provided below, I have created a simple jQuery slideshow that runs automatically. But I have ran into a little problem that I cant seem to figure out. When the slideshow runs it goes perfectly, but once it gets to the last image then it just keeps on repeating! How can I prevent this from happening?? The code is below and there is also a link to the images. THANKS!:) P.S- I'm using older jQuery versions because of deprecated functions!
HTML:
<!DOCTYPE html>
<html>
<head>
<title>
Home
</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.18.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body class="body" onload="Slider()">
<div class="container">
<div class="bg">
<div class="mainHeader">
<nav>
<ul>
<li class="last">Contact</li>
<li>Products</li>
<li>About</li>
<li>Home</li>
</ul>
</nav>
</div>
<div class="topArea">
<div class="topAInfo">
<h2>Here is just a simple title</h2>
<p>This is just a little bit of dummy text. This is just a little bit of dummy text. This is just a little bit of dummy text. This is just a little bit of dummy text.</p>
</div>
</div>
<div class="middleArea">
<div class="slider">
<img id="1" src="slide1.jpg" border="0" alt="slide1" width="800px" height="350px">
<img id="2" src="slide2.jpg" border="0" alt="slide2" width="800px" height="350px">
<img id="3" src="slide3.jpg" border="0" alt="slide3" width="800px" height="350px">
</div>
<div class="middleAInfo">
<h3>Welcome to</h3>
<p>A dummy website!!</p>
</div>
<div class="latestNews">
<hr>
<h2>Latest News</h2>
<div class="post">
<p class="date">March 28, 2015</p>
<p>New advanced update with double speed and a whole bunch of cool new st.. more>></p>
</div>
<div class="post">
<p class="date">March 28, 2015</p>
<p>New advanced update with double speed and a whole bunch of cool new st.. more>></p>
</div>
<div class="newsLetter">
<div class="newsLInfo">
<h3>Newsletter sign-up</h3>
<hr>
<p>If you would like to sign up for our free NewsLetter please enter your email below</p>
Unsubscribe
</div>
<input type="text" name="textBox" class="textBox" style="width:200px; height:20px;">
<div class="button1">Submit</div>
</div>
</div>
</div>
</div>
</div>
<!--https://www.freelancer.com/jobs/php/PSD-HTML-page-only-page/-->
</body>
</html>
CSS:
*{margin:0;padding:0;}
#font-face {
font-family: SketchFont;
src: url(Fonts/Sketch_Block.ttf);
}
body{
background:#ebebeb;
width:80%;
height:1300px;
}
.container{
width:100%;
}
.mainHeader nav{
width:95%;
height:40px;
position:relative;
left:30px;
top:60px;
background: -webkit-linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* For Firefox 3.6 to 15 */
background: linear-gradient(rgba(90, 215, 240, 0.75),rgb(33, 171, 198)); /* Standard syntax */
/*margin: 100px 50px 0 150px;*/
}
.mainHeader nav ul{
}
.mainHeader nav ul li{
float:right;
display:inline;
text-align:center;
border:1px solid #ADADA8;
border-bottom:none;
border-top:none;
border-left:none;
padding-top:20px;
}
.mainHeader nav ul li.last{
border-right:none;
}
.mainHeader nav ul li a{
text-decoration:none;
/*margin:10px Use to replace paddings right/left but causes hovedr errors*/
font-family:Arial;
position:relative;
top:-10px;
color:white;
padding:10px;
padding-right:20px;
padding-left:20px;
}
.mainHeader nav ul li a.active{
background:white;
color:black;
}
.mainHeader nav ul li a:hover{
background:white;
color:black;
}
.topArea{
width:95%;
height:300px;
position:relative;
left:30px;
top:10px;
/*margin: -50px 50px 0 150px;*/
background: -webkit-linear-gradient(white,rgb(33, 171, 198)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(white,rgb(33, 171, 198)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(white,rgb(33, 171, 198)); /* For Firefox 3.6 to 15 */
background: linear-gradient(white,rgb(33, 171, 198)); /* Standard syntax */
}
.topArea .topAInfo{
margin:20px;
padding-top:60px;
width:60%;
margin:50px;
font-family:;
}
.topArea .topAInfo h2{
font-family:SketchFont;
font-weight: normal;
}
.topArea .topAInfo p{
line-height:25px;
font-family:cursive;
font-size:15px;
}
.bg{
width:100%;
height:1200px;
position:relative;
left:10%;
background:linear-gradient(blue, white, white, blue); /* Standard syntax */
/*background-image:url(bg2.jpg);*/
background-repeat: no-repeat;
}
.middleArea{
background:linear-gradient(white, white, #55C4E9); /* Standard syntax */;
height:600px;
width:95%;
position:relative;
left:30px;
top:10px;
}
.middleArea .middleAInfo {
padding:30px 0 0 30px;
}
.middleArea .middleAInfo p{
color:#49CBF0;
font-size:30px;
font-weight:400;
}
.middleArea .latestNews {
width:250px;
height:300px;
background:#0099cc;
float:right;
position:relative;
top:-60px;
border:1px solid #D6D8D8;
}
.middleArea .latestNews hr{
position:relative;
top:50px;
color:black;
width:90%;
margin-left:10px;
}
.middleArea .latestNews h2{
padding:10px 10px 10px 10px;
color:white;
}
.middleArea .latestNews p.date{
color:white;
font-size:13px;
font-weight:bold;
padding:10px 10px 10px 20px;
}
.middleArea .latestNews p{
color:white;
font-size:13px;
position:relative;
left:10px;
width:225px;
}
.middleArea .latestNews a{
color:blue;
font-size:15px;
font-family:Arial;
}
.middleArea .latestNews .newsLetter{
background:white;
width:250px;
height:200px;
position:relative;
top:80px;
border:1px solid #D6D8D8;
}
.middleArea .latestNews .newsLetter .textBox{
position:relative;
top:40px;
left:25px;
}
.middleArea .latestNews .newsLetter .button1{
width:50px;
height:25px;
background:#1768ED;
padding:3px 10px 2px 10px;
border-radius:7px;
text-align:center;
color:white;
font-family:Arial;
position:relative;
top:45px;
left:155px;
}
.middleArea .latestNews .newsLetter .button1:hover{
cursor: pointer;
}
.middleArea .latestNews .newsLetter h3{
position:relative;
top:15px;
left:10px;
color:#21AFEA;
}
.middleArea .latestNews .newsLetter hr{
position:relative;
top:20px;
color:#21AFEA;
}
.middleArea .latestNews .newsLetter p{
color:black;
position:relative;
top:40px;
color:#21AFEA;
font-size:15px;
}
.middleArea .latestNews .newsLetter a{
position:relative;
top:90px;
left:30px;
}
.slider{
width:800px;
height:350px;
overflow:hidden;
margin:30px auto;
background-image:url(loading.gif);
background-repeat:no-repeat;
background-position:center;
background-size: 100px 100px;
}
.slider img{
display:none;
}
Javascript:
function Slider(){
$(".slider #1").show("fade", 500);
$(".slider #1").delay(5500).hide("slide", {direction:'left'}, 500);
var sc = 3;
var count = 2;
setInterval(function(){
$(".slider #"+count).show("slide", {direction:'right'}, 500);
$(".slider #"+count).delay(5500).hide("slide", {direction:'left'}, 500);
if(count == sc){
count == 1;
}else{
count = count + 1;
}
},6500);
}
Images:
https://www.dropbox.com/s/z8cxqlfp7i46066/slides.zip?dl=0
Hello you mistake was in the if-statement.
if(count == sc){
count == 1;
}else{
count = count + 1;
}
You wrote
count == 1;
instead of
count = 1;
Common mistake, made it a lot by myself. Hard to track.
This is how your script should look like:
function Slider(){
$(".slider #1").show("fade", 100);
$(".slider #1").delay(1000).hide("slide", {direction:'left'}, 100);
sc = 3;
count = 2;
setInterval(function(){
$(".slider #"+count).show("slide", {direction:'right'}, 100);
$(".slider #"+count).delay(1000).hide("slide", {direction:'left'}, 100);
if(count == sc){
count = 1;
}else{
count++;
}
}, 1000);
}
You should start to use you console (nearly all modern browser have one, enable it by pressing F12 (FireFox/Chrome))
How about passing next slide as a parameter to the function?
function Slider(i){
$(".slider #"+i).show("fade", 500);
$(".slider #"+i).delay(5500).hide("slide", {direction:'left'}, 500);
var sc = 3;
var netxslide=i+1;
if (nextslide==sc+1){nextslide=1}
setInterval(function(){Slider(nextslide)},6500);
}
if(count == sc){
count == 1;
}else{
count = count + 1;
}
Your first count == 1; should be count = 1;
You're not setting the variable, only calculating TRUE.
Replace with:
if(count == sc){
count = 1;
}else{
count++;
}
So I have read a lot of the other posts and none of them seem to be of any help.
Whenever I toggle up the animation jumps and shows some lag.
Here is my CSS:
<style>
margin:0 auto;
padding:0;
width:200px;
text-align:center;
}
.pull-me {
-webkit-box-shadow: 0 0 8px #FFD700;
-moz-box-shadow: 0 0 8px #FFD700;
box-shadow: 0 0 8px #FFD700;
cursor:pointer;
}
.panel {
background: #white;
background-size:90% 90%;
height:300px;
display:none;
font-family:garamond, times-new-roman, serif;
}
.panel p {
text-align:center;
}
.slide {
margin:0;
padding:0;
border-top:solid 2px #a10808;
}
.pull-me {
display:block;
position:relative;
border: 1px;
right:-25px;
width:150px;
height:20px;
font-family:arial, sans-serif;
font-size:14px;
color:#ffffff;
background:#a10808;
text-decoration:none;
-moz-border-bottom-left-radius:5px;
-moz-border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
.pull-me p {
text-align:center;
}
</style>
Below is my HTML:
<div class="panel" style="width: 100%; overflow: hidden;">
<div style="width: 100px; float: left;"></div>
</div>
<p class="slide">
<div class="pull-me">Directory</div>
</p>
Below is my jQuery:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('.pull-me').click(function () {
$('.panel').slideToggle('slow');
});
});
</script>
I am using IE9 and I have not been able to use any other browser.
Any help would be greatly appreciated.
I supouse you have missed a line in your css it should start like this:
<style>
div {
margin:0 auto;
...
or just delete these lines
margin:0 auto;
padding:0;
width:200px;
text-align:center;
}
My page, for the most part, should be extending the main container div of my page to the full height of the window, although I must be missing something, as i believe all the right CSS elements needed are present.. Any Help?
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Programming Languages Concept Home</title>
<link type="text/css" href="unicss.css" rel="stylesheet"/>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<script src="Script/jquery.js"></script>
<script src="Script/main.js"></script>
<noscript>Your browser has javascript disabled, please turn it on then refresh to take full advantage of this site</noscript>
</head>
<body>
<div id="header"><h1 class="headover">Home.</h1>
<div class="nav">
<ul class="navigation">
<li>Home</li>
<li>Object Or.
<ul>
<li>Java</li>
<li>ATT</li>
<li>Sprint</li>
<li>T-Mobile</li>
<li>International</li>
</ul>
</li>
<li>Array
<ul>
<li>Verizon</li>
<li>ATT</li>
<li>Sprint</li>
<li>T-Mobile</li>
<li>International</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="container"><br><br><br><p style="color:#666; margin-left:10px; margin-right:10px; text-align:center; text-indent:5px; font-size:24px;"><b>Programming has many faces and names. Java, C++, Perl, HTML, are all languages that can be used to program, to solve a problem that the programmer needs to solve. The tools in a programmers tool book are the languages he knows, all with different syntax, and different ways of going about to reach a solution. Whether the programmer uses the easiest language, or the one he is most familiar with, it is all personal choice. Find all the history and information about any programming language right here to help you pick the language that best suits you.</b></p>
<!--<button>Screenshots</button>
<p id="hide">Pretend these are some images yo.</p>-->
</div>
</body>
</html>
CSS:
body {
background-image:url(Images/backgroundmain.jpg);
min-width:100%;
min-height:100%;
font-family: Arial, Helvetica, sans-serif;
font-size:15px;
margin:0;
margin-bottom:-1px;
}
.headover{
color:#333;
float:right;
}
.headover:hover{
color:white;
}
#gfamily{
margin:auto;
margin-bottom:0px;
padding-bottom:0px;
}
#header{
position:fixed;
text-align:center;
background-color:#666;
margin:auto;
width:100%;
height:54px;
display:block;
min-width:1000px;
}
#container{
background-color:#FFF;
margin:auto;
width:70%;
min-height:100%;
margin-bottom:-1px;
}
.nav{
margin-left:5px;
text-align:center;
background-color:#999;
}
.navigation {
position:fixed;
display:block;
margin-top:15px;
padding:0;
list-style:none;
}
.navigation li {
float:left;
width:150px;
position:relative;
}
.navigation li a {
background:#262626;
color:#fff;
display:block;
padding:8px 7px 8px 7px;
text-decoration:none;
border-top:1px solid #FFF;
border-bottom:1px solid #FFF;
text-align:center;
text-transform:uppercase;
}
.navigation li a:hover {
color:#666;
}
.navigation ul {
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
border-bottom:1px solid #FFF;
}
.navigation ul li {
width:150px;
float:left;
border-top:none;
}
.navigation ul a {
display:block;
height:15px;
padding:8px 7px 13px 7px;
color:#fff;
text-decoration:none;
border-top:none;
border-bottom:1px solid #FFF;
}
.navigation ul a:hover {
color:#666;
}
#hide{
display:none;
}
#extlink{
color:#666;
}
#extlink:hover{
color:#333;
}
#pics:hover{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
color:white;
background-color:#666;
border:none;
}
#pics{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
color:#666;
background-color:white;
border:none;
}
It appears that you need the following CSS:
html,body {
height:100%;
{
Your body will only fill up what the html fills and the html does not appear to be 100%.
I've added
body, html{
height: 100%;
}
to your CSS, as highlighted in this bin: http://jsbin.com/wefir/1/edit
Also check this SO post for more info: Make body have 100% of the browser height