Develop Reference

How to update sticky menu's CSS positioning on window resize

I've built a sticky navbar based on an example from W3 schools. It's working very well — except when I resize the window, the alignment of the nav menu to the page content is incorrect.
You'll see that I've got some code that finds the correct offset for left side of menu, by checking another element on the page. It then adds some left padding to align it properly. (Without this, the position:fixed value just sends the sticky nav to the far left of the page).
This works great on scroll! However, if the window is resized horizontally, that left padding value doesn't update.
I've tried a few iterations of $(window).resize but haven't been able to get it to work. I'm sure it's an easy line of code I'm just not figuring out. Thanks in advance!
setTimeout(function () {
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};
// Get the navbar
var navbar = document.getElementById("app");
// Get the offset position of the navbar
var sticky = $("#app").offset().top
// Find correct offset for left side of menu (by checking #title element)
var element = document.getElementById('title');
var leftPos = element.getBoundingClientRect().left + window.scrollX;
var roundLeft = (Math.round(leftPos)) - 5;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
navbar.style.cssText = "padding-left:" + roundLeft + "px!important";
} else {
navbar.classList.remove("sticky");
navbar.style.cssText = "padding-left:inherit";
}
}
}, 4000);
.sticky {
position: fixed;
top: 0;
width: 100%;
background: rgba(255, 255, 255, 0.99);
z-index: 9 !important;
max-width: none !important;
box-shadow: 0px 1px 10px #999;
}
(I'm using setTimeout because our Shiny app takes a few seconds to load and for the content to populate.)

You should use pure CSS solution with position: sticky
It does have acceptable percentage of browser support:
https://caniuse.com/#feat=css-sticky
Since it's just the styling, it may be fine to show it static in the old browsers.

Javascript generated margin-top messes up placement content

Case:
I have a slider that scrolls through some images, while, when you scroll down, the menu and content moves over it. Once the menu gets to the top, it sticks to it, as it's changed to a fixed position.
Problem:
Once the menu snaps to place, it resets it's original position (a margin-top) from a generated ammount of pixels to the 0 value. This cases the page to jump that generated ammount of pixels down, which shouldn't happen. It shouldn't jump down at all, but I think it has to do with the ammount of pixels that is generated before it is set to 0, which cases on my screen a gap of 955 pixels. It jumps thus 955 pixels down after it applies the fixed state.
So my questio now is, how can i fix this. I tried applying instead of a margin a padding (no go, white screen), applying instead of a margin-top: 0px a top:0 so i dont have to use the margins, but also a no go.
Case link:
http://test.thewebfanatics.com/jellyweb/home
Code
$(window).scroll(function () {
if ($('.resolutionwrap').length == 1) {
var documentScrollTop = $(document).scrollTop() + 100;
var fixedToggle = $('#slides').height();
if (documentScrollTop > fixedToggle) {
$('#hoofdmenu').addClass('fixed');
$('#hoofdmenu').css("margin-top", "0px");
} else {
$('#hoofdmenu').removeClass('fixed');
$('#hoofdmenu').css("margin-top", $('#slides').height() - 100);
}
}
});
Hope someone can help me on this matter.

Okay, as I was posting the remark on the fiddle, I realized that if the content moved, I could also just simply return it to it's position by javascript by making a counter balanced value of it.
Shortly said: I countered the margin, by creating a different margin-top that balanced that scale. It's maybe not the most beautifull solution, but it did the trick.
$(window).scroll(function () {
if ($('.resolutionwrap').length == 1) {
var documentScrollTop = $(document).scrollTop() + 100;
var fixedToggle = $('#slides').height();
// console.log($('#slides').height());
// console.log($('.resolutionwrap').height());
if (documentScrollTop > fixedToggle) {
$('#hoofdmenu').addClass('fixed');
$('#hoofdmenu').css("margin-top", "0px");
$('.content').css("margin-top", $('#slides').height());
} else {
$('#hoofdmenu').removeClass('fixed');
$('#hoofdmenu').css("margin-top", $('#slides').height() - 100);
$('.content').css("margin-top", "0px");
}
}
})

How do I achieve this animation using javascript/jquery? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I have been searching how to accomplish the animation on this website using html/css/js/jquery: https://www.nobledesktop.com/certificates/web-design. In particular, I want to know how to achieve the highlighting then deleting effect of the animation, but I also want to know how to insert the next word one character at a time with a delay. This question has been asked before but did not achieve the last specification that I have mentioned above.
This is the thread I am referring to: Web animation css highlight
This is an image of the animation I'm talking about on http://www.nobledesktop.com/certificates/web-design.
http://pasteboard.co/2ywHhxGE.png
I have looked at the source code related to that span but I have no clue where to start past highlighting the text as answered in the aforementioned thread. Any help would be appreciated. Thanks!

I know it's a bit late and the jquery.typer.js library will probably be the best solution as explained by Marcos, but I have time on my hands right now and I tried to clone the behaviour from the link you are referring to with jQuery and CSS.
Here is my working demo.
I created recursive functions for the typing animation and word traversal, in tandem with CSS transitions for the highlight animation:
JS
function typify($elem, wordSec, charSec, highlightSec) {
var texts = $elem.data('type').split(',');
$elem.css({
transition: 'background-size ' + (highlightSec / 1000) + 's'
});
addByWord($elem, texts, 0, wordSec, charSec, highlightSec);
}
function addByWord($elem, texts, i, wordSec, charSec, highlightSec) {
if (i < texts.length) {
var text = texts[i],
duration = (text.length * charSec);
$elem.text('')
.addClass('reset')
.removeClass('highlight');
addByLetter($elem, texts[i], 0, charSec);
setTimeout(function () {
$elem.removeClass('reset')
.addClass('highlight');
}, duration + wordSec);
setTimeout(function () {
addByWord($elem, texts, ++i, wordSec, charSec, highlightSec);
}, duration + highlightSec + 300 + wordSec);
} else {
addByWord($elem, texts, 0, wordSec, charSec, highlightSec);
}
}
function addByLetter($elem, txt, i, sec) {
if (i < txt.length) {
var ch = txt.split('')[i];
$elem.text($elem.text() + ch);
setTimeout(function () {
addByLetter($elem, txt, ++i, sec);
}, sec);
}
}
typify($('.animation'), 1500, 105, 300);
CSS
.animation {
padding-bottom: 5px;
border-bottom: 5px solid #00a8e6;
box-sizing: content-box;
display: inline-block;
background: linear-gradient(to left, rgba(0, 20, 255, 0.5) 0%, rgba(0, 20, 255, 0.5) 100%) no-repeat top right;
background-size: 0% 100%;
}
.animation.highlight {
background-size: 100% 100%;
}
.animation.reset {
background: transparent;
background-size: 0% 100%;
}
The definition of parameters of the function, typify($elem, wordSec, charSec, highlightSec) below:
$elem - jQuery element you want to target (should have data-type with
values separated by strings.
wordSec - duration of each word to be shown on screen in milliseconds,
after being typed and before being highlighted
charSec - speed of typing animation per letter milliseconds
highlightSec - speed of CSS highlight animation in milliseconds

They accomplished it by using the jquery.typer.js library. You can take a look at that source and see how it's done.
But in the website you pointed, they have modified the plugin slightly. For instance, they added an option called highlightEverything, to avoid the default behavior of selecting only the text that changes between transitions.

How can I keep my scroll bar size(length) as stable?

I have a scenario here, there is a div parent element. it has the css value as overflow:auto. when the user keep add multiple element, the overflow works, but the size of the scroll bar going small. (that's common!)
What i looking is, i don't want to make my scroll bars height became small or big. i would like to keep my scrollbar height became static, whatever the length of elements appended.
So I trying to hide and show the nested elements under the parent. instead of resizing the scroll bar i re-sizing the content.
I don't have much idea about this. but nearly i tried to get the one what i look.
but not get the result.
here is my code :
var $newdiv = $('.div');
$col = $('<div />');
var container = $('#content');
var n = 0;
var child = $('.show');
var parent = container;
var add = function () {
for(var i=1; i<=10; i++){
$newdiv.clone().removeClass('div').addClass('show')
.find('span').append(n = n < 9 ? '0'+(++n) : ++n).end().clone().appendTo($col);
}
}
$col.appendTo(container);
$('button').click(function () { add()});
$(container).slimScroll({});
container.scroll(function(){
totalCH = 20*n;
parentH = parent.outerHeight();
required = Math.abs(parentH - totalCH);
scrolled = $(this).scrollTop();
requireToHide = scrolled/20;
hidableNo = Math.round(requireToHide);
if(scrolled > lastScrollTop) {
//while scroll down
//$(".div:lt("+hidableNo+ ")" ).addClass('hideIt');
//$(".div:gt("+(n-1)+ ")" ).addClass( "showIt");
} else {
//while scroll up
//$(".div:lt("+(n-1)+ ")" ).addClass("showIt");
//$(".div:gt("+hidableNo+ ")" ).addClass("hideIt");
}
lastScrollTop = scrolled;
});
var lastScrollTop = 0;
Try Online
Any one suggest me the correct approach.
Thanks in advance!
Please avoid plug-in and consider the support ie9

I'm going to refer to "scroller" as the draggable element in the scrollbar.
The scroller changing size is a standard UI representation that lets the user understand the amount of content in the scroll area; the goal of which is also to keep the rate of scrolling of the content to a standard flow rate.
For example, if you have a large amount of content in the scrollable area, dragging on a smaller scroller means that the content will flow at (about) the same speed as having less scrollable content (and a larger scroller).
Having a constant size scroller, will mean that a large amount of content would need to scroll much faster than a smaller amount of content.
To achieve what you want, I believe you're going to need an addon that takes the scroll speed/acceleration into account.
I use: jquery.mCustomscroll bar for custom scrolling behaviors.
http://manos.malihu.gr/jquery-custom-content-scroller/
It even has a setting to do exactly what you want:
autoDraggerLength: boolean
Enable or disable auto-adjusting scrollbar dragger length in relation
to scrolling amount (same behavior with browser’s native scrollbar).
Set autoDraggerLength: false when you want your scrollbar to (always)
have a fixed size.

You can solved with css
::-webkit-scrollbar{
width: 10px;
}
::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
border: 1px solid black;
background: rgb(41,41,41);
border-radius: 10px;}
::-webkit-scrollbar-thumb{
border-radius:10px;
width: 8px;
height: 150px;
border: 1px solid black;
background: white;
}

Detect if element has a background specified?

I'm trying to determine if an element has a background explicitly set. I figured I could just check to see if .css('background')* was set, however, it's inconsistent between browsers. For example, chrome shows an element without a background set as
background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box
background-color: rgba(0, 0, 0, 0)
background-image: none
whereas IE8 shows
background: undefined
background-color: transparent
background-image: none
(test case here)
*(shorthand properties of CSS aren't supported for getting rendered styles in jQuery)
Short of handling each separate case is there a better way to detect this?

temporary element approach
It's not ideal, but you could create a temporary element when your js initiates, insert it somewhere hidden in the document (because if you don't you get empty styles for webkit browsers) and then read the default background style set for that element. This would give you your baseline values. Then when you compare against your real element, if they differ you know that the background has been set. Obviously the downside to this method is it can not detect if you specifically set the background to the baseline state.
var baseline = $('<div />').hide().appendTo('body').css('background');
var isBackgroundSet = ( element.css('background') != baseline );
If you wanted to avoid possible global styles on elements, that would break the system i.e:
div { background: red; }
... you could use the following instead, but I doubt if it would work so well with older browsers:
var baseline = $('<fake />').hide().appendTo('body').css('background');
background
I spent some time with a similar issue - attempting to get the original width value from an element when set to a percentage. Which was much trickier than I had assumed, in the end I used a similar temporary element solution. I also expected, as Rene Koch does above, that the getComputedStyle method would work... really annoyingly it doesn't. Trying to detect the difference between the source CSS world and the runtime CSS world is a difficult thing.

This should work:
function isBGDefined(ele){
var img = $(ele).css('backgroundImage'),
col = $(ele).css('backgroundColor');
return img != 'none' || (col != 'rgba(0, 0, 0, 0)' && col != 'transparent');
};
DEMO
I didn't bother to test against the background property because in the end, it will change the computed styles of either backgroundImage and/or backgroundColor.
Here's the code run against your test case (with another added): http://jsfiddle.net/WG9MC/4/

this article explains how:
http://robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/
function getStyle(oElm, strCssRule){
var strValue = "";
if(document.defaultView && document.defaultView.getComputedStyle){
strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
}
else if(oElm.currentStyle){
strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
return p1.toUpperCase();
});
strValue = oElm.currentStyle[strCssRule];
}
return strValue;
}

Using the approach suggested by #pebbl I wrote a small jQuery function, hasBack(), to determine if an element has its background set.
$.fn.hasBack = function()
{
var me = $.fn.hasBack;
if(!me.cache)
{
// get the background color and image transparent/none values
// create a temporary element
var $tmpElem = $('<div />').hide().appendTo('body');
$.fn.hasBack.cache = {
color: $tmpElem.css('background-color'),
image: $tmpElem.css('background-image')
};
$tmpElem.remove();
}
var elem = this.eq(0);
return !(elem.css('background-color') === me.cache.color && elem.css('background-image') === me.cache.image);
}
This was tested in Chrome v22, Firefox v15, Opera 12.1, IE9, IE9 set to browser modes 9 compat, 9, 8, 7 and quirks mode.
Test case here.