HTML/Dreamweaver bods

The Boosh! · Oct 14, 2010

Hi all,

I'm trying to make an intranet page more dynamic (at the moment its just static text and could look a bit better).

What i'm after is 1 of two things.

My first idea was to have a kind of "flash" box.
- The flash box would be rectangular in shape and have rounded edges.
- Below the rectangle box there would be ten numbered "tabs"
- Each tab would have some text and an image
- The box would be relatively small in size (say exactly the same size as the reply box on here when you press "go advanced"
A "slideshow" sort of thing that moves to a different image every couple of seconds, but pauses when a mouse is held over it so it allows the user to read the "contents" of the image. I would draft the contents in word/whatever to my required specs, and then make it a jpeg picture and get around it this way.

I would much prefur option 1 but i'm no good with flash (which I persume id need to use). I think option 2 is a good alternative but will still be challenging for a novice like myself.

Could somone please explain the feasibility of both options, and if possible point me in the right direction as to how I can go about putting something together?

Any help would be awesome as i'd score quiet a few brownie points :star:

Thanks in advance,
Luke

PS i will elaborate later tonight with pictures, as I do appreciate that the above may not be that clear!

Revels · Oct 14, 2010

You can do no1 with a bit of code. Don't use flash.

As for no2, have a Google for jQuery.

The Boosh! · Oct 14, 2010

Revels said:
You can do no1 with a bit of code. Don't use flash.

As for no2, have a Google for jQuery.

If I can do number 1 simple enough then I will work at that Dan. What code is it i'm ment to be looking for? HTML? I want to be able to click each "tab" and it will show different content.

Mr Pants · Oct 14, 2010

- Go to Freelancer.com (or similar site)
- Pay some Indian peanuts to do what you need
- Sit back and have a w**k
- When work is completed pretend you did it and reap the rewards

Outsourcing is the way forward.

Nik · Oct 14, 2010

Yep, as Dan says, jQuery will do this very nicely. The image slider currently on the homepage uses it in fact.

http://docs.jquery.com/UI/Tabs#demo

Let me know if you want any help.

The Boosh! · Oct 14, 2010

Nik said:
Yep, as Dan says, jQuery will do this very nicely. The image slider currently on the homepage uses it in fact.

http://docs.jquery.com/UI/Tabs#demo

Let me know if you want any help.

Do you have to download/install anything or can i just put the code into dreamweaver, Nik?

The Boosh! · Oct 14, 2010

Confused.com now :S

Nik · Oct 14, 2010

2 mins, and i'll point you at a template

Nik · Oct 14, 2010

Ok, here's a really basic framework for what you want. If you need to put this into an already existing page then you might not need all of this code.

If you create a new page and paste in this HTML:

HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Simple Tabs with CSS &amp; jQuery</title>

<style type="text/css">
.tab_container {
    border: 1px solid #999;
    border-top: none;
    overflow: hidden;
    clear: both;
    float: left; width: 100%;
    background: #fff;
}
.tab_content {
    padding: 20px;
    font-size: 1.2em;
}

ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 32px; /*--Set height of tabs--*/
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
    width: 100%;
}
ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 31px; /*--Subtract 1px from the height of the unordered list--*/
    line-height: 31px; /*--Vertically aligns the text within the tab--*/
    border: 1px solid #999;
    border-left: none;
    margin-bottom: -1px; /*--Pull the list item down 1px--*/
    overflow: hidden;
    position: relative;
    background: #e0e0e0;
}
ul.tabs li a {
    text-decoration: none;
    color: #000;
    display: block;
    font-size: 1.2em;
    padding: 0 20px;
    border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
    outline: none;
}
ul.tabs li a:hover {
    background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
    background: #fff;
    border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

    //When page loads...
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {

        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active ID content
        return false;
    });

});

</script>
</head>

<body>

<ul class="tabs">
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
</ul>

<div class="tab_container">
    <div id="tab1" class="tab_content">
        Tab 1 stuff goes here
    </div>
    <div id="tab2" class="tab_content">
       Tab 2 stuff goes here
    </div>
</div>

</body>

</html>

You should see a box with two tabs, which can be customised and added to as you wish. Basically everything between the body tags controls the content of the tabs. You can put any html you like where i have added Tab x Stuff goes here, so tables images text etc.

Everything in the style tags controls how it looks, so you can customise that massively.

I'm not a massive dreamweaver user so not sure how much you will be able to customise from this using the wysiwyg interface rather than changing the HTML manually, but it should be fairly easy to change either way.

If you want to try something a bit more adventurous, you could try this tutorial: http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/

Mr Pants · Oct 15, 2010

Have you Google'd this or checked for Youtube vids. There's a a seemingly endless amount of sites that offer tutorials on all things web design related. I'd be surprised if you didn't find anything tbh...

The Boosh! · Oct 15, 2010

Thanks Nik I've managed to figure that code out you posted and it works a treat!

conneh · Oct 15, 2010

Moo Tools use to do this, but it appears that stripped loads of code now :/

Search

Search

HTML/Dreamweaver bods

The Boosh!

Revels

The Boosh!

Mr Pants

Nik

The Boosh!

The Boosh!

Nik

Nik

Mr Pants

The Boosh!

conneh

Similar threads