How do I add an auto scroll function to the below file?
By auto scroll I mean it automatically scrolls to the bottom within the scrollable area and then start from the top again.
I tried different JavaScript code, but none of it worked.
<div class="box">
<div class="box-heading"><?php echo $heading_title; ?></div>
<div class="box-content">
<?php foreach ($all_news as $news) { ?>
<div align="center">
</div>
<div style="
width: 98%;
height: 200px;
overflow-y:auto;">
<script type="text/javascript" src="http://domain.com/file.php"></script>
<div id="feedmain" class="feed11">PFeed</div>
</div>
</div>
<?php } ?>
</div>
</div>
The file.php we are loading is only an HTML table.
You can use overflow-y:scroll instead of overflow-y:auto.
This one worked for me.
var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;
Use CSS
.divClass{
overflow:scroll;
}
Related
I want to expand textarea but it isn't working with margin-top like this:
#sqlcontainerLoggedInPage2 {
margin-top: 60px;
}
<div class="container-fluid" id="sqlcontainerLoggedInPage2">
<textarea id="diary" class="form-control"><?php echo $diaryContent; ?></textarea>
</div>
How do I do that?
height cannot be set using margin.
If you want the textarea to take up all of the height of its parent element, then the parent element must have its height set to a definitive amount and then the textarea can have its height set to 100%.
#sqlcontainerLoggedInPage2 {
height: 60px;
}
textarea { height:100%;}
<div class="container-fluid" id="sqlcontainerLoggedInPage2">
<textarea id="diary" class="form-control">
<?php echo $diaryContent;?>
</textarea>
</div>
I'm working on chat application. On loading my PHP file I want to fix the scroll bar at the bottom of div. I have written the script to do this. I'm accessing it using CSS Id but I'm unable to make it work.
Code
//Css part
<style>
.msg-wgt-body {
height: 300px;
overflow-y: scroll;}
</style>
<script>
$(".1").scrollTop($('.1').height())
</script>
<div class="container" style="border: 1px solid lightgray;">
<div class="msg-wgt-header">
Kaps
</div>
<div class="msg-wgt-body" id="1">
<table>
<?php
if (!empty($messages)) {
foreach ($messages as $message) {
$msg = htmlentities($message['message'], ENT_NOQUOTES);
$user_name = ucfirst($message['username']);
$sent = date("F j, Y, g:i a", strtotime($message['sent_on']));
echo <<<MSG
<tr class="msg-row-container">
<td>
<div class="msg-row">
<div class="avatar"></div>
<div class="message">
<span class="user-label"><a href="#" style="color: #6D84B4;">
{$user_name}</a> <span class="msg-time">{$sent}</span></span><br/>{$msg}
</div>
</div>
</td>
</tr>
MSG;
}
}
else {
echo '<span style="margin-left: 25px;">No chat messages available!
</span>';
}
?>
</table>
</div>
You can do this using your CSS -Class as well.
<script>
$(document).ready(function(){
$(".msg-wgt-body").scrollTop($('.msg-wgt-body')[0].scrollHeight);
return false;
});
</script>
Use this above code and add this at the bottom of your PHP file(You can add this in your JS file as well). Try this it should work.
I guest you want scroll down to the bottom when the chats loaded, right!
Just replace this
</style>
<script> $(".1").scrollTop($('.1').height())
</script>
with
<script>
$("#1").scrollTop($('#1')[0].scrollHeight);
</script>
On mu profile pages I have a small div where I display awards for doing different things. to save space the div is really small but I was gone have a horizontal scroll using buttons.
<div class="award-wrapper fr" style="width:19%; margin:auto;">
<h3 class="award-title"><i class="fa fa-trophy"></i> Awards</h3>
<div class="award-content" id="inner outer" style=" margin:0 auto; text-align:center;">
<div style="float:left; height:100%; left:0; position:absolute;">
<input type="button" value="«" class="scroll_button" id="left-button"/>
</div>
<div id="myDiv" style="float: left;">
<?php include"award.php"; ?>
</div>
<div style="float:right; height:100%; right:0; position:absolute;">
<input type="button" value="»" class="scroll_button" id="right-button"/>
</div>
</div>
</div>
.scroll_button {
opacity: 0.5;
color:#fff;
padding:3px;
height:100%;
}
.scroll_button:hover {
opacity: 0.8;
color:#05c7f7;
}
.scroll_button:active {
color:#05c7f7;
opacity: 0.8;
background:#08090a;
}
not sure if any other parts of my code is necessary
If you mean having a left button to force the scrollbar left, and a similiar right to force it right, it's definitely so plausible.
https://jsfiddle.net/5ug583ff/
var button = document.getElementById('slide');
button.onclick = function () {
document.getElementById('container').scrollLeft += 20;
};
Code example found here: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
I am not 100% sure if this is the answer to your question as I didn't fully understand your question.
If you want to allow horizontal scrolling in your awards div...
Replace this:
<div id="myDiv" style="float: left;">
<?php include"award.php"; ?>
</div>
With this:
<div id="myDiv" style="float: left; overflow-x:scroll;">
<?php include"award.php"; ?>
</div>
I have the following Javascript code:
// Animate .gallery element to the correct left position.
$("#gallery-images").animate({
left : "-500px"
},1500);
Which is being applied to this HTML:
<div id="gallery-images">
<?php foreach($content1 as $img) : ?>
<div class="gallery-image-holder">
<a class="gallery-image" href="<?php echo "/granados/images/".$img['url'];?>"> <img src="<?php echo "/granados/images/".$img['url'];?>" /></a>
</div>
<?php endforeach;?>
</div>
With this CSS:
#gallery-images{
display: inline-block;
width:37em;
height:11em;
overflow-x: hidden;
padding-top: 4em;
float:left;
margin-right: .5em;
}
Everything appears to work, at least when I inspect the code via Chrome. The left: "-500px" is being set, but the element doesn't move. Why is this? What am I doing wrong?
You have your class/id wrong you would have to have
$(".gallery-images").animate({
left : "-500px"
},1500);
because it is a class that you are calling
also the class you are trying to call is "gallery-images" but the class that you made is "gallery-image"
$(".gallery-image").animate({
left : "-500px"
},1500);
so just fix that type and you should be good to go :)
I need to create an css for image ie height and width. how can create?
<div id="toHide" class="pb-text-align-center">
<img src="img/load.gif" style="margin-left: auto; margin-right: auto;"/>
<form wicket:id="safeForm" class="clearfix" />
</div>
.pf-text-align-center, .pb-text-align-center { text-align: center; }
<script type="text/javascript">
var $ = jQuery.noConflict();
$('#toHide').doTimeout(1000, function() { $('#toHide').find('#safeForm35').submit();});
</script>
Issue: dynamic animation action is not happening in IE. it may resolve by doing correct height and width. How can i see what is the required height and width? and other details?
EDIT
Answer:
HTML source code:
<SCRIPT type="text/javascript">
var $ = jQuery.noConflict();
document.getElementById('toHide').style.display ="";
$('#toHide').doTimeout(1000, function() {
$('#toHide').find('#safeForm34').submit();
document.getElementById('myAnimatedImage').src = "../../img/load.gif";
});
</SCRIPT>
html:
<div id="toHide" class="pb-text-align-center">
<img src="img/load.gif" id='myAnimatedImage' style="margin-left: auto; margin-right: auto;"/>
<form wicket:id="safeForm" class="clearfix" />
</div>
Bad news for you - you're hitting a known bug in IE.
In IE, if you load an animated GIF, but it's invisible when it loads, then the animation won't work when you make it visible.
The work-around is to load the image at the time you need to display by setting the src attribute, rather than pre-loading it and making it visible.
Reference: http://www.norio.be/blog/2008/09/animated-gif-not-working-internet-explorer