I have this:
$(window).scroll(function () {
$("h1").css("color", "white");
});
Now my problem: I don't want it to change the css immediately when you begin scrolling. So where can I state when this function should happen?
More specific: I want it to do this at a certain div, is that possible?
Here is a example of what I got: http://jsfiddle.net/k5ugL/
When you scroll down and arrive at the black div, the title should turn white, how do I do that?
This js will be executed when you scroll 50 pixels from top of window. Does this answer your question?
$(window).scroll( function(){
if($(window).scrollTop() > 50) $("h1").addClass("myclass");
else $("h1").removeClass("myclass");
});
Better to use classes than inline styles where possible.
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'm working with a side navigation bar and I'd like it to be a fixed position on the screen, but I want it to stop being fixed after you scroll so far down. Is there any way to go about this?
Use this function. On scroll this function will trigger. Write the if condition inside function to remove fixed
$( "#target" ).scroll(function() {
if($(element).height() === "500px") {
// remove scroll fixed
$(scroll).css("position","relative") //or use absolute also.
}
});
Assuming that it's already fixed, the only thing you have to do is the following:
if($(window).scrollTop() > 150){
$('#nav').css('position', 'relative');
}
And of course, change #nav to your own selector and 150 to the value you desire.
In Firefox especially, I've run into an issue I can't figure out how to fix.
On the following page, when scrolling down the page jumps several times - mainly on smaller screens where the page doesn't have its full size displayed. You can replicate this issue by making your browser smaller than the page so you have to scroll.
It's on this page: http://www.nucanoe.com/frontier-accessories/
If I disable the position:fixed on the navigation selector, it fixes the issue - but we need the navigation to be sticky. Is there a solution to fix this? I'm thinking we may need to use jQuery somehow.
Thanks in advance!
After seeing you asking for help on another answer, I will try and explain more clearly for you.
The Problem
Your problem is when you add position:fixed to the navigation bar, it removes it from its place and sticks it at the top of the page. This is why the rest of your content jumps up - because the navigation bar is not where it was anymore.
How To Fix
You can get around this by wrapping your navigation element in a new div - let's call it nav-wrapper - and set its height to the same as your navigation element. These are known as placeholder elements. This new wrapper and your original navigation bar must always be the same height for the 'jump' to disappear.
<div class="nav-wrapper" style="height:80px;"> <-- add this
<div class="your-original-nav" style="height:80px"></div>
</div> <!-- add this
Now, when you set the navigation bar to fixed and it disappears to the top, the new wrapper we created with the same height keeps the page's content the same. When the fixed class has been removed, it sits back in the wrapper again, without pushing the content down.
A Suggestion
From what I can see on your site, there will be a big gap where the navigation bar was until the new fixed navigation reaches that point and covers it. What you want, is a little jQuery to figure out where to make the navigation fixed and where to hide it. I'll explain:
// cache the element
var $navBar = $('.your-original-nav');
// find original navigation bar position
var navPos = $navBar.offset().top;
// on scroll
$(window).scroll(function() {
// get scroll position from top of the page
var scrollPos = $(this).scrollTop();
// check if scroll position is >= the nav position
if (scrollPos >= navPos) {
$navBar.addClass('fixed');
} else {
$navBar.removeClass('fixed');
}
});
You may want to add further functionality to this example, as it is very, very basic. You would probably want to recalculate the offsets on window resize as one addition.
A Demo
This is a little demo which might help you - I was bored and feeling helpful :)
Made it this way now: Added an element before the nav:
<div class="nav-placeholder"></div>
And the jquery:
<script type="text/javascript">
$(document).on("scroll",function(){
if($(document).scrollTop()>150){
$(".nav-placeholder").height($(".nav").outerHeight());
} else {
$(".nav-placeholder").height(0);
}
});
</script>
When I scroll down to 150 the placeholder gets the height of the nav, when i scroll up again I set it's height to 0.
Here is a fiddle: https://jsfiddle.net/herrfischerhamburg/562wu62y/
You need to have a placeholder when your nav goes from relative to fixed.
Therefore you need to make a new div.
jQuery(".nav").wrap('<div class="nav-placeholder"></div>');
jQuery(".nav-placeholder").height(jQuery(".nav").outerHeight());
jQuery(".nav").wrapInner('<div class="nav-inner"></div>');
Remember to change ".nav", "nav-inner" and "nav-placeholder" to your desire.
For a fully functional sticky nav, check my website: http://www.swegre.se/
I solved the problem differently so on firefox as you can see in logs it scroll up itself so to stop this scrolling I made simple statement
$(document).ready(function () {
var header = $('#left-menu');
var offset = header.offset().top;
var up = true;
$(window).scroll(function () {
var scroll = $(window).scrollTop();
console.log(scroll + ' ' + offset )
if (scroll >= offset) {
header.addClass('sidebar-sticky');
if (up){
$(window).scrollTop(offset);
up=false;
}
} else {
up=true;
header.removeClass('sidebar-sticky');
}
});
});
that solution work for me when I can't specify height of div's I use.
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
Seeking a solution to my problem...
I partially found an answer from another thread on here, using this script
$(function () {
$(".myclass").hover(function ()
{}, function ()
{
$(".myclass>li").fadeTo(200, 1)
});
$(".myclass>li").hoverIntent(function ()
{
$(this).attr("id", "current");
$(this).siblings().fadeTo(200, .6);
$(this).fadeTo(300, 1)
}, function ()
{
$(".myclass>li").removeAttr("id");
$(this).fadeTo(200, 1)
})})
When an item in the list is hovered, the script fades all other items out. Original demo is here http://jsbin.com/usobe
This works OK on my site, though the list ( a grid of thumbnails) is part of a bigger slider script, which loads "previews" via ajax. When a list item is clicked a hidden section expands on the page, and the slider script assigns the list item a class "active".
When the hidden section is open I would like the activated thumbnail to remain at 1 opacity, while the rest are faded to .6, exactly as it is with the hover effect using the script above. What I am trying to achieve becomes obvious when you click a thumbnail to activate the ajax script. Is it possible to use the active class to make this happen i.e. if class is not active set to .6 opacity?
Thanks in advance
----EDIT
Thanks everyone for suggestions - I am not having much luck so far! Using the code above, would it be possible to modify it so that when a list item is clicked it holds the specified levels of opacity? That would do nicely, I think. Then I could use onclick I guess to fade all items back to full opacity when the hidden div is closed.
I'm trying to guess how your code work, for what I understand you should do something like this:
// this is the selector that gets the click on the thumbnail
$('li.item').click(function() {
// fade all the thumbnails to op 1.0
$('#li.item').css('opacity', '.6');
// let the active thumbnail to 1.0
$(this).css('opacity', 1);
//show your hidden div
});
Then, when you close the hidden div:
$('div#hiddenDiv').onClose(function()
// about to close
$(this).fadeTo('fast', 1);
});
You could use an on click targeting the zetaThumbs li elements, set the current target to 1 and its siblings to .6
$('.zetaThumbs li').click(function(){
$(this).css({'opacity':1}).siblings().css({'opacity':.6});
})