Hallo, I wonder how to change css in the middle of the program.

For instance:

<div id="container">

if(case1){ container css height=200}

elseif(case2) { container css height=300}

else { container css height=400}


How to write the code? I am actually trying to program with Joomla which is confusing since it has only one index.php file for the whole web. It has similar logic since it uses html n php.

Please help.


You would need some JS (jQuery) for this:

look into (jQuery).css(); on their documentation.

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        if(case1) {
            $("#container").css("height", "300");
        } else if(case2) {
            $("#container").css("height", "300");
        } else {
            $("#container").css("height", "400");

or you can also use javascript:-

<script type="text/javascript">
function changeCSS(){

simialrly you can change other properties of anf element.

I wonder how to call the Javascript function. like this?

<?php } else if (JRequest::getVar("option")=="com_virtuemart") {?>

        <div id="left_menu">
            <jdoc:include type="modules" name="left_menu" style="xhtml" />

        <div id="product_virtuemart">
            <jdoc:include type="message" />
            <jdoc:include type="modules" name="breadcrumbs" style="xhtml" />
            <jdoc:include type="component" />
            <jdoc:include type="modules" name="content" style="xhtml" />

 <?php } ?>

I wonder why the css haven't change yet (I have the javascript script on the top) on virtuemart page.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.