Getting double quotes in Html element name - javascript

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.

Related

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

Creating a tag box

I'm making a tag box similar to that of StackOverflow. I see that this question has already been asked here (How to make a "tags box" using jQuery (with text input field + tags separated by comma)) but I'm having a question with regards to the Javascript.
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='tag-container' id = "tag-container">
<span class='dashfolio-tag'>Tag1</span>
<span class='dashfolio-tag'>Tag2</span>
<span class='dashfolio-tag'>Tag3</span>
</div>
<input type="text" value="" placeholder="Add a tag" id = "add-tag-input" />
CSS:
.tag-container {
max-width: 300px; /* helps wrap the tags in a specific width */
}
.dashfolio-tag {
cursor:pointer;
background-color: blue;
padding: 5px 10px 5px 10px;
display: inline-block;
margin-top: 3px; /*incase tags go in next line, will space */
color:#fff;
background:#789;
padding-right: 20px; /* adds space inside the tags for the 'x' button */
}
.dashfolio-tag:hover{
opacity:0.7;
}
.dashfolio-tag:after {
position:absolute;
content:"×";
padding:2px 2px;
margin-left:2px;
font-size:11px;
}
#add-tag-input {
background:#eee;
border:0;
margin:6px 6px 6px 0px ; /* t r b l */
padding:5px;
width:auto;
}
JS:
$(document).ready(function(){
$(function(){
$("#add-tag-input").on({
focusout : function() {
var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig,''); // allowed characters
if(txt) $("<span/>", {text:txt.toLowerCase(), insertBefore:this});
this.value = "";
},
keyup : function(ev) {
// if: comma|enter (delimit more keyCodes with | pipe)
if(/(188|13)/.test(ev.which)) $(this).focusout();
}
});
$('.tag-container').on('click', 'span', function() {
if(confirm("Remove "+ $(this).text() +"?")) $(this).remove();
});
});
});
My question is pretty simple, how do I add the new input as a span with class dashfolio-tag inside the #tag-container? I dabbled with the insertBefore property trying to add it to the right node, but to no avail. Thanks in advance guys!
Change this line of code,
if(txt) $("<span/>", {text:txt.toLowerCase(), insertBefore:this});
to
if(txt) {
$("<span/>", {
text:txt.toLowerCase(),
appendTo:"#tag-container",
class:"dashfolio-tag"
});
}
See the demo: https://jsfiddle.net/2gvdsvos/4/
To fix the margins in between tags,
Update HTML to,
<div>
<div class="tag-container" id="tag-container">
<span class='dashfolio-tag'>tag1</span>
<span class='dashfolio-tag'>tag2</span>
<span class='dashfolio-tag'>tag3</span>
</div>
</div>
<div>
<input type="text" value="" placeholder="Add a tag" id="add-tag-input" />
</div>
And add this to CSS,
.tag-container:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.dashfolio-tag {
...
margin-right: 4px;
float: left;
}
Hope this helps! ;)
https://jsfiddle.net/2gvdsvos/5/

Code works in jsfiddle but not in html page [duplicate]

This question already has an answer here:
jquery code works on codepen/jsfiddle but not html page
(1 answer)
Closed 6 years ago.
I am using code from Max lines textarea to create a textarea with only 9 lines and this code works perfectly on my jsfiddle, https://jsfiddle.net/cityFoeS/3j48cpzn/ The textarea will not limit the textarea to 9 lines like I want it to.
my HTML:
<html>
<head>
<style>
body {
background: black;
}
textarea {
overflow: hidden;
resize: none;
font-family: courier;
color: white;
outline: none;
line-height: 20px;
margin: 0;
padding: 0;
border: 0;
left: 45px;
position: absolute;
font-size: 14px;
background-color: black;
border-bottom: 1px solid white;
}
div {
font-family: courier;
color: white;
line-height:20px;
position: absolute;
font-size: 14px;
width: 29px;
border-right: 1px solid white;
border-bottom: 1px solid white;
left: 10px;
}
</style><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
var limit = 9; // <---max no of lines you want in textarea
var textarea = document.getElementById("splitLines");
var spaces = textarea.getAttribute("cols");
textarea.onkeyup = function() {
var lines = textarea.value.split("\n");
for (var i = 0; i < lines.length; i++)
{
if (lines[i].length <= spaces) continue;
var j = 0;
var space = spaces;
while (j++ <= spaces)
{
if (lines[i].charAt(j) === " ") space = j;
}
lines[i + 1] = lines[i].substring(space + 1) + (lines[i + 1] || "");
lines[i] = lines[i].substring(0, space);
}
if(lines.length>limit)
{
textarea.style.color = 'red';
setTimeout(function(){
textarea.style.color = '';
},500);
}
textarea.value = lines.slice(0, limit).join("\n");
};
</script>
</head>
<body>
<div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10</div><textarea rows="10" cols="50" id="splitLines" onpaste="return false;"></textarea>
</body>
</html>
The problem is that in JSFiddle, you have the option "Load Type" set to "onload" under the JavaScript options.
In your code, however, the JavaScript runs immediately, before the HTML — this will cause the error (and this is what I get when running it as a standalone HTML page):
Uncaught TypeError: Cannot read property 'getAttribute' of null
There are two solutions:
Moving the <script> tags to the end of the <body> tag. For example:
<body>
<!-- all your visible HTML elements -->
<script>
// all your JS code
</script>
</body>
Encapsulating all the JavaScript in a window.onload function or a $(function() {}) (for use with jQuery). For example:
<script>
window.onload = function() {
// all your JS code
};
</script>

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

Coloring HTML tags by class with JavaScript and CSS

I am creating a spreadsheet type program out of table cells and AngularJS and I would like to color my input cells based on the user's uploaded file.
I have an array that contains all of the user's data that I iterate through, and pending a match with some regular expressions, some data is pushed into a "red array" and a "blue array". I then have a function that is to be called when the original array's info is put into the spreadsheet. This function checks to see if the info being placed is in either the red or blue array, and will then color the input box red or blue (or green if no match is found.)
This coloring function is supposed to return a string which can be used as either the id or class of the input tag, and in the CSS, it colors the tag based on this returned name.
However, I can't seem to figure out the correct way of coloring the input tag. My input boxes remain the default white.
<script>
...
var blue = ["blue1","blue2","blue3"];
var red = ["red1","red2","red3"];
var allData = [["red1","misc1","misc2"],["blue1","blue2","blue3"],["red2","red3","misc3"]];
var makeColors = function(data){
if( data in red){
return "red";
}
else if( data in blue){
return "blue";
}
else{
return "green";
}
};
//creates the spreadsheet
sheet= function($scope, $parse){
$scope.columns = ["col1","col2","col3"]
$scope.rows = allData.length;
$scope.cells = {};
$scope.values = allData;
};
</script>
<div ng-app ng-controller="sheet">
<center><table>
<tr class="column-label">
<td ng-repeat="column in columns">{{column}}</td>
<tr ng-repeat="value in values">
<td class="row-label" ng-repeat="data in value">
<div id="{{data}}">
<input type="text" value="{{data}}" class="makeColors({{data}})">
</div>
</td>
</tr>
</table></center>
</div>
<style>
input{
font-size: 10pt;
position: absolute;
height: 1.2em;
height: 14pt;
overflow: hidden;
padding-left: 4pt;
border: none;
width: 80px;
}
table{
border-collapse: collapse;
}
td > div {
height:16pt;
width:2px;
}
td {
border: 1px solid #0EE;
width:85px;
}
.column-label >td, .row-label{
text-align:center;
background: #EEE;
}
.row-label {
width: 2em;
}
input.red{
background-color: red;
}
input.blue{
background-color: blue;
}
input.green{
background-color: green;
}
</style>
Your problem is on this line:
class="makeColors({{data}})"
You can't do it like that. Here is a fiddle where I'm using a map() to solve it: http://jsfiddle.net/W5aED/
To explain further the problem, the code outside {{ }} is not executed by angular (I mean the makeColors( part) and even if it were that is not the correct way to execute a javascript function.

Categories

Resources