I am trying to make an animation that must only be shown within a specific margin. For example, I have a square div from left to right(100px to 500px) and top to bottom(100px and 500x). A picture is inside this square, the picture will animate from left to right. What I want is to progressively hide the picture when it reaches the square left corner until the picture is completely hidden. This is something similar to a sliding banner. I have tried by setting div margins, but did not work. I am using jquery, but I am open to other libraries. Any suggestion, page or anything will be helpful.
This is an example of what I am doing. The id=picture is sliding to 900px, but what I want is to progressively hide the picture once it has reached the 500px of the id=square.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<style>
body{ background-color:#94B8B8;}
</style>
</head>
<body><!--border-color:white-->
<div id="square" style = "width:500px;height:500px;background-color:blue;position:relative;">
<div id="picture" style = "width:100px;height:100px;background-color:white;position:relative;top:50px;left:50px;"></div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$('html').mousedown(function(e){
$("#picture").animate({left:"900px"},1000);
});
});
</script>
Thanks,
Joe|_
jsfiddle: http://jsfiddle.net/jZaxW/1/
You need to add overflow hidden to the square.
CSS:
body{ background-color:#94B8B8;}
#square{overflow:hidden;}
Also, you are loading your libraries in the wrong order. jQuery must be loaded before jQueryUI, although that isn't the issue at hand.
http://jsbin.com/unoqew/1/edit
$(document).ready(function(){
$('html').mousedown(function(e){
$("#picture").animate({left:350, opacity:0},1000);
});
});
Related
Whilst creating a jQuery dropdown menu i ran in to a most peculiar problem - an element that has been hidden is still affecting the page. Why is this happening, and how can I fix it? It is affecting the functionality by blocking part of the button, forcing one to call the function from a unblocked part. For example;
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#start").mouseenter(function(){
$("#box").stop().toggle();
$("#box").stop().animate({
top:'50px',
opacity:'1'
},400,function(){
});
});
$("#start").mouseleave(function(){
$("#box").stop().animate({
top:'25px',
opacity:'0'
},400,function(){
$("#box").stop().toggle();
});
});
});
</script>
</head>
<body>
<button id="start">Start Animation</button>
<div id ="box" style="background:#98bf21;height:100px;width:100px;position:absolute;opacity:0;display:none;top:25px;">
</div>
</body>
</html>
EDIT: set the top setting to ten px to completely cover up the button if you can't see the problem.
I've just made a Fiddle where the problem is solved using z-index:-1; for the div. When this z-index is removed, the mouseenter of the button is not working for the lower part of the button because the animated div, though not visible, covers part of the button.
I am trying to use the jquery custom scrollbar plugin.
My html:
<body>
<div style="height:10000px"></div>
</body>
javascript:
$("document").ready(function(){
$("body").customScrollbar();
});
Yes, I linked jquery, the js and css file.
When I load the page, it is blank. Without the javascript, it is fine.
The plugin can be found here:
http://plugins.jquery.com/custom-scrollbar/
You need to set the skin in the body and set width and height in pixels. Percentages or use of CSS3 calc doesn't works (if you set the width and height in body). Maybe you would have to modify the CSS to get better results.
<head>
<style type="text/css">
body{
width: 200px;
height: 200px;
}
</style>
</head>
<body class="modern-skin">
<div style="height:10000px">asdf SAS</div>
<script>
$(window).load(function(){
$("body").customScrollbar({updateOnWindowResize:true});
});
</script>
</body>
Look! it's just a band-aid.
If you need a better solution, I recommend you to implement this example from plugin website. Here's an example of how to adjust the scrollbar to the window size.
I want to use jQuery or Javascript to take my logo and when the page loads, slide it from the left hand side of the page and make it stop and stay at it's resting spot about mid way through the page. (Logo div id="mylogo")
$(document).ready( function () {
$("#myLogo").animate("aCSSAttribute", "toThisValue");
});
also check:
http://api.jquery.com/animate/
If you show your effort, then I can help you out better.
You'll probably want something like this: http://jsfiddle.net/SATMY/1/
Your question is not clear at all, so it is hard to say whether it is possible that my answer is, indeed, a correct answer.
$("div#logo").animate({"marginLeft":"-50px"}, 800);
And initial CSS:
margin-left: -900px; /* Before slide-in */
You'll need to work out just how far it needs to move, the example below makes an assumption of x% but you can do this to the pixel should you need to.
Don't forget to position your logo, and to make sure the outer element has some width/display definition.
Fiddle
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#main {width:100%;}
#mylogo{border:1px solid red;width:200px;height:100px;display:block;position:relative}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#mylogo').animate({left:'+=25%'});
});
</script>
</head>
<body>
<div id="main">
<div id="mylogo"></div>
</div>
</body>
</html>
I have a series of divs with images as backgrounds, fairly large images at that, 1-2 MBs.
What I'd like to do is only load the content within them when they're visible.
(They're display:none by default and onclick of various links I use jquery to slide them down/up).
you should post your code, but I think this might be what you are looking for.
html
Link to click
<div id="imgname"></div>
jquery
$('a').click(function(){
$('div#imgname').html('<img src="image.path" />');
});
send html and slide the div block down
Link to click
<div id="imgname"><img src="image.path" /></div>
Below is a rough sketch of an idea which might work. Create hidden image tags for each of the photos you want to load, attaching onload event handlers directly. insert simply takes the image which just loaded and creates a css background rule to be inserted into the appropriate div.
<!DOCTYPE html>
<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type="text/javascript" charset="utf-8"></script>
<style type="text/css" media="screen">
div.placeHolder {
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<img data-id='imageA'
src='http://some-large-image.jpg'
style='display:none;'
onload='insert(this);' />
<div data-id='imageA' class='placeHolder' style='display:none;'></div>
<script>
function insert(img){
$img = $(img);
$div = $('div.placeHolder[data-id='+$img.attr('data-id')+']');
var cssSnippet = "transparent url("+ $img.attr('src') +") no-repeat 0 0";
$div.css('background', cssSnippet).show();
}
</script>
</body>
</html>
I have a modal box with a defined height. Inside of this box there is an accordion box that expands when a user clicks a link. The height of the accordion box when it is toggled exceeds the height of the modal box and thus a scrollbar appears.
I would like to automatically scroll the bars down to its lowest point to display the new content in the accordion box.
The accordian box looks like this:
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
Is there a way to integrate this scroll down function into the existing function? Is there an existing Jquery function for this type of behavior?
If I understand what you're looking for...
If you'd like a nice smooth scroll, then the scollTo plugin is a great choice.
If you don't care, just use a hash. location.hash = '#someid';
If you don't want to rely on any plugin, or change the actual URL, you could use scrollTop, see http://api.jquery.com/scrollTop/
Cheers.
The trick is to use an outer container-div which is scrollable. This allows to find out the size of the inner div which holds the actual content.
My solution (You have to do some adjustments for your accordion):
<html>
<head>
<style>
#container {
overflow-y: scroll;
height: 200px; /* defined height */
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<!-- dynamic content -->
</div>
</div>
</body>
<script type="text/javascript" src="http://jquery.com/src/jquery-latest.js" ></script>
<script type="text/javascript">
function onNewContent() {
$("#container").scrollTop($("#content").height());
}
//test
$(document).ready(function() {
for(var i = 0; i < 500; ++i)
$("#content").append($("<div/>").html(i));
onNewContent();
});
</script>
</html>