Link to home
Start Free TrialLog in
Avatar of error77

asked on

HTML / CSS / JQuery functionality

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


 User generated image
Avatar of Jagadishwor Dulal
Jagadishwor Dulal
Flag of Nepal image

Search Single page web site in google you will find lots of tutorial.
Avatar of sajayj2009

$("#leftthumnails").click(function() {
   $("#rightsideDiv").load(page.html or image.jpg);

You need to use external jquery.js to use above function.
Avatar of error77


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:   BUT with the left nav functionality included.

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


Avatar of Amick
Flag of United States of America image

Link to home
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of error77


Good example but does the content have to be inside the javascript?

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

THanks again
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)));
    	background: -moz-linear-gradient(left, rgba(255,51,0,192), rgba(0,0,0,255));

Open in new window

See and click on the Code Example link to see some Internet Explorer filters and transitions.

See for Firefox.

See for Safari.
Avatar of error77


Thanks a lot. As for the effects I'm opening another question for it as I need help there. Thanks again.