I have a link that says remove I have hidden the like by
< div id="remove_$id" style="display:none">< /div>
and then i want to be able to roll over a < tr id="$id" > and then remove comes up only for that id and when you roll off it the remove will be hidden I cant get the jquery code right for it to work
Can some one help me please
First off, give the div a class:
<div id="remove_$id" class="mydiv">
...
</div>
with:
div.mydiv { display: none; }
and
$(function() {
var id = this.id;
$("tr").hover(function() {
$("#remove_" + id).show();
}, function() {
$("#remove_" + id).hide();
});
});
Related
I have a div that slides in when triggered with:
<a href="javascript:void(0)" id="'. $row['post_id'] .'" onclick="chatWith(id)">
using jquery:
function chatWith(postid){
$("#chat_window").slideToggle("up");
$(".chat_postid").text(postid);
}
<div id="chat_window">
<span class="chat_postid"><?php echo $_POST['id']; ?></span>
</div>
I want a new chat dedicated for that item to pop up
Any help is appreciated!
$(document).ready(function() {
$('a').click(function() {
var user_id = $(this).attr('id');
$("#chats").append('<div class="chat_window" id="chat_' + user_id +'">Chat window for id: '+ user_id +'</div>');
$("#chat_"+user_id).slideToggle("up");
});
});
Edit: To add the new div per each id you need to add div which will contain all the divs.
<div id="chats"></div>
Then instead of id chat_window make it as a class. Then copy my update javascript code from above.
Edit2: You just need to replace your chatWitch() function with this one:
function chatWith(postid){
$("#chat_window").append('<span class="chat_postid" id="chat_' + postid+'">Chat window for id: '+ postid+'</span>');
$("#chat_"+postid).slideToggle("up");
}
Try with bellow code
Text
$('a.chat_window').click(function()
{
var id = $(this).attr('data-id');
alert(id);
});
hi is there any reference/sample for php ajax tabs with load more functionality within each tabs? Lets say we have 2 tabs and when we click each tab it will display only selected number of result until we click load more button at end of each result. Thanks. My current code seems not works well,when i click each tabs it display result correctly but when i click the tabs again it loads more data.Below are my current code:
<li data-tab-id="self" class="tab selected">Near You<span class="unread-count hidden" style="display: none;"></span></li>
<li data-section-id="user_feed" data-component-bound="true">
<ul class="module-list">
<!-- USER ACTIVITY JSON -->
</ul>
<a class="ybtn ybtn-primary ybtn-large more-wishlist" href="#" onclick="getRecentActivityClick(event)">
<span data-component-bound="true" class="loading-msg user_feed">See more recent activity</span>
</a>
</li>
<script type="text/javascript">
var totalRecords = '<?= $this->totalRecords?>';
$(document).ready(function(){
getRecentActivity(totalRecords);
});
$(".hd-ui-activity li a").click(function(e) {
e.preventDefault();
var tabid = $(this).parent().attr('data-tab-id');
if(tabid == "self"){
getRecentActivity(totalRecords);
}
});
function getRecentActivityClick(event)
{
if (event != null){
disabledEventPreventDefault(event);
}
getRecentActivity(totalRecords);
}
home.js:
function getRecentActivity(totalRecords)
{
$.ajax({
url:baseUrl + "activity/activityfeed",
data:{'total':totalRecordsView},
dataType:"json",
type:"POST",
success:function(data){
var activityHtml = '<p>Hello</p>';
$('#activity-feed li[data-section-id=near_you] .module-list').append(activityHtml);
}
});
}
UPDATE:
JSFIDDLE: http://jsfiddle.net/zlippr/5YkWw/1/
with what i understood from your question.. i think you are getting more datas since u are using.. append()..
use html()
append() inserts content, specified by the parameter, to the end of each element in the set of matched elements.
html() is used to set an element's content, any content that was in that element is completely replaced by the new content.
try this
replace
$('#activity-feed li[data-section-id=near_you] .module-list').append(activityHtml);
with
$('#activity-feed li[data-section-id=near_you] .module-list').html(activityHtml); //html()
You can do this:
$('#activity-feed li[data-section-id=near_you] .module-list').append(activityHtml);
// here you are appending the fulldata just apply some css here
use css this way:
$('#activity-feed li[data-section-id=near_you] .module-list')
.css({'height':'300px','overflow':'hidden'})
.append(activityHtml);
then click the loadmore:
$('your load more button').toggle(function(){
$('#activity-feed li[data-section-id=near_you] .module-list')
.css({'height':'auto','overflow':'auto'})
},function(){
$('#activity-feed li[data-section-id=near_you] .module-list')
.css({'height':'300px','overflow':'hidden'});
});
Trying to implement a simple "load more" functionality with jquery. The idea is to use it in the same way as one does pages. Click and a certain number of posts loaded from the database show up.
I have the following javascript:
$(function(){
var count = 0;
var num = 20;
$("#contents").load("posts.php");
$("#more").click(
function(){
var count = 0;
var num = 20;
$("#contents").load("posts.php");
$("#more").click(
function(){
$(".loading").show("fast");
count += num;
$.post("posts.php", {'page': count}, function(data){
$("#contents").append(data);
$(".loading").hide("slow");
});
}
);
and the following file posts.php
<?
echo "hello";
?>
And I have another file page.php with
<div id="contents"></div>
<div class="loading"><span style="text-decoration: blink;">LOADING...!</span></div>
<button id="more">More..</button>
When i click the "More Button" though nothing happens even though I'm just trying to print out a simple hello world here. I have loaded the javascript in the head of the file like
<script type ="text/javascript" src ="javascript/load.js"></script>
Other javascript functionality I've implemented is working fine. Is there something to add to the "loading" or "contents" elements in page.php?
Your javascript lacks basic syntactic structure, and must be issuing a syntax error, unless you messed it up while posting here. Try this:
$(function(){
var count = 0;
$("#more").click(loadPosts);
loadPosts();
function loadPosts() {
var num = 20;
$(".loading").show("fast");
count += num;
$.post("posts.php", {'page': count}, function(data){
$("#contents").append(data);
$(".loading").hide("slow");
});
}
});
UPDATE
Edited the code above and removed $("#contents").load("posts.php");. It was not necessary, and redundant.
I have a search box. I'm using jQuery and keyup to filter repeating divs.
Each div looks like this:
<div class="searchCell" id="searchCell' . $id . '">';
<div class="friendName">
// someNameOutputWithPHP.
</div>
</div>
Now, I want to filter based on the name text. If someNameOutputWithPHP contains the search query, the entire searchCell should show(). If it doesn't, the entire searchCell should hide().
This doesn't work, though:
<script type="text/javascript">
$(document).ready(function() {
$("#searchbox").keyup(function() {
var searchValue = $(this).val();
if(searchValue === "") {
$(".searchCell").show();
return;
}
$(".searchCell").hide();
$(".searchCell > .friendName:contains(" + searchValue + ")").show();
});
});
</script>
EDIT
New problem: I got the divs show() to show how I want. But the :contains isn't working exactly right.
For instance: say one of the name's is Ryan. When I search for 'Ryan', I get nothing. But when I search for 'yan' I get the Ryan div.
What's wrong?
Here's the :contains code:
$(".friendName:contains(" + searchValue + ")").parent().show();
That is because you are hiding the .searchCell and then showing its children .friendName divs, which though get display property will not show up because parent is hidden.
Try this:
<script type="text/javascript">
$(document).ready(function() {
$("#searchbox").keyup(function() {
var searchValue = $(this).val();
if(searchValue === "") {
$(".searchCell").show();
return;
}
$(".searchCell").hide();
//$(".searchCell:has(.friendName:contains(" + searchValue + "))").show();
// OR
//$(".friendName:contains(" + searchValue + ")").parents(".searchCell").show();
// OR
$(".friendName:contains(" + searchValue + ")").parent().show(); // If .searchCell is always a direct parent
});
});
</script>
Your selector
$(".searchCell > .friendName:contains(" + searchValue + ")")
will select all .friendName divs that contain the text from searchValue. That works just fine, but you need to .show() the parent element. Just invoke the .parent() method for that:
$(".searchCell > .friendName:contains(" + searchValue + ")").parent().show();
Demo: http://jsfiddle.net/d3ays/3/
And by the way, you HTML markup looks messed up too. There is a ; behind your div.searchCell for instance.
I'm working on a GMaps application to retrieve images, via getJSON(), and to populate a popup marker.
The following is the markup which I add to the marker dynamically:
<div id="images"></div>
<div id="CampWindow" style="display:none;width:550px;height:500px;">
<h4 id="camp-title"></h4>
<p>View... (all links open in new windows)</p>
<ul>
<li><a id="camp-hp-link" target="_blank" href="">camp home page</a></li>
<li>information: <a id="camp-av-link" target="_blank" href="">availability</a> | <a id="camp-vi-link" target="_blank" href="">vital information</li>
</ul>
<p id="message"></p>
I've been clawing out my eyes and woohoo for the past couple of days, trying to get the images to show inside the CampWindow . Then, I decided to think laterally and to see if the images were being retrieved at all. I then moved the images outside and sure as Bob (Hope), the images were being retrieved and refreshed with every click.
So, I decided to the keep the images outside and then once loaded, append it to the CampWindow . It's not working still; when I append the div to the main CampWindow div, the images won't show. I check in Firebug with the pointer thingy and it shows me the images as empty. I try it again with the images outside and it shows the images. I've tried before append and appendTo with no success. Am I missing something here?
I have no more woohoo to claw out. Please, please help.
marker.clicked = function(marker){
$("#images").html('');
$('#camp-title').text(this.name);
$('#camp-hp-link').attr('href', this.url);
$('#camp-av-link').attr('href', this.url + '/tourism/availability.php');
$('#camp-vi-link').attr('href', this.url + '/tourism/general.php');
// get resort images via jQuery AJAX call - includes/GetResortImages.inc.php
$.getJSON('./includes/GetResortImages.inc.php', { park: this.park_name, camp: this.camp_name }, RetrieveImages);
function RetrieveImages (data)
{
if ('failed' == data.status)
{
$('#messages').append("<em>We don't have any images for this rest camp right now!</em>");
}
else
{
if ('' != data.camp)
{
$.each(data, function(key,value){
$("<img/>").attr("src", value).appendTo('#images');
});
}
}
}
//.append($("#images"));
$("#CampWindow").show();
var windowContent = $("<html />");
$("#CampWindow").appendTo(windowContent);
var infoWindowAnchor = marker.getIcon().infoWindowAnchor;
var iconAnchor = marker.getIcon().iconAnchor;
var offset = new google.maps.Size(infoWindowAnchor.x-iconAnchor.x,infoWindowAnchor.y-iconAnchor.y);
map.openInfoWindowHtml(marker.getLatLng(), windowContent.html(), {pixelOffset:offset});
}
markers.push(marker);
});
When you add the <html> tag to your page it confuses the browser and is most likely the problem. I would suggest to either do as Pointy said and use window.open() to make a popup window (check out this tutorial), or better yet try out one of the many jQuery light box plugins.
I'm not sure what you are doing with the google maps, so I decided to just go with a basic example for you. With this script, if you click on an image inside the #image div, it'll open a popup window the same size as the image.
$(document).ready(function(){
$('#images img').click(function(){
var padding = 20;
var w = $(this).width() + padding;
var h = $(this).height() + padding;
var popup = '\
<html>\
<head>\
<link type="text/css" href="popup-style.css" rel="stylesheet" />\
<scr'+'ipt type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></scr'+'ipt>\
</head>\
<body>\
<img src="' + $(this).attr('src') + '">\
</body>\
</html>';
var pop = window.open('','Image View','toolbar=0,location=0,status=0,width=' + w + ',height=' + h + ',scrollbars=1,resizable=1');
pop.document.write(popup);
pop.document.close();
})
});
NOTE: When adding a script tag inside a string, make sure you break up the word "script" otherwise you will get an error.
Update #2:
Ok, since you want to work with what you have, try doing this:
Remove the <html> tag from your campwindow, then position your campwindow using CSS and/or javascript. Add something like:
var w = $(window).width();
var h = $(window).height();
// Add overlay and make clickable to hide popup
// you can remove the background color and opacity if you want to make it invisible
var $overlay = $('<div/>', {
'id': 'overlay',
css: {
position : 'absolute',
height : h + 'px',
width : w + 'px',
left : 0,
top : 0,
background : '#000',
opacity : 0.5,
zIndex : 99
}
}).appendTo('body');
// Position your popup window in the viewport
$('#CampWindow').css({
position: 'absolute',
top : $(window).scrollTop() + 50 + 'px',
left : w/2 - $('#CampWindow').width()/2 + 'px', // centers the popup
zIndex : 100
})
.fadeIn('slow');
// Click overlay to hide popup
$('#overlay').click(function(){
$('#CampWindow').hide();
$(this).remove(); // remove the overlay
})