A smoother alternative to jQuery show() and hide() - javascript

I have a page setup with a hidden column using the jQuery show() and hide() functions to slide the column in and out.
However it's kind of "clunky" and does not look very smooth when showing/hiding; in contrast I also have a section of the page using jquery UI accordion. When switching between these sections the transition looks very nice and smooth...
Is there a better function than show()/hide() which looks as nice as the accordion does? (maybe the "easing" parameter can be used in the show/hide functions, but i'm not sure how to use this properly?)

I guess you will want to use jQuery.fadeIn and jQuery.fadeOut

Also look at jQuery.slideToggle.

I'm not a big fan of JQuery UI's animation. I have the same problem when trying to animate my show()/hide()... the result is choppy. I ended up using Scriptaculous for most of my animations simply because it provides smoother animations and more configurable than what JQuery UI provides. Scriptaculous can do what JQuery provides, plus more.

you could use FadeOut() FadeIn() or slideDown slideUp . Make the duration is "slow" or in time
For more information: Sliding effect
Here is another way by using animate()
http://www.vietanime.net/
the code example here:
// SLIDE FOOTER MENU
$('#footer-menu > li').hover(
function () {
var $this = $(this);
$('a',$this).stop(true,true).animate({
'bottom':'-45px'
}, 300);
$('i',$this).stop(true,true).animate({
'top':'-10px'
}, 700);
},
function () {
var $this = $(this);
$('a',$this).stop(true,true).animate({
'bottom':'-145px'
}, 300);
$('i',$this).stop(true,true).animate({
'top':'50px'
}, 400);
}
);
and the html here:
<div id="bottom-slide-out-menu">
<ul id="footer-menu">
<li>
<a>
<i class="icon_about"></i>
<span class="title">Search</span>
<span class="description">Direct link, Mp3, Music, Video, Tutorials</span>
</a>
</li>
<li>
<a>
<i class="icon_work"></i>
<span class="title">Listen</span>
<span class="description">Mp3</span>
</a>
</li>
<li>
<a href="archive.php">
<i class="icon_help"></i>
<span class="title">Archive</span>
<span class="description">Direct Links Archive</span>
</a>
</li>
<li>
<a href="search.php">
<i class="icon_search"></i>
<span class="title">Developer</span>
<span class="description">Keywords, SEO, Website </span>
</a>
</li>
</ul>
</div>
and some little css you could make it beautiful:
ul#footer-menu{
list-style:none;
position:absolute;
bottom:0px;
left:20px;
font-size:36px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
color:#999;
letter-spacing:-2px;
}
ul#footer-menu li{
float:left;
margin:0px 10px 0px 0px;
}
ul#footer-menu a{
cursor:pointer;
position:relative;
float:left;
bottom:-145px;
line-height:20px;
width:210px;
}
ul#footer-menu a:hover{
text-decoration: none;
}

Related

Jquery mobile bottom navbar

I have an issue and really don't know how to solve this.. I have an sticky footer like this:
<!-- FOOTER ICON TABS -->
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<div class="footer" data-role="navbar">
<ul>
<li>
<a href="#dashboard" data-icon="dashboard" class="ui-btn-active" id="icon-dashboard">
<span class="navbar-text">Dashboard</span>
</a>
</li>
<li>
<a href="#" data-icon="progress" id="icon-progress">
<span class="navbar-text">Voortgang</span>
</a>
</li>
<li>
<a href="#map" data-icon="security" id="icon-security">
<span class="navbar-text">Plattegrond</span>
</a>
</li>
<li>
<a href="#" data-icon="security" id="icon-security">
<span class="navbar-text">Securitycheck</span>
</a>
</li>
</ul>
</div>
</div>
Thereby I set this styling:
.ui-footer, .footer, .footer li, .footer a, .footer a:after {
background-color: transparent !important;
border-color: transparent !important;
height: 70px;
}
But It is annoying because my content is behind the icons and it is not nice. It looks like this:
I allready have changed the heights of the white blocks, but the blocks are not having a hard height. This ecause the notification block is dynamic and the content vary from length. Thereby the second block has an collapsable block where Boardingpass is writen.
How it has to look:
Here is a FIDDLE which recreates the problem. I hope someone could help me out on this :)
You could just set the bottom margin:
#flight-info-block {
margin-bottom: 80px !important;
}
also in code, use the third parametef of the slideToggle function to achieve the same effect at the end of the animation:
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle("slow", "swing", function() {
$("#flight-info-block").css("margin-bottom", "80px");
$("#flight-info-block").trigger("updatelayout");
});
BTW: i also dislike the transparent background, then i added following rule at the bottom of your CSS:
.footer {
background-color: #00a0e5 !important;
}
and removed also your -350 offset in scrollTop:
$('html, body').animate({
scrollTop: $header.offset().top
}, 1000);
Your updated Fiddle: http://jsfiddle.net/yTt9b/1787/

How to represent a breadcrumb child?

I represent the breadcrumb in a table as follow:
<ol class="breadcrumb" data-sly-use.breadcrumb="myModel.js">
<output data-sly-unwrap data-sly-list="${breadcrumb}">
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="${item.href}" itemprop="url">
<span itemprop="title">${item.label}</span>
</a>
</li>
</output>
</ol>
How to represent the breadcrumb child in this structure?
It seems like you are using apache sling, which I haven't used myself, but for setting up a simple breadcrumb, it can be done just with CSS. Here is one which I set up using display: inline on the the li.
jsfiddle
I'm sure you could use some pretty nice styling on it, but this is a simple example using a triangle for the arrows on the breadcrumb.
html
<div id="menu">
<ul>
<li>
<a href="#" itemprop="url">
<span itemprop="title">item 1</span>
</a>
</li>
<div class="arrow-right"></div>
<li>
<a href="#" itemprop="url">
<span itemprop="title">item 2</span>
</a>
</li>
</ul>
</div>
css
.arrow-right {
width: 0;
height: 0;
border-top: 0.5em solid transparent;
border-bottom: 0.5em solid transparent;
border-left: 0.5em solid black;
display: inline-block;
}
#menu ul{
list-style: none;
}
#menu li{
display: inline;
}
I'm not entirely sure what your question is. What do you mean by "breadcrumb child"? In the Sightly example you give each item is one of the elements of the breadcrumb, so that is what I would assume the "child" is, but that doesn't seem to be what you mean.
If the question is about what myModel.js might look like, it would simply have to implement the javascript Use API and return a list of objects. For example
"use strict";
use(function () {
var crumbs= [];
crumbs.push({href: '/home/path', label: 'Home'});
crumbs.push({href: '/section/path', label: 'Section'});
return crumbs;
});
Rather than hard coding the crumbs you can use the objects that Sling gives you to get the parents of the current page, but this works as a simple example.
note: At this point you should probably use the Java API, rather than the javascript API for production code. See the comparison chart from Adobe's Sightly Intro

How do I change a glyphicon upon clicking it in Bootstrap 3.2?

I want to have an arrow pointing to the right to allow the user to expand the sidebar, and then change that glyphicon to point to the left. That way, it points to the left so that they understand how to hide the sidebar. I then want it to change back to its default state.
This is what I have currently:
<div id="page-content-wrapper">
<div class='hidden-lg'>
<div class="content-header">
<h1>
<a id="menu-toggle" href="#" class="btn btn-default"><i class="glyphicon glyphicon-arrow-right"></i></a>
</h1>
</div>
</div>
Just use:
$('#menu-toggle').click(function(){
$(this).find('i').toggleClass('glyphicon-arrow-right').toggleClass('glyphicon-arrow-left');
});
Fiddle Example
Try
$('#menu-toggle').on('click', function(){
var iSelector = $(this).find('i:first');
if(iSelector.hasClass('glyphicon-arrow-right')) {
iSelector.removeClass('glyphicon-arrow-right')
iSelector.addClass('glyphicon-arrow-left')
}
});
Fiddle
Reference:
selectors
on
hasClass
removeClass
addClass
I guess there is a better way to address this common problem is using CSS's pseudo classes like
:after
For example
.panel-heading .accordion-toggle:after {
font-family: 'Glyphicons Halflings';
content: "\e114";
float: right;
color: grey;
transition: transform 0.5s;
transform-origin: 8px 7px;
}
And below code for rotating glyphicon
.panel-heading .accordion-toggle.collapsed:after {
transform: rotateZ(180deg);
}
Please note: font-family and content may be different if you are using other than bootstrap css library. Also pay attention to the classes decorated or used for your panel.
Reference

Show menu when clicked

i have the following menu:
<div id ="navigation-menu">
<div id ="squaremenu">
<ul>
<li><a class ="homemenu" href="#Home" data-menuanchor="#Home"><img id ="homemenu" src="homemenu.bmp" height="30" width="30" /><span id="spanhome">Home</span></a></li>
<li><a class="imprimir" href="#Servicios" data-menuanchor="#Servicios"><img id ="imprimir" src="imprimir.bmp" height="30" width="30" /><span id="spanimprimir">Imprimir</span></a></li>
<li><a class="contacto" href="#Contacto" data-menuanchor="#Contacto"><img id="contacto" src="contacto.bmp" height="30" width="30" /><span id="spancontacto">Contacto</span></a></li>
</ul>
</div>
</div>
styled with css.
http://jsfiddle.net/t86Vp/
I would like if it's possible to hide most of the menu to the left and unhide it everytime i click on the menu?
If it's possible anyone can give solution with javascript/css?
Thanks in advance.
Thanks for your fast answer, i know i may not have explained myself well because english is not my main language.
Edit: What i really want is show only a portion of the menu, and everytime i clic it, then show or hide the other portion.
Once again, thanks for your fast answers
And sorry if i cant make myself clear english is not my main language.
Solution for the people with the same problem/idea: (menu that open or close every time you click it
Thanks to #Sergio
http://jsfiddle.net/6xCEp/2/
You could use this:
$('#squaremenu').on('click', function () {
$(this).addClass('abrir');
});
CSS
/************
* ADDED
*/
#squaremenu img {
display:none;
}
#squaremenu.abrir {
width:36px !important;
}
#squaremenu.abrir img {
display:block;
}
/***********
* END
*/
#squaremenu {
position:fixed;
left:0px;
top:150px;
display:block;
margin: 0px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
background:rgba(43,50,61,1);
font-size: 1em;
color:white;
width:10px; /* CHANGED!! */
height:120px;
}
Demo
You may need javascript for this. Include jquery in your page and try this
$("#squaremenu a").on("click", function(){
var $this = $(this);
$this.find("span").toggleClass("menu-item-visible");
});
You may need to group all css styles that show that menu under one class, then toggle that class as shown above. In my example I used the class menu-item-visible
Let me know if you have any more questions on this or if it's not clear

How to make a animated <div> be visible only inside another <div>

Firstly thank you for accepting me in the group.
I need help with a question about animation with jQuery.
This is an animation which I found on items in the navigation menu of this template, the template monster.
http://www.templatemonster.com/demo/40492.html
Apparently these are two images that move on the canvas and gradually fade at some point.
Studying examples of jQuery I saw that part of the effect is obtained with the use of animation attribute top (css). But unfortunately the element that I animated do not gradually disappears as the example shown in the link.
Please help me understand how I can achieve the same effect using jQuery.
You can simply make it as per below.
CSS
#font-face {
font-family: 'Six Caps';
font-style: normal;
font-weight: 400;
src: local('Six Caps'), local('SixCaps'), url(http://themes.googleusercontent.com/static/fonts/sixcaps/v5/tMrhQDUBAHnnGuM33-yobPesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
.clear{clear:both;}
.nav{}
.menubox{width:200px;float:left;margin:0px 10px;height:80px;overflow:hidden;position:relative;font-family: 'Six Caps', sans-serif;line-height: 80px;color: #161616;font-size: 80px;color:#000;display:block;cursor:pointer;}
.menubox > span{width:100%;height:80px;display:block;position:absolute;text-align:center;}
.menubox > span.default-txt{top:0px;left:0px;}
.menubox > span.hover-txt{top:80px;left:0px;color:red;}
HTML
<div class="nav">
<a class="menubox">
<span class="default-txt">menu</span>
<span class="hover-txt">menu</span>
</a>
<a class="menubox">
<span class="default-txt">menu</span>
<span class="hover-txt">menu</span>
</a>
<a class="menubox">
<span class="default-txt">menu</span>
<span class="hover-txt">menu</span>
</a>
<a class="menubox">
<span class="default-txt">menu</span>
<span class="hover-txt">menu</span>
</a>
<div class="clear"></div>
</div>
jQuery
$(document).ready(function(){
$('.menubox').mouseenter(function(){
$(this).children('.default-txt').stop(true,true).animate({top:'-100px'});
$(this).children('.hover-txt').stop(true,true).animate({top:'0px'});
}).mouseleave(function(){
$(this).children('.default-txt').stop(true,true).animate({top:'0px'});
$(this).children('.hover-txt').stop(true,true).animate({top:'100px'});
});
});
JSFiddle
Working Demo
Here's a simple example: http://jsfiddle.net/qtdtL/. Note the that element with the animation for "top" has position: fixed.
$("nav").click(function() {
var el = $(this);
var elTop = el.position().top == 0 ? "-70px" : "0";
el.animate({top: elTop});
});
Basically you add
div
{
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease; /* Safari */
}
first property tells what kind of changes that should be animated on change the second one tell how long time it should take and the third one timing, there's also a fourth for giving it a delay if so is desired

Categories

Resources