Skip to content
This repository was archived by the owner on Apr 29, 2025. It is now read-only.

Added Is He Gay #8

Open
wants to merge 4 commits into
base: gh-pages
Choose a base branch
from
Open

Added Is He Gay #8

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5dc84be
Added to React folder
Astrolingus Oct 8, 2014
a484746
Added photos
Astrolingus Oct 9, 2014
2ff3a0c
Rename
Astrolingus Oct 9, 2014
6ecdef8
Updated files
Astrolingus Oct 30, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 81 additions & 0 deletions Is_He_Gay.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
/*remove the default margins and stuff*/
body
{
margin: 0;
padding: 0;
background: #ffffff;
}

#header
{
width: 100%;
height: 44px;
margin-bottom: 100px;
}

#title {
text-align: center;
padding-top: 8px;
}

h1
{
color:#000000;
}

h2
{
color:#000000;
}

h3
{
margin: 0 auto;
font-size: 30px;
text-align: center;
}

#container
{
width: 1071px;
margin: 0 auto;
}

.imageHolder
{
margin-right: 30px;
margin-top: 30px;
margin-bottom: 50px;
width: 305px;
height: 305px;
border-radius: 4px;
border: 1px solid #dcdcdc;
background-color: #ffffff;
float: left;
}


.imageHolder:hover{
border-color: rgb(0,0,0);
border-width: 1.5px;
}


.first {
margin-left: 30px;
}

.thumb {
padding: 7px;
}

.popUp {
display: none;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
background-color: rgba(255,255,255,0.8);
height: 100%;
}
138 changes: 138 additions & 0 deletions Is_He_Gay.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@

<!--by Sharang Biswas. HTML, JS and CSS adapted from code by Aidan Feldman, Daniel Shiffman and Sam Slover-->
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>Instagram Example</title>
<meta name="author" content="Sharang Biswas">
<meta name="description" content="Find out if he's gay!">
<meta name="keywords" content="Sharang Biswas, ITP, Building for Learning">
<link rel="stylesheet" href="Is_He_Gay.css" type="text/css">
</head>

<body>
<!--The banner and title at the top of the page-->
<div id="header"> <!--box containing the whole banner-->
<div id="title"> <!--box containing the title-->

<h1>Is He Gay?</h1>

</div>
</div>

<div id="container"> <!--box all the images and subtitles-->
<!-- row 1 begins -->

<div class="imageHolder first" id="sound"> <!--the first image has the first class as well-->
<img class="thumb" width="300" height="300" src="sound.png">
<div class="caption"><h2>Does he sound gay?</h2></div>
</div>

<div class="imageHolder" id="look">
<img class="thumb" width="300" height="300" src="tshirt.png">
<div class="caption"><h2>Does he look gay?</h2></div>
</div>

<div class="imageHolder" id="interests">
<img class="thumb" width="300" height="300" src="theatre.png">
<div class="caption"><h2>Does he have gay hobbies?</h2></div>
</div>
<!-- row 1 ends -->


<!-- row 2 begins -->


<div class="imageHolder first" id="girl">
<img class="thumb" width="300" height="300" src="girl.png">
<div class="caption"><h2>Has he never shown interest in girls?</h2></div>
</div>

<div class="imageHolder" id="nice">
<img class="thumb" width="300" height="300" src="dog.png">
<div class="caption"><h2>Is he a really nice guy?</h2></div>
</div>

<div class="imageHolder" id="men">
<img class="thumb" width="300" height="300" src="gay.png">
<div class="caption"><h2>Has he hooked up with other guys?</h2></div>
</div>


<!-- row 2 ends -->

</div> <!--closes the container-->

<!--the popup text and images-->
<div class="popUp" id="popUpSound">
<h3>Are you sure? Maybe you're detecting an accent, or some speech idiosyncracy... In fact, there's no real conclusive evidence of gay mean sounding very different...</h3>
</div>

<!--<div id="popup">
<img width="550" src=" ">
</div>

<div id="popup">
<img width="550" src=" ">
</div>

<div id="popup">
<img width="550" src=" ">
</div>

<div id="popup">
<img width="550" src=" ">
</div>

<div id="popup">
<img width="550" src=" ">
</div>

<div id="popup">
<img width="550" src=" ">
</div>
</body> -->

<!-- JS convention is to put script tags down here below body -->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
//var thediv;
var hiddenBox;


function init()
{
hiddenBox = $( "#popUpSound" );
$(hiddenBox).on("click",showPopUp());
Copy link
Member

@afeld afeld Oct 8, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These two lines currently say "when the popup is clicked, show the popup". I assume you want to use '#sound' as the selector on the first line, rather than '#popUpSound'.

}

var showPopUp = function()
{
hiddenBox.show();
$(hiddenBox).on("click",hidePopUp());
Copy link
Member

@afeld afeld Oct 8, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's a minor issue, but in JavaScript, event handlers remain registered forever, so you only need to do this once. The way it's written, the click handler to hide the popup will be registered every time that popup is shown. In other words, move this line to init().

}

var hidePopUp = function()
{
hiddenBox.hide();
}
/*
function showPopUp() {
var popup = document.getElementById('popUpSound');
popup.style.display = 'block';
popup.addEventListener('click', hidePopUp);
};


function hidePopUp(){
var popup = document.getElementById('popUpSound');
popup.style.display = 'none';
}

window.addEventListener('load', init);
Copy link
Member

@afeld afeld Oct 8, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You need to uncomment this line... init() is never being called.

*/
</script>
</body>
</html>