I wrote a small snippet of a simple chat style program.
<html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("button").on("click", function(){
$('.inner').scrollTop($('.container')[0].scrollHeight);
var a = new Date();
$(".container").append("<p>"+a+"</p>");
if($(".container").height()>$(".inner").height()){
$(".container").css("bottom", "auto");
}
});
});
</script>
<style type="text/css">
.wrapper{
width:300px;
height: 500px;
overflow: hidden;
}
.inner{
width: 100%;
height: 100%;
overflow-y: scroll;
background-color: #ccc;
position: relative;
}
.container{
position: absolute;
bottom: 0;
background-color: yellow;
}
</style>
<body>
<div class="wrapper">
<div class="inner">
<div class="container">
<p>Hey buddy!</p>
</div>
</div>
</div>
<button>Try Me!</button>
</body>
</html>
The program is working now, but the scroll bar is not scrolled to the bottom. What have I done wrong? Please help me on jsfiddle.
You just have to scroll after you added the new html :
demo
$(function(){
$("button").on("click", function(){
var a = new Date();
$(".container").append("<p>"+a+"</p>");
if($(".container").height()>$(".inner").height()){
$(".container").css("bottom", "auto");
}
$('.inner').scrollTop($('.container')[0].scrollHeight);
});
});
You can also try like this,
$("button").on("click", function(){
$(document).scrollTop($(document).height());
});
nafischonchol, thank you so much for this answer, amazing I used it like this, and it keeps the scrollbar at the bottom all the time.
$(document).ready(function(){
var intervalId = window.setInterval(function(){
$(document).scrollTop($(document).height());
}, 200);
});
Related
Alright so I am trying to get an on hover function to work where it the div that I am on will pause on hover and start up again when my mouse has left the hover area. Here is what I have so far
HTML
<div id="slideshow">
<div>
<iframe width="400"; " height="290"; src="www.google.com"></iframe>
</div>
<div>
<iframe width="400"; " height="290"; src="www.google.com"></iframe>
</div>
<div>
<iframe width="400"; " height="290"; src="www.google.com"></iframe>
</div>
</div>
CSS
<style>
#slideshow {
position: relative;
width: 340px;
height: 340px;
padding: 1px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: relative;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
</style>
jQuery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$("#slideshow > div:gt(0)").hide();
$("#slideshow").hover(function () {
this.stop();
}, function () {
this.start();
});
setInterval(function() {
$('#slideshow > div:first')
.fadeOut(0)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 10500);
</script>
any help on the issue would be greatly appreciated. I have tried a few different things that haven't worked such as .hover(), .stop(), and clearInterval(). I think my execution is all wrong. Thanks in advance.
You begin learn javascript. you must read document and understand function to use api like jquery and other javascript library. please understand function and use it this.start() and this.stop() where you define it?
You can achieve your goal using clearInterval on mouseenter event.
Try this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>slideshow</title>
<style>
#slideshow {
position: relative;
width: 400px;
height: 290px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow iframe {
position: absolute;
top: 0px;
left: 0px;
height: 100%; /* fit to parent */
width: 100%;
display: none;
}
#slideshow iframe:first-child{display:block;} /*Initially display
the first iframe */
</style>
</head>
<body>
<div id="slideshow">
<iframe src="http://www.example.com"></iframe>
<!-- You cannot use www.google.com. The reason for this is,
that Google is sending an "X-Frame-Options: SAMEORIGIN" response header.
This option prevents the browser from displaying iFrames that are not hosted
on the same domain as the parent page. -->
<iframe src="http://www.example.com"></iframe>
<iframe src="http://www.example.com></iframe>
</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
myinterval = doAnimation(); // Start the animation
$('#slideshow').on({
mouseenter: function(e){
clearInterval(myinterval); //stop animation
},
mouseleave: function(e){ //restart animation
myinterval = doAnimation();
}
});
// Animate the slideshow.
function doAnimation(){
return setInterval(function(){
$('#slideshow :first-child')
.fadeOut()
.next('iframe')
.fadeIn()
.end()
.appendTo('#slideshow');
}, 2000);
}
</script>
</body>
</html>
<style>
#toggle {
width: 150px;
height: 50px;
background: crimson;
color: white;
padding: 0;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
</head>
<body>
<button id="clickme">Click moi</button>
<div id="toggle">
<p>This will slide in and out.</p>
</div>
<script>
$( document ).ready(function() {
$('#clickme').click(function () {
$( "#toggle" ).toggle( "slide" );
});
});
</script>
The height of the #toggle div should be constant before/during/after the slide effect. For some reason the div slides out and then the height increases to 50px. I wanted to know why this is happens.
Removed p as it wasn't required for this example. It's works, see here:
http://jsfiddle.net/3bVZy/
If you require p, let me know.
EDIT
For the same distance, in this example, add the following to your #toggle CSS:
position: relative;
top:15px;
the problem is Paragraphe margin ,
if you set paragraphe P margin to 0 ,
it will work perfectly
p { margin: 0; }
That's will solve your problem
Try This
$(document).ready(function() {
$('#clickme').click(function () {
$("#toggle" ).toggle("slide");
});
});
I have changed the jquery reference and also the css part
Demo1
Demo2
I'm working on a popup using a hidden DIV and loading it with window.onload. As well as this I'm also loading an empty DIV with a overlay CSS style (to fill the background behind the popup with a semi-transparent black). And finally to top it off there is a close button in the top right corner of the popup.
I've scanned through SA and a couple of forums (as this is the first time I do something like this with JS) & have got most of the code from there. Yet when adding it all together, something's stopping it from working, I've been staring at this for a day now and maybe I'm just missing something really obvious?
The site is here: http://0034.eu/townapp/
And here's the code:
The JS:
<script type="text/javascript">
function show_popup()
{
document.getElementById('popup').style.display = 'block';
}
window.onload = show_popup;
</script>
<script language="text/javascript">
window.onload = function() {
$('#overlay-back').fadeIn(500);
}
</script>
<script language="javascript">
$(".close-image").click(function() {
$(this).parent().hide();
});
</script>
The HTML:
<body>
<div id="overlay-back"></div>
<div id="popup"><img class="close-image" src="images/closebtn.png" /><span><img src="images/load_sign.png" /></span></div>
The CSS:
#popup{
position:absolute;
display:hidden;
top:200px;
left:50%;
width:400px;
height:566;
margin-left:-250px;
background-color:white;
}
#overlay-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
filter: alpha(opacity=60);
z-index: 5;
display: none
}
.close-image{
display: block;
float:right;
position:relative;
top:-10px;
right: -10px;
height: 20px;
}
Thanks a lot in advance!
You must include jquery for this to work
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
// you can use just jquery for this
$(document).ready(function(){
$('#overlay-back').fadeIn(500,function(){
$('#popup').show();
});
$(".close-image").on('click', function() {
$('#popup').hide();
$('#overlay-back').fadeOut(500);
});
});
</script>
</head>
If you want to try another popup, the following link will help you,
http://blog.theonlytutorials.com/a-very-simple-jquery-popup-ready-to-use-code/
I have html code like this
<div id="wrapper">
<div id="collapse"></div>
<div id="content"></div>
</div>
the css code
#wrapper {
width:100%;
height: 100%;
}
#collapse {
width:100%;
height: 30%;
}
#content {
width:100%;
height: 70%;
}
what i want to ask is how to make the #content height fit the #wrapper when the #collapse is hidden (assuming there is a js script that make the #collapse show and hidden) ?
Try this:
HTML code:
<div id="main">
<div id="Example">Hello</div>
<button id="Toggle">Toggle</button>
<div id="body">This is Body!!!</div>
</div>
JS code:
$('#Toggle').on('click', function() {
$('#Example').slideToggle({
duration: 1000,
easing: 'easeOutCubic'
});
});
CSS code:
#Example {
height: 100px;
background: #cc0000;
}
#main{ height:500px;
background-color:yellow;}
#body{ height: 100%;
background-color:blue;}
you can remove button and customize this code.
see this DEMO
You can do this with jQuery .
See the example
[http://jsfiddle.net/atinder123/6hq8h/][1]
[1]: http://jsfiddle.net/atinder123/6hq8h/
in the same JS that hides the collapse element you add
document.getElementById('content').style.height = '100%';
and of course in reverse when you show collapse again
I'm trying to display top & bottom horizontal scroll bars for a div. I found this SO question and changed page code accordingly.
HTML/Razor
<div class="wmd-view-topscroll">
<div class="scroll-div">
</div>
</div>
<div class="wmd-view">
#Html.Markdown(Model.Contents)
</div>
CSS
.wmd-view-topscroll, .wmd-view
{
overflow-x: scroll;
overflow-y: hidden;
width: 1000px;
}
.scroll-div
{
width: 1000px;
}
Javascript
<script type="text/javascript">
$(function(){
$(".wmd-view-topscroll").scroll(function(){
$(".wmd-view")
.scrollLeft($(".wmd-view-topscroll").scrollLeft());
});
$(".wmd-view").scroll(function(){
$(".wmd-view-topscroll")
.scrollLeft($(".wmd-view").scrollLeft());
});
});
</script>
This displays bottom scrollbar as normal but the top scroll bar is disabled, what am I missing here?
Thanks in advance
UPDATE
Even when I remove the javascript, output is same. Seems Java Script code is not executing, but no javascript errors listed.
You can achieve by some tweaks in your HTML and CSS as given below;
HTML Should look like this:
<div class="wmd-view-topscroll">
<div class="scroll-div1">
</div>
</div>
<div class="wmd-view">
<div class="scroll-div2">
#Html.Markdown(Model.Contents)
</div>
</div>
CSS Should look like this:
wmd-view-topscroll, .wmd-view {
overflow-x: scroll;
overflow-y: hidden;
width: 300px;
border: none 0px RED;
}
.wmd-view-topscroll { height: 20px; }
.wmd-view { height: 200px; }
.scroll-div1 {
width: 1000px;
overflow-x: scroll;
overflow-y: hidden;
}
.scroll-div2 {
width: 1000px;
height:20px;
}
SEE DEMO
Finally managed to fix it with this code...
HTML
<div class="wmd-view-topscroll">
<div class="scroll-div">
</div>
</div>
<div class="wmd-view">
<div class="dynamic-div">
#Html.Markdown(Model.Contents)
</div>
</div>
CSS
.wmd-view-topscroll, .wmd-view
{
overflow-x: auto;
overflow-y: hidden;
width: 1000px;
}
.wmd-view-topscroll
{
height: 16px;
}
.dynamic-div
{
display: inline-block;
}
Javascript/JQuery
<script type="text/javascript">
$(function () {
$(".wmd-view-topscroll").scroll(function () {
$(".wmd-view")
.scrollLeft($(".wmd-view-topscroll").scrollLeft());
});
$(".wmd-view").scroll(function () {
$(".wmd-view-topscroll")
.scrollLeft($(".wmd-view").scrollLeft());
});
});
$(window).load(function () {
$('.scroll-div').css('width', $('.dynamic-div').outerWidth() );
});
</script>
Thanks for the answer given... It really helped me to understand the Inner Working. :)