Solved

HTML / CSS / JQuery functionality

Posted on 2011-02-15
7
761 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
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Html fieldset fix its height and width 4 31
CORS Error from Chrome, but FireFox is OK 1 81
Word, Excel, Access icons 4 17
Selected in an option list 13 20
This article discusses four methods for overlaying images in a container on a web page
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
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 …

860 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