We Keep Coding

How to show popup on text highlight at the middle of the selection?

I am showing a popup on text highlight using JavaScript. But I’m not able to position it at the center of the highlight,
Same as medium.com text highlight popup. I want the .toolbar at the center of the highlighted text like these images below.
const
getRoot = document.querySelector('.root'),
getTool = document.querySelector('.toolbar');
document.addEventListener('mouseup', e => {
window.getSelection().toString().length ?
(
getTool.style.left = e.clientX + 'px',
getTool.style.top = e.clientY + 'px',
getTool.classList.add('active')
) : null;
});
document.addEventListener('mousedown', () => {
window.getSelection().toString().length < 1 ?
getTool.classList.remove('active') : null;
});
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
}
.root {
max-width: 500px;
margin: 1rem auto;
font-size: 21px;
line-height: 1.8;
font-family: Times new roman;
}
.toolbar {
display: none;
position: absolute;
height: 45px;
width: 220px;
background-color: #212121;
border-radius: .25rem;
transition: .2s;
}
.toolbar.active {
display: block;
}
<div class="toolbar"></div>
<div class="root">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos dignissimos porro explicabo soluta totam illum. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Architecto, sunt.</p>
</div>
Medium.com

Like in this post you should use selection range and range boundingClientRect
document.addEventListener('mouseup', e => {
s = window.getSelection()
oRange = s.getRangeAt(0); //get the text range
oRect = oRange.getBoundingClientRect();
s.toString().length ?
(
getTool.style.left = ((oRect.left + oRect.width / 2) -110) + 'px', // 110 is toolbox.width/2
getTool.style.top = (oRect.top - 45 - 10) + 'px', //45 is toolbow.height
getTool.classList.add('active')
) : null;
});

How to make an offCanvas Menu with multi-level sliding panes using jQuery similar to mmenu?

Off the bat I'd like to accept that there are a lot of libraries out there and there are a lot of similar questions on SO. But none address the issue at my hand.
I have created a OffCanvas Mobile-like sliding Menu inspired from mmenujs.
For achieving this I took the approach of making <div> panes with different z-index values and then translating them anchor click.
Is there a way to automatically create on.("click",function(){}); using jQuery to open the corresponding panes when clicked on the appropriate link.
Here's my code so far:
$(document).ready(function(){
$(".vjNav").prepend("<div class='vjNavHead' style='position:sticky;top:0;left:0;background:#222'><div style='flex-grow:1;height:50px;display:flex;align-items:center;justify-content:center'>HelloNav Heading</div><a id='closeNav' style='background:#111;height:50px;width:50px;display:flex;align-items:center;justify-content:center;padding:0'>x</a></div>");
addNavZindex();
$("#page").on("click",function(){ openNav(); });/* To make testing easier */
$("#overlay").on("click",function(){ closeNav(); });
$("#closeNav").on("click",function(){ closeNav(); });
function openNav(){
$("#navMain").toggleClass("TL");
$("#navbar").toggleClass("TR");
$("#page").toggleClass("TR");
$("html").toggleClass("noScroll");
$("#overlay").toggleClass("TL showOver");
};
function closeNav(){
$("html").toggleClass("noScroll");
$("#navMain").toggleClass("TL");
$("#overlay").toggleClass("TL showOver");
$("#navbar").toggleClass("TR");
$("#page").toggleClass("TR");
if($("#about").attr("class") == "vjNav"){
$("#about").toggleClass("TL");
}/* How can I escape coding closeNav for each and every pane manually? */
};
function addNavZindex(){
if( $("#navContainer").find("div").length ){
$(".vjNav").each(function(i){
$(this).attr('style', function(){
return "z-index: " + (20+i);
});
});
}
};
$("#aboutLink").on("click",function(){
$("#about").toggleClass("TL");
});/* How can I escape declaring onClick functions for each and every pane manually? */
});
html, body{
margin:0;padding:0;
overflow-x: hidden;
}
#page{
position: absolute;
top:0;left:0;
display: flex; flex-direction: column;
width: 100vw;min-height:100vh;height: 300vh;
padding: 0; margin:0;
background: orange;
transition: ease-in-out 500ms;
z-index: 990;
}
#navbar{
position: fixed; bottom: 0; left: 0;
width: 100vw; height: 5vh; min-height:40px;
background: forestgreen;
z-index: 991;
transition: ease-in-out 500ms;
}
#navMain,.vjNav{
position: fixed;
bottom:0;left:0;
background: #222;
display: flex;flex-direction: column;
width: 80vw; height: 100vh;
overflow-y: auto;
z-index: 20;
color: #ddd;
transition: ease-in-out 500ms;
}
.vjNavHead{
display: flex;flex-direction: row;
align-items: center; justify-content: space-between;
width: 100%;color: aqua;
font-size: 1.5rem;
box-shadow: inset #ddd 0 -1px;
}
.vjNav a{
color:#ddd;box-shadow: inset #ddd 0 1px 0 0;
text-decoration: none; font-size: 3vh;height: 6vh;line-height: 6vh;padding-left: 2vw;
display: flex; flex-direction: row;align-items: center; justify-content: space-between;
}
.vjNav a:hover, .vjNav a:focus{background: #111;}
.vjNav a#closeNav{box-shadow: inset #ddd 0 -1px, inset #ddd 0 0;}
#overlay{
position: fixed;
top:0;left:80vw;
display: flex;flex-direction: column;
background: rgba(0, 0, 0, 0.1);
width: 100vw;height: 100vh;
transition: all ease-in-out 500ms;
}
.showOver{
z-index: 999;
background: rgba(0, 0, 0, 0.7)!important;
}
.TL{
transform: translateX(-80vw);
}
.TC{
transform: translateX(0vw);
}
.TR{
transform: translateX(80vw);
}
.noScroll{
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="navbar">
Hello
</div>
<div id="page" class="TC">
Hello
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magnam exercitationem ipsam odit assumenda repellat. Sunt saepe nesciunt dolores culpa aspernatur, odit officia quis cumque iste reiciendis molestiae recusandae eum dolorum?</p>
</div>
<div id="overlay" class="TL"></div>
<div id="navContainer">
<div id="navMain" class="TL vjNav">
<a id="aboutLink" href="#about">About Us</a>
Contact
Hello
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam alias autem ab adipisci, beatae ex quas sapiente voluptas eaque eos, commodi maiores fuga voluptatem! Ut facere necessitatibus aut enim sint.</p>
<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>.<br/>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur totam architecto distinctio cum nemo officia dolore voluptates enim quasi, neque dolorem culpa fuga corporis in, nesciunt nisi repudiandae officiis.</p>
</div>
<div id="about" class="TL vjNav">
About 01
About 02
About 03
About 04
About 05
</div>
<div id="about2" class="TL vjNav">
About 02-01
About 02-02
About 02-03
About 02-04
About 02-05
</div>
<div id="hello" class="TL vjNav">
hello 01
hello 02
hello 03
hello 04
hello 05
hello 06
hello 07
</div>
<div id="hello4" class="TL vjNav">
hello 01
hello 02
hello 03
hello 04
hello 05
hello 06
hello 07
</div>
</div>
</body>
If there is a better way to tackle this kind of menu please do guide...

You could try implementing something like this... Put it in a separate file and call it on the page.
/* PushMenu()
* ==========
* Adds the push menu functionality to the sidebar.
*
* #usage: $('.btn').pushMenu(options)
* or add [data-toggle="push-menu"] to any button
* Pass any option as data-option="value"
*/
+function ($) {
'use strict';
var DataKey = 'lte.pushmenu';
var Default = {
collapseScreenSize : 767,
expandOnHover : false,
expandTransitionDelay: 200
};
var Selector = {
collapsed : '.sidebar-collapse',
open : '.sidebar-open',
mainSidebar : '.main-sidebar',
contentWrapper: '.content-wrapper',
searchInput : '.sidebar-form .form-control',
button : '[data-toggle="push-menu"]',
mini : '.sidebar-mini',
expanded : '.sidebar-expanded-on-hover',
layoutFixed : '.fixed'
};
var ClassName = {
collapsed : 'sidebar-collapse',
open : 'sidebar-open',
mini : 'sidebar-mini',
expanded : 'sidebar-expanded-on-hover',
expandFeature: 'sidebar-mini-expand-feature',
layoutFixed : 'fixed'
};
var Event = {
expanded : 'expanded.pushMenu',
collapsed: 'collapsed.pushMenu'
};
// PushMenu Class Definition
// =========================
var PushMenu = function (options) {
this.options = options;
this.init();
};
PushMenu.prototype.init = function () {
if (this.options.expandOnHover
|| ($('body').is(Selector.mini + Selector.layoutFixed))) {
this.expandOnHover();
$('body').addClass(ClassName.expandFeature);
}
$(Selector.contentWrapper).click(function () {
// Enable hide menu when clicking on the content-wrapper on small screens
if ($(window).width() <= this.options.collapseScreenSize &&
$('body').hasClass(ClassName.open)) {
this.close();
}
}.bind(this));
// __Fix for android devices
$(Selector.searchInput).click(function (e) {
e.stopPropagation();
});
};
PushMenu.prototype.toggle = function () {
var windowWidth = $(window).width();
var isOpen = !$('body').hasClass(ClassName.collapsed);
if (windowWidth <= this.options.collapseScreenSize) {
isOpen = $('body').hasClass(ClassName.open);
}
if (!isOpen) {
this.open();
} else {
this.close();
}
};
PushMenu.prototype.open = function () {
var windowWidth = $(window).width();
if (windowWidth > this.options.collapseScreenSize) {
$('body').removeClass(ClassName.collapsed)
.trigger($.Event(Event.expanded));
}
else {
$('body').addClass(ClassName.open)
.trigger($.Event(Event.expanded));
}
};
PushMenu.prototype.close = function () {
var windowWidth = $(window).width();
if (windowWidth > this.options.collapseScreenSize) {
$('body').addClass(ClassName.collapsed)
.trigger($.Event(Event.collapsed));
} else {
$('body').removeClass(ClassName.open + ' ' + ClassName.collapsed)
.trigger($.Event(Event.collapsed));
}
};
PushMenu.prototype.expandOnHover = function () {
$(Selector.mainSidebar).hover(function () {
if ($('body').is(Selector.mini + Selector.collapsed)
&& $(window).width() > this.options.collapseScreenSize) {
this.expand();
}
}.bind(this), function () {
if ($('body').is(Selector.expanded)) {
this.collapse();
}
}.bind(this));
};
PushMenu.prototype.expand = function () {
setTimeout(function () {
$('body').removeClass(ClassName.collapsed)
.addClass(ClassName.expanded);
}, this.options.expandTransitionDelay);
};
PushMenu.prototype.collapse = function () {
setTimeout(function () {
$('body').removeClass(ClassName.expanded)
.addClass(ClassName.collapsed);
}, this.options.expandTransitionDelay);
};
// PushMenu Plugin Definition
// ==========================
function Plugin(option) {
return this.each(function () {
var $this = $(this);
var data = $this.data(DataKey);
if (!data) {
var options = $.extend({}, Default, $this.data(), typeof option == 'object' && option);
$this.data(DataKey, (data = new PushMenu(options)));
}
if (option === 'toggle') data.toggle();
});
}
var old = $.fn.pushMenu;
$.fn.pushMenu = Plugin;
$.fn.pushMenu.Constructor = PushMenu;
// No Conflict Mode
// ================
$.fn.pushMenu.noConflict = function () {
$.fn.pushMenu = old;
return this;
};
// Data API
// ========
$(document).on('click', Selector.button, function (e) {
e.preventDefault();
Plugin.call($(this), 'toggle');
});
$(window).on('load', function () {
Plugin.call($(Selector.button));
});
}(jQuery);

How can I combine scrolling effect and mousemove

I have managed to do a scrolling effect as you can see in this link here.
On another link(see here) I have another animation that happens on mouse move.
On top of my scrolling effect, I want the first image to have the mouse move effect.
How can I combine that?
I am seeing it quite challenging because the styling for both are completely different. In one template I work actual images in the froont-end but in the other one I work with image background.
JS:
var zoom_value = 1;
var boxFullHeight = $('header').height();
var boxHalfHeight = $('header').height() / 2;
var domHeight = $('html').scrollTop();
//scrollController will check the value when scrolling up or down
var scrollController = 0;
//max number that the scroll happens before images change
var max_scrollController = 4;
//this will enable/disable the scrollbar after a certain period
var controller = 0;
$(window).on('wheel', function(e) {
var delta = e.originalEvent.deltaY;
function add_styling(zoom_value){
$("#firstbox img").css({
"font-size": zoom_value +"px",
"transform": "scale(" + zoom_value + ")",
"transition": "all .9s"
});
}
if (delta > 0 && controller < 10){
controller++;
zoom_value = zoom_value + 0.1;
scrollController++;
add_styling(zoom_value);
if(scrollController >= max_scrollController){
$('.img2').addClass('hide_image');
}
return false;
}
else if(delta < 0) {
if (zoom_value > 1) {
controller--;
zoom_value = zoom_value - 0.1;
scrollController--;
add_styling(zoom_value);
if(scrollController < max_scrollController){
$('.img2').removeClass('hide_image');
}
}
else{
zoom_value = 1;
add_styling(zoom_value);
}
}
});
CSS:
html,body,header, #header_box, .image_box, img {
height: 100%;
}
#firstbox{
background: red;
width: 100%;
}
#second_box{
background: blue;
}
#third_box{
background: black;
}
.general{
width: 100%;
height: 100%;
}
header {
position: relative;
overflow: hidden;
}
.image_box{
position: absolute;
width: 100%;
}
img{
width: 100%;
}
.hide_image {
visibility: hidden;
}
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="firstbox" class="general">
<header>
<div id="header_box">
<div class="image_box">
<img class="img1" src="https://cdn.pixabay.com/photo/2017/03/07/13/38/landscape-2124022_960_720.jpg" alt="image here">
</div>
<div class="image_box box2">
<img class="img2" src="https://cdn.pixabay.com/photo/2017/06/05/20/10/blue-2375119_960_720.jpg" alt="image here">
</div>
</div>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ut accusamus non error laboriosam in commodi ad, sint, neque voluptates deserunt magnam minima nulla officia nobis fugit enim optio assumenda.</p>
</div>
<div id="second_box" class="general">
</div>
<div id="third_box" class="general">
</div>
</body>

Just add this to your javascript:
$('.box2').on('mousemove', function(e){
var x = e.originalEvent.x,
y = e.originalEvent.y,
w = this.offsetWidth,
h = this.offsetHeight,
targetX = w / 2 - x,
targetY = h / 2 - y;
$(this).css({
'transform': 'scale(1.2) translate(' + targetX/10 +'px, ' + targetY/10 +'px)'
});
});

Change Element Height as compared to Width in HTML/CSS

The width of the element changes as I type text between its tags. My question that I want some kind of relation of Width with Height. As the width gets longer, the height increases by the same but I don't want the height to exceed 35px nor start with below 5px.
The code I tried:
HTML:
<div class="btn bg-red">This buttons width expands as I write more and more text.</div>
CSS:
.btn {
padding-left: 10px;
padding-right: 10px;
display: inline-block !important;
border-radius: 6px;
color: #ffffff;
padding-top: 10px;
padding-bottom: 10px;
height: relative;
}
.bg-red{background-color:#F55C58;}
.bg-red:hover{background-color:#F44946}
I'm not sure if it is possible in CSS to do this.
Then I tried this:
HTML:
<div class="btn bg-red"><div class="auto">This buttons width expands as I write more and more text.</div></div>
CSS:
.btn {
padding-left: 10px;
padding-right: 10px;
display: inline-block !important;
border-radius: 6px;
color: #ffffff;
padding-top: 10px;
padding-bottom: 10px;
}
.auto {
height: 20%
}
.bg-red{background-color:#F55C58;}
.bg-red:hover{background-color:#F44946}
Javascript:
var cw = $('.auto').width();
$('.auto').css({'height':cw+'px'});
The second code doesn't seem to follow display:inline. It works when you change the code manually.
Find demo for First code here.
Find demo for Second code here.
Edit:
Understood Meaning: When the button/element has less text, the width is small and the same way, the height should act same but 20% less pixels. When the text is increased, the width increases and the height should also increase. The max length of Height can reach up to 35px but the Width is Infinite by default.

I don't know how do you add text on your div. Anyway, on the following snippets the eventlistener trigger is set to input since it's a contenteditable div (the text is added by the user throught keyboard).
Snippet #1:
document.getElementsByTagName("body")[0].onload=function(){equalize()};
var target = document.getElementById("target");
target.addEventListener("input", equalize);
function equalize() {
var x = target.offsetWidth;
target.style.height = x + "px";
}
#target {
display: inline-block;
background: skyblue;
}
<div id=target contenteditable="true">write here</div>
This second snippet is the same as the previous one, but now the height is 20% smaller than the width (it was equal on the previous example) plus have a max-height limit of 100px.
Snippet #2:
var target = document.getElementById("target");
document.getElementsByTagName("body")[0].onload=function(){equalize()};
target.addEventListener("input", equalize);
function equalize() {
var x = target.offsetWidth;
var reducedpart = x / 100 * 20;
var result = x - reducedpart;
if (result > 100) {
var result = 100;
}
target.style.height = result + "px";
}
#target {
display: inline-block;
background: skyblue;
}
<div id=target contenteditable="true">write here</div>
Same as before but using padding instead of height to let the text on center:
Snippet #3:
var target = document.getElementById("target");
document.getElementsByTagName("body")[0].onload=function(){equalize()};
target.addEventListener("input", equalize);
function equalize() {
var x = target.offsetWidth;
var reducedpart = x / 100 * 20;
var result = x - reducedpart;
if (result > 100) {
var result = 100;
}
var secresult = result / 2;
target.style.paddingTop = secresult + "px";
target.style.paddingBottom = secresult + "px";
}
#target {
display: inline-block;
background: skyblue;
padding-left: 15px;
padding-right: 15px;
}
<div id=target contenteditable="true">write here</div>
CSS-only workaround using padding instead of height:
Snippet #4:
.container {
vertical-align: bottom;
display: inline-block;
}
#a {
width: 100%;
padding-bottom: calc(80% - 1em);
background: gold;
}
#b {
width: 100%;
padding-top: calc(40% - 0.5em);
padding-bottom: calc(40% - 0.5em);
background: tomato;
}
<div class=container><div id=a contenteditable="true">write here</div></div>
<div class=container><div id=b contenteditable="true">write here</div></div>

In jquery there's a function .height() that get the current computed height for the html element in the given ID or Class. Getting the height value of your div.auto you can monitor the height increase. Given that, you can make a condition if ($('.auto').height() <= 35px) that limit it up to 35px .
Put this <script type="text/javascript" src="jquery-1.12.2.js"></script> in your <head> and that you have the latest JQuery library.
Here's the full implementation of code. Try it in your localhost, because sometimes it doesn't work on jsfiddle or likewise.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.btn {
padding-left: 10px;
padding-right: 10px;
display: inline-block !important;
border-radius: 6px;
color: #ffffff;
padding-top: 10px;
padding-bottom: 10px;
}
.auto {
height: 20%
}
.bg-red{background-color:#F55C58;}
.bg-red:hover{background-color:#F44946}
</style>
<script type="text/javascript" src="jquery-1.12.2.js"></script>
</head>
<body>
<div class="btn bg-red"><div class="auto">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div>
<script type="text/javascript">
var cw = $('.auto').width();
if ($('.auto').height() <= 35px) {
$('.auto').css({'height':cw+'px'});
}
</script>
</body>
</html>
Hope this will help

jQuery - 2 level slider return to level 1 with click

I have modified this jsFiddle http://jsfiddle.net/tV9z9/23/ to work like this jsFiddle http://jsfiddle.net/warmwhisky/N68wX/13/
When the script is first run I call this Level 1. Then you click one of the thumbnails and you move to level 2. I would like to return to the run state (Level 1) with a click. Maybe a close button or a return to first run state?
I have tried using an onclick with js but I cannot make it work.
Should I be using an onlick or can I save a state of the jquery and return to it?
Here is the code
JS...
$(function() {
var content = $('#content'),
services_level2 = $('#services_level2'),
contentHeight = content.height(),
contentWidth = content.width(),
level2Width = services_level2.width(),
nav = $('#nav'),
count = 0;
// on load content height is shorter
content.width(0);
services_level2.width(613);
nav.find('a').on('click', function() {
var $this = $(this),
parent = $this.parent(),
targetElement = $this.attr('href');
//Does the slide animation once
if (count === 0) {
//Slide out and fade away the main copy
services_level2.animate({'width': services_level2 }, function() {
$(services_level2).animate({
'margin-left': '300%',
opacity: 0
}, 900);
});
content.animate({'width': contentWidth }, function() {
parent.addClass('active');
//animate in
$(targetElement).animate({
left: '-=210px',
'margin-left': '30%',
opacity: 1
}, 400);
});
count = 1;
} else {
//only add active class if parent does not have it and then animate it
if ( !parent.hasClass('active') ) {
parent.addClass('active');
//animate in
$(targetElement).animate({
left: '-=210px',
'margin-left': '30%',
opacity: 1
}, 500);
//Gets older clicked element
var oldClickedElement = $('.active').not(parent).removeClass('active').find('a').attr('href');
//only if old click element exists the do the animation
if (oldClickedElement) {
//animate out + reset to start
$(oldClickedElement).animate({
left: 0,
'margin-left': '-50%',
opacity: 0
}, 500, function() {
$(oldClickedElement).css({
'margin-left' : '100%',
left: 0
});
});
}
}
}
return false;
});
});
HTML...
<div id="container">
<div id="services_level2">
<h1>IT Services</h1>
<p>Lorem ipsum dolor sit amet, et mel falli simul platonem, cu consul utroque neglegentur duo. Omnis soluta periculis eu sit.
</p>
<h1>Repairs</h1>
<p>
Sit te habeo neglegentur, nam no dicit intellegat. Epicuri blandit sea eu, eum nibh adhuc mundi eu.
</p>
<h1>Other</h1>
<p>
Pri nihil scaevola salutatus id, esse minimum vis ne. Verear corrumpit vim ex, vim tollit scaevola ea.
</p>
</div>
<div id="content">
<!--<div id="zero"><p>Zero</p></div>-->
<div id="one"><h1>Objective</h1><p>Lorem ipsum dolor sit amet, et mel falli simul platonem, cu consul utroque neglegentur duo.</p><h1>Delivery</h1><p>Sit te habeo neglegentur, nam no dicit intellegat. </p><h1>Performance</h1><p>Pri nihil scaevola salutatus id, esse minimum vis ne. Verear corrumpit vim ex, vim tollit scaevola ea, est id suas delectus deseruisse.</p></div>
<div id="two"><p>Two</p></div>
<div id="three"><p>Three</p></div>
<div id="four"><p>Four</p></div>
<div id="five"><p>Five</p></div>
<div id="six"><p>Six</p></div>
</div>
<ul id="nav">
<!--<li><img src="http://dev3.stellaworld.co.uk/public_html/development/ssl/website/level3/itservices/images/0.jpg">
</li>-->
<li><img src="http://dev3.stellaworld.co.uk/public_html/development/ssl/website/level3/itservices/images/1.jpg">
</li>
<li><img src="http://dev3.stellaworld.co.uk/public_html/development/ssl/website/level3/itservices/images/2.jpg">
</li>
<li><img src="http://dev3.stellaworld.co.uk/public_html/development/ssl/website/level3/itservices/images/3.jpg">
</li>
<li><img src="http://dev3.stellaworld.co.uk/public_html/development/ssl/website/level3/itservices/images/4.jpg">
</li>
<li><img src="http://dev3.stellaworld.co.uk/public_html/development/ssl/website/level3/itservices/images/5.jpg">
</li>
<li><img src="http://dev3.stellaworld.co.uk/public_html/development/ssl/website/level3/itservices/images/6.jpg">
</li>
</ul>
</div>
CSS...
#container {
height:390px;
overflow:hidden;
float:left;
background: #ccc no-repeat;
min-width:918px;
padding: 10px 10px 10px 10px;
}
#services_level2 {
position:fixed;
background:white;
padding:20px;
height: 345px;
}
#content {
width: 650px;
height: 385px;
position: relative;
overflow: hidden;
float: right;
}
#content > div {
display:block;
width:600px;
height:385px;
background:white;
position:absolute;
margin-left:100%;
/*left:-200px;*/
opacity: 0;
padding:10px 20px 0 40px;
}
#nav {
list-style: none;
display: table;
margin: 0px 0 0 0;
position: relative;
width: 260px;
float:right;
}
#nav li {
/* width: 100px; */
/* height: 100px; */
float: left;
margin-right:5px;
/*border: 1px solid black;*/
}
#nav a {
color:#fff;
text-decoration:none;
width:100%;
height:100%;
}
ul {
padding:0;
}
li.active {
opacity:0.4;
filter:alpha(opacity=40);
}

You need to comb your code and make a list off all the values that change on the first click, then when #reset is clicked reverse each value. -=200px will become +=200px and so on.

I found a solution to this (JSFiddle) by adding a button and assigning a click function to it which has 3 actions:
Slide out and fade level2 copy. This forces the thumbnails to move
slide in and fade in level1 copy
deletes the active thumbnail class
Button Code:
$('#moveleft').click(function() {
count = 0;
// Slide Level 2 description back into view
$('#services_level2').animate({
'margin-left': '0%',
'opacity' : "1"
}, 800);
// Slide Level 3 out of view. The thumbnails follow Level 3.
$(level3_content).animate({
'width': '0px',
opacity: 1
}, 400);
// Delete the active class
var oldClickedElement = $('.active').removeClass('active').find('a').attr('href');
console.log(oldClickedElement);
//only if old click element exists the do the animation
if (oldClickedElement) {
//animate out + reset to start
$(oldClickedElement).animate({
left: 0,
'margin-left': '-50%',
opacity: 0
}, 500, function() {
$(oldClickedElement).css({
'margin-left' : '100%',
left: 0
});
});
}
});
Here is the JSFiddle http://jsfiddle.net/warmwhisky/N68wX/24/
It is rather a nice slider with two levels. Unfortunately it is not responsive yet.