I am trying to animate lines going from left, right, top and bottom(lines should start from edges of the screen). Animation works fine in IE11 but not in Mozilla and Chrome. Other browsers I haven't tested. I used Adobe Illustrator to draw. http://codepen.io/Ljanmi/pen/WbyLWv
In Chrome and Mozilla(IE11 is fine and acts normal) if in Illustrator I set Object>Artboards>Fit To Artwork Bounds(minimizing Artboard size which I usually do when create or edit SVG) I get this result(even worse) - http://codepen.io/Ljanmi/pen/yyqVqz
I spent hours and hours trying to figure out on my own without success. I started topics on GSAP forum and CSS tricks forum(stackoverflow.com is limiting me to post only 2 links as a newcomer).
I used GSAP JS library for animating(generally very happy with GSAP) but animation behaves the same if I use CSS3 to animate. I concluded that it is not related to GSAP(viewbox size property seems to have little bit of effect here) , more likely to be related to SVG structure itself or browser compatibility or both. So I guess there must be some work around to make it work like I would like to. I most likely lack some SVG/HTML/CSS3 knowledge since I am not very experienced but trying to learn as much as I can. Thanks everybody for reading.
Add svg { overflow: visible } and it should work the same in all browsers (longer explanation below). If you want to see why the lines get clipped, add borders to the svg element.
Another way is to make sure the size of the svg matches what you want, e.g by using css.
All browsers except IE implemented hidden as the initial value for the overflow property for the <svg> element, as called for by the SVG 1.1 spec. SVG 2 has changed this for (outermost) inline svg elements, such that it requires what IE11 is currently doing. It will take some time before that gets changed in all browsers, so for now just add the overflow: visible rule and it should work correctly in all browsers.
I had some trouble with browsers still not showing the overflowed content for SVGs and found that this finally got past it:
svg:not(:root) {
overflow: visible !important;
}
I'm not pretty good in java. Still I guess that question is not too easy for pros as well.
As the header says I'm trying to find a solution how to change a background image gradually by scroll with jQuery.
The background should be responsive.
I found a website having a similar thing sojournnetwork.com
Since I'm no pro with java and jquery a jsfiddle example would be nice!
Thanks in advance
I think this is a perfect tutorial for your needs.
http://ianlunn.co.uk/articles/recreate-nikebetterworld-parallax/
This is the result of the tutorial:
http://ianlunn.co.uk/plugins/jquery-parallax/
The background image dont change, just is Fixed.
div.background {
background-image:url(xxx);
background-attachment: fixed;
}
And every "new" image is a container div who scroll like another.
Something like this must work.
I believe this effect is typically called "Parallax". You might find some of the following examples helpful:
http://wagerfield.github.io/parallax/
http://stolksdorf.github.io/Parallaxjs/
You can also search google for the word "Parallax" and find some simple scripts that don't require an external library if that is a requirement. I did find this JSFiddle which might be helpful as well. I believe it uses the following to setup the backgrounds:
background: url(http://www.webdesignermagazine.nl/files/2012/06/golf.jpg) 50% 0 no-repeat fixed;
i am trying to copy the looks of this site:
http://www.vindrejse.net/
If you try to re-size the window downwards, you can see that the image size re-sizes aswell, what exactly is done to achive this?
I've written a jQuery plugin for exact this problem: https://github.com/yckart/jquery.fitpic.js
Here's an example for you: http://yckart.github.com/jquery.fitpic.js
If you just worry about modern browsers, you can do that with CSS3's
background-size: cover;
declaration.
The closest thing to an industry standard for this is the BackStretch plugin:
http://srobbin.com/jquery-plugins/backstretch/
It works on both full page backgrounds and DIV elements. Very simple configuration. Supports transitions.
I have two problems... I've tried altering my CSS file, the JavaScript files and all kinds of other things. A google search yielded no remedy to these problems, so I come to the awesome site of answers!
This page -> http://students.cmps.subr.edu/aaron.chauvin/misc/test2.html
has some issues in Chrome and Safari. Only when my CSS is in effect, the pictures that are supposed to be side-by-side aren't, but when the CSS is off, they are. This problem isn't evident in FF/IE9. I'm thinking it has something to do with the but I'm not totally sure. Edit Edit: Thanks for the fix Genzer!
Also on that page, even if all my CSS/JavaScript isn't linked, I have a small gap between the bottom of the images that are links and the dotted link border... I want to get rid of the gap. What's causing this gap? This happens in all browsers.
Thanks in advance.
Edit: Here's the CSS: http://students.cmps.subr.edu/aaron.chauvin/misc/style.css
Edit Edit: Fixed the side-by-side image link problem, now trying to figure out what's causing the variation in the display of the custom a:focus border (non-existent in IE9, partially encases image link in Webkit browsers) and the gap between it and the bottom of the image link (all browsers BUT IE9).
The problem is you're wrapping all your column's info in a span: <span class="reg">...</span>
IE9 and FF figure out that you want it to display as a block element, but Webkit (Chrome and Safari) don't. Set display:block on the "reg" class and you should be set. (I think this fixes the "dotted border" issue as well, but i'm not quite sure what you meant there)
To get the orange border to show up in IE9, make sure to set outline-style to something like "solid" or "double" in the a.piclink:hover css class, in style.css. Once i did that, the border shows up.
I'm still not entirely sure why your links and nested images are behaving like they are, but I found a little tweak (tweak = almost a hack) to get it to work: Set display:inline-block; on a.piclink and set a fixed height on it. Note that inline-block tacks on 4px, so the height should be 4px taller than the height of the image; in your case: 47px. It's a bit of a hack, but it's valid and it works. Unfortunately IE7 doesn't like this, but zoom:1; *display:inline; get it working.
Adding following CSS code in your style will make Chrome display your TestPage the same as IE8.
span.reg a {
display: inline;
}
My designer believes this cannot be done, however it seems possible to me. (Although I have limited CSS experience). However, he also said the background couldn't be fixed, and stackoverflow has proved his wrong in the past; so I question his knowledge.
JQuery can be used if this cannot be done in pure CSS.
The top half will be a gradient that has full flexible to skew left, right, up, down without much distortion. The bottom half is an image that is ideally made for the 1280 x 1024 resolution (as this is the most popular browser display resolution). Then depending on the requirements needed it will sketch and skew to whatever size it needs. Still allowing all of the image to be seen.
The ration between the top half and bottom half is always 50% 50% independent of browser resolution.
I would also like if both the top and bottom parts are fixed.
In a perfect world (one without IE), id like to do this with css3 gradients and multiple backgrounds in 1 DIV. However, because IE9 isnt out yet, I think the best way to approach it would be 2 divs in a DIV container and using a PNG repeating background for the top div.
It should be noted I am going to use css3pie.com to allow some CSS3 for IE6-8 (but I dont want to rely on it, unless 100% proven)
Is this possible with just CSS? How would you do it?
If not possible with just CSS, is there a way I can get JavaScript/JQuery to aid?
I am thinking a base of 1280 x 1024 isn't the best idea because it seems to have an odd radio.
Edit 1
Oh yeah, I have a WIP too:
http://meyers.ipalaces.org/extra/
It looks good in 1280 x 1024...now its just getting the whole resizing of the top DIV to be 50% so the image is 50%.
I'd still like ALL of the water to be seen, because I like the look of the rocks at the bottom. However, I am open to alternative ideas that don't accomplish what I want 100%, but come close.
Edit 2
How about using the top gradient as the true CSS2 background and then just putting a <img> at the bottom of it to resize? Perhaps that will allow for CSS2 ability. I am reference some work-around techniques here: A list apart
Edit 3
I am still looking for results that work on IE6 and also don't cause Internet explorer to lag. I am setting a bounty of 50 to help attract more attention.
I have successfully came up with 2 ways to do this:
Method 1
Click here to view demo
Using CSS3 background-size I was able to set 2 div elements to on top of each other with min-height: 50% and then using background-size: 100% 50% they successfully accomplish what I am looking for.
This method was just a proof of concept, as IE6-8 does not support background-size, I didn't pursue tweaking this method perfectly. As it stands, it currently messes up when you scroll despite have background-attachment: fixed;. I ditched this CSS3 method in order to look for better methods using CSS tricks...
Method 2
Click here to view demo
Following the examples I found from A List Apart (Article | Example1 | Example2). I used Technique #2 from Example 1, and I was able to emulate what I wanted to do using just CSS2. (I am not 100% sure how or why this works, but it does)
Because I am also going to use CSS3PIE to give IE6-8 CSS3 the ability to do linear gradients, border-radius, and box-shadow; I opted to use a linear gradient instead of an image for the top background.
Problems
CSS2 Method from Technique #2, Example 1 does not work with IE6 Correctly
Creates excessive lag in all current Internet Explorers
It can be done with CSS only. No PIEs necessary. Just an IE6 bug and some filter magic.
Demo:
http://www.bundyo.org/test/FPB.html
Do this using raphaeljs. Create a background DIV that becomes a canvas, draw a rect to 50% of the page height (if using jquery then use $(window).resize() to monitor for a window resize and $(window).height() to get the 50% into pixels).
You can fill in the raphealjs rect with specifing it's fill value to something like fill: "90-#000000-#ffffff"
As for the image:
Place the image using raphealjs' image OR just embed it using HTML and update it's height-scale using jquery as mentioned above.
I've done something like this just recently using about 10 lines of code.
Also: Change your water.png, it's about 275kb, where as the next largest file on your page (the css) is like 1.5kb.
If you want to keep the horizon of the water at 50% on your screen, I would suggest a simpler method;
Create an image (probably about 1280 wide) in Photoshop of water on bottom and gradient on top. Fade the top gradient into a solid light blue(#68b for example). Fade the left, right and bottom of the image into the same solid color(#68b).
Set the background of your page as follows;
html {
background: #68b url(waterimage.png) center center no-repeat;
}
In your case, you'll probably want to apply the background to #wdth-100 instead of html, but it all depends on which element you want to put your background on.
All done. Let me know if that works for you.
I don't have a link to your top image, so i used the same image for top and bottom.
You should probably use a CSS solution for normal browsers and the JS for IE.
<script type='text/javascript'>
$(document).ready(function() {
wh=$(window).height();
ww=$(window).width();
if(wh%2) {
h1=Math.round(wh/2);
h2=Math.round(wh/2)-1;
} else {
h1=h2=wh/2;
}
img1=$("<IMG/>",{'src':'http://meyers.ipalaces.org/images/bottom-bg.jpg','id':'img1'} )
.css({'width':ww,'height':h1,'top':'0','left':'0','position':'absolute','z-index':'-100'});
img2=$("<IMG/>",{'src':'http://meyers.ipalaces.org/images/bottom-bg.jpg','id':'img2'} )
.css({'width':ww,'height':h2,'top':h1,'left':'0','position':'absolute','z-index':'-100'});
$(document.body).append(img1);
$(document.body).append(img2);
});
$(window).resize(function() {
wh=$(window).height();
ww=$(window).width();
if(wh%2) {
h1=Math.round(wh/2);
h2=Math.round(wh/2)-1;
} else {
h1=h2=wh/2;
}
$('#img1').css({'width':ww,'height':h1,'top':'0','left':'0'});
$('#img2').css({'width':ww,'height':h2,'top':h1,'left':'0'});
});
</script>
The pragmatic answer would seem to be to do it using multiple divs with their own background, all of which would be positioned absolutely and behind everything else using z-index.
I know that's not the clean markup solution with a single div with some magic CSS, but this is a tricky problem in pure CSS in any browser, and almost certainly impossible if you need to support IE6.
An even more pragmatic answer would be to say "I'll support IE6 as far as I can, but if it can't support my lovely background effect then that's just tough luck for anyone still using it".