I want to add this transition effect to my website: http://www.formuswithlove.se/ (when you arrive to the next anchor the background-color change)
How can I do this?
Thanks in advance
I don't think that this can be done via pure CSS, but you can just check the scroll amount on a window.scroll event and update the background color for the body (or container element). You may also like to have a transition.
window.addEventListener('scroll', function () {
if (document.body.scrollTop > 500) {
document.body.style.backgroundColor = "red"
}
else {
document.body.style.backgroundColor = "transparent"
}
});
http://jsfiddle.net/GnX8A/1/
Related
I have 2 nested <div>s, both with tooltip().
When I hover over the
inner <div>, the outer <div> also shows it's tooltip.
I tried to work around this by setting the inner <div>'s title
to an empty string on :hover.
$(inner).hover({
$(outer).attr('title','');
},{
$(outer).attr('title','original title');
});
I created a codepen examplenote: I changed title to 'red' so you can see that the title did indeed change.
Why is it that changing the title doesn't change tooltip's content?
How do we change the Bootstrap Tooltip's content? (this should be a stackoverflow question of it's own)
Answering #1:
By inspecting the elements and watching it change with your JS code, i noticed a attribute on the divs called data-original-title which still holds "blue" when you enter green (this is what the tooltip element reads and displays). By changing your script to
$('#a').attr({"data-original-title": "red"});
the blue becomes red. Does this answer your question?
Use .tooltip('hide') and .tooltip('show')
this was answered in part by #BuddhistBeast, thanks!
$("#b").on('mouseover', function(){
$('#a').tooltip('hide');
}).on('mouseleave', function(){
$('#a').tooltip('show');
});
$('[data-toggle="tooltip"]').tooltip({
animated : 'true',
placement : 'bottom',
container: 'body'});
You can check whether you are currently hovering inside of the inner block
jQuery:
$(document).ready(function(){
var bIsShown = true;
$("#b").on('mouseenter', function(){
bIsShown = true;
}).on('mouseleave', function() {
bIsShown = false;
})
$("#a").on('mousemove', function(){
if(bIsShown) {
$(this).data("bs.tooltip").$tip.removeClass("in");
}
else {
$(this).data("bs.tooltip").$tip.addClass("in");
}
})
$('[data-toggle="tooltip"]').tooltip({
animated : 'fade',
placement : 'bottom',
container: 'body'});
});
Your Example: http://codepen.io/anon/pen/JGqXPw
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/
I am looking at websites for inspiration for my new start ups homepage. I saw https://www.pactcoffee.com/ and their home page features a full background image for the header and the nav bar is transparent then it becomes a solid color nav bar as you scroll down. I have only been able to set up the CSS for the site but I don't understand what to do to have the change in nav bar color.
You can do something like this...
http://jsfiddle.net/ojcqbLr2/
Check the Fiddle to see the rest of the code... like the CSS.
This JS will do this.
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 100) {
$('.topMenu').fadeIn();
} else {
$('.topMenu').fadeOut();
} });
By the way, I found this info by search.
Show div on scrollDown after 800px
I just made edits to the code so it was at the top and not bottom.
Best of luck.
I have found that you can set two divs. One of which will be display set to none.
$(document).scroll(function () {
var headerHeight = $('header').height(),
s = $('.nav'),
y = $(this).scrollTop();
if (y > headerHeight) {
$('.navLong').fadeIn();
$('.nav').fadeOut();
} else {
$('.navLong').fadeOut();
$('.nav').fadeIn();
}});
This allows one div to disappear when one appears and vice versa. A working example is can be found in the DEMO
I know how to to slide up and down a content box with css3 transitions and a specific height property and overflow set to 'hidden'.
But in my case I need this box to be overflow visible at the end of the slide-down-transition (it contains some absolute positioned elements that are larger than the box - to be specific a slide out menu).
Is there a way to delay the setting of the overflow-property?
I tried something like transition: overflow 0s ease 0.5s; but that obviously doesn't work.
best,
d.
The syntax you're using is absolutely right: transition:property | time | easing | delay, another property
Unfortunately, overflow isn't animatable at all (See W3C). So it's not possible to use transitions on it.
I think the only solution would be using JavaScript and the transitionend-event:
JavaScript
["transitionend","webkitTransitionEnd","mozTransitionEnd"].forEach(function(transitionEnd) {
document.querySelector("div").addEventListener(transitionEnd,function() {
if(this.style.overflow == "visible") {
this.style.overflow = "";
} else {
this.style.overflow = "visible";
}
});
});
jQuery
$("div").on("transitionend webkitTransitionEnd mozTransitionEnd",function() {
$elem = $(this);
if($elem.css("overflow") == "visible") {
$elem.css("overflow","");
} else {
$elem.css("overflow","visible");
}
});
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');
}
}
});