I'm trying to build a responsive menu, with a hamburger icon. I want the menu list to slide in and out, no jquery - pure javascript only.
HTML :
<div id="animation">
</div>
<button id="toggle">Toggle</button>
CSS :
div {
width: 300px;
height: 300px;
background-color: blue;
}
Javascript :
var but = document.getElementById('toggle');
var div = document.getElementById('animation');
var animate = function(type, callback){
var inter = -1, start = 100, end = 0;
if(type==true){
inter = 1;
start = 0;
end = 100;
}
var si = setInterval(function(){
console.log('maxheight');
div.style.maxHeight = (start + inter) + '%';
if(start == end){
clearInterval(si);
}
}, 10);
}
var hidden = false;
but.onclick = function(){
animate(hidden, function(){
hidden = (hidden == false) ? true : false;
});
}
div.style.maxHeight = "50%";
The problem is that proportional height in an element needs a fixed height on the parent, and you didn't provided any parent with a fixed height because for the maxHeight property too the % Defines the maximum height in % of the parent element.
You have to put your div in a parent container with a fixed height, this is your working code:
var but = document.getElementById('toggle');
var div = document.getElementById('animation');
var animate = function(type, callback) {
var inter = -1,
start = 100,
end = 0;
if (type) {
inter = 1;
start = 0;
end = 100;
}
var si = setInterval(function() {
console.log('maxheight');
div.style.maxHeight = (start + inter) + '%';
if (start == end) {
clearInterval(si);
}
}, 10);
}
var hidden = false;
but.onclick = function() {
animate(hidden, function() {
hidden = !hidden ;
});
}
div.style.maxHeight = "50%";
#animation {
width: 300px;
height: 300px;
background-color: blue;
}
#parent {
width: 500px;
height: 500px;
}
<div id="parent">
<div id="animation">
</div>
<button id="toggle">Toggle</button>
</div>
Note:
As stated in comments there are some statements in your JavaScript code that need to be adjusted:
if(type==true) can be written as if(type).
hidden = (hidden == false) ? true : false; can be shortened to hidden = !hidden
There seems to be a few errors with your code. I have fixed the js and added comments to what I have changed
var but = document.getElementById('toggle');
var div = document.getElementById('animation');
var animate = function (type, callback) {
var start = 100,
end = 0;
if (type) {
start = 0;
end = 100;
}
var si = setInterval(function () {
if (type) { // check whether to open or close animation
start++;
} else {
start--
}
div.style.maxHeight = start + '%';
if (start == end) {
clearInterval(si);
}
}, 10);
callback.call(this); // do the callback function
}
var hidden = false;
but.onclick = function () {
animate(hidden, function () {
hidden = !hidden; // set hidden to opposite
});
}
/*make sure parent container has a height set or max height won't work*/
html, body {
height:100%;
margin:0;
padding:0;
}
div {
width: 300px;
height: 300px;
background-color: blue;
}
<div id="animation"></div>
<button id="toggle">Toggle</button>
Example Fiddle
Related
Heyo,
I got a little Fullpage-Scroll-Script and I want to make it a bit less static. So instead of calling every single Div by a different Class (.one, .two, .tree...) I want to make the script work if all Divs have only one Class (.page). I tried it myself with the .each() function from jQuery ... but I couldn't get it to work.
Here is the current Script:
// Fullpage Scroll Script
function ScrollHandler(pageClass) {
var page = $('.' + pageClass);
var pageStart = page.offset().top;
var pageJump = false;
function scrollToPage() {
pageJump = true;
$('html, body').animate({
scrollTop: pageStart
}, {
duration: 1000,
easing:'swing',
complete: function() {
pageJump = false;
}
});
}
window.addEventListener('wheel', function(event) {
var viewStart = $(window).scrollTop();
if (!pageJump) {
var pageHeight = page.height();
var pageStopPortion = pageHeight / 2;
var viewHeight = $(window).height();
var viewEnd = viewStart + viewHeight;
var pageStartPart = viewEnd - pageStart;
var pageEndPart = (pageStart + pageHeight) - viewStart;
var canJumpDown = pageStartPart >= 0;
var stopJumpDown = pageStartPart > pageStopPortion;
var canJumpUp = pageEndPart >= 0;
var stopJumpUp = pageEndPart > pageStopPortion;
var scrollingForward = event.deltaY > 0;
if ( ( scrollingForward && canJumpDown && !stopJumpDown) || (!scrollingForward && canJumpUp && !stopJumpUp)) {
event.preventDefault();
scrollToPage();
}
} else {
event.preventDefault();
}
});
}
new ScrollHandler('one');
new ScrollHandler('two');
new ScrollHandler('three');
* {
margin:0;
padding:0;
}
.page {
height: 100vh;
}
.one { background-color: blue; }
.two { background-color: green; }
.three { background-color: orange; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page one"></div>
<div class="page two"></div>
<div class="page three"></div>
So instead of using:
new ScrollHandler('one');
new ScrollHandler('two');
new ScrollHandler('three');
I tried to use this:
$('.page').each(function() {
new ScrollHandler('page');
}
But it only worked for the first Div.
You need to pass $(this) in each loop and change the page variable to get directly the parameter :
// Fullpage Scroll Script
function ScrollHandler(pageClass) {
var page = pageClass;
var pageStart = page.offset().top;
var pageJump = false;
function scrollToPage() {
pageJump = true;
$('html, body').animate({
scrollTop: pageStart
}, {
duration: 1000,
easing: 'swing',
complete: function() {
pageJump = false;
}
});
}
window.addEventListener('wheel', function(event) {
var viewStart = $(window).scrollTop();
if (!pageJump) {
var pageHeight = page.height();
var pageStopPortion = pageHeight / 2;
var viewHeight = $(window).height();
var viewEnd = viewStart + viewHeight;
var pageStartPart = viewEnd - pageStart;
var pageEndPart = (pageStart + pageHeight) - viewStart;
var canJumpDown = pageStartPart >= 0;
var stopJumpDown = pageStartPart > pageStopPortion;
var canJumpUp = pageEndPart >= 0;
var stopJumpUp = pageEndPart > pageStopPortion;
var scrollingForward = event.deltaY > 0;
if ((scrollingForward && canJumpDown && !stopJumpDown) || (!scrollingForward && canJumpUp && !stopJumpUp)) {
event.preventDefault();
scrollToPage();
}
} else {
event.preventDefault();
}
});
}
$('.page').each(function() {
new ScrollHandler($(this));
})
* {
margin: 0;
padding: 0;
}
.page {
height: 100vh;
}
.one {
background-color: blue;
}
.two {
background-color: green;
}
.three {
background-color: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page one"></div>
<div class="page two"></div>
<div class="page three"></div>
JSfiddle: https://jsfiddle.net/fw8h7v4q/
can u help me to adjust my code to make infinite slider? I tried on my own but when I changed conditions I got the problem with proper working.. just want to make it go from the last slide to first when the limit of slides is reached.. this is my code in JS
var nextBtn = $('.next_btn');
var prevBtn = $('.prev_btn');
var allSlides = $('.slide');
var indexSlide = 0;
$(allSlides[indexSlide]).addClass('visible');
nextBtn.on('click', function(){
if (indexSlide >= allSlides.length - 1) {
indexSlide = allSlides.length - 1;
} else {
$(allSlides[indexSlide]).removeClass('visible');
indexSlide++;
$(allSlides[indexSlide]).addClass('visible');
}
})
prevBtn.on('click', function(){
if (indexSlide <=0) {
indexSlide = 0;
} else {
$(allSlides[indexSlide]).removeClass('visible');
indexSlide--;
$(allSlides[indexSlide]).addClass('visible');
}
})
hide slide,
increment/decrement index
check whether it's in range (otherwise set proper value)
show new slide
var nextBtn = $('.next_btn');
var prevBtn = $('.prev_btn');
var allSlides = $('.slide');
var indexSlide = 0;
var lastIndex = allSlides.length - 1;
$(allSlides[indexSlide]).addClass('visible');
nextBtn.on('click', function() {
$(allSlides[indexSlide]).removeClass('visible');
indexSlide++;
if (indexSlide > lastIndex) {
indexSlide = 0;
}
$(allSlides[indexSlide]).addClass('visible');
})
prevBtn.on('click', function() {
$(allSlides[indexSlide]).removeClass('visible');
indexSlide--;
if (indexSlide < 0) {
indexSlide = lastIndex;
}
$(allSlides[indexSlide]).addClass('visible');
})
.slide {
display: none;
}
.slide.visible {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="prev_btn">Prev</button>
<button class="next_btn">Next</button>
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
I hope you understand my problem.
At the moment I have a JS-function that choses randomly a div of a specific Html-Class.
Now i would like to rewrite the function that it picks one div after the other, just like they are ordered in the HTML-content.
How can I do this?
For information: the random selection is made with jquery and looks like this:
function pickrandom() {
var elems = $(".classname");
if (elems.length) {
var keep = Math.floor(Math.random() * elems.length);
console.log(keep);
$(elems[keep]).click();
}
}
Thanks
$(document).on('click', '.classname', function(){
var self = $(this);
var total_items = $('.classname').length; // 10
var index = self.index(); //2 for 3rd element
if (index < total_items) {
setTimeout(function () {
$('.classname').eq(index+1).trigger('click');
}, 3000);
}
});
this will call the next clicks in 3 sec interval
i don't know why you are using a randomizer function.you can allow the user to make that click
Hopefully this helps you - can't see your markup, but it should get you on the right track. I've also changed your .click() to a .trigger('click') which should be quite a bit more dependable.
JavaScript
function pickrandom() {
var elems = $(".classname");
if (elems.length) {
var curTarget = Math.floor(Math.random() * elems.length);
console.log(curTarget);
$(elems[curTarget]).trigger('click');
// Find index of our next target - if we've reached
// the end, go back to beginning
var nextTarget = curTarget + 1;
if( nextTarget > elems.length ) {
nextTarget = 0;
}
// Wait 3 seconds and click the next div
setTimeout( function() { $(elems[nextTarget]).trigger('click'); }, 3000 );
}
}
$("div").click(function() {
var el = $(this);
setTimeout(function() {
console.log(el.text());
el.toggleClass("click");
}, 2000);
});
var random = Math.floor((Math.random() * $("div").length) + 1);
var index = random - 1;
console.log("Random number: ", random);
var clicker = setInterval(function() {
if (index === $("div").length) {
clearInterval(clicker);
console.log("cleared interval");
} else {
$("div").eq(index).click();
index++;
}
}, 2000)
div {
height: 50px;
width: 100%;
border: 2px solid black;
background-color: lightgreen;
margin-bottom: 10px;
text-align: center;
font-size: 30px;
}
.click {
background-color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
Div 1
</div>
<div>
Div 2
</div>
<div>
Div 3
</div>
<div>
Div 4
</div>
<div>
Div 5
</div>
<div>
Div 6
</div>
I went of Ext's QuickTips to make this custom tooltip, that should show a tooltip when over an element with a 'my_tip' attribute.
For example,
<div class="some class" my_tip="This is my tip text">
When the page is loaded, it adds the following markup to the HTML, which is correct:
<div class="x-layer my_tool_tip_layer" id="ext-gen7" style="position: absolute; z-index: 20000; visibility: hidden; left: -10000px; top: -10000px;">
<div class="my_tool_tip" id="ext-gen8"> </div>
</div>
What should happen is when I hover the mouse over the element with the 'my_tip' attribute, it should update the above div's style attribute and replace   with the contents of the my_tip class.
Like this:
<div class="x-layer my_tool_tip_layer displayed" id="ext-gen7" style="position: absolute; z-index: 20000; visibility: visible; left: 160px; top: 30px;">
<div class="my_tool_tip" id="ext-gen8">This is my tip text</div>
</div>
I have a css file handling the styling of the tooltip, but my problem now is just getting the html to update to the correct events, which it is not doing.
Below is the javascript for the tooltip. Any help would be very much appreciated.
Thank you
myToolTips=function()
{
var mytt_ext_lyr=null;
var mytt_text_el=null;
var mytt_visible=false;
var mytt_hide_proc=null;
var mytt_show_proc=null;
var mytt_tip_text='';
var mytt_hide_delay = 10000;
var mytt_show_delay = 200;
var mytt_started = false;
var mytt_last_xy = null;
var mytt_mouse_y_offset = 20;
var mytt_track_mouse = false;
var mytt_initialized = false;
var mytt_singleton = null;
var mytt_max_search_depth = 5;
var on_over = function(evt) {
var target = evt.target;
var depth = 0;
while (target && target.nodeType == 1 && !target.getAttribute('my_tip') && depth < mytt_max_search_depth) {
++depth;
target = target.parentNode;
}
if (!target || target.nodeType != 1 || !target.getAttribute('my_tip')) {
if (mytt_visible)
hide();
return;
}
var new_tip = target.getAttribute('my_tip');
if (new_tip != mytt_tip_text && mytt_visible)
hide();
if (target.getAttribute('clip_tip') && target.getAttribute('clip_tip') == 'true') {
for (var i = 0; i < target.childNodes.length; ++i) {
var child = target.childNodes[i];
if (child.scrollWidth <= child.offsetWidth) {
return;
} else {
break;
}
}
}
if (target.getAttribute('clip_tip') && target.getAttribute('clip_tip') == 'this_node') {
if (target.scrollWidth <= target.offsetWidth)
return;
}
var mouse_xy = evt.getXY();
var tip = {mouse_xy: mouse_xy, new_tip: new_tip, target: target}
mytt_show_proc = show.defer(mytt_show_delay, mytt_singleton, [tip]);
mytt_started = true;
};
var on_move = function (evt) {
if (mytt_visible) {
if (mytt_track_mouse) {
var mouse_xy = evt.getXY();
mouse_xy[1] += mytt_mouse_y_offset;
mytt_ext_lyr.setXY(mouse_xy);
}
}
else if (mytt_started)
mytt_last_xy = evt.getXY();
};
var on_out=function(evt) {
hide();
};
var on_click = function(evt) {
var target = evt.target;
var depth = 0;
while (target && target.nodeType == 1 && !target.getAttribute('my_tip') && depth < mytt_max_search_depth) {
++depth;
target = target.parentNode;
}
if (!target || target.nodeType != 1 || !target.getAttribute('my_tip'))
hide();
};
var show=function(mytt) {
var tip=mytt.new_tip;
var mouse_xy=mytt.mouse_xy;
if(mytt_last_xy)
mouse_xy=mytt_last_xy;
if(!mytt_visible) {
if(tip) {
mytt_tip_text=tip;
mytt_text_el.update(mytt_tip_text.replace(/\[\[/g,"<").replace(/\]\]/g,">"));
}
mytt_ext_lyr.show();
mytt_ext_lyr.addClass('displayed');
mytt_visible=true;
if(!mytt_hide_proc)
mytt_hide_proc=setTimeout(hide,mytt_hide_delay);
}
var db=Ext.get(document.body);
var dw=db.getWidth();
var dh=db.getHeight();
if (mytt.target.getAttribute('top_tip') === 'true') {
var telm = Ext.get(mytt.target);
var left = telm.getLeft();
var width_diff = db.getWidth() - (left + mytt_ext_lyr.getWidth());
if (width_diff < 5)
left+=width_diff-15;
mytt_ext_lyr.dom.style.right='';
mytt_ext_lyr.dom.style.top='';
mytt_ext_lyr.dom.style.left=left+'px';
mytt_ext_lyr.dom.style.bottom=(dh-telm.getTop())+'px';
mytt_ext_lyr.sync();
}
else {
mouse_xy[1]+=mytt_mouse_y_offset;
var width_diff=db.getWidth()-(mouse_xy[0]+mytt_ext_lyr.getWidth());
if(width_diff<5)
mouse_xy[0]+=width_diff-15;
mytt_ext_lyr.setXY(mouse_xy);
}
if(mytt_show_proc) {
clearTimeout(mytt_show_proc);
mytt_show_proc=null;
}
};
var hide=function() {
mytt_ext_lyr.hide();
mytt_ext_lyr.removeClass('displayed');
mytt_visible=false;
mytt_started=false;
mytt_last_xy=null;
if(mytt_hide_proc) {
clearTimeout(mytt_hide_proc);
mytt_hide_proc=null;
}
if(mytt_show_proc) {
clearTimeout(mytt_show_proc);
mytt_show_proc=null;
}
};
return {
init:function() {
mytt_singleton=myToolTips;
if(!mytt_initialized) {
if(!Ext.isReady) {
Ext.onReady(myToolTips.init,myToolTips);
return;
}
mytt_ext_lyr=new Ext.Layer({cls:'my_tool_tip_layer',shim:true,constrain:true});
mytt_ext_lyr.fxDefaults={stopFx:true};
mytt_ext_lyr.update('<div class="my_tool_tip"> </div>');
mytt_text_el=mytt_ext_lyr.child('div.my_tool_tip');
mytt_text_el.update(' ');
var doc=Ext.get(document);
doc.on('mouseover',on_over);
doc.on('mouseout',on_out);
doc.on('mousemove',on_move);
doc.on('click',on_click);
mytt_initialized=true;
}
},
ready:function() {
return mytt_initialized;
}
};
}();
// make tooltips work
myToolTips.init();
I found a jQuery slider plugin that does almost what I need. I need to change the tabs so it is on the right side (by adding an option). Also, I would like to add scrolling to the tabs in case there is more than 3 tabs (also by an option). I am trying to make it look like this which is an artist mock up:
http://i.stack.imgur.com/nR8RY.png
This is the script I am trying to modify with the code below it:
http://jqueryglobe.com/labs/feature_list/
/*
* FeatureList - simple and easy creation of an interactive "Featured Items" widget
* Examples and documentation at: http://jqueryglobe.com/article/feature_list/
* Version: 1.0.0 (01/09/2009)
* Copyright (c) 2009 jQueryGlobe
* Licensed under the MIT License: http://en.wikipedia.org/wiki/MIT_License
* Requires: jQuery v1.3+
*/
;(function($) {
$.fn.featureList = function(options) {
var tabs = $(this);
var output = $(options.output);
new jQuery.featureList(tabs, output, options);
return this;
};
$.featureList = function(tabs, output, options) {
function slide(nr) {
if (typeof nr == "undefined") {
nr = visible_item + 1;
nr = nr >= total_items ? 0 : nr;
}
tabs.removeClass('current').filter(":eq(" + nr + ")").addClass('current');
output.stop(true, true).filter(":visible").fadeOut();
output.filter(":eq(" + nr + ")").fadeIn(function() {
visible_item = nr;
});
}
var options = options || {};
var total_items = tabs.length;
var visible_item = options.start_item || 0;
options.pause_on_hover = options.pause_on_hover || true;
options.transition_interval = options.transition_interval || 5000;
output.hide().eq( visible_item ).show();
tabs.eq( visible_item ).addClass('current');
tabs.click(function() {
if ($(this).hasClass('current')) {
return false;
}
slide( tabs.index( this) );
});
if (options.transition_interval > 0) {
var timer = setInterval(function () {
slide();
}, options.transition_interval);
if (options.pause_on_hover) {
tabs.mouseenter(function() {
clearInterval( timer );
}).mouseleave(function() {
clearInterval( timer );
timer = setInterval(function () {
slide();
}, options.transition_interval);
});
}
}
};
})(jQuery);
This is the CSS:
body {
background: #EEE;
font-family: "Trebuchet MS",Verdana,Arial,sans-serif;
font-size: 14px;
line-height: 1.6;
}
#content {
width: 750px;
margin: 50px auto;
padding: 20px;
background: #FFF;
border: 1px solid #CCC;
}
h1 {
margin: 0;
}
hr {
border: none;
height: 1px; line-height: 1px;
background: #CCC;
margin-bottom: 20px;
padding: 0;
}
p {
margin: 0;
padding: 7px 0;
}
.clear {
clear: both;
line-height: 1px;
font-size: 1px;
}
a {
outline-color: #888;
}
Can anyone help with this?
Answer: jsFiddle: features box that slides and scrolls
Features:
Slides over time
Click next and previous
Support for lots of slides
Smooth scrolling
Move to item on click
Stop movement on hover
Easily extended because it uses the cycle plug-in.
Time spent on project: 4hrs
Ok, no fancy scrollbars or anything, but it will iterate through each one bringing it to the top index. I spent ages getting this working properly.
You can test it by adding additional items to the Lists.
/*
* FeatureList - simple and easy creation of an interactive "Featured Items" widget
* Examples and documentation at: http://jqueryglobe.com/article/feature_list/
* Version: 1.0.0 (01/09/2009)
* Copyright (c) 2009 jQueryGlobe
* Licensed under the MIT License: http://en.wikipedia.org/wiki/MIT_License
* Requires: jQuery v1.3+
*/
;(function($) {
$.fn.featureList = function(options) {
var tabs = $(this);
var output = $(options.output);
new jQuery.featureList(tabs, output, options);
return this;
};
$.featureList = function(tabs, output, options)
{
function slide(nr) {
if (typeof nr == "undefined") {
nr = visible_item + 1;
nr = nr >= total_items ? 0 : nr;
}
tabs.removeClass('current').filter(":eq(" + nr + ")").addClass('current');
output.stop(true, true).filter(":visible").fadeOut();
output.filter(":eq(" + nr + ")").fadeIn(function() {
visible_item = nr;
});
$(tabs[(nr - 1 + total_items) % total_items]).parent().slideUp(500,function(){
var order = "";
for(var i = total_items; i > 0; i--)
{
var nextInd = ((nr - 1) + i) % total_items;
var tab = $(tabs[nextInd]);
if(i == total_items)
tab.parent().slideDown(500);
tab.parent().prependTo(tab.parent().parent());
order += nextInd + ", ";
}
});
}
var options = options || {};
var total_items = tabs.length;
var visible_item = options.start_item || 0;
options.pause_on_hover = options.pause_on_hover || true;
options.transition_interval = options.transition_interval || 2000;
output.hide().eq( visible_item ).show();
tabs.eq( visible_item ).addClass('current');
tabs.click(function() {
if ($(this).hasClass('current')) {
return false;
}
slide( tabs.index( this) );
});
if (options.transition_interval > 0) {
var timer = setInterval(function () {
slide();
}, options.transition_interval);
if (options.pause_on_hover) {
tabs.mouseenter(function() {
clearInterval( timer );
}).mouseleave(function() {
clearInterval( timer );
timer = setInterval(function () {
slide();
}, options.transition_interval);
});
}
}
};
})(jQuery);
To increase the height of the box simply change the height of div#feature_list and to add additional items simply add an additional li item in both the ul's within feature_list