I'm working on this website called http://martindue.dk/mmd3x9x/ and I have this scroll to top script that just won't coorporate. I've used the script on many other sites, and it works fine, but on this particular website the div#to-top keeps on re-appearing, even though I'm at the very top of the website, why won't it fade out correctly when at the top?
My code looks like this (the #to-top is insertted after the body-tag in my html):
Javascript
jQuery(document).ready(function() {
$toTop = jQuery("#to-top");
$toTop.hide();
jQuery(window).scroll(function() {
if(jQuery(this).scrollTop() != 0) {
$toTop.fadeIn();
} else {
$toTop.fadeOut();
}
});
$toTop.click(function() {
jQuery("body, html").animate({ scrollTop : 0 }, 500);
return false;
});
});
CSS
#to-top {
background: url("img/to-top.png") center top no-repeat;
background-size: 100%;
width: 50px;
height: 50px;
position: fixed;
bottom: 60px;
right: 60px;
cursor: pointer;
/*display:none;*/
/*opacity: 0.0;*/
}
I created this fiddle, and here it works fine: http://jsfiddle.net/2Rubp/
I know it is not js but in this case you are only using fading so css can do the trick:
#to-top {
background: url("img/to-top.png") center top no-repeat;
background-size: 100%;
width: 50px;
height: 50px;
position: fixed;
bottom: 60px;
right: 60px;
cursor: pointer;
**-webkit-transition: all 0.5s linear;**
display: none;
opacity: 0.0;
}
NB: this is for chrome see this for cross browser compatibility
http://www.w3schools.com/css/css3_transitions.asp
Related
Im currently in the process of fixing a wordpress site for a client, unfortunately I am having tons of issues with scrolling on one of the pages. I have tried time and time again to remove any scroll assist js that could be causing it but I still cant seem to get it to work.
Here is the URL for the page giving me trouble: http://www.bombaygrilloh.com/home/menu/
Any help is greatly appreciated!
You issue is background-attachment
Chris Ruppel writes:
[...] using background-attachment: fixed causes a paint operation every time the user scrolls. Why? Well, the page has to reposition the content, and then, since its background image is supposed to appear as if it’s holding still, the browser has to repaint that image in a new location relative to its actual DOM elements. The performance for this feature is so bad that iOS simply ignores this property.
The culprit is your header background image.
it is fixed and is consistently getting repainted on scroll behind your page content.
In you CSS file you have this
.section-parallax {
background-attachment: fixed;
}
If you remove that then you smooth scrolling without trouble but you loose the parallax effect.
If you must have the parallax effect then you need to either use a more efficent method for the effect or hack your way to it.
for more efficiency use jQuery. I found a pen by Marcel Schulz and copied it below for reference:
/*
See https://codepen.io/MarcelSchulz/full/lCvwq
The effect doens't appear as nice when viewing in split view :-)
Fully working version can also be found at (http://schulzmarcel.de/x/drafts/parallax).
*/
jQuery(document).ready(function() {
$(window).scroll(function(e) {
parallaxScroll();
});
function parallaxScroll() {
var scrolled = $(window).scrollTop();
$('#parallax-bg-1').css('top', (0 - (scrolled * .25)) + 'px');
$('#parallax-bg-2').css('top', (0 - (scrolled * .4)) + 'px');
$('#parallax-bg-3').css('top', (0 - (scrolled * .75)) + 'px');
}
});
body {
background: rgba(230, 231, 232, 1);
height: 4600px;
}
/* foreground (balloons/landscape)*/
div#parallax-bg-1 {
position: fixed;
width: 1200px;
top: 0;
left: 50%;
margin-left: -600px;
z-index: 1;
}
/* background middle layer*/
div#parallax-bg-2 {
position: fixed;
width: 1200px;
top: 0;
left: 50%;
margin-left: -600px;
z-index: 2;
}
/* background layer */
div#parallax-bg-3 {
position: fixed;
width: 960px;
top: 0;
left: 50%;
margin-left: -470px;
z-index: 3;
}
/* foreground */
div#parallax-bg-3 div {
background-repeat: no-repeat;
position: absolute;
display: block;
overflow: hidden;
}
div#bg-3-1 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/balloon.png');
width: 529px;
height: 757px;
top: -100px;
right: 100px;
}
div#bg-3-2 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/balloon2.png');
width: 603px;
height: 583px;
top: 1050px;
right: 70px;
}
div#bg-3-3 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/balloon3.png');
width: 446px;
height: 713px;
top: 1800px;
right: 140px;
}
div#bg-3-4 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/ground.png');
width: 1104px;
height: 684px;
top: 2800px;
right: 0px;
}
/* middle layer clouds */
div#parallax-bg-2 div {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-lg1.png');
background-repeat: no-repeat;
position: absolute;
display: block;
width: 488px;
height: 138px;
overflow: hidden;
}
div#bg-2-1 {
top: 100px;
left: -310px;
}
div#bg-2-2 {
top: 270px;
right: -70px;
}
div#bg-2-3 {
top: 870px;
left: -300px;
}
div#bg-2-4 {
top: 1120px;
right: -130px;
}
div#bg-2-5 {
top: 1620px;
left: 140px;
}
div#bg-2-6 {
top: 720px;
left: 340px;
}
/*background layer clouds */
div#parallax-bg-1 div {
background-repeat: no-repeat;
position: absolute;
display: block;
width: 488px;
height: 138px;
overflow: hidden;
}
div#bg-1-1 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-sm1.png');
top: 200px;
right: 450px;
}
div#bg-1-2 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-lg2.png');
top: 420px;
left: 0px;
}
div#bg-1-3 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-sm1.png');
top: 850px;
right: -290px;
}
div#bg-1-4 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-sm1.png');
top: 1350px;
left: 200px;
}
div#bg-1-5 {
background: url('http://schulzmarcel.de/x/drafts/parallax/img/cloud-lg2.png');
top: 1200px;
left: -200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="parallax-bg-3" class="parallax-bg">
<div id="bg-3-1"></div>
<div id="bg-3-2"></div>
<div id="bg-3-3"></div>
<div id="bg-3-4"></div>
</div>
<div id="parallax-bg-2" class="parallax-bg">
<div id="bg-2-1"></div>
<div id="bg-2-2"></div>
<div id="bg-2-3"></div>
<div id="bg-2-4"></div>
<div id="bg-2-5"></div>
<div id="bg-2-6"></div>
</div>
<div id="parallax-bg-1" class="parallax-bg">
<div id="bg-1-1"></div>
<div id="bg-1-2"></div>
<div id="bg-1-3"></div>
<div id="bg-1-4"></div>
<div id="bg-1-5"></div>
</div>
</body>
</html>
In the same article I quoted above, there is a tutorial for how to fix the issue with CSS. Instead of using background-attachment: fixed you add the background to a pseudo-element and give it postion fixed like so
.element {
position: relative;
}
.elemnt:before {
content: ' ';
position: fixed; /* instead of background-attachment */
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: white;
background: url('/img/front/strategy.jpg') no-repeat center center;
background-size: cover;
will-change: transform; /* creates a new paint layer */
z-index: -1;
}
And this will essentially limit the impact on scrolling as the "background" would have it's own independent element.
Note: If you run into issues which you cannot debug, open the dev tools and start deleting elements from the page one by one until you find the issue.
Resources:
https://www.w3.org/TR/css-will-change-1/
http://caniuse.com/#feat=will-change
https://www.youtube.com/watch?v=QU1JAW5LRKU
https://developers.google.com/web/tools/chrome-devtools/
From looking at your site, there are a few parts of it that are slowing down the rest. Here are a few easy ways to speed it up.
Use a CDN
A CDN (Content Distribution Network) ensures that everything is loaded faster because it doesn't depend on your own Wordpress server and will allow access times to be consistent across the world. There are a few good ones out there like CloudFlare and Incapsula. Here is an article listing a few more.
In addition, you can host your images (I see that one is coming from Wikipedia) on a slightly faster
Compress images
This step is as easy as converting photos to a .jpg. JPEG automatically compresses the data by getting rid of unnecessary information in the photos. You can also use compression software to get the file size down.
Leverage caching
Use a caching plugin (there are tons of great ones for Wordpress) to cache data on your server and can really speed up things for your site.
Search for more ways to optimize
Use tools like Pingdom and Google PageSpeed Insights to identify bottlenecks and resolve them.
Hope this helps you!
Check this jsFiddle.
The orange bar is serving as a progress bar where the value under the circle is how high the progress bar should be.
Any idea why the overflow:hidden; is beeing disregarded and how do one solve this problem? Oblviously nothing should go outside the circle.
Also is there a better solution for this?
Modified your fiddle a little bit. Here is the link
Modifications:
Changed .outerContainer css to display:block from display:table and addedmargin-top:30px to p css
Check if this works for you.
position: absolute and overflow: hidden don't appear to be playing nicely with display: table/table-cell. Removing the table stuff you had in there to vertically center the text fixes the problem. In Firefox, at least.
I think it's the browser thing...
This is the CSS3 version...
.progressBar {
display: block;
width: 100%;
height: 0;
position: absolute;
bottom: 0;
left: 0;
background: #ec6730;
transition: height 1s;
}
.innerContainer:hover > .progressBar {
height: 300px;
}
http://jsfiddle.net/ZyhgT/2/
It no longer flashing 'cause browser handle the job (not js loop animation...). But still it shows the edge on animation finish!!! This could be the browser things... Could be a bug...
This is not related to jQuery or any javascript. In fact, if you delete all your javascript and manipulate the height of your .progressBar using css on li:hover, you will notice the bug anyway.
It appears to be a browser issue as reported on: https://code.google.com/p/chromium/issues/detail?id=157218
As a workaround try adding an imperceptible css transform to the mask element:
.outerContainer {
-webkit-transform: rotate(0.000001deg);
}
You just need to change your .outerContainer class and it works just fine!
.outerContainer {
position: relative;
display: block;
height: 96px;
width: 96px;
overflow: hidden;
background: #fff;
border: 2px solid #fff;
-webkit-border-radius: 50px;
border-radius: 50px;
}
Put the level class inside the outerContainer div and style the span inside the level class to be relatively positioned. In the JavaScript, to calculate the level, divide by 10 instead of 100 for the perfect circular hover effect.
Here is a fiddle.
HTML
<div class="outerContainer">
<div class="innerContainer">
<p>Circle 3</p>
<span class="progressBar"></span>
</div>
<div class="level"><span>75</span>
</div>
</div>
CSS
body {
background: blue;
}
#circles {
text-align: center;
margin: 100px 0;
}
li {
display: inline-block;
margin: 0 10px;
position: relative;
}
.outerContainer {
position: relative;
display: block;
height: 96px;
width: 96px;
overflow: hidden;
background: #fff;
border: 2px solid #fff;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.innerContainer {
display: table-cell;
vertical-align: middle;
width: 100%;
margin: 0 auto;
text-align: center;
}
p {
color: #000;
width: 96px;
position: relative;
z-index: 2;
}
.progressBar {
display: block;
width: 100%;
height: 0;
position: absolute;
bottom: 0;
left: 0;
background: #ec6730;
}
.level span{
position:relative;
}
JS
$(function() {
$("#circles li").hover(function(){
var thisElement = $(this);
var level = $(this).find(".level").text();
var elementHeight = $(this).find(".outerContainer").height();
level = (level/10)*elementHeight;
$(thisElement).find(".progressBar").stop().animate({
height: level
}, 300);
}, function() {
var thisElement = $(this);
$(".progressBar").stop().animate({
height: 0
}, 300);
});
});
display: table doesn't work that good with CSS positioning;
you should avoid using that, and find some other way to vertically center your labels.
If your circles have a known height, like your code seems to indicate (height:96px ecc), then just use a fixed top position for an absolutely positioned <p> element:
http://jsfiddle.net/ZyhgT/5/
Note that you don't even need jQuery for this, it is all achievable with just CSS3 (unless you are targeting old browsers)
When the page is first loaded, and the image is hovered over for the first time, the sliding panel slides down from the top to the bottom. But ever time you hover over it after that, it slides up from the bottom - which is what I want. I don't want it to slide down from the top the first time it's hovered over. Is there any way to make it just slide up every time it's hovered over? I'm sure there's some simple solution but I'm not very familiar with javascript.
<div class="boxgrid captionfull">
<img src="http://s17.postimage.org/arxuilf9r/jareck.jpg"/>
<div class="cover boxcaption">
<h3>Jarek Kubicki</h3>
<p>Artist<br/>http://www.nonsensesociety.com/2009/03/art-by-jarek-kubicki/" target="_BLANK">More Work</a></p>
</div>
.boxgrid{
width: 325px;
height: 260px;
margin:10px;
float:left;
background:#161613;
border: solid 2px #8399AF;
overflow: hidden;
position: relative;
}
.boxgrid img{
position: absolute;
top: 0;
left: 0;
border: 0;
}
.boxcaption{
float: left;
position: absolute;
background: #000;
height: 100px;
width: 100%;
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.captionfull .boxcaption {
top: 260;
left: 0;
}
$(document).ready(function(){
$('.cover').hide();
$('.boxgrid.captionfull').hover(function(){
$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160}).show();
}, function() {
$(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160});
});
});
http://jsfiddle.net/scottm29/NUpfz/1/
Define a startup css to your element:
Here is jsFiddle.
.boxcaption{
...
top:260px;
}
I have a div and within that div is an image, and layed on top of those is 2 divs which have jquery hover attached to them (same issue with onmouseover though, so not jquery).
Problem is when the image is loaded, even though the divs are layed on top of the image they won't fire because the image is always on top (even though it isn't actually, and i've tried putting it lower down on z-index but it didn't help).
jquery:
<script type="text/javascript">
$(document).ready(function () {
$(this).find("#largeInset").find(".content").css("width","0");
$("#largeInset").hover (function() {
$(this).find(".content").animate({width: '100%'}, 500, function() {});
},
function() {
$(this).find(".content").animate({width: '0'}, 500, function() {});
});
$(this).find("#largeArticles").find(".content").css("width","0");
$("#largeArticles").hover (function() {
$(this).find(".content").animate({width: '40%'}, 500, function() {});
},
function() {
$(this).find(".content").animate({width: '0'}, 500, function() {});
});
});
</script>
Html:
<div class="largeContent">
<img src="<?php echo $img[0]; ?>" border="0" alt="" title="" />
<div id="largeInset">
<div class="content">
[content]
</div>
</div>
<div id="largeArticles">
<div class="content">
<ul> (loop fills this)
<li>
[content]
</li>
</ul>
</div>
<br style="clear: both;" />
</div>
</div>
Is this a known IE bug that I just haven't come accross before? Or is there a bug in my code? When filled with content the largeInset and largeArticles divs should fire on hover and slide out across the image, works in chrome but not IE as IE seems to select the image on top of the divs even though they are actually below it (Would work fine if the image didn't load).
Any ideas? Hopefully I made sense.
CSS:
.articles { position: relative; width: 100%; padding: 0; float: left; background-color: #fff; }
.large { margin: 0 0 10px; border: 0px solid #000; min-height: 200px; }
.large img { max-width: 100%; min-width: 100%; min-height: 350px; z-index: -1; }
.largeContent { z-index: 99; position: absolute; top: 0; width: 100%; height: 100%; }
.filler { width: 100%; height: 100%; }
#largeInset { position: absolute; top: 0; right: 0; min-height: 100%; width: 25%; color: #fff; }
#largeInset .head { padding: 10px 0; }
#largeInset p { font-size: 0.9em; margin: 5px 10px; }
#largeInset .content { overflow: hidden; position: absolute; top:0; background-color: #000; right: 0; color: #fff; }
#largeArticles { position: absolute; top: 0; left: 0; width: 25%; min-height: 100%; }
#largeArticles .content { overflow: hidden; position: absolute; top: 0; left: 0; width: 40%; background-color: #000; }
I've solved this for now by adding content to the divs. IE will only fire when you mouseover the content in the div (maybe because position is absolute?). I added a transparent 1px image to the divs, but stretched to 100% x 100%, so you hover over the image and it will fire.
This seems a bit hacked together though
See http://iamnotahippy.com/ice/web/?cat=5 (hover over sides of image)
I have the following jQuery which I need adapting:
$(document).ready(function(){
$(".rss-popup a").hover(function() {
$(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
});
});
CSS:
.rss-popup {
margin: 100px auto;
padding: 0;
width: 100px;
position: relative;
}
div.rss-popup em {
background: url(../images/rssbuttonbubble.png) no-repeat;
width: 100px;
height: 49px;
position: absolute;
top: -70px;
left: -0px;
text-align: center;
text-indent: -9999px;
z-index: 2;
display: none;
}
#rss-icon {
width: 42px;
height: 42px;
background: url(../images/rssbutton.png) no-repeat 0 0;
text-indent: -9999px;
margin: 0 auto;
display: block;
}
The HTML:
<div class="rss-popup">
RSS Feed
<em>Subscribe to our RSS Feed</em>
</div>
I want to make the rssbuttonbubble.png appear underneath rather then from above, can any make any suggestions as to how I can achieve this?
Just adjust your top values in the animation and css to be the distance you want:
$(".rss-popup a").hover(function() {
$(this).next("em").stop(true, true).animate({opacity: "show", top: "60"}, "slow");
}, function() {
$(this).next("em").animate({opacity: "hide", top: "70"}, "fast");
});
And in CSS change top: -70px; to:
top: 70px;
This will make it appear below, then just decrease those values if you want it higher, increase if you want it lower.
Nick's answer is correct. You will want to attempt to do this via CSS but just in case you can't you could also achieve something similiar via Jquery. There is an offset() function that returns the onscreen position of a matched element. Once you have that you can then set the position of another element to this position and add the source elements height to the Y coordinate.
See the jQuery documentation here.