We Keep Coding

How do I change the colour of an SVG shape using jQuery?

Hi, folks! New here! Hoping to contribute a fair amount to the community in the future. But first, I need a hand with something I imagine to be fairly simple!
I've always been all about the design aspect of the web, so mainly concentrated on HTML and CSS. I've only recently started looking in to learning JavaScript/jQuery, so bear with me, haha!
I'm having a little trouble with changing the colour of an SVG shape using jQuery. The basic idea is that when the user scrolls down the page, certain elements will change colour. The HTML elements change as expected, but the SVG properties don't. I've read something about SVG DOM being different to HTML DOM, but can't really make much sense of it? A small explanation along with any help wouldn't be ignored!
Here is my HTML:
<header>
<div id="headercontainer">
<object id="logo" type="image/svg+xml" data="images/kennyheardlogo.svg"></object>
<nav><a id="homelink" href="index.html">HOME</a> | <a id="aboutlink" href="index.html">ABOUT</a> | <a id="worklink" href="index.html">WORK</a> | <a id="sociallink" href="index.html">SOCIAL</a></nav>
</div>
</header>
Here is my CSS:
header {
position: fixed;
z-index: 1;
width: 100%;
height: 150px;
background-color: #ffffff;
-webkit-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
opacity: 0.8;
-webkit-transition: background-color 0.5s ease;
-moz-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
}
.headerfade {
background-color: #000000;
}
nav {
position: absolute;
top: 65px;
right: 40px;
width: 480px;
height: auto;
color: #000000;
text-align: center;
letter-spacing: 10px;
font-size: 10px;
}
nav, nav a {
-webkit-transition: color 0.5s ease;
-moz-transition: color 0.5s ease;
transition: color 0.5s ease;
}
.navfade {
color: #ffffff !important;
}
#icon {
fill: #000000;
}
.iconfade {
fill: #ffffff;
}
#letterk, #letterh {
fill: #ffffff;
}
#text path {
fill: #000000;
}
Here is my jQuery:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 350) {
$("header").addClass("headerfade");
$("nav, nav a").addClass("navfade");
$("#icon").addClass("iconfade");
} else {
$("header").removeClass("headerfade");
$("nav, nav a").removeClass("navfade");
$("#icon").removeClass("iconfade");
}
});
The initial colour of "#icon" is black, but when the user scrolls 350px from the top of the page, I want the colour to change to white. That is what I have done with the "header" and "nav" elements, which worked perfectly. So, any ideas?
I'm hoping I've not missed something embarrassingly obvious, haha!
Thanks for any help you can provide, guys!

There are two things wrong here.
You can't directly access the contents of an <object> like that. You need to get the contentDocument and access it that way.
CSS doesn't work across document boundaries. Even once you add the iconfade class to #icon, it won't be able to see it because the CSS is in a different document.
What you can do is inline the SVG file in your HTML. It should work then.

Javascript animation lags

Since I started studying web development 2 months ago, I've had similar problem.
The animation lag. This is the only animation and sometimes when it triggers it's kinda low in fps. I wonder what I'm doing wrong.
<script type="text/javascript">
function showSidebar(){
$("#sidebar").stop().show('slide',{easing:"easeOutQuart", direction:"left"}, 1000);
$("#sidebar-ctn").delay(100).stop().show('slide',{easing:"easeOutQuart", direction:"left"}, 900);
}
function hideSidebar(){
$("#sidebar").stop().hide('slide',{easing:"easeOutQuart", direction:"left"}, 500);
$("#sidebar-ctn").stop().hide('slide',{easing:"easeOutQuart", direction:"left"}, 400);
}
</script>
I guess there's something wrong because I don't experience fps drops (i'm not sure what the right term, just that the animation is lagging) in other website with so many animations like this:
http://sarasoueidan.com/demos/windows8-animations/
UPDATE:
So I have discovered what causes it and it's the amount of buttons I have.
Here's what it looks like.
The sidebar has a windows 8 inspired animation and it's the one that lags.
when I test it for framerate here's the result:
but when I removed the circular buttons:
Here's the css for my buttons:
#tables button{
font-size: 1.5em;
color: white;
border: none;
outline: none;
width: 105px;
padding: 5px;
margin: 10px;
height: 70px;
text-shadow: 2px 2px 5px rgba(120,155,179,0.5);
cursor: pointer;
-moz-border-radius:100px;
-webkit-border-radius: 100px;
border-radius: 50%;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
Is there a better way of doing this, that it won't affect the performance even with so much buttons?

This is kinda late but I manage to lessen the fps drop significantly by using spans instead of buttons. It was the large number of buttons that made it cumbersome after all.

How to zoom out a div using animations?

I have a DIV that is covering the whole page (height and width are 100%). I am trying to use CSS (and possibly JavaScript) to create a zoom out animation effect so the DIV is smaller (making everything inside the div - its children - smaller as well) to a specific point on the page (middle of the page) and to a specific width and height (let's say 100 * 100px for example).
I am starting with the following code:
<div id="toBeZoomedOut">
<div>something</div>
<div><img src="background.jpg"></div>
</div>
#toBeZoomedOut {
background-color: black;
border: 1px solid #AAAAAA;
color: white;
width: 300px;
height: 300px;
margin-left: auto;
margin-right: auto;
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
#toBeZoomedOut img {
height: 250px;
width: 250px;
}
#toBeZoomedOut:hover {
zoom: 0.5;
}
The issue with this code is that it zooms out on component down (the parent div) and immediately zooms out what's inside it then goes back to zoom in the components.
Basically it is a little buggy. Any helpful fixes to make it zoom out everything together? It would be great if I can zoom out everything together to a specific location on the page and to a specific width/height (for example, zoom everything out to left: 100px, top: 100px and the parent div should be: 100px * 100px and everything else is relative in size).
I understand this might be easier with JavaScript? Any help?
One final note, if you notice the animation is not really reflecting a zoom animation. Although this would be an additional plus, the actual zoom animation would be great.
JSFiddle link to make it easier: http://jsfiddle.net/HU46s/

I am using the universal selector to target everything inside of the parent container to have the css transitions applied to it.
The next thing I did was changed the inside contents width to a % for ease of scaling.
Here is the css:
#toBeZoomedOut * {
-webkit-transition: all 1s ease;
-moz-transition: 1s ease;
transition: 1s ease;
}
Finally, a fiddle: Demo

To make all images and div backgrounds zoom at the same time you have to use percentage size for #zoomer-inside elements and set a specific font-sizes...
However is not smooth, if you want a smoother result, I suggest you use a jQuery in combination with some animation() method or plugin.
Fiddle: http://jsfiddle.net/HU46s/1/
Code:
#toBeZoomedOut {
background-color: black;
border: 1px solid #AAAAAA;
color: white;
width: 300px;
height: 300px;
margin-left: auto;
margin-right: auto;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#toBeZoomedOut div, #toBeZoomedOut img {
width: 90%;
font-size: 20px;
}
#toBeZoomedOut img {
height: 90%;
width: 90%;
}
#toBeZoomedOut:hover {
zoom: 0.5;
}
smoother by jQuery:
Fiddle: http://jsfiddle.net/HU46s/5/
Code:
jQuery - smoother solution (even less CSS):
$('#toBeZoomedOut').hover( /* change the animation speed as you want :) */
function(){
$(this).animate({ 'zoom': 0.5}, 400); //animation speed 400=0.4s !
},
function(){
$(this).animate({ 'zoom': 1}, 400); //animation speed 400=0.4s !
}
);
...with this only CSS you need is:
#toBeZoomedOut {
background-color: black;
border: 1px solid #AAAAAA;
color: white;
width: 300px;
height: 300px;
margin-left: auto;
margin-right: auto;
}
#toBeZoomedOut img {
width: 250px;
}

how can I achieve this hover effect? Tried several methods with no luck [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
Hey guys how can I achieve a hover effect like the one used on the site below?
http:// minimalmonkey .com/
My current HTML:
http://pastebin.com/jCiy0ghX
And my CSS:
http://pastebin.com/WeQBDx8b
Tried lots of different methods such as borders on hover & width change on hover but didn't have any luck..
Thanks in advance, Luke.

I tried to make it similar, there is couple of things to have in mind according to details:
when it grows content don't move from position - that's why
padding is affected
Column tends to growing around its center - margin and border altered at the same time to accomplish that.
Outer columns seems to fade into background - opacity changes because of that for them.
Apart from creating a container to wrap columns, everything is plain CSS
modified CSS:
/* Column Styling CSS */
#left-column{
background-color: #27ae60;
left:0;
border-color:#27ae60;
}
#centre-column{
background-color: #e67e22;
left: 33.33%;
border-color:#e67e22;
}
#right-column{
background-color: #c0392b;
left: 66.66%;
border-color:#c0392b;
}
div[id$="column"]{
width: 33.33%;
height: 100%;
position: absolute;
}
.columns{
background-color: #333;
width: 100%;
height: 100%;
position: absolute;
}
.columns:hover div{
/*
transition for animation in modern browsers
*/
transition: opacity linear .2s;
opacity:0.3;
}
div[id$="column"]:hover{
/*
transition for animation in modern browsers
*/
transition: border ease-out .1s,margin ease-out .1s,padding ease-out .1s;
z-index:200;
margin-left:-20px;
padding-left:20px;
border-right:solid 20px;
opacity:1;
}
I have used transition property w/out prefixes. You should go for the one that works for you. Check demo here: http://jsfiddle.net/pixshatterer/Zf6VU/

Here's how you can do it with just CSS: http://jsfiddle.net/4v3GE/5/
NOTE: I added a column container.
.column {
width: 33.33%;
height: 200px;
float: left;
-webkit-transition: width .2s ease-in-out;
-moz-transition: width .2s ease-in-out;
-o-transition: width .2s ease-in-out;
transition: width .2s ease-in-out;
}
.column--left{
background-color: #27ae60;
}
.column--center {
background-color: #e67e22;
}
.column--right {
background-color: #c0392b;
}
/* Hover styling */
.columns:hover .column {
width: 25%;
}
.columns .column:hover {
width: 50%;
}

How to make the direction nav constant on flexslider?

I want the little hover grey arrows to be display block and not animate when hovering over the thumbnail navigation. You can see the demo here. I have been wading through the javascript for the plugin and cannot for the life of me work out where it is animating the arrows. If I could, I would just comment out that code. So can anyone else?

This confused me for a little while, but it turns out the arrow animation isn't actually in the plugins javascript. It's in the CSS using -webkit-transition: all .3s ease;. If you look at the default CSS file and go to line 52 you need to remove the above out of .flex-direction-nav a. So the line should look like the below.
.flex-direction-nav a {
width: 30px;
height: 30px;
margin: -20px 0 0;
display: block;
background: url(images/bg_direction_nav.png) no-repeat 0 0;
position: absolute;
top: 50%;
z-index: 10;
cursor: pointer;
text-indent: -9999px;
opacity: 0;
}

I recently ran into this issue and solved it (with the help of this question/answer) by overriding the following styles:
.flex-direction-nav a {
...
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
}
with these styles in my own css:
.flexslider .flex-direction-nav a.flex-prev,
.flexslider .flex-direction-nav a.flex-next {
...
-moz-transition: none;
-webkit-transition: none;
transition: none;
}
I'm a big fan of not modifying source code provided by a library, so I think this is a better and more complete solution.

It is very simple, just change the following css code like this:
.flexslider .flex-direction-nav .flex-next {
right: 5px; /* adjust offset to match the hover style */
opacity: .8; /* adjust opacity to match the hover style */
}
.flexslider .flex-direction-nav .flex-prev {
left: 5px; /* adjust offset to match the hover style */
opacity: .8; /* adjust opacity to match the hover style */
}

Make your own arrows: disable directionNav and use manualControls.