PHP - Iframe Not Refreshing In Firefox
Hello.
I'm using a php script to upload file. I've used an iframe inserted on the upload page that refreshes every second/3sec. to display percentage uploaded. forget percentage, lets take a simple example. Presently, my iframe displays last two digits of PHP time() function that change constantly. If you see the live example at: http://mintload.com/upload/upload-single.php The last two digits of time() function are shown and iframe is refreshed every 1 sec. But, the moment one clicks "Upload" button, the file starts uploading, but iframe no more refreshes & freezes. In IE7 it works fine. Why not in Firefox Latest Ver: 3.6 ? code for iframe: Code: (php) [Select] header("refresh:1; $_SERVER[PHP_SELF]"); echo substr(time(),-2,2); My point is, just as in IE, my iframe shouldnt freeze refreshing even if a file is being uploaded. Any code/functions? The problem is taking place in Firefox. Please help. Thank you. Similar TutorialsHello. I'm using a PHP/CGI Upload Script -tesUpload. U can see the uploader at http://www.mintload.com/upload/upload-single.php As you can see, the percentage doesnt reload (its an iframe). On Firefox, if u right click on frame (0%) and select "open frame in new tab" or show only frame, u see it movin' and refreshing. Basically the iframe /fileprog.php calculates the percentage uploaded and refreshes itself to get new percentage every second. The code for upload-single.php is : <?php require_once("upload_helper.php"); $sid = md5(uniqid(rand())); ?> <html> <head> <script language="javascript" type="text/javascript" src="upload.js"></script> <link rel="stylesheet" href="upload.css" type="text/css" media="screen" title="Upload" charset="utf-8" /> <script language="javascript"> function beginUpload(sid) { document.postform.submit(); var pb = document.getElementById("progress"); pb.parentNode.parentNode.style.display='block'; new ProgressTracker(sid,{ progressBar: pb, onFailu function(msg) { Element.hide(pb.parentNode); alert(msg); } }); } </script> </head> <body> <form target="_top" enctype="multipart/form-data" name="postform" action="/cgi-bin/upload.cgi?sid=<?php echo $sid; ?>&target=<?php echo normal_target('receive.php') ?>" method="post"> <div class="inputhead">File 1</div> <input type="file" size="50" name="file_1" /><br/> </form> <div id="progressbox" style="display: none;"><img src="http://www.remit2home.com/remittance/images/mmm_loading.gif" alt="uploading..."> Uploading now... <div class="progresscontainer"><div class="progressbar" id="progress"></div></div> </div> <iframe src="http://mintload.com/upload/fileprog.php?sid=<?php echo $sid; ?>" width=50 height=50 frameborder=0 border=0 allowtransparency="true" ></iframe> uploaded <!--img src="http://www.remit2home.com/remittance/images/mmm_loading.gif" alt="uploading..."--> <!--iframe for percentage--> <p align="right"><input type="image" src="http://mintload.com/images/btn_upload.png" onclick="beginUpload('<?php echo $sid ?>');" alt="Upload" ></p> </body> </html> fileprog.php is alright. I need the percentage in iframe to refresh even when embedded onto upload-single.php Please help Thank you. Here is the scenario: I have phpbb installed inside of an iframe and I have all of these features working .....in firefox only: Iframe re-sizes to fit content external links within the forum open in a new window traffic to my /forum directory is redirected (with a javascript window.location.replace) to open inside of the iframe Essentially phpbb works perfectly in firefox When I load it in either Chrome or IE: My site index will load fine (as will any site feature that is not within the iframe) When I attempt to load my forum or request anything within the iframe IE and Chrome show the page for less than one second then continuously load a 404 page within the frame This leads me to believe that it is a problem with my redirect...but I have no clue. Here is the PHP, hopefully somebody can help: Iframe re-size code (in iframefile.php): <script type="text/javascript"> /*********************************************** * IFrame SSI script II- &#169; Dynamic Drive DHTML code library (http://www.dynamicdrive.com) * Visit DynamicDrive.com for hundreds of original DHTML scripts * This notice must stay intact for legal use ***********************************************/ //Input the IDs of the IFRAMES you wish to dynamically resize to match its content height: //Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none: var iframeids=["myframe"] //Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended): var iframehide="yes" var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1] var FFextraHeight=parseFloat(getFFVersion)>=0.1? 150 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers function resizeCaller(){ var dyniframe=new Array() for (i=0; i<iframeids.length; i++){ if (document.getElementById) resizeIframe(iframeids[i]) //reveal iframe for lower end browsers? (see var above): if ((document.all || document.getElementById) && iframehide=="no"){ var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i]) tempobj.style.display="block" } } } function resizeIframe(frameid){ var currentfr=document.getElementById(frameid) if (currentfr && !window.opera){ currentfr.style.display="block" if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight; else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax currentfr.height = currentfr.Document.body.scrollHeight; if (currentfr.addEventListener) currentfr.addEventListener("load", readjustIframe, false) else if (currentfr.attachEvent){ currentfr.detachEvent("onload", readjustIframe) // Bug fix line currentfr.attachEvent("onload", readjustIframe) } } } function readjustIframe(loadevt) { var crossevt=(window.event)? event : loadevt var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement if (iframeroot) resizeIframe(iframeroot.id); } function loadintoIframe(iframeid, url){ if (document.getElementById) document.getElementById(iframeid).src=url } if (window.addEventListener) window.addEventListener("load", resizeCaller, false) else if (window.attachEvent) window.attachEvent("onload", resizeCaller) else window.onload=resizeCaller </script> _________________________________________________ ___ This is (part of) the javascript redirect (in iframefile.php) <script type="text/javascript"> var text = window.location.href; function delineate(str) { theleft = str.indexOf("=") + 1; theright = str.indexOf("&"); return(str.substring(theleft, str.length)); } url=delineate(text) function refreshFrame() { myframe.location.replace("http://www.mydomain/?var1='+window.location.href+'"); } </script> This is the other part of the above javascript redirect that is in the overall_header to redirect pages requested within the forum to target the iframe via the code above: <script type="text/javascript"> if (window == top) { var url='window.location.replace("/?var1='+window.location.href+'")'; eval(url); } </script> This is the necessary code i had to add in my home directory index.php for the above two codes to work: <? ob_start(); $vary = $_GET['var1']; $tee = $_GET['t']; if ( $vary == "" ) { // do nothing, no var } else { $gogogo = strtolower($vary); $healthy = array("http://mydomain/forum/", "http://www.mydomain/forum/"); $yummy = array("", ""); $newphrase = str_replace($healthy, $yummy, $gogogo); $finalcode = base64_encode($newphrase); $healthy = array("+", "="); $yummy = array("7PLUS7", "7EQUALS7"); $newphraseu = str_replace($healthy, $yummy, $finalcode); if ( $tee == "" ) { header("Location: http://www.mydomain/iframefile.php?var=$newphraseu"); } else { header("Location: http://www.mydomain/iframefile.php?var=$newphraseu&t=$tee"); } } ob_flush(); ?> ___________________________________ And finally this is the code for my actual iframe (in iframefile.php): <? $healthy = array("7PLUS7", "7EQUALS7"); $yummy = array("+", "="); $newphraseu = str_replace($healthy, $yummy, $vary); $finally = base64_decode($newphraseu); if ( $tee == "" ) { $thedone = $finally; } else { $thedone = "$finally&t=$tee"; } if ( $vary == "" ) { ?> <center><iframe onload="refreshFrame();" id="myframe" src="/forum" scrolling="no" marginwidth="0" frameborder="0" marginheight="0" vspace="0" hspace="0" style="overflow:invisible; width:100%; display:none"></iframe></center> <? } else { ?> <center><iframe onload="refreshFrame();" id="myframe" src="/forum/<? echo $thedone; ?>" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:invisible; width:100%; display:none"></iframe></center> <? } ?> Sorry for the long read. Again this all works perfect in firefox but with IE and Chrome the iframe keeps reloading a 404 page after showing the requested page briefly. Any and all help is appreciated! Thanks in advance hi i want a page to display 4 different pages within it but each of them have a auto refresh ability i dont know if this can be done in php as they woudl only refresh preferably when the users accept or decline the job but can set it to every 10 s if needed Hi all, I have a list of information that needs to be individually deleted from mysql after 3 months of being on the website. How would I go about this - can one make a php script run 24 hours a day or maybe just refresh at a certain time everyday to check each row (about 300 rows total) in a mysql db and delete as appropriate? Many thanks I have made a website that deals with the sales of different products. It handles the total sales of a specific product. One of the aspects of the website is that it can change the current sales data of the products. At the moment I can change the sales figures fine however I have to click the submit button once and then physically refresh the page for it to change the data in the table. Is there a way that I can automatically refresh the page once the submit button is pressed? I have tried using headers for example: Code: [Select] if (!empty($_POST['NSales'])) { header('location: currentpage.php'); } however this just constantly refreshes the page. Any help would be greatly appreciated Hi I made a simple chat script with pagination in MySQL (yes I know I should change to MySQLi) but just bare with me please My script is working fine when I post messages, but I have a problem.. Each time I refresh my page my previous message gets reposted again. Is there maybe a way I can fix this problem?
<html> <?php define('TIMEZONE', 'Africa/Harare'); date_default_timezone_set(TIMEZONE); // database connection info $conn = mysql_connect('****','******','*****') or trigger_error("SQL", E_USER_ERROR); $db = mysql_select_db('*****'',$conn) or trigger_error("SQL", E_USER_ERROR); // find out how many rows are in the table $sql = "SELECT COUNT(*) FROM StringyChat"; $result = mysql_query($sql, $conn) or trigger_error("SQL", E_USER_ERROR); $r = mysql_fetch_row($result); $numrows = $r[0]; // number of rows to show per page $rowsperpage = 20; // find out total pages $totalpages = ceil($numrows / $rowsperpage); // get the current page or set a default if (isset($_GET['currentpage']) && is_numeric($_GET['currentpage'])) { // cast var as int $currentpage = (int) $_GET['currentpage']; } else { // default page num $currentpage = 1; } // end if // if current page is greater than total pages... if ($currentpage > $totalpages) { // set current page to last page $currentpage = $totalpages; } // end if // if current page is less than first page... if ($currentpage < 1) { // set current page to first page $currentpage = 1; } // end if // the offset of the list, based on current page $offset = ($currentpage - 1) * $rowsperpage; // INSERT INTO DATABASE $ip = $_SERVER["REMOTE_ADDR"]; $name = $_SERVER["HTTP_X_MXIT_USERID_R"]; $msg = $_POST['message']; $time = date("U"); $mxitid = $_SERVER["HTTP_X_MXIT_USERID_R"]; if(!isset($mxitid, $name )) { $mxitid = "DEFAULT"; $name = "SYSOP"; } $sqli = "INSERT INTO StringyChat (StringyChat_ip, StringyChat_name, StringyChat_message, StringyChat_time, mxit_id) VALUES ('$ip', '$name', '$msg', '$time', '$mxitid')"; $result = mysql_query($sqli, $conn) or trigger_error("SQL", E_USER_ERROR); // get the info from the db $sql = "SELECT StringyChat_time, StringyChat_name, StringyChat_message FROM StringyChat ORDER BY id DESC LIMIT $offset, $rowsperpage"; $result = mysql_query($sql, $conn) or trigger_error("SQL", E_USER_ERROR); function filterBadWords($str) { $result1 = mysql_query("SELECT word FROM StringyChat_WordBan") or die(mysql_error()); $replacements = ":-x"; while($row = mysql_fetch_assoc($result1)) { $str = eregi_replace($row['word'], str_repeat(':-x', strlen($row['word'])), $str); } return $str; } // while there are rows to be fetched... while ($list = mysql_fetch_assoc($result)) //while (($pmsg = $list['StringyChat_message'] == $bwords) ? ":-x" : $list['StringyChat_message']) { // echo data //echo ($pmsg = ($list['StringyChat_message'] == $bwords) ? ":-x" : $list['StringyChat_message']) print '<span style="color:#828282">' . '(' . date( 'D H:i:s', $list['StringyChat_time'] ) . ') ' . '</span>' . '<b>' . $list['StringyChat_name'] . '</b>' . ' : ' . filterBadWords($list['StringyChat_message']) . '<br />'; } // end while /****** build the pagination links ******/ // range of num links to show $range = 3; // if not on page 1, don't show back links if ($currentpage > 1) { // show << link to go back to page 1 echo " <a href='{$_SERVER['PHP_SELF']}?currentpage=1'><<</a> "; // get previous page num $prevpage = $currentpage - 1; // show < link to go back to 1 page echo " <a href='{$_SERVER['PHP_SELF']}?currentpage=$prevpage'><</a> "; } // end if // loop to show links to range of pages around current page for ($x = ($currentpage - $range); $x < (($currentpage + $range) + 1); $x++) { // if it's a valid page number... if (($x > 0) && ($x <= $totalpages)) { // if we're on current page... if ($x == $currentpage) { // 'highlight' it but don't make a link echo " [<b>$x</b>] "; // if not current page... } else { // make it a link echo " <a href='{$_SERVER['PHP_SELF']}?currentpage=$x'>$x</a> "; } // end else } // end if } // end for // if not on last page, show forward and last page links if ($currentpage != $totalpages) { // get next page $nextpage = $currentpage + 1; // echo forward link for next page echo " <a href='{$_SERVER['PHP_SELF']}?currentpage=$nextpage'>></a> "; // echo forward link for lastpage echo " <a href='{$_SERVER['PHP_SELF']}?currentpage=$totalpages'>>></a> "; } // end if /****** end build pagination links ******/ ?><br> // FORM <body> <form name="StringyChat_form" method="POST" action="<? echo $_SERVER['REQUEST_URI']; ?>"> <br> <input type="hidden" name="name" class="StringyChatFrm" value="<?php $name ?>" size="20" > <br> <i>Type your Message here...</i>:<br> <textarea name="message" class="StringyChatFrm" cols="20" rows="4"></textarea> <br> <input name="StringyChat_submit" class="StringyChatFrm" type="submit" value="Post Message"> </form> </body> </html> Trying to create a simple login page (and my code is embarassingly disgraceful at this point). In simple terms, I have start_session on three pages. The first page asks for name, the second for password, the third welcomes user. The second page contains $name=$POST['name']; $_SESSION['name']= $name; When I access the page 2, the name is echoed with a greeting and request for password. But after a password submission (whether correct or incorrect) the $name disappears. I am at a loss for why it is not being refreshed or maintained in the session. Any ideas for me? Hello! My server hosting company has updated PHP from 4 to 5 version, and now the header function doesn't work very well anymore. It does load the new page everytime, like it should, but the data is not always refreshed. Not until I click "reload current page" from the browser. I'm using Firefox 3.6.3. Here's the code which worked just fine few days ago: Code: [Select] $url="thepage.php"; header("Location: ".$url); die(); I tried something like this, but that doesn't work either: Code: [Select] $url="thepage.php"; header("Refresh: 0; url=".$url); die(); This is really nasty problem... How can I fix it? Hi, In the following code I'm using a combo box to select a relay and activate it. The code works but if I refresh the page, the last selected relay is activated again. How can I reset the page to default to value '0' which has no relay control? TIA
<!DOCTYPE html> <html> <head> <title>Relay control</title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h2><center>Status y control de relés</center></h2> <?php $arrleds = array(); if ($_SERVER["REQUEST_METHOD"] == "POST") { $selected_val = $_POST['sel']; if ($selected_val == '1'){ $cmd = exec("sudo ./trigger.py b 0"); } elseif ($selected_val == '2'){ $cmd = exec("sudo ./trigger.py b 1"); } elseif ($selected_val == '3'){ $cmd = exec("sudo ./trigger.py b 2"); } .... else {} } ?> <table class="center"> <tr> <td></td> <td><h1>Activación de relé</h1> <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post"> <select name='sel' onchange='submit();'> <option value='0'>Sin activar</option> <!-- no action --> <option value='1'>Secadora 1</option> <option value='2'>Secadora 2</option> <option value='3'>Lavadora S</option> .... </select> </form> </td> <td></td> </tr> <tr> <td></td> <td><a href="index.php">Home</a> <td></td> </tr> </table> </body> </html>
Hi all. I've seen on facebook and on some other sites where content refreshes without complete page reloads. for example, right after posting a comment to a database, without any discernible page change, the comment appears somewhere on the page. Is it using php vars and some auto refresh function, (how does it, without reloading appear then?) I know that I am not very clear, but I need to know how to achieve this. If you like to help me, please look at the attachments. They depict the process which I dearly want to know of. Thank you for reading, and thanks in advance for trying to help. Thauwa. Sorry if this is in the incorrect section, but I suspect php activity here. Stop posting non-PHP questions in the PHP Coding Help section. We have many sub-forums, including both a JavaScript forum and one dedicated entirely to Ajax. This topic has been moved to Ajax Help. http://www.phpfreaks.com/forums/index.php?topic=327454.0 i have a form with two buttons, one is for submitting the form while button is for generating a random a code and placing it in a textfield. this works fine but the problem is anytime i click on the generate button, it refreshes the page thereby validating the form , which i don't want. How do i make it perform the function without refreshing the page.... I have an exercise for school that I have to work out. My teacher is letting us figure it out ourselves, but I've ran into some troubles: - We have to make 2 files: sescook1.php and sescook2.php. - We have to make a form for the user to fill out their name and favorite color (in sescook1.php). - We have to check the input (whether there is input or no). If there's isn't any input, we have to echo 'Please fill out __' (in sescook1.php) - We have to store the name in a session variable and the color in a cookievariable (in sescook1.php) - If both fields are filled in, we ave to show a link 'go to the next page' (where 'next page' is an URL to sescook2.php). - All info has to be shown in sescook2.php (Entered name: __, Entered color: ___) - You have a link 'Go back to previous page' (where 'previous page' is an URL to sescook1.php) My code: Quote <?php session_start(); function checkContent() { if($_POST["name"] == "") echo "Please enter your name"; elseif($_POST["favcolor"]) echo "Please enter your favorite color"; else echo "Go to <a href='http://localhost/webadv1011/PHPCookiesSessies/sescook2.php'>next page"; } ?> <form name="color" method="post" action="<?php echo $_SERVER['PHP_SELF'];?>" onsubmit="<?php checkContent(); ?>"> <p>Name: <input type="text" name="naam" /></p> <p>Favourite color: <input type="text" name="favcolor" /></p> <p><input type="submit" name="submit" value="send" /></p> </form> This is the code I got so far. My problem is that the page refreshes itself after it does the checkContent function. I'm also not sure how I save my name in a session variable and the color in a cookie variable (and pass them to the next page as well!). We haven't learned anything on cookies and sessions except our own trial and error and things I found on the internet. Unfortunately, I can't really find lots of useful info (most people refer to Ajax, but we can only use php), or I'm looking in the wrong place. Thanks for your help in advance! Here is my code if(isset($_POST['pass_btn'])) { $numchars = 8; $chars = explode(',','2,3,4,5,6,7,8,9,a,b,c,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,2,3,4,5,6,7,8,9,A,B,C,D,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,U,V,W,X,Y,Z,2,3,4,5,6,7,8,9'); $password=''; for($i=0; $i<$numchars;$i++) { $password.=$chars[rand(0,count($chars)-1)]; } } This is set up so when a person pressing the pass_btn, a password is provided. This works just fine. However, it refreshes the page and clears all other data that user may have entered. Suggestions? This topic has been moved to JavaScript Help. http://www.phpfreaks.com/forums/index.php?topic=330523.0 This topic has been moved to Ajax Help. http://www.phpfreaks.com/forums/index.php?topic=347117.0 Hi, I have a "user profile" page and it has a profile image upload form. I have it so that the old profile image is deleted, and the new image is uploaded and the new image is echoed out using the name of the new file from the database. The problem is, when I click submit to add the new image, the old image still stays there and the new image does not show up. Only when I manually click refresh on my browser does the new image show up. That is going to be bad for my users. Please if anyone can help, I'd greatly appreciate it. Below is the code I am using to delete the old image, and code to upload the image as well, when the photo upload form is used. Code: [Select] if(isset($_POST['photoUpload'])) { if(file_exists("images/".$currentUser.".jpg")){ unlink("images/".$currentUser.".jpg"); clearstatcache(); } //reads the name of the file the user submitted for uploading $image=$_FILES['image']['name']; //if it is not empty if ($image) { //get the original name of the file from the clients machine $filename = stripslashes($_FILES['image']['name']); //get the extension of the file in a lower case format $extension = getExtension($filename); $extension = strtolower($extension); //if it is not a known extension, we will suppose it is an error and will not upload the file, //otherwise we will do more tests if (($extension != "jpg") && ($extension != "jpeg") && ($extension != "png") && ($extension != "gif")) { //print error message echo '<h1>Unknown extension!</h1>'; $errors=1; } } //end if here //was else here //get the size of the image in bytes //$_FILES['image']['tmp_name'] is the temporary filename of the file //in which the uploaded file was stored on the server $size=filesize($_FILES['image']['tmp_name']); //compare the size with the maxim size we defined and print error if bigger if ($size > MAX_SIZE*1024) { echo '<h1>You have exceeded the size limit!</h1>'; $errors=1; } //we will give an unique name, for example the time in unix time format $image_name= $currentUser .'.'.$extension; //$image_name=time().'.'.$extension; //the new name will be containing the full path where will be stored (images folder) $newname=$image_name; //"images/". // Connects to your Database mysql_connect("host", "user", "pass") or die(mysql_error()); mysql_select_db("database") or die(mysql_error()) ; //we verify if the image has been uploaded, and print error instead $copied = copy($_FILES['image']['tmp_name'], "images/".$newname); // update the photo name in the database $result = mysql_query("UPDATE users SET profilePhoto='$newname' WHERE username='$currentUser'") or die(mysql_error()); if (!$copied) { echo '<h1>Copy unsuccessful!</h1>'; $errors=1; } else{ $dir="images/"; echo "<p>Profile Picture Change Successful!</p>"; echo "<img src='{$dir}{$newname}' alt='{$newname}' height='200' width='200' />"; echo "<p></p>"; } } Hello All,
New Year Greetings!!
I have integrated a script for TODO list in my website. Its working fine, but adding New task will be appear only after refreshing the page, whereas delete and save are happening as and when i click on them. I dont know where can i make it right.
Here is my code
Display
<div class="w-box-content todo-list"> <ul class="todoList"> <?php require "todo.class.php"; $query = mysql_query("SELECT * FROM `tz_todo` ORDER BY `position` ASC"); $todos = array(); while($row = mysql_fetch_assoc($query)){ $todos[] = new ToDo($row); } foreach($todos as $item){ echo $item; } ?> </ul> <a id="addButton" class="green-button" href="#">Add a ToDo</a> <div id="dialog-confirm" title="Delete TODO Item?">Are you sure you want to delete this TODO item?</div>I am including <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/themes/humanity/jquery-ui.css" type="text/css" media="all" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script type="text/javascript" src="script.js"></script>and in ajax.php require "connect.php"; require "todo.class.php"; $id = (int)$_GET['id']; try{ switch($_GET['action']) { case 'delete': ToDo::delete($id); break; case 'rearrange': ToDo::rearrange($_GET['positions']); break; case 'edit': ToDo::edit($id,$_GET['text']); break; case 'new': ToDo::createNew($_GET['text']); break; } } catch(Exception $e){ // echo $e->getMessage(); die("0"); } echo "1"; Here is my add driver button I am using a photo scrolling css animation technique
I'm not sure as far as CPU usage (on server)/(on client) and bandwith usage if loading one picture at a time to scroll versus having a line up "pre-exist" which even then, I would only have five images at a time but what if that is multiplied by 10000 users
Anyway, the current knowledge I have, I have a css animation property that takes in a photo and animates from 0% to 100% keyframe based on margins to make the scrolling happen
In the HTML section there is a list of photos, I would like there to be one line of code that is like a receiver that takes in or reads in arbitrary photo locations and puts that next to be scrolled without interrupting the main animation sequence which I'm not sure if there would be interruption. Anyway I don't know if that is possible. If someone can point out that this idea is obviously flawed then that would be great.
This isn't my ultimate solution, I have yet to see others, I'm just trying to minimize loading and lag
The other problem I have that is interesting is that I want the scrolling to stop when a person hovers over an image, and then resume... I have gotten this to work but only on one image... this is probably a matter of listing out all the key parts of the problem and seeing the solution but
When I had a list of photos that were scrolling together, I could get the whole animation to stop when hovering over the first photo and then take me somewhere (all the photos have working href's) but the animation would not stop if I hovered over any photos after the first. The animation would keep going
So I tried to animate each picture independently and that was just a cluster ****
Still working on that
If someone could point me in the right direction on the main problem of reading in photos live to work with css animation, that would be great.
Edited by greenace92, 03 December 2014 - 07:41 PM. |