how to loop javascript for creating bubble popup form more than 1 content

Question

for my website mobileapps.co which is in php dynamically driven, it is pulling products from the database. I am also running jquery for creating bubble popup for each products.

How can I loop my javascript for all the products, i am using the following code

<ul>
    <script>
   $(document).ready(function() {
    $('.popup0').CreateBubblePopup({
        position: 'top',
        align: 'center',
        innerHtml: '<?php echo $result['
        embeddedcode ']; ?><p style="float:left"><?php echo substr($result['
        appdesc '], 0, 100); ?><img src="images/rate-off.gif" /><img src="images/rate-off.gif" /><img src="images/rate-on.gif" /><img src="images/rate-on.gif" /><img src="images/rate-on.gif" /></p>',
        innerHtmlStyle: {
            color: '#FFFFFF',
            'text-align': 'center'
        },
        themeName: 'all-black',
        themePath: 'images/jquerybubblepopup-theme'
    });
});
</script>
<?php foreach ($fetchapps->arr as $result): ?>
  <li id="app-<?php echo $result['appid']; ?>" class="popup0">
<div class="icon">
  <a href="app-details.php?result=<?php echo $result['appid']; ?>"><?php echo      $result['embeddedcode']; ?></a>
</div>
<p>
      <a href="app-details.php?result=<?php echo $result['appid']; ?>"><?php echo substr($result['apptitle'], 0, 15); ?></a>
  <span><a href="app-details.php?result=<?php echo $result['appid']; ?>"><?php echo $result['category']; ?></a></span>
  <strong><?php if($result['appprice'] != 'free') echo $result['appprice']; ?></strong>
  <b><?php if($result['appprice']!='free'){ ?>$.<?php } ?><?=$result['appprice']?></b>
</p>
  </li>  
<?php endforeach; ?>
</ul>

score 0 · Answer 1 · answered Mar 24 '12 at 01:20

try this..

            $(document).ready(function() {
                // notice what i've added.. 
                // i added a forloop and tried to get the number of popup0 class
                for (var i = 0; i < $('.popup0').length(); i++) {
                    $('.popup0').eq(i).CreateBubblePopup({
                        position: 'top',
                        align: 'center',
                        innerHtml: '<?php echo $result['
                        embeddedcode ']; ?><p style="float:left"><?php echo substr($result['
                        appdesc '], 0, 100); ?><img src="images/rate-off.gif" /><img src="images/rate-off.gif" /><img src="images/rate-on.gif" /><img src="images/rate-on.gif" /><img src="images/rate-on.gif" /></p>',
                        innerHtmlStyle: {
                            color: '#FFFFFF',
                            'text-align': 'center'
                        },
                        themeName: 'all-black',
                        themePath: 'images/jquerybubblepopup-theme'
                    });
                }
            });

hope this helps

At now all the popups for Featured Apps they are all same. – Chander Dhingra Mar 24 '12 at 16:23 — Chander Dhingra, Mar 24 '12 at 16:23

score 0 · Answer 2 · answered Mar 24 '12 at 02:00

maybe this one?

<?php $rid = rand(0, pow(10, 7)); ?>

$(document).ready(function() {
    $('.<?php echo $rid; ?>').CreateBubblePopup({
        ....
    });
});

markup ...

<li id="app-<?php echo $result['appid']; ?>" class="popup0 <?php echo $rid; ?>">

how to loop javascript for creating bubble popup form more than 1 content

2 Answers2