|
PHP - Jquery, Animate, Scrolltop Not Always Working.
I am trying to make a simple vertical scrolling slideshow type page.
I have 1 div that is 100% width and height of the body and inside that 4 divs that are 100% w&h one below the other. In each "slide" div is an input button with an onclick call to a JavaScript function that uses jquery animate and scrolltop to move to the next div. Moving from the first to second is OK. It will not move from second to third. If I set each inner divs height to 90%, I can see the third div's next button. Clicking that moves the third slide to the top, though it is supposed to move the forth slide to the top. Not sure what I'm missing? I hope my attempt to paste the code on my note 3 works OK! Thanks for even looking! Nick <code> <html> <head> </head> <body style="margin:0px;padding:0px;"> <style> .a_slide { width:100%;height:100%;background-color:blue; } .b_slide { width:100%;height:100%;background-color:green; } .c_slide { width:100%;height:100%;background-color:blue; } .d_slide { width:100%;height:100%;background-color:green; } </style> <div style="width:100%;height:100%;overflow:hidden;margin-left:auto;margin-right:auto;" id="container" name="container" class="container"> <div class="a_slide" id="a_slide">a <input type="button" onclick="move(this.name);" name="b_slide" value="Next Page"> </div> <div class="b_slide" id="b_slide">b <input type="button" onclick="move(this.name);" name="c_slide" value="Next Page"> <input type="button" onclick="move(this.name);" name="a_slide" value="top"> </div> <div class="c_slide" id="c_slide">c <input type="button" onclick="move(this.name);" name="d_slide" value="Next Page"> <input type="button" onclick="move(this.name);" name="a_slide" value="top"> </div> <div class="d_slide" id="d_slide">d <input type="button" onclick="move(this.name);" name="a_slide" value="top"> </div> </div> <script type="text/javascript" src="http://ajax.googleap...n.js"></script> <script type="text/javascript"> function move(to_who) { $('.container').animate({scrollTop: $("."+to_who).offset().top},'slow'); }; </script> </body> </html></code> Similar TutorialsHi there, I am needing a bit of advice.
I am currently working on a new site, and I have my links at the top in a fixed header, and the rest of my content throughout the same page. http://sr.bluepigeon.com have a look it will make more sence then me describing it. Now i have worked a little bit with jQuery but do not know all the ins and outs of it, which is why I am a bit stuck. Now when I click one of the links on the page, I want the page to scroll down to that div and display it in the center of the screen. Now the code I am using (see below) obviously works on my laptops screen size but won't be as 'perfect' and centered on other sized screens. If i user the following code without each of the offsets then it will scroll to the correct div, but it will be displayed on the top of the page and not centered in the middle.
What I am wanting to know, is, is it possible to make it scroll to a div and then center the div in the middle of the screen? If not how could i get as close as possible to this?
$(document).ready(function(){
$("#blogl").click(function() {
$('html, body').animate({
scrollTop: $("#blog").offset().top
}, 2000);
});
$("#racel").click(function() {
$('html, body').animate({
scrollTop: $("#race").offset().top
}, 2000);
});
$("#aboutl").click(function() {
$('html, body').animate({
scrollTop: $("#about").offset().top +700
}, 2000);
});
$("#srl").click(function() {
$('html, body').animate({
scrollTop: $("#sr").offset().top +100
}, 2000);
});
$("#donatel").click(function() {
$('html, body').animate({
scrollTop: $("#donate").offset().top
}, 2000);
});
});
Thanks for your help again
Eric
This topic has been moved to JavaScript Help. http://www.phpfreaks.com/forums/index.php?topic=345904.0 I have a main file index.php into which iam loading myinnerpage.php. I have defined a variable inside index.php & checks it on myinnerpage.php, but when i load innerpage it shows restricted access, any idea why? following is my code. index.php Code: [Select] <?php define( '_JEXEC', true ); ?> <div class="mypage"> </div> <ul> <li><a href="#" onclick="loadpages('myiinerpage.php')">about page</a></li> </ul> <script type="text/javascript"> var $jq = jQuery.noConflict(); function loadpages(page) { $jq('.mypage').load('myfolder/'+page); } </script> and now in the myiinerpage.php which is in the folder myfolder i have the following code. Code: [Select] <?php defined('_JEXEC') or die('Restricted access'); ?> <div> my page elements </div> but when i click on the link it shows restricted access. I have loaded jquery too, any idea y this is happening? Hi,
what I'm tryng is to append a table row with associated jquery code...
I have a jquery code just like this
<script type="text/javascript">
jQuery(function($) {
var rowCtr = 0;
$('.addRow').click(function(){
$('#tableID > tbody:last').append('<tr name="rowEq['+rowCtr+']" id="rowEq['+rowCtr+']"><td>'+
'<select id="stype'+rowCtr+'" name="rowData['+rowCtr+'][equipment_type]">'+
'<option value="0"> -- </option>'+
'<option value="1"> Type 1 </option>'+
'<option value="2"> Type 2 </option>'+
'<option value="3"> Other </option>'+
'</select>'+
'<input id="other_type'+rowCtr+'" type="text" name="rowData['+rowCtr+'][other_type]">'+
);
$('#stype'+rowCtr).change(function() {
if(jQuery('#stype'+rowCtr).val() == '3')
{
jQuery('#other_type'+rowCtr).show();
}else{
jQuery('#other_type'+rowCtr).hide();
}
});
if(jQuery( '#stype'+rowCtr ).val() != '3')
{
jQuery('#other_type'+rowCtr).hide();
}
rowCtr++;
});
});
</script>
And html like this..
<input type='button' class='addRow' value="Add Row">
<form>
<table id="tableId">
<thead>
<tr>
<th> Type </th>
</tr>
</thead>
<tbody>
<tr>
<td>
dummy text..
</td>
</tr>
</tbody>
</table>
</form>
The appending is ok but the hidding/showing of "other_type" field is not working. It always hide "other_type" field even if I already selected the 'other' option.
tbl1.png 3.38KB
0 downloads
This topic has been moved to Other. http://www.phpfreaks.com/forums/index.php?topic=309813.0 I want to create an animation using an image that refreshes every hour hosted at this url: http://www.bungie.net/stats/reach/nightmap.ashx What is the best way to store the images and then animate(loop) the 24 most recent images? Should I use a mysql database to store it or something else? What are your thoughts? Thanks Hi,
I have the following code which gives a fading out effect when clicking on links. I need to be able to disable it for anchor links so it is disabled when using # as the link.
Any ideas ?
/*
* Function to animate leaving a page
*/
$.fn.leavePage = function() {
this.click(function(event){
// Don't go to the next page yet.
event.preventDefault();
linkLocation = this.href;
// Fade out this page first.
$('body').fadeOut(400, function(){
// Then go to the next page.
window.location = linkLocation;
});
});
};
Thanks,
Scott.
i dont understand what is wrong plz help me.
here is code
$name = "img/".rand(1,9999999).".png";
$myFile = $name;
$fh = fopen($myFile, 'w') or die("can't open file");
$stringData = $html;
fwrite($fh, $stringData);
fclose($fh);
$file=$name;
$fst=file_get_contents($file);
$im=imagecreatefromstring($fst);
imagefilter($im, IMG_FILTER_GRAYSCALE);
imagefilter($im, IMG_FILTER_NEGATE);
//Convert to Grey Scale
for($i=0;$i<123;$i++){
for($j=0;$j<50;$j++){
$px=imagecolorat($im,$i,$j);
if($px<0x303030){
imagesetpixel($im,$i,$j,0);
}else{
imagesetpixel($im,$i,$j,0xffffff);
}
}
}
$database = unserialize(@file_get_contents("db.txt"));
if($database === false) $database = array();
// modify the database if needed
if($_SERVER['REQUEST_METHOD'] == 'POST'){
if($_POST['submit'] == 'Add')
$database[$_POST['ident']] = substr($_POST['letter'], 0, 1);
if($_POST['submit'] == 'Del')
unset($database[$_POST['ident']]);
if($fh = @fopen('db111.txt', 'w+')){
fwrite($fh, serialize($database));
fclose($fh);
}
}else{
$newimage = true;
}
$width = 130;
$height = 40;
$captcha_gridstart =1;
$captcha_gridspace =2;
$letters = findletters($im, $width, $height, $captcha_gridstart, $captcha_gridspace);
$count = count($letters);
$cellw = ($count > 0) ? intval(100 / $count) : 0;
//dispeckle the image and GET co-ordinates of the characters of captcha image and return them.
function findletters($image, $width, $height, $gridstart, $gridspace){
$offsets = array(); $o = 0;
$atstartx = true;
for($x = 0; $x < $width; $x++){
$blankx = true;
for($y = 0; $y < $height; $y++){
if(imagecolorat($image, $x, $y) == 0){
$blankx = false;
break;
}
}
if(!$blankx && $atstartx){
$offsets[$o]['startx'] = $x;
$atstartx = !$atstartx;
}else if($blankx && !$atstartx){
$offsets[$o]['endx'] = $x;
$atstartx = !$atstartx;
$o++;
}
}
$count = $o;
for($o = 0; $o < $count; $o++){
for($y = 0; $y < $height; $y++){
$blanky = true;
for($x = $offsets[$o]['startx']; $x < $offsets[$o]['endx']; $x++){
if(imagecolorat($image, $x, $y) == 0){
$blanky = false;
break;
}
}
if(!$blanky){
$offsets[$o]['starty'] = $y;
break;
}
}
for($y = $height-1; $y > $offsets[$o]['starty']; $y--){
$blanky = true;
for($x = $offsets[$o]['startx']; $x < $offsets[$o]['endx']; $x++){
if(imagecolorat($image, $x, $y) == 0){
$blanky = false;
break;
}
}
if(!$blanky){
$offsets[$o]['endy'] = $y;
break;
}
}
}
for($o = 0; $o < $count; $o++){
$offsets[$o]['ident'] = "";
for($x = $offsets[$o]['startx'] + $gridstart; $x < $offsets[$o]['endx']; $x += $gridspace){
for($y = $offsets[$o]['starty'] + $gridstart; $y < $offsets[$o]['endy']; $y += $gridspace){
$offsets[$o]['ident'] .= ((imagecolorat($image, $x, $y) == 0) ? "0" : "1");
#echo $offsets[$o]['ident'].'<br>';
}
}
}
return $offsets;
}
$a="";
foreach($letters as $letter){
$asciiletter = $database[$letter['ident']];
if(!empty($asciiletter)) {
$a.=$asciiletter;
}
}
http://paste.ee/p/OhiWv
The above is a link to a readable version of my code. The XMLHTTPREQUEST worked, and the array was pulled down. Was able to print out the undecoded/unparsed array. However, immediately afterwards, all code stops working.
<script>
var xhr;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 8 and older
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("POST", "PHPLibrary/selectMemberResults.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send();
xhr.onreadystatechange = display_data;
var $phparray
function display_data() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
//alert(xhr.responseText);
$phparray = xhr.responseText;
document.getElementById("suggestion").innerHTML = $phparray;
//
//
//......................................................?
// The above line of code is the last thing to print or
// to do anything that returns to the browser....
//.......................................................?
// All lines below do nothing............................?
//
} else {
//alert('There was a problem with the request.');
}
}
}
document.write("Length of phparray Array :" + $phparray.length + "<");
var output = JSON.parse($phparray, function (key,val) {
if ( typeof val === 'string' ) {
// regular expression to remove extra white space
if ( val.indexOf('\n') !== -1 ) {
var re = /\s\s+/g;
return val.replace(re, ' ');
} else {
return val;
}
}
return val;
} );
document.write("Length of Array :" + $output.length + "<");
for (var i=0; i < $output.length; i++)
{
document.getElementById("suggestion").innerHTML = $output[i].MEMBER_NAME;
}
</script>
I need bit of help, so I am looking into a plugin created for newsletter where default is it shows ad but it has option to remove ads by checking the check box. Default is to send ads in newsletter but if you don't want to send ads through newsletter then check the box. The problem is, it seems like checkbox selected is not being picked up. Some help would be appreciated. The custom field in wp:
'label' => 'Hide newsletter ads',
'name' => 'hide_ads',
'type' => 'checkbox',
'instructions' => 'Checking the checkbox will remove ads',
'required' => 0,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'choices' => array(
'Hide newsletter ads' => 'Hide newsletter ads',
),
'allow_custom' => 0,
'default_value' => array(
),
'layout' => 'block',
'toggle' => 0,
'return_format' => 'value',
'save_custom' => 0,
),
This is the php code for it:
<!doctype html>
<html lang="en-GB">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="x-apple-disable-message-reformatting">
<title><?php the_title(); ?></title>
<style>
<?php require ABSPATH . 'path/newsletter.css'; ?>
</style>
<!--[if mso]>
<style type="text/css">
.outlook-fallback-font {
font-family: 'Lucida Bright', 'Cambria', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
</style>
<![endif]-->
</head>
<?php
$hide_newsletter_ads = get_field('hide_ads');
echo $hide_newsletter_ads;
?>
<body itemscope itemtype="http://schema.org/EmailMessage">
<div class="wrap">
<?php
if (!$hide_newsletter_ads) {
include ABSPATH . 'path/ad-banner.php';
}
?>
<div class="header">
<a href="<?php bloginfo( 'url' ); ?>">
<img src="<?php echo get_home_url().'logo.png' ?>" alt="News"
/>
</a>
</div>
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
?>
<?php if ( get_field( 'newsletter_summary' ) ) { ?>
<div class="newsletter-summary"><?php the_field( 'newsletter_summary' ); ?></div>
<?php } ?>
<?php if ( have_rows( 'newsletter_content' ) ) : ?>
<?php
// Loop through the ACF blocks
$count = 0;
while ( have_rows( 'newsletter_content' ) ) :
the_row();
if ( get_row_layout() === 'story' ) :
?>
<?php if ( 0 === $count ) { ?>
<span class="date outlook-fallback-font"><?php the_time( 'd M Y' ); ?></span>
<?php } ?>
<?php if ( get_sub_field( 'story_heading' ) ) : ?>
<h1><?php the_sub_field( 'story_heading' ); ?></h1>
<?php endif; ?>
<div class="content">
<?php the_sub_field( 'story_content' ); ?>
</div>
<?php
endif;
if ( 'post_list' === get_row_layout() ) :
?>
<?php
$posts = get_sub_field( 'post_list' );
if ( $posts ) :
?>
</div>
<div class="story-list">
<h2><span class="wrap"><?php the_sub_field( 'post_list_heading' ); ?></span></h2>
<div class="wrap-table">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<?php
// Output story cards
foreach ( $posts as $i => $post ) {
if ( 0 === $i % 2 ) {
echo '<tr>';
}
$class = ( 0 === $i % 2 ) ? 'odd' : 'even';
$image_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( 640, 345 ) );
$image_srcset = wp_get_attachment_image_srcset( get_post_thumbnail_id( $post->ID ) );
echo sprintf(
'<td class="story-cell %4$s" valign="top">
<a href="%1$s" class="story-card outlook-fallback-font">
<img src="%3$s" alt="" height="120" style="height: 150px; object-fit: cover;" />
<span>%2$s</span>
</a>
</td>',
esc_url( get_permalink( $post->ID ) . '?utm_source=newsletter&utm_medium=email&utm_campaign=newsletter' ), // permalink
esc_html( get_the_title( $post->ID ) ), // title
// esc_attr( $image_src[0] ), // image - src
esc_attr( $image_src[0] ), // image - src
esc_attr( $class ) // class
);
if ( 0 !== $i % 2 || count( $posts ) === ( $i + 1 ) ) {
echo '</tr>';
}
}
?>
</table>
</div>
</div>
<div class="wrap">
<?php
endif;
endif;
if (!$hide_newsletter_ads) {
(0 === $count) {
include ABSPATH . 'path/mpu-1.php';
}
if (1 === $count) {
include ABSPATH . 'path/mpu-2.php';
}
}
$count++;
endwhile;
endif;
?>
<div class="footer">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left">
© <?php echo esc_html( date( 'Y' ) ); ?>
</td>
<td class="footer-link">
<a href="<?php echo get_permalink( get_page_by_path( 'privacy-policy' ) ); ?>">Privacy Policy</a> ·
<a href="%unsubscribe_url%">Unsubscribe</a>
</td>
</tr>
</table>
</div>
</div>
<?php
endwhile;
endif;
?>
When I echo the POST, it echoes the correct value. The MySQL portion seems to just ignore it all together. I've tried changing the dropdown option to just a text field, same thing occurred. I have text fields right above this particular one that update just fine with the SAME exactly scripting. if POST, update query, done. Works. This one for some reason will not. MySQL portion: if ($_POST['bUpdate']){ mysql_query("UPDATE `Patients` SET `b` = '$_POST[bUpdate]' WHERE `id` = '".$_GET['id']."'"); } echo $_POST['bUpdate']; Form Portion: Code: [Select] <tr onmouseover="color(this, '#baecff');" onmouseout="uncolor(this);"> <td width="310" colspan="2" align="center"><span class="fontoptions">Postcard Status </span><br /> <? if ($data['b'] == 1){ echo '<select name="bUpdate"><option value="1" selected>Yes</option><option value="0">No</option></select>'; } else { echo '<select name="bUpdate"><option value="1">Yes</option><option value="0" selected>No</option></select>'; } ?> </td> </tr> I'm trying to turn this while loop into a for loop and am unable to get my result set to display properly in the for loop. The while works fine I just want to be able to have more control over which information is shown in my table as I loop and was wanting to use a for loop that way I can take advantage of the counter variable while i"m displaying my information. Any help would be appreciated. while ($row = mysql_fetch_assoc($data_result_set)) { echo "<td>".$row["product_id"]."</td>"; echo "<td>".$row["city"]."</td>"; echo "<td>".$row["quantity"]."</td>"; } *** I'm wanting it to look like something like this but can't figure out how to properly work in which row to display with the $i variable. $count=mysql_num_rows($data_result_set); for($i = 0; $i <= $count; $i++){ echo "<td>".mysql_fetch_assoc[$i]["product_id"]."</td>"; echo "<td>".mysql_fetch_assoc[$i]["city"]."</td>"; echo "<td>".mysql_fetch_assoc[$i]["quantity"]."</td>"; } I know the syntax for the for loop is totally off with the method mysql_fetch_assoc just dropped in there like a jerk but I'm just kinda pseudoing it out. Any help would be appreciated. Thanks in advance. Hi, I have the following file structure /.htaccess /index.php /displaypage.php All files are on root. I have following written in .htaccess file Options FollowSymLinks RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^([a-z0-9-]+)$ displaypage.php?page=$1 [NC,L] I have following written in displaypage.php echo $_GET["page"]; Now when I run http://localhost/ then it shows index.php page which is correct. If I run http://localhost/something then it shows a blank page. Previously it used to display that "page" variable on screen. mod_rewrite is enabled and I am using Windows with XAMPP. What am I doing wrong? Thanks I keep saying I'm going to have to learn javascript and then the library jQuery but find myself learning Swift now instead.
Short one today. I want these two functions to occur back to back. Second function only begins after the first function is complete.
$(function() {
$('.tlt').textillate();
})
$(function() {
$('.tlt1').textillate();
})
If you can please help me with this not only in just code to make that happen but also an explanation of what you did I sure would appreciate it. I've read all morning on promises etc. but have yet to be successful in implementing this.
As you can tell I'm using the plug-in textillate to fade text out one letter at a time. Works great! But I have multiple paragraphs I'm wanting to apply this too so I can't make the div class .tlt since I then lose all paragraphs since it's strips it into spans. That would be ideal of course but I think I forced into making different classes for each paragraph. This will become problematic in the future though since the content is generated dynamically and I will have no idea how many paragraphs that dynamic content will contain. So if there was a way to keep my <p> and </p> that would be even better.
Thanks!
Alright guys, I have a bit of a problem here. I am deleting records using isset($_POST) on the current page but when it submits the records i deleted are still visible. I was thinking of echoing some jquery/ajax to re-load the div that displays the records. Has anyone ever done this before? I dont want the entire page to re-load just that specific area. Hi I am in the process of teaching myself web development, coming from a vb and mssql background. I am building a small page that will display my film library, I just want something quick and simple that gets things working. I have three img tags on my page that display the film posters. The current film and the one previous and next. What I would like is a left and a right arrow that just scroll through the library. I am thinking I need to read the sub folder of D:\movies and story the full path name into an array, and then when the user presses a arrow it moves forward or back. Everything is local and I am unsure about how to handle the event of the left/arrow being pressed. Does PHP handle that kind of event or would Jquery be more suitable or something else completely?? thanks for any pointers. Hi All (Again) I am looking to pick up variables in jquery from a string created: function search_by() { var search_term = $('#search_for', $(this).attr('value')); alert(search_term); } I cant seem to get the value i am trying to into a "var". This is the code on the page i am using a onClick="search_by();" i.e: <a class="show_cats" search_cat="PDAs & Accessories" search_for="fire" onclick="search_by();" href="#"> I am trying to get the value inside the "search_for" field. Any ideas???? Hey, I have a foreach loop displaying some data from my table, what i need to do is run a Jquery each function on the repeated element so it fadesIn each element one at a time. I am guessing i need to set somesort of interval for this to work. I have been messing with it for a good hour or so now and i cant seem to get it working. Has anyone done this before or seen it done else were? Im wondering if i should use jQuery or Php. and how about i would go about doing this. Code: [Select] <?php print "<table border=\"0\" cellpadding=\"0\" width=\"100%\" height=\"100\"cellspacing=\"0\" style=\"border-collapse:collapse\"bordercolor=\"grey\" bgcolor=\"white\" valign=\"top\"> <td align=\"left\" width=\"100%\" onclick=\"I3.location.href='getuserdetail.php?prop=$ownerid'\"><b>Property Name</b></td><td><b>Tenant</b></td><td><b>Property Status</b></td><td>Rent Amount</td>"; $connect = mysql_connect("localhost","root",""); mysql_select_db("magic"); $query = "SELECT * FROM props WHERE ownerid = '$ownerid' ORDER BY name ASC "; $result = mysql_query($query); while($row = mysql_fetch_assoc($result)) { $propertyid = $row['propid']; $propertyname = $row['name']; $propertydesc = $row['description']; $propertycity = $row['city']; $propertystate = $row['state']; $propertyzip = $row['zip']; $active = $row['active']; $lease = $row['lease']; $leaseamt = $row['leaseamt']; if($active == "1"){ $propertystatus = "Active"; } else { $propertystatys = "Unknown"; } print"<tr onMouseOver=\"this.bgColor = '#CEE3F6'\" onMouseOut =\"this.bgColor = '#FFFFFF'\"> <td align=\"left\" width=\"25%\" onclick=\"window.open('viewpropdetail.php?prop=$propertyid','mywindow','width=1200,height=600,scrollbars=1')\">$propertyname</td><td>$ownerfirstname $ownerlastname</td><td>$propertystatus</td><td>$$leaseamt</td> "; } print"</td></table>"; ?> Basically i have a link under that is add property. it pops up a box. with a form you fill it out, and it inserts the record into database. What I'm trying to do. is get it to "Refresh" the property list ( ex. code above). so it shows the new property in the table. i have never used jQuery. but was wondering if i could do that with php. Is there a way to say if records are changed.. update? This topic has been moved to Ajax Help. http://www.phpfreaks.com/forums/index.php?topic=316223.0 |
|||||||