We Keep Coding

Jquery evenly resize anchor text

I am trying to evenly increase and then decrease the font size of anchor text inside a paragraph without moving the paragraph text. This way the anchor text will look as if it is coming toward the user and then receding back into its original place. The font-size also appears as if it is growing from the lower left corner as opposed to what I want which is evenly from all sides.
HTML:
<p>
<a>[D]</a>I've been workin' on the railroad,
<a>[G]</a>all the live long <a>[D]</a>day.
<a>[D]</a>I've been workin' on the railroad,
just to <a>[E]</a>pass the time a<a>[A]</a>way.
</p>
CSS:
p {
white-space: pre-wrap;
}
a {
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
color:red;
}
.increase-font {
font-size: 30px;
background:#FFF;
}
Jquery/Javascript:
$('a').on('click',function(e){
e.preventDefault();
var el = this;
$(el).addClass('increase-font');
setTimeout(function(){
$(el).removeClass('increase-font');
},1000);
});
Here is the fiddle:
https://jsfiddle.net/scooke/ro2tyf6h/

To achieve this, the anchor texts need to be somewhat independent from the parent. Inserting the anchor text with CSS :before or :after selectors will solve the problem. See my example and adjust as needed.
$('a').on('click', function(e) {
e.preventDefault();
var el = this;
$(el).addClass('increase-font');
setTimeout(function() {
$(el).removeClass('increase-font');
}, 1000);
})
p {
white-space: pre-wrap;
padding-left: 30px;
display: inline-block;
width: 100%;
position: relative;
}
a {
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
color: red;
display: inline-block;
position: relative;
width: 30px;
height: 10px;
}
a:before {
content: "[D]";
position: absolute;
left: 0;
text-align: center!important;
width: 100%;
top: -5px;
}
.increase-font {
font-size: 30px;
background: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p> <a></a>I've been workin' on the railroad,</p>
<p><a></a>all the live long <a></a>day.</p>
<p><a></a>I've been workin' on the railroad, just to <a></a>pass the time a<a></a>way.</p>
Suggestions:
Restructuring your HTML will be a good start
Adding a background to the :hover state will help keep it clean
and distinguishable.

It's relatively simple - just wrap the anchor tags in span tags:
<p><a><span>[D]</span></a>I've been workin' on the railroad,</p>
<p><a><span>[G]</span></a>all the live long <a><span>[D]</span></a>day.</p>
<p><a><span>[D]</span></a>I've been workin' on the railroad, just to <a><span>[E]</span></a>pass the time a<a><span>[A]</span></a>way.</p>
Set the anchor's position to relative (with a margin to give its children spans room), whilst also setting span tags to absolute:
a {
position: relative;
max-height: 0px;
max-width: 0px;
margin-right: 25px;
}
span {
position: absolute;
top: 0;
left: 0;
}
Then just swap the jQuery event handler from registering on all anchor tags to all span tags:
$('span').on('click',function(e){
e.preventDefault();
var el = this;
$(el).addClass('increase-font');
setTimeout(function(){
$(el).removeClass('increase-font');
},1000);
})
Seeing as absolute elements are removed from the DOM flow, resizing the spans doesn't effect the elements around it. Full code here:
https://jsfiddle.net/ro2tyf6h/5/

Responsive Image Background Quality Issues

I have a header that changes size when a user scrolls past a certain point via JavaScript.
When a user scrolls beyond 50px, the class .smaller is added to the header, which affects the child elements, including the logo.
However, when the logo DIV element is resized, the quality of the image seems to change; the edges seem much more jagged and sharper.
This is how it looks normally:
And scrolled:
Here is the CSS:
div#header div.logo {
width: 400px;
height: 90px;
margin: 5px;
background: url(../img/logo.png) no-repeat center center;
background-size:contain;
float:left;
padding:0 !important;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
div#header.smaller div.logo {
width:262px;
height:40px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
Relevant JavaScript:
window.onload = init();
function init() {
//header resize on scroll
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 50,
header = document.querySelector("#header");
if (distanceY > shrinkOn) {
classie.add(header,"smaller");
} else {
if (classie.has(header,"smaller")) {
classie.remove(header,"smaller");
}
}
});
}
Why is there such a noticeable change in image quality, and how can this be avoided?

The image got blurry when navigator resize your image on the fly. SVG image will not blur your logo.
e.g. virtuehost.net/clients/go2markets check this site and try to resize this logo.

Move a div with animation

In the following code .logo is hidden by default. I want to display it on scroll, so when it appears I want to move the <ul> to the right with some animation (for example sliding to the right). If you see the demo, you can see that when the logo appears or disappears, the <ul> changes its position in quite bad way, I want to make it more smooth.
How that can be achieved?
HTML:
<div class="header">
<div class="logo"><img src="http://i.imgur.com/C0ZR4RK.png" /></div>
<ul class="list">
<li>Lorem ipsum</li>
<li>dolor sit amet</li>
<li>consectetur.</li>
</ul>
</div>
jQuery:
$(function() {
var shrinkHeader = 300;
$(".logo").hide();
$(window).scroll(function() {
var scroll = getCurrentScroll();
if (scroll >= shrinkHeader) {
$('.header').addClass('shrink');
$(".logo").fadeIn("slow");
} else {
$('.header').removeClass('shrink');
$(".logo").fadeOut("slow");
}
});
function getCurrentScroll() {
return window.pageYOffset || document.documentElement.scrollTop;
}
});
Demo:
http://jsfiddle.net/ztdr68aw/

Use absolute positioning for your text you want animated. Then just give it the initial position you want and the one it should have once shrunken:
ul {
list-style: none;
font-size: 22px;
position:absolute;
top:5px;
left:10px;
transition:all .3s;
}
.shrink ul{
left:200px;
top:10px;
}
Demo: Fiddle

Try if this would help you,
http://jsfiddle.net/raaj_obuli/ztdr68aw/1/
.list {
position: absolute;
left: 0;
top: 0;
transition: all 500ms;
}
.header.shrink .list {
left: 200px;
}

I think this will help you. Thanks!
$(function(){
var shrinkHeader = 300;
$( ".logo" ).hide();
$(window).scroll(function() {
var scroll = getCurrentScroll();
if ( scroll >= shrinkHeader ) {
$('.header').addClass('shrink');
$( ".logo" ).show();
}
else {
$('.header').removeClass('shrink');
$( ".logo" ).hide();
}
});
function getCurrentScroll() {
return window.pageYOffset || document.documentElement.scrollTop;
}
});

Use this Code
ul {
list-style: none;
font-size: 22px;
position:absolute;
top:5px;
left:10px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.shrink ul{
left:200px;
top:10px;
}

How to add css transitions to js scroll in header?

I have a header that appears when the page scrolls down. I am trying to add css transitions to make it fade in and out because I've read that using javascript for fading is not as efficient.
.header-wrapper {
top:0;
left:0;
right:0;
position: fixed;
display:none;
height: 60px;
border-top: 1px solid #000;
background: red;
z-index: 1;
}
.header-wrapper.active {
display:block;
}
.header {
background-color:#000;
height:80px;
}
Here is the js fiddle
$(window).scroll(function () {
var y = $(window).scrollTop();
// if above 300 and doesn't have active class yet
if (y > 300 && !$('.header-wrapper').hasClass('active')) {
$('.header-wrapper').addClass('active');
// if below 300 has still has active class
} else if(y <= 300 && $('.header-wrapper').hasClass('active')) {
$('.header-wrapper').removeClass('active');
}
});

Transitions are added with the css3 property transition.
One common reason for confusion: you can only transition properties that accept numeric values. Thus, you can't transition between display: block and display: none.
However you can transition between opacity: 0 and opacity: 1 with:
transition: 0.5s opacity
That would look something like this:
.bottomMenu {
...
opacity: 0;
transition: 0.5s opacity;
...
}
.bottomMenu.active {
opacity: 1;
}
For your particular case, I might recommend transitioning the height between 0 and 60px.
For that you can use:
transition: 0.5s height
So:
.bottomMenu {
...
height: 0;
transition: 0.5s height;
...
}
.bottomMenu.active {
height: 80px;
}

To animate the opacity the element must be visible. So remove the display:none and make it fully transparent (opacity:0). You can then use CSS transitions to animate the opacity when the classname changes:
.bottomMenu {
...
display:block;
opacity: 0;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.bottomMenu.active {
opacity:1
}
http://jsfiddle.net/oL9ro4gL/6/
Furthermore, you're not restricted to just animating the opacity:
.bottomMenu {
...
transition: all .25s ease-in-out;
}
.bottomMenu.active {
opacity:1;
height: 60px;
background-color: blue;
transform:rotate(180deg);
color:white;
font-size:40px;
etc...
}
http://jsfiddle.net/oL9ro4gL/8/

Unfortunately, you can't animate the display property. See this question and its suggestions for workarounds.

Advice about how to animate the background of a list item

I was wondering if you can offer me a better way of achieving the effect Ive created in this fiddle: http://jsfiddle.net/YLuKh/1/
Basically I would like to animate the background colour of the anchor tag revealing an image which I've done by positioning an anchor tag on top of a span on top of an image and then on hover animate the width of the span. Can anyone suggest a more straight forward way of doing this?
HTML
<ul id="test">
<li>
This is the link
<span class="bg"></span>
<img src="http://www.ritaxxii.org/wp-content/uploads/Luxury-Bedroom-Furniture-1.jpg" />
</li>
</ul>​
JS
$(document).ready(function() {
var li_width = $('#test').find('li').width();
console.log(li_width);
$('#test').find('li').on('mouseover', function() {
$(this).find('.bg').stop().animate({
width: '0'
}, 200);
}).on('mouseout', function() {
$(this).find('.bg').stop().animate({
width: li_width
}, 200);
});
});​

As I mentioned in the comments you can use the background position to do the animation. Here's a simple one using only background image positioning ( http://jsfiddle.net/3PESX/ )
$('a').mouseenter(function() {
$(this).stop().animate({ 'background-position-x': '-700px'}, 300);
});
$('a').mouseleave(function() {
$(this).stop().animate({ 'background-position-x': '0'}, 300);
});​
a {
display: inline-block;
height: 50px;
width: 300px;
background: transparent url(http://jtrujillo.net/digital-photo-tutorials/8vs16bit/dgr1.jpg) 0 top no-repeat;
color: grey;
text-decoration: none;
line-height: 50px;
}​
This is a link text​
Beware that the background-position property is a composition of the x and y version. You cannot animate composite properties, you'll need to animate the X and Y version seperately. Alternatively you can use a css hook plugin that makes it possible. You can find those here: https://github.com/brandonaaron/jquery-cssHooks

You can get a referance from this : http://snook.ca/archives/javascript/jquery-bg-image-animations

May I suggest a CSS3-only means of achieving what I think you're trying to do:
li {
border: 1px solid #f90;
width: 504px; /* width of the image, adjust to taste */
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
li a {
display: block;
position: relative;
width: 100%;
height: 2em;
line-height: 2em;
color: #fff;
background-color: #000;
-webkit-transition: width 1s linear;
-moz-transition: width 1s linear;
-o-transition: width 1s linear;
-ms-transition: width 1s linear;
transition: width 1s linear;
}
li:hover a {
width: 0;
-webkit-transition: width 1s linear;
}
li a::after {
content: url(http://www.ritaxxii.org/wp-content/uploads/Luxury-Bedroom-Furniture-1.jpg);
position: absolute;
top: 0;
right: 0;
left: 100%;
bottom: 0;
}
​
JS Fiddle demo.

If you're going to have a lot of list items, you might want to consider event delegation to the #test element so you dont have to attach a bunch of different event listeners to each li tag
//attach one event listener for 'mouseover' and one for 'mouseout' on the test element
$('#test').on('mouseover', 'li', function(){
//'this' is still the li element
console.log( $(this));
$(this).find('.bg').stop().animate({width: '0'},200);
}).on('mouseout', 'li', function(){
$(this).find('.bg').stop().animate({width: li_width},200);
});