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>
Related
This is a sample of what works:
<html>
<head>
<script type="text/javascript" src="dojo/dojo.js">
</script>
<script language="javascript" type="text/javascript">
require(["dojo/dom","dojo/fx/Toggler","dojo/topic","dojo/domReady!"],
function(dom,Toggler,topic){
var toggler = new Toggler ({
node: "test"
});
alert("something");
toggler.hide();
});
</script>
</head>
<body>
<div id="test">This is just a test.</div>
</body>
</html>
And when I add display: none to my div (and using toggler.show()), it stops working. This is a sample of what does not work:
<html>
<head>
<script type="text/javascript" src="dojo/dojo.js">
</script>
<script language="javascript" type="text/javascript">
require(["dojo/dom","dojo/fx/Toggler","dojo/topic","dojo/domReady!"],
function(dom,Toggler,topic){
var toggler = new Toggler ({
node: "test"
});
alert("something");
toggler.show();
});
</script>
</head>
<body>
<div id="test" style="display:none">This is just a test.</div>
</body>
</html>
Question:
Why is this happening?
Is there something fundamentally wrong with the way I am using dojo or its toggler module?
What is the alternative to toggler (if any), which I can use with display: none?
Note:
I have checked various possibly duplicate links but they all provide workarounds as mentioned below:-
Using dojo.style("test","display","") works, but in complex projects it messes with the alignment etc.
Removing display:none or replacing it with visibility: hidden is not an option for me. It works, but I would like to avoid workarounds if an actual solution exists.
The Toggler Animation uses the fadeIn and fadeOut functions to change the visibility of the Node. which in-turn updates the opacity of the node. which means, node is still there, its just not visible.
You setting the display to none does not update when you use the Toggler to show. Also, setting the display property allows other node to occupy the place held by current node.
So, you need to decide what is that you want. whether you want to use Toggler or use dojo.style. You you wish to continue with Toggler, then instead of display you need to set the opacity to 0.
Code Example:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="intro">
</div>
<div id="fullsite"></div>
</body>
</html>
jQuery:
$("#showfullsite").click(function() {
$('html, body').animate({
scrollTop: $("#fullsite").offset().top
}, 2000);
$('html, body').css('overflow', 'auto');
$('#intro').hide(2000);
});
Simple CSS:
body {
overflow: hidden;
}
Hi everyone, I am not a jQuery expert. I am the beginner. So, I have a problem. I have two div wraps, one for the intro and one for full site. I am making a site like this, When I will open my site in a browser only the top #intro div will visible and the full site will hidden. I am using the overflow: hidden; to hide everything other side of the computer screen. I have a control in the #intro div screen to unlock the full site. So, When I will click in the control the site will scroll to #full-site. I am doing it using query and I am adding $('html, body').css('overflow', 'auto'); to show the hidden part of the site. Also, I am adding $('#intro').hide(2000); to hide the top #intro.
At this time top #intro is hiding and the scroll effect is working. But the #intro div content going left side, right side when the #intro is hiding and the scroll effect is not going targeted id. It's going very down from the targeted div. How can I do the work properly?
You wrote #fullsite in your javascript, but <div class="fullsite"></div> in your HTML.
You need to change your HTML as <div id="fullsite"></div>.
The same error for intro.
Remember: for accessing to ID you should prefix with #, for classes you should use ..
You can read more about the selectors here: http://api.jquery.com/category/selectors/basic-css-selectors/
In your case I prefer the solution based on "id" and not on "classes". Infact any valid HTML document can contain many elements using the same class, but shouldn't exist more element with the same id.
This means that $(".aaa") will return a list containing any element with aaa class, but $("#aaa") will return the only element with aaa id.
is this how you want to run the code
$("#showfullsite").click(function() {
$('html, body').animate({
scrollTop: $(".fullsite").offset().top
}, 2000);
$('html, body').css('overflow', 'auto');
$('.intro').hide(2000);
});
.container {
overflow: hidden;
height: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="wrapper">
<div class="intro">
go to fullsite
</div>
<div class="fullsite">this is fullsite</div>
</div>
</div>
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 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);
});
});
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>