Develop Reference

Negating Effects of a Previous Click Event on One Element When a Click Event Occurs on Another Element

I'm having a problem with some vanilla JavaScript that I need help with. I know that the title of this question may seem like a double of others, but I believe there may be a slight twist to my issue that is causing me to either be confused or follow the wrong path of thinking. Here is how I will present my problem...
FIRST - I will describe the issue plus provide a temporary link to the page in question. It is my portfolio website... I would like to start looking for a Junior level Frontend Developer position.
SECOND - I will briefly show some research and my take on how to come to a solution.
THIRD - I will provide the code for the problem I'm trying to solve.
**** ONE IMPORTANT NOTE - I firmly believe in the "teach a man to fish, rather than give him a fish" philosophy and so if you have a solution, could you please explain WHY it works or point me to reference materials so I can read up on it?
(1) DESCRIPTION OF ISSUE ----------------------------------->
On the "Project Page" of the portfolio website that I'm building for myself, I am attempting to make it so that when you click on the image of a project I have done, it displays a block of descriptive text about that project on one side of the screen.
If you were to click on another project image, the already displaying block of text would disappear and a new block of text would appear in the same position.
I have managed to come up with code that displays the text blocks once a project image is clicked, but because the previous text block doesn't disappear, the text blocks are stacking on top of each other when a new project image is clicked.
Here is a temporary link to the page in question: [http://s9m00001.site/projects.html][1]
(2) MY RESEARCH AND THOUGHTS TOWARDS A SOLUTION -------------------------->
I have done Google searches and have checked out some of the suggested stack overflow posts that appeared when I typed the title to this question that I am posting. The closest thing I could find to my situation was this: [Remove changes from one element when event occurs on another element?
I tried to apply the concept of what that rather eloquent first solution provided. I even looked up the Array map () method on W3Schools because I was not familiar with it. That article is here: https://www.w3schools.com/jsref/jsref_map.asp
In attempting to solve the problem, my line of thinking was as follows:
use querySelector to grab all of the project images by class and put them into an array.
Add a "click" event listener to the items in the array that enables "function X".
"Function X" changes the css "display" property of the appropriate text blocks from "none" to "block".
Use an if statement to see if there are any other text blocks with a "display of "block" and then to change them to a "display" of "none" if the condition was true.
(3) CODE -------------------->
I am providing the code that I'm using below. Please note that I have included one of my attempts at solving the issue in my JavaScript code, which has been commented out and labeled as "ONE OF MY SOLUTION ATTEMPTS". It was the attempt that I felt I was the closest with to solving the issue.
HTML
<!-- MAIN -->
<div id="upper-project-container">
<!-- Golden Glow Investigative & Protective Services -->
<div class="project-text-left" id="proj-des1">
<h4 class="project-tech">Golden Glow Investigative & Protective Services</h4>
<p class="white-text-two">I have built and maintained the various iterations of the website for this company since 2004, using either Adobe Dreamweaver or proprietary contact management systems. But this redesign project required a much more intimate knowledge of coding than previously needed and a finished product within only 2 days.
</p>
<p class="white-text-two">The needs of this project presented me with the opportunity to use a template and work with source code that was written by someone other than myself, which was something I had not done up until that point.
</p>
<p class="white-text-two">The template came from https://html5up.net/spectral and I modified or restructured appropriate aspects of the code to produce a finished product that fit the client’s needs.
</p>
<div class="project-btn-container">
<div class="button02">
<p class="white-text">View Live</p>
</div>
</div>
<h4 class="project-tech">Released:</h4>
<p class="white-text-two">June, 2017</p>
<h4 class="project-tech">Technologies/Tools Used:</h4>
<ul class="tech-list" id="golden-glow">
<li>HTML5</li>
<li>CSS3</li>
<li>JQuery</li>
<li>Responsive (adapts to mobile device screens)</li>
<li>Git (version control)</li>
<li>Adobe Photoshop</li>
<li>Sublime Text (text editor)</li>
<li>Filezilla FTP, SFTP, and FTPS file management tool</li>
<li>Cpanel (webhost management)</li>
</ul>
</div>
<!-- Jay Hunt Designs -->
<div class="project-text-left" id="proj-des2">
<h4 class="project-tech">Jay Hunt Designs</h4>
<p class="white-text-two">Jasmine Hunter is a fashion designer that I met at my local Panera Bread restaurant (I have obtained 3 of my clients from hanging out there!). Miss Hunter wanted a site that had a clean and simple design, but was elegant and utilized the colors black, white, silver and gold.
</p>
<p class="white-text-two">The challenge I was faced with in order to complete this project had to do with the cross browser compatibility of the auto scrolling feature I built into the homepage of the site. I do the testing of my builds on Chrome, Safari, Firefox, Edge, and Opera. The auto scrolling feature worked on all of those browsers except for Firefox.
</p>
<p class="white-text-two">After researching the issue through Google searches I finally found a solution that took care of the issue.
</p>
<div class="project-btn-container">
<div class="button02">
<p class="white-text">View Live</p>
</div>
</div>
<h4 class="project-tech">Released:</h4>
<p class="white-text-two">April, 2017</p>
<h4 class="project-tech">Technologies/Tools Used:</h4>
<ul class="tech-list" id="jay-hunt">
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>JQuery</li>
<li>Responsive (adapts to mobile device screens)</li>
<li>Git (version control)</li>
<li>Adobe Photoshop</li>
<li>Sublime Text (text editor)</li>
<li>Filezilla FTP, SFTP, and FTPS file management tool</li>
<li>Cpanel (webhost management)</li>
</ul>
</div>
<!-- Goodie Treats -->
<div class="project-text-left" id="proj-des3">
<h4 class="project-tech">Goodie Treats</h4>
<p class="white-text-two">The focus of the Goodie Treats organization is to build the self esteem of minority children, girls in particular, through various activities and events. The request of the client was that I made the entire homepage function as the initial menu for the site and also that it featured images from some of their events, but they wanted the rest of the site to be a simple design that featured big background images.
</p>
<p class="white-text-two">The challenging homepage request from the client provided me with an opportunity to explore using a responsive grid system to build the home page. Building the site’s homepage to spec allowed me to grasp the basic concepts and usefulness of using a grid, as well as experiment with its responsiveness to various screen sizes.
</p>
<div class="project-btn-container">
<div class="button02">
<p class="white-text">View Live</p>
</div>
</div>
<h4 class="project-tech">Released:</h4>
<p class="white-text-two">March, 2017</p>
<h4 class="project-tech">Technologies/Tools Used:</h4>
<ul class="tech-list" id="goodie-treats">
<li>HTML5</li>
<li>CSS3</li>
<li>JQuery</li>
<li>Responsive (adapts to mobile device screens)</li>
<li>Git (version control)</li>
<li>Adobe Photoshop</li>
<li>Sublime Text (text editor)</li>
<li>Filezilla FTP, SFTP, and FTPS file management tool</li>
<li>Cpanel (webhost management)</li>
</ul>
</div>
<!-- Rapture Guns -->
<div class="project-text-left" id="proj-des4">
<h4 class="project-tech">Rapture Guns & Knives</h4>
<p class="white-text-two">During a visit to a local gun store for some target ammo, I overheard the store owner that he was in need of a website but didn’t have the knowledge on how to do it. I took that opportunity to introduce myself and shortly afterwards he became my client.
</p>
<p class="white-text-two">Because the majority of his customers were over the age of 50, the client wanted a very simple site that would appeal to the “nothing fancy” character of his customer base and that was modelled after the website for Gunsmoke Guns (now closed) out of Wheat Ridge, Colorado.
</p>
<p class="white-text-two">The challenge that I had in building this website had to do more with content than it did with any technical obstacles. I had to compose all of the copy for the website based on a recorded interview I conducted with the owner.
</p>
<div class="project-btn-container">
<div class="button02">
<p class="white-text">View Live</p>
</div>
</div>
<h4 class="project-tech">Released:</h4>
<p class="white-text-two">January, 2017</p>
<h4 class="project-tech">Technologies/Tools Used:</h4>
<ul class="tech-list" id="goodie-treats">
<li>HTML5</li>
<li>CSS3</li>
<li>JQuery</li>
<li>Responsive (adapts to mobile device screens)</li>
<li>Git (version control)</li>
<li>Adobe Photoshop</li>
<li>Brackets (text editor)</li>
<li>Filezilla FTP, SFTP, and FTPS file management tool</li>
<li>Cpanel (webhost management)</li>
</ul>
</div>
</div>
<div class="project-text-right" id="proj-des1">
</div>
<div id="lower-project-container">
<h3 id="project-heading">projects</h3>
<div class="project-col" id="project01">
<img src="images/project1.jpg" class="project-" id="des1" alt="golden-glow-security-website">
</div>
<div class="project-col" id="project02">
<img src="images/project2.jpg" class="project-" id="des2" alt="jay-hunt-designs-website">
</div>
<div class="project-col" id="project03">
<img src="images/project3.jpg" class="project-" id="des3" alt="goodie-treats-website">
</div>
<div class="project-col" id="project04">
<img src="images/project4.jpg" class="project-" id="des4" alt="rapture-guns-website">
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="scripts/main.js"></script>
</body>
</html>
CSS
/* ========== PROJECTS PAGE ========== */
.wrapper#projects {
background: url(../images/bg02.jpg)fixed no-repeat center;
background-size: cover;
overflow: hidden;
}
#upper-project-container {
width: 100%;
height: 58%;
}
ul.tech-list {
margin-left: 40px;
}
ul.tech-list li {
list-style-type: disc;
font-family: 'Open Sans', sans-serif;
font-size: .8rem;
line-height: .95rem;
color: #ffffff;
}
.project-text-left {
position: absolute;
top: 10%;
left: 4%;
width: 720px;
height: 400px;
}
.project-text-left#proj-des1 {
display: none;
}
.project-text-left#proj-des2 {
display: none;
}
.project-text-left#proj-des3 {
display: none;
}
.project-text-left#proj-des4 {
display: none;
}
.project-text-right {
position: absolute;
top: 10%;
right: 4%;
width: 720px;
height: 400px;
display: none;
}
.show {
display: block;
}
#lower-project-container{
width: 100%;
height: 45%;
}
.project-col {
width: 25%;
margin-top: 20px;
text-align: center;
float: left;
-webkit-transition: transform .4s;
-moz-transition: transform .4s;
-o-transition: transform .4s;
transition: transform .4s;
}
.project-col:hover {
transform: scale(1.1);
-webkit-transition: transform .4s;
-moz-transition: transform .4s;
-o-transition: transform .4s;
transition: transform .4s;
}
img {
max-width: 100%;
box-shadow: 24px 17px 44px rgba(0, 0, 0, .7);
cursor: pointer;
}
JAVASCRIPT
// ----- PROJECT PAGE
Project panels are visible on click, but
If another project panel is visible, it is then hidden.*/
/*var showProject = document.querySelectorAll('#lower-project-container .project-');
var siteDescr = document.querySelectorAll('.project-text-left');
(showProject).forEach(function(thumb) {
thumb.addEventListener('click', function(e) {
const project = document.querySelector('#proj-' + e.target.id);
project.style.display = 'block';
});
});
// ========== ONE OF MY SOLUTION ATTEMPTS ========
/* window.onload = function() {
var showProject = document.querySelectorAll('#lower-project-container .project-');
(showProject).forEach(function(thumb) {
thumb.addEventListener('click', function(e) {
const project = document.querySelector('#proj-' + e.target.id);
// If another project panel is visible, it is then hidden.
[].map.call(document.querySelectorAll('.project-text-left'), function(e) {
e.classList.remove('show'); // remove from all
});
this.classList.add('show'); // add on current
});
});
} */
(4) CONCLUSION -------------------->
Thank you for whatever help you can provide me and please let me know if there are any questions I can answer or additional code that you may need to look at to better see any relationships.

The first problem is that in main.js you have an incomplete comment block
// ----- PROJECT PAGE
Project panels are visible on click, but
If another project panel is visible, it is then hidden.*/
Add a /* before the word Project
// ----- PROJECT PAGE
/* Project panels are visible on click, but
If another project panel is visible, it is then hidden.*/
[EDIT]
You could add another variable to track if something is already displayed
var oldID = null;
(showProject).forEach(function(thumb) {
thumb.addEventListener('click', function(e) {
const project = document.querySelector('#proj-' + e.target.id);
if( oldID != null ) {
document.getELementByID('proj-"+oldID).style.display = "none";
}
project.style.display = 'block';
//--- save current id
oldID - e.target.id;
});
});

This problem was answered by Jeff in the comments. I am only posting this answer to share the final code that actually worked. Essentially, Jeff's answer was correct. However, there were a couple of minor typos and a "getElementById is not a function" error message I was getting on Chrome Developer Tools. The final code that works is below. All credit goes to Jeff for it. Please note the VERY minor changes I made between what Jeff offered and the final working version. I hope this helps someone with a similar issue in the future! Here's the final working code:
// ----- PROJECT PAGE
/*Project panels are visible on click, but
If another project panel is visible, it is then hidden.*/
var showProject = document.querySelectorAll('#lower-project-container .project-');
var siteDescr = document.querySelectorAll('.project-text-left');
var oldID = null;
(showProject).forEach(function(thumb) {
thumb.addEventListener('click', function(e) {
const project = document.querySelector('#proj-' + e.target.id);
if( oldID != null ) {
document.querySelector('#proj-'+ oldID).style.display = "none";
}
project.style.display = 'block';
//--- save current id
oldID = e.target.id;
});
});

How to enable and fix preview page on link hover?

How can I unable website preview feature on all of the links in my web page? That is when the user moves the mouse over any link in the page, I want to show a simple pop up window which loads the page in link. I tried doing it on my own with help of Google and stackoverflow. But result got something like this -
(ACTUAL PAGE LINK RENDERING)
How should I fix this? I wanted to have it similar to Google instant preview.
Here is my code - (website links are fetched from web service)
html file
<div class="text-result" *ngIf="Display('all')">
<div *ngFor="let item of items$|async" class="result">
<div class="frame">
<script>
$(".head-link").mouseover(function() {
$(this).children(".tooltip").show();
}).mouseout(function () {
$(this).children(".tooltip").hide();
});
</script>
<div class="title">
<a href="{{item.link}}" class="head-link">{{item.title}}
<iframe id="tooltip" src="{{item.link}}"></iframe>
</a>
</div>
</div>
<div class="link">
<p>{{item.link}}</p>
</div>
<div>
{{item.pubDate|date:'fullDate'}}
</div>
</div>
</div>
css file
.head-link {
color: #069;
cursor: pointer;
}
.tooltip {
display: none;
position: absolute;
border: 1px solid #000;
width: 400px;
height: 400px;
}

I setup a minimal JS fiddle for you, and I believe I resolve the issue.
A summary of my changes is:
Your iframe has an id=tooltip, when you are referencing it as .tooltip, so I changed it to class=tooltip.
Your jQuery script has to appear after the elements on the page that are used by it, so I moved the script tags to the bottom of the class=text-results div.
Two notes:
First, this isn't an Angular 2 problem, you are using Angular 2 in your project, but the problem is with your jQuery code.
Second, you really should avoid using jQuery to solve your problems within an Angular 2 project. Angular 2 has the capability to solve this problem without needing to include jQuery. Mixing jQuery and Angular 2 will result in messy and hard to understand code, you are much better off trying to solve this problem using only Angular 2.

Insert Text Into Tumblr Ask Box

Does anyone know if there's a way to add text into the tumblr ask box when the page is first loaded? I'm running a blog where people can ask for advice from either a girl or a guy. I want them to click a link and go to the ask page but then depending on the link they clicked, #AskHim or #AskHer will be pre-added into the ask box. Without these "tags" (just basic text), all questions come to my inbox and I have no idea what perspective (guy or girl) they want their question answered from.
HTML:
<div id="askbox">
<iframe frameborder="0" height="190" id="ask_form" scrolling="no"
src="http://www.tumblr.com/ask_form/whatishethinking.tumblr.com"
width="100%" style="background-color: transparent; overflow: hidden;"
</iframe>
</div>
CSS:
#askbox {
margin: 10px auto;
width:600px;
}
I've found topics on how to insert text into a text box using javascript. However, tumblr has it's own built in tagging/html system so I'm not sure if this is even possible.
i.e.
<script>
function add(text){
var TheTextBox = document.getElementById("Mytextbox");
TheTextBox.value = TheTextBox.value + text;
}
</script>
Also, here is a link to my blog (Main Blog). The user will click either the "Ask Her" or "Ask Him" image links on the left side of my blog.
Then this will take them to my ask page where I want the text to be inserted into the ask box (Ask Page).
Thanks in advance for any advice you can give!

The only way I can think of achieving this off the top of my head is by using the placeholder attribute.
However, I'm not sure you'd be able to manipulate the main text area, since Tumblr utilizes iframes for customized ask pages.

load some content from txt and add to html markup

Have some markup
<div class="container">
<aside class="left">
<div class="item"><p>lorem ipsum</p></div>
</aside>
<aside class="right">
<div class="item"></div>
</aside>
</div>
<button>load more</button>
css
aside {
display: inline-block;
width: 40%;
border: 1px solid red;
margin: 2%;
vertical-align: top;
}
.item {
border-bottom: 1px solid black;
}
I need to load some html content from .txt file when clicking button and add that markup inside both aside. In .txt file markup like this
<div class="item"><p>lorem ipsum1</p></div>
<div class="item"><p>lorem ipsum2</p></div>
<div class="item"><p>lorem ipsum3</p></div>
<div class="item"><p>lorem ipsum4</p></div>
I want "drag" and paste first div with class .item to aside.left, second div with class .item in aside.right, third div with class .item in aside.left and so on...
Is there any solution? I don't know how paste .item divs in both columns..
Thanks for any help
Here is JsFiddle DEMO
upd: I'm only use css+html+some jquery, I dont know any things on php or server technology.. but programmer who work with my markup says that I need to demonstrate how content will be added on click.. So I dont know is this my work, or this is programmer need to do.. I need your answer about this..
If that helps, here is LINK you can see site. In bottom you can see arrow, onclick on that there need add content in columns..
P.S. Programmer works with Yii framework.

Since you already seem to know about AJAX (you added the tag), I think you have your answer there.
You can just use AJAX to get any chunk of data from the server and add it to the page.
Since you are working together with a server-side programmer, I think each of you could build their own part independantly.
All you need is an API that you can use, to which you can specify the offset of items to load, so you could call /getitems?offset=12&count=4 to get the next 4 items from item 12.
You can then just make a simple page that returns dummy data. getitems.php can just return the same constant items every time, and all you need to do is add those items at the bottom of your list.
At the same time, the PHP programmer can actually implement that page so it returns the same data. He can make it in such a way that it also works for non-AJAX request, so he can easily test it without needing your front-end code.

Manipulate Google results page to add a section on the RHS

I'm building a Chrome Extension, where in, based on the search query I want to display some stuff(let's assume links for now) on the RHS of the Google results page. Very similar to what Wajam does.
I understand I need to use Content-Scripts for such tasks, which is clear and fine.
The problem is, Google seems to return divs with different IDs each time based on the query in its html. For instance if you search for a movie name, there seems to be different set of IDs in the html as opposed to, let's say when you search for a Javascript error message.
I wonder how Wajam has implemented its plugin, which works so reliably and displays links on the RHS.
How should I go about it? Any specific IDs you can see in the html that I can use or build upon reliably?
Just to be clear for folks who are not into Chrome Extensions, the question doesn't require knowledge of Extension architecture/APIs. It's a seemingly simple html/javascript/css related question.

I don't know anything about Chrome Extensions developement, but I tried to understand Google results page structure, and I hope that will help you :
Every google result page has a #rhs div, even if there are no additional informations on the right. This div has an unique id, so I think it would be easy to put dynamical content inside.
I've tried with Web Developer Tools, and that worked very well :
I think you'll just have to append content to this div to get what you want : the "different IDs based on the query" may be children of this parent and unique #rhs div. So I don't think you have to care about these children "random id" divs, just append your content (custom css, images, videos...) in this #rhs div :)
if you want to try with a Web Developer Tool :
just paste this code instead of the original <div id="rhs">...</div>
<div id="rhs" style="
border: 2px solid red;
padding: 16px;">
Put whatever you want here
<div style="
font-weight: 700;
padding: 12px;
border: 1px solid #aaa;
background-color: #eee;
margin: 20px;
-webkit-box-shadow:0 1px 2px rgba(34,25,25,0.4);
-moz-box-shadow:0 1px 2px rgba(34,25,25,0.4);
box-shadow:0 1px 2px rgba(34,25,25,0.4);
font-size: 1.4em;
">
Custom CSS
</div>
<img src="http://myrrix.com/wp-content/uploads/2012/06/stackoverflow.png"> images
<iframe id="ytplayer" type="text/html" width="340" height="390" src="http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=0&origin=http://example.com" frameborder="0"></iframe>
</div>
and you'll get the same result as me.
Hope I helped you ! :)