jQuery Tooltip in PHP "while" loop not working - javascript

I want to display tool-tips on my website, and I'm using this code: http://flowplayer.org/tools/demos/tooltip/table.html
I'm using a while loop to create table rows <tr>. Here is how my tool-tip <div> looks like:
<td class="maandgem">€ <?= round($monthavg, 2); ?></td>
<div id="tooltip" class="tooltip">
Shipping: <?= $row['price_shipping']; ?><br />
Price: <?= $row['price']; ?><br /><br />
Total: <?php echo $row['price'] + $row['price_shipping'] + ($row['abo_price'] * $row['abo_time']); ?>
</div>
And this works as planned, it calculates the total price for each <tr>. The problem I'm having is that when I hover over the <td class=maandgem> it always shows the same first tool-tip.
So, each <TD> shows only 1 tool-tip, the first one created. Instead of an unique tool-tip for each row. The PHP part works - there are unique <TD>'s being created. I'm using this code (its the default, I don't understand jQuery much)
$(document).ready(function() {
$(".maandgem").tooltip({
tip: '#tooltip',
position: 'bottom left',
delay: 0
});
});
I'm also including this .js, and I have a basic style sheet for the tool-tip.
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>

I guess that's because you use an id for the tooltip, and an id have to be unique, therfore jquery only selects the first one.
Try use a class-attribute instead, and select on that.

Yes, If class will be used instead of ID then it will works on loop also.
I have tested it and working fine.
<link rel="stylesheet" href="jquery-ui-1.10.4.custom.css">
<script src="jquery-1.10.2.min.js"></script>
<script src="jquery-ui-1.10.4.custom.js"></script>
<script>
$(function() {
$( ".show-option" ).tooltip({
show:
{
effect: "slideDown",
delay: 250
},
position:
{
my: "center top",
at: "center"
}
});
});
</script>
</head>
<body>
<h2 class="show-option" title="Testing Tooltip">ToolTip</h2>
</body>

Related

make html table element <td></td> editable

I pull info from a database table and place it into an HTML table. I want to allow the user to click on a number in the table and be able to edit it. I used jquery to make an event for click but when I use <textarea> it enlarges the cell and messes up the look of the whole table. I've tried <input> and it does the same. Any way that the table cell itself can just be turned into an input? Here's 2 screenshots, first with the table, second to show how the table gets skewed when an input is added.
Screenshot of Table
Screenshot of Table with Textarea
The question is what is my best option for editing text. <textarea> makes the cell larger and honestly it looks ugly... contenteditable doesn't work with IE from the sounds of it, which disqualifies it as an option. My end goal is to save the value back to the database also after its entered which is why I was trying a click with jquery, so it would be easy to add more code to shoot the text back to the DB afterwards
<?php
include("connection.php");
$query= "SELECT * FROM schedule";
$result = mysqli_query($link, $query);
$scheduletext="<table>";
if($result = mysqli_query($link, $query)) {
$b=1;
while ($row=mysqli_fetch_array($result)) {
$scheduletext.="<tr>";
$a=1;
while($a< mysqli_num_fields($result)) {
if(($a == 1)and ($b == 1)){
$scheduletext.="<th></th>";
} else {
if (($a == 1) or ($b == 1)) {
$scheduletext.="<th>".$row[$a]."</th>";
} else {
$scheduletext.="<td>".$row[$a]."</td>";
}
}
$a++;
}
$scheduletext.="</tr>";
$b++;
}
}
$scheduletext=$scheduletext."</table>";
?>
<html>
<head>
<title>TastySnack - Production Schedule</title>
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="tasty.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div id="top">
<div id="top-left">
TastySnack Production
</div>
<div id="top-right">
<img id="logo" src="images/TastysnackLogo.jpg">
</div>
</div>
<div id="split"></div>
<div id="schedule">
<?php
print_r($scheduletext);
?>
<div id="new"></div>
</div>
<script type="text/javascript">
$("td").click(function(){
$(this).html("<textarea>");
});
</script>
</body>
</html>
Just include contenteditable
into the td where evere you want to have content editable
<td contenteditable>hello world</td>
here is a demo: https://jsfiddle.net/3eav7mLv/
You can use jquery table edit.
http://markcell.github.io/jquery-tabledit/#examples
for edit and delete.
Download and include js table edit file.
Use code from example like this:
$('#example3').Tabledit({
url: 'example.php',
editButton: false,
deleteButton: false,
hideIdentifier: true,
columns: {
identifier: [0, 'id'],
editable: [[2, 'firstname'], [3, 'lastname']]
}});
Where
example.php
can be your route for controller with some logic.
just include <textarea> or <input type="text"> tag within the <td> tag
<td><textarea rows="4" cols="50">Content here</textarea></td>

How can I add setAttribute to a var with an onClickEvent?

I am using an autocomplete script to make a search field where I can search a list of users called from my database. When the results show in the dropdown, I would like people to be able to click on a user's name and have a fancybox window pop up with their info in it. Here is the script I'm working with:
<!-- Autocomplete search field. -->
<div class="input-group" style="float: right; width: 350px; margin-bottom: 10px;">
<span class="input-group-addon"><i class="fa fa-fw fa-search"></i></span>
<input type="text" id="search-tenants" placeholder="Search tenants..."/>
</div>
<script>
var options = {
data: [
<?php
foreach ($usersList as $users) {
$count++; ?> '<?=$users->getFirstName()?> <?=$users->getLastName()?>', <?
}
?>
],
list: {
match: { enabled: true },
onClickEvent: function() {
$("td.tenant-name .info-card")[0].click();
},
}
};
$("#search-tenants").easyAutocomplete(options);
</script>
If I were to add an anchor and the necessary attributes around the results in the foreach statement (like below), the fancybox works as expected, but you can see all of the code in the input field.
<?php
foreach ($usersList as $users) {
$count++; ?> '<a class="info-card" data-fancybox-type="iframe" href="users.php?userid=<?=$users->getUserId()?>&mode=view"><?=$users->getFirstName()?> <?=$users->getLastName()?></a>', <?
}
?>
So i'd like to ask: what would be the proper JavaScript way of adding an anchor with class and attributes to the results? I understand there should be a setAttribute somewhere, but I'm not sure where.
You can use the jQuery appendTo. http://api.jquery.com/appendto/
You would build up your element (in this case the anchor tag) and then append it to another element.
$( "<p>Test</p>" ).appendTo( ".inner" );
In this example from the link it appends the paragraph element to each element that has the class "inner".
I hope that helps.

hiding divs using javascript that don't match the clicked div and pushing correct div up the page

I have a web page in PHP that shows blog posts/ articles that were posted from 2015-2008. basically at the top of the page I have buttons that have the year on it, and below all the blog posts and articles correlatin to the years. I want to have a feature so that if the user clicks 2013, all other posts with years not matching 2013 will dissapear and the correct year posts/articles will move up to the top of the page, so the user doesn't have to scroll.
Here is my code, the content is loaded through a controller so the page is basically created by grabbing data from an array.
<div class="calendar-key">
<div class="cd-timeline2-img cd-2015" id="btn" >'15</div>
<div class="cd-timeline2-img cd-2014" >'14</div>
<div class="cd-timeline2-img cd-2013" >'13</div>
<div class="cd-timeline2-img cd-2012">'12</div>
<div class="cd-timeline2-img cd-2011" >'11</div>
<div class="cd-timeline2-img cd-2010" >'10</div>
<div class="cd-timeline2-img cd-2009" >'09</div>
<div class="cd-timeline2-img cd-2008" >'08</div>
<div class="cd-timeline2-img cd-2007" >'07</div>
<?php foreach ($article as $slug => $article): ?>
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-<?php echo $article['year'] ?>">
<span class="timelinedate"><?php echo $article['month'] ?><?php echo $article['day'] ?></span>
</div>
<div class="cd-timeline-content">
<a href="<?php echo $article['link'] ?>">
<h3 class="press_title" id="<?php echo $article['year'] ?>-<?php echo $article['first'] ?>"><?php echo $article['title'] ?></h3>
<img src="<?php echo $article['image'] ?>" width="100%" height="auto" />
</a>
<p><?php echo $article['description'] ?> </p>
<div class="social-share-buttons article-share-buttons pull-left">
<a class='social-email' href='<?php echo SocialShareLink::email("", "Check out this article, ".$article['title']." \n\n" .$article['link']); ?>'</a>
<a class='social-facebook' href='<?php echo SocialShareLink::facebook($article['link']); ?>' target='_blank'></a>
<a class='social-twitter' href='<?php echo SocialShareLink::twitter("", $article['link']); ?>' target='_blank'></a>
<a class='social-google' href='<?php echo SocialShareLink::googleplus($article['link']); ?>' target='_blank'></a>
</div>
Read more
</div>
</div>
<?php endforeach; ?>
the for each basically takes an array I have in a config file with data, and populates the articles on the page for however many there are in the array.
'articles' => [
'article#1 example' => [
'description' => "exampletextblablabla",
'title' => 'article title',
'link' => '//www.google.com',
'year' => '2015',
'month' => 'Jul ',
'day' => '25',
'first' => '1', //first article of that year
'image' => '../../images/example.jpg'
],
//more articles in this format
and then my failed attempt at js
<script type="javascript">
$('.cd-timeline2-img a').on('click',function(){
var eq = $(this).index();
$('cd-timeline-img cd-<?php echo $article['year'] ?>').removeClass('show');
$('cd-timeline-img cd-<?php echo $article['year'] ?>').eq(eq).addClass('show');
});
</script>
I am not very good at javascript, so I tried something like this but nothing works. I feel like this is an easy little script to right, any help would be great! thanks.
Woohoo! Finally, I got it working and 100% where I want it. So I used your code and threw it into a Fiddle: https://jsfiddle.net/rockmandew/4Lyofmkh/44/
You will see that I went with my approach - by default, the articles are display none and have a class of 'show' on them to begin with - you will also notice I changed where you had your 'cd-(year)' - I did this because you needed to identify the entire article container since that is what you would be hiding/showing.
I also added a 'Show All' button, so the user can view all if desired.
So like I said I changed your HTML markup right here:
<div class="cd-timeline-block cd-2015 show">
<!-- Article Year in Div Class below -->
<div class="cd-timeline-img">
It was "cd-timeline-img cd-2015" previously. That is the only change you need to make to your markup, besides adding the "show all" button (if you want it):
<div class="show-all">Show All</div>
Furthermore, I applied the display:none css property to the ".cd-timeline-block"
.cd-timeline-block {
margin-top:35px;
display:none;
}
Which is why we initialize the page with the "show" class on there:
<div class="cd-timeline-block cd-2015 show">
Which has the following styles:
.show {
display:block;
}
Finally, we get to the meat of it all, the jQuery. I will post the working code that I used and then explain it. The following code is to toggle articles based on the year clicked:
$('.calendar-key a').each(function() {
$(this).on('click', function() {
var x = 'cd-' + $(this).attr('rel');
$('.cd-timeline-block').each(function() {
if($(this).hasClass(x)) {
$('.cd-timeline-block').not(this).each(function() {
if($(this).hasClass('show')) {
$(this).toggleClass('show');
}
});
$(this).each(function() {
if(!$(this).hasClass('show')) {
$(this).toggleClass('show');
}
});
}
});
})
});
As you will see, when a ".calendar-key" link is clicked, the clicked link will produce a variable based on the links "rel" - the variable adds the "cd-" prefix onto the "rel" value. Then for each ".cd-timeline-block" if it has the class that was created from clicking (the variable just discussed), it will cycle through all of the ".cd-timeline-block" elements that isn't "this" (meaning all elements that don't match the selected year.) - for all of those elements, if it has the "show" class, it will be toggled. Then the last part, it takes the "this" and cycles through each of them, if it doesn't have the class "show", then it toggles the class "show", thus displaying the desired elements.
Finally, the show all button is controlled with the following function:
$('.show-all a').on('click', function() {
$('.cd-timeline-block').each(function() {
if(!$(this).hasClass('show')) {
$(this).toggleClass('show');
}
});
});
Its a fairly simple function. When the ".show-all" link is clicked, it cycles through all of the ".cd-timeline-block" elements, again, if they don't have the "show" class, the function will toggle the "show" class.
I know that was a lot but hopefully it all made sense. Again, here is the associated Fiddle I made to help you.
https://jsfiddle.net/rockmandew/4Lyofmkh/44/
Let me know if you need any further help.
Latest Update:
https://jsfiddle.net/rockmandew/4Lyofmkh/46/
Fiddle now contains new mark-up for easiest solution to updated issue marked in comments below.
It finally dawned on me that I was filtering your list of years not your posts. For future reference post a snippet of actual code, now bits with php all over them. Now the script looks for the rel attribute in your year list for the year, matches that year to the class "cd-year" in each post and filters as necessary. I stripped out all of the superfluous parts of the post like the social links as they're not needed for this exercise.
http://jsfiddle.net/1dyocexe/2/
//this is where you'd have your <?php echo $article['year'] ?> set the current year
var year = 2014;
getPosts(year);
function getPosts(year) {
$(".cd-timeline-block").find("div").each(function (i) {
var elm = $(this);
var cdYear = "cd-" + year;
var use = elm.hasClass(cdYear);
if (use === true) {
elm.show();
} else {
elm.hide();
}
});
}
$(".calendar-key div a").on("click", function () {
var year = $(this).attr("rel");
getPosts(year);
});

Show AJAX div when image hovered and follow the mouse

I need help. I'm working on a website that's give user a download link to movies.
But I can't get the preview_block div(id) showed up when the mouse is hovered on the movie_block div(id) element. I can't even make the div(preview_block) follow my mouse when I hovered it.
Also, I'm planning to make an AJAX request on the preview_block div(id) to get information about the movie hovered.
Here's my code.
A simpler fiddle example: https://jsfiddle.net/o4xcb9m0/1/
<!DOCTYPE html>
<html>
<head>
<link href="includes/styles.css" />
</head>
<body>
<div class="">
<div id="preview_block" style="display:none"><p>test</p></div>
<table>
<!-- -->
<tr>
<td>
<span id="movie_block"><img src="image-link" alt="<?php echo $movieNameList->data->movies[0]->title; ?>" /></span>
<br>
Movie Name
<br>
</td>
<td>
<span id="movie_block"><img src="image-link" alt="<?php echo $movieNameList->data->movies[0]->title; ?>" /></span>
<br>
Movie Name
<br>
</td>
</tr>
<!-- -->
<tr>
<td>
<span id="movie_block"><img src="image-link" alt="<?php echo $movieNameList->data->movies[0]->title; ?>" /></span>
<br>
Movie Name
<br>
</td>
<td>
<span id="movie_block"><img src="image-link" alt="<?php echo $movieNameList->data->movies[0]->title; ?>" /></span>
<br>
Movie Name
<br>
</td>
</tr>
</table>
</div>
<script src="includes/scripts.js"></script>
</body>
</html>
So, you'd be better off using mouse(enter/leave) events as the hover event bubbles up from within the inner most child (img in your case) to the element (span in your case) the event is registered to. Mouse(enter/leave) events are almost the same as hover except that they don’t react to event bubbling. Therefore they see the entire HTML element they’re registered to as one solid block and don’t react to mouseovers and –outs taking place inside the block.
There is a good interactive demo on the jQuery mouseover docs at the bottom of the page that explains this.
Make sure you change all occurrences of id="movie_block" to class="movie_block" as IDs are supposed to be unique in any given HTML document. They'd make your HTML invalid otherwise.
$(".movie_block").on({
mouseenter: function(event) {
$("#preview_block").css({top: event.clientY, left: event.clientX}).show();
},
mouseleave: function() {
$("#preview_block").hide();
}
});
Here is a demo that has the working code.
And if you wanted the preview block to follow the mouse pointer, then you may use the following.
$(".movie_block").on({
mousemove: function(event) {
$("#preview_block").css({top: event.clientY, left: event.clientX}).show();
},
mouseleave: function() {
$("#preview_block").hide();
}
});
A demo for the above.
So Id's aside here, It seems to me that you are using the hover event when you should be using the mousemove event http://api.jquery.com/mousemove/
Here is a link How to get the coordinates in html using .hover event in jquery?
Hover does not fire continuously. So it won't move with the mouse. How to get the coordinates in html using .hover event in jquery?
In reference to keeping your code clean and easy to get answered, try posting it on jsFiddle like this:
https://jsfiddle.net/o4xcb9m0/1/
<html>
<body>
<div class="">
<a href="foo.com" >Foo
<span class="movie_block">
Bar
<img src="foo" />
</span>
</a>
<div class="preview_block" style="display:none"><p>test</p></div>
</div>
<script>
$(".movie_block").hover(function(event) {
$(".preview_block").css({color: 'red', top: event.clientY + 'px', left: event.clientX + 'px'}).show();
}, function() {
$(".preview_block").hide();
});
</script>
</body>
</html>

Showing Popover in a Table element using Codeigniter

Can anyone explain how to use popover on a table element using Codeigniter?
<td> <span id="popover" data-toggle="popover" data-content="<?php echo $userData[$i]->name; ?>"></span><?php echo custom_echo($userData[$i]->name,15); ?></td>
And javascript code is
<script>
$(document).ready(function() {
$("#popover").popover({
html: true,
animation: false,
placement: "bottom"
});
});
</script>
What exactly is not working?
Using your code, I have guessed how output html would look like:
<table>
<tr>
<td><span id="popover" data-toggle="popover" data-content="user name in popover">user name in span</span></td>
</tr>
</table>
I have also added your script in onLoad event:
$("#popover").popover({
html: true,
animation: false,
placement: "bottom"
});
I have included some resources:
jQuery
bootstrap.min.js
bootstrap.min.css
And it all works fine, as you can see in this jsfiddle: http://jsfiddle.net/d2k8zzsw/1/

Categories

Resources