Align the all content only on single line - javascript

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>

Related

how to freeze a div depending on scroll

I'm a very newbie for javascript and I need help. I cannot handle the issue with position:sticky because of my need.
I want the "right-container" stop scrolling when "second" div is completely in the viewport while scrolling, sorry for the easy question.
Thank you so much!
body {
padding:0;
margin:0;
}
p{
padding:0;
margin:0;
}
.heads {
font-size: 2vw;
font-weight:bolder;
padding-top:50px;
text-align:center;
}
.first {
height:1800px;
width:600px;
background-color:red;
color: white;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.second {
height:200px;
width:600px;
background-color:blue;
color: white;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.container-left {
float:left;
}
.container-right {
float:left;
}
.left {
height:3000px;
width:600px;
background-color:orange;
color: white;
text-align:center;
margin-left:auto;
margin-right:auto;
}
<div class="container-left">
<div class="left">
<p class="heads">LEFT</p>
</div>
</div>
<div class="container-right">
<div class="first">
<p class="heads">FIRST</p>
</div>
<div class="second">
<p class="heads">SECOND</p>
</div>
</div>
codepen
I'm not sure if I understood your question but you can use the following properties of an element
element.offsetWidth
element.offsetHeight
element.offsetLeft
element.offsetTop
element.scrollX
element.scrollY
I guess I solved my issue, but there's still a problem, a flickering on the scroll when it comes to "second" div...
function sticktothebottom() {
let h = window.innerHeight;
let window_top = $(window).scrollTop();
let top = $('.dur').offset().top;
let panelh = $(".whole").height();
if (window_top + h > top ) {
$('.whole').addClass('sticky');
$('.dur').height($('.whole').outerHeight());
}
if (window_top + top < panelh ) {
$('.whole').removeClass('sticky');
$('.dur').height(0);
}
}
$(function() {
$(window).scroll(sticktothebottom);
sticktothebottom();
});
body {
padding:0;
margin:0;
}
p{
padding:0;
margin:0;
}
.heads {
font-size: 2vw;
font-weight:bolder;
padding-top:50px;
text-align:center;
}
.first {
height:1800px;
width:200px;
background-color:red;
color: white;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.second {
height:200px;
width:200px;
background-color:blue;
color: white;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.container-left {
float:left;
}
.container-right {
float:left;
}
.left {
height:3000px;
width:200px;
background-color:orange;
color: white;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.sticky {
margin-top: 0;
position: fixed;
bottom: 0;
z-index: 9999;
}
<div class="container-left">
<div class="left">
<p class="heads">LEFT</p>
</div>
</div>
<div class="container-right">
<div class="whole">
<div class="first">
<p class="heads">FIRST</p>
</div>
<div class="second">
<p class="heads">SECOND</p>
</div>
</div>
<div class="dur"></div>
</div>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>

How to make my pop-up disappear after 3 sec

So I would like to make this pop-up disappear after 3 seconds. I have tried the delay query that most recommend but I must be doing something wrong because every time I add it in something glitchy starts happening with other parts of my webpage. I am novice when it comes to java.
<script>
$(document).ready(function(){
$("#thover").click(function(){
$(this).fadeOut();
$("#tpopup").fadeOut();
});
$("#tclose").click(function(){
$("#thover").fadeOut();
$("#tpopup").fadeOut();
});
});
</script>
<style type="text/css">
#thover{
position:fixed;
background:#000;
width:100%;
height:100%;
opacity: .6
}
#tpopup{
position:absolute;
width:600px;
height:280px;
background:#fff;
left:50%;
top:97%;
border-radius:5px;
padding:0px 0;
margin-left:-320px; /* width/2 + padding-left */
margin-top:-150px; /* height/2 + padding-top */
text-align:center;
box-shadow:0 0 10px 0 #000;
}
#tclose{
position:absolute;
background:black;
color:white;
right:-15px;
top:-15px;
border-radius:50%;
width:30px;
height:30px;
line-height:30px;
text-align:center;
font-size:8px;
font-weight:bold;
font-family:'Arial Black', Arial, sans-serif;
cursor:pointer;
box-shadow:0 0 10px 0 #000;
}</style>
<div id="thover">
</div>
<div id="tpopup">
<img src="" /><img alt="http://www.raffles-american-school.edu.my/usr/pagesub.aspx?pgid=62" src="/data/cms/images/boarding_pop_up_3(1).jpg" style="width: 600px; height: 280px;" />
<div id="tclose">
X</div>
</div>
I'd create a separate function for this, called closePopup then invoke it in relevant click function along with invoke it when the page has been loaded for 3 seconds.
$(document).ready(function(){
function closePopup(){
$("#thover").fadeOut();
$("#tpopup").fadeOut();
}
$("#thover").click(closePopup);
$("#tclose").click(closePopup);
setTimeout(closePopup,3000);
});
<style type="text/css">
#thover{
position:fixed;
background:#000;
width:100%;
height:100%;
opacity: .6
}
#tpopup{
position:absolute;
width:600px;
height:280px;
background:#fff;
left:50%;
top:97%;
border-radius:5px;
padding:0px 0;
margin-left:-320px; /* width/2 + padding-left */
margin-top:-150px; /* height/2 + padding-top */
text-align:center;
box-shadow:0 0 10px 0 #000;
}
#tclose{
position:absolute;
background:black;
color:white;
right:-15px;
top:-15px;
border-radius:50%;
width:30px;
height:30px;
line-height:30px;
text-align:center;
font-size:8px;
font-weight:bold;
font-family:'Arial Black', Arial, sans-serif;
cursor:pointer;
box-shadow:0 0 10px 0 #000;
}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thover">
</div>
<div id="tpopup">
<img src="" /><img alt="http://www.raffles-american-school.edu.my/usr/pagesub.aspx?pgid=62" src="/data/cms/images/boarding_pop_up_3(1).jpg" style="width: 600px; height: 280px;" />
<div id="tclose">
X</div>
</div>
This code will execute after 3 seconds:
setTimeout(function(){
$("#tpopup").fadeOut();
},3000)
Add this code at the end of the script, and it should work:
window.setTimeout(function(){
$("#thover").fadeOut();
$("#tpopup").fadeOut()}, 3000);

.slideToggle() Runs With a Lagging/Jerky Animation

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;
}

How to extend main div to full browser window height?

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

Header not filling entire page?

My header is set to a width of 100%, yet on the left side of the page there is a big gap although this isn't present on the right side of the page. Any thoughts?
Here is my code:
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>GS4 Concept Home Page</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>
</head>
<body>
<div id="header">
<div class="nav">
<ul class="navigation">
<li>Home</li>
<li>Galaxy S4
<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">
</div>
</body>
</html>
CSS:
#charset "utf-8";
/* CSS Document */
body{
background-image:url(Images/backgroundmain.jpg);
min-width:100%;
font-family: Arial, Helvetica,sans-serif;
font-size:15px;
}
#header{
position:fixed;
text-align:center;
background-color:#474747;
margin:auto;
width:100%;
height:50px;
display:block;
min-width:1000px;
}
#container{
background-color:#FFF;
margin:auto;
width:70%;
}
.nav{
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 #666;
border-bottom:1px solid #666;
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 #666;
}
.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 #666;
}
.navigation ul a:hover {
color:#666;
}
JavaScript (If it matters..?):
// Executes the function when DOM will be loaded fully
$(document).ready(function () {
// hover property will help us set the events for mouse enter and mouse leave
$('.navigation li').hover(
// When mouse enters the .navigation element
function () {
//Fade in the navigation submenu
$('ul', this).fadeIn(); // fadeIn will show the sub cat menu
},
// When mouse leaves the .navigation element
function () {
//Fade out the navigation submenu
$('ul', this).fadeOut(); // fadeOut will hide the sub cat menu
}
);
});
You need to remove the default margin on the body by adding margin:0:
body {
background-image:url(Images/backgroundmain.jpg);
min-width:100%;
font-family: Arial, Helvetica, sans-serif;
font-size:15px;
margin:0;
}
jsFiddle example
Try setting *{margin: 0; padding: 0;} to remove any padding/margin the browser automatically puts on elements.
you are using a padding and margin on body element the sum is 30 px
delete the padding and margin or make it 0
to fill the width

Categories