Develop Reference

Get rendered html as text, including newlines

I have a page with some html rendered into it.
I want to get the rendered page as text, but somehow also include the newlines. In addition, if relevant, I'm looking for an extended solution that will also support lists (using spaces and •), tables (using spaces, but with no borders) and similar cases.
I'm looking for Javascript solution, either on client or server side.
Please mind: not every element in the page equals to new line (e.g: some divs can be inline and some can create new lines).
For exapmle, this snippet below will be the html, and the output will be the text itself as you can see below (after running).
#inline{
display:flex;
flex-direction:row;
}
#inline div{
margin-right:5px;
}
#notInline{
display:flex;
flex-direction:column;
}
<div>
<div id='inline'><div>some</div><div>divs</div><div>inline</div></div>
<div id='notInline'><div>some</div><div>divs</div><div>on top of each other</div>

You can try this. First inline text second "on top of each other" text:
var inlineOutput = '';
document.querySelector('#inline').childNodes.forEach(e=>{inlineOutput += e.textContent + ' '}) + "\n";
console.log(inlineOutput);
var noInLineOutput = '';
document.querySelector('#notInline').childNodes.forEach(e=>{noInLineOutput += e.textContent + " \n"});
console.log(noInLineOutput);

There's a js scraper called Cheerio that could extract all the text out for you, I've never used it though. It gives you access to the DOM and you can gather parts of whichever page you need. here's a tutorial that uses it with node.
Not sure if this is what you're looking for, if they're your own pages you can probably make a function that calls everything in the dom and delimits at the open close carats and grabs in the text inbetween, and maybe make a switch if it sees the notInLine class

How to create a Back button which will land at the specific text/link clicked on to view an image

What I am trying to do:
I have mutiple anchor links within text, each of which refers to and connects to a specific image (on the same page).
After the user views that image, I would like them to hit a 'Back' button, which will bring them back to the text where they clicked on the link, to continue reading from where they left off.
(I have created the button in the html, with an 'id' of 'backButton').
Note: I am new to JS and jQuery, and perhaps my inability to find a plugin or explanation of how to do this has something to do with a failure to do a search with a clear and concise explanation in a search box.
(It seems to me that this would be a fairly commonly used feature)
This is where I currently stand with my attempts to use jquery for this:
$(function(){
$('a').click(function(){
$(this).attr('id', 'backToLink').addClass('que');
$('#backButton').attr('href', '#backToLink');
});
});
(I will try to explain my reason for why I did each step so that someone might tell me why it is wrong):
$('a').click(function(){
For each anchor, when it is clicked on, do this function,
$(this)
Refer to the anchor link that was clicked,
.attr('id', 'backLink')
Give this anchor the 'id' of backToLink,
.addClass('que');
Add the class of que, which is set in my CSS file to give padding-top so that the text will be visible below the fixed-position header,
$('#backButton').attr('href', '#backToLink');
Set the #backButton href to go back to the original link in the text, which should now be #backToLink.
Note: I suspect it will be necessary to turn off that id of #backToLink after it is used,
so that the next time it is used it will not conflict with the first.

I think the issue here is if you want to use anchor navigation then you dont need to use html button. Just simply use anchors. Here is a simple example of what you want to achieve. You can add in logic to make it dynamic according to your needs or keep it like this with adding the number of links manually. Hope this helps.
P.S. css classes are used just to add spacing to demonstrate the scrolling.
function scrollToAnchor(aid){
var aTag = $("a[name='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top},'slow');
}
$("a").click(function() {
scrollToAnchor($(this).attr('href').slice(1));
});
#container{
height:2800px;
}
#block1{
background-color:black;
width:100px;
height:100px;
margin-top:1000px;
display:inline-block;
}
#block2{
background-color:black;
width:100px;
height:100px;
margin-top:600px;
display:inline-block;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id="container">
Link to Block 1
<br><br>
Link to Block 2
<br>
<div id="block1"></div>
Back to Link 1
<br>
<div id="block2"></div>
Back to Link 2
</div>

A function with changing variable, dependent on a class

So, first some background.
I have 9 types of rooms that are displayed as thumbnails with the name. What I want to do is that on click "Additional Information" - the rooms with disappear and the expanded version of a chosen room type will appear with the description and bigger picture. Also, there is an ability to go next and previous in the expanded view. I do not have a problem with this expansion and previous/next. BUT!
Here is what I am trying to achieve: if the code looks approximately like
<ul id="room_holder">
<li><div class="room 1">Additional Info</div></li>
<li><div class="room 2">Additional Info</div></li>
and so on...
And the expandable area will look something like:
<div id="expandable">
<div id="picture">Blah-blah-blah, some description, etc</div>
</div>
So, basically, what I can't figure out is how to get the needed slide to show when the correspondint thumbnail is pressed. I know I can do the .addClass method, and copy the code 9 times, for each of the numbers (1-9). But I believe it is 9 times more compact if I have some sort of function, that gets the second class name (the number) by using .split(' ')[1] and then using it as part of the variable in the part which opens the corresponding expandable view. So, my question is: how do I do this? I am a newbie with javascript, but try to learn on the go!
Oh, and the codepen that I've been trying to deal with is:
http://codepen.io/godban/pen/QbZmxz

Firstly, you should use data-* attribute instead of classes (new in HTML5) data attributes, w3school :
<ul id="room_holder">
<li><div class="room" data-room="1">Additional Info</div></li>
<li><div class="room" data-room="2">Additional Info</div></li>
Then, use the click function from jQuery .click( handler ), use it this way to know which one has been clicked :
$(".room").click(function(event){
var target = event.currentTarget;
var room = $(target).data("room");
alert(room);
});

Create a region on HTML with changing values

I am a beginner in HTML and I want to create a region on a HTML page where the values keep on changing. (For example, if the region showed "56" (integer) before, after pressing of some specific button on the page by the user, the value may change, say "60" (integer) ).
Please note that this integer is to be supplied by external JavaScript.
Efforts I have put:
I have discovered one way of doing this by using the <canvas> tag, defining a region, and then writing on the region. I learnt how to write text on canvas from http://diveintohtml5.info/canvas.html#text
To write again, clear the canvas, by using canvas.width=canvas.width and then write the text again.
My question is, Is there any other (easier) method of doing this apart from the one being mentioned here?
Thank You.

You can normally do it with a div. Here I use the button click function. You can do it with your action. I have use jquery for doing this.
$('.click').click(function() {
var tempText = your_random_value;
// replace the contents of the div with the above text
$('#content-container').html(tempText);
});

You can edit the DOM (Document Object Model) directly with JavaScript (without jQuery).
JavaScript:
var number = 1;
function IncrementNumber() {
document.getElementById('num').innerText = number;
number++;
}
HTML:
<span id="num">0</span>
<input type='button' onclick='IncrementNumber()' value='+'/>
Here is a jsfiddle with an example http://jsfiddle.net/G638z/

Table with 100 rows; need to show a div dependent on a link clicked in the row

The table has over hundred rows. I have already have a link that looks like this:
<img src="http://internaleservername:2323/img/remote_small.png" alt="remote connection icon" border="0">
What I would like to do is have a DIV open in the middle of the screen on top of everything displaying data that is in a variable that I have per row. I could create a div per row that is hidden but all the solutions I have found to show/hide a div on a click are reliant on the div id being unique. I am not sure if this is possible but the link above can't change but can we get it to display automatically when that link is clicked without having to click another show/hide?
Any help would be much appreciated

make the div position:absolute, and than you'll need to do something along the line:
$("a").click(function(e){
$('div').css("left", e.pageX +'px');
$('div').css("top", e.pageY +'px')
});
But to get the wanted information, you'll prolly need an AJAX call, or atleast some sort of append to html.
Good luck!

First, to do the display of the div it sounds to me like you would be well-served with a jQuery dialog (or whatever JS framework you prefer). Other users have answered with was to display the div without jQuery. You can easily center this on the page.
Then you'll want to add an onClick event handler to each link, using code like #Gaby has posted (which uses jQuery)
Inside the event handler function, as #Treemonkey pointed out, you can grab your extra data by pulling it out of $(this)
$('a[href|="teamviewerconnect"]').click(function(){
//Get whatever data you need like
var idNumber = $(this).attr('href').split("'")[1];
//Use that data to update the HTML of your div if needed, or do an ajax query here
$('#mydialogdivid').html('<p>Blah Blah Blah ' + idNumber);
$('#mydialogdivid').dialog();
});

You can target those links with
$('a[href*="teamviewerconnect"]').click(function(){
// show/hide here
});
to make the div stay centered and on top of everything try
<div class="view-data"></div>
and
.view-data{
position:fixed;
width:300px;
height:300px;
top:50%;
left:50%;
margin-top:-150px; /*half of height*/
margin-left:-150px; /*half of width*/
}

This is an extension but more for your answer (YOU DO NOT NEED AJAX)
This can then go inside your $(document).ready(function(){
E.G
function openDiv(txt1, txt2, txt3){
$("#divID").html("<div>"+txt1+"</div><div>"+txt2+"</div><div>"+txt3+"</div>");
$('#divID').css({"left": e.pageX +'px', "top": e.pageY +'px', 'display':'block'});
}
then on each TableRow (gessing its serverside loop) on the loop add the onclick="openDiv('data1','data2','data3')"
for more information you can just add more to the list of txt1, txt2,... and then add "+txt3+" again with what you want
Im using txt1/2 as example you can make the name more meaning full, and if you want to make it so there is static text just add it before the "+ of each var your using