We Keep Coding

Implement the Drag&Drop for sidebar menu

I have 2 vertical div: left and central panel.
I use the left div like a sidebar menu and I would like to implement a drag&drop to move the left sidebar to a new right sidebar (to move the menu from left to right side).
When the user start to drag, I would like to show where is possible to drop the panel (so I need to show a right empty sidebar) and when the user drop the panel from left to the right destination I need to hide the left panel. Same situation when the user start to drag from right to left panel.
I have see some possible ways to implement this using jQuery UI or directly DnD integrated of HTML5 (example).
Do you know which one is the best solution (also as speed of implementation of it)?
I think that to get exactly what I want (also with the show/hide of the three panels), I need to write some code.. Do you know any tutorial / example very close to what I would like to do?

Here is an example with animation: https://jsfiddle.net/Twisty/jf6urpep/
As you did not provide an example of the HTML, script, or concept, I created a basic example.
HTML
<!-- Sidebar Left -->
<div class="sidebar-l" style="height:100%; position: relative;">
<div class="w3-sidebar w3-light-grey w3-bar-block" style="width:25%; position: absolute;">
<h3 class="w3-bar-item">Menu</h3>
Link 1
Link 2
Link 3
</div>
</div>
<!-- Sidebar Right -->
<div class="sidebar-r" style="margin-left: 75%; width:0; height:100%; position: relative;">
</div>
<!-- Page Content -->
<div class="content" style="margin-left:25%">
<div class="w3-container w3-teal">
<h1>My Page</h1>
</div>
<img src="https://www.w3schools.com/w3css/img_car.jpg" alt="Car" style="width:100%">
<div class="w3-container">
<h2>Sidebar Navigation Example</h2>
<p>The sidebar with is set with "style="width:25%".</p>
<p>The left margin of the page content is set to the same value.</p>
</div>
</div>
JavaScript
$(function() {
$(".w3-sidebar").draggable({
handle: "h3.w3-bar-item",
drag: function(e, ui) {
if (ui.position.left > $(window).width() / 2) {
$(".sidebar-l").css({
"width": 0
});
$(".sidebar-r").css({
"width": "25%"
});
$(".content").css({
"margin-left": 0,
"margin-right": "25%"
});
} else {
$(".sidebar-l").css({
"width": "25%"
});
$(".sidebar-r").css({
"width": 0
});
$(".content").css({
"margin-left": "25%",
"margin-right": 0
});
}
},
stop: function(e, ui) {
var side, pos, center;
pos = ui.position;
center = $(window).width() / 2;
console.log(pos, center);
if (pos.left > center) {
side = "r";
} else {
side = "l";
}
console.log("target", side);
var sidebar = $(".w3-sidebar").detach();
console.log("detach", sidebar);
sidebar.appendTo($(".sidebar-" + side)).position({
my: "left top",
at: "left top",
of: $(".sidebar-" + side),
using: function(css, calc) {
$(this).animate(css, "fast");
}
})
console.log("append to", $(".sidebar-" + side));
}
});
$("h3.w3-bar-item").disableSelection();
});
Depending on where the item is dragged, we swap which side has the margin space. This helps indicate to the user where the sidebar will land. The user can basically drop the sidebar on either side and it will snap to position.
Hope that helps.

Psuedo code based on your example link:
Put both sidebar elements in your HTML as sidebar sidebar--left and sidebar sidebar--right
Fill one with the actual sidebar content.
Add the class sidebar--hidden to the other. Style that to hide the element.
On dragstart, remove the class sidebar--hidden and add a class to both sidebars like sidebar--droppable. Style them appropriately
On drop, remove sidebar--droppable from both and add sidebar--hidden to the other
Don't forget to accommodate for drops that do not fall on a sidebar drop target. You can use dragend for that case and just put it back to where it started (or maybe test the position and if >50%, make it a right sidebar...)
Though, if this is really just a choice between left and right sidebars, probably easier to have a button/checkbox type control on the sidebar and simply move it in the DOM when toggled (and on page load via some persistence mechanism). Or have both sidebars in the DOM and move the innerHTML. If you don't use padding or borders on the sidebars elements themselves they should collapse to hidden when they have no content.

Automatically Scrolling a webpage with animating div

I am making a web app. I have created 25 divs.
I have Used jquery fadeIn() by which divs are gradually made and displayed one after another on screen.
But problem is that when 25 divs have been created, scroll is created due to which first 4 divs can be seen but the remaining can't be seen until user scroll the page.
I want that as one by one div is created, the page should automatically scroll to the div recently created and so on this process should be continued until the last div is created.

You can use
$('html,body').scrollTop($(".answer.visible:last").offset().top);
$(function() {
$(".answer").hide();
$('#demo').click(function(e) {
var _div = $('.answer[style*="display: none"]:first');
if (_div.length) {
_div.fadeIn();
$('html,body').animate({
scrollTop: _div.offset().top
},
'slow');
} else {
$(this).text('Done..!');
}
});
});
#demo {
position: fixed;
bottom: 0px;
left: 0px;
}
.answer {
width: 100%;
height: 200px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="demo">Click here</button>
<div class="answer">1</div>
<div class="answer">2</div>
<div class="answer">3</div>
<div class="answer">4</div>
<div class="answer">5</div>
<div class="answer">6</div>
<div class="answer">7</div>
<div class="answer">8</div>
<div class="answer">9</div>
<div class="answer">10</div>
<div class="answer">11</div>
<div class="answer">12</div>
<div class="answer">13</div>
<div class="answer">14</div>
<div class="answer">15</div>
<div class="answer">16</div>
<div class="answer">17</div>
<div class="answer">18</div>
<div class="answer">19</div>
<div class="answer">20</div>
<div class="answer">21</div>
<div class="answer">22</div>
<div class="answer">23</div>
<div class="answer">24</div>
<div class="answer">25</div>
I think this looks pretty cool when we use slideDown+scrollTop. Check fiddle
Documentations
To get the coordinates
http://api.jquery.com/offset/
Set vertical position of the scroll bar
https://api.jquery.com/scrollTop/
Set horizontal position of the scroll bar
https://api.jquery.com/scrollleft/

I found this link here
smooth auto scroll by using javascript
Using this you could create something like this here:
http://jsfiddle.net/mrc0sp5j/
The main point is, that you create a scrolling-function using
window.scrollBy or window.scrollTo
http://www.w3schools.com/jsref/met_win_scrollto.asp
With jQuery .last or .eq you can specify which element you want to scroll to
$(".mydivobjects").eq(x).position().top
Hope this helps
cheers

One page website change menu color each section

I'm currently building a one page website with a fixed navigation menu (with a blue background). This one page website has 4 sections, 2 with a blue background and 2 with a white background.
My idea to do with this menu is when i scroll (not mouse hover) over a blue section, the menu background turns white. and when i scroll over a white section, the background changes back to blue.
An example can be found here.
(Not my site, but look at the changing color of the menu while scrolling)
My HTML code looks like this:
<div class="subMenu" >
<div class="inner">
Home
Over mij
Kennis
Projecten
Contact
</div>
</div>
<div class="section s1">
<div class="inner">
<h1>Section 1</h1>
</div>
</div>
<div class="section s2">
<div class="inner">
<h1>Section 2</h1>
</div>
</div>
<div class="section s3">
<div class="inner">
<h1>Section 3</h1>
</div>
</div>
<div class="section s4">
<div class="inner">
<h1>Section 4</h1>
</div>
</div>
Is there a simple way to do this?
Thanks in advance.

I've found/created a temporary fix for my problem.
$(window).scroll(function(e) {
var s1 = $('.s1'),
s2 = $('.s2'),
s3 = $('.s3'),
s4 = $('.s4'),
menu = $('.menu'),
diff = s1[0].offsetTop - window.pageYOffset;
diff2 = s2[0].offsetTop - window.pageYOffset;
diff3 = s3[0].offsetTop - window.pageYOffset;
diff4 = s4[0].offsetTop - window.pageYOffset;
if(diff < 100) {
$(".menu").addClass("white");
$(".menu").removeClass("blue");
}
if(diff2 < 100) {
$(".menu").addClass("blue");
$(".menu").removeClass("white");
}
if(diff3 < 100) {
$(".menu").addClass("white");
$(".menu").removeClass("blue");
}
if(diff4 < 100) {
$(".menu").addClass("blue");
$(".menu").removeClass("white");
}
if(diff > 100) {
$(".menu").removeClass("white");
$(".menu").removeClass("blue");
}
});
JSFIDDLE DEMO

Not sure exactly what you want to do but, unless you want to change the background of another element (other than the one you're mousing over) an easy way is to use the :hover css selector.
like this:
.inner:hover{
background-color: blue;
}
this will make changes to the class when you're hovering over.
If however, you want to make changes to a different element, then you need to attach an event handler through javscript:
(rough code, not tested)
var menuitem = document.getElementById('menu_to_turn_other_stuff_blue'); // can use getElementsByTagName here, but you'll have to walk the HTMLCollection returned
var otheritem = document.getElementById('other_stuff_to_turn_blue');
menuitem.onmouseover = function(){ otheritem.style.backgroundColor = "blue"; } // ideally, you want to use addEventListener, not directly modifying the attribute this way, but either will work - addEventListener is however the recommended way
you can use onmouseout or the proper event handler through addEventListener to change the color back if necessary. The CSS solution will work automatically for this.

Take a look at the source of the example website you gave: view-source:http://www.franzsans.de/
section id="info" class="bg-white b-blue f-grey"

Just as quick example with jQuery a Fiddle
$(".s1,.s2").hover(function ()
{
$(".subMenu").removeClass("white").addClass("blue");
});
$(".s3,.s4").hover(function ()
{
$(".subMenu").removeClass("blue").addClass("white");
});
$(".s1,.s2,.s3,.s4").mouseleave(function ()
{
$(".subMenu").removeClass("blue").removeClass("white");
});
Example CSS:
body {
background-color:yellow;
}
.subMenu a {
color:black;
}
.s3, .s4, .white {
background-color:white;
}
.s1, .s2, .blue {
background-color:blue;
}
For reference: http://api.jquery.com/addclass/, http://api.jquery.com/removeClass/, http://api.jquery.com/hover/, http://api.jquery.com/mouseleave/
Update for updated question: Previously question was to change background-color of menu in case scrolling over section which was misunderstood as hover. As question was clarified, approach would be e.g. to add jquery inview and to change the background-color when the white or blue section is in view following the instructions provided on given link (as I don't want to just copy them from there and final steps could be done by OP).
Just as example for using inview new Fiddle with inview. No need to style it, just expand the result window above the 1st section and scroll down; you'll notice that color will change according to the section which is in view. Added following for that: the mentioned inview.js and
$('.s1,.s2').bind('inview', changeBlue);
$('.s3,.s4').bind('inview', changeWhite);
where the changeBlue() and changeWhite() functions are just the hover-events from above.

How to Slide or Move this Set of Divs

I have a set of seven div's with the following properties:
height: 100px;
width: 100px;
display: inline-block;
I have a wrapper div containing these seven blocks with only enough room to fit four and change.
The overflow is hidden.
How can I make this function so that when you clicked and dragged horizontally, or swiped with your finger on mobile, the entire row of div blocks would slide to show the previously hidden ones?
Please refer to this jsFiddle for the example.
We can use css or jQuery here.
*Bonus, show fractions of otherwise entirely hidden div's at the edges of the container.

Based on jfriend00's answer I modified this so it will work on touch/click and move with the mouse.
var last_x = null;
var holding = false;
//Mark the wrapper as clicked/touched
$('.wrapper').mousedown(function(){
holding=true;
});
//We do this on document so that even if movement goes outside of the container the event will fire
$(document).mouseup(function(){
holding=false;
});
$('.wrapper').mousemove(function(e){
if(last_x === null || !holding) //If this is the first movement
{
last_x = e.pageX;
return;
}
var ammount = e.pageX - last_x;
$('.slider',this).css('margin-left', '+=' + ammount);
last_x = e.pageX;
});
The gist of how this works is that when the mousedown event is detected on the container the script starts tracking all mouse movement and moves the content with the mouse. When the mouse is released it stop tracking movement.
Fiddle: http://jsfiddle.net/NvJam/2/

Since no one has mentioned jQuery.Kinetic I'll add this:
<div class="carousel">
<div class="wrapper">
<div class="first">First</div>
<div class="second">Second</div>
<div class="third">Third</div>
<div class="fourth">Fourth</div>
<div class="fifth">Fifth</div>
<div class="sixth">Sixth</div>
<div class="seventh">Seventh</div>
</div>
</div>
$('.carousel').kinetic();
Demo: http://jsfiddle.net/louisbros/2pRBg/6/

see here
.wrapper {
width: 900px;
height: 100px;
overflow: hidden;
}

You can put an additional container div and use absolute positioning on that div to move the items left/right. Here's a demo:
http://jsfiddle.net/jfriend00/7edc9/
HTML looks like this:
<div class="wrapper">
<div class="slider">
<div class="first">First</div>
<div class="second">Second</div>
<div class="third">Third</div>
<div class="fourth">Fourth</div>
<div class="fifth">Fifth</div>
<div class="sixth">Sixth</div>
<div class="seventh">Seventh</div>
</div>
</div>
You weren't entirely clear how you wanted to move them on non-touch screens, but here's some event handlers that work on buttons:
$("#left").click(function() {
$(".slider").stop(true, true).animate({left: "-=125px"}, 500);
});
$("#right").click(function() {
$(".slider").stop(true, true).animate({left: "+=125px"}, 500);
});
Something similar could be hooked up for touch events.

Even better solution: use the JQuery UI draggable:
$('.slider').draggable({
axis: 'x',
});
http://jsfiddle.net/DCuGV/2/

Finding the next hidden div and showing it with a jQuery selector

I'm building a slideshow in jQuery that allows the user to see four images, and page through them, forwards and backwards by appending a new div with the image to the bottom via .load, and then hiding the top div. I'm very new to programming.
I'm having trouble working out a selector to allows the user to go "back" showing the next hidden div, after the first shown div, and hiding the last showing div - faux code example below.
<div class="slideShow" >image one (display = none)</div>
<div class="slideShow" >image two (display = none)</div>
<div class="slideShow" >image three </div>
<div class="slideShow" >image four </div>
<div class="slideShow" >image five </div>
<div class="slideShow">image six </div>
<a href="#" class="scrollUp" >Scrollup</a>
<a href="#" class="scrollDown" >ScrollDown</a>
Jquery to load a new image and attach to the bottom, and hide the first div currently displaying.
$('.scrollDown').click(function() {
$('.slideShow:last').after('<div class="slideShow"></div>'); // add a new div to the bottom.
$('.appendMe:last').load('myimagescript.py'); // load in the image to the new div.
// here I need to find a way of selecting in this example the first shown image (image three) and applying a .slideUp(); to it
});
Jquery to allows the user to go back to an image that they have previously seen and hide the last shown div at the bottom
$('.scrollUp').click(function() {
// here I need to find a way of selecting in this example the first hidden div (image two) after the first shown div (image three) and applying a slideDown(); to it.
$('.slideShow:last').slideUp(); // hide the last image on the page - trouble is what happens if they user now clicks scrollDown - how do I reshow this div rather than just loading a new one?
});

I dont quite understand correctly, however this info may help...you need to match the first visible div then use .prevAll() and filter to get the hidden sibling
$('div.slideShow:visible:first').prevAll(':hidden:first').slideDown();

I've spent hours today on this site trying to do something very similar to what was posted in this question.
What I have is Previous | Next links navigation doing through a series of divs, hiding and showing.
Though what I ended up with was different than the answer here....this was the one that most got me where I needed to be.
So, thanks.
And in case anyone is interested, here's what I did:
<script language="javascript">
$(function() {
$("#firstPanel").show();
});
$(function(){
$(".nextButton").click(function () {
$(".panel:visible").next(".panel:hidden").show().prev(".panel:visible").hide();
});
});
$(function(){
$(".backButton").click(function () {
$(".panel:visible").prev(".panel:hidden").show().next(".panel:visible").hide();
});
});
</script>
<style type="text/css">
.defaultHidden { display: none; }
.navigation { display: block; width: 700px; text-align: center; }
#contentWrapper { margin-top: 20px !important; width: 700px; }
.nextButton { cursor: pointer; }
.backButton { cursor: pointer; }
</style>
<div class="navigation">
<span class="backButton"><< Previous</span> | <span class="nextButton">Next >></span></button>
</div>
<div id="contentWrapper">
<div id="firstPanel" class="panel defaultHidden">
<img src="images/quiz/Slide1.jpg" width="640" />
</div>
<div class="panel defaultHidden">
<h1>Information Here</h1>
<p>Text for the paragraph</p>
</div>
<div class="panel defaultHidden">
<h1>Information Here</h1>
<p>Text for the paragraph</p>
</div>
<div class="panel" style="display: none;">
<img src="images/quiz/Slide4.jpg" width="640" />
</div>
<div class="panel defaultHidden">
<h1>Information Here</h1>
<p>Text for the paragraph</p>
</div>
<div class="panel defaultHidden">
<img src="images/quiz/Slide6.jpg" width="640" />
</div>
Repeat ad naseum...
</div>

a shot in the dark but...
selecting the first shown div and sliding it up
$('.slideShow:visible:first').slideUp();
selecting the first hidden div after the first shown div and sliding it down...
$('.slideShow:visible:first').next('.slideShow:hidden').slideDown()
psuedo selectors FTW!

Something like the following should do the trick
$(function() {
$(".scrollUp").click(function() {
//Check if any previous click animations are still running
if ($("div.slideShow:animated").length > 0) return;
//Get the first visible div
var firstVisibleDiv = $("div.slideShow:visible:first");
//Get the first hidden element before the first available div
var hiddenDiv = firstVisibleDiv.prev("div.slideShow");
if (hiddenDiv.length === 0) return; //Hit the top so early escape
$("div.slideShow:visible:last").slideUp();
hiddenDiv.slideDown();
});
$(".scrollDown").click(function() {
if ($("div.slideShow:animated").length > 0) return;
var lastVisibleDiv = $("div.slideShow:visible:last");
if (lastVisibleDiv.next("div.slideShow").length === 0) {
//No next element load in content (or AJAX it in)
$("<div>").addClass("slideShow")
.css("display", "none")
.text("Dummy")
.insertAfter(lastVisibleDiv);
}
$("div.slideShow:visible:first").slideUp();
lastVisibleDiv.next().slideDown();
});
});
Only thing that this solution does is check if an element that was previously invisible is now being animated. This solves some of the problems regarding multiple clicks of the links that occur before the animations have completed. If using AJAX you'd have to do something similar (e.g. turn a global variable on / off - or just disable the scroll down link) to avoid multiple requests being made to the server at once...