I have an Html page with cards this is my jade code:
div(id="myModal" + i class="modal")
div(class="modal-content")
span(class="close" onclick="closeMoviePopup(#{i})") ×
h2= movie.name
a(href="sodaplayer:?url=" + movie.magnet_link + "&title=" + movie.name onclick="(function(){ document.getElementById('myModal#{i}').style.display = 'none'; })();return true;") Stream
js:
function closeMoviePopup(index) {
document.getElementById('myModal' + index).style.display = 'none';
}
For some reason, every card works except the first one I don't understand why that would happen. It is not a problem with the i variable or the function I don't get what it is
Because in you index.js you are capturing the first span var span = document.getElementsByClassName("close")[0]; and executing a different function. Fix
that and it should work.
Related
I'm doing something With an ESP8266, and I need some help with the HTML part of it.
I want to duplicate 1 slider:
The code is :
client.println("<!DOCTYPE html><html>");
client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
client.println("<link rel=\"icon\" href=\"data:,\">");
// CSS to style the on/off buttons
// Feel free to change the background-color and font-size attributes to fit your preferences
client.println("<style>body { text-align: center; font-family: \"Trebuchet MS\", Arial; margin-left:auto; margin-right:auto;}");
client.println(".slider { width: 300px; }</style>");
client.println("<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script>");
// Web Page
//client.println("</head><body><h1>ESP32 with Servo</h1>");
client.println("<p>Start Temperature: <span id=\"servoPos\"></span></p>");
client.println("<input type=\"range\" min=\"20\" max=\"30\" class=\"slider\" id=\"servoSlider\" onchange=\"servo(this.value)\" value=\""+valueString+"\"/>");
client.println("<script>var slider = document.getElementById(\"servoSlider\");");
client.println("var servoP = document.getElementById(\"servoPos\"); servoP.innerHTML = slider.value;");
client.println("slider.oninput = function() { slider.value = this.value; servoP.innerHTML = this.value; }");
client.println("$.ajaxSetup({timeout:1000}); function servo(pos) { ");
client.println("$.get(\"/?value=\" + pos + \"&\"); {Connection: close};}</script>");
client.println("</body></html>");
//GET /?value=180& HTTP/1.1
if(header.indexOf("GET /?value=")>=0) {
pos1 = header.indexOf('=');
pos2 = header.indexOf('&');
valueString = header.substring(pos1+1, pos2);
//Rotate the servo
//myservo.write(valueString.toInt());
// Serial.println(valueString);
}
}
}
// Clear the header variable
header = "";
This gives me a slider, but I want another one for controlling a different thing, under a different variable.
Since I don't really understand HTML, I have tried to change some variables and duplicate the code myself, but without success. The slider works, but I get a lot of errors.
Second (independent) slider
client.println("<p>Start Sensor2: <span id=\"servoPos2\"></span></p>");
client.println("<input type=\"range\" min=\"20\" max=\"30\" class=\"slider\" id=\"servoSlider2\" onchange=\"servo2(this.value)\" value=\""+valueString+"\"/>");
client.println("<script>var slider2 = document.getElementById(\"servoSlider2\");");
client.println("var servoP2 = document.getElementById(\"servoPos2\"); servoP2.innerHTML = slider2.value;");
client.println("slider2.oninput = function() { slider2.value = this.value; servoP2.innerHTML = this.value; }");
The function servo(pos) (my guess) in the rest code not shown has either to be
duplicated or ???
to stop guessing and helping you please add the following info:
Source code esp8266 or if it is a standard example the name of the ino file
The type of error- during compilation, on the browser console, on serial port?
I created a very simple index.html file and inside I included some jquery script. You can see below:
<script>
$(document).ready(function(){
var $tweets = $('.tweets');
var current_position = -1;
function getTweets(){
var index = streams.home.length - 1;
var cp = index;
while(index >= current_position + 1){
var tweet = streams.home[index];
$tweets.append('<div class="twe"><span class="name" style="color:blue">' + '#' + tweet.user + ': ' + ' </span><span class="message">' + tweet.message + tweet.created_at + '</span></div>');
index--;
}
current_position = cp;
}
getTweets();
$('button').click(function(){
getTweets();
});
$('.name').click(function(){
$tweets.prepend('<div>' + 'objname' + streams.home.length + '</div>');
});
});
</script>
there is one button used for updates all the tweets and dynamically put them in the section with class="tweets" part. And this button works fine no matter how many times I press it.
Then I add click event to all those with class name 'name' and once I click it , it will add 'objname' + streams.home.length to the front of my
section class="tweets" part. The problem is first time , I CLICK the $('.name') it works fine , but later after I added more items through $('button') click event. it seems the new created $('.name') items is not clickable which means they don't generate 'objname' + streams.home.length to the front of my
section with class="tweets" part. I am really confused here and don't know why.
try following
$("body").on("click",".name",function(){
$tweets.prepend('<div>' + 'objname' + streams.home.length + '</div>');
});
As your element gets added runtime on the page, it needed to be taken care separately with help of "on" which bind events automatically when event gets created.
check reference
I'm struggling making the following razor snippet working
<ul>
#foreach (var lang in umbraco.cms.businesslogic.language.Language.GetAllAsList())
{
var url = Model.Content.Url + "?lang=" + #lang.CultureAlias;
if (currentCulture.TwoLetterISOLanguageName.Equals(lang.CultureAlias))
{
<li class="active">#lang.FriendlyName</li>
}
else
{
<li>#lang.FriendlyName</li>
}
}
If I remove the variable assignment between the foreach and the if it works fine, but otherwise I get a compilation error (like the razor parser understands a } as markup and tries to render it).
Any way to solve this?
Think the issue is in this line
var url = Model.Content.Url + "?lang=" + #lang.CultureAlias;
You don't need the additional # since you are already in 'code' mode
So try changing #lang.CultureAlias to lang.CultureAlias
You've got too many #s here:
var url = Model.Content.Url + "?lang=" + #lang.CultureAlias;
should become:
var url = Model.Content.Url + "?lang=" + lang.CultureAlias;
I have :
$scope.text = "<b>TESTNAME</b>"; (This can be any string. This is to specify that there can be html tags written as text in the string.)
The bold tags are part of text and need to be displayed as text only and not HTML.
Now suppose someone enters a search string(for eg.. anyone can enter any string) :
$scope.searchTerm = "NAME";
Then i want that $scope.text gets modified such that i see <b>TESTNAME</b> but with the substring of "NAME" highlighted.
My highlight function does :
$scope.text = $scope.text.replace(new RegExp("(" + $scope.searchTerm + ")","gi"), "<span class='highlighted'>\$1</span>");
and in the HTML I had to write :
<span ng-bing-html="text"></span>
However, the issue now arises is that, the <b> and </b> also get rendered in the HTML form and bold the string in between.
How can this be handled?
EDIT
In order to avoid the b tags from rendering as HTML, I modified the angular brackets to their HTML counterparts using this :
$scope.text = $scope.text.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
after using the first replace function mentioned above. Now when the $scope.text is rendered using ng-bing-html, the b tags are only rendered as text.
However, now the span tags added are also rendered as text as angular brackets have been replaced globally.
EDIT
Another way to deal with the problem was that i replaced the angular tags before adding the span tags to highlight the text. So my highlight function was :
$scope.text = $scope.text.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
$scope.searchTerm = $scope.searchTerm.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
$scope.text = $scope.text.replace(new RegExp("(" + $scope.searchTerm + ")","gi"), "<span class='highlighted'>\$1</span>");
However, the issue with this is that if the user searches for the string lt or gt,then due to the replacements done for < and >, the highlight spans are added to these too and the net result is not as expected.
Please check working example: DEMO
Controller:
var app = angular.module('plunker', ["ngSanitize"]);
app.controller('MainCtrl', function($scope) {
$scope.searchTerm = "NAME";
$scope.content = "TESTNAME";
$scope.matchClass = 'bold';
var re = new RegExp($scope.searchTerm, 'g');
$scope.content = $scope.content.replace(re, '<span class="' + $scope.matchClass + '">' + $scope.searchTerm + '</span>');
});
HTML
<body ng-controller="MainCtrl">
<p ng-bind-html="content"></p>
</body>
CSS
.bold {
font-weight: bold;
}
Edit: new solution:
$scope.text = $scope.text.replace(new RegExp("(" + $scope.searchTerm + ")","gi"), "long-random-string-one$1long-random-string-two");
// Any encoding goes here
$scope.text = $scope.text.replace("long-random-string-one", "<span class='highlighted'>").replace("long-random-string-two", "</span>")
The idea is to insert two strings that won't be changed by the encoding, and are unique enough that they are extremely unlikely to be present in the text you are searching. Replace them with GUIDs if you want.
I am struggling to understand how I can achieve the look I want with HTML tables/CSS while also having an Accordion, I am getting data from multiple SharePoint lists and displaying it to the page in a JqueryUI Accordion however because it's essentially just a data dump I need to be able to add headers so the users know what data is what. I have created a JS Fiddle of how I tried to do it, with the issues explained below:
http://jsfiddle.net/7uv3m1fy/
The look I am trying to achieve is a set of headers across the top for the parent dataset, with the data from that set being the clickable part of the Accordion. These need the data to line up under the headers. This is pretty much the entire issue I have, they seem to be using only the first of the HTML table on subsequent rows when I want the information to fill all of the columns (preferably with a way to match where the information goes to under it's header)
I honestly don't know enough about CSS or how I could achieve this using DIV's while still being able to get information to line up.
The biggest issue I have is that because the data populating these tables is called from SharePoint lists/views, the number of columns is completely dynamic so I cannot hardcode column width/numbers.
Any suggestion of how I could do this using CSS or HTML or Both would be greatly appreciated.
below is the code I am currently using to generate this (C# as it's for a SharePoint WebPart)
try
{
if (parentItems.Count > 0)
{
newHTML = newHTML + "<Table style='table-layout:fixed' width='100%'><tr>";
foreach (string fieldName in viewFields)
{
newHTML = newHTML + "<td> " + parentList.Fields.GetFieldByInternalName(fieldName).Title + "</td>";
}
newHTML = newHTML + "</tr>";
}
}
catch
{
newHTML = newHTML + "No Results Found";
}
foreach (SPListItem parentitem in parentItems)
{
newHTML = newHTML + "<tr class='yes' width='100%'><td> Parent:</td><td>" + parentitem.ID.ToString() + "</td></tr><tr width='100%'><td>";
foreach (SPListItem childitem in childItems)
{
if (childitem[RelatedID].ToString() == parentitem.ID.ToString())
{
newHTML = newHTML + "<div>" + childitem.ID.ToString() + "</div>";
}
}
newHTML = newHTML + "</td></tr>";
}
newHTML = newHTML + "</table>";
}
And in the webpart I am adding the following to call it:
<div id="accordion">
<%= this.newHTML %>
</div>
I hope I have given enough information, although the code above doesn't really relate to the question it will show you how I am trying to dynamically output the HTML to achieve my goal.
Happy to provide more info if you need it.
Regards,