1,105,214 Community Members

changing css

Member Avatar
davy_yg
Veteran Poster
1,114 posts since May 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 1 [?]
 
0
 

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}

</div>

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.

Thanks.

Member Avatar
Echo89
Junior Poster
117 posts since Mar 2012
Reputation Points: 9 [?]
Q&As Helped to Solve: 4 [?]
Skill Endorsements: 0 [?]
 
0
 

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");
        }
    });
</script>
Member Avatar
IIM
Master Poster
742 posts since Jun 2011
Reputation Points: 163 [?]
Q&As Helped to Solve: 169 [?]
Skill Endorsements: 24 [?]
 
1
 

or you can also use javascript:-

<script type="text/javascript">
function changeCSS(){
document.getElementById("container").style.height=400;
}
</script>

simialrly you can change other properties of anf element.

Member Avatar
davy_yg
Veteran Poster
1,114 posts since May 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 1 [?]
 
0
 

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

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

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

        <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" />
        </div>

 <?php } ?>

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

You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article