Barlike chart made from two divs - javascript

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>

Related

How do I change rangeSlider default starting minimum and maximum values so I can store and retrieve from a DB Table

By default, the rangeSlider plug in calculates default values of 33 min and 66 max. The code below is completely functional, around line 125 I have further comments on where I think my solution resides. Remove and add // to see what I am talking about. I hope this makes sence and thanks in advance for any help
<?php
$qty_min = isset($_REQUEST['qty_min']) ? $_REQUEST['qty_min'] : "33";
$qty_max = isset($_REQUEST['qty_max']) ? $_REQUEST['qty_max'] : "66";
$first_load = "false";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Dashboard - SB Admin</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css" />
<style>
/* RANGE SLIDER BAR REGULAR CSS */
.primaryText{
font-weight: 300;
font-size: 50px;
text-shadow: 2px 2px 1px rgba(0,0,0,0.3);
}
.secondaryText{
font-weight: 300;
font-size: 25px;
}
.createdBy {
font-weight: 300;
font-size: 17px;
margin-top: 10px;
}
.createdBy a{
color: #333;
font-weight: 500;
}
.message {
background: white;
padding: 10px;
display: inline-block;
text-align: center;
color: #000;
margin: 25px 0;
font-size: 13px;
box-shadow: 2px 2px 0px 1px rgba(0,0,0,0.2);
border-radius: 4px;
}
.projHeader{
text-align: center;
}
.footer{position: fixed; bottom: 0; right: auto; top: auto; left: 0; border-top: 1px solid rgba(0,0,0,0.5); width: 100%; transform: translate(0); border: none; padding: 0; text-align: center; border-top: 1px solid #bfc7e4;}
.footer div{display: inline-block;}
.footer a.social{display: inline-block; font-size: 17px; padding: 7px 0; color: #000; text-decoration: none; margin: 0px 20px;}
body{background: #333; font-family: poppins;}
.projHeader, .createdBy a, .message{color: #fff;}
.message{background: rgba(255, 255, 255, 0.1);}
.demoContainer{position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: 400px;}
.sliderContainer{position: relative; border-radius: 20px;
background: #6a6a6a; width: 400px; height: 10px; margin-top: 40px;}
.sliderContainer:after{content:""; clear: both; display: block; }
.slider{height: 10px; float: left;}
.slider_a{background: transparent;}
.slider_b{background: #fd1874; border-radius: 20px;}
.slider_c{background: transparent;}
.slider_adj{position: absolute; padding: 3px 10px; background: #fff; top: 12px; cursor: move; user-select: none; z-index: 1; font-size: 13px; color: #333; border-radius: 20px; width: 20px; text-align: center;}
.slider_adj_1{top: -28px;}
.slider_adj_2{z-index: 3}
</style>
<div class="projHeader">
<div style="background:rgb(124, 124, 124);padding-bottom:40px;">
<div style="color:white;font-size:16px;font-weight: 100"> Slide the numbered ovals to select your desired range.</div>
<div align="center">
<div class="sliderContainer" id="sliderContainer">
<input type="hidden" name="qty_min" id="qty_min" value="<?php echo $qty_min ?>" placeholder="<?php echo $qty_min ?>" />
<input type="hidden" name="qty_max" id="qty_max" value="<?php echo $qty_max ?>" placeholder="<?php echo $qty_max ?>" />
<div class="slider slider_a" id="slider_a"></div>
<div class="slider slider_b" id="slider_b"></div>
<div class="slider slider_c" id="slider_c"></div>
<div style="width:70px" class="slider_adj slider_adj_1" id="slider_adj_1"></div>
<div style="width:70px" class="slider_adj slider_adj_2" id="slider_adj_2"></div>
</div>
</div>
</div>
<div style="color:white"> var-a_wt = <span id="var-a_wt"></span></div>
<div style="color:white"> var-b_wt = <span id="var-b_wt"></span></div>
<div style="color:white"> var-c_wt = <span id="var-c_wt"></span></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
var sliderContainer, sliderContainerWt;
var sliderHandleWt;
$(document).ready(function(){
sliderContainer = $("#sliderContainer");
sliderContainerWt = sliderContainer.outerWidth();
sliderHandleWt = $("#slider_adj_1").outerWidth();
setLeftPosition();
setDraggable();
bindMouseUp();
updateGraph();
});
function setLeftPosition(){
var wt = sliderContainerWt/3;
$(".slider").css({"width": wt+"px" })
The two lines below work great, but I need to change default values on the fly, then store them in a DB table to restore custom values on page reload. The two lines below calculate 33 and 66 only
//var sliderHandlePos_1 = wt-sliderHandleWt/2;
//var sliderHandlePos_2 = wt*2-sliderHandleWt/2;
The two lines below kind of work, but throws off the format of my slider bar and min and max values are still not right
var sliderHandlePos_1 = '<?php echo $qty_min ?>';
var sliderHandlePos_2 = '<?php echo $qty_max ?>';
$("#slider_adj_1").css({"left": sliderHandlePos_1+"px"});
$("#slider_adj_2").css({"left": sliderHandlePos_2+"px"});
}
</script>
<script>
function updateGraph(){
I think my solution is in the next 3 lines of code, but my limited skills in javascript inhibit me from wrapping my head around it.
var a_wt = parseInt(($("#slider_a").width()/sliderContainerWt*100).toFixed(0));
var b_wt = parseInt(($("#slider_b").width()/sliderContainerWt*100).toFixed(0));
var c_wt = parseInt(($("#slider_c").width()/sliderContainerWt*100).toFixed(0));
I have tried the following, but no luck. I need the initial values to load from the table via PHP just once, then java script takes back over and keeps track of slider values, as YES I understand PHP is server side script, so I understand why this does not work. Just and example> I need a JavaScript equivalent.
var a_wt = <?php echo $qty_min ?>;
var b_wt = <?php echo ($qty_max-$qty_min) ?>;
var c_wt = <?php echo (100-$qty_max) ?>;
I don't think my solution is beyond this point. But of course I could be wrong.
$("#slider_adj_1").html(a_wt+"%");
$("#slider_adj_2").html((b_wt+a_wt)+"%");
document.getElementById('qty_min').value = a_wt;
document.getElementById('qty_max').value = b_wt+a_wt;
document.getElementById('var-a_wt').innerHTML = a_wt;
document.getElementById('var-b_wt').innerHTML = b_wt;
document.getElementById('var-c_wt').innerHTML = c_wt;
return { a: a_wt,
b: b_wt,
c: c_wt
}
}
</script>
<script>
function bindMouseUp(){
$("#slider_adj_1, #slider_adj_2").on("mouseout", function(){
$("#slider_adj_1, #slider_adj_2").draggable( "destroy" );
});
$("#slider_adj_1, #slider_adj_2").on("mouseover", function(){
setDraggable();
});
}
function setDraggable(){
var maxLeft = $("#slider_a").offset().left-(sliderHandleWt/2);
var maxRight = $("#slider_b").offset().left+$("#slider_b").outerWidth()-(sliderHandleWt/2);
var startX, start_a_Wt, start_b_Wt, start_c_Wt;
$("#slider_adj_1").draggable({
axis: 'x',
containment: [ maxLeft, 0, maxRight, 0 ],
refreshPositions: true,
start: function(event, ui){
startX = $(this).position().left;
start_a_Wt = $("#slider_a").width();
start_b_Wt = $("#slider_b").width();
},
drag: function(event, ui){
var endX = $(this).position().left;
var finalX = endX - startX;
var slider_a = start_a_Wt + finalX;
var slider_b = start_b_Wt - finalX;
$("#slider_a").css("width", slider_a+"px");
$("#slider_b").css("width", slider_b+"px");
updateGraph();
},
stop: function(event, ui){
maxLeft = $("#slider_a").position().left;
maxRight = $("#slider_c").position().left;
}
});
var maxLeft_2 = $("#slider_a").offset().left+$("#slider_a").outerWidth()-(sliderHandleWt/2);
var maxRight_2 = $("#slider_a").offset().left+sliderContainerWt-(sliderHandleWt/2);
$("#slider_adj_2").draggable({
axis: 'x',
containment: [ maxLeft_2, 0, maxRight_2, 0 ],
start: function(event, ui){
startX = $(this).position().left;
start_b_Wt = $("#slider_b").width();
start_c_Wt = $("#slider_c").width();
},
drag: function(event, ui){
var endX = $(this).position().left;
var finalX = endX - startX;
var slider_b = start_b_Wt + finalX;
var slider_c = start_c_Wt - finalX;
$("#slider_b").css("width", slider_b+"px");
$("#slider_c").css("width", slider_c+"px");
updateGraph();
},
stop: function(event, ui){
maxLeft_2 = $("#slider_b").offset().left;
maxRight_2 = $("#slider_c").offset().left + $("#slider_c").width();
}
});
}
</script>

I was completely going down the wrong path. After reading further in the PROPER documentation, I came up with the following completely functioning code, just in case this helps someone else. I also show how to explode the my_range variable so now you can store these variable in a database table. Great documentation at http://ionden.com/a/plugins/ion.rangeSlider/start.html
<?php
$my_range = isset($_REQUEST['my_range']) ? $_REQUEST['my_range'] : "";
$split_range = (explode(";",$my_range));
$qty_min = $split_range[0];
$qty_max = $split_range[1];
?>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js"></script>
<form action="slider_test2.php" method="post">
<input style="color:blue" type="text" class="js-range-slider" name="my_range" value="" />
<br>
<?php echo "my_range = " . $my_range; ?>
<?php echo "<br>qty_min = " . $qty_min; ?>
<?php echo "<br>qty_max = " . $qty_max; ?>
<br>
<button type="submit" >submit</button>
</form>
<script>
$(".js-range-slider").ionRangeSlider({
type: "double",
grid: true,
min: 1,
max: 100,
from: <?php echo $qty_min ?>,
to: <?php echo $qty_max ?>,
postfix: "%",
skin: "big"
});
</script>

How to circumvent float:left; behavior in a masonry layout

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

defining css elements based on calculations

I would like to know how I can define CSS element dimensions before they are rendered eg. not using offset and jQuery
Can I echo php into where the width/height or position values are? eg.
<?php
$width = 290px;
$altwidth = 290;
?>
<style>
.widget {
width: <?php echo $width; ?>;
}
.altwidget {
width: <?php echo $altwidth; ?>px;
}
Would any of these work, is it completely wrong?
Similarly how would I apply JavaScript dimensions using a variable?

$(document).ready(function(){
$('.widget').css('width', <?php echo $width; ?>);
$('.altwidget').css('width', <?php echo $altwidth; ?>);
});

Your code will also works if it is written in php file.

Yes it will work, but you will have to make 290px a string for $width ( e.g. $width = "290px";), or better yet go with the $altwidth way and leave the px part out of the variable.
See below for how to dynamically set dimensions from JavaScript once the page has loaded. I have added some CSS for the example.
<html>
<head>
<?php
$width = "290px"; // Quotes added
$altwidth = 290;
?>
<style>
.widget {
width: <?php echo $width; ?>;
height: 100px;
color: white;
background: green;
cursor: pointer;
}
.altwidget {
width: <?php echo $altwidth; ?>px;
height: 100px;
color: white;
background: red;
cursor: pointer;
}
</style>
<script type="text/javascript">
var newWidgetWidth = '200';
var newAltWidgetWidth = '400';
</script>
</head>
<body>
<div class="widget" onclick="this.style.width = newWidgetWidth + 'px';">
Shrink me
</div>
<div class="altwidget" onclick="this.style.width = newAltWidgetWidth + 'px';">
Grow me
</div>
</body>
</html>

Css Hover div not working as expected

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

Show hide JS div css

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.

Categories

Resources