We Keep Coding

keep an image static while parent is slide up and down

in the example below there is a gold div named she
in reality this is an image with same properties
clicking on button I need the she to be revealed gradually and not moving with the bottom side of parent
just like story - it is fixed and revealed gradually by parent's sliding.
$('button').on('click', function(){
$('#swtop').slideToggle();
});
.swtop{
display:none;
background:lightblue;
position:relative;
}
.space{height:34px;}
.story{text-align:center;}
.she{
position:absolute;
left:25px; bottom:0; width:5%;
background:gold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>
<br><br>
<div class='swtop' id='swtop'>
<div class='space'></div>
<div class='story'>LOREM IPSUM</div>
<div class='space'></div>
<div class='she'><br><br><br></div>
</div>

Consider an extra wrapper:
$('button').on('click', function() {
$('#swtop').slideToggle();
});
.swtop {
display: none;
background: lightblue;
}
.swtop > div {
position: relative; /* we move this to the extra wrapper */
}
.space {
height: 34px;
}
.story {
text-align: center;
}
.she {
position: absolute;
left: 25px;
bottom: 0;
width: 5%;
background: gold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>
<br><br>
<div class='swtop' id='swtop'>
<div>
<div class='space'></div>
<div class='story'>LOREM IPSUM</div>
<div class='space'></div>
<div class='she'><br><br><br></div>
</div>
</div>

And it is another way to make it beautiful.
let sts = false;
$('button').on('click', function(){
sts = !sts;
if (sts){
$('#swtop').slideToggle();
setTimeout(function(){
$('.she').fadeToggle();
}, 300);
}else{
$('.she').fadeToggle();
setTimeout(function(){
$('#swtop').slideToggle();
}, 300);
}
});
.swtop{
display:none;
background:lightblue;
position:relative;
}
.space{
height:34px;
}
.story{
text-align:center;
}
.she{
position:absolute;
left:25px;
bottom:0;
width:5%;
background:gold;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>
<br><br>
<div class='swtop' id='swtop'>
<div class='space'></div>
<div class='story'>LOREM IPSUM</div>
<div class='space'></div>
<div class='she'><br><br><br></div>
</div>

Hiding the vertical scrollbar in all browsers

In the below code, I want to hide the scrollbar of the first block (div1) without using overflow property in all the browsers.
Any suggestions would be helpful.
Fiddle:
http://jsfiddle.net/mvn1ngby/12/
$('#div1').scroll(function(){
$('#div2').scrollTop( $('#div1').scrollTop() );
});
$('#div2').scroll(function(){
$('#div1').scrollTop( $('#div2').scrollTop() );
});
div.outer {
display:inline-block;
width:150px;
height:320px;
border:1px solid black;
overflow-y:auto;
}
div.outer > div {
height:3000px;
}
#div1 div {
width:300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer" id="div1">
<div>
</div>
</div>
<div class="outer" id="div2">
<div>
</div>
</div>

It is a hack but works.
The idea is to pull the area of the scroll-bar outside of the view port.
The "pull" size suppose to be with the width of the scroll bar, usually the wider one (on Windows)
$('#div1').scroll(function() {
$('#div2').scrollTop($('#div1').scrollTop());
});
$('#div2').scroll(function() {
$('#div1').scrollTop($('#div2').scrollTop());
});
div.outer {
display: inline-block;
overflow: hidden;
border: 1px solid black;
}
#div1>div,
#div2>div {
height: 3000px;
}
.scrollable {
width: 150px;
height: 320px;
overflow-y: auto;
}
#div1 {
margin-right: -25px;
padding-right: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="scrollable" id="div1">
<div></div>
</div>
</div>
<div class="outer">
<div class="scrollable" id="div2">
<div></div>
</div>
</div>

Try to add a new container div with css:
.container { width: 100%;}
And inside put the div1, div2

How to block a content editable at specific position if a div with style absolute position is overlapped on it

I am creating an application where I have created a MS-word type application in Jquery. Now I have a problem where I have an editor and I want to place a div 'footer' on it at some position which I can do the actual problem is that when I am placing it,the place occupied by the footer div from content-editable should be
disabled. Check this fiddle Demo
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="padding:40px 40px 40px 40px; background-color:#eaedf1">
<div id="wrapper" style="border:1px solid #eaedf1; width:602px; background-color:white;">
<div id="header" style="height:96px; width:600px;">
<h2 style="text-align:center;">This is header
</h2>
</div>
<div contenteditable="true" style="height:1400px; width:600px; border:1px solid #eaedf1; padding:2px 2px 2px 2px;">
</div>
<br>
<div style="position:absolute; top:750px; width:600px; height:200px; border:1px solid #eaedf1;">
<div id="footer" style="height:50px; width:600px;">
<h2 style="text-align:center;">This is footer
</h2>
</div>
<div style="background-color:#eaedf1;height:10px; width:600px;">
</div>
<div id="header" style="height:96px; width:600px;">
<h2 style="text-align:center;">This is header
</h2>
</div>
</div>
<div id="footer" style="height:50px; width:600px;">
<h2 style="text-align:center;">This is footer
</h2>
</div>
</div>
<div>

I'm not sure this is easily possible with one contenteditable element. I setup a basic example using multiple contenteditable elements, one for each page.
Example: https://fiddle.jshell.net/d68ew9qc/
The following snippet adds a new page if the maximum rows per page is reached and the key used was an "enter":
$(".pageEdit").on('keypress', function(e) {
var length = $(this).children().length + 1;
/* only add a new page if the next sibling is not available */
// enter
if (e.which == 13 && length >= this.getAttribute("max_rows")) {
if ($(this).parent('.page').next().length === 0) {
var newPage = $('.page').clone(true);
$('.pageEdit', newPage).html('');
newPage.appendTo('#editor');
$('.pageEdit', newPage).focus();
}
e.preventDefault();
return false;
}
});
The keypress duplicates an element with the class=".page" and emptys the contenteditable element on the newly created one.
The keyup handles the backspace deletion of empty pages.
$(".pageEdit").on('keyup', function(e) {
var length = $(this).children().length;
var total_pages = $(this).parent('.page').parent().children().length;
// backspace is not working with keypress, this portion needs some work!!!
if (e.which == 8 && $(this).parent('.page').prev().length > 0) {
if (length === 0 && total_pages > 1) {
// found via: http://stackoverflow.com/a/4238971/3298029
placeCaretAtEnd($('.pageEdit>div:last', $(this).parent('.page').prev())[0]);
$(this).closest('.page').remove();
}
}
});
The basic html for that looks like the following:
<style>
.editor {
background-color: transparent;
border: 1px solid #eaedf1;
}
.page {
width: 600px;
position: relative;
margin-top: 15px;
background-color: #fff;
}
.header {
height: 100px;
width: 100%;
margin: 0;
}
.footer {
height: 100px;
bottom: 0;
width: 100%;
margin: 0;
}
.pageEdit {
min-height: 1400px;
border: 1px solid #eaedf1;
overflow: hidden;
padding: 0;
}
/* found: http://stackoverflow.com/a/4407335/3298029 */
.noselect {
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Chrome/Safari/Opera */
-khtml-user-select: none;
/* Konqueror */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
not supported by any browser */
pointer-events: none;
}
</style>
<div style="padding:40px 40px 40px 40px; background-color:#eaedf1">
<div id="editor">
<div class="page">
<div class="header noselect">
<h2 style="text-align:center;">This is header</h2>
</div>
<div contenteditable="true" class="pageEdit" max_rows="77">
</div>
<div class="footer noselect">
<h2 style="text-align:center;">This is footer
</h2>
</div>
</div>
</div>
</div>
This is a fairly simple demo and many things won't work. If a line breaks to a new one, this should be handled as well.
This was only tested in Chrome which adds <div><br /></div> for a new line. Firefox only adds <br /><br />. So with that in mind the total number of rows should be calculated dynamically and not set to a fixed value because it defers from one browser to another.
Hope this gets you started.

Try css pointer-events: none; or select: none; or jQuery
$("#div").click(function(e){e.preventDefault();});
or maybe
$("#div").click(function(e){e.stopPropagation();});
(not 100% clear on your intent).

Is there any particular reason why would you want to use 'position:absolute'? I think if I change the code to work with 'relative' position, it display the results you want.
For example:
<div id="wrapper" style="border:1px solid #eaedf1; width:602px;background-color:white;">
<div id="header" style="height:96px; width:600px;">
<h2 style="text-align:center;">This is header
</h2>
</div>
<div contenteditable="true" style="overflow:hidden;height:1400px; width:600px; border:1px solid #eaedf1;">
</div>
<div id="footer" style="height:50px; width:600px;">
<h2 style="text-align:center;">This is footer
</h2>
</div>
<div style="background-color:#eaedf1;height:10px; width:600px;">
</div>
<div id="header" style="height:96px; width:600px;">
<h2 style="text-align:center;">This is header
</h2>
</div>
<div contenteditable="true" style="height:1400px; width:600px; border:1px solid #eaedf1;">
</div>
<div id="footer" style="height:50px; width:600px;">
<h2 style="text-align:center;">This is footer
</h2>
</div>
</div>
See:
https://jsfiddle.net/alejuliet/qn4k7csu/

Display different divs on the same page

I need to display div="block2" when the user clicks "Yes" and display div="block3" when the user clicks "No".
Question:
1.How do I display both block2 & block3 at the same place where block2 is currently displayed.
2. Block2 needs to be hidden when clicked "No" and Block3 needs to be hidden when clicked "Yes"
<div id="block1">
<input type="submit" value="Yes"/>
<input type="submit" value="No"/>
</div>
<div id="block2">
Block2
</div>
<div id="block3">
Block3
</div>
css
html, body{
height: 100%;
width:100%;
}
#block1{
height:10%;
width:50%;
text-align:center;
float:left;
box-sizing:border-box;
-moz-box-sizing:border-box;
border-style:solid;
border-color:green;
}
#block2{
height:90%;
width:50%;
float:right;
-moz-box-sizing:border-box;
box-sizing:border-box;
border-style:solid;
border-color:green;
}
#block3{
height:80%;
width:50%;
float: left;
-moz-box-sizing:border-box;
box-sizing:border-box;
border-style:solid;
border-color:green;

You can display them in the same place using position: absolute; top: 0; left: 0. Just set whatever the parent div is, to position: relative.
You can use javascript or a library like jQuery to listen for the click, and show the right element.

Here is one possible solution that may work for you:
Fiddle Demo
I added added a wrapping container to your content blocks, and tweaked the CSS a tiny bit.
HTML:
<div id="block1">
<input id="yes" type="submit" value="Yes"/>
<input id="no" type="submit" value="No"/>
</div>
<div class="container">
<div id="block2">
Block2
</div>
<div id="block3">
Block3
</div>
</div>
CSS:
//new entries
.container{
position: relative;
height: 300px;
}
.hidden {display:none;}
edit (added a second way to do this using delegation) JS:
$('#yes').on('click', function () {
$('#block2').toggleClass('hidden');
});
$('#no').on('click', function () {
$('#block3').toggleClass('hidden');
});
// OR
$('#block1').on('click', 'input', function () {
$('.container').children('div').eq( $(this).index() ).toggleClass('hidden');
});

http://jsfiddle.net/zcWJ6/6/
html:
<div id="block1" class="box">
<input id="yes" type="submit" value="Yes"/>
<input id="no" type="submit" value="No"/>
</div>
<div id="container">
<div id="block2" class="box">
Block2
</div>
<div id="block3" class="box">
Block3
</div>
</div>
css:
#container {
position: relative;
height: 100px;
width: 50%;
}
#block1 {
height:10%;
width:50%;
text-align:center;
border-bottom: none;
}
#block2{
background: violet;
position: absolute;
}
#block3{
background: yellow;
position: absolute;
}
.box {
height:100%;
width:100%;
-moz-box-sizing:border-box;
box-sizing:border-box;
border: 2px solid #000;
}
js:
$('#yes').click(function(){
$('#block3').hide();
$('#block2').show();
});
$('#no').click(function(){
$('#block2').hide()
$('#block3').show();
});

Make javascript string of div2 and div3 content.
Now add one more div.
<div id="displayhere"></div>
store your div2 and div3 in javascript string. User Jquery click event. After click event add the div2 content to displaynone html.
$("#display2").click(function(){
$("#displayhere").html("div2 content javascript string");
});

dynamically changing text in div

Can someone please take a moment to look over this and let me know where I am going wrong in my code?
For some reason, the content div won't change when the buttons are clicked.
It's very simple, and right now I feel very confused for not being able to find my error.
CSS:
#wrapper {
margin: 0 auto;
width:100%;
max-height: 133px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
line-height:1.5em;
}
#buttons {
width:340px;
float: left;
height: 133px;
margin: 10px 10px 0 0px;
border-right: 1px solid #666;
}
#button1 a {
outline: none;
text-indent: -5000px;
display:block;
width:146px;
height:105px;
background-image:url(images/sprite_v2.png);
background-position: -292px 0px;
background-repeat:no-repeat;
float:left;
margin-right:20px;
}
#button1 a:hover {
background-position: -292 -105px;
}
#button1 a:active {
background-position: -292 -210px;
}
#button2 a {
outline: none;
text-indent: -5000px;
display:block;
width:146px;
height:105px;
background-image:url(images/sprite_v2.png);
background-repeat:no-repeat;
background-position: -438px 0;
float:left;
}
#button2 a:hover {
background-position: -438px -105px;
}
#button2 a:active {
background-position: -438px -210px;
}
#content {
font-family: Arial, Helvetica, sans-serif;
float: left;
display:block;
}
a {
text-decoration:none;
}
ul {
overflow:hidden;
margin: 10px 0 0 8px;
padding:0;
}
li{
line-height:1.5em;
display:inline;
}
#content1 {
color:#953735;
}
#content2 {
color:#604a7b;
}
JavaScript:
$('button').bind('click', function() {
$('div#content').html($('div#content' + ($(this).index()+1)).html());
});
HTML:
<div id="wrapper">
<div id="button">
<div id="button1">
</div>
<div id="button2">
Reporting Administrator
</div>
</div>
<div id="content">
<div id="content1">
<ul>
<li>Stuff1</li><br />
<li>Stuff1</li><br />
<li>Stuff1</li>
</ul>
</div>
<div id="content2" style="display:none;">
<ul>
<li>Stuff2</li><br />
<li>Stuff2</li><br />
<li>Stuff2</li>
</ul>
</div>
</div>
</body>
</html>

The selector $('button') is the problem. You don't want to select a button - element but an element within the div #button, am I right?
So you should take $("#button a") as selector, if you want to append the event handler to all links within the #button element.

David Müller had it correct regarding the button selector being an issue.
The switching wasn't occurring with the event on the link because the index of the links will be 0 since both are only children. If the event is instead on the parent div, the switching works. Below is a jsfiddle and the code.
http://jsfiddle.net/VrKsh/2/
<div id="wrapper">
<div id="button">
<div id="button1">
Content1
</div>
<div id="button2">
Content2
</div>
</div>
<div id="content">
<div id="content1">
<ul>
<li>Stuff1</li><br />
<li>Stuff1</li><br />
<li>Stuff1</li>
</ul>
</div>
<div id="content2" style="display:none;">
<ul>
<li>Stuff2</li><br />
<li>Stuff2</li><br />
<li>Stuff2</li>
</ul>
</div>
</div>
<script type="text/javascript">
$('#button div').bind('click', function() {
$('div#content div:visible').hide();
$('div#content' + ($(this).index() + 1)).show();
});
</script>