defining css elements based on calculations - javascript

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>

Related

Getting double quotes in Html element name

I'm trying to change visibility of some divs by click.
I'm adding "main" divs and "sub" divs using a php foreach loop on an array.
After that I add events using javascript to the elements having a specific class.
The problem is that the javascript function gets the name of the element with double quotes at the start and in the end.
I could solve by using a "substring" but I'm pretty new to web programming and I need to understand why this happens or I'll never improve my skills.
Below there is all my code.
<!DOCTYPE html>
<html>
<head>
<style>
.Class1 {
position:relative;
display: inline-block;
width: 48%;
margin: 3px;
border: 3px solid #CCC;
}
.Class2 {
position:absolute;
bottom:0;
right:0;
border: 1px solid #CCC;
margin:1px;
background: #FFC;
}
.H_p {
border: 1px solid #CCC;
display: inline-block;
}
.Opt {
border: 1px solid #CCC;
display: none;
}
</style>
</head>
<body>
<?php
$Divs = array('Div1'=>'Class1',
'Div2'=>'Class1',
'Div3'=>'Class1',
'Div4'=>'Class1',
'Div5'=>'Class1');
$AskToShow=array("Field1"=>"1.1.1", "Field2"=>"1.2.1", "Field3"=>"1.3.1");
foreach ($Divs as $Name=>$Class){
echo '
<div class="'.$Class.'">';
echo $Name.'<br/>';
echo '
<p id=”Btn_Opt'.$Name.'” class="Class2" >Show optionals</p>';
echo '
<div id=Opt'.$Name.' name="Opt'.$Name.'" class="Opt" >';
foreach ($AskToShow as $H_Name=>$Id){
echo'
<p id="H_'.$Id.'" class="H_p">'.$H_Name.'</p>';
}
echo '
</div>';
echo '
</div>';
}
?>
<script>
var MyClass = document.getElementsByClassName("Class2");
var myFunction = function() {
var SenderId = this.id;
alert (SenderId);
var SubId = SenderId.substring(SenderId.indexOf('_')+1)
alert (SubId);
var SubSH = document.getElementById(SubId);
if (!SubSH){
alert("Empty"); //This is the alert shown!!
}else{
alert(SubSH.name);
}
if (SubSH.style.display == 'none'){
document.getElementById(SubId).style.display = 'block';
}else{
document.getElementById(SubId).style.display = 'none';
}
};
for (var i = 0; i < MyClass.length; i++) {
MyClass[i].addEventListener('click', myFunction, false);
}
</script>
</body>
</html>
<p id=”Btn_Opt'.$Name.'” class="Class2" >Show optionals</p>';
You are using ” (RIGHT DOUBLE QUOTATION MARK) to delimit your attribute values. Only " (QUOTATION MARK) and ' (APOSTROPHE) are allowed.
The RIGHT DOUBLE QUOTATION MARK is, therefore, being treated as data and not as a delimiter.
This code example shows the three characters at a large font size so you can clearly see the difference between them.
body { font-size: 50px; }
”<br>"<br>'
This is often caused by writing HTML using a word processor instead of a text editor.
<p id=”Btn_Opt'.$Name.'” class="Class2" >Show optionals</p>';
There you used the wrong quote type ”.
Hope this fixes it.

Barlike chart made from two divs

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>

Activate online slide show on page load

I'am working my web page on "WYSIWYG Web Bulider", and on the main page I have inline frame, and when I click that inline frame another page is opened who has online slide show on It. I want that when that page is opened, online slide show is automaticly triggered.
Probably I need some javascript code for that, but I'm not familiar with coding.
test web page is curently on croatian language, but just click the picture
http://3dvizlab.com/test/3d_vizualizacija.php
This is html code of the page with online slide show
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>exteriors</title>
<style type="text/css">
body
{
font-size: 8px;
line-height: 1.1875;
background-color: #FFFFFF;
background-image: url(images/classy_fabric.png);
color: #000000;
}
</style>
<style type="text/css">
a
{
color: #0000FF;
text-decoration: underline;
}
a:visited
{
color: #800080;
}
a:active
{
color: #FF0000;
}
a:hover
{
color: #0000FF;
text-decoration: underline;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<link rel="stylesheet" href="./prettyPhoto/css/prettyPhoto.css" type="text/css">
<script type="text/javascript" src="./prettyPhoto/js/jquery.prettyPhoto.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("a[rel^='prettyPhoto_OnlineSlideShow']").prettyPhoto({theme:'facebook'});
});
</script>
</head>
<body>
<div id="OnlineSlideShow" style="position:absolute;left:352px;top:337px;width:300px;height:200px;z-index:0;">
<?php
$images_folder = "../pictures/exteriors/";
$image_width = 300;
$image_height = 200;
$count = 0;
$dir = opendir($images_folder);
while ($filename = readdir($dir))
{
$ext = pathinfo($filename, PATHINFO_EXTENSION);
if ($ext == 'gif' || $ext == 'jpeg' || $ext == 'jpg' || $ext == 'png')
{
echo "<a href=\"$images_folder$filename\" rel=\"prettyPhoto_OnlineSlideShow[OnlineSlideShow]\">";
echo "<img class=\"image\" alt=\"\" style=\"border-width:0;left:0px;top:0px;width:" .$image_width. "px;height:" .$image_height. "px;";
if ($count != 0)
{
echo "display:none;";
}
echo "\" src=\"$images_folder$filename\">";
echo "</a>";
echo "\r\n";
$count++;
}
}
?>
</div>
</body>
</html>
Change the function call to
$(document).ready(function()
{
$("a[rel^='prettyPhoto_OnlineSlideShow']").prettyPhoto({theme:'facebook', ,slideshow:5000, autoplay_slideshow:true});
});
That should trigger the slideshow on load, with a delay of 5 seconds between slides.

Loading spinner image while php is executing using script

Hi i am trying to use script to display a loading bar while my php is executing. I learnt from this website but when I did the exactly same thing, my loading bar still cannot display, any idea why?
<html>
<head>
<style type="text/css">
div#content {
display: none;
}
div#loading {
top: 200 px;
margin: auto;
position: absolute;
z-index: 1000;
width: 160px;
height: 24px;
background: url(img/142.gif) no-repeat;
cursor: wait;
}
</style>
<script type="text/javascript">
function preloader(){
document.getElementById("loading").style.display = "none";
document.getElementById("content").style.display = "block";
}//preloader
window.onload = preloader;
</script>
<style type="text/css"></style>
</head>
<body>
<div id="loading"></div>
<div id="content" >
<?php
sleep(10);
echo 'This content has been loaded via an AJAX request';
?>
<br>
</div>
</body>
</html>
Just run this code in any browser
<!DOCTYPE html>
<?php
#ini_set('zlib.output_compression', 0);
#ini_set('implicit_flush', 1);
#ob_end_clean();
set_time_limit(0);
?>
<html>
<head>
<style type="text/css">
div#content {
display: none;
}
img#loading {
top: 200 px;
margin: auto;
position: absolute;
z-index: 1000;
width: 500px;
height: 24px;
cursor: wait;
height: 500px
}
</style>
<style type="text/css"></style>
</head>
<body>
<?php
for ($i = 0; $i < 10; $i++) {
echo str_repeat(' ', 1024 * 64); // this is for the buffer achieve the minimum size in order to flush data
if ($i == 1)
echo '<img id="loading" src="img/142.gif" />';
}
?>
<div id="content" style="display: block;">
<?php
sleep(5);
echo 'This content has been loaded via an AJAX request';
?>
<br>
</div>
<script type="text/javascript">
function preloader() {
document.getElementById("loading").style.display = "none";
document.getElementById("content").style.display = "block";
}//preloader
window.onload = preloader;
</script>
</body>
</html>
if you have acces to php.ini set following configuration in your php.ini and remove
#ini_set('zlib.output_compression', 0); #ini_set('implicit_flush', 1); from begining
output_buffering = Off
implicit_flush = on
output_compression = Off
If your are curious about output buffering click here
<?php
sleep(1000);//increase sleep time
echo 'This content has been loaded via an AJAX request';
?>
and remove style="display: none;"

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

Categories

Resources