CODEWITHSUNDEEP
phpjavascriptjqueryhtmlshow
user712027
user712027

Reputation: 572

Hiding and showing divs depending on variable value

Can anyone please tell me why the code below is not showing the div ticker? it just shows div main ..

Thanks a lot! 

<script language="javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript"> 
    $(document).ready(function(){ 


        $('.ticker').hide();
        $('.main').show();
        $('.other').hide();

    }) 
</script>
<?php

$main = 'ticker';

if ($main=="ticker"){?>
    <script type="text/javascript"> //alert('flag'); //this alert shows ok
        $('.ticker').show();
        $('.main').hide();
        $('.other').hide();
    </script>
    <?php


}

?>
<div class="main">main</div>
<div class="ticker">ticker</div>
<div class="other">other</div>

Upvotes: 1

Views: 1900

Answers (4)

Flask
Flask

Reputation: 4996

a bit nicer ;) 

<script language="javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript"> 
    $(function(){
        $('.hide').hide();
        $('.show').show();
    });
</script>
<?php
$main = 'ticker';
?>
<div class="main <?php echo ($main == 'main') ? 'show' : 'hide'; ?>">main</div>
<div class="ticker <?php echo ($main == 'ticker') ? 'show' : 'hide'; ?>">ticker</div>
<div class="other <?php echo ($main == 'other') ? 'show' : 'hide'; ?>">other</div>

Upvotes: 0

Quentin
Quentin

Reputation: 943175

The first script block says "When the document is ready, show and hide the elements with these classes".

The second script block says "Show and hide the elements with these classes immediately".

At the time the second script block is executed, there are no elements with those classes (so it has no effect). Even if there were, the first script block would override them a few seconds later.

You probably want to do something like:

<?php
    $main = 'ticker';
?>
<div class="main">main</div>
<div class="ticker">ticker</div>
<div class="other">other</div>
<script language="javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript"> 
        $('.ticker, .main, .other').hide();
        $('.<?php echo $main ?>').show();
    }) 
</script>

Upvotes: 1

Starx
Starx

Reputation: 78971

Try this

<?php    
$main = 'ticker';    
if ($main=="ticker"){?>
<script type="text/javascript"> //alert('flag'); //this alert shows ok
    $(document).ready(function() {
        $('.ticker').show();
        $('.main').hide();
        $('.other').hide();
    });
</script>
    <?php
}
?>

Upvotes: 0

Derek
Derek

Reputation: 589

Looks like you're missing the $(document).ready() from the second script block.

Upvotes: 3

Related Questions