Ok so I wanted to practice some jQuery and to do it I thought I would make the animation that Jay-Z uses on his new album commercials, he has a bar over his name and it slides left while also disappearing. On top of that I wanted the text to fadeOut, fadeIn, and then fadeOut again to give it a flashing effect before it disappeared. Can someone help me with this :l, I got the layout done but the jQuery just wont work..
<!DOCTYPE html>
<html lang="en">
<head>
<title>Magna Carta</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#bar').delay(800).css('padding-left', 0+'px');
$('#main p').fadeOut('slow' function(){
$('#main p').fadeIn('slow' function(){
$('#main p').fadeOut('slow');
});
});
});
</script>
<style type="text/css">
body {
background-color:#f2f2f2;
margin:0px;
padding:0px;
}
#main {
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-150px 0 0 -150px;
text-align:center;
}
#main p {
font-family:Admisi Display SSi;
font-size:64px;
}
#bar {
padding-left:180px;
height:25px;
background-color:black;
position:absolute;
z-index:2;
margin-top:87px;
margin-left:61px;
}
</style>
</head>
<body>
<div id="main">
<center>
<div id="bar"></div>
</center>
<p>JAY-Z</p>
</div>
</body>
</html>
You need to use the animate function here (before you were just setting the padding-left to 0, which happens immediately) and you have to fix your fadeOut and fadeIn callback functions:
$(document).ready(function () {
$('#bar').delay(800).animate({
'padding-left':0
}, 1000, function () {
// Animation complete.
$('#bar').delay(800).css('padding-left', 0 + 'px');
$('#main p').fadeOut('slow', function () {
$('#main p').fadeIn('slow', function () {
$('#main p').fadeOut('slow');
});
});
});
});
Demo: http://jsfiddle.net/BjBry/1/
Related
I'm using the code below to scroll through different divs after a timed period. However, the page keeps sliding back to bottom div when manually scrolling back up.
Is there a way to use this code but override the automatic slide back, where I can manually scroll to any div without it jumping back to the bottom before I finish reading what is in that div.
<style id="compiled-css" type="text/css">
#scroller {
overflow-y:scroll;
padding:0;
margin:0
border:1px solid #eee;
width:100%;
height:500px;
}
</style>
<body>
<div id="scroller">
<div style="width:50%;height:50%;background:#ff0000"></div>
<div style="width:50%;height:50%;background:#00ff00"></div>
<div style="width:50%;height:100%;background:#0000ff"></div>
<!--div style="width:50%;height:50%;background:#ff00ff"></div>
<div style="width:50%;height:50%;background:#ffff00"></div-->
</div>
Status: <span id="status">1</span>
<script type="text/javascript">
var scrollingUp = 0;
window.setInterval(scrollit, 3000);
function scrollit() {
if(scrollingUp == 0) {
$('#scroller').delay(2000).animate({ scrollTop: $("#scroller").scrollTop() + 500 }, 'slow');
}
}
</script>
Took me a while for this to figure it out.
Basically, you make it run on a class and set a function with timeout so that after the scrolling animation, function removes that class from a div. That way when it wants to run again it doesn't have anything to run on. And scrolling stops.
Hope this helps.
var scrollingUp = 0;
window.setInterval(scrollit, 3000);
function scrollit() {
if(scrollingUp == 0) {
$('.scroller').delay(2000).animate({ scrollTop: $(".scroller").scrollTop() + 500 }, 'slow');
}
};
setInterval(function(){ $("#scroller" ).removeClass("scroller"); }, 3000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style id="compiled-css" type="text/css">
#scroller {
overflow-y:scroll;
padding:0;
margin:0
border:1px solid #eee;
width:100%;
height:500px;
}
</style>
<body>
<div id="scroller" class="scroller">
<div style="width:50%;height:50%;background:#ff0000"></div>
<div style="width:50%;height:50%;background:#00ff00"></div>
<div style="width:50%;height:100%;background:#0000ff"></div>
<!--div style="width:50%;height:50%;background:#ff00ff"></div>
<div style="width:50%;height:50%;background:#ffff00"></div-->
</div>
Status: <span id="status">1</span>
Tried the best I could and did some research, I still couldn't figure it out.
My goal is to create an easy coded lightbox for a part of my final examination website that im working on.
Please need help with this annoying problem of mine, would be very appreciated!
$(document).ready(function () {
$('button').click(function() {
$('body').append(' <div id="lb-shadow"><p id="lb-x">[ x ]</p></div> ');
$('body').append(' <div id="lb-container"></div> ');
$('#lb-shadow').fadeIn(6000 );
$('#lb-container').fadeIn(6000);
$('#lb-shadow').click(function(){
$('#lb-container').fadeOut(6000);
$('#lb-shadow').fadeOut(6000);
$('#lb-container').detach();
$('#lb-shadow').detach();
});
});
});
#lb-btn{
position:absolute;
outline:0;
border:0;
padding:5px 10px;
cursor:pointer;
background-color:black;
}
#lb-btn p{
padding:5px;
color:#ccc;
border:1px solid white;
}
#lb-shadow{
position:absolute;
left:0;
right:0;
height:100%;
width:100%;
background-color:rgba(0, 0, 0, 0.7);
}
#lb-x{
color:#ccc;
text-transform:uppercase;
float:right;
margin:15px;
cursor:pointer;
transition: ease .3s;
}
#lb-x:hover{
color:white;
}
#lb-container{
position:absolute;
height:400px;
width:600px;
left:calc(50% - 300px);
top:calc(50% - 200px);
background-color:white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Min hemsida</title>
<link rel="stylesheet" type="text/css" href="css/cindex.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/cindex.js"></script>
</head>
<body>
<button id="lb-btn"><p> Login / Register </p></button>
</body>
</html>
If the problem is the click handler, try attaching the event listener globally like so, this way should work even if the element is created after the listener. (Otherwise the duplicate comment on your question should solve the issue)
$(document).ready(function () {
$(document).on('click', '#lb-shadow', function(){
$('#lb-container').fadeOut(6000);
$('#lb-shadow').fadeOut(6000);
$('#lb-container').detach();
$('#lb-shadow').detach();
});
$('button').click(function() {
$('body').append('<div id="lb-shadow"><p id="lb-x">[ x ]</p></div>');
$('body').append('<div id="lb-container"></div>');
$('#lb-shadow').fadeIn(6000);
$('#lb-container').fadeIn(6000);
});
});
I solved it!
I just added display:block on the lb-container and lb-shadow. Apperently the fade effects trigger it automatically and I did cut down my js code aswell.
$(document).ready(function () {
$('button').click(function() {
$('body').append(' <div id="lb-shadow"><p id="lb-x">[ x ]</p></div> ');
$('body').append(' <div id="lb-container"></div> ');
$('#lb-shadow').fadeIn();
$('#lb-container').fadeIn();
$('#lb-shadow').click(function(){
$('#lb-container').fadeOut();
$('#lb-shadow').fadeOut();
});
});
});
I found this piece of code on this site and want to use it in my project. However I'm not sure how to change this so it doesn't push the contents off the page when opening the menu. Any help would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
if( $(this).text()=="Open")
{
$(this).text("Hide");
}
else
{
$(this).text("Open");
}
$("#panel").slideToggle("fast");
});
});
</script>
<style>
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
width:90px;
height: 200px
}
</style>
</head>
<body>
<button id="flip">Open</button>
<div id="panel">Menu!</div>
</div>
<p>
Something else on the page
</body>
</html>
Hi,
I want to make a hyperlink that expands from the top down when clicked and closes when clicked again. I also want a fade effect applied to the link text.
I tried something like this :
HTML
<div id="lime">
hi
<p id="red">How are you doing?</p>
</div>
CSS
#lime
{
background-color:#deff00;
text-align:center;
}
#lime:hover{
height:300px;
transition:height 1s;
}
#lime:hover p{
opacity:1;
transition:opacity 1s;
}
#red {
opacity:0;
color:#ff0000;
}
CSS Demo
But the effect takes place on hovering over the link. What I'd like is for the link to expand from the top down when clicked.
I also tried this but I don't know anything about javascript.
HTML
<div>hi</div>
CSS
div{
background-color:#deff00;
text-align:center;
}
#expand {
height:300px;
transition:height 1s;
}
#contract {
background-color:#deff00;
transition:height 1s;
}
Javascript
$('#btn').click(function(e){
$('#expand') function(){
$('#contract').transition('height 1s');
});
};
Javascript Demo
You need to create two style class - one will expand your div to the desired height, and another will collapse it to the initial position. Code sample follows -
HTML
<div id="lime">hi</div>
CSS
div{
background-color:#deff00;
text-align:center;
height: 20px;
}
#contract {
background-color:#deff00;
transition:height 1s;
}
.expand {
height:300px;
transition:height 1s;
}
.collapse {
height: 20px;
transition:height 1s;
}
JavaScript
$(document).ready(function () {
$('#btn').click(function (e) {
if ($("#lime").hasClass("expand")) {
$("#lime").removeClass('expand').addClass('collapse');
}
else {
$("#lime").removeClass('collapse').addClass('expand');
}
});
});
DEMO.
You can easily to this using j Query.
Example shown below:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slideDown demo</title>
<style>
#lime
{
background-color:#deff00;
text-align:center;
}
.para {
color:red;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div id="lime">
hi
<p id="red" class="para">How are you doing?</p>
</div>
<script>
$( "#click" ).click(function() {
$( "#red" ).slideToggle( "slow" );
});
</script></body>
</html>
You can refer this link http://api.jquery.com/slideToggle/
I am totally agree with Sayem Ahmed's answer...
Here some additional answer
Option 1. If you are using jQuery at that time you can use toggle also for achieving this scenario.
Here is
DEMO
Option 2. You can use pure javascript code for making it done.
Here is
DEMO
Hope this will be helpful !!
How can I get same effect like this
http://bavotasan.com/demos/fadehover/
But only for anchor tags not for images, let say I have anchor background blue and I want it to change to red but with this effect, how can I do that? thank you
Use hover and animate. Note that this requires the jQuery color animations plugin.
<html>
<head>
<title>color change</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script src="http://plugins.jquery.com/files/jquery.color.js.txt" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$('a').hover(function() {
$(this).animate({
color: "#f00"
}, "fast")
}, function() {
$(this).animate({
color: "#00f"
}, "fast")
});
});
</script>
<style>
a { color: #00f; }
</style>
</head>
<body>
This changes color on hover.
</body>
</html>
In the example of changing color on an a element there is no reason to use the crossfade effect used in the link you provide.
Placing two images on top of eachother (via CSS: position and z-index). A black and white one, and a color one:
/* Assumes width and height are the same between all three elements */
.viewBox { position:relative; width:125px; height:125px; display:block; }
img.color { position:absolute; top:0; left:0; z-index:10; }
img.bandw { position:absolute; top:0; left:0; }
<a class="viewBox" href="http://google.com">
<img src="color.jpg" class="color" />
<img src="bandw.jpg" class="bandw" />
</a>
$(".viewBox").hover(
function() {
$("img.color").fadeIn();
},
function() {
$("img.color").fadeOut();
}
);
--
Alternatively, you can accomplish this without jQuery, using pure css too:
span.hov span { display:none; }
.rollover { display:block; background-image:url('bandw.jpg');
width:125px; height:125px; }
.rollover span.hov { display:none; background-image:url('color.jpg');
width:125px; height:125px; }
.rollover:hover span.hov { display:block; }
<a class="rollover">
<span class="hov">
<span>Invisible Link Text</span>
</span>
</a>
The HTML, CSS and jQuery is available on the web page for you.
Here, the creator has layed 2 images on top of each other then uses jQuery to change the opacity.
<div class="fadehover">
<img class="a" alt="" src="cbavota-bw.jpg" style="opacity: 1;"/>
<img class="b" alt="" src="cbavota.jpg"/>
</div>
$(document).ready(function(){
$(".a").hover(function() {
$(this).animate({"opacity": "0"}, "slow");
},
function() {
$(this).animate({"opacity": "1"}, "slow");
});
});