I'm using this plug-in to display notification for my web app.
Can Someone guide me, how can I display long notification message
Refer Snapshot: If I do enter long message,its not displayed properly.
Please guide me.
On your css (style_light.css line 240) comment these two lines:
.notification-list-item .message {
display: block;
margin-right: 22px;
/* white-space: nowrap; */
overflow: hidden;
position: relative;
/* text-overflow: ellipsis; */
}
Aaaand, on the same CSS line 204 comment the height of this class
.notification-list-item {
color: #666;
padding: 6px;
border-bottom: 1px solid #ddd;
border-top: 1px solid #fff;
position: relative;
cursor: pointer;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
/* height: 16px; */
}
Related
#import '_colors.scss';
#import '_fonts.scss';
#import '_urls.scss';
#import '_mixins.scss';
html, body
height: 100%
body
display: grid
font-family: $clickme, $clickme-fallback;
color: $color;
a
text-decoration: none;
color: inherit;
.cta
position: relative;
margin: auto;
padding: 19px 22px;
transition: all .2s ease;
&:before
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
border-radius: 28px;
background: rgba($primary,.5);
width: 56px;
height: 56px;
transition: all .3s ease;
span
position: relative;
font-size: 16px;
line-height: 18px;
font-weight: 900;
letter-spacing: .25em;
text-transform: uppercase;
vertical-align: middle;
svg
position: relative;
top: 0;
margin-left: 10px;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
stroke: $color;
stroke-width: 2;
transform: translateX(-5px);
transition: all .3s ease;
&:hover
&:before
width: 100%;
background: rgba($primary,1);
svg
transform: translateX(0);
&:active
transform: scale(.96);
I am trying to get to compile without any error codes and it appears that after several attempts it is not working I have tried several different methods and error codes keep appearing that no valid css is after every line will some one please help this is a final project and I need help getting it ready by monday night.
First of all remove .scss from the import statements.
If your file has .scss extension then you have to use brackets and semi colons but if it has .sass extensoon then you have to remove these semi colons
Then compile your file to css with any software like prepros or use to the sass command line.
Remember to link the css file to your html document.
Hope that it works
here is my JsFiddle: JsFiddle
i want to know why my image/image caption overlap's my website banner? I'm pretty sure its something to do with my absolute positioning but I'm not 100% sure! I'm trying to have the image/image caption right under the banner. I don't want to position it with px/cm/in because it may be different across screen sizes!
Html:
<!doctype html>
<title>Untitled Document</title>
<body>
<div class="banner"><img src="http://i.imgur.com/7m4rahc.jpg" alt="Loading..."/></div>
<div id="mainwrapper">
<div id="box-3" class="box">
<img id="image-3" src="http://i.imgur.com/NEZfdM7.jpg"/>
<span class="caption fade-caption">
<h3>Click To Subscribe</h3>
<center>
<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channel="AfterlifeGamingHD" data-layout="full" data-count="default"></div>
</center>
</span>
</div>
</div>
</body>
CSS:
charset "utf-8";
/* CSS Document */
body {
background-image: url(http://i.imgur.com/2MVANTR.jpg);
background-repeat: no-repeat;
margin: 0;
padding: 0;
}
img, .banner {
width: 100%;
position: absolute;
top: 0px;
left: 0px;
}
#mainwrapper .box {
border: 5px solid #fff;
cursor: pointer;
float: left;
position: relative;
overflow: hidden;
width: 370px;
height: 470px;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
#mainwrapper .box img {
position: absolute;
left: 0;
width: 370px;
height: 470px;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
#mainwrapper .box .caption {
background-color: rgba(0,0,0,0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption {
opacity: 0;
width: 370px;
height: 470px;
text-align: left;
padding: 15px;
}
#mainwrapper .box:hover .fade-caption {
opacity: 1;
}
position:absolute removes an element from the document flow, allowing other elements to take up the freed space. There seems to be no real reason for you using position: absolute, so just remove it...
#box-3{
position:relative;
top:500px;(set this to what you want it)
}
http://jsfiddle.net/J35sf/5/
You could just position it to where ever you want it. :)
As you can see here (fiddle), a is the parent and is set to overflow: hidden;. span is the child and has box-shadow set. When nothing happens, everything goes well, but when a user hovers the a, its overflow property seems to get overwritten (i.e. the shadow is shown in a square, rather than a circle, as it should). Any idea how to solve this?
Code:
HTML
<span>Hover me</span>
CSS
a {
overflow: hidden;
width: 52px;
height: 52px;
top: 0;
display: block;
position: relative;
margin: 50px;
background: red;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-ms-transition: all 300ms linear;
-o-transition: all 300ms linear;
transition: all 300ms linear;
border-radius: 200px;
opacity: 0.6;
}
a:hover {
opacity: 1;
top: -8px;
}
a > span {
width: 100%;
height: 100%;
display: block;
box-shadow: inset 0 -35px 10px rgba(0,0,0,0.8);
}
a:hover > span {
box-shadow: inset 0 -28px 10px rgba(0,0,0,0.8);
}
your question is not understable but try this if it can help you then....
a {
overflow: hidden;
width: 52px;
height: 52px;
top: 0;
display: block;
position: relative;
margin: 50px;
background: red;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-ms-transition: all 300ms linear;
-o-transition: all 300ms linear;
transition: all 300ms linear;
border-radius: 200px;
opacity: 0.6;
}
a:hover {
overflow: hidden;
opacity: 1;
}
a > span {
overflow: hidden;
width: 100%;
height: 100%;
display: block;
box-shadow: inset 0 -35px 10px rgba(0,0,0,0.8);
}
a:hover > span {
overflow: hidden;
box-shadow: inset 0 -28px 10px rgba(0,0,0,0.8);
}
I am trying to get a transition working on some bullets in firefox, but I am having no luck. It works on chrome, safari, opera and ie. Here is my css. I just want the background-image adjusted to my y positioning.
#slideshow-nav a {
display: block;
width: 10px;
height: 10px;
padding: 3px;
background: url('images/bullets.png');
background-position-y: 17px;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
-ms-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
}
#slideshow-nav a:hover {
display: block;
width: 10px;
height: 10px;
padding: 3px;
background: url('images/bullets.png');
background-position-y: 0px;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
-ms-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
}
#slideshow-nav li.activeSlide a {
display: block;
background: url('images/bullets.png');
background-position-y: 0px;
width: 10px;
height: 10px;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
-ms-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
}
To my knowledge (which most certainly is incomplete) background-position-y is not a valid property. My guess is Firefox is not recognizing it. Try:
background-position: 0 17px;
going to
background-position: 0 0;
a.menuhvr { background-image:url('images/bullets.png'); background-repeat:no-repeat; background-position:left; padding-right: 0px; padding-left: 20px; color: #FFFFFF; text-decoration: none; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 14px; font-weight:lighter; text-transform: none; border: 0px; display: block; -webkit-transition: all .5s ease-in-out 0s; -o-transition: all .5s ease-in-out 0s; -moz-transition: all .5s ease-in-out 0s; transition: all .5s ease-in-out 0s; height: 25px; line-height: 25px; }
a.menuhvr:hover { background-image: url(images/bullet1.png); background-repeat:no-repeat; background-color: #104595; background-position: right; margin: 0px; padding-right: 0px; padding-left: 25px; color: #FFFFFF; text-decoration: none; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 14px; font-weight:lighter; background-color: #104595; border: 0px; display: block; height: 25px; line-height: 25px; }
If you wish you can change both different bullet images or can use single
Ok, so I have an empty <span> that is nested in side my <li>'s of an unordered list. The span holds a background image that is supposed to appear on :hover. The problem is that while the animation is transitioning, the z-index is wrong, the <span> stacks itself in front of the <a> element which precedes it in the DOM. As soon as the animation completes, however, the stacking order corrects itself. The result is a visual sudden "snap" of the effect and also the link becomes unclickable for the duration of the CSS3 transition.
Can anyone break down what is happening at the DOM level? How can I fix this?
You can see a working example that demonstrates the issue here: http://jsfiddle.net/qZkfw/1/
My HTML
<div id="nav">
<ul id="nav-main">
<li>Home<span></span></li>
<li>About<span></span></li>
<li>Get Fit<span></span>
<ul class="nav-secondary">
<li>Exercise Library</li>
<li>Find An Instructor</li>
<li>Fitness Tools</li>
</ul>
</li>
<li>Find An Instructor<span></span></li>
<li>Get Certified<span></span></li>
</ul>
</div>
my CSS
#nav-main li {
margin:0;
padding:5px;
position: relative;
display: block;
float: left;
margin-left: 10px;
}
#nav-main li a {
color: #97dd6e;
font-size: 1.1em;
text-decoration: none;
text-align: center;
margin-right: -7px;
line-height: 19px;
z-index: 99;
}
#nav-main li span {
height: 28px;
background: transparent url('/images/application/bg_nav_active_repeat.png') repeat-x top center;
display: block;
margin: -22px -5px 0 2px;
padding: 3px 0 0 0;
z-index: 98;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#nav-main li:hover span {
opacity: 1;
visibility: visible;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
#nav-main li span:before, #nav-main li span:after {
content: '';
height: 28px;
width: 7px;
display: block;
background: transparent url('/images/application/bg_nav_active_before.png') no-repeat left top;
position: absolute;
top: 2px;
left: 0;
z-index: 999;
}
#nav-main li span:after {
background: transparent url('/images/application/bg_nav_active_after.png') no-repeat right top;
left: 100%;
}
Add position:relative; z-index: -1; to #nav-main li span.
Updated jsfiddle.
Edit:
I figured it out.
Static elements do not obey z-index, so you need to add position:relative; to #nav-main li a.
Updated jsfiddle.