We Keep Coding

Automatic scrolling to keep child element in the center

I have a parent div called lyricpadding, and inside I have a lot of <h4>'s with a unique ID. Anyways, what I need to do us, by using preferably Jquery or Javascript or CSS, is to keep the <h4> marked with the class of highlighted in the middle of the parent container, but I don't want it to stretch over the whole thing, I just want the text to be centered by an automatic scroll until it gets to the bottom. So the div with the class highlighted will always be visible, preferably in the center.

Here is a jQuery example. It uses position absolute and then adjusts according to the scroll position and window size. See this fiddle.
HTML:
<div class='lyricpadding'>
<h4 class='highlighted'>Highlighted</h4>
<h4>Other</h4>
<h4>Other</h4>
<h4>Other</h4>
<h4>Other</h4>
</div>
CSS:
.lyricpadding
{
height:1000px;
width:100%;
background-color:lightblue;
}
.highlighted
{
display:inline-block;
position:absolute;
}
jQuery:
function positionMiddle()
{
var $highlighted = $('.highlighted');
$highlighted.css({
left: ($(window).width() - $highlighted.outerWidth())/2,
top: $(window).scrollTop() + ($(window).height() - $highlighted.outerHeight())/2
});
}
$(window).resize(function(){
positionMiddle();
});
$(window).scroll(function(){
positionMiddle();
});
// To initially run the function:
positionMiddle();

Menu Bar, which is not at the top, but once you slide down the menu bar sticks to the top

I need to make a menu bar like the one in
http://showbic.com/sports/adam-milne-vs-west-indies/
In this website the menu_bar is not on the top, but when you scroll down the menu bar doesn't go up with the rest of the content, but after touching the top it stays at the top.
I know some JavaScript is used combined with the CSS, but how I don't know, please someone help me.
Thank You in Advance.

I would advise trying something with onscroll in Javascript and then keeping the header at the top you can use position:fixed; in the container's CSS. (you might want to play around with the top placement or something else to keep it at the very top and in your preferred spot when not needed at the top)
See for example:
<script type="text/javascript">
var fixed = false;
onscroll = function()
{
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop > 200)
{
if (!fixed)
{
$('.navbar-wrapper').css({ position: 'fixed', top : 0 });
fixed = true;
}
}
else
{
if (fixed)
{
$('.navbar-wrapper').css({ position: 'relative', top : 200 });
fixed = false;
}
}
}
</script>

When looking into the source code, you can view the javascript part that is controlling this bar. http://showbic.com/wp-content/plugins/seo-alrp/js/slidebox.js?ver=3.8.
Instead of :
$('#alrp-slidebox').animate({'right':'0px'},300);
Put:
$('#yourContent').animate({'top':'0px'},300);
And for (we suppose that the height of the box is 300px):
$('#alrp-slidebox').stop(true).animate({'right':'-430px'},100);
Put:
$('#yourContent').stop(true).animate({'top':'-300px'},100);

This can be your css
body{
height:1000px;
}
div{
width:200px;
height:100px;
background:red;
position:relative;
top:200px;
}
.fixedClass{
position:fixed;
top:0;
}
the jquery code
$(window).scroll(function(){
if($(window).scrollTop() > 200){ // position of menu from the top
$('div').addClass('fixedClass');
}
else{
$('div').removeClass('fixedClass');
}
})
the Html :P
<div>
</div>
the working fiddle

DIV cover/overlap other element

I want to make a reusable function that enable me to easily cover or overlap an element such as select, textfield, input, div, table and etc with a semitransparent div to it's exact height and width.
I am able to get the element position and size:
$(element).height()
$(element).width()
$(element).offset().top
$(element).offset().left
However, how can I bind the element position and size with the div? If the element position or size change, so as the div will change. Any suggestion that how I can do it? Or, is there any existing jquery plugin for this? I believe this will be very useful for temporary disable an element from user interaction for operation such as ajax and etc.
Thanks.

You could create a function/plugin using the jQuery .wrap() function and the appropriate CSS for the overlay..
$.fn.overlay = function() {
return this.each(function(){
var $this = $(this);
var left = $this.offset().left;
var top = $this.offset().top;
var width = $this.outerWidth();
var height = $this.outerHeight();
$this.wrap("<div id='overlay'> </div>")
.css('opacity', '0.2')
.css('z-index', '2')
.css('background','gray');
});
};
Demo on Bootply: http://bootply.com/87132
This should work generically and be reusable.. not just for Bootstrap elements!

Like this
demo
css
div {
position:relative;
z-index:1;
height:200px;
width:400px;
background-color:green;
}
div div {
position:absolute;
z-index:2;
top:0px;
bottom:0px;
left:0px;
right:0px;
background-color:black;
opacity:0.5;
}
div div input {
position:relative;
top:25px;
z-index:1;
}

javascript code and zindex

I am having problems with getting the z-index to change using javascript can any one help me on where I am going wrong,
what I am trying to do is have a box appear on top on another box once a button is clicked but it does not seem to work.
function toggleupload(){
var but = document.getElementById('picbutton').innerHTML;
if (but == "Change Picture"){
document.getElementById('picbutton').innerHTML = "Hide upload box";
document.getElementById('uploadbox').style.zIndex = 2;
document.getElementById('profilebasic').style.zIndex = 1;
}
if (but == "Hide upload box"){
document.getElementById('picbutton').innerHTML = "Change Picture";
document.getElementById('uploadbox').style.zIndex = 1;
document.getElementById('profilebasic').style.zIndex = 2;
}
}
#profilebasic{
width:300px;
height:300px;
z-index:2;
background-color:#0F0;
}
#uploadbox {
position:absolute;
top:0px;
left:0px;
width:300px;
height:300px;
z-index:1;
background-color:#F00;
}
#uploadbo{
text-align:center;
width:300px;
height:300px;
z-index:3;
}
<div id="uploadbo">
<div id="profilebasic">
</div>
<div id="uploadbox">
</div>
<button onclick="toggleupload();" id="picbutton">Change Picture</button>
</div>

The z-index property only works on positioned elements, so you need to explicitly set the position on profilebasic like:
#profilebasic {
width:300px;
height:300px;
z-index:2;
background-color:#0F0;
position:absolute;
}
jsFiddle example
(note that I also had to set some CSS on your button otherwise it would have ended up under your positioned divs.)

Since uploadbox already starts out in front I assume you want to swap these.
Based on z-index rules, an absolutely positioned div will still appear in front of a non-absolutely positioned div unless its z-index value is negative.
That is, use a negative z-index for the box you want to be behind.
http://jsfiddle.net/X54gr/

Scroll to top in a lightbox

I have created a customized menu. See here. On click of this link I have a shadowbox popping up which has a long list of items. Now I want to have a "back to top" anchor link which takes me back to the top of the menu list.

I've set your lightbox with the #box id.
Html
<div id="box">
...
<!-- long content there -->
To Top
</div>
CSS (setting the width of elements)
#box {
position:relative;
width:200px;
height:250px;
overflow:auto;
}
#box #toTop {
position:absolute;
display:none;
left:150px;
top:10px;
}
jQuery
$('#box').bind('scroll', function(e) {
if ($(this).scrollTop() > 100) {
$('#toTop').fadeIn();
$('#toTop').css({'top' : $(this).scrollTop() + 100});
} else {
$('#toTop').fadeOut();
}
});
$(document).on('click', '#toTop', function(e) {
e.preventDefault();
//$('#box').scrollTop(0); //just go to top
$('#box').animate({scrollTop : 0},'slow'); //animate
});
Fiddle

Pretty easy with:
document.querySelector("iframe").contentWindow.scrollTo(0,0);
Now put a button on the page and call that on click. Oh, and omit the height:100% on your body of the iframe, this way you get rid of the second scrollbar.
You can try this out by just pasting the line above and executing it in the console of your browser with your webpage.