Tag Archives: CSS

New Site Intro Using Toggle Hidden DIV

In my spare time it’s been my new hobby to re-learn HTML and CSS (post coming up soon regarding it). I’m using RyanEagle.com as my “testing” ground, risking little. Yesterday I managed to make all the mobile menus disappear on my main site, you could say I’m still quite the beginner. It was time to write an updated intro copy for my website and wanted to experiment with hiding & displaying <div>‘s – perfect opportunity. My goal was to create a concise introduction that briefly introduces who I am, without overwhelming people with information. I achieved this perfectly with the newfound code I’ll share with you today, Below a preview of the introduction located directly on the Ryan Eagle Homepage, click the image to see the interactive (and mobile friendly) introduction.
Using Toggle DIV

How To Toggle Hide <div>’s:

To achieve the toggle hiding div effect I used some pretty simple code – a combination of Javascript, HTML5 and CSS3. First, start by adding the Javascript to your webpage:

<script type=”text/javascript”>
function toggleMe(a){
var e=document.getElementById(a);
var i = document.getElementById(a + ‘_image’);
if(!e)return true;
if(e.style.display==”none”){
e.style.display=”block”
i.src = ‘TOGGLE_IMAGE_1.GIF’;
} else {
e.style.display=”none”
i.src = ‘TOGGLE_IMAGE_2.GIF’;
}
return false;
}
</script>

Now, for the hidden <div>:

<div id=”YOUR-ID-HERE” style=”display:none”>Any Content Here Will Be Hidden On Default</div>

Now, for the link code. Before continuing, you don’t need to restrict the use of this Javascript code to text – you can use this function to make everything from <div>‘s, to <li>‘s, to <img>‘s clickable:

<span style=”cursor:pointer;” onclick=”return toggleMe(‘YOUR-ID-HERE’);”>Clickable Text, You May Want To Consider Adding An Underline or Other Effects so Visitors Know The Element Can Be Clicked</span>

Ta’da, you’re done. That was pretty painless wasn’t it? Now this may not be as cool for you as it was for me, but getting it to work was quite the accomplishment for me. Let’s say the last time I hard coded without the assistance of Dreamweaver was before HTML5 was released.

A Look Back… Developing My Timeline

//

summary :

Over the course of the last couple weeks I spent time developing an interactive Personal Timeline that covers personal highlights, business highlights, and goals that I have achieved. For a shortened version, I’ve created a Timeline Overview and also divided sections including a Business Timeline and an Achievements Timeline.
[close summary]

I’d like to preface this post with one point – RyanEagle.com is divided up into two general categories of content : for me and for visitors. Most, if not all, the content on RyanEagle.com is for me and my personal records; especially sections like the historical site archive  and the goals page . The latter half is for people interested in finding information about me (like my companies , contact me , etc).

Personal Timeline

Over the past couple weeks in my spare time setting up a personal timeline – and to say the least actually completing it made me feel great. For the first time in my life I have actual chronological dates of my business experiences, personal experiences, and goals. I’ve always had to guess the dates of my achievements and major life events but now I finally have something to go back to and reference. Pinpointing important dates like my first business idea, my first girlfriend, when I got my dog, and other events has been challenging but fun. I’ve worked with my parents on a lot of the personal events, and utilized tools like Archive.org and Domain Tools to figure out other specific business events. Currently, I’m in the process of working with my parents to compile a year by year archive of personal pictures – something nice to digitize considering nobody looks at old photo albums anymore.

Rather than requiring people to sift through the complete timeline, I’m in the process of creating subpages including : a Timeline Overview, a Business Timeline and a Goal Timeline. I hope to provide more refined or specific information information on these sub-timelines. Additionally, over the next couple months I’m going to be writing expanded detail sections (ie: 2014 Expanded) for date ranges where I go more in-depth to events of that year(s). Quite the undertaking, but it’s going to be nice to complete everything, knowing that going forward I can keep better records.