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!
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
});
I'm trying to refresh this part of the page
<div class="refresh">
<?php
include("message.php");
?>
</div>
with this code :
<script type="text/javascript">
var auto_refresh = setInterval(
function () {
$('#refresh').empty();
$('#refresh').load('message.php');
}, 500);
</script>
Could you help me?
change this
<div class="refresh">
To
<div id="refresh">
because you are using id selector in jquery to load the content.
if you are using $('#refresh') then "#" represents the id, so change this
<div class="refresh">
to
<div id="refresh">
or change this
$('#refresh')
to
$('.refresh').
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>
I am a newbie on AJAX, I have a link that loads table.php. Then it writes the code to the index.php. In that code, I have another link to
show the info.php. Is it possible to do this?
<!--This is index.php-->
<div id="link">my Info</div><!--it works here-->
<div id="link">My Table</div>
<div id="table"></div>
<div id="info"></div>
<!--My javascript-->
<script type="text/javascript">
$(document).ready(function() {
$('#link a').click(function(){
var page = $(this).attr('href');
if(page =='table')
$('#table').load('table.php');
else if(page =='info')
$('#info').load('info.php');
return false;
})
});
</script>
<!--This is table.php-->
<div id="link">my Info</div><!--it doesn't works here-->
<!--This is info.php-->
<h1>My info</h1>
Your three <div> (as pointed out by #scragar) have the same id link, most probably causing the issue. Make it a class like that :
<div class="link">
And in your JS :
$('.link a')
EDIT : As noted by dbf, you must as well declare your handler with live() or on() instead of click() :
$('.link a').live('click', function(){ ... });
in order for it to be binded after table.php is loaded in the page. ( http://api.jquery.com/live/ )
I am using a menu collapsing javascript in my wesite in which when i click in the title called member the list of members must be shown down the member as accordion.In firefox and chrome it is working quite well but when i tested with IE8 all the members are showing before clicking the member title.Can some one help me is this a browser compatibility issue or something else.Hope i will get the answer soon.
This is the function which is in the js page.
//menu-collapsed.js
<script type="text/javascript">
function initMenu() {
$('#menu ul').hide();
$('#menu li a').click(
function() {
$(this).next().slideToggle('normal');
}
);
}
$(document).ready(function() {initMenu();});
</script>
and the html page is:
<html>
<head>
<script src="includes/jquery-1.2.1.min.js" type="text/javascript"></script>
<script src="includes/menu-collapsed.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var page={};
$(function() {
new FrontPage().init();
});
//]]>
</script>
</head>
<body>
<ul id="menu">
<li>
<?php
$mvo=new menuVO();
$mdao=new menuDAO();
$menus=$mdao->fetchAll('onlypublished');
foreach($menus as $menu)
{
if($menu->menu_type=='Member')
{
echo "$menu->name";
}
}
$mvo=new membersVO();
$mdao=new membersDAO();
$list=$mdao->fetchAll('onlypublished');
echo "<ul>";
foreach($list as $members)
{
echo "<li><span>$members->name</span></li>";
}
echo "</ul>";
?>
</li>
</ul>
</body>
</html>
Put up your code. You may also find your answer trying to learn how to make one.