Solved

HTML / CSS / JQuery functionality

Posted on 2011-02-15
7
758 Views
Last Modified: 2012-05-11
Hi all,

I need some help getting some functionality together. Might be different libraries (no frames pls).

I've done a raw diagram of what I need to do.

Hope the image explains it, if not please ask.

Image attached

Thanks

 Diagram
0
Comment
Question by:error77
7 Comments
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 34903935
Search Single page web site in google you will find lots of tutorial.
0
 
LVL 12

Expert Comment

by:sajayj2009
ID: 34905396
$("#leftthumnails").click(function() {
   $("#rightsideDiv").load(page.html or image.jpg);
});

You need to use external jquery.js to use above function.
0
 

Author Comment

by:error77
ID: 34910271
I was hoping for some link to something that has the functionality I'm looking for or some basic sample with this functionality.

I need the nav on the left ... content to appear on right and mot important I need the content on the right to be able to navigate / scroll to next section...

What I need is bascially this:

http://tympanus.net/codrops/2010/06/07/fancy-sliding-form-with-jquery/   BUT with the left nav functionality included.

I hope this helps. In the meantime I'm still googling..

THanks

0
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 12

Accepted Solution

by:
Amick earned 500 total points
ID: 34916229
Here's a pretty plain example, but it would be easy to add transitions like those in a slideshow and have the pages "fly in" or "dissolve".

This is enough code to get you started.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>EE Example</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="Author" content="Amick">
<meta name="Keywords" content="Two column, one-page layout, javascript variable content.">

<style type="text/css">
#nav {
background-color: steelblue;
padding-left: 1%;
width: 27%;
padding-right: 2%px;
font: bold 9pt/1.3 verdana;
height: 100%;
position:absolute;
text-alignment:center;
}
#content {
background-color:wheat;
width:65%;
height: 100%;
top:8px;
margin-left:30% ;
position:absolute;
padding: 0 10px;
}
a{
        color:#ccc;
        font-size:175%;
        line-height:90px;
        text-decoration:none;
        background:#222;
        width:200px;
        height:100px;
        overflow:hidden;
        border:0;
        }

a:hover{
        background:#555;
        }
#b1 {position:absolute;
        top:12%;
        left:8%;}
#b2 {position:absolute;
        top:42%;
        left:8%;
}

#b3 {position:absolute;
        top:72%;
        left:8%;
}


</style>

<script type="text/javascript">
<!--
function write1()
 {
 document.getElementById("content").innerHTML='<h1>Lorem<\/h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit<\/b>. <p>Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit<\/i>. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. <b>Curabitur sodales ligula in libero<\/b>. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. <\/p>\
<p>Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. <b>Proin ut ligula vel nunc egestas porttitor<\/b>. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. <b>Nam nec ante<\/b>. Suspendisse in justo eu magna luctus suscipit. <\/p>\
<p>Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. <i>Proin ut ligula vel nunc egestas porttitor<\/i>. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. <\/p>\
<p>Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. <i>Suspendisse in justo eu magna luctus suscipit<\/i>. Integer id quam. <b>Morbi in ipsum sit amet pede facilisis laoreet<\/b>. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. <\/p>\
<span><a id="p1a" href="#"onClick="write1a()">Continued<\/a><\/span>';
 }
function write1a()
 {
 document.getElementById("content").innerHTML="<h2>Lorem (cont)<\/h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit<\/b>. <p>Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit<\/i>. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. <b>Curabitur sodales ligula in libero<\/b>. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. <\/p>\
<p>Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. <b>Proin ut ligula vel nunc egestas porttitor<\/b>. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. <b>Nam nec ante<\/b>. Suspendisse in justo eu magna luctus suscipit. <\/p>\
<p>Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. <i>Proin ut ligula vel nunc egestas porttitor<\/i>. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. <\/p>\
<p>Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. <i>Suspendisse in justo eu magna luctus suscipit<\/i>. Integer id quam. <b>Morbi in ipsum sit amet pede facilisis laoreet<\/b>. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. <\/p>";
 }

function write2()
 {
 document.getElementById("content").innerHTML="<h1>Luctus<\/h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit<\/b>. <p>Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit<\/i>. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. <b>Curabitur sodales ligula in libero<\/b>. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. <\/p>\
<p>Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. <b>Proin ut ligula vel nunc egestas porttitor<\/b>. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. <b>Nam nec ante<\/b>. Suspendisse in justo eu magna luctus suscipit. <\/p>\
<p>Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. <i>Proin ut ligula vel nunc egestas porttitor<\/i>. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. <\/p>\
<p>Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. <i>Suspendisse in justo eu magna luctus suscipit<\/i>. Integer id quam. <b>Morbi in ipsum sit amet pede facilisis laoreet<\/b>. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. <\/p>";
 }
function write3()
 {
 document.getElementById("content").innerHTML="<h1>Sociosqu<\/h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit<\/b>. <p>Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit<\/i>. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. <b>Curabitur sodales ligula in libero<\/b>. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. <\/p>\
<p>Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. <b>Proin ut ligula vel nunc egestas porttitor<\/b>. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. <b>Nam nec ante<\/b>. Suspendisse in justo eu magna luctus suscipit. <\/p>\
<p>Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. <i>Proin ut ligula vel nunc egestas porttitor<\/i>. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. <\/p>\
<p>Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. <i>Suspendisse in justo eu magna luctus suscipit<\/i>. Integer id quam. <b>Morbi in ipsum sit amet pede facilisis laoreet<\/b>. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. <\/p>";
 }

 -->
</script>
<style type="text/css">
 p.c2 {text-align: left}
 div.c1 {text-align: center}
</style>
</head>
<body>
<div class="c1" id="nav"><a id="b1" href="#" onclick="write1()" name="b1">Lorem</a> <a id="b2" href="#" onclick="write2()" name="b2">Luctus</a> <a id="b3" href="#" onclick="write3()" name="b3">Sociosqu</a></div>
<div id="content">
<h1>Initial</h1>
<p class="c2">This example shows replaceable text.</p>
<p class="c2">You could initialize this page by using onload to call one of the page functions.</p>
This page was tested using IE9 but should work on any standards compliant browser.</div>
</body>

Open in new window

0
 

Author Comment

by:error77
ID: 34917013
Good example but does the content have to be inside the javascript?

Also, a the transitions easy to add to your sample?

THanks again
0
 
LVL 12

Expert Comment

by:Amick
ID: 34919250
Clearly you have to have some source for the data, but it could be read from a byte array or an external file.  You could insert appropriate iframes and let the browser load the page for you (but you lose some control when you do that.)

Transitions are pretty easy to add, but there really is little standardization and for some of them you need to program one way for each of the major classes of browser and even then you have to provide a good experience for those still running older browsers.

Just to provide a gradient (a filter, not a transition) here's the CSS code you'd need to use:
                 /*for non-css3 browsers, although you could also use transparent gradient background image*/
	background: #9F380F;
	
	/*for IE (note alpha transparency digits*/
	filter: progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#c0ff3300, endColorstr=#ff000000);
	
	/*for webkit browsers (Chrome, Safari)*/
	background: -webkit-gradient(linear, left top, right top, from(rgba(255,51,0,192)), to(rgba(0,0,0,255)));
	
	/*firefox*/
    	background: -moz-linear-gradient(left, rgba(255,51,0,192), rgba(0,0,0,255));

Open in new window

See http://msdn.microsoft.com/en-us/library/ms532853(v=VS.85).aspx and click on the Code Example link to see some Internet Explorer filters and transitions.

See https://developer.mozilla.org/en/CSS/CSS_transitions for Firefox.

See http://developer.apple.com/safaridemos/showcase/transitions/ for Safari.
0
 

Author Closing Comment

by:error77
ID: 34920799
Thanks a lot. As for the effects I'm opening another question for it as I need help there. Thanks again.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now