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();
}
});
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>
I want to make smooth scrolling using javascript in php program
As shown in image if i clicked on the customer from my left side bar then i want to smooth scrolling using javascript onclick function what i do?here i pass dynamic id whic are i fetched from my database
<div class="col-md-3 col-sm-12" >
<ul data-spy="affix" data-offset-top="205" class="myclasss">
<?php
foreach($var as $name) { ?>
<a id="#<?php echo $name['name'];?>" class="list-group-item" onclick="scrollFaq(this.id);"><?php echo $name['name'];?> </a><?php } ?>
</ul>
</div>
<div class="col-md-9 col-sm-12 ">
<?php $v1 = '';
foreach($var as $data){
?>
<div class="faqHeader" id="<?php echo $data['name'];?>"> <?php echo $data['name'];?> </div>
<div class="panel-group" ">
<?php
foreach($data['data'] as $dat){ ?>
<div class="panel panel-default">
<div class="panel-heading ">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#col<?php
echo $v1;?>" ><?php echo $dat['questions'];?> </a>
</h4>
</div>
<div id="col<?php echo $v1;?>" class="panel-collapse collapse ">
<div class="panel-body">
<?php echo $dat['answer'];?>
</div>
</div>
</div>
<script>
function scrollFaq(str){
alert(str);
}
</script>
Try This :
function scrollFaq(str){
$('html,body').animate({scrollTop:$("#"+str).offset().top}, 500);
}
Make sure you give this Id to your div in for loop like this
<div class="col-md-9 col-sm-12 ">
<?php $v1 = '';
foreach($var as $data){
?>
<div class="faqHeader" id="<?php echo $data['name']; ?>">
<?php echo $data['name'];?>
</div>
<?php } ?>
</div>
A simple example of how you could achieve the smooth scrolling to an element without using jQuery.
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title>Smooth scroll to element without jQuery</title>
<script>
function scrollFaq( event ){
event.preventDefault();
/*
Current position and target position
Note: I used `dataset.name` rather than
adding the desired ID as an argument to this
function ~ see html below
*/
var cp=event.target.offsetTop;
var fp=document.getElementById( event.target.dataset.name ).offsetTop;
/*
increase step for larger jump per time period
increase time for longer animation
*/
var step=100;
var time=10;
/* initial step */
var pos = cp + step;
/* self-executing anonymous function */
(function(){
var t;
/* increment the position */
pos+=step;
/* clear the timer if we are at the correct location */
if( pos >= fp ){
clearTimeout( t );
return false;
}
/* do the actual scroll */
window.scrollTo( 0, pos );
/* re-run the function until we reach the correct location */
t=setTimeout( arguments.callee, time );
})();
}
</script>
<style>
.large{
margin:0 0 100rem 0;
border:1px solid black;
display:block;
height:100rem;
font-size:1.5rem;
}
a{
display:block;
clear:none;
margin:0 1rem 1rem 1rem;
width:200px;
padding:1rem;
font-size:1rem;
background:blue;
color:white;
border:1px solid black;
}
</style>
</head>
<body>
<?php
$names=array(/* some random names */
'marilyn','jane','rita','sue','bob','customer','worker'
);
foreach( $names as $name ){/* Note the use of the dataset attribute!!! */
echo "$name";
}
foreach( $names as $name ){
echo "<div id='$name' class='large'>$name</div>";
}
?>
</body>
</html>
Or, a better approach that doesn't involve inline event handlers and now uses your original classNames.
The Javascript function does not need to be declared inside whatever loop you have - indeed to do so would be incorrect. Declare the functions at the top of the page and invoke accordingly as shown here. You could copy either example, save and run to see the scroll effect -then it is trivial to adapt to your "use-case"
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title>Smooth scroll to element without jQuery</title>
<script>
function scrollFaq( event ){
event.preventDefault();
/*
Current position and target position
Note: I used `dataset.name` rather than
adding the desired ID as an argument to this
function ~ see html below
*/
var cp=event.target.offsetTop;
var fp=document.getElementById( event.target.dataset.name ).offsetTop;
/*
increase step for larger jump per time period
increase time for longer animation
*/
var step=50;
var time=10;
/* initial step */
var pos = cp + step;
var t;
(function(){
/* increment the position */
pos+=step;
/* clear the timer if we are at the correct location */
if( pos >= fp ){
clearTimeout( t );
return false;
}
/* do the actual scroll */
window.scrollTo( 0, pos );
/* re-run the function until we reach the correct location */
t=setTimeout( arguments.callee, time );
})();
}
function bindEvents(event){
/*
Get a nodelist containing all the anchors of class "list-group-item"
*/
var col=document.querySelectorAll('a.list-group-item');
/*
Some browsers do not support using the forEach operator on a nodelist
so convert the nodelist ( which is array like ) into a true array
so that "forEach" can be used.
*/
Array.prototype.slice.call( col ).forEach(function(e,i,a){
/*
here
----
"e" refers to the actual DOM node "a"
"i" refers to the "index" within the array
"a" is the array itself
Assign an "onclick" event listener making sure that
the "passive" flag is set to FALSE in this instance
otherwise you will get an error
"Unable to preventDefault inside passive event listener invocation."
*/
e.addEventListener( 'click', scrollFaq, { passive:false, capture:false });
});
}
/*
Bind the events when the DOM is ready - here we can set the "passive" flag to true
*/
document.addEventListener( 'DOMContentLoaded', bindEvents, { capture:false, passive:true } );
</script>
<style>
.faqHeader{
margin:0 0 100rem 0;
border:1px solid black;
display:block;
height:100rem;
font-size:1.5rem;
}
a.list-group-item{
display:block;
clear:none;
margin:0 1rem 1rem 1rem;
width:200px;
padding:1rem;
font-size:1rem;
background:blue;
color:white;
border:1px solid black;
}
</style>
</head>
<body>
<a name='top'></a>
<?php
$names=array(/* some random names */
'marilyn','jane','rita','sue','bob','customer','worker'
);
foreach( $names as $name ){/* Note the use of the dataset attribute!!! */
echo "<a class='list-group-item' href='#' data-name='$name'>$name</a>";
}
foreach( $names as $name ){
echo "
<div class='faqHeader' id='$name'>
<a href='#top'>$name</a>
</div>";
}
?>
</body>
</html>
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>
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.
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;
}