I was trying to change background-image while scrolling using only CSS3 but i failed. I need help how to do it on css3 only, not js.
I need to change background opacity of one image to zero and another to 1 having 5 breakpoints, while scrolling page. But i don't know how to process scrolling.
Will be thankful for help)
jQuery(window).scroll(function(){
var fromTopPx = 200; // distance to trigger
var scrolledFromtop = jQuery(window).scrollTop();
if(scrolledFromtop > fromTopPx){
jQuery('html').addClass('scrolled');
}else{
jQuery('html').removeClass('scrolled');``
}
});
http://jsfiddle.net/pZrCM/
Related
I have 1 Issue with the megamenu on site link
screenshot
Sometimes the menu drop down shifts to right . This happens on both chrome and firefox .
It is not a regular issue it only happens sometimes.
what i assume it may be a css issue becouse when ever it happens and i inspect element with a chrome css extension ..automatically the box shifts to the correct place without refreshing
the megamenu code is attached
$sns_jq(function($){
var wrap = $('#sns_menu');
var container = $('#sns_menu .container');
$('.sns-megamenu-wrap').find('li').each(function(){
var menucontent = $(this).find(".mega-content-wrap:first");
var li = $(this);
if( (container.outerWidth() + container.offset().left) < (li.offset().left + menucontent.outerWidth()) ){
menucontent.css({"left": (container.outerWidth() - menucontent.outerWidth() )+"px"});
}
});
$(window).resize(function(){
setTimeout(function(){
$('.sns-megamenu-wrap').find('li').each(function(){
var menucontent = $(this).find(".mega-content-wrap:first");
var li = $(this);
if( (container.outerWidth() + container.offset().left) < (li.offset().left + menucontent.outerWidth()) ){
menucontent.css({"left": (container.outerWidth() - menucontent.outerWidth() )+"px"});
}
});
}, 200);
});
});
The theme is sns korion
I checked out your css. You are handling your visibility toggle with visibility and opacity. Pick one. In this particular case, I would pick opacity because of the transitions you are running.
Also, your transform css with scale is placing the dropdowns in a different place and using scale to place them in the right place by size. But, contradictory to this technique, you set the transition to none afterwards. This is all a back forth positioning that messes up with the display if the keyframes stop unexpectedly.
SO delete all your transitions in line 6599 in your theme-light-green.css and all your transitions and transforms in line 6462 same stylesheet.
Also remove the visibility in both lines and the opacity in 6599. (you already have it in 6462.
Good luck
I am using Angular 1.3 and Bootstrap 3.2. I want to create a single webpage that does exactly this: http://lewisking.net. i.e. I want to be able to have vertically stacked divs that are the height of the viewport. I'm thinking of making a directive that watches the browser height/width and updates the style accordingly.
Any other ideas? Any tips for implementing with a directive?
This is the perfect use case for vh and vw.
Simply set:
.wrapper {
width: 100vw;
height: 100vh;
}
And it will work out the box. If you have to support any old browsers you can easily do a quick JS fall back.
CSS will get you part of the way, but you will need JS to update your 100% height on resize
and scrollTop points etc. And you will also need a way to animate the scroll anyway. This isn't exactly what I would do but it explains the basic idea.
$($window).on('resize', function() {
$scope.winWidth = $(window).width();
$scope.winHeight = $(window).height();
});
...
$scope.getSectionStyle = function(){
return {width:$scope.winWidth, height:$scope.winHeight} ;
}
...
<section id="sectionId" ng-style="getSectionStyle()"
To animate the scroll I just use jQuery like. If you're a angular purist there is $achorScoll but it has no animating at this point so you need to do some extra factory or directive like https://github.com/durated/angular-scroll/
$rootScope.scrollTo = function(_to){
$("html, body").delay(300).animate({scrollTop:_to},{ easing: "easeOutExpo"}, 2000);
}
To get _to you just find the elements offset().top something like :
var offset = $('#sectionId').offset();
$rootScope.scrollTo(offset.top);
Please check the following fiddle: http://jsfiddle.net/tWUVe/
When you click the div, the p's get deleted, and I expect that the div's height will be animted, but no animation happens. How can I achieve an animation with CSS3 only?
The issue is that there is no opportunity for the transition to occur. What I mean by this is that when elements are removed, they are immediately taken out of the document flow, resizing the parent if needed without a transition.
As a fix for this, you could animate the height of the paragraphs instead (or a similar means)
$('div').click(function() {
var $thisDiv = $(this);
$thisDiv.find('p').css({'height':'0px','margin':'0px'}); // Change p height
// Remove after transition
setTimeout(function() { $thisDiv.find('p').remove(); }, 1000);
});
Demo
I have managed to use the position:fixed setting of CSS/CSS3 before and worked quite well!
I saw this a few days ago and was wondering how did they achieve the effect that happens when you scroll down, where the menu bar is in one position before you scroll and then goes to the top where it locks itself down.
See link - http://www.cssportal.com/ < scroll down on any page and observe the top blue menu.
I have tried to look in the source of the page but I cant make head or tails.
Does anyone know what this effect is called?
It's done with javascript, to add a css class that contains position:fixed and other positioning styles to achieve what you want.
It's not complicated. Here is a jquery plugin: http://stickyjs.com/
This is how I did it a few years ago:
var menu_bar = $("#menu");
var top = menu_bar.offset().top;
var detached = false;
$(window).scroll(function (e) {
if ($(this).scrollTop() >= top) {
if (!detached) {
detached = true;
menu_bar.addClass('fixed');
}
} else {
if (detached) {
detached = false;
menu_bar.removeClass('fixed');
}
}
});
See the following post for a picture highlighting my question and a potential solution:
CSS overflow-y:visible, overflow-x:scroll
However, this strategy breaks when you actually move the scrollbar. In the suggested implementation (position: fixed;), the tooltips display next to child div in its position pre-scroll. So, as you scroll new child-divs into view, the tooltips begin falling off the bottom of the page.
See here for a demo of the bug: http://jsfiddle.net/narcV/4/
Any ideas how I can make the tooltips display next to the child div at all times?
I ended up implementing this using javascript, using the getPos function from this question.
The end product looks like:
var scrollPanel = ...;
var tooltip = ...;
function nodeHovered(e) {
var hovered = e.srcElement;
var pos = getPos(hovered);
pos.x += hovered.offsetWidth;
pos.y -= scrollPanel.scrollTop;
tooltip.style.setProperty('left', pos.x);
tooltip.style.setProperty('top', pos.y);
}
Basically, I calculate where on the page the node is currently displayed (taking into account the scrollbar position), and manually place the tooltip in the right spot on the page.
Too bad there's no elegant/CSS way to do this, but at least this works.