Develop Reference

Stop content taking space under a sticky div

In this example when I click the "link" on the sticky header, how can I make the linked content item (#mypara) to appear below the sticky div and not directly underneath it so its hidden?
$(document).ready(function() {
$(window).scroll(function() {
var distanceFromTop = $(document).scrollTop();
if (distanceFromTop >= $('#header').height())
{
$('#sticky').addClass('fixed');
}
else
{
$('#sticky').removeClass('fixed');
}
});
});
body { margin: 0px; background-color: #e3e3e3; }
#header { background-color: #cb5454; height: 140px; }
#sticky {
background-color: #546bcb;
height: 70px;
}
#sticky.fixed {
display: block;
position: fixed;
top: 0;
width: 100%;
}
p[id] {
color:red;
/*padding-top: 170px;*/
}
#footer { background-color: #cb5454; height: 140px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">header</div>
<div id="sticky">sticky link</div>
<div id="section">
<p>section 1</p>
<p>section 2</p>
<p>section 3</p>
<p>section 4</p>
<p>section 5</p>
<p>section 6</p>
<p>section 7</p>
<p>section 8 x</p>
<p>section 9</p>
<p id="mypara">section 0 xxxx</p>
<p>section 1</p>
<p>section 2</p>
<p>section 3</p>
<p>section 4</p>
<p>section 5</p>
<p>section 6</p>
<p>section 7</p>
<p>section 8</p>
<p>section 9</p>
<p>section 0</p>
<p>section 1</p>
<p>section 2</p>
<p>section 3 z</p>
<p>section 4</p>
<p>section 5</p>
<p>section 6</p>
<p>section 7</p>
<p>section 7</p>
<p>section 8</p>
<p>section 8</p>
<p>section 9</p>
<p>section 0</p>
<p>section 1</p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
</div>
<div id="footer">foot</div>
This fiddle was inherited from other SO threads so I think this is the right way to do a sticky div that only becomes sticky after scrolling (I couldn't get position:sticky to do anything, but position:fixed seems to be whats recommended in a number of threads).
The above pic shows where I want it to land when the link is clicked

In scroll function, you can first try to get window.pageYOffset which will give you current position of the scroll and then you can try using scrollTo(x, y) method of the window. Y value in the scrollTo will be the window.pageYOffset minus the height of your div. (window.pageYOffset - height of your div)

`
$(document).ready(function() {
$(window).scroll(function() {
var distanceFromTop = $(document).scrollTop();
if (distanceFromTop >= $('#header').height())
{
$('#sticky').addClass('fixed');
}
else
{
$('#sticky').removeClass('fixed');
}
});
});
//add this. it will scroll to the div #mypara with 150px top offset
$('a[href*=\\#]:not([href$=\\#])').click(function() {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top - 150
}, 500);
});
body { margin: 0px; background-color: #e3e3e3; }
#header { background-color: #cb5454; height: 140px; }
#sticky {
background-color: #546bcb;
height: 70px;
}
#sticky.fixed {
display: block;
position: fixed;
top: 0;
width: 100%;
}
p[id] {
color:red;
/*padding-top: 170px;*/
}
#footer { background-color: #cb5454; height: 140px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">header</div>
<div id="sticky">sticky link</div>
<div id="section">
<p>section 1</p>
<p>section 2</p>
<p>section 3</p>
<p>section 4</p>
<p>section 5</p>
<p>section 6</p>
<p>section 7</p>
<p>section 8 x</p>
<p>section 9</p>
<p id="mypara">section 0 xxxx</p>
<p>section 1</p>
<p>section 2</p>
<p>section 3</p>
<p>section 4</p>
<p>section 5</p>
<p>section 6</p>
<p>section 7</p>
<p>section 8</p>
<p>section 9</p>
<p>section 0</p>
<p>section 1</p>
<p>section 2</p>
<p>section 3 z</p>
<p>section 4</p>
<p>section 5</p>
<p>section 6</p>
<p>section 7</p>
<p>section 7</p>
<p>section 8</p>
<p>section 8</p>
<p>section 9</p>
<p>section 0</p>
<p>section 1</p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section </p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
<p>section</p>
</div>
<div id="footer">foot</div>
`

As Jean-Marc Zimmer pointed out, using Sticky removed the need for javascript, but still had the problem of the element coming up underneath the sticky div.
One solution was to add a pseudo element:
p[id]::before {
content: "";
display: block;
height: 60px; /* fixed header height*/
margin: -60px 0 0; /* negative fixed header height */
}
Full fiddle here: http://jsfiddle.net/paull3876/8m3qwont/14/
Note that position:sticky does not work in IE11.
Note that adding padding or a border to p[id] (not in ::before) stops this effect working. No idea why!

jQuery EasyTab: How to fadein/fadeout by the content class instead of the content id

I am using jQuery EasyTab to fadein/fadeout contents on hashchange function. I have multiple contents with same class names also there are 2 or 3 class names in one content. So I want to change the ID into Class.
<div id="tab-container" class='tab-container'>
<ul class='etabs'>
<li class='tab'>HTML Markup</li>
<li class='tab'>Required JS</li>
<li class='tab'>Example CSS</li>
</ul>
<div class='panel-container'>
<div id="tab1">
<p>content 1</p>
</div>
<div id="tab2">
<p>content 1</p>
</div>
<div id="tab3">
<p>content 1</p>
</div>
</div>
</div>
<!-- I want to change the panel-container section like this-->
<div class='panel-container'>
<div class="tab1 tab3">
<p>content 1</p>
</div>
<div class="tab2">
<p>content 1</p>
</div>
<div class="tab3 tab1">
<p>content 1</p>
</div>
</div>

Splitting node from parent node in JavaScript DOM

I have DOM HTML like this
<div class="width_medium">
<p>Text 1</p>
<p>Text 2</p>
<div class="video">Video</div>
<p>Text 3</p>
<p>Text 4</p>
</div>
And I want move away div class "video" from div "width_medium". Result will like this
<div class="width_medium">
<p>Text 1</p>
<p>Text 2</p>
</div>
<div class="width_medium">
<div class="video">Video</div>
</div>
<div class="width_medium">
<p>Text 3</p>
<p>Text 4</p>
</div>
How can I do that with jQuery?

$(".video").unwrap();
$(".video").prevAll('p').wrapAll("<div class=width_medium></div>")
$(".video").nextAll('p').wrapAll("<div class=width_medium></div>")
$(".video").wrap("<div class=width_medium></div>")
.width_medium p {
background-color: blue
}
.width_medium .video {
background-color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="width_medium">
<p>Text 1</p>
<p>Text 2</p>
<div class="video">Video</div>
<p>Text 3</p>
<p>Text 4</p>
</div>
Unwrap the elements.
Use .prevAll() and .nextAll() and .wrapAll() to wrapp all prev and next p
Use .wrap() for the class video
UPDATE
Dont unwrap at first follow previous step then add .parent() to .video then use unwrap()
$(".video").prevAll('p').wrapAll("<div class=width_medium></div>")
$(".video").nextAll('p').wrapAll("<div class=width_medium></div>")
$(".video").wrap("<div class=width_medium></div>")
$(".video").parent().unwrap();
.width_medium p {
background-color: blue
}
.width_medium .video {
background-color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="width_medium">
<p>Text 1</p>
<p>Text 2</p>
<div class="video">Video</div>
<p>Text 3</p>
<p>Text 4</p>
</div>

Active Sidebar Navigation behaves strange in mobile preview

I have an active sidebar navigation, which is not moving up with all the website content when you scroll down the page.
My problem is, that it is working the way I want it to work on a desktop browser, but it jumps up and down and doesn't allow any scrolling as soon as I decrease the browser size or run it as a mobile preview (Chrome Developer Tools)
Here is a: jsfiddle, which unfortunately doesn't work. But the code below works fine! You can just copy it into an html file.
<!DOCTYPE html>
<html>
<head>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<!-- Side Navbar -->
<div class="container">
<div class="row">
<!--left-->
<div class="col-md-3" id="leftCol">
<ul class="nav nav-stacked" id="sidebar">
<li>
<div id="sideBarLogo">
<a href="#">
<img class="img-responsive" style="display:inline-block; height:120px; margin-top:200px" src="images/logo.png" alt="Logo">
<br><br><br><br>
</a>
</div>
</li>
<li><p class="raleway">Menu 1</p></li>
<li><p class="raleway">Menu 2</p></li>
<li><p class="raleway">Menu 3</p></li>
<li><p class="raleway">Menu 4</p></li>
<li><p class="raleway">Menu 5</p></li>
</ul>
</div>
<!--/left-->
<!--right-->
<div class="col-md-9">
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<br><br><br><br><br>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<br><br><br><br><br>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<br><br><br><br><br>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<br><br><br><br><br>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<br><br><br><br><br>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<br><br><br><br><br>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<p>text text text</p>
<br><br><br><br><br>
</div>
</div>
</div>
</body>
</html>
<script>
/* activate sidebar */
$('#sidebar').affix({
offset: {
top: 235
}
});
</script>
If somebody knows a solution, I appreciate it alot. Many thank in advance!

Merging 2 div content on drag and drop of div on one another using jquery

I need a jquery code for following scenario.
there are 4 div's, any one can be dragged and dropped on other.
while dropping the content of DIV1 and DIV2 should get merged.
Merged content also can be pulled out from and put back to origial div
my code is some thing like this.
<div id ="f1">
<p id="c1">content 1</p>
</div>
<div id ="f2">
<p id="c2">content 2</p>
</div>
<div id ="f3">
<p id="c3">content 3</p>
</div>
<div id ="f4">
<p id="c4">content 4</p>
</div>
if i drag f2 on f1 then in f1 i should find both c1 and c2 like this
<div id ="f1">
<p id="c1">content 1</p>
<p id="c2">content 2</p>
</div>
<div id ="f3">
<p id="c3">content 3</p>
</div>
<div id ="f4">
<p id="c4">content 4</p>
</div>
now i should able to pull out c2 and put it any other div also. like this..
<div id ="f1">
<p id="c1">content 1</p>
</div>
<div id ="f3">
<p id="c3">content 3</p>
</div>
<div id ="f4">
<p id="c4">content 4</p>
<p id="c2">content 2</p>
</div>
Please help me out. thanks in advance.

I have managed to write some code for this. On the browser console I could see the tags getting dragged around but on the UI itself the effect was not crystal clear.
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
$('#'+ev.target.id).parent().append($('#'+data));
}
</script>
<div id ="f1">
<p id="c1" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event)">content 1</p>
</div>
<div id ="f2">
<p id="c2" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event)">content 2</p>
</div>
<div id ="f3">
<p id="c3" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event)">content 3</p>
</div>
<div id ="f4">
<p id="c4" ondrop="drop(event)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event)">content 4</p>
</div>