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
Related
I am new to ajax, is there a way you can help me, how to disable all items once click is successful:
Here is my code for ajax:
if (!parent.hasClass('.disabled')) {
// vote up action
if (action == 'click') {
alert("test");
};
//how do i add disabled function on a particular div
// add disabled class with .item
parent.addClass('.disabled');
};
here is my index:
<?php while($row = mysql_fetch_array($query)): ?>
<div class="item" data-postid="<?php echo $row['recipe_id'] ?>" data-score="<?php echo $row['vote'] ?>">
<div class="vote-span"><!-- voting-->
<div class="vote" data-action="up" title="Vote up">
<i class="icon-chevron-up"></i>
</div><!--vote up-->
<div class="vote-score"><?php echo $row['vote'] ?></div>
</div>
<div class="post"><!-- post data -->
<p><?php echo $row['recipe_title'] ?></p>
</div>
</div><!--item-->
i jst want to disable the loop icon-chevron-up class.not just one but all.
Actually no ajax call needed here. I will only be done by using jquery. See the code
$(document).ready(function(){
$('.item').click(function(){
if (!parent.hasClass('.disabled')) {
parent.addClass('.disabled');
}
});
});
Here you have not mentioned, on what click you need the action, so i consider that on the div contains class='item', the action will be performed. I hope it will help.
i am creating a comment system using the php and mysql to store data and ajax with jquery all the system work well but when it comes to the delete action nothing it happen like this button do not have any action or relation with the system can anyone help me ???
comment_box.php
<li class="comment-holder" id="_<?php echo $comment->comment_id; ?>">
<div class="user-img">
<img src="<?php echo $user->profile_img; ?>" class="user-img-pic" />
</div>
<div class="comment-body">
<h3 class="username-field">
<?php echo $user->userName; ?>
</h3>
<div class="comment-text">
<?php echo $comment->comment; ?>
</div>
</div>
<div class="comment-buttons-holder">
<ul>
<li id="<?php echo $comment->comment_id; ?>"class="delete-btn">X</li>
</ul>
</div>
</li>
comment_delete.js(i am testing the delete button with firebug)
$(document).ready(function() {
$('.delete-btn').each(function() {
var btn = this;
$(btn).click(function(){
console.log("the id " + btn.id);
})
});
});
Try this
$(document).ready(function() {
$('.delete-btn').each(function(i,el) {
$(el).click(function(){
console.log("the id " + $(this).attr('id'));
})
});
});
<li id="<?php echo $comment->comment_id; ?>"class="delete-btn">X</li>
Since you are missing whitespace here between the id value and the class attribute, I think the browser just does not assign that class to the element.
Edit (for people who don’t know what “missing” means):
Your PHP code will generate HTML output of the form
<li id="123"class="delete-btn">X</li>
whereas it should of course be
<li id="123" class="delete-btn">X</li>
Please always validate your HTML code before asking questions.
Try
$(document).ready(function() {
$('.delete-btn').click(function() {
var comment_id = $(this).attr('id');
alert(comment_id);
});
});
I have some content that is fed in from mysql that, when clicked should fire an alert()...
however, this is not working...
here is my code for the code that is fed in from php/get_answers.php
<?php session_start(); ?>
<?php require_once("../includes/include_all.php"); ?>
<?php $answers = $question->get_answers_for_question($_GET['id']); ?>
<?php while($row = $answers->fetch_array()){ ?>
<!-- ALL ANSWERS HERE -->
<div class = 'answer-row'>
<div class = 'answer-side'>
<div class = 'arrow-contain-answer' type = 'answer' id = 'arrow-up' answer-id = '<?php echo $row["id"]; ?>'></div>
<div class = 'answer-votes-contain'>
<?php echo $row['popularity']; ?>
</div>
<div class = 'arrow-contain-answer' id = 'arrow-down'answer-id = '<?php echo $row["id"]; ?>'></div>
</div>
<div class = 'answer-content'>
<?php
echo $row['content'];
?>
</div>
<div class = 'actions'>
<a href = '#' class= 'add-comment' id = '<?php echo $row["id"]; ?>'> add comment </a>
</div>
</div>
<?php } ?>
and here is the jquery on the page that it is displayed on:
$(".arrow-contain-answer").click(function(){
alert();
});
What I want to happen is when someone clicks the element with the class of 'arrow-contain-answer' an event will occur..
I think I have had problems before when elements are being 'fed' into the page via mysql/php.
$(document).on("click", ".arrow-contain-answer", function(){
alert();
});
Try this way for dynamic added elements!
even better(performancewise) if you delegate it with the closest static element(parent) which is present in the document when dynamic fed element is added.
$('.answer-row').on("click", ".arrow-contain-answer", function(){
alert('clicked');
});
to read more about on delegated event
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.
Alright not sure what to do and i am honestly bit lost. What I am trying to do is upload a file to site via jQuery and push it to PHP which then deletes original image file and makes a a copy of it called header.jpg and pushes it where it needs to go. That part works with no problem. The problem here is how would I go about updating the div element if the header.jpg image is the background?
Note: no matter what the img will always be header.jpg but it needs to be re-cached by browser and outputed to user without page refresh
Here is how the header div is layed out
<div id="headerEmpty"></div>
<div id="pageName">
<h2><?php echo $pageName; ?></h2>
</div>
<?php if ( $_SESSION['signed_in'] == true ) { ?>
<div id="header" style="background-image:url(uploads/header.jpg);">
<span class="edit" fn="header">
<img src="uploads/icon/16/018.png" />
</span>
<div class="fn_menu" style="display:none;"></div>
</div>
<?php } else { ?>
<div id="header"></div>
<?php } ?>
and here is the jquery bit which displays loader and auto-starts the upload process
$('#photoimg').live('change', function() {
$("#preview").html('');
$("#preview").html('<img src="uploads/icon/16/ajax-loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm(
{
target: '#header',
success : function(data) {
$("#header").html(data).fadeIn('fast');
}
}).submit();
});
When you want to update the image, change it's source. You can append a time-stamp to the source so it will not come from the browser's cache. In PHP that would be something like:
<div id="headerEmpty"></div>
<div id="pageName">
<h2><?php echo $pageName; ?></h2>
</div>
<?php if ( $_SESSION['signed_in'] == true ) { ?>
<div id="header" style="background-image:url(uploads/header.jpg?_=<?php echo time(); ?>);">
<span class="edit" fn="header">
<img src="uploads/icon/16/018.png" />
</span>
<div class="fn_menu" style="display:none;"></div>
</div>
<?php } else { ?>
<div id="header"></div>
<?php } ?>
The time-stamp should just be ignored and the image will be downloaded each update.
Update
Ok, I see now that the background image is on the element you are replacing the HTML of. You could use jQuery to update the url() of the image:
success : function(data) {
var theDate = new Date();
$("#header").css('background-image', 'uploads/header.jpg?_=' + theDate.getTime()).html(data).fadeIn('fast');
}
You could also use PHP to output the #header element and use replaceWith() instead of .html():
success : function(data) {
$("#header").replaceWith(data).fadeIn('fast');
}
This assumes that your PHP output now looks like this:
<div id="header" style="background-image:url(uploads/header.jpg?_=1234567890);">
<span class="edit" fn="header">
<img src="uploads/icon/16/018.png" />
</span>
<div class="fn_menu" style="display:none;"></div>
</div>