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
});
Related
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 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!
i have created a table with a row and 4 columns.i declared attributes class,id for td element. when i click on the td i have to call the jQuery function to load pop up box. here instead load pop up i just want to display the alert box but it doesn't work. here is my code
jQuery
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
alert("jquery");
$('.tbox').click(function(e) {
tb_show("ThickBox","hi.html?height=120&width=400","true");
}
});
</script>
html code:
<table>
<tr align="center">
<td class="tbox" id="tbox"> <?=$id?> </td>
<td class="tbox" id="tbox"><?=$zoneName?></td>
</tr></table>
how to call the jQuery?
Your event handler has not been closed properly, causing a parse error. Try:
$(document).ready(function(e) {
alert("jquery");
$('.tbox').click(function(e) {
tb_show("ThickBox", "hi.html?height=120&width=400", "true");
});
});
$(document).ready(function (e) {
$('.tbox').click(function (e) {
alert("jquery");
});
});
is this what you were asking?
Its because you are using two divs with same id. Thats why I think its not working. Trying varying the name of the divs and they will work fine
$('document').ready(function(){
$('#tbox1').click(function(){
alert("I am from div1");
});
$('#tbox2').click(function(){
alert("I am from div2");
});
});
I am using jQuery to load a page by AJAX using $.ajax (suppose test.html).Its a simple HTML document with a few buttons and associated animations upon clicking them (also using jQuery).The .click() properties associated are working fine when I load the page directly but the buttons fail to respond when I click them in the AJAX loaded version.Since I am too tires to actually explain all the glum that I am doing, I am simply writing all the code below, apologies for this. Here are the required codes in the files.
<!-- p11.php -->
<!DOCTYPE html">
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="c/js/jquery.js"></script>
<script type="text/javascript" src="c/js/jtry11.js"></script>
<link rel='stylesheet' type='text/css' href='c/css/css11.css'>
</head>
<body>
<button id="go1">Load Something Using AJAX</button>
<div id="msg"></div>
<div id="showButton">
<button id="showLoadedPage">Show the Page</button>
</div>
<div id="results"></div>
</body>
</html>
and the next
$(document).ready(function()
{
$('#results').hide();
$('#msg').hide();
$('#showButton').hide();
$('#loading').hide();
$('#loaded').hide();
$('#load').live('click', function()
{
$('#load').hide();
$('#loading').show();
$('#msg').show('fast');
$.ajax({
url: 'test.html',
cache: false,
success: function(html) {
$('#results').append(html);
}
});
$('#msg').ajaxSuccess(function(evt, request, settings){
$(this).append('Click the Button Below to View the Page');
$('#showButton').show('slow');
$('#hideLoadedPage').hide();
$('#loading').hide();
$('#loaded').show();
});
});
$('#showLoadedPage').live('click', function() {
$('#loaded').hide('slow');
$('#msg').hide('slow');
$('#results').show('fast');
$('.shower').hide();
$(this).hide();
$('#hideLoadedPage').show();
});
$('#hideLoadedPage').live('click', function() {
$('#results').hide('fast');
$('.shower').hide();
$(this).hide();
$('#showLoadedPage').show();
});
$('.hider').live('click', function() {
$('.shower').show();
$(this).hide();
$('p.one').hide('slow');
$('p.two').hide('medium');
$('p.three').hide('fast');
});
$('.shower').live('click', function() {
$('.hider').show();
$(this).hide();
$('p.one').show('slow');
$('p.two').show('medium');
$('p.three').show('fast');
});
$('p.*').live('click', function() {
$(this).hide('slow');
if( $('p').is(':hidden') ) {
$('.shower').show();
}
if( $('p.*').is(':hidden') ) {
$('.hider').show();
}
});
});
and the last
<!-- test.html -->
Page Loaded by Ajax.
Not the original Page
<center>
<button class="hider">
<img src="c/images/zoom_out.png" alt="zoom_out" />
Hide 'em
</button>
<button class="shower">
<img src="c/images/zoom_in.png" alt="zoom_out" />
Show it
</button>
<p class="one">Hiya</p>
<p class="two">Such interesting text, eh?</p>
<p class="three">The third Paragraph</p>
</center>
I hope I am not making some big time mistake?
Sounds like you need
$('#go1').live('click', function() {});
$.fn.live, as event handlers are only registered on initial dom creation, and you're repopulating the DOM and those aren't attached.
More info # http://docs.jquery.com/Events/live
If i'm reading that right you are adding the click handlers at the beginning. These only affect current buttons. You may just need to change that to a Live event.
$("#peopleResult_list").on('click','a', function(event){
//do you code here
});
on event work for current dom in your page and any dom loaded by ajax in the future