Reizvoller Reizvoller - 1 year ago 43
Javascript Question

How can I consolidate my code? JavaScript and PHP based issues

My page is rather simple and direct. I first call in external PHP pages as elements within my page using DIV tags. I then hide the div's that aren't needed on the home page and then slide into view the wanted "page" and hide the unwanted.

What I would like to do is slide in the wanted content and slide out what ever content is currently active/visible. I know I can just continue down the line what I've already begun doing but the entire document would be SO bloated. Any ideas? Thanks!

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script>
$(document).ready(function(e) {
$(function(){
$("div.design, div.marketing").hide();
});
});

$(document).ready(function() {

$("h3.home_button").click(function () {
$("div.home").show("slide", { direction: "left" }, 500);
$("div.design").hide();
$("div.marketing").hide();
});

$("h3.design_button").click(function () {
$("div.design").show("slide", { direction: "left" }, 500);
$("div.home").hide();
$("div.marketing").hide();
});

$("h3.marketing_button").click(function () {
$("div.marketing").show("slide", { direction: "left" }, 500);
$("div.home").hide();
$("div.design").hide();
});


});
</script>

</head>

<body>

<div class="main">

<div class="header">
<?php include("header.php");?>
</div>

<div class="menu">
<?php include("menu.php");?>
</div>

<div class="content">
<?php include("content_home.php");?>
<?php include("content_design.php");?>
<?php include("content_marketing.php");?>

</div>
<div class="footer"><?php include("footer.php");?></div>

</div>

Answer Source

You could use the data attributes and access it by the data() jquery method.

in your HTML

<h3 data-a='marketing'>marketing</h3>
<h3 data-a='design'>design</h3>
<div class='container'>
    <div style='display:none;' class='marketing'>
         marketing stuffs
    </div>
    <div class='design'>
         design stuffs
    </div>
</div>​

and in your javascript

$('h3').click(function(){
    type = $(this).data('a');

    $('.container div').hide();
    $('.container').find('.'+type).show();
})​

Here is an exemple fiddle

Also you are calling ready method twice

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download