<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<script src="<?php $this->baseUrl()?>/public/js/jQuery.bubbletip-1.0.6.js" type="text/javascript"></script>
<link href="<?php $this->baseUrl()?>/public/js/bubbletip/bubbletip.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
for(i=1;i<12;i++){
$('#a'+i).bubbletip($('#tip'+i), { deltaDirection: 'right' });
}
});
</script>
code in header part
<?php
foreach($this->nominations as $nomination)
{
for($i=1;$i<12;$i++){
if($nomination['award'.$i]!=""){?>
<div id="tip<?php echo $i?>" style="display:none;">
<div class="star"><strong><?php echo $nomination['award'.$i];?></strong></div>
<div><strong>Project: </strong><?php echo $nomination['project'.$i]?></div>
</div>
<?php }}
for($i=1;$i<12;$i++){
if($nomination['award'.$i]!=""){
echo "<span id='a$i'>";
echo "<img src='/public/assets/images/icons/star.png'/>";
echo "</span>";
}}
}?>
code in body section
My problem is when take my mouse over the stars of first iteration of foreach everything is working fine but its not working from second iteration i found that problem is with id a,tip becuause they are always becoming a1,a2.. and tip1,tip2... is there any solution
it is because every iteration of your forach loop creating elements of same id from a1 t a12
you need to put another level in names of ids .Try to use following
<?php
$count=0;
foreach($this->nominations as $nomination)
{
$count++;
for($i=1;$i<12;$i++){
if($nomination['award'.$i]!=""){?>
<div id="tip<?php echo $i?>_<?php echo $count?>" style="display:none;">
<div class="star"><strong><?php echo $nomination['award'.$i];?></strong></div>
<div><strong>Project: </strong><?php echo $nomination['project'.$i]?></div>
</div>
<?php }}
for($i=1;$i<12;$i++){
if($nomination['award'.$i]!=""){
echo "<span id='a$i_$count'>";
echo "<img src='/public/assets/images/icons/star.png'/>";
echo "</span>";
}}
}
<input type="hidden" id="total_iteration" name="total_iteration" value="<?php echo $count?>"/>
?>
And change you javascript code accordingly
<script type="text/javascript">
$(document).ready(function() {
var total=$('#total_iteration').val();
var t=0;
for(t=1;t<total;t++)
{
for(i=1;i<12;i++){
$('#a'+i+'_t').bubbletip($('#tip'+i+'_'+t), { deltaDirection: 'right' });
}
}
});
</script>
After some debigging above code should run the way you want i haven't tested it but i guess the main problme is the elements of duplicate ids in each foreach iteration
Related
I am trying to loop in jquery tab code but not working i am using this plugin for that https://jqueryui.com/tabs/ its not working in loop what am i doing wrong?
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<div id="tabs">
<ul>
<?php
$camps=20;
for($i=1; $i<=$camps; $i++)
{
echo 'Campaign ' . $i . '';
}
?>
</ul>
<?php
$camps1=20;
for($i1=1; $i1<=$camps1; $i1++)
{
echo '<div id="tabs-'.$i1.'">';
echo $i1;
echo '</div>';
}
?>
</div>
In this case, IDs no need to be unique in order to make the tab working. The problem is you did't wrapped the a tag with li element. Try wrapping first loop tab with li element :
<div id="tabs">
<ul>
<?php
$camps=20;
for($i=1; $i<=$camps; $i++) {
echo '<li>Campaign ' . $i . '</li>';
}
?>
</ul>
<?php
$camps1=20;
for($i1=1; $i1<=$camps1; $i1++) {
echo '<div id="tabs-'.$i1.'">';
echo $i1;
echo '</div>';
}
?>
</div>
DEMO(with same id)
But hey, of course you need to make the IDs unique. :)
I am using a JW video player and the way it is implemented for a single video is as below
<div id="myElement">Loading the player...</div>
<script type="text/javascript">
jwplayer("myElement").setup({
file: "<?php echo $dbVideoFile; ?>"
});
</script>
</div>
No what I want to do is that I want to do is loop through each existing video and to display a jw video player for each video. Only problem is that it is not quite working, it is only display the jsplayer for one video, the other videos do not show anything but blank. What am I doing wrong below:
<p>
<?php foreach ($arrVideoFile[$key] as $v) { ?>
<div id="myElement">Loading the player...
<script type="text/javascript">
jwplayer("myElement").setup({
file: "<?php echo 'VideoFiles/'.$v; ?>"
});
</script>
</div>
<?php } ?>
</p>
id tag should be unic so JWPlayer is confused when calling #myElement
Try incrementing a value and dynamically rename "myElement-" + i
I didn't get to test but that shoudl work:
<p>
<?php
$i = 0;
foreach ($arrVideoFile[$key] as $v) { ?>
<div id="myElement-<?php echo $i; ?>">Loading the player...
<script type="text/javascript">
jwplayer("myElement-<?php echo $i; ?>").setup({
file: "<?php echo 'VideoFiles/'.$v; ?>"
});
<?php $i++; ?>
</script>
</div>
<?php } ?>
</p>
Here is the JavaScript I use to animate slider (fade effect) of the content I read from database:
<script language="javascript">
jQuery(document).ready(function ()
{
var terms = ["span_1","span_2"];
var i = 0;
function rotateTerm() {
jQuery("#text-content").fadeOut(200, function() {
jQuery(this).text(jQuery('#text-slider .'+terms[i]).html()+i).fadeIn(200);
});
jQuery("#title-content").fadeOut(200, function() {
jQuery(this).text(jQuery('#title-slider .'+terms[i]).html()+i).fadeIn(200);
i == terms.length - 1 ? i=0 : i++;
});
}
rotateTerm();
setInterval(rotateTerm, 1000);
});
</script>
And here is the PHP code I use:
<?php
if (!empty($testLst)) :
$num=1;
foreach($testLst as $key=>$item):
$item->slug = $item->id;
$item->catslug = $item->catid ;
?><div id="hidden-content" style="display:none;">
<div id="title-slider">
<span class="<?php echo 'span_'.$num; ?>">
<h4><a href="<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($item->id, $item->catid)); ?>">
<?php echo $item->title; ?></a>
</h4>
</span>
</div>
<div id="text-slider">
<span class="<?php echo 'span_'.$num; ?>">
<p>
<?php
$concat=array_slice(explode(' ',$item->introtext),0,20);
$concat=implode(' ',$concat);
echo $concat."...";
?>
</p>
</span>
</div></div>
Learn more >></p>
<?php
$num++;
endforeach;
endif;
?>
<div id="title-content">
</div>
<div id="text-content">
</div>
And here is a JSFiddle page reproducing what I would like to do.
My problem is that I am getting data that still has HTML tags, however I would like the output to have my CSS styles.
You could clone the node, and set that to be the new content of the target elements, to keep everything in jQuery objects, but personally, I'd use the .outerHTML property.
I've updated your fiddle to show you what I mean: I've changed the .text(...set content here) to .html(), because we're injecting HTML content. Then, I added [0] at the end of your selector, to return the raw element reference, which gives access to all standard JS properties and methods an element has, and just went ahead and fetched the outerHTML... easy-peasy
So I have something like this:
<?php foreach($post_array as $post): ?>
<div class="postBodyWrapper">
<div class="vid-link">
<script type="text/javascript">
$(function() {
$(".vidthumb").append("<img class='thumb' src='<?php echo $post->vid_link; ?>'/>");
});
</script>
<div class="vidthumb"></div>
</div>
</div>
<?php endforeach; ?>
Let's say I have five posts in the $post_array. Then the <div class="vidthumb"></div> of each post will contain all five images (that are generated from the JavaScript code), instead of only the one that is supposed to. How can I fix it?
Try:
<?php $i = 0; foreach($post_array as $post): ?>
<div class="postBodyWrapper">
<div class="vid-link">
<script type="text/javascript">
$(function() {
$("#vidthumb_<?php echo $i ?>").append("<img class='thumb' src='<?php echo $post->vid_link; ?>'/>");
});
</script>
<div id="vidthumb_<?php echo $i++ ?>"></div>
</div>
</div>
<?php endforeach; ?>
By giving each vidthumb div you want the thumb to appear in a unique ID, you can now target the specific div's instead of the first match.
// Here based on the class rply1 I am displaying replies
<div class="biz_gary_btn width80 pl5 fl rply1<?php echo $comm['comment_id'];?>">
<div class="fl pt5_ie pt1"><img src="<?php echo base_url();?>images/green_callot.png" alt="Green Callot"></div>
<div class="arial bold fnt11 c7b7b7b fl pl5 ">2 Replies </div>
</div>
<!--2 Replies-->
<!--Reply-->
<div class="biz_gary_btn width84 pl5 fl rply2<?php echo $comm['comment_id'];?>">
<div class="fl pt5_ie pt1 pl5"><img src="<?php echo base_url();?>images/light_blue_callot.png" alt="Blue Callot"></div>
<div class="arial bold fnt11 c7b7b7b fl pl7">Reply</div>
</div>
This is the script
<script type="text/javascript">
$(document).ready(function(){
$(".rply1<?php echo $comm['comment_id'];?>").click(function(){
alert("sdfsd");
//return true;
$("#2replies<?php echo $comm['comment_id'];?>").toggle();
$(".rply1<?php echo $comm['comment_id'];?>").toggleClass("advice_white_btn_active");
});
$(".rply2<?php echo $comm['comment_id'];?>").click(function(){
$("#reply<?php echo $comm['comment_id'];?>").toggle();
$(".rply2<?php echo $comm['comment_id'];?>").toggleClass("advice_white_btn_active");
});
});
</script>
But the function is being called twice. I can see the alert twice. After the first alert my #2replies div is visible. This working just fine in the HTML set-up.
This might not be ideal because without seeing your full code it is hard to tell if you are actually binding the event twice. But, instead you could ensure that a click event is unbound before binding it again:
<script type="text/javascript">
$(document).ready(function(){
$(".rply1<?php echo $comm['comment_id'];?>").unbind("click").bind("click", function(){
alert("sdfsd");
//return true;
$("#2replies<?php echo $comm['comment_id'];?>").toggle();
$(".rply1<?php echo $comm['comment_id'];?>").toggleClass("advice_white_btn_active");
});
$(".rply2<?php echo $comm['comment_id'];?>").unbind("click").bind("click", function(){
$("#reply<?php echo $comm['comment_id'];?>").toggle();
$(".rply2<?php echo $comm['comment_id'];?>").toggleClass("advice_white_btn_active");
});
});
</script>