Hello i have found a nice javascript effect of box in
link 1
link 2
But it's for wordpress only.
Is it possible to make same slide box with Bootstrap and javascript/jquery?
This is a very simple example of recreating the slide down effect on the links you posted. It can be done fairly easily just using html and css.
<div tabindex="1" class="mainbox">
<h1>
This is a box with hidden content
</h1>
</div>
<div class="hidden">
<h2>
I am no longer hidden
</h2>
</div>
div {
width:500px;
height:200px;
background:#3c3c3c;
color:black;
}
.mainbox {
cursor:pointer;
position:relative;
z-index:1;
}
.mainbox:hover {
outline:none;
}
.hidden {
position:absolute;
top:0;
z-index:-1;
opacity:0.75;
-webkit-transition:top 1s;
-moz-transition:top 1s;
}
.mainbox:hover + .hidden {
top:200px;
-webkit-transition:top 1s;
}
https://jsfiddle.net/tz3vjLg7/
Try this; with this approach you can move the main container to any place you want, add margins, paddings, etc to main-container without having to also re position the sliding panels inside
.main-container {
position: relative;
margin-left: 50px;
}
.main-panel {
position: absolute;
width: 250px;
height: 150px;
background-color: lightgrey;
z-index: 1
}
.slide-panel {
position: absolute;
width: 250px;
height: 150px;
background-color: blue;
opacity: 0;
transition: all 0.3s ease-in-out;
}
.main-container:hover .slide-panel {
opacity: 1;
transform: translateY(150px)
}
<div class="main-container">
<div class="main-panel"></div>
<div class="slide-panel">Slide Panel</div>
</div>
Related
I want to make link(.fm) appearing while hovering the image, but my code isn't working (when i hover to the link it starts to appear and dissapear fast).this is the code. I tried usind z-index but it didn't worked , also tried changing positions , but without succes. Any tips please.can you please help me by typing a working code or correcting mine?
.fm a{
position:absolute;
display: none;
background-color: #5D5D5D;
color:pink;
padding:10px;
}
.caine1 img:hover + .fm a{
display:block;
z-index: 1;
}
<div class="caine1">
<img src="1.png" width="400" height="250"></img>
<div class="fm">
Female
</div>
</div>
The code is working , but it have lags while hovering the .fm link
This is another example but using javascript.
This will help with your problem that link disappears so fast.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.wrapper {
width: 400px;
height: auto;
}
.fm {
position: absolute;
padding: 10px;
background-color: #5D5D5D;
}
a:link,
a:visited,
a:active {
text-decoration: none;
color: pink;
}
.caine1.fm {
display: block;
height: 250px;
width: 400px;
}
.link {
font-family: Verdana;
font-size: 16px;
color: crimson;
z-index: 1;
display: block;
width: 400px;
}
.hiddenLink {
display: none;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="myImage" class="caine1">
<img id="img" src="1.png" width="400" height="250"></img>
<div id="link" class="hiddenLink">This is my hidden link</div>
</div>
</div>
<script>
document.getElementById("myImage").addEventListener("mouseover", function() {
document.getElementById("link").className = "link";
});
document.getElementById("img").addEventListener("mouseleave", function() {
document.getElementById("link").className = "hiddenLink";
});
</script>
</body>
</html>
Your using display none, and there is no transition animation on this component. Display none is binary, meaning there no way to animate this. Instead, use this:
To control the speed of animation, change the 1s in the transition property.
To change what the animation looks like, change the width, height, font-size, and opacity properties in the :hover selector
.fm a{
position:absolute;
width: 0;
height: 0;
visibility: hidden;
opacity: 0;
background-color: #5D5D5D;
color:pink;
padding:10px;
transition: all 1s ease-out
}
.caine1 img:hover + .fm a{
display:block;
z-index: 1;
width: 4rem;
height: 1.5rem;
font-size: 1rem;
visibility: visible;
opacity: 1;
}
<div class="caine1">
<img src="1.png" width="400" height="250"></img>
<div class="fm">
Female
</div>
</div>
I'm trying to create the effect seen in the header of http://anagram.paris/work/burgerking where the text moves as you scroll down.
I'm trying to do it with css margins and jQuery, but it doesn't seem to act right. I am using flex to vertically center all the content so I think that may be affecting it too.
jQuery(document).ready(function($){
var offset = 175,
scroll_top_duration = 1500,
// bind with the button link
$animation = $('.spacer');
$(window).scroll(function(){
if( $(this).scrollTop() > offset ) {
$animation.addClass('stretch');
}
else
{
$animation.removeClass('stretch');
}
});
css
.flex {
display: -webkit-flex;
display: flex;
flex: 1;
align-items: center;
}
.spacer.stretch { padding-top: 4%; }
.spacer {
position: relative;
transition: padding .35s 0s ease;
}
html
<div class="jumbotron indx-jumbotron flex">
<div class="row flex">
<div class="col-xs-8 col-xs-offset-2">
<h1 class="spacer">Hi, I'm <strong>Lucas</strong></h1>
<p class="spacer">Lorem ipsum dolor sit amet,</p>
<div class="spacer">Button</div>
</div>
</div>
this is simple parallax effect
At first, margin is not a good property to do that (performance issue) better is transform: translate3D(0px,0px,0px) -> translate3D(0px,-100px,0px)
If you want to, I can write more, how translate3D works.
But if you want to ready to use solution look at here
http://scrollmagic.io/
If you want to now more about performance
https://developers.google.com/web/fundamentals/performance/rendering/
I had to pretty much overhall the code, but this works properly. To adjust the speed simply adjust the multiplier from .5 to whatever you want.
jQuery(document).ready(function($){
$(window).scroll(function(){
$(".container .foreground").css({
top:$(".container").height()/2-$(this).scrollTop()*.5
});
});
});
body {
padding:0;
margin:0;
}
.container {
position:relative;
overflow:hidden;
}
.container .background {
width:100%;
height:100%;
display:block;
}
.container .foreground {
position:absolute;
font-size:40px;
color:yellow;
z-index:1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.spacer {
height:400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<img class="background" src="http://neil.computer/s/1.jpg" />
<div class="foreground">
Testing text
</div>
</div>
<div class="spacer">
</div>
How can I put an iframe youtube on a frame with icon close.
example:-
If I want to put the iframe below on frame with icon close, and if I click on icon close the iframe youtube will disappear, how can I do this?
<iframe width="440" height="215" src="http://www.youtube.com/embed/OyRQio7GfLU" frameborder="0" allowfullscreen></iframe>
Thanks
I'm not sure by 100% if this is what did you expect, but I hope I've helped you.
$(".button").click(function() {
$("#x").addClass('hide');
});
.frame {
height: auto;
width: auto;
padding: 20px;
border: 1px solid black;
position: relative;
}
.button {
position: absolute;
top: 5px;
right: 5px;
height: 20px;
width: 20px;
background-color: black;
color: white;
}
.content {
display: block;
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="frame">
<button class='button'>X</button>
<iframe id='x' class='content' width="440" height="215" src="http://www.youtube.com/embed/OyRQio7GfLU" frameborder="0" allowfullscreen></iframe>
</div>
Here's a way to do it with CSS without JavaScript:
Wrap your iframe in a div.
Add an <input type='checkbox'> above the div and iframe.
Add a <label> after the <input type='checkbox'>.
Hide <input type='checkbox'> with display:none.
Style the div to be invisible with opacity:0, or visibility:hidden*
Add this ruleset:
input:checked + label + div {
visibility: visible;
}
*display:none and display:block works as well but it has the possibility to disrupt layout.
The following Snippet includes commented details
SNIPPET
body {
background: black;
}
#chx1 {
display: none;
}
label {
font-size: 40px;
text-decoration: none;
color: #fC3;
cursor: pointer;
}
label:hover {
color: #0ff;
}
/* This is the style of expanding div */
.expand {
opacity: 0;
height: 0;
width: 480px;
transition: opacity .4s, max-height 1s linear .3s;
}
/* This is the style of expanding div after checkbox is checked */
/* The :checked pseudo-class is associated to expanding div with adjacent sibling selectors */
#chx1:checked + label + .expand {
opacity: 1;
max-height: 270px;
}
<!--Make sure the checkbox has an id-->
<input id='chx1' type='checkbox'>
<!--Make sure the label has a for that
has the same value as checkbox id value-->
<label for='chx1'>✦</label>
<!--This is the expanding div that wraps around iframe-->
<div class='expand'>
<!--This is your Youtube iframe inside of expanding iframe-->
<iframe width="480" height="270" src="http://www.youtube.com/embed/o0u4M6vppCI" frameborder="0" allowfullscreen></iframe>
</div>
I am trying to add a collapsable element to my app. I don't want to use jQuery or any other dependency than Angular.
I have built a very simple demo here: http://jsfiddle.net/eg69cfub/2/
The elements are displayed/hidden properly the only problem is the transition.
I don't understand why it is so abrupt, I'd like it to be smooth.
How can I fix this please?
HTML:
<div ng-app>
<div>
<ul>
<li ng-repeat='test in [1, 2, 3]' ng-controller='accordionCtrl'>
<div class='header' ng-click='isVisible = !isVisible'> Hello {{ test }}</div>
<div class='body' ng-class='{ collapsed: isVisible }'> Goodbye </div>
</li>
</ul>
</div>
</div>
CSS:
li {
list-style: none;
}
.header {
width: 100%;
background-color: red;
}
.body {
width 100%;
background-color: blue;
display: block;
min-height: 1px;
transition: all ease 3s;
overflow: hidden;
}
.collapsed {
min-height: 0;
height: 0;
}
JS:
var myApp = angular.module('myApp',[]);
function accordionCtrl($scope) {
$scope.isVisible = false;
}
In Angular, you can use ng-animate to perform smooth animations with ng-show directive (along with many other directives). Here is your fiddler with animations: http://jsfiddle.net/fu2jw6j1/
Your HTML:
<div ng-app>
<div>
<ul>
<li ng-repeat='test in [1, 2, 3]' ng-controller='accordionCtrl'>
<div class='header' ng-click='$scope.isVisible=!$scope.isVisible'> Hello {{ test }}</div>
<div class='box' ng-show="$scope.isVisible" ng-animate="'box'"> Goodbye </div>
</li>
</ul>
</div>
And here's the CSS:
li {
list-style: none;
}
.header {
width: 100%;
background-color: red;
}
.box {
width 100%;
background-color: blue;
display: block;
min-height: 1px;
transition: all ease 3s;
overflow: hidden;
height: 20px;
}
.box-show-setup, .box-hide-setup {
-webkit-transition:all linear 0.3s;
-moz-transition:all linear 0.3s;
-ms-transition:all linear 0.3s;
-o-transition:all linear 0.3s;
transition:all linear 0.3s;
}
.box-show-setup { height: 0; }
.box-show-setup.box-show-start { height:20px }
.box-hide-setup {height: 0; }
.box-hide-setup.box-hide-start { height: 0px; }
You can find more about ng-animate directive in Angular's documentation: https://docs.angularjs.org/api/ngAnimate
My images were centering perfectly until I decided to place an image behind another and use z-index. I was using relative positioning, but after moving to absolute, it aligns to the left.
How can I center it, even if window is resized?
Heres my code in a jsfiddle:http://jsfiddle.net/WJPhz/
HTML
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"> </script>
<center>
<div id="sign" style="z-index:1">
<img src="http://s9.postimg.org/bql0ikclb/dope.png" alt"">
</div>
<div id="numbers" style="z-index:0">
<img src="http://s9.postimg.org/z3j212sov/image.png" alt"">
</div>
</center>
CSS
#sign {
cursor: pointer;
max-width: 241px;
position:absolute;
}
#numbers {
cursor: pointer;
max-width: 241px;
position:absolute;
}
Javascript
$(document).ready(function() {
$('#sign').hide().delay(1000).fadeIn(3000);
$('#numbers').hide().delay(2000).fadeIn(3000);
$("#sign").click(function() {
$('#sign').fadeOut(3000);
});
});
A workaround would be to put your images in another div and center that div:
html
<div class="center">
<div id="sign">
<img src="http://s9.postimg.org/bql0ikclb/dope.png" alt"" />
</div>
<div id="numbers">
<img src="http://s9.postimg.org/z3j212sov/image.png" alt"" />
</div>
</div>
css
.center {
position:relative;
max-width: 241px;
margin:0 auto;
}
#sign {
cursor: pointer;
max-width: 241px;
position:absolute;
top:0;
left:0;
z-index:2;
}
#numbers {
cursor: pointer;
max-width: 241px;
position:absolute;
top:0;
left:0;
z-index:1;
}
http://jsfiddle.net/peteng/WJPhz/2/
Try this one maybe this can help http://jsfiddle.net/markipe/WJPhz/1/
CSS
left:50%;
margin-left: -120px; /*div width divide by 2*/
#sign {
cursor: pointer;
max-width: 241px;
position:absolute;
margin-left:calc(50% - 120px);
}
#numbers {
cursor: pointer;
max-width: 241px;
position:absolute;
margin-left:calc(50% - 120px);
}
This should work.