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)'
});
});
Related
container = document.querySelector('.itemContainer');
for(i = 0; i < 30; i++){
container.innerHTML += '<div class="item"></div>';
if((i % 5) == 0){
document.querySelectorAll('.item')[i].style.setProperty("--width", 4+"px");
}
document.querySelectorAll('.item')[i].style.transform = "rotate(" + i * 6 + "deg)";
}
* {
margin : 0;
padding: : 0;
box-sizing : border-box;
}
body {
width : 100%;
height : 100vh;
display : flex;
justify-content : center;
align-items : center;
}
.mainContainer {
position : relative;
width : 440px;
height : 200px;
display : flex;
justify-content : center;
align-items : center;
justify-content : space-around;
border-radius : 5px;
border : 1px solid black;
background-color : silver;
}
.itemContainer{
position : relative;
width : 130px;
height : 130px;
display : flex;
justify-content : center;
align-items : center;
border-radius : 50%;
}
.item {
position : absolute;
width :2px;
height :100%;
display : flex;
justify-content : center;
}
.item::before {
top : 0px;
content : '';
position : absolute;
background : var(--background, black);
width : var(--width, 2px);
height : 10px;
text-align : center;
}
.item::after {
bottom : 0px;
content : '';
position : absolute;
background : var(--background, black);
width : var(--width, 2px);
height : 10px;
}
<div class="mainContainer">
<div class="itemContainer">H</div>
<div class="itemContainer">M</div>
<div class="itemContainer">S</div>
</div>
I want to use my "Clock Dial" drawn with JS in different Divs.
Couldn't multiply it. I'm confused. Thanks for all efforts to help.
Each div will show the parts of a clock: Hour, Minute, Second.
Thanks for any efforts to help. Hope the code is clear enough.
I have pasted "lorem" text below to send my question? ! :)
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa eum enim optio ut quisquam? Iusto, iure veniam alias, ducimus reprehenderit laboriosam eum aut molestiae dolor esse saepe facilis dolore consequatur autem quaerat illum inventore quia sint libero nesciunt!
You have to create a function and reuse the code like this
Update HTML with:
<div class="mainContainer">
<div id="h" class="itemContainer">H</div>
<div id="m" class="itemContainer">M</div>
<div id="s" class="itemContainer">S</div>
</div>
JS:
function makeCircle(circle) {
container = document.querySelector('#'+circle);
for(i = 0; i < 30; i++){
container.innerHTML += '<div class="item '+circle+' "></div>';
if((i % 5) == 0){
document.querySelectorAll('.item.'+circle)[i].style.setProperty("--width", 4+"px");
}
document.querySelectorAll('.item.'+circle)[i].style.transform = "rotate(" + i * 6 + "deg)";
}
}
makeCircle('h');
makeCircle('m');
makeCircle('s');
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;
});
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);
I have multiple Bezier curves that run from top to bottom and sway a little bit! As can be seen in this CodePen, the curves seem to animate as they are supposed to but are not drawn as I expected them to. If I increase the size of the canvas that seems to stretch the Beziers so that after a certain height it looks fine but I can't understand by the curves are all crumpled up on a small canvas height, as they are in this example.
below is my code:
function milestoneLines() {
//get all canvases from the DOM
const canvas = document.querySelectorAll('canvas');
console.log(canvas);
//loop through array of canvases
canvas.forEach(makeCanvas);
function makeCanvas(canvas, index) {
// get canvas width/height
canvas.width = $(".main").eq(index).width();
canvas.height = $(".main").eq(index).height();
//getting the height of all milestones
let milestoneHeight = $(".main").eq(index)
.find('.info_wrapper');
let totalMilestoneHeight = 0;
milestoneHeight.each(function() {
totalMilestoneHeight += $(this).outerHeight();
});
const c = canvas.getContext('2d');
let milestoneHalfHeight = totalMilestoneHeight / 2;
let milestoneQuarterHeight = totalMilestoneHeight / 4;
let milestoneHalfWidth = canvas.width / 2;
let bezEndY = $('.main').eq(index).offset().top +
$('.main').eq(index).outerHeight();
let bezStartY = $('.main').eq(index)
.find(".dot").eq(0).offset().top;
// Bezier Curve points
let bezStart = {
x: milestoneHalfWidth,
y: bezStartY
};
let bezCp1 = {
x: milestoneHalfWidth - 35,
y: milestoneHalfHeight
};
let bezCp2 = {
x: milestoneHalfWidth,
y: milestoneHalfHeight + milestoneQuarterHeight
};
let bezEnd = {
x: milestoneHalfWidth,
y: bezEndY
};
//Line 1
//dx = xvelocity
let dx1Line1 = .6;
let dx2Line1 = .6;
let bezCp1Line1x = bezCp1.x;
let bezCp2Line1x = bezCp2.x;
//Line 2
//dx = xvelocity
let dx1Line2 = .8;
let dx2Line2 = .8;
let bezCp1Line2x = bezCp1.x;
let bezCp2Line2x = bezCp2.x;
//Line 3
//dx = xvelocity
let dx1Line3 = 1;
let dx2Line3 = 1;
let bezCp1Line3x = bezCp1.x;
let bezCp2Line3x = bezCp2.x;
//Line 4
//dx = xvelocity
let dx1Line4 = .9;
let dx2Line4 = .9;
let bezCp1Line4x = bezCp1.x;
let bezCp2Line4x = bezCp2.x;
function bezCurve() {
c.clearRect(0, 0, canvas.width, canvas.height);
//different start positions for the bezier curves
let bufferX = 120;
let bufferY = 120;
let bufferStartY = 80;
for (var i = 0; i < 4; i++) {
c.beginPath();
if (i == 0) {
c.moveTo(bezStart.x, bezStart.y + bufferStartY);
c.bezierCurveTo(bezCp1Line1x - bufferX, bezCp1.y - bufferY, bezCp2Line1x + bufferX, bezCp2.y - bufferY, bezEnd.x, bezEnd.y);
if (bezCp1Line1x > (bezCp1.x + 280) || bezCp1Line1x < bezCp1.x) {
dx1Line1 = -dx1Line1;
}
if (bezCp2Line1x < (bezCp2.x - 280) || bezCp2Line1x > bezCp2.x) {
dx2Line1 = -dx2Line1;
}
bezCp1Line1x -= dx1Line1;
bezCp2Line1x += dx2Line1;
c.strokeStyle = "red";
}
if (i == 2) {
c.moveTo(bezStart.x, bezStart.y + bufferStartY);
c.bezierCurveTo(bezCp1Line3x + bufferX, bezCp1.y + bufferY, bezCp2Line3x - bufferX, bezCp2.y + bufferY, bezEnd.x, bezEnd.y);
if (bezCp1Line3x < (bezCp1.x - 320) || bezCp1Line3x > bezCp1.x) {
dx1Line3 = -dx1Line3;
}
if (bezCp2Line3x > (bezCp2.x + 320) || bezCp2Line3x < bezCp2.x) {
dx2Line3 = -dx2Line3;
}
bezCp1Line3x -= dx1Line3;
bezCp2Line3x += dx2Line3;
c.strokeStyle = "green";
}
if (i == 1) {
c.moveTo(bezStart.x, bezStart.y + bufferStartY);
c.bezierCurveTo(bezCp1Line2x + bufferX, bezCp1.y + bufferY, bezCp2Line2x - bufferX, bezCp2.y + bufferY, bezEnd.x, bezEnd.y);
if (bezCp1Line2x < (bezCp1.x - 350) || bezCp1Line2x > bezCp1.x) {
dx1Line2 = -dx1Line2;
}
if (bezCp2Line2x > (bezCp2.x + 350) || bezCp2Line2x < bezCp2.x) {
dx2Line2 = -dx2Line2;
}
bezCp1Line2x -= dx1Line2;
bezCp2Line2x += dx2Line2;
c.strokeStyle = "blue";
}
if (i == 3) {
c.moveTo(bezStart.x, bezStart.y + bufferStartY);
c.bezierCurveTo(bezCp1Line4x - bufferX, bezCp1.y - bufferY, bezCp2Line4x + bufferX, bezCp2.y - bufferY, bezEnd.x, bezEnd.y);
if (bezCp1Line4x > (bezCp1.x + 320) || bezCp1Line4x < bezCp1.x) {
dx1Line4 = -dx1Line4;
}
if (bezCp2Line4x < (bezCp2.x - 320) || bezCp2Line4x > bezCp2.x) {
dx2Line4 = -dx2Line4;
}
bezCp1Line4x -= dx1Line4;
bezCp2Line4x += dx2Line4;
c.strokeStyle = "grey";
}
c.lineWidth = 6;
//c.strokeStyle = "#FCE6DF";
c.stroke();
bufferX = bufferX - 30;
bufferY = bufferY - 30;
bufferStartY = bufferStartY - 20;
}
requestAnimationFrame(bezCurve);
}
bezCurve();
}
}
$(document).ready(milestoneLines);
#milestone_canvas {
position: absolute;
}
.main {
background-color: wheat;
}
.info_wrapper {
margin-top: 70px;
margin-bottom: 50px;
border: solid 2px;
}
.container {
height: 50%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.dot {
width: 30px;
height: 30px;
border-radius: 20px;
background-color: maroon;
border: solid 4px green;
z-index: 100;
}
.header {
width: 100%;
height: 50px;
background-color: lightblue;
}
.text {
float: left;
position: absolute;
max-width: 500px;
}
<div class="main">
<canvas id="milestone_canvas"> </canvas>
<div class="header"></div>
<div class="container">
<div class="info_wrapper">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="dot "></div>
</div>
<div class="info_wrapper">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="dot "></div>
</div>
</div>
</div>
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.