Develop Reference

Prevent Position Change on Sticky Form Input

I have a simple webpage that has a header, dynamic content, and a sticky footer. In the footer, I have a form that has text input and a submit button.
In situations where the content extends beyond the visual area of the page, the sticky form behaves as expected (it's visible at the bottom of the visible area).
I noticed that when I input text changes into the text field of the form, the dynamic content will automatically scroll to the bottom. I have implemented a hack to scroll the content back to it's original position, but I was wondering if there was a way to disable the scrolling behavior to begin-with...
https://jsfiddle.net/vy8h77xr/18/
html:
<div class="list" id="list">
<ul>
<li>content</li>
<!-- add more content to fill beyond the page -->
</ul>
</div>
<div class="footer">
<form id="form">
<input type="text" id="text"/>
<input type="submit" value="Submit" id="submit" />
</form>
</div>
css:
.footer {
position: sticky;
bottom: 0;
}
js:
var text = document.getElementById("text");
text.addEventListener("keydown", (e) => {
var y = window.scrollY;
setTimeout(() => window.scrollTo(0, y), 0);
})

You are using sticky footer but with 0px from the bottom, so you don't exactly need this kind of position. Try tu simply make your footer fixed like this.
.footer {
position: fixed;
bottom: 0;
}
https://jsfiddle.net/Andrej_v/vy8h77xr/20/
You can find more about this position here:
https://developer.mozilla.org/en-US/docs/Web/CSS/position

I know I'm late to answer this. but you can easily to this by making a whole new footer sticky, and make the orignal footer constant on bottom: 0; You can Use Jquery Clone Method To Clone your orignal sticky footer. Then You'll just have to change the id and be careful while using the for attribute. it has the match the clone elements id.

HTML Coding not Centering Widget Properly - Please save my sanity

I am working to get an object I retrieved from 100 Widgets centered on a webpage. It's a clock. I am working in TeamSite. The object will not center properly. When I type the HTML coding to center the object the preview mode changes it to being centered, however when I publish the item, the website will not reflect the adjustment "live". It remains left aligned; except in Preview mode where it will remain centered properly.
Here's what I have (it's very simple, so it's making me crazy!):
<div style="width: 50%; margin: 0 auto;">
<script type="text/javascript" src="http://100widgets.com/js_data.php?id=38">
</script>
</div>
Spaces were added to allow text viewing. I've also tried to be very basic including just <center> and </center>. I get the same result. This clock is located: http://100widgets.com/clocks/page/2/ and is called Clock Blue and White.
Can someone please tell me what's wrong with this thing before I go completely insane?! Lol...but for real.
Thanks!

That should center the div element on the page, though it may not center the content inside of it. Here are a few examples of how to center something horizontally.
<style>body {margin:0;} </style>
<div style="width: 50%; margin: 0 auto;">1</div> <!-- centers the element based on the width -->
<div style="text-align:center">2</div> <!-- centers the inline content in the element -->
<div style="position: absolute; left: 50%; transform: translateX(-50%)">3</div> <!-- centers the element and the element is only as wide as the content inside -->
This is a good reference for centering stuff. https://www.w3.org/Style/Examples/007/center.en.html

Centering captions on FlexSlider using jQuery

FlexSlider 2 seems to position captions 10 pixels above the bottom of individual slides with this css from line 97 of flexslider.css:
.flexslider p {
position: absolute;
bottom: 10px;
}
To this I've added my own CSS:
.flexslider p {
font-family: 'Exo', san-serif;
font-size: 18pt;
text-align: center;
}
I noticed that other people asking about FlexSlider captions use a class called "flex-caption." This doesn't make sense to me, because the string "flex-caption" does not appear at all in my relatively recent versions of flexslider.css and jquery.flexslider-min.js. Nevertheless, I added the class to my HTML:
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/slider/craft-the-future.jpg" />
<p class="flex-caption">Craft the future!</p>
</li>
<li>
<img src="images/slider/plugged-in.jpg" />
</li>
<li>
<img src="images/slider/athletics.jpg" />
</li>
<li>
<img src="images/slider/make-reality.jpg" />
</li>
</ul>
</div>
I decided that I need to add a left (or right) property to the absolutely positioned paragraph tag. Based mostly on Grinn's reply to this question, I decided to use JavaScript to find the pixel width of the paragraph tag, and then to subtract that width from the width of the slider box (720 pixels) before assigning the value to a left property.
I don't claim to know JavaScript or jQuery, but I've tried to do the best that I can with the tutorials and documentation available. I don't think I figured out how to load Grinn's plain JavaScript-heavy code as it is, so I decided to translate that method into a more jQuery-heavy format. I was finally successful in getting the browser to recognize the jQuery, since the alert does appear when I reload:
$(document).ready(function() {
var caption = $(".flexslider p");
alert(caption.length); // For debugging only
var indent = 720 - $(caption.innerWidth);
$(caption).css({
left: 'indent'
});
});
It doesn't seem to matter whether I use ".flexslider p" or ".flex-caption" to select the p tag.

You are assigning the value of left to be a string instead of your indent variable.
$(caption).css({
left: 'indent'
});
Should be:
$(caption).css({
left: indent
});

Scroll element to top of page by clicking anchor inside element or anywhere inside containing div id

I would like to scroll the page to the top of the e.g. navigation div ID when clicking either any of the links inside the navigation div ID or (if possible) when clicking anywhere into the div ID itself containing the navigation links.
I have researched this and the closest I have come to is jQuery - How to scroll an anchor to the top of the page when clicked? however for some reason it does not seem to work when I try to do this in my example. What am I doing wrong?
I am new to jQuery and medium at html and css (and used inline styling of the divs since I did not want to supply a separate css just for the example).
When I load the html and script from jQuery - How to scroll an anchor to the top of the page when clicked? in Aptana it also does not scroll. Even with a content div above the div class work so that there is space to scroll to at all.
I have included two little paragraphs inside the concerning divs to explain exactly what I mean.
Any help is very much appreciated. Thank you.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$('#scroll_navigation ul li').click(function() {
$('html,body').animate({scrollTop: $(this).offset().top}, 800);
});
</script>
<body>
<div id="logo" style="margin: 0 auto; height: 300px; width: 60%; border: 1px solid #000">Logo</div>
<div id="scroll_navigation" style="margin: 0 auto; width: 40%; border: 4px solid #225599">
<p>Scroll navigation to top of page</p>
<p>Catch any clicks in "#scroll_navigation" to scroll the div id to the top of the page</p>
<div id="navigation">
<div class="container" style="margin: 0 auto; height: 220px; width: 60%; border: 1px solid #000">
<ul>
<p>Catch clicks on anchors to scroll the div id to the top of the page</p>
<li>Portfolio</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div id="content" style="margin: 0 auto; height: 1500px; width: 60%; border: 1px solid #000">Content</div>
</body>
EDIT
Beware this when using scrollTop in Firefox.
Animate scrollTop not working in firefox
jQuery scrollTop - no support for negative values in Mozilla / Firefox
Took me a while to figure out my code was fine but scrollTop was this issue in FF. In this same example the behaviour can also be observed. When scrolling down and making the anchors fixed, FF will scroll up to random positions either 2-4px before or after the target div.
I am now using Scrolld.js to achieve pixel perfect scrolling to the desired points across major browsers. I don't understand how different browser engines can render such a common thing as scrollTop from different (either html or body) inputs as far as I understand and I am new to jQuery. Guess this is not "the fault" of jQuery but how the browser engines render scrollTop.

I dont know if you did, but you have to include jquery to use it.
Another thing would be, that your "click listener" has to be in jqueries document ready function like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#scroll_navigation ul li').on('click', function(){
$('html,body').animate({scrollTop: $(this).offset().top}, 800);
});
});
</script>

Scrolling the page causes issues to buttons

I just finished a website, everything was working fine (what I thought)
Until I discover a huge BUG that couldn't fix:
I have a navigation BAR (png file) and added on it buttons (simple DIVs elements), When the page is openned 1st, all is fine, but if you scroll the page a bit, the buttons aren't working as they should.
Please check this link: (scroll the page a bit down and you'll notice that button aren't interacting anymore)
http://www.genius-solutions.net/GSIS/index.html
But if you move the cursor a bit above the buttons, you'll find them:
(HTML - JavaScript)
here the CSS part:
#btn {position:absolute;left:0px;top:0px;z-index:4;}
#btn1 {position:absolute;left:80px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0.0;cursor:pointer;}
#btn2 {position:absolute;left:230px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0.0;cursor:pointer;}
#btn3 {position:absolute;left:380px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn4 {position:absolute;left:530px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn5 {position:absolute;left:680px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn6 {position:absolute;left:830px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#html, body {
background:#002a4c;
overflow:scroll;
width:1024px;
height:768px;
margin: 20px auto; /* center */ padding: 20px;
}
and here the HTML part:
<body >
<div id = 'applet' home='579' services='1437' solutions='1192' partners='100' aboutus='654' contacts='216'>
<div id='applet_t'>
<div id='btn'>
<div id='btn1'></div>
<div id='btn2'></div>
<div id='btn3'></div>
<div id='btn4'></div>
<div id='btn5'></div>
<div id='btn6'></div>
</div>
</div>
<div id='inf'></div>
</div>
</body>

Your issue lies in IMO very improper use of absolute positioning of your elements. As soon as you scroll the page the location of the actual "hit" placeholder moves with the page but not your background.
Test case: try to move your page up a little bit and you will be able to "click" above the actual buttons.
Unless you have a good reason for absolutely positioned element use static == default positioning for most of your elements.