I would like to scroll at the end of the div so in my case I can see the last message of chat.
Here's what I have but it doesn't work, the scroll is actually on top of the div.
<script type="text/javascript">
var divChat = document.getElementById('chat');
divChat.scrollTop = divChat.scrollHeight;
</script>
<div id="chat" style="border-style:groove;overflow-y: auto; height:50%;">
<?php
$response = $bdd->query('SELECT * FROM minichat');
while ($rsp = $response->fetch())
{
echo '['.$rsp['date_message'].']'." <strong>".htmlspecialchars($rsp['pseudo'])
."</strong>: ".htmlspecialchars($rsp['message'])."<br>";
}
?>
</div>
Thanks by advance for any help,
This should work fine:
<div id="chat" style="border-style:groove;overflow-y: auto; height:50%;">
<?php
$response = $bdd->query('SELECT * FROM minichat');
while ($rsp = $response->fetch())
{
echo '['.$rsp['date_message'].']'." <strong>".htmlspecialchars($rsp['pseudo'])
."</strong>: ".htmlspecialchars($rsp['message'])."<br>";
}
?>
</div>
...
<script type="text/javascript">
var divChat = document.getElementById('chat');
divChat.scrollTop = divChat.scrollHeight;
</script>
</body>
Related
I have searched for several hours now trying to implent scripts to change the div background. I've found this solution which works when it's not in a loop:
Javascript: onClick checkbox change div color
The challenge here is that the checkboxes is in a foreach loop with unique id values.
Here is my code:
<script language="JavaScript" type="text/JavaScript">
function myFunction(x, _this) {
if (_this.checked) {
x.style.backgroundColor = '#0000FF';
} else {
x.style.backgroundColor = '#FF0000';
}
}
</script>
<style type="text/css">
#result {
background-color: #FF0000;
padding: 7px;
margin: 7px;
}
</style>
</head>
<body>
<?php
$SL = 0;
foreach($results_resultat as $key => $row_resultat) { ?>
<div id="result">
<input type="checkbox" name="res_id[]" value="<?php echo $row_resultat['id']; ?>" onChange="myFunction(result, this)">
</div>
<?php } ?>
With this code it will show all the rows which are selected from the tabel but it won't change the div color when clicking the checkbox.
Help is very much appreciated. :-)
You're using the same id result to wrap all your checkbox elements. ids should be unique, use class="result" instead to wrap your checkbox elements. Plus, you don't have to send anything except this to myFunction function. So change your code in the following way,
CSS
.result {
background-color: #FF0000;
padding: 7px;
margin: 7px;
}
PHP
<?php
$SL = 0;
foreach($results_resultat as $key => $row_resultat) { ?>
<div class="result">
<input type="checkbox" name="res_id[]" value="<?php echo $row_resultat['id']; ?>" onChange="myFunction(this)">
</div>
<?php
}
?>
JavaScript
function myFunction(_this) {
if (_this.checked) {
_this.parentElement.style.backgroundColor = '#0000FF';
} else {
_this.parentElement.style.backgroundColor = '#FF0000';
}
}
The problem with your code is that line: onChange="myFunction(result, this)".
At that line result is not defined, usually it is common to pass a string with selector, or string with an id.
Something like that onChange="myFunction('result', this)"
And then in you JS function use document.getElementById to get a reference to the DOM element.
<script language="JavaScript" type="text/JavaScript">
function myFunction(id, _this) {
if (_this.checked) {
document.getElementById(id).style.backgroundColor = '#0000FF';
} else {
document.getElementById(id).style.backgroundColor = '#FF0000';
}
}
</script>
http://www.new.techmoney360.com/ is the website and it's being developed with wordpress.
That navigarion bar is part of the <header> that also encompass my logo section up top so I'm not sure if that causing issues.
This is the entire html the encompasses the navigation bar that I want to stick to the top when I scroll past it.
<div id="navmenu" class="mkd-menu-area">
<div class="mkd-grid">
<div class="mkd-vertical-align-containers">
<div class="mkd-position-left">
<div class="mkd-position-left-inner">
<?php if(is_active_sidebar('mkd-left-from-main-menu')) : ?>
<?php dynamic_sidebar('mkd-left-from-main-menu'); ?>
<?php endif; ?>
<?php discussion_get_main_menu(); ?>
</div>
</div>
<div class="mkd-position-right">
<div class="mkd-position-right-inner">
<?php if(is_active_sidebar('mkd-right-from-main-menu')) : ?>
<?php dynamic_sidebar('mkd-right-from-main-menu'); ?>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>
This is the javascript I'm using to target the navigation bar (thanks to akinuri for the script)
window.onscroll = changePos;
function changePos() {
var header = document.getElementById("navmenu");
if (window.pageYOffset > 182) {
header.style.position = "absolute";
header.style.top = pageYOffset + "px";
} else {
header.style.position = "";
header.style.top = "";
}
}
Place .mkd-top-bar outside of all wrappers and whatnot, place it below the <body> and in it's css apply position: fixed;
.mkd-top-bar {
background-color: #303030;
position: fixed;
}
Is this what you're looking for?
#Jacob is partially correct, you don't need (as much) JavaScript here. Here's how you can resolve the issue. Replace the current functionality with this:
window.onscroll = stickyNav;
function stickyNav() {
var header = document.getElementById("navmenu");
if (window.pageYOffset > 70) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
Then, create a new class called .sticky with the following styling adjustments:
.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
Edit: update stickNav to stickyNav.
So I have a roll over effect for my mock store, the images and info for each boxes are taking from .sql file and auto generated sections. I want it too cover each section. I could hard code it, but that's a little too draconian.
<div id="scoll" class="group">
<div class="container">
<div class="center_items">
<?php
//external pages area
include_once('config\database.php');
include_once('object/chair.php');
$database = new Database();
$conn = $database->getConnection();
$chair = new Chair($conn);
$stmt = $chair->readAll();
while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
?>
<div class="product_box" >
<img src="img/<?php echo $row['THUMB']; ?>" alt="chair_image"> </a>
<h4> <?php echo $row['chair_name'];?> </h4>
<p>$<?php echo $row['PRICE'];?></p>
<div class="buy-box-shadow group">
Buy me!
</div>
</div>
<?php
}
?>
</div>
</div>
</div>
JS
onload=init;
function init() {
document.getElementsByClassName("product_box")[0].onmouseover = function(e){
e.preventDefault();
mouseOver();
}
document.getElementsByClassName("product_box")[0].onmouseout = function(e){
e.preventDefault();
mouseOut();
}
function mouseOver() {
document.getElementsByClassName("buy-box-shadow")[0].style.opacity = .9;
}
function mouseOut() {
document.getElementsByClassName("buy-box-shadow")[0].style.opacity = 0;
}
See the code is hard coded to be the first element, a tad confused on how to make it go for every element.
You don't need JavaScript for that, you can do it just with CSS.
.product_box .buy-box-shadow {
opacity: 0.9;
display: none;
}
.product_box:hover .buy-box-shadow {
display: block;
}
Should be able to do this with forEach. Like so:
function init() {
var product_boxes = document.getElementsByClassName("product_box");
product_boxes.forEach(function(currentValue, index, array){
currentValue.onmouseover = function(e){
e.preventDefault();
mouseOver();
}
});
I want to dynamically resize one of my divs to take the height of the viewport using the following javascript
<script>
var applyMapContainerHeight = function() {
var wH = window.screen.height;
wH = parseInt(wH) + 'px';
$("#main-container-col2-rt-layout").css('height',wH);
console.log(wH);
};
$(document).ready(function() {
applyMapContainerHeight();
});
</script>
My div is coded as:
<div class="wrapper">
<?php echo $this->getChildHtml('global_notices') ?>
<div class="page">
<?php echo $this->getChildHtml('header') ?>
<div id="main-container-col2-rt-layout" class="main-container col2- right-layout">
<div class="main">
<?php echo $this->getChildHtml('breadcrumbs') ?>
...........
This is a magento page for my e-commerce site. Please help!
Aside from vm and vh <length> datatypes, I see that your code works!
<style>
body {
margin: 0; padding: 0;
}
.main-container {
background: red;
}
</style>
<body>
<div class="wrapper">
<?php echo $this->getChildHtml('global_notices') ?>
<div class="page">
<?php echo $this->getChildHtml('header') ?>
<div id="main-container-col2-rt-layout" class="main-container col2- right-layout">
<div class="main">
<?php echo $this->getChildHtml('breadcrumbs') ?>
</div>
</div>
</div>
</div>
<script>
var applyMapContainerHeight = function() {
var wH = window.screen.height;
wH = parseInt(wH) + 'px';
document.getElementById("main-container-col2-rt-layout").style.height = wH;
console.log(wH);
};
(function() {
applyMapContainerHeight();
})();
</script>
</body>
Your question was somehow unclear about what the problem really was, but if the problem is you want wrapper and page not to have a white background, then the solution is to apply dynamic width to the highest div element (i mean the grandpa i.e. wrapper).
Css has units specifically for this:
vh and vw
Demo: http://jsfiddle.net/jfbrdomb/show
div.red {
height: 100vh;
width: 100vw;
background-color: red;
}
I' am using php and javascript for expanding or collapsing some divs [which must be collapsed bydeafult] by setting up a button[whose text should be expand bydefault] on a div when i click on that button the div gets expanded and text of that button should be automatically changes to "collapse" and again if i click that collapse button the div should be closed and text changes to bydefault as "expand" and bydefault all the divs should be closed heres the code given below i am using :
<!DOCTYPE html>
<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script type="text/javascript">
function change()
{
if(document.getElementById("myButton1").value=="expand")
{
document.getElementById("myButton1").value="collapse";
$(document).ready(function(){
$("#myButton1").click(function(){
$("div.container").hide("slow");
});
}
else
{
document.getElementById("myButton1").value="expand";
$(document).ready(function(){
$("#myButton1").click(function(){
$("div.container").show("slow");
});
}
}
});
</script>
</head>
<body>
<?php
for($i=0;$i<=3;$i++)
{
echo"<div style='position:relative;border:1px solid #A5BEBE;background-color: #E7EFEF; width:100%; height:300px;'> <input onclick='change()' type='button' value='expand' id='myButton1' style='position:relative;left:85%;top:4%;background- color:#B20000;color:white;width:70px;height:20px;font-size:15px;' >";
echo "<div class='container' style='border:1px solid #A5BEBE;background-color: white;width:100%;height:92.5%;'>
some text here
</div>";
echo "</div><br><br>";
}
?>
</body>
</html>
i just a beginner in php so tried my best but dint get the desired result please help me out of this thanks in advance
here is some more info
its not working for my actual code which is:
while($runrows = mysql_fetch_assoc($getquery))
{
$title = $runrows ['sometext'];
$desc = $runrows ['sometext'];
$url = $runrows ['sometext'];
$a = $runrows ['sometext'];
$b = $runrows ['sometext'];
$c = $runrows ['sometext'];
$d = $runrows ['sometext'];
$e = $runrows ['sometext'];
$f = $runrows ['sometext'];
$g = $runrows ['sometext'];
echo "
<div style='position:relative;border:1px solid #A5BEBE;background-color: #E7EFEF;width:84%;'> <input onclick='change()' type='button' value='expand' class='myButton' style='position:relative;left:85%;top:4%;background- color:#B20000;color:white;width:70px;height:30px;font-size:15px;' > <b><p style='padding- bottom:2px;font-size:30px;'><font color='red'>".$title."</font></p></b><p><b>sometext :</b>$desc<br>
<b> sometext:-</b><a href='".$url."'>$url</a><br>
<b>sometext :</b>$b<br>
<b>sometext :</b>$c<br>
<b>sometext :</b>$d<br>
<b>sometext :</b>$e<br>
<b>sometext :</b>$f<br>
<b>sometext :</b>$g</p>";
echo "<div class='container' style='border:1px solid #A5BEBE;background-color: white;'>";
include ('botfunction.php');
echo "</div>";
echo "</div><br>";
}
#TheGr8_Nik your code is not working for this . this is the small part of actual code but its not working there
I would change your code so:
<script>
$(document).ready(function(){
$('.myButton').click(function(){
if ( this.value === 'collapse' ) {
// if it's open close it
open = false;
this.value = 'expand';
$(this).next("div.container").hide("slow");
}
else {
// if it's close open it
open = true;
this.value = 'collapse';
$(this).siblings("[value='collapse']").click(); //to collapse the open divs
$(this).next("div.container").show("slow");
}
});
});
</script>
jsFiddle example
You can use:
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
or switch function:
$("button").click(function(){
$("p").toggle();
});
Here is the working example:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_toggle
JsFiddle
You can use this
Script
$(function(){
$(document).on('click','#con div button',function(){
if($(this).parent().hasClass('expand'))
{ $(this).parent().removeClass('expand');
$(this).html('Expand');}
else{$(this).parent().addClass('expand');
$(this).html('Collapse');}
})
});
HTML
<div id="con">
<div class="expand"><button >Collapse</button></div>
<div class="expand"><button >Collapse</button></div>
<div class="expand"><button >Collapse</button></div>
<div class="expand"><button >Collapse</button></div>
</div>
This will expand and collapse div's based on the container.