We Keep Coding

Why does jQuery remove parent <div>-elements by inserting new <div>-elements with jQuery?

By working on a project with Django I ran into a problem with my front-end.
I have made this quite simple Bootstrap grid and inserted with jQuery these yellow blocks that should be draggable and resizable (used jQuery UI Widgets for that)
see this image
My jQuery code (maybe a little messy ;) ):
$(document).ready(function () {
var eventColumn = document.createElement("div"); // Create with DOM
$(".employerMainRow").append(eventColumn)
.css({ "background-color": "yellow", "height": "45px", "width": "40%", "margin-left":"40%"})
.attr("class", "eventCol");
$(".eventCol").resizable().resizable({ maxHeight: "45", containment: "parent", // Handles left right and bottom right corner
handles: 'e, w',
// Remove height style
resize: function(event, ui) {
$(this).css("height", '');}
}).draggable().draggable({
axis: "x"
});
});
And my relevant html from template:
<div class="container-fluid">
<h1 style="padding: 5px"> Arbeitsplanner: </h1>
<div class="row">
<div class="col-lg-2" style="border: double" >
<!--....some other grid content....-->
</div>
<!-- Main planner-table wrapper (right):-->
<div class="col-lg-10" style="border: double">
<!-- Header dates:-->
<div style="background-color: grey; border: double" id="mainContentWrapper" class="row">
{% for columnDate in viewedDateColumns %}
<div style="width: 20%; border: double" class="col-lg-2"><strong>{{columnDate}}</strong></div>
{%endfor%}
</div>
<!-- Main planner - main columnview: -->
{% for employer in employers %}
<div class="row employerMainRow" style="min-height: 45px; border: double; background-color: transparent; padding-right: 0px">
</div>
{%endfor%}
</div>
</div>
</div>
I blocked via jQuery that the yellow-divs can be resized in vertical direction (via handles). And this works, you can't resize it in that direction. But now the mouse keeps showing the mousepointer of resizing while hovering upon the bottom corner of the yellow divs. The really strange effect by using this is that by trying to resize in the vertical direction, one of the rows of the Bootstrap grid that I created just disappears. And the yellow div of that row shifts into the other row.
(see the result also in this image)
I just can't get why this happens and tried a couple of things by using the attributes offered by jQuery UI but it changes nothing.
Is there something I'm doing fundamentally wrong in my code that makes this happen? Is there something to prevent it?
Hope the problem/idea is clear. (I would like to give a demo-site but with django that's a little tricky, when it is still online maybe: https://rothe-plana-sv8930.c9users.io/)
edit: I think I can narrow down the fundamental problem a little bit. On running the template with my jQuery-code, I found out (source-code view of firefox) that jQuery UI just deleted the row-divs that I created from the beginning by loading the page itself. (No resizing involved yet). Note that I had to put the yellow eventCol into these "row"-elements so depending on where I insert things with jQuery, the parent element seems to get removed completely.
Is there a gerneral reason for that?

Making a JS toggle div close when another is opened, and change image on click

I am new to JavaScript. Currently, I am working on a small toggle for my website.
The goal is to have three buttons that open up different sections with information. I have this working on my website. Now, what I want to achieve is to make other divs close when the others are opened up. Furthermore, I would like the first div to be open when the page is loaded, including an indicator (for example orange image) on the button. Can you please help me with this?
For some reason, the script works on my website, but not on the JSfiddle:
https://jsfiddle.net/q7evaLsn/1/
Current code:
$('.button1').click(function(){
$('.product').slideToggle('slow');
});
$('.button2').click(function(){
$('.lockedin').slideToggle('slow');
});
$('.button3').click(function(){
$('.developers').slideToggle('slow');
});
.button2
{
padding-top: 10px;
}
.button3
{
padding-top: 15px;
}
<h3>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/product-holder.png" class="button1" alt="Expand"/>
</h3>
<h3>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/lockedin-holder.png" class="button2" alt="Expand"/>
</h3>
<h3>
<img src="http://www.mindaffect.nl/wp-content/uploads/2017/12/developers-holder.png" class="button3" alt="Expand"/>
</h3>
<div class="product">
Testdiv1
</div>
<div class="lockedin">
Testdiv2
</div>
<div class="developers">
Testdiv3
</div>
Your help is greatly appreciated!

You can simply slide up everything before you start toggling.
For ex
$('.button3').click(function(){
$('.product').slideUp();
$('.lockedin').slideUp();
$('.developers').slideToggle('slow');
});

Your JSfiddle isn't working because you haven't included the jQuery library required for some of your functions. For future reference, jQuery is a popular javascript library which simplifies and extends some basic javascript functions, you can use both interchangeably however if you do want the extra features of jQuery then you'll have to include it like so in your HTML:
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
As mentioned by #SURESH you'll likely want to slide the other areas up where you are toggling the target area:
$('.example-button').click(function(){
$('.section-to-hide-1').slideUp();
$('.section-to-hide-2').slideUp();
$('.section-to-toggle-1').slideToggle();
});
Just as further formatting advice, you have your images (that are acting as buttons) within header tags.
It's generally bad practice to use these header tags for anything
other than headings/titles
I'd recommend using A tags or even BUTTON tags to do the same job
I'd try not to use IMG tags as essentially text buttons, you will be able to style a button similarly like so:
<button class="button1">Products</button>
<style>
.button1 { text-align: center; padding: 10px; text-transform: uppercase: border-radius: 100%; border: 3px solid orange; background: white; color: #000; }
</style>
This will allow search engines/screen readers to read your button element, and you can make hover effects etc.

Sticky navbar has a bug on mobile

I have two sticky navbars, the first white one from Wordpress with its own sticky function, and the black one below is html/css-only (no bootstrap), and it has a strange movement on mobile, it's hard to explain so let me show you:
When I first load the page, it looks good like this:
But when I scroll down, even if just a little bit, the black navbar kind of bounces suddenly and very quickly and makes the content "jump". I have no idea why this is happening since there is no bug when loading the webpage from a computer! It's only a matter of mobile phones. :S
jQuery(window).scroll(function () {
if (jQuery(window).scrollTop() > 0) {
jQuery('#navbar_reservas').addClass('navbar-fixed');
}
if (jQuery(window).scrollTop() <= 0) {
jQuery('#navbar_reservas').removeClass('navbar-fixed');
}
});
CSS
.navbar-fixed {
top: 60px;
z-index: 1000;
position: fixed;
width: 100%;
}
HTML
<div id="navbar_reservas">
<div id="reservas_left">
<div class="nav-item_reservas" id="inner_reservas_left">
<a id="dudas" href="tel:55555555">
¿Dudas?
<br />555 555 555 </a>
</div>
</div>
<div id="reservas_right">
<div class="dropdown_reservas nav-item_reservas" id="inner_reservas_right">
<div class="dropbtn">
TOTAL
<br /><span id="totalprice">0,00€</span>
<i class="material-icons">arrow_drop_down</i>
</div>
</div>
</div>
<div class="dropdown-content_reservas" id="myDropdown">
<ul id="dropul" class="unoul">
<li id="drop2"></li>
<li id="drop3"></li>
<li id="drop4"></li>
<li id="drop5"></li>
<li id="drop6"></li>
</ul>
</div>
</div>

From what I can see you only add the position: fixed when scrollTop is not 0. That will create a new stacking context when the class is applied. That means it'll no longer be "visible" to the elements around it in terms of positioning. And as such the content below it will jump up to fill the gap.
If you know the height of the navbar already, there is a really simple solution:
When the navbar do not have the navbar-fixed class, apply position: absolute on it so it's always in its own stacking context. Then add the height of the navbar as top padding/margin to the content below it.
If you do not know the height:
You'll need to do the same as above, but calculate the height of it with JavaScript on load. If it changes height on say resize or you have some dynamically changing content, you'll need to make sure to update the height used for the above method when those events happen.
If you can work with relatively new code:
There is a CSS property for all this! position: sticky combined with top: 0 Will make the navbar stick to the top of the screen when it otherwise would scroll up behind the viewport.
However, browser support isn't very impressive:
http://caniuse.com/#feat=css-sticky

When click on sidebar, change only part of the screen

I have a question, which I can't ask directly, but will try to explain as much as I can, so you can help me.
The thing is next: I am making a project about some football league, and I have a sidebar which lists rounds of the competitions like this
<div id="sidebar">
<h2>2017/18</h2>
<h4>1st Qualif. Round</h4>
<h4>2nd Qualif. Round</h4>
<h4>3rd Qualif. Round</h4>
<h4>Play-Offs</h4>
</div>
It's nothing much, as I am trying to keep it simple. I will make those clickable, but I don't want them to lead me to another page, I want them just to change the part of the main container of the page.
Something just like on http://www.flashscore.com. When you click to change date, the url stays flashscore.com, but the page changes to the date that you clicked.
I know this all sounds crazy, but if you understand me, I will explain even further with whatever you need me to.
Also, I am fairly new to Javascript, but will try to incorporate it into the website I am making, as I think this is pure javascript.

Look into AJAX, that is what you will want to do in order to grab new info from a server without doing a full page postback / reload. It will be mostly JS with maybe some CSS to show / hide content. I'm on mobile so I can't give a great demo, but I'll try when I get off work.
EDIT: looks like I thought you were asking about loading new data. Should be easier than that if you just want to change content to display. I'll post more details later
Update: relevant fiddle: https://jsfiddle.net/44ka1be6/
html
<div class="wrapper">
<div class="sidebar">
<div>
Stuff 1
</div>
<div>
Stuff 2
</div>
<div>
Stuff 3
</div>
</div>
<div id="content">
Default stuff
</div>
</div>
js
$(document).ready(function() {
$('.sidebar div').click(function(e) {
$('#content').text($(this).text())
})
})
css
.sidebar, #content {
display: inline-block;
}
.sidebar div {
border: 1px solid black;
font-size: 18px;
padding: 8px 5px;
}
.wrapper {
border: 1px solid black;
}

It is very hard to answer without details, but you can make the main body of the page in an element (div for example) and write to the innerHTML when they click on a link. Depending on what you want to go in the main body, you can have it all as strings in JS, or preferably load the data through AJAX. See: https://www.w3schools.com/xml/ajax_intro.asp. They have a lot of good example code.

In case you just want to update your container with a new static content, you can just add a click event listener to your sidebar:
sidebar = document.getElementById('sidebar');
container = document.getElementById('container');
sidebar.addEventListener('click', function(e) {
container.innerHTML = "New content";
});
#sidebar {
float: left;
}
<div id="sidebar">
<h2>2017/18</h2>
<h4>1st Qualif. Round</h4>
<h4>2nd Qualif. Round</h4>
<h4>3rd Qualif. Round</h4>
<h4>Play-Offs</h4>
</div>
<div id="container">Content</div>

Not able to scroll within a page using AngularJS in HTML

I have a simple html code where I have a left menu. I want to scroll content on click of menu within the same page. Also I don't want to scroll menu.
The problem is, I am using AngularJS so compiler is confused between routing and segment logic.
Here is my menu:
<div class="container">
<div style="float: left;width:150px;">
<ul class="list-group">
<li class="list-group-item">overview</li>
<li class="list-group-item">Clinical features</li>
<li class="list-group-item">Diagnosis</li>
<li class="list-group-item">Testing laboratories</li>
<li class="list-group-item">Result interpretation</li>
</ul>
</div>
<div class="col-md-10" id="clinical">
<div class="row">
<div class="col-md-2">Result interpretation</div>
<div class="col-md-10">
<p style="text-align: right;">Back To Top</p>
</div>
</div>
<hr>
<p>Hey this is just to test.</p>
</div>
</div>

This is not a problem specific to AngularJS or anything else. It's just a tiny CSS problem:
You're aligning your menu using float: left, which will cause it to appear on the left border but it won't follow you down when scrolling (as you've noticed).
The solution is pretty simple, just attach your menu in a different way. There are many different ways to do this, also depending on whether you're using any JavaScript library (like Bootstrap), but the most simple approach would be pinning the menu using CSS:
.menubar {
/* A fixed alignment will ignore scroll bar positions */
position: fixed;
/* Stretch the bar by forcing offsets and a width */
top: 0;
left: 0;
bottom: 0;
width: 150px;
}
Last but not least you'll have to move your content so it's not hidden by the menu bar (which would otherwise overlap):
.content {
padding-left: 150px; /* of course this could use positioning as well */
}
You can try the whole thing in this jsFiddle.
From your question it's not clear whether you're also looking for soft scrolling, but for that you'll most likely want some additional JavaScript library - or you could just use some library that provides everything for you (including menu bar CSS etc.), like Bootstrap or UI Kit.