I need to create a function that will animate div sliding from the left when the page loads. It needs to delay the animation for about 5 seconds. The example can be seen at this link
http://www.exacttarget.com/blog/amazon-dash-the-skinny-on-this-stick/
just under the title there is a section with share count. I need to create a function that will slide the item that has all the numbers summarized. This is the one on the right with gray background.
Hey i am not Css expert but what the site people doing is bit from CSS as well.So i made this jsfiddle .This might help you .I am not sure this will be working in all browsers as so far.You can use jQuery as fall back for browsers who doesn't support CSS3 Transition
The code i used is :
div
{
width:100px;
height:100px;
background:red;
transition-property: margin-left;
transition-duration: 2s;
-webkit-transition-property: margin-left; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
margin-left:-100px;
}
div.active
{
margin-left:0px;
}
The jQuery code is :
$(function(){
$(".mydiv").addClass("active");
console.log($(".mydiv"));
});
Fiddle
$(document).ready(function () {
$("#slideBox").delay(5000).show("slide", { direction: "right" }, 1200);
});
html
<div id="upper_div"></div>
<div id="slideBox"></div>
CSS
#upper_div{
width:200px;
height:50px;
background-color:#E5E5E5;
float:left;
}
#slideBox{
width:50px;
height:50px;
background-color:#CCCCCC;
float:left;
display:none;
}
jQuery
$(document).ready(function () {
$("#slideBox").delay(5000).show("slide", { direction: "right" }, 1200);
});
DEMO
Related
I've made code that changes the header opacity when scrolling down, but I want it to change the background colour when it scrolls down. Not sure why but it does not change this attribute, but changes the other attributes (like opacity and transition duration). Why is it not changing the background colour?
The code input demo has a display error when uploading to this site but not sure why as it works fine on my website:
<script type="text/javascript">
var headerWrap = $('#header-wrap');
$(window).scroll(function() {
headerWrap.addClass('scroll-opacity-change');
if($(this).scrollTop() === 0) {
headerWrap.removeClass('scroll-opacity-change');
}
});
</script>
#header-wrap{
background:#D6ECFF;
width:100%;
height:auto;
border-bottom: 1px solid #CCC;
position:fixed;
top:0;/* may not be needed but no harm in having */
z-index:100000;
/* margin:0 auto; needed? */
}
.scroll-opacity-change{
opacity:0.7;
-webkit-transition-duration: 1.0s; /* Safari */
transition-duration: 1.0s;
background:#777a7c;
}
In your example the css property rules are applied based on the specificity.
Read : http://vanseodesign.com/css/css-specificity-inheritance-cascaade/
An id is more specific than a class is more specific than an element.
Due to this the background property from the id class is getting applied, you will have to either make background property in class !important (Importance has precedence over specificity) or use the #header-wrap.scroll-opacity-change
var headerWrap = $('#header-wrap');
$(window).scroll(function() {
headerWrap.addClass('scroll-opacity-change');
if($(this).scrollTop() === 0) {
headerWrap.removeClass('scroll-opacity-change');
}
});
#header-wrap{
background:#D6ECFF;
width:100%;
height:100px;;
border-bottom: 1px solid #CCC;
position:fixed;
top:0;/* may not be needed but no harm in having */
z-index:100000;
/* margin:0 auto; needed? */
}
#header-wrap.scroll-opacity-change{
opacity:0.7;
background:#000;
-webkit-transition-duration: 1.0s; /* Safari */
transition-duration: 1.0s;
}
body
{
height:1200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header-wrap">
</div>
You have a specificity problem. The id selector has a hight specificity than the class selector. So you need to make the class selector have a higher specificity. You can do that by adding the id to the selector.
Change
.scroll-opacity-change{
to
#header-wrap.scroll-opacity-change {
what i'm trying to do seems pretty simple. keyword seems. haha.
I'm trying to make text that changes back and forth between two languages. Kind of like a GIF type animation (tried that didn't like how it looked) I know flash would be the better option but I don't have those capabilities so i've turned to javascript- but my experience there isn't too great either. here's my HTML
<div id="welcomediv">
<h1 class="welcome" id="welcome">Welcome-Select your language</h1>
<h1 class="welcome" id="bienvenido">Bienvenido-Elegí tu idioma</h1>
</div>
Then I thought I could take that along with the following CSS
.welcome
{
font-size:18px;
font-weight:bold;
font-family:Century Gothic;
color:White;
margin-top:5px;
margin-bottom:30px;
position:relative;
}
#welcomediv
{
display:block;
position:relative;
top:45%;
height:30px;
overflow:hidden;
}
I did that thinking that I could use jquery to move the elements up and down and then they'd go out of view and get what i'm looking for. I want it to go up and out as the other one is sliding back into place. I achieved that. But just couldn't make it loop.
$(document).ready(function () {
$("#welcome").delay(3000).animate({ bottom: '30px' }, 1000);
$("#bienvenido").delay(3000).animate({ bottom: '45px' }, 1000);
});
This is how I did it.
Now I know this probably isn't the best way to go about this so any and all help is greatly appreciated!! How would I simply make it loop? Or should I change it up totally?
You can use setInterval for this:
var showingWelcome = true;
setInterval(function() {
if (showingWelcome) {
$("#welcome").animate({ bottom: '30px' }, 1000);
$("#bienvenido").animate({ bottom: '45px' }, 1000);
showingWelcome = false;
}
else {
$("#welcome").animate({ bottom: '0px' }, 1000);
$("#bienvenido").animate({ bottom: '0px' }, 1000);
showingWelcome = true;
}
}, 3000);
Here's a JSBin http://jsbin.com/xoziquze/1/edit?html,css,js,output that shows it working.
By the way, in my opinion JavaScript is perfectly fine for this and Flash would be overkill.
If all you're looking to do is animate the text back and forth you may want to consider using a CSS keyframe animation, like so:
Working Example
.welcome {
font-size:18px;
font-weight:bold;
font-family:Century Gothic;
color:red;
margin-top:5px;
margin-bottom:30px;
position:relative;
animation: yourAnim 3s infinite alternate; /* name, duration, number of iterations, direction */
}
#keyframes yourAnim {
0%{bottom: 0px;}
25%{bottom: 0px;}
50%{bottom: 55px}
100%{bottom: 55px;}
}
Note browser prefixes omitted for brevity.
How can i have a smooth slide down jQuery when I scroll down the page?
Like on this page:
https://www.behance.net/gallery/8571121/JobEngine-WordPress-Theme-By-Engine-Themes
I am using this code, it works but it's not smooth, it's not sliding down, it just appears with no effect:
var bar = $('div.navbar');
var top = bar.css('top');
$(window).scroll(function() {
if($(this).scrollTop() > 100) {
bar.stop().addClass('navbar-fixed-top').animate({'top' : '0px'}, 500);
} else {
bar.stop().removeClass('navbar-fixed-top').animate({'top' : top}, 500);
}
});
try to set the top value negative and animate it to 0px.
bar.stop().addClass('navbar-fixed-top').css('top','-50px').animate({'top' : '0px'}, 500);
watch my fiddle:
http://jsfiddle.net/mjGRr/
One way of Accomplishing this is by first keeping the height of the element 0px and then increasing the height as required.
check this fiddle :http://jsfiddle.net/FuH2p/ - I have done the same effect using css. I guess you have wont be having any trouble converting it to javascript!!!
HTML
<div class="outer">
<div class="inner">
<div>
</div>
CSS
.outer{
widht:100%;
height:300px;
background:#ddd;
border:5px solid #343434;
}
.inner{
position:relative;
top:0px;
width:100%;
height:0px;
background:green;
-webkit-transition:all .4s ease-in-out;
}
.outer:hover > .inner{
height:30px;
}
OR
here you go ( something like this)
keep a duplicate nav bar fixed on top with height 0px;
.duplicateNavbar{
display:fixed;
top:0px;
height:0px;
}
$(window).scroll(function() {
if($(this).scrollTop() > 100) {
$('.duplicateNavbar').animate({'height' : '56px'}, 500);
} else {
$('.duplicateNavbar').animate({'height' : '0px'}, 500);
}
});
I currently have a mobile website project in which I'm creating panels such that one panel can be viewed at a time, where when a user swipes left or right, the panel slides offscreen and a new panel slides in. Everything works fine on Android, and even behavior is acceptable on iPhone.
However, scrolling on iPhone seems to lack momentum. In other words, when "flicking" the panel up / down, it scrolls on Android natively, but on iPhone it seems to lose momentum very quickly. I'd like to find a simple CSS or combo CSS / JS solution that works, without including additional libraries if possible.
Here's the basic structure of the site:
<html>
<head>Head stuff here</head>
<body>
<div class="container">
<div class="headbox">Fixed position menu here</div>
<div id="pages">
<div class="page">Page panel here</div>
<div class="page">Page panel here</div>
<div class="page">Page panel here</div>
</div>
<div class="bottommenu">Fixed position bottom menu here</div>
</div>
</body>
</html>
Here is the basic CSS:
body {
width:100%;
overflow-x:hidden;
font-size:17px;
border-collapse:collapse;
}
.container {
width:100%;
height:100%;
overflow-x:hidden;
overflow-y:scroll;
position:relative;
/*-webkit-perspective:1000;
-webkit-backface-visibility:hidden;*/
}
.headbox {
font-size:17px;
height:2.3529em;
width:100%;
top:0;
position:fixed;
text-align:center;
color:#fff;
z-index:1;
}
#pages {
width:100%;
height:100%;
white-space:nowrap;
font-size:0;
-webkit-backface-visibility:hidden;
-webkit-transform-style:preserve-3d;
position:relative;
-webkit-transform:translate3d(-100%,0,0);
-moz-transform:translate3d(-100%,0,0);
-ms-transform:translate3d(-100%,0,0);
-o-transform:translate3d(-100%,0,0);
transform:translate3d(-100%,0,0);
}
.page {
width:100%;
height:100%;
display:inline-block;
vertical-align:top;
position:relative;
white-space:normal;
background:#fff;
font-size:17px;
}
.bottommenu {
position:fixed;
bottom:0;
left:0;
width:100%;
height:.2em;
transition:height 400ms;
-webkit-transition:height 400ms;
-moz-transition:height 400ms;
-ms-transition:height 400ms;
-o-transition:height 400ms;
z-index:1;
}
And finally, the listener for scrolling, which shouldn't interfere with CSS or the ability to repaint, but maybe I am missing something:
var that = this;
$(document).scroll(function(){
if (!that.direction && !that.loading) {
that.direction = 'vertical';
that.moving = true;
if (that.scrolling) { clearTimeout(that.scrolling); }
that.scrolling = setTimeout(function() {
that.direction = false;
that.sliding = 0;
that._getMore();
that.moving = false;
},500);
}
});
Any ideas? I've tried numerous variations of -webkit-overflow-scrolling:touch;, overflow-y:scroll;, and other possible hacks / fixes / supported syntax, but nothing seems to help. I need the content to scroll within the body tag so that on iPhone the screen resizes itself on scroll, otherwise I'd use a scrollable div. This is not an option.
I guess problem with loss of native elastic scrolling within container with position: relative; overflow: hidden.
Try -webkit-overflow-scrolling: touch; for .container.
this is what I'm working on right now
http://www.dsi-usa.com/yazaki_port/hair-by-steph/
as you can see when you click the tabs the fade in and fade outs look extremely funny. I'm wondering if anyone can take a look at the code and tell me what I'm doing wrong. I'm extremely new to Jquery and Javascript (like yesterday new) so I apologize if the code is messy. I'm wondering if 1. there was an easier way to write this and 2. if there's a way to just have the sections fade into each other/any other cool ideas anyone has.
the html structure (pulled out all of the content for space purposes)
<div id="main">
<div id="display_canvas">
</div>
<div id="nav">
<ul>
<li><a class="btn" title="contact">CONTACT</a></li>
<li><a class="btn" title="resume">RESUME</a></li>
<li><a class="btn" title="portfolio">PORTFOLIO</a></li>
<div class="clear"></div>
</ul>
<div class="clear"></div>
</div>
<div id="resume">
//contents here
</div>
<div id="contact">
//contents here
</div>
</div>
the css
*
{
margin:0;
padding:0;
font-family:verdana, helvetica, sans-serif;
}
#main
{
width:1200px;
margin:0 auto;
}
#display_canvas
{
height:700px;
background-color:#fefea8;
box-shadow:5px 5px 5px #888888;
-moz-box-shadow:5px 5px 5px #888888;
-webkit-box-shadow:5px 5px 5px #888888;
display:none;
}
.clear
{
clear:both;
}
#resume
{
clear:both;
float:right;
width:100%;
background-color:#000000;
background-image:url("../imgs/resume_back.png");
background-position:300px 0px;
background-repeat:no-repeat;
height:200px;
text-align:left;
display:none;
}
#contact
{
clear:both;
float:right;
width:100%;
background-color:#000000;
background-image:url("../imgs/contact_back.png");
background-position:left;
background-repeat:no-repeat;
height:200px;
text-align:left;
display:none;
}
#nav
{
margin:1em 0 0 0;
text-align:right;
}
#nav ul
{
list-style-type:none;
}
#nav li
{
display:inline;
}
.btn
{
margin-right:20px;
display:block;
text-align:center;
float:right;
color:#000000;
font-size:15px;
font-weight:bold;
line-height:30px;
text-decoration:none;
cursor:pointer;
width:150px;
height:30px;
}
.over
{
background-color:#888888;
color:#ffffff;
}
.active_contact
{
background-color:#000000;
color:#00a8ff;
}
.active_resume
{
background-color:#000000;
color:#9848c2;
}
.active_portfolio
{
background-color:#000000;
color:#ffffff;
}
and finally a whole mess of javascript
$(document).ready(function(){
//handles general navigation
$(".btn").hover(
function(){
$(this).addClass("over");
},
function(){
$(this).removeClass("over");
}
)
$(".btn").click(function(){
var btn = $(this);
var newClass = "active_" + btn.attr("title"); //set the new class
var section = $("#" + btn.attr("title"));
if ($("#curSection").length)
{
alert('there is a section');
var curClass = "active_" + $("#curSection").attr("title"); //get the current class active_section name
var curSection = "active"
$("#curSection").removeClass(curClass).removeAttr("id"); //remove the current class and current section attributes
btn.addClass(newClass).attr("id", "curSection"); //designate new selection
$(".currentSection").fadeOut("slow", function(){ //fade out old section
$(".currentSection").removeClass("currentSection");
section.fadeIn("slow", function(){ //fade in new section
alert('faded in');
section.addClass("currentSection"); //designate new section
});
});
}
else
{
alert('first time');
btn.addClass(newClass).attr("id", "curSection"); //designate new selection
section.fadeIn("slow", function(){
alert('faded in');
section.addClass("currentSection");
});
}
});
//handles resume navigation
$(".res-btn").hover(
function(){
$(this).addClass("res-over")
},
function(){
$(this).removeClass("res-over")
}
)
$(".res-btn[title=experience]").click(function(){
$("#scroller").stop().animate({top: "0px"}, 1000);
});
$(".res-btn[title=expertise]").click(function(){
$("#scroller").stop().animate({top: "-180px"}, 1000);
});
$(".res-btn[title=affiliates]").click(function(){
$("#scroller").stop().animate({top: "-360px"}, 1000);
});
});
if anyone has any ideas as to why this doesn't work let me know. I thought maybe it was having problems loading the content, but the content should be loaded already as they are on the screen already, just no display. I'm stumped, I saw a few posts similar to mine, so I followed some of their thinking. When I set the fadeIn() to like 5000 instead of "slow" The first 60% or so of the fadeIn is skipped and the section appears at say 60% opacity and then fades in the rest of the way. Not sure what I'm doing so thank you in advance.
Off the top of my head, I think the problem might be that you are initiating an alert dialogue box rather than a jquery Fancybox / Thickbox type of overlay lightbox which accommodates the speed at which the it animates to open or close. And in any case, I am unable to replicate the issue you are facing despite going directly to your link.
So rather than to try and resolve that chunk of codes you have picked out from different sources and since the content that you wish to display is an inline one, you might as well consider using Thickbox or Fancybox instead.
Alternatively, you could also kinda script your own lightbox without using the alert dialogue boxes if you like. It could look something like this:
HTML:
<!--wrapper-->
<div id="wrapper">
Box 1</li>
Box 2</li>
<!--hidden-content-->
<div class="box-1">
This is box 1. close
</div>
<div class="box-2">
This is box 2. close
</div>
</div>
<!--wrapper-->
CSS:
#wrapper{
background:#ffffff;
width:100%;
height:100%;
padding:0;
}
.box-1, .box-2{
display:none;
width:300px;
height:300px;
position:fixed;
z-index:3000;
top:30%;
left:30%;
background:#aaaaaa;
color:#ffffff;
opacity:0;
}
JQUERY:
$(document).ready(function(){
$(".toggle-1").click(function(){
$(".box-1").show(900);
$(".box-1").fadeTo(900,1);
});
$(".close-1").click(function(){
$(".box-1").hide(900);
$(".box-1").fadeTo(900,0);
});
$(".toggle-2").click(function(){
$(".box-2").show(900);
$(".box-2").fadeTo(900,1);
});
$(".close-2").click(function(){
$(".box-2").hide(900);
$(".box-2").fadeTo(900,0);
});
});
Well, of course there's still quite a bit of styling to be done in order for the content to appear nicely in the center of the screen, but I'm gonna be leaving that out as this is more of a question of how to control the speed of which the overlay appears.
In any case, if you wanna change the speed of which it appears or close, simply alter the "900" value to something else - a lower number means a faster animation speed and vice versa. If you have noticed, I'm applying the .hide() and .fadeTo() functions together. This is partly because I will try and enforce for the shown divs to be hidden after the Close button is clicked. This will prevent it from stacking on top of other content and thereby disabling any buttons, links or functions. You can try to play around with their "900" values as well. For e.g. when you press the close button, you can actually make .hide() execute slower in relation to the fadeTo() simply by assigning maybe 3000 to the former and 700 to the latter. This will give the illusion that it is fading only rather than fading and swinging, the latter of which is prominent when you utilize the .hide() or .show() function.
Hope this helps some how. =)