im familiar with php, but a serious learner in js, i have tried 3 methods to achieve my goal and i have seen the method used below that seems the easiest to implement so i can achieve my goal, but for some reason it does not work. I have included only the necessary bits for the specific function that isnt working, this all works inside a while loop based on entries in a db, seperated with a {$page_trackid} to distinguish between each function and link to it.
I understand a 'this' style function could be used, but as i say im so new to js im just trying to achieve the necessary before i extend to getting even more complex.
Is there something im doing totally wrong here?
Cheers
<head>
<style>
.hidden {display:none;}
.visible {display:block;}
.subtext_img {
width: 100px; height: 100px; padding-top: 10px; padding-right: 10px; float: right;
}
.subtext {
padding-left: 10px;
}
.arrow_box { padding-left: 100px; position: absolute; z-index: 100; background: #88b7d5; border: 4px solid #c2e1f5; width: 580px; height: 120px;} .arrow_box:after, .arrow_box:before { left: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow_box:after { border-color: rgba(136, 183, 213, 0); border-left-color: #88b7d5; border-width: 10px; top: 30%; margin-top: -10px; } .arrow_box:before { border-color: rgba(194, 225, 245, 0); border-left-color: #c2e1f5; border-width: 16px; top: 30%; margin-top: -16px; }
</style>
</head>
<body>
<?
$data = mysql_query("SELECT * FROM user_Uploaded_Tracks WHERE username = '$user' ORDER BY datetime DESC")
or die(mysql_error());
$page_trackid = '1'; //reset page track id
// get a whole bunch of data, track info & user info based on some cross referencing via id
while ($info = mysql_fetch_array($data)) {
$db_trackid = $info['id'];
$username = $info['username'];
//data 2 track info based on db track id
$data2 = mysql_query("SELECT * FROM user_Uploaded_Tracks WHERE id = '$db_trackid' LIMIT 1")
or die(mysql_error());
$info2 = mysql_fetch_array($data2);
//data 3 is user profile data based on db track id
$data3 = mysql_query("SELECT * FROM users WHERE username = '$username' LIMIT 1")
or die(mysql_error());
$info3 = mysql_fetch_array($data3);
//data 4 profile image based on user id, track uploader*
$data4 = mysql_query("SELECT * FROM user_profile_pic WHERE username = '$username' ORDER BY datetime DESC LIMIT 1")
or die(mysql_error());
$info4 = mysql_fetch_array($data4);
echo "
<script>
function showbox(userinfo_{$page_trackid}){
document.getElementById(userinfo_{$page_trackid}).style.visibility='visible';
}
function hidestuff(userinfo_{$page_trackid}){
document.getElementById(userinfo_{$page_trackid}).style.visibility='hidden';
}
</script>
<div id='userinfo_{$page_trackid}' class='arrow_box' style='display: none;'> <img src='" . $info4['Image'] . "' class='subtext_img'>
<h2 class='subtext'><a href='http://XXXX/XXX/" . $info2['username'] . "'>" . $info2['username'] . "</a></h2>
<p class='subtext'>" . $info3['user_title'] . "</p>
<p class='subtext'><a href='" . $info3['website_link'] . "' target='_blank'>" . $info3['website_link'] . "</a>
</p>
</div>";
echo "
<div style='position: absolute; z-index: 1; width: 20px; height: 20px; padding-top: 50px; padding-left: 699px;'>
<a href='javascript:showbox_{$page_trackid}()'><img style='height: 20px;' alt='Track stats' src='http://XXXXXX/play1/skin/user-profile2.png' style=''></a>
</div>";
}
?>
</body>
Separation of concerns: avoid manipulating an element's style directly in javascript. styling belongs with css.
Here's what I would do:
CSS
.hidden {
display: none;
}
Javascript:
// show an element
document.getElementById("my-id").classList.remove("hidden");
// hide an element
document.getElementById("my-id").classList.add("hidden");
classList is not supported in old browsers, so make sure to include the polyfill at https://developer.mozilla.org/en-US/docs/DOM/element.classList
Your issue seems to be that in the HTML you are setting the display property to none, but in the script you are setting the visibility property. They are different things. Set one or the other in both places.
Related
I'm making a simple Php and javascript project where my css design has some overlay design in it. Now I have a button when clicked it displays an overlay div named "myNav" where a div named "req_form" and form are on it where users can fill out inputs and submit them, then my php code will store those data in my database. I just can't figure out how to replace the div and dislpay success on it after successfully submitting the data in my Php code.
my overlay div
<?php
include 'includes/autoloader.inc.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function openNav() {
document.getElementById("myNav").style.width="100%";
}
function closeNav(){
document.getElementById("myNav").style.width = "0";
}
</script>
<link rel="stylesheet" type="text/css" href="css/cssticket.css">
</head>
<body>
<button class="button_a" onclick="openNav()">Create Request</button> //OPENS THE OVERLAY DIV
<div id="myNav" class="overlay"> // THIS IS THE OVERLAY DIV
×
<div class="overlay-content">
<div id="req_form" class="inputs"> // THIS IS THE DIV I WANT TO BE REPLACE BY A MESSAGE SUCCESS
<div id="error"></div>
<form id="form" action="includes/enduser.inc.php" method="POST">
<input type="text" name="userrequester" placeholder="name" >
<br>
<label for="reqtype">Request type:</label>
<select name="priority" required>
<option value="">Select</option>
<option value="High">General</option>
<option value="Low">Urgent</option>
</select>
<br>
<label for="itemtype">Item type:</label>
<input type="radio" name="typeitem" value="Borrowed" required><label>Borrowed</label>
<input type="radio" name="typeitem" value="Replace" required></input><label>Replace</label>
<br>
<label>Summary :</label>
<br>
<textarea name="summary" cols="30" rows="10" required ></textarea>
<br>
<button type="submit" name="sendrequest" class="button_a">Submit</button>
</div>
</form>
</div>
</div>
</body>
</html>
here is my php file :
include 'autoloader.inc.php';
$request = new usercontlr;
if (isset($_POST['sendrequest'])) {
$date = date ('F d, Y');
$enduser = $_POST['userrequester'];
$priority = $_POST["priority"];
$itemtype = $_POST["typeitem"];
$summary = $_POST["summary"];
$status = "new";
$request->createticket($enduser, $priority, $itemtype, $status, $summary, $date); // function where my object stores data in my database
What i have tried already is to echo out some javascript that should have change the into a success message after storing the data inside this php file.
echo ' <script type="text/javascript">
document.getElementById('req_form').style.display = "none";
var h1 = document.createElement('h1');
var result = document.createTextNode('Success!');
h1.appendChild(result);
document.getElementById('myNav').appendChild(h1);
</script> ' ;
but when I check the console I got an error (enduser.inc.php:3 Uncaught TypeError: Cannot read property 'style' of null
at enduser.inc.php:3
(anonymous) # enduser.inc.php:3)
Here is also my css if it helps:
.inputs {
padding: 20px;
display: inline-block
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(11, 156, 49);
background-color: rgba(11, 156, 49, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
font-family: monospace;
font-size: 15px;
background-color: white;
border-radius: 2%;
position: relative;
top: 25%;
width: 50%;
margin: 0 auto;
text-align: center;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: red;
}
.overlay .closebtn {
color: white;
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay a {
font-size: 20px
}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
You will want to create a header() redirect to your original page once you have successfully queried and successfully added your inputs to the DB.
Something like this:
if (isset($_POST['sendrequest'])) {
$date = date ('F d, Y');
$enduser = $_POST['userrequester'];
$priority = $_POST["priority"];
$itemtype = $_POST["typeitem"];
$summary = $_POST["summary"];
$status = "new";
// Pretty sure this can be wrapped in your if statement, may need to test that.
// --> $request->createticket($enduser, $priority, $itemtype, $status, $summary, $date);
if($request->createticket($enduser, $priority, $itemtype, $status, $summary, $date)){
$postMSG = "success"; // sending the success message over url as $_GET
$host = $_SERVER['HTTP_HOST']; // SERVER
$uri = rtrim(dirname($_SERVER['PHP_SELF']), '/\\'); // Directory
$extra = 'ticketformpage.php'; // the page your form is on
header("Location: http://$host$uri/$extra?$postMSG"); // header redirect with url post added
}
Now on the page you wish to display the success message, we check to see if the GET global isset with success $_GET['success'] if it is then we set the variable and display them and add some css.
<?php
$msg = NULL; // we set to NULL for when the message is not needed
if(isset($_GET['success'])){
$msg = "Thank you for submitting through our ticket system.";
}else{
$msg = NULL;
}
NOTE: I added the success in a <span> tag and added padding and border radius, limegreen bg and darkgreen color to associate with success. 10px margin-top for form.
<div id="req_form" class="inputs">
<span class="success"><?=$msg?></span> <!--// add the success variable here-->
<div id="error"></div>
<form id="form" action="inputtest.php" method="POST">
CSS:
form {
margin-top: 10px;
}
.success {
background-color: limegreen;
color: darkgreen;
padding: 10px;
border-radius: 5px;
}
I am trying to build a grid to run directly with hardware connected to a raspberry pi. On the client side, I am trying to have a button that saves the current "frame" of the grid. I'd like for this button to just gather the CSS color values (in hexadecimal form) and form an array with them, but everything I have tried hasn't worked as of yet.
I am aware of the 'style' and 'computedStyles' methods in javascript, and these may be part of the key to the question, but I'm not sure. My hunch is that the issue lies within state.
<div id="palette">
<div
class="pen"
style="background-color: #ffffff;"
onclick="setPenColor('#ffffff')"
></div>
<--- Yadayada more 'pens' -->
<div id="art">
<div class="row">
<div class="pixel" onclick="setPixelColor(this)"></div>
<div class="pixel" onclick="setPixelColor(this)"></div>
<div class="pixel" onclick="setPixelColor(this)"></div>
<div class="pixel" onclick="setPixelColor(this)"></div>
<--- Javascript -->
var penColor = 'black';
function setPenColor(pen) {
penColor = pen;
}
function setPixelColor(pixel) {
pixel.style.backgroundColor = penColor;
}
var element = document.getElementById('pixel');
var out = '';
var elementStyle = element.style;
var computedStyle = window.getComputedStyle(element, null);
for (prop in elementStyle) {
if (elementStyle.hasOwnProperty(prop)) {
out +=
' ' +
prop +
" = '" +
elementStyle[prop] +
"' > '" +
computedStyle[prop] +
"'\n";
}
}
console.log(out);
<-- CSS -->
#art {
display: table;
border-spacing: 1px;
background-color: black;
border: 5px solid black;
}
.row {
display: table-row;
}
.pixel {
display: table-cell;
background-color: white;
width: 25px;
height: 25px;
}
.pen {
display: inline-block;
width: 35px;
height: 35px;
border: 2px solid black;
border-radius: 50%;
}
My current output just gives me an error message:
Uncaught TypeError: Cannot read property 'style' of null
at grid.js:24
Like I said, I'd like to form an array of the hexadecimal values, but accessing them properly has become my first priority now.
Thanks much for any help! :)
Here is a page I am working on:
https://1stamender.com/testing-elements.php
This is basically a list of latest articles on my site and right now I have a UI I'm looking to improve. Right now I have it defined using bootstrap and my own CSS and can't seem to find a solution.
Basically I can see there is some funky spacing due to the inherent way that divs handle float: left;.
It pushes divs into a new row versus try to push itself up to the div above it leaving for some awkward spacing. This can be fixed by setting a height but the heights will generally be different for each article.
I haven't the faintest idea how to do this CSS wise I've been googling forever...
Edit: Apologies I know you want to see the code itself:
echo '
<div class="articlecontainer">
<div class="articlepicture2">
<img src="'.$mainpic.'" alt="'.$headline.'" width="100%">
</div>
<div class="articledescription2">
<a href="article.php?articlenumber='.$articlenumber.'" class="articlelink2"><strong><span class="headlinearticle2">'.$headline.'</span></strong><br>
'.substr($content,0,100).'...</a>
<hr>
Written by: ';
$sqlauthor = "SELECT * FROM ACCOUNT WHERE USERNAME='$articleauthor'";
$resultauthor = $conn->query($sqlauthor);
if ($resultauthor->num_rows > 0) {
// output data of each row
$rowauthor = $resultauthor->fetch_assoc();
$authordisplayname = $rowauthor['DISPLAYNAME'];
echo '<i>'.$authordisplayname.'</i><br>';
echo 'Overall Rating: ';
echo '<img src="images/main/rating/'.$star.'.png" alt="Rating 0.5" width="80">';
}
echo '
</div>
</div>
';
CSS:
.articlecontainer{
background-color: #666;
border: solid 1px #000;
color: #fff;
padding: 0px !important;
margin-left: 20px;
margin-right: 20px;
margin-top: 10px;
margin-bottom: 10px;
padding-bottom:10px !important;
border-radius: 5px;
width: 25%;
float: left;
You can either use three variables for each column and always toggle the used one or you could use css-columns, but you would change the posts-order to top to bottom.
CSS-Columns: https://developer.mozilla.org/en-US/docs/Web/CSS/columns
PHP: Something like this:
$column = 1;
$column_1_html = "";
$column_2_html = "";
$column_3_html = "";
foreach($boxes => $box) {
$box_html = "...";
if($column == 1) {
$column = 2;
$column_1_html .= $box_html;
} else if($column == 2) {
$column = 3;
$column_2_html .= $box_html;
} else if($column == 3) {
$column = 1;
$column_3_html .= $box_html;
}
}
As stated in the comments this library might be something for you: https://masonry.desandro.com/layout.html
I have two values that I take from an array:
$target = $data->data[2][32][3];
In this case $target = 9.83%.
$clicks = $data->data[1][32][3];
In this case $clicks = 7.15%.
I have a barlike chart made from an .outer div (which represents the background div, the div which contains all the others), an .inner div (which fills the outer...you can think of it like a bar that shows the percentage completed) and a .target div (which represents the dotted line/ the target that the .inner div must reach..in some cases like this one it exceeds the target: .inner > .target).
$target = 9.83%;
$bar_width = '200px';
$clicks = 7.15%;
$base = max($target, $clicks);
.outer,
.inner,
.target {
height: 14px;
margin-bottom: 5px;
}
.outer {
background-color: #cccccc;
width: 200px;
margin: 20px auto;
position: relative;
font-size: 10px;
line-height: 14px;
font-family: sans-serif;
}
.inner {
background-color: green;
position: absolute;
z-index: 1;
text-align: right;
width: calc(200 / 100 * <?php echo $base; ?>);
border-right: 2px solid black;
}
.inner:after {
content: ' 7.15%';
display: inline-block;
left: 10px;
position: relative;
height: 100%;
top: -14px;
margin-left: 17px;
}
.target {
background-color: transparent;
width: 19px;
position: absolute;
z-index: 2;
color: black;
text-align: right;
border-right: 2px dotted black;
}
.target:after {
content: 'Target: 9.83%';
display: inline-block;
left: 28px;
position: relative;
height: 100%;
top: 14px;
margin-left: -60px;
}
<div class="outer">
<div class="target" style="width: calc(<?php echo $bar_width; ?> / 100 * (<?php echo $target; ?> / <?php echo $base; ?> * 100))">
</div>
<div class="inner" style=" width: calc(<?php echo $bar_width; ?> / 100 * (<?php echo $clicks; ?> / <?php echo $base; ?> * 100))">
</div>
</div>
So my problem is that after the target is exceeded the inner div should completely fill the outer div.
Okay so firstly let's sort out how you're calculating the widths:
$bar_width = '200px';
$target = 9.83 / 100;
$clicks = 7.15 / 100;
Divide your percentage values by 100 to give a value we can multiply with the total bar width. You also don't need the 'base' calculation you were doing.
<div class="outer">
<div class="target" style="width: calc(<?php echo $bar_width; ?> * <?php echo $target; ?>)">
</div>
<div class="inner" style=" width: calc(<?php echo $bar_width; ?> * <?php echo $clicks; ?>)">
</div>
</div>
Then update your width calculations to calculate a percentage of the bar, i.e. the width (200) times the percentage values.
Couple of things to note: if you're using PHP anyway, there is no need to use the CSS calc operation (and then less strain on the client-side rendering), and also if you have short-hand PHP enabled you won't need to keep writing out <?php echo foo ?>:
<div class="target" style="width: <?= $bar_width * $target ?>">
<?= ?> is a short-hand PHP echo statement
Then finally in answer to your question, you just need to compare the two values after you retrieve your values to see if the target is exceeded, and set the inner bar to occupy the entire bar if it is exceeded:
$clicks = $clicks > $target ? 1 : $clicks;
Here is a working file: https://www.dropbox.com/s/33t0bmmik7y49i1/index.php?dl=0
Thank you for help, I have come up with a solution. If the .inner div has a lower value than the target I simply set the target at 100% width withing the outer div:
if ($target > $clicks){
$target_width = 100;
$inner_width = ($clicks/$target) * 100;
}
And in case the inner div exceeds the target I set the inner div at 100% width withing the outer div:
else{
$inner_width = 100;
$target_width = ($target/$clicks) * 100;
}
So the solution was a simple if else statement. My PHP:
<?php
$target = $data->data[2][32][3];
$target = str_replace("%", "", $target);
$clicks = $data->data[1][32][3];
$clicks = str_replace("%", "", $clicks);
$bar_width = '80';
if ($target > $clicks){
$target_width = 100;
$inner_width = ($clicks/$target) * 100;
}
else{
$inner_width = 100;
$target_width = ($target/$clicks) * 100;
}
?>
HTML:
<div class="outer">
<div class="target" style="width: <?= $target_width ?>%"></div>
<div class="inner" style="width: <?= $inner_width ?>%"></div>
</div>
I want to show a hover card on mouse move over a div class. So I have done the following class in css
#descriptionBox2{
position: absolute;
display: none;
background-color: #EEEEEE;
padding: 7px;
font-size: 20px;
border: 1px solid #EEEEEE;
box-shadow:2px 2px 5px 2px #DDDDDD;
width: 250px;
}
And in the body I have just added the following code..
<div id="descriptionBox2"></div>
and following is the div on which I want to show the hover card
<?php $serial = 1; foreach($readAll as $readOne):?>
<div class="readone" explanation="<?php echo $readOne['explanation'];?>" memorize="<?php echo $readOne['memorize']; ?>">
<span style="font-weight:bold;"><?php echo $serial++. '. ';?></span><?php echo $readOne['question_desc']. '<br><br>';?>
<span style="font-weight:bold;padding-left:30px;">Answer: </span><?php echo $readOne['answer'];?>
</div>
<br><br>
<?php endforeach;?>
</div>
And following is the js
$(document).ready(function(){
$('.readone').mousemove(function(e){
var explanation = "<strong>Explanation : </strong><br><span style='padding-left:20px;'>"+ $(this).attr('explanation') + "</span>";
var memorize = "<strong>Memorizing Tips : </strong><br><span style='padding-left:20px;'>"+ $(this).attr('memorize') + "</span>";
var msg = explanation + "<br><br>" + memorize;
$('#descriptionBox2').html(msg).show();
$('#descriptionBox2').css('top', e.clientY+20).css('left', e.clientX+20);
$(this).css({'background-color':'#98bf21'});
}).mouseout(function(){
$('#descriptionBox2').hide();
$(this).css({'background-color':'#FFFFFF'});
});
});
Everything works fine. But when I scroll down the hover card just get at more distant from mouse pointer. The same code ran well in other places. but why it is not working in this case . ANy idea?
maybe you can use :
position: fixed;
in your #descriptionBox2 declaration