I have a jQuery tabs element with different tab heights. The outer div has dynamic height, but I want it to resize smoothly when the inner elements change tabs.
My current CSS is:
.parent{
width:500px;
background:green;
padding:20px;
transition:all 1s;
}
.tab1{
width:300px;
height:100px;
background:red;
}
.tab2{
width:300px;
height:500px;
background:blue;
display:none;
}
.parent button{
display:inline-block;
vertical-align:middle;
}
This fiddle shows the behaviour: https://jsfiddle.net/mh5b91gx/
I've tried using min-height and max-height but couldn't get it done. Can you guys help me out?
The closest thing I could come up with without changing your HTML is this: http://codepen.io/BenCodeZen/pen/rePLpP, but it's janky from a user's perspective and not something I would recommend.
$('#tab1').on('click', function(event) {
$('.tab2').slideUp(400);
$('.tab1').delay(400).slideDown();
/* Act on the event */
});
$('#tab2').on('click', function(event) {
$('.tab1').slideUp(400);
$('.tab2').delay(400).slideDown(400);
/* Act on the event */
});
The main issue with your code is that you're swapping out entire divs in the process. This means that you don't have a unified container to be smoothly transitioning heights. So the first step will definitely be changing your HTML structure to have a single content div which uses JavaScript or jQuery to change the content out.
Here's an example of what it might look like:
<div class='parent'>
<button id="tab1">Tab1</button>
<button id="tab2">Tab2</button>
<div class="content">
<div id="tab1-content" class="tab-content">...</div>
<div id="tab2-content" class="tab-content">...</div>
</div>
</div>
I would definitely recommend taking a look at the Organic Tabs article that #Asta, but let me know if you have any additional questions!
You can check Organic Tabs on CSS Tricks: https://css-tricks.com/organic-tabs/ .
You can try this:
$('#tab1').on('click', function(event) {
$('.tab2').hide('slow');
$('.tab1').show('slow');
/* Act on the event */
});
$('#tab2').on('click', function(event) {
$('.tab1').hide('slow');
$('.tab2').show('slow');
/* Act on the event */
});
Related
Today i found amazing filter button with 'circle black background' and i really liked it.
I want to integrate it in my website to study how to create it but i dont know how to start?
Maybe with create circle?
I have created floating button on my site (bottom right corner).You can find it here.When you scroll down to my website, the button will appear.So now i dont know how to create this circle with blurry background like example below?
My floating button
Sorry for my bad English!
I just created a playground for you here https://jsfiddle.net/rxnc3zb7/.
In general I added the following:
width:400px;
height:400px;
bottom:-150px;
right:-150px;
to the .go-top:hover. Set width, height, bottom and right values according to your needs. I've no tested it with the icon but I think you should hide it on hover (so .go-top:hover i {opacity:0}). But, if you want to center it you should set .go-top like this:
display:flex;
align-items:center;
justify-content:center;
In this way your icon will be aligned in any case.
Blur effect
For the blur effect I added a js code that simply add the class blur-content to the content container (in the example is .content) when the mouse is over on .go-top and remove it when mouse is out.
$('.go-top').hover(function(){
$('.content').addClass("blur-content");
},function(){
$('.content').removeClass("blur-content");
})
Additionally, I defined the blur-content class like this:
.blur-content{
filter:blur(3px);
}
The basic idea would be something like this. You can use CSS further to make it look more elegant. These applications generally have an Overlay in place which reacts to user button click or hover and display it.
You can use the below link to blur out your page contents or something similar
Full Page Blur in CSS
onBtnClick = ()=>{
document.getElementById("idBgOverlay").classList.toggle("overlayDisp");
}
.fullBg{
width:100%;
height: 300px;
background:orange;
}
.mybutton{
border:none;
border-radius: 50%;
color:#000;
background:#fff;
width:3rem;
height:3rem;
font-size:2rem;
z-index:2;
position:absolute;
}
.bgOverlay{
background:#101010c7;
position:absolute;
height:13rem;
width:13rem;
border-radius:50%;
top:-2rem;
left:-2rem;
display:none;
}
.overlayDisp{
display:block;
}
<div class="fullBg">
<div id="idBgOverlay" class="bgOverlay"></div>
<button class="mybutton" onclick="onBtnClick()"> + </button>
<div>
I'm using Bootstrap 3 and want to achieve this effect when the user scrolls past the large header image on my page. I need the background of the navbar to go from transparent to white. I looked in their code and I KNOW it is done with javascript, and even saw WHERE it was happening I think (look for the ID '#main-header' in that JS)...
Not knowing advanced Javascript aside, I'm looking for a way to apply this to my navigation bar when scrolling past a certain point. The class for my code is called 'navbar' and I would like it to turn white when it passes "#main". Let me know if you need more information, and thanks in advance if anyone wants to help!
The easiest way to accomplish what you're trying to do is a combination of some simple javascript (jQuery powered in this case) and CSS3 transitions.
We'll use JS to check for the windows scroll position on every scroll event and compare it to the distance of the bottom of the #main element - if the scroll position is greater, then we'll apply a class to the body to indicate we've scrolled past #main, and then we'll use CSS to define the nav styling for that "state."
So, our basic markup:
<nav class="nav">
[logo]
</nav>
<div id="main">#main</div>
<div id="below-main">#below-main</div>
And our javascript:
// get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable
var mainbottom = $('#main').offset().top + $('#main').height();
// on scroll,
$(window).on('scroll',function(){
// we round here to reduce a little workload
var stop = Math.round($(window).scrollTop());
if (stop > mainbottom) {
$('.nav').addClass('past-main');
} else {
$('.nav').removeClass('past-main');
}
});
And, our styles:
.nav {
background-color:transparent;
color:#fff;
transition: all 0.25s ease;
position:fixed;
top:0;
width:100%;
background-color:#ccc;
padding:1em 0;
/* make sure to add vendor prefixes here */
}
.nav.past-main {
background-color:#fff;
color:#444;
}
#main {
height:500px;
background-color:red;
}
#below-main {
height:1000px;
background-color:#eee;
}
A working example on Codepen
This is how I did it here. I also employ some scroll throttling and a bit more complicated styling semantics, but this is the gist of it.
If you're using Twitter Bootstrap this can be achieved with the 'Affix' plugin
It's pretty straight forward to set up, here is the documentation
You could probably just use javascript element.scrollTop along with Jquery addClass and removeClass. Haven't tried it myself though.
Here's an overflow link for getting scrollbar position: How to get scrollbar position with Javascript?
I am trying to bring in a overlay that comes on the top of a image when you hover with your mouse. Currently I have it coming just from the top, and eases down to the bottom. What I am trying to achieve though, is have the overlay split into 2 sections, coming from the top left and bottom right and join in the middle. I know this is hard to understand with just text, so I created an image.
I have seen this done before, but am not sure what it is called, or how to achieve the effect. Help would be appreciated
Here's my stab at it: http://jsfiddle.net/
The basic idea is that you're just doing this, but with the wrapper element rotated. This solution would obviously need to checked for compatibility.
This could be achieved without a .slide element, but would require more manual positioning of the elements.
Here is a basic example using jquery.
Note, the cool kids would do this with css3.
http://jsbin.com/eyilog/1/edit
In this example the divs are absolutely positioned outside the containing element. overflow:hidden; makes sure they are invisible. On hover jquery animates their positions back inside the div, overlaying the content of the div.
To make it diagonal just use transparent images.
$(".text").hover(function() {
$(".topleft").animate({top: "+0px"}, 500);
$(".bottomright").animate({bottom: "+0px"}, 500);
});
<div class="text">
<div class="topleft"></div>
text
<div class="bottomright"></div>
</div>
.text {
background-color:red;
width:100px;
height:100px;
margin:auto;
overflow:hidden;
position:relative;
}
div div {
background-color:black;
height:50px;
width:100px;
position:absolute;
}
.topleft {
top:-50px;
}
.bottomright {
bottom:-50px;
}
this is the link
When you take the mouse over the four image boxes under 'TUI Exclusive Offering', you get the effect described in the question title.
html :
<div class="maindiv">
<img src="img/img.jpg" />
<div class="lower_div">
this is the lower div1<br>
this is the lower div2<br>
this is the lower div3<br>
this is the lower div4<br>
this is the lower div5<br>
this is the lower div6<br>
</div>
</div>
the way to make the lower_div sit at the bottom is to make its position absolute and bottom 0. But for whatever reason in my big html page , this technique is not working though it does work in another html page containing only this snippet.
So I am looking for another way to make the div sit at the bottom. Besides I also need to make it show up fully on mousehover.
How to achieve those ?
Here is a working demo: http://jsfiddle.net/qbyeC/
The javascript is simple when jQuery is involved. All you have to do is define on mouseenter and mouseleave for each maindiv.
$('.maindiv').on({
mouseenter : function(e){
$(this).children('.lowerdiv').stop(true,false);
$(this).children('.lowerdiv').animate({top:0,marginTop:0});
},
mouseleave : function(e){
$(this).children('.lowerdiv').stop(true,false);
$(this).children('.lowerdiv').animate({top:'100%',marginTop:'-40px'});
}
});
This checks for the lowerdiv class and animates it to the right position on each event. NOTE: The marginTop on the second line of mouseleave should match the margin-top css property on the lowerdiv class. This is the amount that you want the div to stick up when the mouse is not over the element.
The css should be modified to your liking, but these are the important parts:
.maindiv {
overflow:hidden;
position:relative;
}
.lowerdiv {
position:absolute;
width:100%;
bottom:0px;
top:100%;
margin-top:-40px;
}
The html code is how you put it except I changed lower-div to lowerdiv to match maindiv.
May be this will help you out.
SCRIPT
$(function(){
$(".maindiv").hover(function(){
$(this).children('.lowerdiv').stop().animate({top:0})
},function() {
$(this).children('.lowerdiv').stop()..animate({top:150})
})
})
HTML
<div class="maindiv">
Main div content
<div class="lowerdiv">
lowediv content
</div>
</div>
<div class="maindiv">
Main div content
<div class="lowerdiv">
lowediv content
</div>
</div>
CSS
.maindiv{
height:200px;
width:200px;
background:#CCC;
position:relative;
overflow:hidden;
float:left;
margin:10px;
}
.lowerdiv{
height:200px;
width:200px;
background:#797987;
position:absolute;
top:150px;
}
jsfiddle - http://jsfiddle.net/tRYTq/4/
you need a negative position (as they did it on the tui page), start with something like
position:absolute;
bottom:-20px;
and try around until it fits.
using jquery you then can do something like:
$('.maindiv').hover(
function () {
$(this).find('.lower_div').stop(true, false).animate({'bottom':0});
},
function () {
$(this).find('.lower_div').stop(true, false).animate({'bottom':-20});
}
);
http://api.jquery.com/hover/
Of course this way you always have to change the original position (-20) in your css AND the js while you try around to find the best starting position. You could do this more elegantly by storing the original_position before the animation starts, but that is maybe going to far here? I am rather new to stackoverflow
I'm trying to do this:
!!! just learned I cant submit images because I'm new...
I have placed the image which
perfectly describes the problem on
Diino: Link to Diino folder (18,9kb) together with example files (html,css etc).
The moving DIV has this CSS:
div.linkr-bm {
float:left;
height:1px;
overflow:visible;
position:relative;
top:68px;
z-index:2;
}
The DIV with the height value has this CSS:
.entry-tags {
float:left;
font-family:Calibri;
font-size:small;
font-weight:bold;
line-height:1.6;
margin:0;
padding:0;
width:400px;
display:block;
}
Moving the DIV with the CSS works statically, BUT I can not get it to move with jQuery after page load using this script:
jQuery(document).ready(function(){
$('.entry').each(function(){
var height = $(this).children('.entry-tags').height();
$(this).children('.linkr-bm').css('top', height);
});
});
The DIVs iterate six times / page
The DIVs have Classes (no #ID)
To clarify: This is a hack because I don't have access to the DIV order and therefor have to move this DIV in place after it has been rendered. The problem is that the div with the tags can change from one to probably three rows. So that is why the offset have to be calculated.
I really appreciate any help I can get. Thank's!
try with this code:
jQuery(function(){
jQuery('.entry').each(function(){
$(this).find('.linkr-bm').css('top', $(this).find('.entry_tags').height() + 'px');
});
});