how to get the notification number badge in ajax like Facebook. cant post a picture here but i think people know what am i talking about. its like when you log in to Facebook, if you have new messages you will get a little number on the top right corner of the icons next to search bar. i'm currently found this piece of code in charge of creating that number but i cant go any further from that. here is the code i found.
<span class="jewelCount" id="notificationsCountWrapper">
<span id="notificationsCountValue">1</span>
<i class="accessible_elem"> Notifications</i>
</span>
You want something like that?
Here is the css & jquery solution, if you like. DEMO http://jsfiddle.net/yeyene/DfSda/1/
Add <span class="ballons"></span> inside your button, and replace the dynamic count value.
.ballons {
float:right;
margin:-20px 8px 0 0;
line-height:30px;
padding:0 10px;
border-radius: 30px;
border:3px solid #fff;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
background:red;
color:#fff;
text-align:center;
-moz-box-shadow: 1px 1px 3px 3px #ccc;
-webkit-box-shadow: 1px 1px 3px 3px #ccc;
box-shadow: 1px 1px 3px 3px #ccc;
}
Related
I've got a button. And this button when clicked, will produce popup. The problem is I don't want it to be a button, instead, I just want it to be a plain text. All the function will be the same.
Is there any way to get around this?
The "See size chart" element is not a button, it is actually plain text with a button-like style. You need to change it's CSS rules
If you want it to be simple black text on white background, change this:
.yith-wcpsc-product-size-chart-button{
background: #0f0f0f;
border: none;
border-radius: 0px;
color: #ffffff;
display: inline-block;
padding: 3px 10px 3px 10px;
text-decoration: none;
margin: 5px 3px;
cursor: pointer;
box-shadow: 0px 2px 7px -2px #dddddd;
}
to
.yith-wcpsc-product-size-chart-button {
color: #000000;
display: inline-block;
cursor: pointer;
}
and remove this
.yith-wcpsc-product-size-chart-button:hover {
background: #3f3f3f;
}
I've been searching everywhere, how to make a html/css resonsive S shaped dotted line like this
So, far it has been the bain of my existence.
I'm trying to avoid SVG at all costs, althought i've also searched how to do it in SVG.
Can someone help me?
hr.style-seven {
height: 150px;
border-style: solid;
border-color: black;
border-width: 1px 0 0 0;
border-radius: 130px 0px 0px 0px;
border-top: 1px dashed #8c8c8c;
margin-right:130px;
}
hr.style-seven:before {
display: block;
content: "";
height: 150px;
margin-top: -151px;
border-style: solid;
border-color: black;
border-width: 0 0 1px 0;
border-radius: 0px 0px 130px 0px;
margin-left:130px;
margin-right:-130px;
border-bottom: 1px dashed #8c8c8c;
}
.box{ height: 500px; margin-top:200px;}
<body class="box">
<hr class="style-seven"/>
</body>
Demo
Is it possible to modify selectize.js? Instead of having a dropdown it will open a modal box for its options ? I am thinking of having a onfocus event then it will open that modal but prevent the dropdown. I'm just not sure how I can achieve it. and How I can populate the selectize once the modal options have been saved
It's usually not a good idea to customize a code library because you will not be able to upgrade to the next version. You are better off rolling your own solution using js and css. Actually making modal boxes is not that difficult, you just need to float a div at a higher z-index than the rest of the page, then put a transparent layer behind it to keep the user from clicking through to the background page. Here is some sample css and html I use to float a modal.
css
.BDT_Dialog_Layer {
position: absolute;
display: table;
top: 0px;
left: 0px;
height: 99%;
width: 99%;
}
.BDT_Dialog_Center {
position:fixed;
top:30%;
width:100%;
}
.BDT_Dialog_Decoration {
position:relative;
margin:0 auto;
text-align: center;
background-color: #ffffff;
display: table;
/* -- background-color: #DDDDDD;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF' , endColorstr='#BBBBBB');
background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0.1, #FFFFFF), color-stop(1, #BBBBBB) );
background-image: -moz-linear-gradient( center top, #FFFFFF 10%, #BBBBBB 100% ); -- */
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 0 1px 8px #666666, 0 1px 4px #000000;
-webkit-box-shadow: 0 1px 8px #666666, 0 1px 4px #000000;
-khtml-box-shadow: 0 1px 8px #666666, 0 1px 4px #000000;
box-shadow: 0 1px 8px #666666, 0 1px 4px #000000;
}
html
<div id="dialogLayer" class="BDT_Dialog_Layer">
<div class="BDT_Dialog_Center">
<div class="BDT_Dialog_Decoration">
My stuff
</div>
</div>
here is the blocking layer css
div.BlockInteractionWithPage {
position: absolute;
top: 0px;
left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
background-color: #ffffff;
opacity: 0.0;
filter: alpha(opacity=0); /* filter:alpha for IE8 and earlier */
height: 100%;
width: 100%;
}
I have a PHP while loop to get data from a MySQL database and repeat some <div>s per the data. When the data is retrieved, the issue is that the footer disappears, because the background image becomes unlimited.
Below is the CSS code for background and footer.
.wrapper {
background: url(../images/bg.png) #eee;
border-bottom: 1px solid #bbb;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
padding: 30px 0;
.footer {
color: #999;
padding: 40px 0px 0px 15px;
}
It's very difficult to understand your question when you do not post much of code. Or even complete code snippets.
Check out background-repeat Read more about this
Just expanding on what #Appallan advised,
Try this:
.wrapper {
background: url(../images/bg.png) #eee no-repeat;
border-bottom: 1px solid #bbb;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
padding: 30px 0;
}
i have a gamimng section on my site that allow the user to display a quick status of their stats using colors (blue, red, and green).
i want to generate something like this based per user. i have this so far:
<style>
.box2 {
height: 20px;
background: blue;
float:left;
width:120px;
}
.box3 {
height: 20px;
background: green;
float:left;
width:30px;
}
.box1 {
height: 20px;
background: red;
float:left;
width:140px;
}
</style>
<div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
should i put the css directly in the page? what will be the best way to implement this using php?
You can always use a generated file using PHP and include it as your CSS file like:
<link rel="stylesheet" type="text/css" href="/css/userstats.php" />
Then in this file you can use the current session to find out the user stats then generate using PHP. Don't forget the put the header:
header("Content-type: text/css");
Example php:
background: #<?php echo $colorX; ?>; // assuming the $colorX is HEX
You can also if you prefer use .htaccess to rewrite the file so it looks less obvious like:
RewriteEngine On
RewriteBase /
RewriteRule ^css/userstats.css$ /path/to/generatedfile.php [L,NC]
So you can use:
<link rel="stylesheet" type="text/css" href="css/userstats.css" />
example code:
<style>
div.bar {
height: 25px;
}
div.bar div {
display: block;
float:left;
height: 25px;
margin: 0;
padding: 0;
position: relative;
}
div.bar div.red {
background: #DD3030;
-webkit-box-shadow: -5px 0px 8px 2px #DD3030;
-moz-box-shadow: -5px 0px 8px 2px #DD3030;
box-shadow: -5px 0px 8px 2px #DD3030;
width:140px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 8px;
-webkit-border-radius: 8px 0px 0px 8px;
border-radius: 8px 0px 0px 8px;
z-index:10;
}
div.bar div.blue {
background: #3388DD;
-webkit-box-shadow: 0px 0px 8px 2px #3388DD;
-moz-box-shadow: 0px 0px 8px 2px #3388DD;
box-shadow: 0px 0px 8px 2px #3388DD;
width:120px;
z-index:5;
}
div.bar div.green {
background: #1CAD32;
-webkit-box-shadow: 5px 0px 8px 2px #1CAD32;
-moz-box-shadow: 5px 0px 8px 2px #1CAD32;
box-shadow: 5px 0px 8px 2px #1CAD32;
width:30px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 0px 8px 8px 0px;
border-radius: 0px 8px 8px 0px;
z-index:10;
}
</style>
<div class="bar">
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</div>
jsfiddle: http://jsfiddle.net/g9Vrx/
If the colors are fully customizable, then the best way is to either generate the CSS each time the page loads per user, or generate it once when the user changes the colors in his preferences, and store it in a cache or db. Then just extract it and use it.
Again, if the colors are fully customizable (not like a couple of predefined colors) you should include the CSS in the HTML page since modifying external CSS files with PHP is rather complicated and unnecessary.