I have the strangest issue i have ever seen - hope you can help me guys.
I am making rainbow text transition in my chrome packaged app. You can see it
// script2.js
var box = document.getElementById('kalreg');
box.addEventListener('transitionend', loopTransition, false )
function loopTransition(e) {
if ( e.propertyName == 'color' ) {
console.log('aa');
if (box.className == "it-animate") {
console.log('bb');
$(box).removeClass("it-animate")
} else {
box.className = "it-animate";
console.log('cc');
}
}
}
box.className = ''
.it-wrapper{
padding: 30px;
text-align: center;
max-width: 1140px;
}
.it-wrapper h3{
font-size: 130px;
line-height: 150px;
padding: 30px 30px 40px;
color: rgba(255,255,255,0.1);
font-family: 'guanine', 'Arial Narrow', Arial, sans-serif;
text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
background: -webkit-linear-gradient(left, rgba(105,94,127,0.54) 0%,
rgba(255,92,92,0.57) 15%,
rgba(255,160,17,0.59) 27%,
rgba(252,236,93,0.61) 37%,
rgba(255,229,145,0.63) 46%,
rgba(111,196,173,0.65) 58%,
rgba(106,132,186,0.67) 69%,
rgba(209,119,195,0.69) 79%,
rgba(216,213,125,0.7) 89%,
rgba(216,213,125,0.72) 100%),
-webkit-repeating-linear-gradient(-45deg, rgba(255,255,255,0.9), transparent 20px, rgba(255,255,255,0.3) 40px);
background-size: 300% 100%;
background-position: center left, top left;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
transition: all 2s ease;
-moz-border-radius: 90px 15px;
-moz-box-shadow: 0px 0px 0px 10px rgba(255,255,255,0.4);
}
.it-wrapper h3.it-animate{
background-position: center right, top right;
color: rgba(255,137,149,0.7);
-moz-box-shadow: 0px 0px 0px 10px rgba(39,137,149, 0.9);
}
input {
width: 100%;
}
#font-face {
font-family: guanine;
src: local(guanine), url('fonts/guanine_.ttf') format('opentype');
}
<div class="it-wrapper">
<h3 class="it-animate" id="kalreg">text</h3>
</div>
working in jsfiddle here:
fiddle
If you press "run" rainbow would move. And here goes the strangest part. On my computer this animation doesnt start although files look identically except one small difference - i include script2.js (commented in html file in fiddle) instead of raw javascript in html file. But there is a way to start animation on ma computer. All I need to do is instead of last line in javascript that looks like this:
box.className = ''
put something like this:
setTimeout(function () { box.className = ''}, 0)
I have no idea what is going on here, especially everything worked fine yesterday. Any ideas ? I am sitting with this all evening and cant find any reason why it behaves like that.
Kalreg
Related
This is the layout I am trying to achieve: https://jsfiddle.net/h0oa3Lps/ All keys are the same size.
In my application I have this code. The js is at the bottom of my jade file:
$('.keyboard')
.keyboard({
layout: 'custom',
customLayout: {
'default' : [
'1 2 3 {c}',
'4 5 6 {b}',
'7 8 9 {dec}',
'{left} {right} 0 {a}'
]
},
maxLength : 6,
restrictInput : true,
useCombos : false,
acceptValid : true,
validate : function(keyboard, value, isClosing){
// only make valid if input is between 0 and 100 inclusive
return value >= 0.0 && value <= 100.0;
}
})
.addTyping();
When using css/keyboard.min.css, the left arrow, right arrow and backspace keys are slightly larger than the other keys. Also the text positioning is off. Image:
If I switch to css/keyboard-basic.min.css the arrow keys are the same size as regular keys but the esc, backspace, and accept keys are twice the size as the regular keys. Also this takes up half of the screen (since it's not using the jquery-ui positioning). Image:
How do I enforce uniform key size?
If it makes any difference I am using Node, Express and Foundation v5.5.3 plus I have just updated to the latest versions of jQuery, jQuery-ui and jQuery.keyboard.
To fix this issue I copied the unminified css of keyboard.css to a keyboard-butchered.css. I then started experimenting with the styles in keyboard-basic.css and eventually came up with the following that partially answered my question:
.ui-keyboard {
/* adjust overall keyboard size using "font-size" */
font-size: 28px; /* increase button size for small screen */
text-align: center;
background: #fefefe;
border: 1px solid #aaa;
padding: 4px;
/* include the following setting to place the
keyboard at the bottom of the browser window */
left: 0px;
top: auto;
/*position: fixed;*/
position: absolute;
white-space: nowrap;
overflow-x: auto;
/* see issue #484 */
-ms-touch-action: manipulation;
touch-action: manipulation;
}
I then mixed in the style for the keyboard button. This gives the correct style as seen in the jsfiddle demo (but jumbo sized).
.ui-keyboard-button {
border: 1px solid #aaa;
padding: 0 0.5em;
margin: 1px;
min-width: 3em;
height: 3em;
line-height: 3em;
vertical-align: top;
font-family: Helvetica, Arial, sans-serif;
color: #333;
text-align: center;
border-radius: 5px;
-webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5);
box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5);
background: white;
background-image: -webkit-linear-gradient(-90deg, white 0%, #e3e3e3 100%);
background-image: linear-gradient(-90deg, white 0%, #e3e3e3 100%);
cursor: pointer;
overflow: hidden;
-moz-user-focus: ignore;
}
I'm working on a webapp that uses react.js and sass for styles (so all my style files are .scss). I have a textbox with the current style:
input[type=text] {
text-align: center;
font: inherit;
border: 6px solid #999999;
padding: 5px 5px;
font-size: 15px;
box-shadow: 0 1px 1px #DDD;
width: 223px;
outline: none;
display: block;
color: #7B8585;
margin: 0 auto 20px;
}
At some point, my app wants to change the border colour. This is what I have for that:
var borderStyle;
if (gradient) {
borderStyle = {
'borderImage': '-webkit-linear-gradient(left, #0083c5 0%, #0083c5 33%, #ec4a26 66%, #ec4a26 100%)',
};
}
Later, the input component:
<input type="text" style={borderStyle} onChange={this.handleChange} />
Currently what I see is a white border with a tiny image of the red-blue gradient in each corner of the border. I've tried using borderColor, which doesn't work with gradients at all, apparently. Am I missing something obvious, or is it not possible to do a simple border gradient?
The desired result is a left-to-right gradient (so the left border is entirely blue, the right is entirely red, and the top and bottom borders feature the blue-to-red transition).
In response to Harry's answer, I changed to the following code:
if (gradient) {
borderStyle = {
borderImage: 'linear-gradient(to right, #0083c5 0%, #0083c5 33%, #ec4a26 66%, #ec4a26 100%)',
borderImageSlice: 1
};
}
as specified in the react docs for inline styles.
However when I inspect the element, the borderImageSlice property I've defined is missing; only the borderImage one is there, and I still only have tiny gradients in the corners of the border.
You need to add a border-image-slice property also while applying the border. Doing this would give the exact output as you need.
I have added it via CSS itself in the below snippet (without the JS) but you should be able to adapt it :)
input[type=text] {
text-align: center;
font: inherit;
border: 6px solid #999999;
padding: 5px 5px;
font-size: 15px;
box-shadow: 0 1px 1px #DDD;
width: 223px;
outline: none;
display: block;
color: #7B8585;
margin: 0 auto 20px;
border-image: linear-gradient(to right, #0083c5 0%, #0083c5 33%, #ec4a26 66%, #ec4a26 100%);
border-image-slice: 1;
}
<input type="text" />
Note: I have also modified the gradient syntax to use the standard one so that it works in all browsers that support border-image property.
Below is a snippet which applies the border image when the text in the input box is changed.
var ip = document.getElementById("inp");
ip.addEventListener("change", function() {
this.style.borderImage = 'linear-gradient(to right, #0083c5 0%, #0083c5 33%, #ec4a26 66%, #ec4a26 100%)';
this.style.borderImageSlice = '1';
});
input[type=text] {
text-align: center;
font: inherit;
border: 6px solid #999999;
padding: 5px 5px;
font-size: 15px;
box-shadow: 0 1px 1px #DDD;
width: 223px;
outline: none;
display: block;
color: #7B8585;
margin: 0 auto 20px;
}
<input type="text" id="inp" />
It seems like ReactJS by default adds px as units to all numbers that are passed for inline styles and because of this the border-image-slice: 1 is wrongly getting set as border-image-slice: 1px. As this property is a unitless property in CSS, it is not getting applied properly. The solution is to wrap this value within quotes and also add a semi-colon within the quotes (like in the below code sample):
var borderStyle = {
borderImage: 'linear-gradient(to right, #0083c5 0%, #0083c5 33%, #ec4a26 66%, #ec4a26 100%)',
borderImageSlice: '1;' // note the quotes and the semi-colon.
};
Big credits for finding out this problem goes to Henrik Andersson.
JSBin Demo with ReactJS
I managed to fix such problem by adding 1 / 1 / 0 stretch by myself to the inline-style so it looks like this:
var borderImage = `linear-gradient(to right, #1A80AC 0%, #1A80AC ${position.x / 3}%,
#8798AD ${ position.x / 3 }%, #8798AD 100%) 1 / 1 / 0 stretch`
I switched from Twitter Bootstrap 2 to Bootstrap 3 and found myself without typeahead, it's recommended to use Twitter typeahead.js now. The corresponding meteor package seems to be up to date in terms of typeahead.js, but probably has been outdated by the latest updates of meteor. For me, it doesn't work correctly.
Does somebody know how to run typeahead.js in Meteor or confirm I'm just using it wrong?
From my code I get this messed up typahead formatting:
Thanks for any hint!
typeahead.html
<head>
<title>typeahead</title>
</head>
<body>
{{> hello}}
</body>
<template name="hello">
<form class="form-inline" role="form">
<div class="form-group">
<input class="form-control" type="text" id="typeahead">
</div>
</form>
</template>
typeahead.js
if (Meteor.isClient) {
Template.hello.rendered = function () {
$('input#typeahead').typeahead({
name: 'accounts',
local: ['timtrueman', 'JakeHarding', 'vskarich']
});
};
}
I was able to get this to work using the answer from here https://stackoverflow.com/a/18171568/1691147
In regards to how to do it in meteor. In your rendered function, fill up typeahead
var items = [],
finalItems,
tags = Tags.find({}, {fields: {name: 1, submitted: 0}});
tags.forEach(function(tag){
items.push(tag.name);
});
finalItems = _.uniq(items)
$('#search').typeahead({
local: finalItems
});
Then, on a keyup event, do
$('.tt-query').css('background-color','#fff');
$('#search').removeClass('tt-query');
And in your css, add
.twitter-typeahead{
width:100%;
}
.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
margin-bottom: 0;
}
.tt-dropdown-menu {
min-width: 160px;
margin-top: 2px;
padding: 5px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.2);
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
.tt-suggestion {
display: block;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
color: #fff;
background-color: #0081c2;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
}
.tt-suggestion.tt-is-under-cursor a {
color: #fff;
}
.tt-suggestion p {
margin: 0;
}
It's pretty hacky, but it will work until they get Typeahead and Bootstrap 3 to play nicely with each other.
If you're after general free-text autocomplete, you may want to check out my autocomplete package for meteor, first released just a couple of days ago:
https://github.com/mizzao/meteor-autocomplete
You may also get some inspiration from there for what you are trying to do. I strongly recommend a Meteor collection-backed implementation rather than trying to cobble together something using existing asynchronous libraries, which is what I've done here. This allows the autocomplete to be completely reactive and client-side (the list contents can update while you're looking at them!) and much quicker.
Some pictures below...
Autocompleting users with #, where online users are shown in green:
In the same line, autocompleting something else with metadata and bootstrap icons:
Please fork, pull, and improve!
The website I am building has 4 large background images that take up the entire height and width of the user's browser. They are implemented as CSS background divs. The problem is, when scrolling on larger screen sizes, it is very laggy and choppy. Scrolling between these images is done automatically via JavaScript when the user presses a button, so this is part of the core functionality of my website and I must find a way to prevent lag.
So far, I have tried preloading the images via JS and converting the images from PNG to JPEG (increase compression and decrease quality) server-side. Neither of these worked.
The minimum height of the image can be 630 pixels. How can I prevent lag while scrolling between sections?
Here's my code:
CSS:
body { height: 100%; margin: 0px; font-family: HelveticaNeue, Helvetica, Arial, sans-serif; }
.area { height: 630px; border: 0px solid red; background: repeat-x; margin-bottom: 0px; }
a { text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-family: Av, Helvetica, Arial, sans-serif; color: #292E37; font-weight: lighter; }
#top { position: fixed; width: 100%; height: 10%; background: #292E37; box-shadow: inset 0px -1px 5px #000; z-index: 1000; }
#navigation { float: right; height: 100%; }
#bottom { width: 100%; position: fixed; bottom: 0px; padding: 10px; background: #292E37; box-shadow: inset 0px 1px 5px #000; text-shadow: 0px 1px 0px #000; color: #fff; }
#sceneSelection { top: 20%; position: fixed; padding: 10px; }
#info { margin-top: 50px; margin-bottom: 50px; }
.box { margin-top: 50px; padding: 75px; background: #292E37; box-shadow: inset 0px 1px 5px #000; text-shadow: 0px 1px 0px #000; color: #fff; }
.nav { position: relative; top: 38%; height: 100%; margin-right: 35px; display: inline-block; color: #fff; text-shadow: 0px 1px #000; }
.nav:hover { color: #EA5555; }
.nimage { float: left; width: 16px; height: 16px; position: relative; top: 5%; left: -20%; }
.home { background: url(site_images/icons/nav/home.png); }
.pricing { background: url(site_images/icons/nav/pricing.png); }
.features { background: url(site_images/icons/nav/features.png); }
.blog { background: url(site_images/icons/nav/blog.png); }
.contact { background: url(site_images/icons/nav/contact.png); }
.about { background: url(site_images/icons/nav/us.png); }
.logo { font-size: 2em; text-shadow: 0px 1px #000; padding-top: 10px; padding-left: 15px; color: #EA5555; font-family: Av, Helvetica, Arial, sans-serif; }
.red { color: #EA5555; }
.white { color: #fff; text-shadow: 0px 1px 0px #000; font-weight: bold; }
.dark { color: #202020; }
.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }
.larger { font-size: 1.25em; }
.buttoni { -webkit-border-radius: 2px; -moz-border-radius: 0px; border-radius: 4px; background: #ddd; display: block; color: #ccc; font-size: 14pt; height: 50px; text-align: right; margin: 10px; cursor: pointer; color: #505050; }
.buttoni:hover { background: #EA5555; color: #fff; }
.btext { padding: 15px; position: relative; top: 25%; }
.groundi { background: url(ground_button.png); }
.skyi { background: url(sky_button.png); }
.stratospherei { background: url(stratosphere_button.png); }
.spacei { background: url(space_button.png); }
.image { height: 50px; width: 50px; float: left; border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
li { color: #EA5555; }
li span { color: #505050; }
HTML:
<div class="space area" id="a4">
</div>
<div class="stratosphere area" id="a3">
</div>
<div class="sky area" id="a2">
</div>
<div class="ground area" id="a1">
</div>
JavaScript:
function scroll_to(id, speed, margin) {
$('html, body').animate({
scrollTop: $('#' + id).offset().top - margin
}, speed);
}
function match_height() {
var heights = [11, 630, 693, 756, 819, 882, 945, 1008, 1071, 1134, 1197, 1260, 1323, 1386, 1449, 1512, 1575, 1638, 1701, 1764, 1827, 1890, 1953, 2016, 2079, 2142, 2205, 2268, 2331, 2394, 2457, 2520];
var browsery = $(window).height();
var i = 0;
while(browsery > heights[i]) {
i++;
}
var h = heights[i];
$(".area").css("height", h + "px");
$(".area").css("width", "100%");
$(".ground").css("background", "url(scenes/ground/" + h + ".png)");
$(".sky").css("background", "url(scenes/sky/" + h + ".png)");
$(".stratosphere").css("background", "url(scenes/stratosphere/" + h + ".png)");
$(".space").css("background", "url(scenes/space/" + h + ".png)");
}
match_height();
var pos = 0;
$(".buttoni").click(function() {
var id = $(this).attr("id");
if(pos != id) {
scroll_to("a" + id, 2000, 0);
}
pos = id;
});
OP,
For browsers that support 3d transforms, e.g.: -webkit-transform, you could try the following:
your.div { -webkit-transform: translate3d(0,0,1px); }
Might not look like much, but doing the above causes the div in question to be hardware-accelerated.
Should you run into any flickering issues—they've been known to turn up in some cases—the following should sort you out:
your.div {
-webkit-transform: translate3d(0,0,1px);
-webkit-backface-visibility: hidden;
}
Via David Walsh - http://davidwalsh.name/translate3d
The use of translate3d pushes CSS animations into hardware acceleration. Even if you're looking to do a basic 2d translation, use translate3d for more power! If your animation is still flickering after switching to the transform above, you can use a few little-known CSS properties to try to fix the problem
Hope that helps.
As per my understanding, the issue and the solution drafted in the OP is two-fold:
initially, within the match_height() function, the OP author retrieves the images that best fits the screen height, so that upon completed animation the user sees one full background image.
after initial load, the user can navigate up and down the sections (with their respective background images) with the help of some buttons that trigger the scroll_to() function and its contained animation. Here is where the actual problem resides.
My efforts and the resulting fiddle focus on the scroll_to() function and the associated animation. I applied the following measures that, in conjunction, result in a (as per my subjective observation) 'smoother' scolling experience:
the original animation happened against 'html' and 'body', I'm reducing the jQuery selector to one selector only. In order to be able to use jQuery 1.9 (where jQuery.browser is deprecated) I'm using feature detection to get the 'right' selector:
function getScrollerSelector() {
var $body = $("<body/>");
$body.scrollTop(1);
return $body.scrollTop() == 1 ? "body" : "html";
}
In order to reduce the browser's processing load, I'm applying a logic that, per CSS, sets the background image of invisible sections to none during scrolling:
.scrolldown.scrollto-a2 #a1,
.scrolldown.scrollto-a3 #a1, .scrolldown.scrollto-a3 #a2,
.scrolldown.scrollfrom-a3 #a4,
.scrolldown.scrollfrom-a2 #a4, .scrolldown.scrollfrom-a2 #a3,
.scrollup.scrollto-a3 #a4,
.scrollup.scrollto-a2 #a4, .scrollup.scrollto-a2 #a3,
.scrollup.scrollfrom-a2 #a1,
.scrollup.scrollfrom-a3 #a1, .scrollup.scrollfrom-a3 #a2
{ background: none; }
I played around with linear easing, but that did not necessarily improve anything
All in all, scrolling doesn't seem choppy to me any more, but please take into account that this is also dependent on the client computers processing power.
Here's the scroll_to() function:
function scroll_to(id, speed, margin) {
var currentScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
var scrollTop = $('#' + id).offset().top - margin;
var direction = scrollTop > currentScrollTop ? "down" : "up";
$("body").addClass("scroll"+direction + " scrollto-"+id + " scrollfrom-"+getScrollFrom(direction));
$( scrollerSelector ).animate({
scrollTop: scrollTop
}, {
//easing: 'linear',
duration: speed,
complete: function() {
$("body").removeClass("scrollup scrolldown scrollto-a1 scrollto-a2 scrollto-a3 scrollto-a4 scrollfrom-a1 scrollfrom-a2 scrollfrom-a3 scrollfrom-a4");
}
}
);
}
This is the link to jsfiddle
Since you are Scaling up the image, you can tell the Browser how to handle the rendering of image.
During the animation / scrolling, you can tell browser to Optimize on Speed and on completion of Animation / scrolling, Optimize on Quality.
Here is the CSS Property you can use on img: 'image-rendering' with values as optimizeSpeed / optimizeQuality.
https://developer.mozilla.org/en-US/docs/CSS/image-rendering
One thing you could do to images is smush it using http://www.smushit.com/ysmush.it/
this reduces the size of the image without loosing quality removing all unwanted meta data.
Testing locally it seems like your code should work ok, I have firefox 15 and chrome and don't see any lagging
What if you try this for the scroll to method?
function scroll_to(id, speed, margin) {
$('html, body').animate({
scrollTop: $('#' + id)
}, speed);
}
I had a similar problem with a website I was working on. In the end the problem seemed to be because of the large dimensions of the image that the computer/browser had to compute and render on screen.
My recommendation would be to try and reduce the amount of image that needs to be shown and scrolled on screen if possible.
Most modern browsers now support hardware (graphics card) rendering instead of the traditional (usually slower) software based (CPU) rendering. Hardware based rendering should in theory reduce that lag you're experiencing. However if your PC only has base or average graphics rendering capabilities, you're not going to have much success regardless. I personally had no success with either in Chrome, FireFox or IE until I gave in and removed the images.
I am using jquery .animate() to change the width of an <li> tag. I have text in the <li> encased in <p> tags so that I can center it, however, when the animation happens the text is moved down by 50% of the <li> element, i do not know if the 50% is releated or just coincidence.
my HTML:
<div id="about_nav">
<ul>
<li id="button_welcome"<p>Welcome</p></li>
<li id="button_services"><p>Services</p></li>
<li id="button_naming"><p>Naming</p></li>
<li id="button_creating"><p>Creating Brands</p></li>
<li id="button_bizam"><p>Bizam What?</p></li>
</ul>
</div>
my jquery code is:
$('#button_welcome').click(function(){
if($(this)!=previous){ //checks if it was clicked last
if(previous!=null){ //checks if the previous element exists
previous.animate({width: 130},150); //resets previous
}
$(this).animate({width: 163},150); //animates current
previous = $(this); //assigns current to previous
$('#about_content').children().hide(); //resets tabs window
$('#tab_welcome').show(); //displays correct tab
}
});
And my css:
#about_nav{
float:left;
display:block;
margin-left:0px;
overflow:hidden;
padding-right:10px;
}
#about_nav ul{
list-style:none;
padding:0;
}
#about_nav li{
height:48px;
width:130px;
background: #613675; /* old browsers */
background: -moz-linear-gradient(top, #613675 0%, #9145B5 50%, #613675 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#613675), color-stop(50%,#9145B5), color-stop(100%,#613675)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#613675', endColorstr='#613675',GradientType=0 ); /* ie */
background: -o-linear-gradient(top, #613675 0%,#9145B5 50%,#613675 100%); /* opera */
text-align:middle;
margin-bottom:15px;
-moz-border-radius-bottomright: 6px 4px;
bottom-right-border-radius: 6px 4px;
-webkit-border-bottom-right-radius: 6px 4px;
-moz-border-radius-topright: 6px 4px;
top-right-border-radius: 6px 4px;
-webkit-border-top-right-radius: 6px 4px;
-moz-box-shadow: 0px 3px 8px 3px #444;
-webkit-box-shadow: 0px 3px 8px 3px #444;
box-shadow: 0px 3px 8px 3px #444;
}
#about_nav li p{
padding-top:19px;
padding-bottom:19px;
text-align:right;
margin-right:10px;
vertical-align:middle;
}
Also, my comparison of $(this)!=previous does not seem to work.
So, how can i stop my text moving and keep it centered in the <li> and can you help my with my comparison?
Cheers,
Fraser
P tags are rendered inline, whereas divs are rendered as blocks. Try settings the style of the p tags to display:block; and it should work.
First: close this li tag as others have said above.
<li id="button_welcome"><p>Welcome</p></li>
Second: change your p css to this.
#about_nav li p{
padding: 0;
margin: 0 10px 0 0;
height: 100%;
padding-top: 15px; /* change this to adjust height of the p tag */
text-align: right;
}
Also, with the code given you are not defining 'previous'. I would need to see the rest of your code to see why that is not working.
JsFiddle : http://jsfiddle.net/nXgSa/
One line easy fix:
$('#myDiv > p').css('display','block');
Also, I noticed in your example you put :
<li id="button_welcome"<p>Welcome</p></li>
You might have also forgot to close your < li > tag.
Ultimate fix :
Looking at the element in the development tools during the animation, it turns out that jQuery apply a style overflow: hidden; to the element during the whole transformation.
To fix this, just add the overflow: visible property to your .animate() function :
if(previous!=null) { //checks if the previous element exists
previous.animate({
overflow: 'visible',
width: 130
}, 150);
}
$(this).animate({
overflow: 'visible',
width: 163
}, 150); //animates current
Here is the JSFiddle to test that the <p> tags are not going down anymore : http://jsfiddle.net/jpreynat/28fmw4vy/1/