Hello I have a php page that show 10 articles with read more button hidden all I need is when I hover on the article box the read more show everything is working fine expect when I hover on anything it show read more on first article only not every article
This is my php code
$query = mysql_query("SELECT * FROM stories ORDER BY id DESC LIMIT 0,10");
while ($row=mysql_fetch_array($query))
{
echo "<div class='content_story_block'>
<div class='content_story_block_menu'>$row[title]
<div id='Read_More' style='display:none;' class='content_story_block_menu_span'>Read More</div>
</div>
<div class='content_story_block_row'>$row[brief]</div>
</div>";
}
and this is my jquery code
<script type="text/javascript">
$('.content_story_block').hover(function() {
$('#Read_More').toggle('slow', function() {
// Animation complete.
});
});
</script>
what am I missing ?
Change Read_More from id to class:
<div style='display:none;' class='content_story_block_menu_span Read_More'>
Read More</div>
Then change your script:
<script type="text/javascript">
$('.content_story_block').hover(function() {
$(this).find('div.Read_More').toggle('slow', function() {
// Animation complete.
});
});
</script>
try this
<script type="text/javascript">
$('.content_story_block').hover(function() {
$('.content_story_block_menu_span').each(function(){
$(this).toggle('slow', function() {
// Animation complete.
});
})
});
<script type="text/javascript">
$('.content_story_block').hover(function() {
$(this).next('#Read_More').toggle('slow', function() {
// Animation complete.
});
});
</script>
Related
I am having a working while loading a div, $(document).ready(function() { works well before div load, but it stop working after div loaded. Why is it happening?
Here is the sample of code I am working with:
<div id="abc0">
<div id="abc">
<script>
$(document).ready(function() {
alert("test");
});
</script>
</div>
</div>
And here is the load function I am using:
$("#abc0").load('mypage #abc');
Use callback function for alert.
$("#abc0").load("mypage #abc > *", function(){
alert("test");
});
$(function() {
alert("test me");
});
Some time you have to write jQuery instead of $
jQuery(document).ready(function($) {
//do jQuery stuff when DOM is ready
});
Hi I ‘d like some help please, as my skills in jQuery are not so good. What I want to achieve is to change the order of the images like this example.
My database looks like this:
table: Gallery
img_id (pk)
image
caption
order
I have also created these 2 views:
index.php
<!-- will display the ajax result -->
<div id="orderResult"></div>
<hr/>
<input type="button" id="save" value="Save Order" class="btn btn-primary">
<script type="text/javascript">
$(function () {
$.post('<?php echo site_url('admin/galleries/order_ajax'); ?>', {}, function(data) {
$('#orderResult').html(data);
});
// save order
$('#save').click();
});
</script>
order_ajax.php
<?php if(count($images)>0): ?>
<div class="sortable-list">
<ol id="sortable">
<?php foreach($images as $image): ?>
<li <?php echo 'id="li_'.html_escape($image->img_id).'"'; ?>><?php echo img(array('src' => 'uploads/thumbs/'.html_escape($image->image)); ?></li>
<?php endforeach; ?>
</ol>
</div>
<?php endif; ?>
<script type="text/javascript">
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
</script>
I have also created and the order_ajax controller
public function order_ajax(){
// save order from pages
var_dump($_POST);
// if (isset($_POST['sortable'])) {
// $this->gallery->save_order($_POST['sortable']);
// }
// fetch all images (fetch all data)
$this->data['images'] = $this->gallery->get();
// load the view
$this->load->view('admin/gallery/order_ajax', $this->data, false);
}
So what I basically want to do is to drag the images around in order to change their order, and when I click the save button pass the (new) data/order to the controller and to store them in the database. How can I make this work?
Well, the solution was more simple than I thought.
On the index.php view I've put this
<script type="text/javascript">
$(function () {
$.post("<?php echo site_url('admin/galleries/order_ajax'); ?>", {}, function(data) {
$('#orderResult').html(data);
});
// save order
$('#save').click(function(){
var new_order = $("#sortable").sortable( "toArray" );
$.post("<?php echo site_url('admin/galleries/order_ajax'); ?>", { order_array: new_order }, function(data) {
$('#orderResult').html(data);
});
});
});
</script>
and this is the controller function
public function order_ajax(){
// save order from pages
if (isset($_POST['order_array'])) {
$this->gallery_model->save_order($_POST['order_array']);
}
// fetch all images
$this->data['images'] = $this->gallery->get();
// load the view
$this->load->view('admin/gallery/order_ajax', $this->data, false);
}
I'm working on drag and drop and store id number in database, i just finished that and is works great in all browser but the problem is that is NOT WORKING IN IE 8 or 9.
The problem is that in IE is not allow me to drag or move around that the problem that i can't figure out how to solve this, and rest of browser are works fine.
here is jquery code
<script type="text/javascript">
$(document).ready(function(){
function slideout(){
setTimeout(function(){
$("#response").slideUp("slow", function () {
});
}, 2000);}
$("#response").hide();
$(function() {
$("#list ul").sortable({ opacity: 0.8, cursor: 'move', update: function() {
var order = $(this).sortable("serialize") + '&update=update';
$.post("updateList.php", order, function(theResponse){
$("#response").html(theResponse);
$("#response").slideDown('slow');
slideout();
});
}
});
});
});
</script>
and the body code is
<div id="response"> </div>
<ul>
<?php
include("connect.php");
$query = "SELECT id, text FROM dragdrop ORDER BY listorder ASC";
$result = mysql_query($query);
while($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
$id = stripslashes($row['id']);
$text = stripslashes($row['text']);
?>
<li id="arrayorder_<?php echo $id ?>"><?php echo $id?> <?php echo $text; ?>
<div class="clear"></div>
</li>
<?php } ?>
</ul>
</div>
</div>
can any one help me how to solve to make works drag and drop for IE, if is there is other sample that might support all browser!
AM
According to #jheilgeist here, adding a position:relative on the div, will sort it out, even if it acts a little weird.
It looks like a jQuery UI bug in those browsers.
Check more info here: http://bugs.jqueryui.com/ticket/7546
I have this javascript :
<script type="text/javascript">
$(document).ready(function($) {
$('#target-share ul li').click(function() {
$('input#shareto').val($(this).data('val'));
});
});
</script>
and it really works as I expected. but when I add this another javascript to do drop-down animation, that javascript not working anymore :
<script type="text/javascript">
$(document).ready(function() {
$("#select-shareto a").click(function () {
var newClass = $(this).find("span").attr('class');
var newText = $(this).find("span").text();
$("#select-shareto a").removeClass("selected");
$(this).addClass("selected");
$("a#to-chosen span").removeClass().addClass(newClass).text(newText);
$("a#to-chosen").toggleClass("opened");
$('#select-shareto').slideToggle('fast');
return false;
});
$('a#to-chosen').click(function() {
$(this).toggleClass("opened");
$('#select-shareto').slideToggle('fast', function() {
// Animation complete.
});
});
});
</script>
those javascript actually affected on this HTML code :
<div id="target-share">
<span class="to-admin">Admin</span>
<ul id="select-shareto">
<li data-val="0-1">
<span class="to-Finance">Finance</span>
</li>
<li data-val="1-1">
<span class="to-admin-private">Admin Private</span>
</li>
<li data-val="1-0">
<span class="to-ceo">CEO</span>
</li>
<li data-val="0-0">
<span class="to-ceo-private">CEO Private</span>
</li>
</ul>
<input id="shareto" type="text" value="0-1" name="shareto">
</div><!-- #target-share -->
any idea how to make those 2 javascript works side-by-side? thanks.
$("#select-shareto a").click(function () {
...
return false;
});
Hereby, you stop the further propagation of this event - other handlers for this click event won't be called any more. Instead, use this:
$("#select-shareto a").click(function (e) {
e.preventDefault();
...
});
(Demo at jsfiddle.net)
I'm assuming you tried to insert the code where the comment animation complete is and if so you just need to put the code:$('#target-share ul li').click(function() { $('input#shareto').val($(this).data('val'));});
Your code is already wrapped in a $(document).ready so you don't need another one.
i have a link that needs to be triggered from a success post:
<?php
if ($_POST["action"] == "1") {
?>
<script type='text/javascript'>
$(window).load(function() {
$(".likepic").click();
});
</script>
<?php } ?>
<script type='text/javascript'>
$(window).load(function() {
$(".likepic").click(function(){
$(".likepic").colorbox({width:"620px", height:"570px", inline:true, href:"#likepic_lightbox"});
});
});
</script>
<div class="blackk" style="display:none;">
<div id="likepic_lightbox">test
</div>
</div>
so if that post action is 1 then run the jquery script and click on the link for something else to happen :)
this is what i tried but without success.
any ideas?
Thanks
Try using $(document).ready() instead of $(window).load()
Also, you'll need to switch the order of your JavaScript blocks. The click handler needs to be defined first.
Play with a test version here: http://jsfiddle.net/irama/bcMp7/
Or see updated code below:
<script type='text/javascript'>
$(document).ready(function() {
$(".likepic").click(function(){
$(".likepic").colorbox({width:"620px", height:"570px", inline:true, href:"#likepic_lightbox"});
});
});
</script>
<?php if ($_POST["action"] == "1") { ?>
<script type='text/javascript'>
$(document).ready(function() {
$(".likepic").click();
});
</script>
<?php } ?>
<div class="blackk" style="display:none;">
<div id="likepic_lightbox">test</div>
</div>
Let us know how you go!