I'm using the animated collapse JS library here:
http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm
and i'm trying to use it for dynamic div's however it's not toggling. Any ideas?
<head>
<script type="text/javascript" src="includes/js/animatedcollapse.js"></script>
</head>
<body>
<?PHP
for ($i = 1; $i <= 5; $i++) { ?>
<script type="text/javascript">
animatedcollapse.addDiv('location-<?PHP echo $i; ?>', 'fade=1')
</script>
<div id="location-<?PHP echo $i; ?>">
CLOSE
TEST
</div>
TOGGLE
<?PHP } ?>
<script type="text/javascript">
animatedcollapse.ontoggle=function($, divobj, state){}
animatedcollapse.init()
</script>
I may be wrong, but it doesn't seem necessary to use PHP just to create an incrementing variable.
You could just write that same for loop in javascript, inside your script tags: I also think using jQuery's slideToggle might make this easier for you... Maybe something along these lines:
for (var i = 1, i <= 5, i++ ){
$(document).ready(function(){
$('divToBeToggled' + i).click(function(){
$('divToBeRevealed' + i).slideToggle('slow');
});
});
}
Just looking quickly at the link you supplied, doesn't this script depend on jQuery also being present? You don't seem to have that script tag in your head tag.
Related
I have the posts inside a while and post replays inside another while
I want to add a load more link or button for replays.
I have this codes but just first load more works:
<style> #myList li{ display:none;list-style: none;}</style>
<?php $conn=mysqli_connect("localhost","root","","dbace");
$psql="SELECT * FROM tbl_users_posts limit 20";
$qry=mysqli_query($conn,$psql);?>
<ul id="myList">
<?php while($fql=mysqli_fetch_assoc($qry)){
$pst=$fql['post'];
$pid=$fql['id'];
echo $pid." ".$pst;?><br>
<?php $rpql="SELECT * FROM re_pst WHERE subid='$pid'";
$qrep=mysqli_query($conn,$rpql);
while($qrw=mysqli_fetch_assoc($qrep)){
$remsg=$qrw['remsg'];?>
<li>
<?php echo $remsg;?><br>
<?php }?><br><br>
</li>
<div id="loadMore">load more</div>
<?php }?>
</ul>
and the jquery:
<script type="text/javascript" src="_js/jqmin.js"></script>
<script type="text/javascript">
$(document).ready(function () {
size_li = $("#myList li").size();
x=3;
$('#myList li:lt('+x+')').show();
$('#loadMore').click(function () {
x= (x+2 <= size_li) ? x+2 : size_li;
$('#myList li:lt('+x+')').show();
});
});
</script>
How can I fix that?
Thanks
Can I do it somehow by give number to posts and jquery command? some thing like this:
for ($i = 0; $i < X; $i++) {
Your problem is to you using id attribute for event. The value of id attribute must be unique. Instead of you can use class attribute.
The following code may be solution:
$('.loadMore').on('click', function(){
$(this).parent('li').show();
})
Can you try using "loadMore" button by class attribute with above code?
<div class="a">hello</div>
<div class="b">bye</div>
I have a one page website and I want a div to be loaded first and then the second one and... Can I do this just with html and css? Or it needs JavaScript or...
Just do it with Javascript:
Change your Body to <body onload="onloadFunction()">
Add style="display: none;" to your div Elements
Add following script:
<script language="javascript" type="text/javascript">
function onloadFunction(){
document.getElementsByClassName("a").style.display = "true";
document.getElementsByClassName("b").style.display = "true";
}
</script>
and change the order of the document. lines to which order you want to have it.
You can try this with something like.
$(document).ready(function() {
$(".b").delay(2000).fadeIn(500); //class b is on delay
});
Can't done with only HTML and CSS. Need to involve JavaScript or jQuery code too.
Yes you need javascript and I suggest jquery(javascript library).
More info at: http://www.w3schools.com/jquery/jquery_get_started.asp
And here is working example(just run with browser and click button):
<div class="a" style="display: none;">hello</div>
<div class="b" style="display: none;">bye</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.a').show();
setTimeout(function(){$('.b').show()}, 2000);
});
</script>
I try to use window.open but so far it doesn't work
<script type="text" language="javascript">
function win1(j){
window.open("ctry.php?j=" + j,"Window1","menubar=no,width=460,height=360,toolbar=no");
}
</script>
<?php
for($j = 1; $j <= 2; $j++){
?>
<a href="javascript:win1('<?php echo $j;?>')"
onMouseOver="self.status='Open A Window'; return true;"><b>Open Window</b></a>
<?php
}
?>
When I click on the link nothing happened and on the console i get this error:
Uncaught ReferenceError: win1 is not defined
Do you know what can i do?
Thanks
use this
<script type="text/javascript" language="javascript">
function win1(j){
window.open("ctry.php?j=" + j,"Window1","menubar=no,width=460,height=360,toolbar=no");
}
</script>
<?php
for($j = 1; $j <= 2; $j++){
?>
<b>Open Window</b>
<?php
}
?>
Replace <script type="text" language="javascript"> with <script type="text/javascript" language="javascript">
Are you putting this code inside body tag or inside head? Cause you cannot put html in head
Your JS action is to be on onclick action, not on href, try this elow code
<a href="#" onclick="win1('<?php echo $j;?>')"
onMouseOver="self.status='Open A Window'; return true;"><b>Open Window</b></a>
Well, I've created a code to include a PHP page in a box and not only the normal include ('');
This is my code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<script>
$(function() {
var count = 1;
$('#append').click(function() {
if (count < 2) {
$('#parent').append('<div id="first' + count + '">text</div>');
$('#first1').load('../image/index.php');
count++;
}
});
});
</script>
<a id="append">Add DIV 1</a>
<div id="parent">
</div>
</body>
</html>
Now, I've noticed I could "load" a page in html, but all the php and javascript code is "out".
How do I do to have the "real" page inside another.
The PHP code is not returned since it is executed on the server before you get the HTML back from it.
In order to just retrieve it as plain text you will need to change the file you are trying to retrieve.
As far as how to load a page inside another page, you can use iframes for that.
Try this:
<script>
$(function(){
var count = 1;
$('#append').click(function(){
if (count <2){
$('#parent').append('<div id="first'+count+'">text</div>');
$.get('http://test.com/image/index.php',function(data){
$('#first1').html(data);
});
count++;
}
});
});
</script>
I have created a while loop that selects random images from from my server and posts it. Now I want to add some jquery code and allow me to click on one of the images and run the slideUp() function in jQuery. Here is my problem. I can click on the first image produced in the while loop but when I click on the second image nothing happens. The slideUp() function does not work. I don't know what to do. Here is the code below.
<script src="http://code.jquery.com/jquery-latest.js"></script>
<?php
$num_dresses = dress_count ();
$i=0;
while ($i < 2){
?>
<style>
div:hover { border:2px solid #021a40; cursor:pointer;}
</style>
<script>
$("div").click(function () {
$(this).slideUp();
});
</script>
<?php
$rand_id = rand(1, $num_dresses);
$dress_feed_data = clothing_data($rand_id, 'file_name', 'user_defined_name', 'user_defined_place' , 'user_who_uploaded', 'match_1');
$new_file_name = $dress_feed_data['file_name'];
if (file_exists('fashion_images/' . $new_file_name)){
echo str_replace("|", " ", $dress_feed_data['user_defined_name']);
?>
<br>
<div>
<img src=" fashion_images/<?php echo $new_file_name;?> " width="50" height="50" />
<div>
<br><br>
<?php
echo str_replace("|", " ", $dress_feed_data['user_defined_place']);
?>
<br><br>
<?php
}
$i++;
}
?>
You are binding the click handler to the elements before the elemnts are inserted into DOM,
Probably when the first call is made no elements called div are there so the binding goes to void, then the first element gets inserted.
Now the binding for second element is made, now it gets attached to first one as it matches $('div') . So you got only forst one working.
The clean way is to take the click binding out of while loop, so that it happens only once, and call it on DOM ready event
<script>
$(document).ready(function(){
$("div").click(function(){
$(this).slideUp();
});
});
</script>
And if you want to make a live binding, which applies to all dynamically added images as well use delegation:
<script>
$(document).ready(function(){
$('body').on('click',"div",function(){
$(this).slideUp();
});
});
</script>
If you are posting the above images with html to a host/parent page, just add the above delegation logic to parent page, and post only the images.
Try this :
<style>
div:hover { margin:10px 0; border:2px solid #021a40; cursor:pointer;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$("div.randomImage").click(function() {
$(this).slideUp();
});
});
</script>
<?php
$num_dresses = dress_count();
$i=0;
while ($i < 2) {
?>
<?php
$rand_id = rand(1, $num_dresses);
$dress_feed_data = clothing_data($rand_id, 'file_name', 'user_defined_name', 'user_defined_place' , 'user_who_uploaded', 'match_1');
$new_file_name = $dress_feed_data['file_name'];
if (file_exists('fashion_images/' . $new_file_name)) {
echo str_replace("|", " ", $dress_feed_data['user_defined_name']);
?>
<div class="randomImage">
<img src="fashion_images/<?php echo $new_file_name;?>" width="50" height="50" />
</div>
<?php
echo str_replace("|", " ", $dress_feed_data['user_defined_place']);
}
$i++;
}
?>
Notes:
Stylesheet and script moved outside the php while loop. Repetition is unnecessary and undesired.
jQuery statement now inside a $(function(){...}) structure to ensure it runs when the ducument is ready, ie. after the served HTML has been interpreted by the browser to create DOM elements.
class="randomImage" added to the <div>
Second <div> changed to </div>
For readability of source and served page, the PHP and HTML are indented independently.
I've not tried to verify the PHP.