Develop Reference

How to make pop up with reactjs

How to make a pop-up information box when you click an element.
Example like this image :
Like this image, you click "View all study equipment" an element and then get that pop-up for more information.
This is my code :
<>
<div className="description-container">
<div className="nav-tab">
<ul className="description-tab">
<li>
<a href="/" className="active">
Class Description
</a>
</li>
<li>
Testimony
</li>
<li>
FAQ
</li>
</ul>
</div>
</div>
<div className="description-info">
<div className="desc-list">
<h2>Description</h2>
<p>
Websites in today's era have become a major need that cannot be
ignored. All business or education sectors can use the website as a
tool for promotion, exchange of information, and others. Based on data
from the World Wide Web Technology Surveys, of all active websites,
88.2% use HTML, 95.6% use CSS and 95% use JavaScript. This class
thoroughly discusses the basics of HTML, CSS and JavaScript as the
three foundations of website creation.
</p>
<ul>
<li>
<p>The web is a platform that can be accessed through many kinds of devices. This is an advantage if you develop Web-based applications.</p>
</li>
<li>
<p>Web development does not require a computer/laptop that has high specifications, so it is not an obstacle for those of you who do not have a capable device.</p>
</li>
<li>
<p>The website is a platform that is reached by search engines such as Google Search, so the website is suitable as a medium for promoting business or content.</p>
</li>
<li>
<p>Developing a website includes development that is easy to maintain and easy to publish.</p>
</li>
</ul>
</div>
<div className="specs-description-info">
<h4>Learning Equipment</h4>
<h5><i class="fas fa-microchip"></i>Processor</h5>
<span>Intel Celeron (Core i3 and above Recommended)</span>
<h4>Tools yang dibutuhkan untuk belajar:</h4>
<span><i class="fad fa-window"></i>Web Browser (Google Chrome atau Mozilla Firefox)</span>
<br />
<br />
<a className="equip_info" href="/">View all study equipment</a>
</div>
</div>
<div className="sub-border-description-info">
<h3>Student Targets and Goals :</h3>
<ul>
<li>
<p>This class is intended for beginners who want to start their career in the field of web development (web creation) and need a strong foundation or foundation before studying deeper in the web field, with reference to international standards owned by Google Developers.</p>
</li>
<li>
<p>Classes can be attended by students who are IT literate so it is mandatory to have and be able to operate a computer well.</p>
</li>
<li>
<p>This class is designed for beginners so there are no prerequisites in prior understanding of programming.</p>
</li>
<li>
<p>Students must be able to learn independently, be committed, really have curiosity, and be interested in the subject matter, because no matter how good this class material is, it will not be useful without students' seriousness to learn, practice, and try.</p>
</li>
</ul>
</div>
<div className="subdescription-info">
<h3>General and Specific Objectives of the Training :</h3>
<ul>
<li>
<p>At the end of the training, participants can create a simple website using programming code that complies with global standards.</p>
</li>
<li>
<p>Build a website using simple HTML, CSS, and JavaScript code.</p>
</li>
<li>
<p>Implement a good website structure using standard semantic HTML.</p>
</li>
<li>
<p>Demonstrating the preparation of website layouts using float or flexbox techniques.</p>
</li>
</ul>
</div>
</>
Maybe you can share how to make it with React Javascript and CSS too.
This is using newest react.
Thank You

So, what you can do is use the useState hook. Let me explain:
first, import the usestate hook, check the react docs on how to do that, but if youre using vs code it will probably do that for you if you type the next part -->
this will create a state oject (popup) with the default value of false, that can be altered by the togglepopup function:
const [popup, togglepopup] = useState(false);
Then in your button/element you want to use to toggle the popup write:
onClick={togglepopup(!popup)}
this will change the current popup value to the oposite value, e.x. false => true, true => false.
then just create a piece of javascript that looks like this:
{popup && <div className={'popup-bg'}>
<div className={'popup'}></div></div>}
now just set the popup-bg in your stylesheet to position: fixed, width: 100vw, height: 100vw, display: flex, align-items: center, justify-content: center, backdropfilter: blur(10px);
and now it will center your popup div.

Right-side Menu Not Working

I was hoping to pick your brains about why my right-side menu won’t open. It used to but after I’ve been fiddling about adding scrolling lightboxes it’s not any more. I am unable to identify if this is a html / css / js problem as have tried to revert to previously used html / css and js when the menu does pop-up and this hasn't resolved. I have also tried cleaning up the HTML and CSS and neither has worked so I have reverted back to what I find tidier working with.
This particular site is for fun and is adapted from HTML5UP's examples, for which this particular site is available here: HTML5 UP Phantom with a working menu - which is how mine was prior to adding in the lightboxes.
I will attempt to include my code and css and would be very grateful for any ideas about what has gone wrong. I have tried to include a JSFiddle but cannot see how to add multiple different javascripts in - but would be happy to if someone can let me know how to do this! I am wondering if this is a problem of the new JS scripts I've added conflicting with those that the menu would use.
<!-- Header -->
<header id="header">
<div class="inner">
<!-- Logo -->
<a href="index.dwt" class="logo">
<span class="symbol"><img src="../images/logo1.jpg" alt="" /></span><span class="title">Single in Brisbane</span>
</a>
<!-- Nav -->
<nav>
<ul>
<li>Menu</li>
</ul>
</nav>
</div>
</header>
<!-- Menu -->
<nav id="menu">
<h2>Menu</h2>
<ul>
<li>Home</li>
<li>About</li>
<li>Subscribe</li>
<li>Giveaways</li>
<li>Advertise</li>
<li>Contact</li>
</ul>
</nav>
Thank you kindly.

Are search engines going to see my dynamically created content in Bootstrap tabs?

I have a page index.php with 3 Bootstrap tabs in it, and for each tab I am generating its content after user clicks on it.
For example:
when page is loaded I will execute SQL query that will get data from database only for first tab.
when user clicks on the second tab, I am executing a query that will take data and display it in selected tab.
Is this good approach? Is Google going too see all that data when it index the page containing all this tabs? I do not want to pull all data at once because of performance issues.
Here is my sample code, so please tell me if this is a good approach:
index.php file:
<!DOCTYPE html>
<html>
<head>
<title>Tabs demo</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<?php $model = [
0 => ['title' => 'First item', 'content' => 'Some first content'],
1 => ['title' => 'Second item', 'content' => 'Some second content']
]; ?>
<?php foreach ($model as $data): ?>
<h3><?= $data['title'] ?></h3>
<p><?= $data['content'] ?></p>
<?php endforeach ?>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
</div>
<!-- jQuery library -->
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
I am afraid that search engines will not see second and third tabs contents. Or at least they will not relate them with index.php page. Am I wrong?

No, we (Google) won't see the content behind tabs iff the content under the tab is dynamically generated (i.e. not just hidden).
You can also see what we "see" using Fetch as Google in Search Console (former Webmaster Tools); read more about the feature in our post titled Rendering pages with Fetch as Google.

The best aproach is to design the website to work without javascript, and just replace all your anchor elements that work with ajax to pass a GET variable to your web controller, so it knows to return just the html to be inserted with javascript.

If you are using JS/AJAX, (I don't really see any, but I can't think of a better alternative) you are going to have a hard time getting Google to index your pages. Google has a good documentation on this that has helped me in the past on projects with similar goals.
https://developers.google.com/webmasters/ajax-crawling/docs/learn-more
Is it really that big of a deal to not load the content until the tab is clicked? Unless you are working with an un-cacheable constantly updating database and massive HTML output that would create a long flash of unstyled content I would say splitting the tabs view code is somewhat trivial.

Maybe this can help:
If your problem is performance, it's maybe because you have strong DB queries or a shared server. If not, please ignore this.
When loading the whole page, put a "fake" HTML code in each tab. Try to build the HTML code shaped as the real code that is loaded when each tab is clicked. Put all of this inside an invisible DIV. Each time the page is loaded, put also some random data (maybe a 16-chars random-generated string). In this way I think Google will spider your data more frequently (this doesn't happen for static content).
Regards.

How do I make a menu pop up when the user clicks the menu button?

I'm new to web development and I dont have much experience. I have been trying to create a menu that becomes visible when the user clicks it. I have been able to make it pop-up but it doesnt stay visible. It becomes visible for a second and turns invisible again. I have tried this with the 'display' property as well. However, that has the same results. Here is my code:
<head>
<script type="text/javascript">
function opnmenu () {
document.getElementById("menu").style.visibility="visible";
}
</script>
</head>
<body onLoad="document.getElementById('menu').style.visibility='hidden';">
<div id="menubar">
<table>
<tr>
<td>
<div id="menuimg">
<form>
<input type="image" class="menubut" src="menu.png" alt="submit" onClick="opnmenu()">
</form>
</div>
</td>
</tr>
</table>
</div>
<br>
<h1> Entrepreneur</h1>
<hr>
<div id="menu">
<ul>
<li>Home</li>
<li>Motivation</li>
<li>Books</li>
<li>Videos</li>
</ul>
</div>
</body>
Any help will be appreciated.
Thank You.

Here is a sample using pure javascript (some code comes from the other comments) with more proper HTML5:
http://jsfiddle.net/59su4/1/
The problem with visibility: hidden is that the menu will take the place it would normally take if it was visible. Here is an example with visibility property:
http://jsfiddle.net/59su4/2/
(notice the empty space taken by the hidden menu)
[EDIT] after the author comment, I mixed the HTML, JS and CSS into a single code to show where each element goes in the page.
FULL PAGE
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My menu is ALIVEEEE</title>
<style>
.menu {
display: none;
}
.menu.opened {
display: block;
}
</style>
</head>
<body>
Toggle menu
<nav class="menu">
<ul>
<li>Home</li>
<li>Motivation</li>
<li>Books</li>
<li>Videos</li>
</ul>
</nav>
<p>
To facilitate the process, AI Lab hackers had built a system that displayed both the "source" and "display" modes on a split screen. Despite this innovative hack, switching from mode to mode was still a nuisance.
</p>
<script>
var openMenuBtn = document.getElementsByClassName('open-menu')[0],
menu = document.getElementsByClassName('menu')[0];
openMenuBtn.addEventListener('click', function ( e ) {
// We don't want the empty link to be followed
e.preventDefault();
// Toggle the menu
menu.classList.toggle('opened');
}, false);
</script>
</body>
</html>

Examples using Lungo.JS

Is there any example on using Lungo.JS?
I'm trying to start developing a WebApp for mobile content... and I've found http://lungo.tapquo.com/ , but I can't seem to find examples.
Thanks in advance

You have a HOWTO here..
http://lungo.tapquo.com/documentation/
it is easy to make a test sample..
1 - on \app\app.js uncoment lng.App.init(...)
2 - remove the test section and paste this complet example (based on the howto):
<section id="main">
<header data-title="Title of section"></header>
<article id="first_article"></article>
<article id="second_article" class="list">
<scroll id="main_scroll">
<ul>
<li data-icon="user">
<strong>#soyjavi</strong>
<small>Author of #Lungojs</small>
</li>
<li data-icon="user">
<strong>#pasku1</strong>
<small>Contributor of #Lungojs</small>
</li>
...
</ul>
</scroll>
</article>
<footer class="toolbar">
<nav>
<!-- This link is to view a different section -->
</nav>
</footer>
</section>
<section id="second">
<header data-back="home blue"></header>
<!-- content -->
</section>
3- if you want more, there are screencasts: http://vimeo.com/user9162294
[edited]
4 - I have seen that there are examples on github: https://github.com/TapQuo/Lungo.js/tree/master/examples

I heard about downloaded the examples and just had a quick play here > https://github.com/daithiw44/Lungo-WS-Node-oAuth. I heard about it and had a look. Its easy to use, clean and neat, I like it. Its only starting out but its a good start.

The example is surprisingly enough in the example folder: https://github.com/tapquo/Lungo.js/tree/master/example
You can also play with it directly by going to: http://lungo.tapquo.com/demo/