We're a community of 1077K IT Pros here for help, advice, solutions, professional growth and fun. Join us!
1,076,382 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Start New Discussion Reply to this Discussion

changing css

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.

3
Contributors
3
Replies
5 Days
Discussion Span
2 Months Ago
Last Updated
22
Views
davy_yg
Master Poster
731 posts since May 2011
Reputation Points: 10
Solved Threads: 1
Skill Endorsements: 2

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>
Echo89
Junior Poster
109 posts since Mar 2012
Reputation Points: 9
Solved Threads: 4
Skill Endorsements: 0

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.

IIM
Practically a Master Poster
638 posts since Jun 2011
Reputation Points: 127
Solved Threads: 136
Skill Endorsements: 7

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.

davy_yg
Master Poster
731 posts since May 2011
Reputation Points: 10
Solved Threads: 1
Skill Endorsements: 2

Post: Markdown Syntax: Formatting Help
 
You
 
© 2013 DaniWeb® LLC
Page rendered in 0.0628 seconds using 2.7MB