I need to flip a div panel left once a some item div get clicked and hide,once item div get clicked again. (exactly like new twitter reading panel).
i have tried several methods but i couldn't animate it smooth.
recently i identified it not happen smoothly because of the bad what have i done.i increased width of outter div and decrese width.
are there any good suggestion or code snippet to work my need??
Here is the code that i have used for animate and gt show the more read div panel
$("#more-item").animate({"width": "toggle"}, { duration: 500,specialEasing: {width: 'linear', height: 'easeOutBounce'} });
Here is the scenario that i need to see.
1. clicked on item div
2. more read div panel animate and flip to left and show the
3. click again item div
4. more read div panel animate and flip right and hide
when we at third point if we again click another item div just load content of recent clicked div instead animate and hide the more read div
here is the screen shot what my need functioning on new twitter reading panel.
You can easily do this by adding a fixed positioned <div> to the right, wrap your items in a container and animate the panel and the container's margin accordingly.
The trick is to use the top, bottom and right css properties to position the reading panel.
Here's a demo: http://jsfiddle.net/wUGaY/1/
HTML:
<div class="panel"></div>
<div class="container">
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>
<div class="item">Four: This contains a bit longer text to test if wrapping is working correctly.</div>
<div class="item">Five</div>
<div class="item">Six</div>
<div class="item">Seven</div>
<div class="item">Eight</div>
<div class="item">Nine</div>
<div class="item">Ten</div>
</div>
CSS:
.panel {
position:fixed;
top:0px;
bottom:0px;
right:0px;
width:200px;
padding:20px;
border:1px solid #eee;
background-color:white;
}
.item {
border:1px solid #eee;
padding:20px;
}
.active {
background-color: #eee;
}
Javascript:
$(function(){
function showPanel() {
// Show the panel and animate it into view
$('.panel').stop().show().animate({
right: '0px'
});
// Animate the container's margin to make room
// for the reading panel
$('.container').stop().animate({
marginRight: '232px'
});
}
function hidePanel() {
// Move the panel off the screen and hide it when done
$('.panel').stop().animate({
right: '-232px'
}, function(){
$(this).hide();
});
// Animate the container's margin back to normal
$('.container').stop().animate({
marginRight: '0px'
});
}
// Hide the panel initially and set its position
$('.panel').hide().css('right','-232px');
// What happens when they click on inactive items?
$('.container').delegate('.item:not(.active)', 'click', function() {
var $this = $(this);
// Make the current item the only active item
$('.active').removeClass('active');
$this.addClass('active');
// Add some content to the reading panel
$('.panel').html($this.html());
// Show the reading panel
showPanel();
});
// What happens when they click on an active item?
$('.container').delegate('.active', 'click', function() {
// Make it inactive
$(this).removeClass('active');
// Hide the reading panel
hidePanel();
});
});
Related
Currently, I have three tabs in my nav bar, BOARD, SKILLS, and ABOUT, all in one container with a boarder-bottom for the container. When I click on one of the divs, the appropriate div name is selected, to indicate which tab I am on. That is what is currently working and can be seen in my codePen.io:
What I have so far - click here
.
What I am trying to do is when I go from BOARD to SKILLS or BOARD to ABOUT, is to have a bar slide from one one tab to the next, rather than being static-like (which is what I have currently) e.g. a smooth scroller on click from one tab to the next. How can I go about doing this? I have no idea where to begin.
You can use this function to slide an element:
function scaleSlider(to) {
var $slider = $('.slider', '.tabs'),
$elSpan = to.find('span'),
width = $elSpan.width(),
left = $elSpan.position().left;
$slider.animate({
width: width,
left: left
});
}
In your HTML you need to add the .slider element:
<div class="col-md-8 tabs">
<div class="slider"></div>
<!-- your html here -->
</div>
CSS:
.tabs .slider {
position: absolute;
height:100%;
border-bottom: 4px solid grey;
}
So when you click a menu element you call scaleSlider:
$('.skills').on("click", function() {
//Your code here
scaleSlider($(this));
});
Please check out this demo: http://codepen.io/anon/pen/EyoBmg
I have a parent div called lyricpadding, and inside I have a lot of <h4>'s with a unique ID. Anyways, what I need to do us, by using preferably Jquery or Javascript or CSS, is to keep the <h4> marked with the class of highlighted in the middle of the parent container, but I don't want it to stretch over the whole thing, I just want the text to be centered by an automatic scroll until it gets to the bottom. So the div with the class highlighted will always be visible, preferably in the center.
Here is a jQuery example. It uses position absolute and then adjusts according to the scroll position and window size. See this fiddle.
HTML:
<div class='lyricpadding'>
<h4 class='highlighted'>Highlighted</h4>
<h4>Other</h4>
<h4>Other</h4>
<h4>Other</h4>
<h4>Other</h4>
</div>
CSS:
.lyricpadding
{
height:1000px;
width:100%;
background-color:lightblue;
}
.highlighted
{
display:inline-block;
position:absolute;
}
jQuery:
function positionMiddle()
{
var $highlighted = $('.highlighted');
$highlighted.css({
left: ($(window).width() - $highlighted.outerWidth())/2,
top: $(window).scrollTop() + ($(window).height() - $highlighted.outerHeight())/2
});
}
$(window).resize(function(){
positionMiddle();
});
$(window).scroll(function(){
positionMiddle();
});
// To initially run the function:
positionMiddle();
I have created a customized menu. See here. On click of this link I have a shadowbox popping up which has a long list of items. Now I want to have a "back to top" anchor link which takes me back to the top of the menu list.
I've set your lightbox with the #box id.
Html
<div id="box">
...
<!-- long content there -->
To Top
</div>
CSS (setting the width of elements)
#box {
position:relative;
width:200px;
height:250px;
overflow:auto;
}
#box #toTop {
position:absolute;
display:none;
left:150px;
top:10px;
}
jQuery
$('#box').bind('scroll', function(e) {
if ($(this).scrollTop() > 100) {
$('#toTop').fadeIn();
$('#toTop').css({'top' : $(this).scrollTop() + 100});
} else {
$('#toTop').fadeOut();
}
});
$(document).on('click', '#toTop', function(e) {
e.preventDefault();
//$('#box').scrollTop(0); //just go to top
$('#box').animate({scrollTop : 0},'slow'); //animate
});
Fiddle
Pretty easy with:
document.querySelector("iframe").contentWindow.scrollTo(0,0);
Now put a button on the page and call that on click. Oh, and omit the height:100% on your body of the iframe, this way you get rid of the second scrollbar.
You can try this out by just pasting the line above and executing it in the console of your browser with your webpage.
In http://albertanglada.es
I have this:
$('#ultimas,#populares').click(function(e) {
e.preventDefault();
$('.grupo').hide();
var id= 'div' + $(this).attr('id');
$('.grupo#'+id).fadeIn();
});
On http://albertanglada.es/js/custom.js
I use it to hide al .groupo elementes and show an specific element. It works, if you click on:
'Últimas añadidas' or 'Populares' in the middle of the page you'll see that some boxes are show/hidden. The problem is that also the page scrolls up if you are on the bottom. I don't want to scroll up the page when those span are clicked.
<span class="left current tooltip" id="ultimas">Últimas añadidas</span>
<span class="top" id="populares">Populares</span>
The problem is happening because the wrapper feed-panel-wrapper has no height - so when you hide its content it shrinks to 0px height ... give the div a height or min-height
#feed-panel-wrapper {
min-height: 300px;
}
I searched for this but didn't find an solution that totally fixed my problem.
I got 2 divs that are over each other. Where div #2 isn't shown (display:none).
Now what I want is that if I hover over div #1, div #2 slides down (open) at his current position.
Then div #2 should stay open when people are hovering over div #2, when they leave the hover status of div #2 for more then 5 seconds div #2 slides up again.
I made a fiddle to illustrate my div positions.
Using jQuery to keep the code simpler. One way to do what you want is to pair a global variable with a setTimeout function. The timeout checks if the mouse is still out of the div after five seconds, and if so, slides it up and out of sight.
$('.button').click(function() {
$('.showme').slideDown();
});
$('.showme').mouseout(function() {
window.isoverdiv = false;
setTimeout(function() {
if (!window.isoverdiv) {
$('.showme').slideUp();
}
}, 5000);
});
$('.showme').mouseover(function() {
window.isoverdiv = true;
});
http://jsfiddle.net/mblase75/TxnDd/2/
I moved div #2 into div #1 and this allowed me to do this with only css
http://jsfiddle.net/57Shn/
CSS
.button {width:100px; height:50px; position:fixed; background-color:blue; margin-top:30px;}
.button:hover .showme {display:block}
.showme {width:100px; height:200px; position:fixed; background-color:red; display:none; margin-top:30px;}
HTML
<div class="button">
touch me
<div class="showme">show me</div>
</div>
CSS-only solution: (doesn't slide)
<div class="outer">
<div class="one">Hover</div>
<div class="two">Hello World!</div>
</div>
CSS:
.two { display: none; }
.outer:hover .two { display: block; }
JS solution:
$(function() {
$('.two').hide();
$('.outer').hover(function() { $('.two').stop().slideDown(); });
$('.outer').mouseout(function() { $('.two').stop().slideUp(); });
});