Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(#198)Added ReadMore feature to Designers #209

Open
wants to merge 1 commit into
base: gh-pages
Choose a base branch
from
Open

(#198)Added ReadMore feature to Designers #209

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
5 changes: 5 additions & 0 deletions css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -280,3 +280,8 @@ nav .logo {
top: 0;
}

#more1, #more2, #more3, #more4 {display: none;}

.designer_text{
font-weight: bold;
}
31 changes: 18 additions & 13 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -324,19 +324,20 @@ <h1>Featured Designers</h1>
<div class="speaker-description Felipe">
<h2>Pierre Marchand</h2>
<span class="sub">Scribus</span>
<p>Pierre refuses labels: he is not a programmer, nor cartographer or artist. Or maybe
<p class="designer_text">Pierre refuses labels: he is not a programmer, nor cartographer or artist. Or maybe
he is
all at once? In the last few years, Pierre contributed to the development of major
Free
Software projects such as the Scribus desktop publishing software. He is
projectleader
of FontMatrix, a font management system initiated in 2007. He works on the duo
of FontMatrix, a font management system initiated in<span id="dots1">...</span><span id="more1"> 2007. He works on the duo
Copy link
Member

Choose a reason for hiding this comment

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

https://www.w3schools.com/cssref/css3_pr_text-overflow.asp

Fonzie-Nancy,
a scan-to-font application that allows a font based on several "drawings" by nature
and
recently LiteralDraw, an application that allows the exploration of the relation
between
drawing and code.</p>
drawing and code.</span></p>
<a onClick="readMore(1)" id="myBtn1" style="cursor: pointer; cursor: hand;">Read More</a>
</div>
</div>
</div>
Expand Down Expand Up @@ -367,13 +368,13 @@ <h2>Pierre Marchand</h2>
<div class="speaker-description">
<h2>Alexandre Leray</h2>
<span class="sub">Open Source Publishing</span>
<p>The Unix(-like) operating system standard streams, allowing commands to be chained
<p class="designer_text">The Unix(-like) operating system standard streams, allowing commands to be chained
together
to produce original programs. It shows our interest for programming, for the
GNU/Linux
operating system and Free software in general. But moreover it reflects our
interest
for language, and how the latter is a tension between existing standards and new
for <span id="dots2">...</span><span id="more2">language, and how the latter is a tension between existing standards and new
meanings.
We've been trained as classical graphic designers in the Valence school of Fine
ArtsFR
Expand All @@ -383,7 +384,8 @@ <h2>Alexandre Leray</h2>
in
RotterdamNL. We strengthen our research and theory practice along developing our
programming
skills to apply them to graphic design.</p>
skills to apply them to graphic design.</span></p>
<a onClick="readMore(2)" id="myBtn2" style="cursor: pointer; cursor: hand;">Read More</a>
</div>
</div>
</div>
Expand Down Expand Up @@ -415,11 +417,12 @@ <h2>Alexandre Leray</h2>
<div class="speaker-description">
<h2>Stéphanie Vilayphiou</h2>
<span class="sub">Open Source Publishing</span>
<p>Unix(-like) operating system standard streams, allowing commands to be chained
<p class="designer_text">Unix(-like) operating system standard streams, allowing commands to be chained
together to
produce original programs. It shows our interest for programming, for the GNU/Linux
operating
system and Free software in general. But moreover it reflects our interest for
system and Free software in general. But moreover it reflects <span id="dots3">...</span><span id="more3">
our interest for
language,
and how the latter is a tension between existing standards and new meanings. We've
been
Expand All @@ -431,7 +434,8 @@ <h2>Stéphanie Vilayphiou</h2>
RotterdamNL.
We strengthen our research and theory practice along developing our programming
skills
to apply them to graphic design.</p>
to apply them to graphic design.</span></p>
<a onClick="readMore(3)" id="myBtn3" style="cursor: pointer; cursor: hand;">Read More</a>
</div>
</div>
</div>
Expand All @@ -456,11 +460,11 @@ <h2>Stéphanie Vilayphiou</h2>
<div class="speaker-description">
<h2>Pierre Huyghebaert</h2>
<span class="sub">Head of Digital Technology at Vietnam Press Holdings</span>
<p> Pierre Huyghebaert studied visual communication, typography and animation. In
<p class="designer_text"> Pierre Huyghebaert studied visual communication, typography and animation. In
twenty years,
he developed several practices around graphic design: co-founder of the type design
label
Hammerfonts, free-lancer and art director in various studios, co-founder of the
Hammerfonts,<span id="dots4">...</span><span id="more4"> free-lancer and art director in various studios, co-founder of the
studio
Mind The Gap in Beirut (Lebanon) in 1993 with Karl Bassil, working in duo with the
illustrator/photographer/cartoon
Expand All @@ -482,7 +486,8 @@ <h2>Pierre Huyghebaert</h2>
in
Brussels. He collaborates with visual artists, including Honoré d’O, Patrick
Corillon,
Vincent Meessen.</p>
Vincent Meessen.</span></p>
<a onClick="readMore(4)" id="myBtn4" style="cursor: pointer; cursor: hand;">Read More</a>
</div>
</div>
</div>
Expand Down Expand Up @@ -1248,7 +1253,7 @@ <h2>Mario Behling</h2>
<li>
<li>
<i class="icon pe-7s-map-marker"></i>
</li>
</li>
<span>FOSSASIA Summit Open Design Weeks 2012</span>
</li>
<li>
Expand Down
33 changes: 32 additions & 1 deletion js/custom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,4 +23,35 @@ $(document).ready(function () {
});
$('.map-holder').click(function () {
$(this).removeClass('zoom-off');
});
});

function readMore(number) {
if (number == 1) {
var dots = document.getElementById("dots1");
var moreText = document.getElementById("more1");
var btnText = document.getElementById("myBtn1");

} else if (number == 2) {
var dots = document.getElementById("dots2");
var moreText = document.getElementById("more2");
var btnText = document.getElementById("myBtn2");

} else if (number == 3) {
var dots = document.getElementById("dots3");
var moreText = document.getElementById("more3");
Copy link
Member

Choose a reason for hiding this comment

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

Append the number to the IDs and reduce the ifs.

Copy link
Member Author

Choose a reason for hiding this comment

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

I tried that, I failed terribly.

Copy link
Member

Choose a reason for hiding this comment

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

It won't fail, please do it correctly.

var btnText = document.getElementById("myBtn3");
}else if (number == 4) {
var dots = document.getElementById("dots4");
var moreText = document.getElementById("more4");
var btnText = document.getElementById("myBtn4");
}
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}