We Keep Coding

How to click on text in Puppeteer?

Is there any method (didn't find in API) or solution to click on element with text?
For example I have HTML:
<div class="_5THWM1">flex
<span class="_2i7N3j">Sort By</ span>
<div class="_10UF8M 3LsR0e>Relevance</div>
<div class="_10UF8M">Popularity</div>
<div class-"_10UF8M'>Price -- Low to High</div>
<div class="_10UF8M>Price -- High to Low</div>
<div class="_10UF8M" >Newest First</div>
</div>
I want to click on Price -- Low to high but with the same classes I don't know how to click and I don't know how to click on text. Can anyone help me with this, please?
I am using Puppeteer and please write code to this.

Not really but you can use xpath or you can use find:
page.$$eval('div', divs => divs.find(div => div.innerText.match(/some text')).click())

Open popups on specific places of an image?

I have an Image in a HTML page. I want to display different information when the mouse is hovering over different areas of that image. For example, I want to display information-1 when the mouse is over point-1 on the image. And when leaving i want the information-1 to hide and when the mouse is hovering over point-2 i want to popup information-2. Is this possible with JS using any kind of library?

Yes It's possible.
You can approach in 2 ways:
Image Maps - Just a link with a tutorial
Use CSS to positionate transparent elements above the image and show some text when one of this is hovered.
I made this pen to show you an example with method 2. With method 1 is kinda the same, you just need to change a little bit the code.
HTML
<div class="img-wrapper">
<img src="http://i.imgur.com/ZY0gdtF.jpg" alt="">
<div class="cloud">
<p>Hey a cloud!</p>
</div>
<div class="tree">
<p>Tree here</p>
</div>
<div class="grass">
<p>Green Grass</p>
</div>
</div>
JS
$('.cloud, .grass, .tree').hover(function(){
$(this).find('p').show();
}, function(){
$(this).find('p').hide();
});
Of course all of this is just a sample.
While the first method allows you to define a shape, the second doesn't.
Using method 1 will let you define more accurate areas, but it can be hard. Method 2 is simplier but less accurate. Your needs, your choice.

Is there a way to add an element to the same height as another selected element dynamically?

I am new to front-end development. I was trying to code an annotation tool. A sample screen is shown on the image below. After the user select a sentence, an annotation box appears on the right side bar at the same horizontal position as the highlighted sentence. Any ideas about how I can achieve that effect?
Here is my html structure. I used the framework of Zurb Foundation:
<section id="main">
<div class="row">
<div class="small-8 large-8 columns"id="rawdata">
<p> <span class="sentence">2:22 So, last time I was here, I don't know if I told you this, but, um, we kind of did a "I like, I wish" activity on paper, about things that you like about studio, and things that you wish would change.</span><span class="sentence"> Um, do you want to share any of those thoughts now, so maybe we can talk about them? [name], I have yours if you want to look at it again.</span></p>
<p><span class="sentence">2:47 I forgot to add something.</span></p>
<p><span class="sentence">2:54 Well, I don't know, in terms of what I dislike about studio.</span></p>
<p><span class="sentence">2:57 So, some people wrote in theirs that, um, they dislike how cluttered it gets.</span></p>
<p><span class="sentence">5:09 I don't get bothered.</span>< <span class="sentence">I like the draftiness, I'm a little...</span><span class="sentence"> I'm one of the ones that opens the windows, and like—</span></p>
</div>
<div class="small-4 large-4 columns" id="annotations"><p></p>
</div>
</div>
</section>
JS for selecting sentence and adding annotations:
<script>
$('.sentence').click(function() {
$(this).toggleClass('sentenceStyle');
var y = $(this).offset().top;
var para = document.createElement("p");
$("#annotations").append(para);
para.innerHTML="this is an annotation";
para.css("position",'absolute');
para.style.top = y;
});
</script>
And here it is the fiddle: http://jsfiddle.net/yujuns/HDe6v/3/

There are some things that you want to change in your code.
First what you want is to get the offset of the selection. That can only happen if you put an html tag around the selection and then get its offset. You can then place an absolute positioned message box by setting its left and top offset to the offset you got from html element.
In the following fiddle, I have shown a basic implementation to give you the basic idea. Hope it helps.
Fiddle
EDIT:
Try this fiddle update.(In response to author's question). I have added comments to lines of code that I added to js. I also added position: relative to css for annotations
Updated Fiddle

Full Screen image slider with jquery

I have to make a demo website somewhat similar to http://issuu.com/eb_magazine/docs/ebmag_31/1. The website is coded in flash but I want to do it using javascript and jQuery.
I think I need to do this in two parts, first is a simple image slider to slides between images. I think I can use any jQuery Image slider plugin for that.
The second part where we click on the image and it opens in full screen image slider with a zoom option. I don't know which plugin can be used for that. Is that even possible to do with jQuery? Please suggest any plugins for that

I think http://www.turnjs.com/ is the best solution for your query.
Turn.js is a JavaScript library that will make your content look like
a real book or magazine using all the advantages of HTML5. The web is
getting beautiful with new user interfaces based in HTML5; turn.js is
the best fit for a magazine, book or catalog based in HTML5.
Here's a sample code:
<div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
<div> Page 4 </div>
<div class="hard"></div>
<div class="hard"></div>
</div>
<script type="text/javascript">
$("#flipbook").turn({
width: 400,
height: 300,
autoCenter: true
});
</script>

How to split some html content by "page breaker"?

I use ckeditor in my website, which supports "page breaker". The sample content contains page breakers like:
<h1>
Little Red Riding Hood</h1>
<p>
"<b>Little Red Riding Hood</b>" is a famous fairy tale about a young girl's encounter with a wolf. The story has been changed considerably in its history and subject to numerous modern adaptations and readings.</p>
<div style="page-break-after: always;">
<span style="display: none;"> </span></div>
<p>
The version most widely known today is based on the Brothers Grimm variant. It is about a girl called Little Red Riding Hood, after the red hooded cape or cloak she wears. The girl walks through the woods to deliver food to her sick grandmother.</p>
This special div is page breaker:
<div style="page-break-after: always;">
<span style="display: none;"> </span></div>
I want to use javascript to split the content into multi pages by the page breaker, to tell the user how many pages the content will be, and can let user preview each page.
But how to check and split it? Is there a pure javascript or "Extjs" based solution?

You can use the String.prototype.split(); function for this: container.innerHTML.split('<div style="page-break-after: always;">');, assuming the container for your HTML code to be container.
You can use Regular Expressions for this:
var regexp = /<div\s+style=('")page-break-after:\s*always;?.*?$1[^>]*>.*?<\/div>/gm;
Which will find all the breaker DIVs for you. You can then split the string using that.

Use regex:
content.split(/<div style="page-break-after: always;">[\s\S]*?<\/div>/)
Is there a better way for [\s\S] part? I think it's a little strange.

HTML:
<form name="myform">
<input type="checkbox" name="mybox" onClick="breakeveryheader()">
</form>
JavaScript:
function breakeveryheader(){
var thestyle=(document.forms.myform.mybox.checked)? "always" : "auto"
for (i=0; i<document.getElementsByTagName("H2").length; i++)
document.getElementsByTagName("H2")[i].style.pageBreakBefore=thestyle
}