I would like to add a menu like the one in this demo site Here
it drops down from the top of the page as you can see and i would like to know if this was done with only CSS3 or .
If someone can show me a simple function so i can go off it that would be nice!
EDIT: ok i found the code snippet for it I think , i still want to know if this is a good way to do it , and if someone can make this more simple, seems like a lot of code just for that
var isUp = false;
var navHeight = $('#navContainer').height();
var hideHeight = navHeight - 50;
$('#arrowLink a').click(function(e){
e.preventDefault();
navHeight = $('#navContainer').height();
hideHeight = navHeight - 50;
$('.tooltip').remove();
if(!isUp){
$(this).find('img').attr('src',template_directory+'/images/menu_hide_arrow_bottom.png');
$(this).find('img').attr('title',showNav);
$( "#navContainer" ).animate({
top: '-='+ hideHeight + 'px'
}, 500, "swing", function() {
isUp = true;
});
}else{
$(this).find('img').attr('src',template_directory+'/images/menu_hide_arrow_top.png');
$(this).find('img').attr('title',hideNav);
$( "#navContainer" ).animate({
top: "0"
}, 500, "swing", function() {
isUp = false;
});
if($('body').hasClass('body_show_content'))
{
$('#mainContainer').fadeIn();
}
}
});`
Yes, it can be done. You can use css transition/keyframes and a click event.
Code
html
<div id="container hidden">Something</div>
css
#container {
postion:fixed;
-webkit-transition: all 2s;
transition: all 2s;
}
.hidden {
top: -25px;
}
js
$('#container').click(function(){
$(this).toggleClass('hidden');
});
Explanation
Your menu is fixed at the top of the page. Whenever you toggle the button that displays/hides it, you can add a css class that changes the position of the element. Because you have transition on the element, it will animate to that new location. This can also be done using keyframes instead of transition to have more control.
css transition
css keyframes
If you want to achieve this using pure css, you need to make use of transition effect. Check out the fiddle which gives a fair idea of something similar.
FIDDLE
Related
I have the back to top button that appears when you reach a point on the page, which is working fine, however, when it appears the text is on two lines until the box has finished the animation to appear. So, is there anyway to prevent this? What I mean by the animation is: btt.show('slow');
Code:
$(document).ready(function () {
var btt = $('.back-to-top');
btt.on('click' , function(e) {
$('html, body').animate({
scrollTop: 0
}, 500);
btt.hide('slow');
e.preventDefault();
});
$(window).on('scroll', function () {
var self = $(this),
height = self.height(),
top = self.scrollTop();
if (top > 500) {
btt.show('slow');
} else {
btt.hide('slow');
}
});
});
Example: http://codepen.io/Riggster/pen/WvNvQm
The problem is caused by animating the width of a box, I think it might be better to animate the position of it instead, but - even better - lets use CSS animations!
$(window).on('scroll', function () {
if ($(window).scrollTop() >= 500) {
$(".button").addClass('show');
} else {
$(".button").removeClass('show');
}
});
#wrapper {
width: 100%;
height: 2000px;
}
.button {
position: fixed;
bottom: 50px;
right: -100px;
/* You might still need prefixes here. Use as preferred. */
transition: right 500ms;
}
.button.show {
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="wrapper">
<div class="button">Here's my button!</div>
</div>
I've defined your button as hidden by default, by giving it a position of right: -100px. When we hit the correct scroll position, we add the class show and that triggers the animation performed by CSS and not javascript, as we have the transition property for the property right defined - that way the browser does the heavy lifting.
Toggling show/hide alters your elements width. You either have to put it in a container with display: inline
Or more ideally you might want to change show/hide to jQuery fadeIn() / fadeOut() which is more appropriate for "Back to Top" indicators.
Here is your codepen example modified with inline container:
http://codepen.io/anon/pen/MwWweY
I've got an app that looks like a Windows desktop. There are icons that open draggable windows (divs) which display the content.
When I close a window, this happens:
$('#element'+boxId).animate({height: 0, opacity: 0}, 'fast');
When I open a window, this happens
$('#element'+boxId).slideDown();
Problem is, once a window is closed, I cannot reopen it. If I want to see that window again I have to refresh the page and then open it.
Is there some way to do a cool fade out that does not completely remove the element?
I have also tried regular old slideUp() but that does the same thing.
This works fine, just not as cool looking.
document.getElementById('element'+boxId).style.display = "none";
The problem is that you are hiding it by affecting the height and opacity, and those aren't being reset by the slideDown. Here's one option:
http://jsfiddle.net/uggVb/
$('#hide').click(function (e) {
e.preventDefault();
var $div = $('#theDiv');
$div.data('originalHeight', $div.css('height'));
$('#theDiv').animate({
height: 0,
opacity: 0
}, 'fast');
//$('#theDiv').slideUp('fast');
});
$('#show').click(function (e) {
e.preventDefault();
$('#theDiv').animate({
height: $('#theDiv').data('originalHeight'),
opacity: 1
}, 'fast');
//$('#theDiv').slideDown('fast');
});
You could use the slide functions instead of the animate functions, either work.
How about only using jQuery to add and remove a hide class and use CSS transitions for the properties you want to animate?
jQuery:
$('#whatever').click(function(ev) {
var $el = $('#element' + boxId);
$el.toggleClass('hide');
});
CSS:
#element { /* or #element{{boxId}} or some class added to those elements */
opacity: 1;
overflow: hidden;
width: 100px; height: 100px;
transition: height 300ms, opacity 300ms;
}
#element.hide {
opacity: 0;
height: 0;
}
See demo
Not sure if it is what you want but you can look into jQuery hide/show functions
$('#element'+boxId).hide();
if you want slower/faster animation you can give hide parameter which represents animation speed(in miliseconds)
$('#element'+boxId).hide(1000);
I am working on a slide out bar for a project I am working on and I am having a hard time getting an animation to work.
My Goal is to have it slide out from left to right not appear from the top like it is now.
Below is my jQuery code as well as my jsfidde
Thanks in advance
George
http://jsfiddle.net/tXye8/
$(document).ready(function(){
var $button = $('#sideoutButton');
var $contain = $('#slideoutContain');
var containWidth = $('#slideoutContain').width();
//Hide the box
$contain.hide();
//Hide or show the container on button click
$button.click(function(){
if ($contain.is(":visible")) {
$contain.hide();
$button.css("left", 0);
}
else {
$contain.show(400, buttonMove());
}
});
function buttonMove(){
$button.css("left", function(value) {
return 0 + containWidth;
});
}
});
If you know how wide it's supposed to be, you can achieve this with CSS:
#mycontainer {
width: 0;
transition: width 400ms ease;
}
#mycontainer.expand {
width: 400px; //or whatever your width is
}
and just use JS/jQuery to toggle a class on #mycontainer
I have a div that I want to go full-screen (100% width/height of Window size) onClick of a button.
How would I go about this using Javascript/jQuery?
DEMO
$('div').click(function() {
$(this).css({
position:'absolute', //or fixed depending on needs
top: $(window).scrollTop(), // top pos based on scoll pos
left: 0,
height: '100%',
width: '100%'
});
});
$('div.yourdivclass').click(function(){
$(this).css('height','100%').css('width','100%');
})
What have you tried? What didn't work?
Take a look at that:
http://jsfiddle.net/6BP9t/1/
$('#box').on('click',function(e){
$(this).css({
width:"100%",
height:"100%"
});
});
I would do this:
$('#idOfDiv').click(function() {
$(this).css({position:'fixed', height: '100%', width: '100%'});
});
jsfiffle: http://jsfiddle.net/P6tgH/
$('div').click(function(){
var win = $(window),
h = win.height(),
w = win.width();
$(this).css({ height: h, width: w });
});
http://jsfiddle.net/TQA4z/1/
This is an alternate to the answer marked as correct. Plus it gives him what he asked for to close the div.
Using toggle class is much easier than having your css in your jquery. Do everything you can do to keep css separate from JavaScript.
For some reason my https is effecting loading of the JavaScript on load of that jsfiddle page. I clicked on the Shield icon in chrome address bar and chose to run scripts.
Toggle Class Demo
Something like
$('#buttonID').click(function() {
$("div > div").toggleClass("Class you want to add");
});
I really like the floating panel on the left side of the following site:
http://envato.com/
I have no idea what its called, but I like how when you click on the search button, it expands to a search page, you click on another icon, and it expands with what appears like its own page.
How do I accomplish this? Is there some tutorial out there using html5, JavaScript or jQuery?
NOTE: All the answers so far only cover the floating bar, but not the clicking on a link on that floating bar to show a window expanded to the right.
<div id="float"></div>
#float{
position:fixed;
top:50px;
left:0;
}
Check working example at http://jsfiddle.net/TVwAv/
done using css,
HTML
<div id="floating_sidebar">
whatever you want to put here
</div>
CSS
#floating_sidebar {
position:fixed;
left: 0;
top: 100px; /* change to adjust height from the top of the page */
}
I am using this for a "floating (sticky) menu". What I have added is:
1. to avoid my 'footer' always being "scrolled" down in case the sidemenu is a little high, I only do the scrolling if necessary, i.e -
when the content is higher than the sidebar.
2. I found the animate effect a little "jumpy" to my taste, so I just changed the css through jquery. of-course you put a 0 in the animate time, but the animation still occurs, so it's cleaner and faster to use the css.
3. 100 is the height of my header. you can assume it to be the "threshold" of when to do the scrolling.
$(window).scroll(function(){
if ($('#sidebar').height() < $('#content').height())
{
if ($(this).scrollTop() > 90)
$('#sidebar').css({"margin-top": ($(this).scrollTop()) - 100 });
//$('#sidebar').animate({"marginTop": ($(this).scrollTop()) - 100 }, 0);
else
$('#sidebar').css({"margin-top": ($(this).scrollTop()) });
//$('#sidebar').animate({"marginTop": ($(this).scrollTop()) }, 0);
}
});`
you can use this ..
your html div is here
<div id="scrolling_div">Your text here</div>
And you javascript function is here
$(window).scroll(function(){
$('#scrolling_div').stop().animate({"marginTop": ($(this).scrollTop()) +10+ "px"}, "slow"});
});
You can also use the css for this
#scrolling_div {
position:absolute;
left: 0;
top: 100px;
}
I have not tested it but hopefully its worked.
I know this looks quite a big piece of code, however this function just works by specifying three simple options; your floater "top", your "target" (floater) and "reference" element to set the boundaries, it also takes care of the top and bottom position automatically, no css involved.
function scrollFloater(marginTop, reference, target, fixWhidth = false){
var processScroll = function(){
var from = reference.offset().top - marginTop;
var to = reference.offset().top + reference.outerHeight() + marginTop - target.outerHeight();
var scrollTop = $(this).scrollTop();
var bottom = to - reference.offset().top + marginTop;
if( fixWhidth )
target.css('width', target.width());
if( scrollTop > from && scrollTop < to )
target.css('position', 'fixed').css('top',marginTop);
else if( scrollTop >= to )
target.css('position', 'absolute').css('top', bottom);
else
target.css('position', '').css('top',marginTop);
}
$(window).scroll(function(){ processScroll(); });
processScroll();
}
And this is how you would use it:
$(function() {
scrollFloater(41, $('.box.auth.register'), $('.plans-floater'), true);
});
I hope this helps someone.