I am creating an application where i am using divs to show information and and using some jQuery to manipulate them.In my application i want to give box shadow to my div and trying to make a professional look.I have created box shadow to my div but it does not look that professional.I am using this link to prepare my application.
Refence UI
Now i want to create my personal information div exactly same as the Summary div in that application. I am also posting my code what i have done so far in a fiddle
#personalInformation{
font-size: 1em;
border-bottom: 3px solid #98AFC7;
border-top: 3px solid #98AFC7;
border-left: 3px solid #98AFC7;
border-right: 3px solid #98AFC7;
box-shadow: 10px 10px 5px;
line-height: 0;
width: 45%;
}
My sample code
Now can anyone help me to make my div exactly same as that application ?? or if not possible then how to make the box shadow in bottom only?? Somebody please help .
I've created exactly same box with background like that application. Hope it may help you.
html {
font-size: 10px;
}
body {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 100%;
font-weight: 400;
line-height: 1.42857143;
background-color: #f4f4f4;
color: #404040;
}
.content {
float: left;
width: 870px;
}
.content::after {
content: "";
clear: both;
display: table;
}
.box {
padding: 5px 15px;
background: #fff;
box-shadow: 0 1px 2px #c9c9c9;
-moz-box-shadow: 0 1px 2px #c9c9c9;
-webkit-box-shadow: 0 1px 2px #c9c9c9;
border-radius: 2px;
margin-bottom: 15px;
}
.box:hover {
box-shadow: 0 2px 2px #bababa;
-moz-box-shadow: 0 2px 2px #bababa;
-webkit-box-shadow: 0 2px 2px #bababa;
}
.box h5 {
font-size: 1.4rem;
margin-top: 10px;
margin-bottom: 10px;
line-height: 1.1;
}
.box p {
font-size: 1.4rem;
font-weight: 400;
line-height: 1.5;
margin: 0 0 10px;
}
<div class="content">
<div id="your-id" class="box">
<div class="box-content">
<h5>Caption</h5>
<p id="your-id">Not Mentioned</p>
<h5>Skills/Competencies</h5>
<p id="your-id">Layout ,CSS ,JavaScript ,jQuery ,HTML5 ,WordPress ,Web Design ,Web Development ,HTML ,PHP ,AJAX ,Cross-browser Compatibility ,CSS3 ,UI/UX ,Expert Frontend Developer ,Responsive Web Design ,Website Development ,Web 2.0 ,Dreamweaver ,Web Applications ,Image Manipulation ,Drupal ,MySQL ,Web Application Design ,Web Interface Design ,SVG ,Front-end Development </p>
<h5>Resumes</h5>
<p id="your-id">not mentioned</p>
</div>
</div><!-- .box -->
</div>
I have provided an example here using HAML and SCSS. Please hit the compiled button to retrieve the rendered content. Its a very simple illusion. The background shadow is a soft black color. Let me know if you any more questions
HAML:
#my-box Hello World!
SCSS:
$background: #3D6CAD;
$soft-black-shadow: rgba(0,0,0,0.29);
html, body { width: 100%; height: 100%; background: $background; }
#my-box {
float: none;
height: 50px;
width: 300px;
margin: 0 auto;
margin-top: 50px;
padding-top: 20px;
text-align: center;
background: white;
box-shadow: 0 2px 3px 1px $soft-black-shadow;
}
http://codepen.io/Stephn_R/pen/pJwdzB
And the edits applied to your JSFiddle
Related
I have this code
/* Themes.css */
:root {
--headerBG: #222;
--headerColor: #fff;
--codeBoxBG: #333;
--codeBoxColor: #fff;
--codeHeaderBG: #121212;
--codeColor: #fff;
--bodyBG: #ccc;
--bodyColor: #000;
--linkColor: #ccc;
--linkHover: #000;
}
/* Styles.css */
#import url('https://fonts.googleapis.com/css2?family=Georama:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* { box-sizing: border-box; margin: 0; padding: 0; transition: all .2s ease-in-out; }
body { font-family: 'Georama', sans-serif; width: 100%; background: var(--bodyBG); color: var(--bodyColor); }
header {
background-color: var(--headerBG);
min-height: 300px; min-width: 100vw;
color: var(--headerColor);
display: block;
margin-left: auto;
margin-right: auto;
text-align: left;
padding: 80px 180px 50px 180px;
}
article { padding: 80px 180px 50px 180px; }
header h1 { font-size: 2.2em; margin-bottom: 10px; }
header h2 { font-size: 1.2em; margin-bottom: 30px; }
header a, nav a { color: #ccc; text-decoration: none; }
a:hover { color: #00aeff; }
p { margin-bottom: 8px; }
img { max-width: 100%; display: block; margin: 20px auto; }
article a { color: var(--linkColor); text-decoration: none; }
article a:hover { color: var(--linkHover); }
nav {
height: 50px; padding: 15px;
width: 100%; color: #fff;
background-color: #535353;
align-items: center;
}
nav a { margin: auto 3px; }
nav .items { float: right; }
.heading { margin-bottom: 10px; }
.heading2 { margin-top: 20px; margin-bottom: 10px; }
hr { margin: 30px auto; }
hr.hr1{ border-top: 3px solid #8c8b8b; }
hr.hr2 { border-top: 5px solid #8c8b8b; }
.codebox {
padding: 10px;
font-size: 1em;
line-height: 1.3;
color: var(--codeBoxColor);
background-color: var(--codeBoxBG);
border-radius: 0px 0px 6px 6px;
margin-bottom: 10px;
overflow: auto;
}
code { font-size: 1em; line-height: 1.3; }
.codeheader {
padding: 5px 5px 5px 10px;
font-size: 1.1em;
color: var(--codeColor);
border-radius: 6px 6px 0px 0px;
user-select: none;
background: var(--codeHeaderBG);
border-bottom: 2px solid #00aeff;
}
.codeheader div {
margin-top: 3px;
height: .6em; width: .6em;
background: #fff;
border-radius: 50%;
display: inline-block;
}
.codeheader div:first-child { background: #ff4a4a; }
.codeheader div:nth-child(2) { background: #ffc64a; }
.codeheader div:last-child { margin-right: 6px; background: #59ff4a; }
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<link rel="stylesheet" href="themes.css">
<link rel="stylesheet" href="styles.css">
<nav>
<span class="brand">
MyBlog.com
</span>
<div class="items">
<a class="active" href="#">Home</a>
About
Contact
</div>
</nav>
<header>
<h1>Man must explore, and this is exploration at its greatest</h1>
<h2 class="subheading">Problems look mighty small from 150 miles up</h2>
<span class="meta">
Posted by
Start Bootstrap
on August 24, 2021
</span>
</header>
<article>
<h2 class="heading">The Lorem and Ipsum</h2>
<p>Never in all their history have men been able truly to conceive of the world as one: a single sphere, a globe, having the qualities of a globe, a round earth in which all the directions eventually meet, in which there is no center because every point, or none, is center — an equal earth which all men occupy as equals. The airman's earth, if free men make it, will be truly round: a globe in practice, not in theory.</p>
<p>Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.</p>
<p>What was most significant about the lunar voyage was not that man set foot on the Moon but that they set eye on the earth.</p>
<p>A Chinese tale tells of some men sent to harm a young girl who, upon seeing her beauty, become her protectors rather than her violators. That's how I felt seeing the Earth for the first time. I could not help but love and cherish her.</p>
<p>For those who have seen the Earth from space, and for the hundreds and perhaps thousands more who will, the experience most certainly changes your perspective. The things that we share in our world are far more valuable than those which divide us.</p>
<div class="codeheader">
<div></div>
<div></div>
<div></div>
css
</div>
<div class="codebox">
<pre><code>.somecssclass {
padding: 15px;
font-family: Courier, sans-serif;
font-size: 12px;
color: #fff;
background-color: #3d3d3d;
margin-bottom: 10px;
-webkit-border-radius: 0px 0px 6px 6px;
-moz-border-radius: 0px 0px 6px 6px;
border-radius: 0px 0px 6px 6px;
}</code></pre>
</div>
<hr class="hr1">
<h2 class="heading2">The Final Frontier</h2>
<p>There can be no thought of finishing for ‘aiming for the stars.’ Both figuratively and literally, it is a task to occupy the generations. And no matter how much progress one makes, there is always the thrill of just beginning.</p>
<p>There can be no thought of finishing for ‘aiming for the stars.’ Both figuratively and literally, it is a task to occupy the generations. And no matter how much progress one makes, there is always the thrill of just beginning.</p>
<blockquote class="blockquote">The dreams of yesterday are the hopes of today and the reality of tomorrow. Science has not yet mastered prophecy. We predict too much for the next year and yet far too little for the next ten.</blockquote>
<p>Spaceflights cannot be stopped. This is not the work of any one man or even a group of men. It is a historical process which mankind is carrying out in accordance with the natural laws of human development.</p>
<hr class="hr2">
<h2 class="heading2">Reaching for the Stars</h2>
<p>As we got further and further away, it [the Earth] diminished in size. Finally it shrank to the size of a marble, the most beautiful you can imagine. That beautiful, warm, living object looked so fragile, so delicate, that if you touched it with a finger it would crumble and fall apart. Seeing this has to change a man.</p>
<img class="img-fluid" src="assets/img/post-sample-image.jpg" alt="..." />
<span class="caption text-muted">To go places and do things that have never been done before – that’s what living is all about.</span>
<p>Space, the final frontier. These are the voyages of the Starship Enterprise. Its five-year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before.</p>
<p>As I stand out here in the wonders of the unknown at Hadley, I sort of realize there’s a fundamental truth to our nature, Man must explore, and this is exploration at its greatest.</p>
<p>Placeholder text by Space Ipsum · Images by NASA on The Commons</p>
</article>
Where i have a file named styles.css where i have all the code and also i have a file named themes.css in themes.css file i have all the colors defined in that file but is there any way that i can change that color using javascript so that i can change the theme ?
For example when i have Light Theme I Use these colors
:root {
--headerBG: #222;
--headerColor: #fff;
--codeBoxBG: #333;
--codeBoxColor: #fff;
--codeHeaderBG: #121212;
--codeColor: #fff;
--bodyBG: #ccc;
--bodyColor: #000;
--linkColor: #ccc;
--linkHover: #000;
}
And when i have Dark theme selected the colors should be
:root {
--headerBG: #222;
--headerColor: #fff;
--codeBoxBG: #222;
--codeBoxColor: #fff;
--codeHeaderBG: #121212;
--codeColor: #fff;
--bodyBG: #333;
--bodyColor: #fff;
--linkColor: #e7e7e7;
--linkHover: #fff;
}
Define a class, like
.myroot {
--headerBG: yellow;
}
and apply this class where you needed, via
class="myroot"
See:
/* Themes.css */
:root {
--headerBG: #222;
--headerColor: #fff;
--codeBoxBG: #333;
--codeBoxColor: #fff;
--codeHeaderBG: #121212;
--codeColor: #fff;
--bodyBG: #ccc;
--bodyColor: #000;
--linkColor: #ccc;
--linkHover: #000;
}
.myroot {
--headerBG: yellow;
}
/* Styles.css */
#import url('https://fonts.googleapis.com/css2?family=Georama:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* { box-sizing: border-box; margin: 0; padding: 0; transition: all .2s ease-in-out; }
body { font-family: 'Georama', sans-serif; width: 100%; background: var(--bodyBG); color: var(--bodyColor); }
header {
background-color: var(--headerBG);
min-height: 300px; min-width: 100vw;
color: var(--headerColor);
display: block;
margin-left: auto;
margin-right: auto;
text-align: left;
padding: 80px 180px 50px 180px;
}
article { padding: 80px 180px 50px 180px; }
header h1 { font-size: 2.2em; margin-bottom: 10px; }
header h2 { font-size: 1.2em; margin-bottom: 30px; }
header a, nav a { color: #ccc; text-decoration: none; }
a:hover { color: #00aeff; }
p { margin-bottom: 8px; }
img { max-width: 100%; display: block; margin: 20px auto; }
article a { color: var(--linkColor); text-decoration: none; }
article a:hover { color: var(--linkHover); }
nav {
height: 50px; padding: 15px;
width: 100%; color: #fff;
background-color: #535353;
align-items: center;
}
nav a { margin: auto 3px; }
nav .items { float: right; }
.heading { margin-bottom: 10px; }
.heading2 { margin-top: 20px; margin-bottom: 10px; }
hr { margin: 30px auto; }
hr.hr1{ border-top: 3px solid #8c8b8b; }
hr.hr2 { border-top: 5px solid #8c8b8b; }
.codebox {
padding: 10px;
font-size: 1em;
line-height: 1.3;
color: var(--codeBoxColor);
background-color: var(--codeBoxBG);
border-radius: 0px 0px 6px 6px;
margin-bottom: 10px;
overflow: auto;
}
code { font-size: 1em; line-height: 1.3; }
.codeheader {
padding: 5px 5px 5px 10px;
font-size: 1.1em;
color: var(--codeColor);
border-radius: 6px 6px 0px 0px;
user-select: none;
background: var(--codeHeaderBG);
border-bottom: 2px solid #00aeff;
}
.codeheader div {
margin-top: 3px;
height: .6em; width: .6em;
background: #fff;
border-radius: 50%;
display: inline-block;
}
.codeheader div:first-child { background: #ff4a4a; }
.codeheader div:nth-child(2) { background: #ffc64a; }
.codeheader div:last-child { margin-right: 6px; background: #59ff4a; }
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<link rel="stylesheet" href="themes.css">
<link rel="stylesheet" href="styles.css">
<nav>
<span class="brand">
MyBlog.com
</span>
<div class="items">
<a class="active" href="#">Home</a>
About
Contact
</div>
</nav>
<header class="myroot">
<h1>Man must explore, and this is exploration at its greatest</h1>
<h2 class="subheading">Problems look mighty small from 150 miles up</h2>
<span class="meta">
Posted by
Start Bootstrap
on August 24, 2021
</span>
</header>
<article>
<h2 class="heading">The Lorem and Ipsum</h2>
<p>Never in all their history have men been able truly to conceive of the world as one: a single sphere, a globe, having the qualities of a globe, a round earth in which all the directions eventually meet, in which there is no center because every point, or none, is center — an equal earth which all men occupy as equals. The airman's earth, if free men make it, will be truly round: a globe in practice, not in theory.</p>
<p>Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.</p>
<p>What was most significant about the lunar voyage was not that man set foot on the Moon but that they set eye on the earth.</p>
<p>A Chinese tale tells of some men sent to harm a young girl who, upon seeing her beauty, become her protectors rather than her violators. That's how I felt seeing the Earth for the first time. I could not help but love and cherish her.</p>
<p>For those who have seen the Earth from space, and for the hundreds and perhaps thousands more who will, the experience most certainly changes your perspective. The things that we share in our world are far more valuable than those which divide us.</p>
<div class="codeheader">
<div></div>
<div></div>
<div></div>
css
</div>
<div class="codebox">
<pre><code>.somecssclass {
padding: 15px;
font-family: Courier, sans-serif;
font-size: 12px;
color: #fff;
background-color: #3d3d3d;
margin-bottom: 10px;
-webkit-border-radius: 0px 0px 6px 6px;
-moz-border-radius: 0px 0px 6px 6px;
border-radius: 0px 0px 6px 6px;
}</code></pre>
</div>
<hr class="hr1">
<h2 class="heading2">The Final Frontier</h2>
<p>There can be no thought of finishing for ‘aiming for the stars.’ Both figuratively and literally, it is a task to occupy the generations. And no matter how much progress one makes, there is always the thrill of just beginning.</p>
<p>There can be no thought of finishing for ‘aiming for the stars.’ Both figuratively and literally, it is a task to occupy the generations. And no matter how much progress one makes, there is always the thrill of just beginning.</p>
<blockquote class="blockquote">The dreams of yesterday are the hopes of today and the reality of tomorrow. Science has not yet mastered prophecy. We predict too much for the next year and yet far too little for the next ten.</blockquote>
<p>Spaceflights cannot be stopped. This is not the work of any one man or even a group of men. It is a historical process which mankind is carrying out in accordance with the natural laws of human development.</p>
<hr class="hr2">
<h2 class="heading2">Reaching for the Stars</h2>
<p>As we got further and further away, it [the Earth] diminished in size. Finally it shrank to the size of a marble, the most beautiful you can imagine. That beautiful, warm, living object looked so fragile, so delicate, that if you touched it with a finger it would crumble and fall apart. Seeing this has to change a man.</p>
<img class="img-fluid" src="assets/img/post-sample-image.jpg" alt="..." />
<span class="caption text-muted">To go places and do things that have never been done before – that’s what living is all about.</span>
<p>Space, the final frontier. These are the voyages of the Starship Enterprise. Its five-year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before.</p>
<p>As I stand out here in the wonders of the unknown at Hadley, I sort of realize there’s a fundamental truth to our nature, Man must explore, and this is exploration at its greatest.</p>
<p>Placeholder text by Space Ipsum · Images by NASA on The Commons</p>
</article>
Single Line code convert light theme to dark. Try it
<style>
body
{
filter: invert(1);
}
</style>
I am having a sparkle effect in jquery but the sparkle is working on background is there anyway i can get those sparkle on image and not on background.
Here is my code:
(function () {
var sparkle = new Sparkle();
sparkle.init('.summs');
})();
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
a{background:transparent}
a:active,a:hover{outline:0}
h1{font-size:2em;margin:.67em 0}
img{border:0}
svg:not(:root){overflow:hidden}
code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}
b,strong,optgroup{font-weight:700}
pre,textarea{overflow:auto}
html {
height: 100%;
}
body {
color: #AAA;
background-color: #000;
line-height: 1.4;
margin: 50px;
}
h1 {
color: #FFF;
}
h2 {
padding: 10px 0;
border-bottom: 1px solid #444;
}
a {
color: inherit;
}
em {
font-family: monospace;
font-size: 16px;
font-style: normal;
background-color: #333;
border-radius: 3px;
padding: 3px 5px;
}
pre {
color: #FFF;
background-color: #444;
padding: 0 25px;
border-radius: 3px;
}
#wrapper {
width: 20%;
margin: auto;
border:red solid 1px
}
div.summs {
background: rgba(0, 0, 0, 0) url("https://custom.cvent.com/9BC2D0988F874B5C8C15E9D14B6E2F3B/pix/21abaeaeb5d94c73b6814e90cf55d240.jpg") no-repeat scroll center top;
height: 516px;
margin: 0 auto;
position: relative;
text-align: center;
top: -40px;
width: 1000px;
}
<script src="https://s3-us-west-1.amazonaws.com/creative-event/sparkle-effect/sparkle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="summs">
<div class="onslide2">
<h1 class="bold"><strong>Sparkling Beauty Sparkling Service</strong></h1>
<br>
<br>
<h1 class="l2">GALA DINNER<br>
Sparkling Dior Ambassadress</h1>
<h1 class="l3">26<sup>th</sup> May 2016<br>
JW Marriott Hotel, Macau</h1>
<h1 class="l4">Dress Code: Rose Gold and Champagne </h1>
<h2>Remember to bring your sparkling outfit.<br>
There will be a prize for best-dressed.</h2>
</div>
</div>
Fiddle
I am sorry I don't know how make it a link here. Request you to please copy the url and paste.
need help
I created this myself. Would be nice if you gave me credits somewhere if you use this. But hey, you do what you want.
https://jsfiddle.net/virginieLGB/mL6uf3xm/5/
Only thing you need to change is
mySparkle.init( $( ".summs" ) , 150 );
I guess you'll want to keep the element here, but you can change '150' with any number of stars you want.
Have fun
I currently have a Joomla 3 site that I am building and I am trying to add social icons using the module SP Tabs so that you can click on 3 different tabs to give you information such as latest news, twitter and other news within the same area.
I have managed to change the look from the tabs to social icon images but the problem I have is that I have only been able to change 2 of the images and the third one is reusing the 2nd image already displayed.
The following is a snapshot (HTML + CSS) from Firebug as my site is currently on my localhost.
HTML
<div id="sptab121" class="sptab_red">
<div class="tabs_buttons">
<div class="tabs_mask">
<ul class="tabs_container">
<li class="tab first-tab active></li>
<li class="tab"></li>
<li class="tab"></li>
</ul>
</div>
</div>
CSS
#sptab121 .tabs_mask, #sptab121 ul.tabs_container li span {
height: 105px;
line-height: 0px;
}
#sptab121 .tabs_mask {
border-bottom: 1px solid #DDD;
padding: 100px 0px 5px;
}
#sptab121 .tabs_mask {
line-height: 0px !important;
}
#sptab121 ul.tabs_container {
list-style: outside none none;
margin: 0px !important;
padding: 0px !important;
}
#sptab121 .first-tab {
background: transparent url("/images/twitter.png") no-repeat scroll 0% 0% / 50px 55px !important;
float: left;
line-height: 13px;
cursor: pointer;
padding: 55px 0px 0px;
margin: 0px 23px 0px 0px;
width: 50px;
font-weight: bold;
text-align: center;
}
#sptab121 ul.tabs_container li.tab {
background: transparent url("/images/local.png") no-repeat scroll 0% 0% / 50px 55px;
float: left;
line-height: 13px;
cursor: pointer;
padding: 55px 0px 0px;
margin: 0px 23px 0px 0px;
width: 50px;
font-weight: bold;
text-align: center;
}
The problem is that the class the 2nd and 3rd li use is the same one "tab". I have managed to override the first class by adding a class for the first tab but I am not sure how I can use a different image for the 2nd and 3rd link.
The other problem is that its not as easy as adding "second tab" next to the li class as the module has been coded in JavaScript and I have not been able to find the code where this is implemented.
Any advice on how I could change this will be really appreciated.
The link for the Joomla Module: "extensions.joomla.org/extension/sp-tab"
Use pseudo class
#sptab121 ul.tabs_container li.tab {
background: transparent no-repeat scroll 0% 0% / 50px 55px;
float: left;
line-height: 13px;
cursor: pointer;
padding: 55px 0px 0px;
margin: 0px 23px 0px 0px;
width: 50px;
font-weight: bold;
text-align: center;
}
#sptab121 ul.tabs_container li.tab:nth-child(2){
background-image: url("https://cdn1.iconfinder.com/data/icons/simple-icons/4096/instagram-4096-black.png") ;
}
#sptab121 ul.tabs_container li.tab:nth-child(3){
background-image: url("https://cdn3.iconfinder.com/data/icons/picons-social/57/80-google-plus-512.png") ;
}
Demo
I'm trying to use jQuery to fade out elements in a scrolling div (not the main window) as they scroll out of view. I'm using the fadeTo function and checking for the position of the element as the user scrolls.
See this stackoverflow thread for what I'm basing my code on.
Everything seems to work fine on my non-retina monitor (using Chrome). The top element is fading out right at the top of the scrolling div like its supposed to.
However, when I perform the same actions using my macbook pro w/ retina display, I get weird behavior. For some of the elements (not all) in the scrolling div, The fadeTo animation only fades a part of the div (the bottom part). The top half (or more sometimes) is unchanged.
EDIT: WAS ABLE TO MAKE A DEMO (Try viewing demo on monitor vs. retina screen).
Any idea why this would happen? Why would this behave differently on my retina screen than on my monitor (both using same version of Chrome)?
I should also mention that all of this html is being injected into existing web pages, so that the scroll div sits on top of the page in the top right corner (fixed position). I'm building a chrome extension... My code:
$('#volleyThreadDiv' + objectId).scroll(function() {
console.log('userDidscroll...');
$('.volleyComment').each(function () {
var height = $(this).css('height');
var heightNumeric = height.substring(0, height.length - 2);
heightNumeric = Number(heightNumeric);
if ($(this).position().top + heightNumeric < 130) {
$(this).stop().fadeTo(0, 0.2);
} else {
$(this).stop().fadeTo(0, 100);
}
});
$('.volleyReply').each(function () {
var height = $(this).css('height');
var heightNumeric = height.substring(0, height.length - 2);
heightNumeric = Number(heightNumeric);
if ($(this).position().top + heightNumeric < 130) {
$(this).stop().fadeTo(0, 0.2);
} else {
$(this).stop().fadeTo(0, 100);
}
});
});
#volleyDiv {
position:fixed;
top: 20px;
right: 30px;
padding: 10px;
z-index: 999999999999999999999999999;
box-sizing: initial;
background: none;
border: none;
}
.volleyThreadDiv, #volleyActivityDiv {
position: static;
display: none;
max-height: 300px;
overflow-y: scroll;
background: none;
border: none;
}
.volleyThreadDiv::-webkit-scrollbar, #volleyActivityDiv::-webkit-scrollbar {
background-color: transparent;
}
.volleyComment, .volleyReply {
margin: 5px 5px 5px 5px;
padding: 5px;
border: 2px solid #63c5e2; /* blue border */
border-radius: 8px;
width: 155px;
background: white;
box-shadow: 0px 2px 1px #888888, -2px 2px 1px #888888;
box-sizing: initial;
}
.volleyCommentStatus, .volleyReplyStatus {
padding: 0px 5px 0px 5px;
margin: 0px 0px 0px 0px;
font-family: 'Avenir Next', Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #262626;
line-height: 1.5;
word-wrap: break-word;
}
.volleyCommentStatus, .volleyReplyStatus {
text-align: left;
}
.volleyCommentStatus > a:link, .volleyReplyStatus > a:link, .volleyCommentStatus > a:visited, .volleyReplyStatus > a:visited {
font-family: 'Avenir Next', Helvetica, sans-serif;
font-weight: normal;
color: #63c5e2 !important;
text-decoration: none !important;
border: none;
padding: none;
margin: none;
background-color: white !important;
}
.volleyCommentStatus > a:hover, .volleyReplyStatus > a:hover {
font-family: 'Avenir Next', Helvetica, sans-serif;
font-weight: normal;
color: gray !important;
text-decoration: none !important;
border: none;
padding: none;
margin: none;
background-color: white !important;
}
.volleyCommentAuthor, .volleyReplyAuthor, .volleyCommentDate, .volleyReplyDate {
font-family: 'Avenir Next', Helvetica, sans-serif;
font-style: italic;
font-size: 10px;
font-weight: normal;
color: gray;
margin: 0px 5px 0px 0px;
line-height: 1.5;
}
.volleyReplyAuthor {
clear: both;
text-align: left;
padding: 0px 5px 0px 5px;
}
.volleyCommentAuthor {
clear: both;
text-align: left;
padding: 0px 5px 0px 5px;
}
.volleyCommentDate, .volleyReplyDate {
float: right;
margin: 0px 5px 0px 7px;
}
.volleyCommentReply {
float: right;
border: 2px solid #63c5e2; /* blue border */
border-radius: 8px;
background: #63c5e2;
padding: 2px 10px 2px 10px;
margin: 0px 0px 100px 0px;
font-family: 'Avenir Next', Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: white;
box-shadow: 0px 2px 1px #888888, -2px 2px 1px #888888;
box-sizing: initial;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div id="volleyDiv" style="display: block;">
<div class="volleyThreadDiv" id="volleyThreadDivUAuCOyQuav" style="display: block;">
<div class="volleyComment" id="volleyCommentUAuCOyQuav">
<p class="volleyCommentDate">Feb 28th</p>
<p class="volleyCommentStatus">First comment!</p>
<p class="volleyCommentAuthor">John Wexler</p>
</div>
<div class="volleyReply" id="volleyReply0wblbTaP1R">
<p class="volleyReplyDate">Feb 28th</p>
<p class="volleyReplyStatus">First comment!</p>
<p class="volleyReplyAuthor">John Wexler</p>
</div>
<div class="volleyReply" id="volleyReplywBS0WFoUDH">
<p class="volleyReplyDate">Feb 28th</p>
<p class="volleyReplyStatus">Testing two comments on a a page.</p>
<p class="volleyReplyAuthor">John Wexler</p>
</div>
<div class="volleyReply" id="volleyReply5zw2ww9GBo">
<p class="volleyReplyDate">Feb 28th</p>
<p class="volleyReplyStatus">Will it blend?</p>
<p class="volleyReplyAuthor">John Wexler</p>
</div>
<div class="volleyReply" id="volleyReplythWrBLrkjy">
<p class="volleyReplyDate">Feb 28th</p>
<p class="volleyReplyStatus">Stay with me.</p>
<p class="volleyReplyAuthor">John Wexler</p>
</div>
<div class="volleyCommentReply" id="volleyCommentReplyUAuCOyQuav">Reply</div>
</div>
</div>
</body>
</html>
The solution I found was to add position: relative in the css for .volleyCommentStatus, .volleyReplyStatus.
It seems it was inheriting position: static which I assume was causing the retina screen problem.
I would like to extend the border-bottom line longer than ever as the image below:
If this is impossible and you have any suggestion to make a change into my code, that would be great.
HTML:
<table id="showRoom">
<tr class="box_shadow">
<td class="text_plant_address"> <span class="text_plant">Plant 1</span>
<br /> <span class="text_address">Street 2, Dong An Industrial Park</span>
</td>
</tr>
CSS:
body {
background-color: #F6F6F6;
}
#showRoom {
margin-left: 10px;
margin-top: 10px;
width: auto;
border-collapse: collapse;
}
table .box_shadow {
background-color: #FFF;
font-size: 18px;
line-height: 20px;
text-align: center;
font-weight: normal;
font-family: 'Scada', sans-serif;
display: block;
-webkit-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
-moz-box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
box-shadow: -4px 4px 5px 0px rgba(50, 50, 50, 0.2);
}
table tr .text_plant_address {
background-color: #FFF;
width: 175px;
height: 175px;
font-size: 18px;
line-height: 20px;
text-align: center;
font-weight: normal;
font-family: 'Scada', sans-serif;
margin: 0;
padding: 0;
}
table tr td span {
height: 87.5px;
width: auto;
}
table tr td .text_plant {
border-bottom: 1px solid #D0D0D0;
}
table tr td .text_address {
font-size: 10px;
}
Here is my JSFIDDLE: http://jsfiddle.net/QTNr5/
2.Does anyone know the name of the font below?
Just add Padding
table tr td .text_plant {
border-bottom: 1px solid #D0D0D0;
padding: 0 20px; /* or how longer you want */
}
Fiddle
For the font -
1) If you have a just image file than just keep on trying random fonts the only this is solution i guess.
2) If its on some web page inspect it via firebug or any other code inspection tool.
3) If its psd or vector open it in its respective tool and try editing the font software will tell you the name like Photoshop etc.
4) Try this http://www.myfonts.com/WhatTheFont/ for getting font name from a JPG image.
I hope any of these will help you.
You can move the border bottom from the text_plant and make it a border top on text_address like so: http://jsfiddle.net/QTNr5/2/
table tr td .text_plant {
}
table tr td .text_address {
font-size: 10px;
border-top: 1px solid #D0D0D0;
padding-top: 4px;
}
Or if you want it shorter you can add padding let and right to your text_plant like this: http://jsfiddle.net/QTNr5/4/
table tr td .text_plant {
border-bottom: 1px solid #D0D0D0;
padding:0 20px;
}
if you want your solution in any how..
then i will recommend this..
Use 3 before plant 1 and 3 after that..
like this
<td class="text_plant_address"> <span class="text_plant"> Plant 1 </span>
i know its not best answer but hope it will help and you can increase according to u
You could change your spans to divs and remove the br. Divs will display as blocks by default, so they take up the full width of the td. I modified your fiddle to show the divs. If you don't want it to touch the edges of the box, add padding to your td.
http://jsfiddle.net/mrNXW/
<td>
<div class="plant">Plant 1</div>
<div class="address">Street 2, Dong An Industrial Park</div>
</td>
The font you're looking for I believe is this:
http://www.dafont.com/ballpark-weiner.font
<edit> question misunderstood, answer gives a bottom border that is red, white and red again :) red on the outer parts .... </edit>
You can use pseudo element to draw the red part :
http://codepen.io/anon/pen/axvgl/
td {
text-align:center;
}
.text_plant {
font-size:2em;
border-bottom:solid white;
box-shadow:
0 1px 0 gray,
inset 0 -1px 0 lightgray;
}
.text_plant:before,
.text_plant:after {
content:'';
display:inline-block;
width:1.25em;
box-shadow:inherit;
border-bottom:solid red;
margin-bottom:-3px;/* size of border*/
vertical-align:bottom;
}
Or use gradient http://codepen.io/anon/pen/ftmDn/
td {
text-align:center;
}
.text_plant {
display:inline-block;
font-size:2em;
padding:0 1em;
box-shadow:
0 1px 0 gray;
background:linear-gradient(to left, red 20%,white 20%,white 80%,red 80%) bottom no-repeat, linear-gradient(gray,gray) no-repeat bottom;
background-size:100% 3px, 100% 4px ;
}
Sure, try adding: padding: 10px 0 to the <span>.