I created a graph using html, now I want to give it a nice effect when it initially loads. I want the bars of the graph to fly in from the left. The code below does that, only problem is each bar ends up with 70% width (obviously since I set that in the jQuery code). Instead I need that number to be unique to the width set within the bars (span tags). I assume the answer would be something like:
$(this).attr('width')...
but I can't get it to work, please help.
The Code:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<style type="text/css">
div.graph { display: none; border: 1px solid red; height: 200px; width: 400px; margin: 0 auto; }
div.graph span { display: none; display: block; background: red; height: 20px; margin-bottom: 10px; }
</style>
<script type="text/javascript">
$(document).ready(function() {
$('div.graph').fadeIn('slow');
$('div.graph > span').animate({
width: "70%"
}, 1500 );
});
</script>
<div class="graph">
<span style='width:10%'></span>
<span style='width:40%'></span>
<span style='width:25%'></span>
<span style='width:15%'></span>
<span style='width:10%'></span>
</div><!-- graph -->
edit
After reading your code, if you don't care for non-JS support [there are many casex when you don't], you can use .data() method [very elegant, too :)]
HTML:
<span data-width="10%">Hello</span>
JS:
$('div.graph > span').each(function(){
$(this).animate({
width: $(this).data('width')
}, 1500 );
});
updated example
http://jsfiddle.net/vGUM7/2/
code
.animate({
'width': $(element).width()
},500);
example
http://jsfiddle.net/vGUM7/1/
[updated with %]
Try this on for size:
$('div.graph > span').each(function(){
var w=$(this).width();
$(this).width(0);
$(this).animate({
width: w
}, 1500 );
});
you could do something like:
$(document).ready(function() {
$('div.graph > span').each(function() {
var $this = $(this);
var w = $this.width(); // Grab what it should be
$this.width(0); // Reset so it does the animation
$this.animate({
width: w
}, 1500 );
});
$('div.graph').fadeIn('slow');
});
It reads what you want the bar to be, then sets it back to 0. setting up the animation to go. After its all set, the fade in starts
Try this...
$('div.graph').fadeIn('slow');
var bars = $('div.graph > span');
for(var i=0; i<bars.length; i++){
var w = $(bars[i]).width();
$(bars[i]).width(0);
$(bars[i]).animate({
width: w
}, 1500);
}
$(this).width() should work, or else $(this).css('width');
however .css('width') will return the value that the css has, so could be '10%' for example or 'auto'
Related
This is my script for counting number given the final number (see html).
What I want to do is to add a thousands separator. As it is my code will count the number from 0 to eg. 100,000 but it will show : "100000" which doesn't look good.
PS: I've tried toLocaleString() but it didn't work in my code or I didn't use it correctly. The problem with this is that it will not show the thousands separator WHILE animating the counting.
JS
<script>
var a = 0;
$(window).scroll(function() {
var oTop = $('#counter').offset().top - window.innerHeight;
if (a == 0 && $(window).scrollTop() > oTop) {
$('.counter-value').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
},
{
duration: 5000,
easing: 'swing',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
//alert('finished');
}
});
});
a = 1;
}
});
</script>
HTML
<div class="counter-value" data-count="100000">0</div>
Sometimes the answer is right before our eyes..
step: function() {
$this.text(Math.floor(this.countNum).toLocaleString());
},
complete: function() {
$this.text(Number(this.countNum).toLocaleString());;
//alert('finished');
I need to give all the credit to #PatrickEvans. Thank you.
Instead of using divs use elements that'll work for you:
Tag Purpose
<input type='range'> Store the current offset value: 0 to 100,000
<output></output> Display the value of <input type='range'> formatted with Intl.NumberFormat()
<form> Listens for the input event and trigger()s a synthetic input event when user scrolls.
Details commented in Demo
Demo
* {
margin: 0;
padding: 0
}
html,
body {
overflow-x: hidden;
font: 600 16px/1.5 Consolas;
width: 100%;
height: 100%;
display: table;
margin: 0 auto;
}
#countDown {
position: relative;
width: 96vw;
height: 12600ch;
overflow-x: hidden;
overflow-y: scroll;
margin-top: 50vh;
z-index:-1;
}
/* The input is hidden because it cannot keep a text of numbers
and commas if it's a type='range'. Don't want to have it as a
type='text' because it's more work to validate */
#counter {
display: none
}
#set {
position: fixed;
width: 15%;
height: 96vh;
z-index: 1;
top: 2vh;
text-align: center;
}
#counterView {
display: block;
margin-top: calc(50vh - 8px);
}
<html>
<head></head>
<body>
<form id='countDown'>
<fieldset id='set'>
<input id='counter' type='range' min='0' max='100000' value='100000'>
<output id="counterView" for='counter'>100,000</output>
</fieldset>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var a = 0;
$(document).scroll(function() {
/* label#0.mark is a fixed position at the top of viewport
|| The form#countDown is 12596ch high = window.innerHeight
*/
var oTop = $('#set').offset().top + window.innerHeight;
// As the distance between top of viewport decrease...
if ($(window).scrollTop() < (oTop)) {
// The form fires an input event
$('#countDown').trigger('input');
// The input records the distance
$('#counter').val(100315 - Math.round(oTop));
}
});
// The form is bound to input event
$('#countDown').on('input', function(e) {
// Create a special built-in Object
var commas = new Intl.NumberFormat('us-US');
// Get the input's value and convert it into a number
var c = Number($('#counter').val());
// The value of output = value of input
var cV = Number($('#counterView').val());
// Display formatted value in output
$('#counterView').val(commas.format(c));
});
</script>
</body>
</html>
I have a horizontal list of images in a div. Each image has a width of 60%. I want to display them like this, at a time only 3 images should be visible the first section should only contain 20% of the image, second should contain 60% (Complete) and third should contain 20% of the image. Problem arises when i want to implement this for a large list of images.
So lets say i have 5 images, i want them to be like this first image to be 20%, second to be 60 % and third to be 20%. When the next button is clicked i want the second image to become 20% , 3rd image 60%(Complete) and 4th image to be 20% width and so on.
This is the code that i have come up with
<div class="center" id="content">
<!--First Image 20%by default--><div id="internal-cover" class="internal" style="width:20%"></div>
<!--Second Image--><div id="internal" class="internal"></div>
<!--Third Image--><div id="internal" class="internal"></div>
<!--fourth Image--><div id="internal" class="internal"></div>
<!--Fifth Image--><div id="internal" class="internal" ></div>
</div>
<style type="text/css">
body
{
margin: 0px auto;
height: 100%;
width: 100%;
overflow: hidden;
}
/* Put your css in here */
.internal{
width: 60%;
height: 100%;
background-size:cover;
display: inline-block;
}
.center{
float: left;
width: 100%;
height: 100vh;
overflow: hidden;
/*will change this to hidden later to deny scolling to user*/
white-space: nowrap;
}
</style>
</body>
</html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Add your javascript here
var first =0;
var second = first+1;
var third= second+1;
var ctr=0;
$('#internal-cover').addClass("left-button");
$(document).on("click",".right-button",function(){
event.preventDefault();
//resetSize();
$('#content').animate({
scrollLeft: "+=812px"//20%Left 60-40% = 60%of Width
}, "fast");
console.log(
$('.center').scrollLeft()
);
first++;
second++;
third++;handleSet();
});
$(document).on("click",".left-button",function(){
event.preventDefault();
//resetSize();
$('#content').animate({
scrollLeft: "-=812px"
}, "fast");
first--;
second--;
third--;
handleSet();
});
function resetSize()
{
$('.internal').each(function(){
$(this).css("width","60%");
});
}
function handleSet()
{
console.log(first+"---"+second+"---"+third);
$('.internal').each(function(){
$(this).removeClass("left-button");
$(this).removeClass("right-button");
});
$('.internal'+first).addClass("left-button")
$('.internal'+third).addClass("right-button");
}
</script>
Something like this
For anyone in future seeking a solution to this. Please have a look at this page https://gist.github.com/tim-reynolds/3019761
var out = $('.center'); //Outer Div containing all the child elements
var tar = $('#internal-target')); //Identifier of the target element, theone
that needs to be centered.
var x = out.width();
var y = tar.outerWidth(true);
var z = tar.index();
var q = 0;
var m = out.find('.internal');
//Just need to add up the width of all the elements before our target.
for(var i = 0; i < z; i++){
q+= $(m[i]).outerWidth(true);
} out.animate({
scrollLeft: Math.max(0, q - (x - y)/2)+"px"
}, "fast");
My breakpoint is 1000px and having a class in <header>.But my document is neither following any one of the condition.
Here is the prblem with css:
body:not(.logged-in) .header-xs {
top: 0;
padding-top: 11vh;
}
and the problem with js is:
jQuery(window).on('load resize', function(){
if(jQuery(window).width() > 1000 && !jQuery('header').hasClass('header-xs')){
jQuery('body').css('margin-top', '0');
jQuery('header').css({'margin-top': 'inherit', 'padding-top' : 'inherit'});
}
})
I am working on wordpress.Here when a person is logged in then the logged-in class is added to <body>.but i'm working without being logged-in.
And js once it adds 'margin-top': 'inherit'; 'padding-top' : 'inherit' persists even i resize to mobile width size.
I'm trying my best to understand your problem, so try this and let me if it is close to what you are trying to do.
Also the css you have, if you try to target a header above body with a class, it won't really work. You might need use js.
jQuery(window).on('load resize', function() {
console.log('resize - '+jQuery(window).width());
if (jQuery(window).width() > 1000) {
jQuery('header').removeClass('header-xs');
jQuery('body').css('margin-top', '0');
jQuery('header').css({
'margin-top': 'inherit',
'padding-top': 'inherit'
});
} else {
jQuery('header').addClass('header-xs');
}
})
body:not(.logged-in) .header-xs {
top: 0;
padding-top: 11vh;
background: red;
}
body {
background: green;
}
.header-xs {
boder: 15px solid blue;
height: 250px;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header-xs">
</header>
<body>
</body>
I am using the jquery UI to create a floating window. I am able to create window. But I am having trouble in making it floating. I want that the window should be in top right corner of the "body". (now you can see its on right but at bottom) and I also want to make it moving. When I will scroll the page the window should also scroll along with it. e.g. http://manos.malihu.gr/tuts/jquery-floating-menu.html
Here is the code what I have done so far.
Please find the code on http://jsfiddle.net/z8rW6/1/
Javascript Code:
$(document).ready(function(){
$("#dialog").dialog();
var $parent = $('#body');
var windowHeight = $(window).height();
var parentAbsoluteTop = $parent.offset().top;
var parentAbsoluteBottom = parentAbsoluteTop + $parent.height();
var topStop = parentAbsoluteTop + $( ".selector" ).dialog( "option", "height" );
$('#dialog').dialog({ width: 300,height: 600 }).dialog('widget').position({
my: 'right top',
at: 'right top',
of: $('#body')
});
$(window).scroll(function(event) {
var windowBottom = $(window).scrollTop() + windowHeight;
if (windowBottom < topStop)
$('.selector').dialog({ dialogClass: 'myPosition1' });
else if (windowBottom >= topStop && windowBottom <= parentAbsoluteBottom)
$('.selector').dialog({ dialogClass: 'myPosition2' });
else
$('.selector').dialog({ dialogClass: 'myPosition3' });
})
CSS Code:
#page{
width:800px;
margin:0 auto;
}
.myPosition1 {
position: 'absolute',
top: '0px',
bottom: 'auto',
Right: '0'
}
.myPosition2 {
position: 'fixed',
top: 'auto',
bottom: 'auto',
Right: '0'
}
.myPosition3 {
position: 'absolute',
top: 'auto',
bottom: '0px',
Right: '0'
}
#header{
border:1px solid blue;
height:15px;
margin:8px;
}
#body{
border:1px solid blue;
height:5600px;
margin:8px;
position: relative;
}
#footer{
border:1px solid blue;
height:15px;
margin:8px;
}
h1,h2{
padding:16px;
}
#debug {
position: fixed;
bottom: 0;
right: 0;
height: 100px;
width: 100px;
color: red;
}
Html Code:
<html>
<head>
<LINK href="css/style.css" rel="stylesheet" type="text/css">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script language="javascript" type="text/javascript" src='javascript/behaviour.js'></script>
</head>
<body style="font-size:62.5%;">
<div id="page">
<div id="header"><h1>header</h1></div>
<div id="body" >
<h1>content top -> when scrolling up the box should STOP here (at the line right above this text)</h1>
<div id="dialog" title="Detailed FeedBack">I'm in a dialog </div>
<span style="position: absolute; bottom: 0; ">content bottom -> when scrolling down the box should STOP here (at the line right below this text)</span>
</div>
<div id="footer"><h1>footer</h1></div>
<div id="debug"></div>
</div>
</body>
</html>
:) All of these answers are great ways to handle the question you technically asked... how to do it with jQuery. However - it is far easier to do it with very simple CSS.
Example:
<head>
<style type="text/css">
.myDialog {
padding: 5px 10px;
background: yellow;
border: 1px solid #999;
position: fixed; /* This is the magic - stays during scroll. */
top: 0; right: 0; /* These coordinates are now in
relation to the first parent
with non-static positioning (body) */
}
.hidden {
display: none;
}
</style>
</head>
<body>
<!-- The rest of your page -->
<!-- Put your dialog at the end of the body (or the beginning)
This way you don't have to worry about it getting hung up
within the positioning boxes of any other elements -->
<div class="myDialog hidden">
This is my dialog content!
</div>
</body>
<script type="text/javascript" language="javascript">
// Now you can just toggle on and off the "hidden"
// class to make the dialog hide/show.
$('#SomeButton').bind('click', function (ev) {
$('.myDialog').toggleClass('hidden');
});
</script>
The exact same principles can be applied to your Modal dialog to make it move with the scrolling of the page, and that sort of thing.
For a working example of the above, take a look at this jsFiddle: http://jsfiddle.net/WSZXL/
This should work with your HTML, though you should increase #footer's height (like to 400px) in your CSS to be able to confirm that it works :
var $d;
$(document).ready(function(){
var dlg_width = 300;
var dlg_height = 200;
var dlg_offset_x = $("#page").width() - dlg_width + 100;
var dlg_margin_top = $("#header").outerHeight(true); // includeMargins=true
var dlg_margin_bottom = $("#footer").outerHeight(true); // includeMargins=true
$d = $('#dialog').dialog({
width: dlg_width,
height: dlg_height,
position: [dlg_offset_x, dlg_margin_top]
});
$(window).bind('scroll', function(evt){
var scrollTop = $(window).scrollTop();
var bottom = $(document).height() - scrollTop;
$d.dialog("option", {"position": [
dlg_offset_x,
((dlg_margin_top - scrollTop > 0) ?
dlg_margin_top - scrollTop :
((bottom - dlg_height > dlg_margin_bottom) ?
0 :
bottom - dlg_height - dlg_margin_bottom
)
)
]});
});
});
You can see it live here : http://jsfiddle.net/5TFQy/10/
Note that there are some quircks though:
dialog sticks to the right of the viewport, when it should stick to the right of the #body. Did I miss something, or is it a limitation of dialog()?
dlg_margin_bottom = $("#footer").outerHeight(true) isn't enough of a value to pixel-perfectly honour your bottom-blue-line requirement. #body's margin and border sizes should certainly be added. Tried to keep it simple not to complicated.
I hope this will help you:
http://jsfiddle.net/lytican/UxZKH/2/
I was wondering how I could slide up a banner at the bottom of my page that is hidden.
For instance:
Page loads
3 seconds later, the banner slides up from bottom of page
I want to be able to do this without any scrollbars appearing (no change in page height) and without revealing the banner prior to it sliding up.
I looked at slideUp() and slideToggle(), but I couldn't find a way to make it work to my liking :-/
Here's what I originally tried:
$(document).ready(function() {
$('.serverad').delay(3000).slideToggle('slow', function() {
// Animation complete.
});
});
And the CSS was visiblity: hidden;
use a position:fixed on the banner ad, and animate the bottom attribute to 0
have the initial bottom attribute be the a negative of its height.
<style>
.serverad
{
height:60px;
position:fixed;
left:0px;
bottom:-60px;
}
</style>
<script>
$(document).ready(function() {
$('.serverad').delay(3000).animate({bottom:"0px"},600);
});
</script>
I think you may want something along these lines:
HTML:
<body>
<div class="serveraddcontainer">
<div class="serveradd"></div>
</div>
</body>
CSS:
body{
overflow: hidden;
}
.serveraddcontainer{
width: 100%;
height: 80px;
position: absolute;
bottom: -80px;
}
.serveradd{
width: 400px;
height: 80px;
background-color: red;
margin: auto;
}
Javascript:
setTimeout(function(){
$('.serveraddcontainer').animate({'bottom': '0'});
}, 3000);
Example JSFiddle Here
Animate the height property instead of top:
In you CSS:
.serverad {
...
height: 0;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
visiblity: visible;
overflow: hidden;
...
}
And in your JS, change the animation code to:
$(document).ready(function() {
$('.serverad').delay(3000).animate({height: '30px'}, 'slow', function() {
// Animation complete.
});
});
Here's one approach:
var stepDurations = 3000;
var reveal = window.setTimeout(
function(){
$('#banner').animate(
{
'height' : '30px'
}, stepDurations,
function(){
$(this).animate(
{
'bottom' : $(window).height() - $(this).height()
}, stepDurations);
});
},stepDurations);
JS Fiddle demo.
Turned the above into a function:
function slideReveal(target, height, stepDuration, revealName){
if (!target) {
return false;
}
else {
var height = height || '30px',
stepDuration = stepDuration || 2000,
revealName = revealName || 'reveal';
revealName = window.setTimeout(
function(){
$(target).animate(
{
'height' : height
}, stepDuration,
function(){
$(this).animate(
{
'bottom' : $(window).height() - $(this).height()
}, stepDuration);
});
},stepDuration);
}
};
// call with:
slideReveal($('#banner'), '3em', 100, 'revelation');
JS Fiddle demo.