Can you read in an image from a file into html without refreshing a webpage?

[greenace92]

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 December 4, 2014 by greenace92

[hansford]

The page load time is per user, the size (in kb, mb) of the images loading on the page, and the individual users connection speed (download). So, forget about multiplying across many users. That would only have a substantial impact if the server was overloaded or the page requires heavy script processing time - which means you have other problems. Anyways, you can preload images in Javascript or jQuery to have smooth scrolling of many images without problems.

 

WOW Slider is very popular. Click on the carousel demo and then move the mouse over it. The animation will stop until you mouseout and then continue.

 

http://wowslider.com/best-jquery-slider-crystal-linear-demo.html

Edited December 4, 2014 by hansford

[greenace92]

That's not what I am looking for, I looked at their demo 

 

I'm somewhat trying to avoidu sing Javascript / jQuery, I almost have the effect that I want with CSS animation 

 

I don't have anything against those two (languages? or one is a language the other is a library?)

 

I'm pressed for time really. The content has to be variable and these have different factors that determine the importance of content loaded and shown 

[greenace92]

I just don't get it, I mean I believe I know it is possible 

 

The HTML section is fixed isn't it? Once it is loaded? So how can you change what is going to be read by the CSS animation which even that may already be fixed after the page has loaded, it's just a matter of "executing" the animation. 

 

Although I thought about using smaller webpages within the main page and refresh those small pages... or ajax/aspx.net I thought I read into this before and those keywords came to mind. 

 

Perhaps I will have to go with Javascript and jQuery and perhaps it is not that difficult. Just one thing at a time. 

 

I still have dumb problems with resizing, I have to design for two different screens (landscape and portrait) just because of how the information is presented, size is a factor. 

 

not related but I can use @media screen but I think I would rather just redirect with a basic test of the screen resolution / orientation which the orientation part is not a sure thing either because I would rather have the items rotate than resize, or resize and rotate. 

Edited December 4, 2014 by greenace92

[greenace92]

I see this code here which seems applicable but I don't think it will work, you can switch in and out of php and html which is the premise of what I want 
 
Or at least, vary a line of HTML code based on php output 
 
But even with that being said, the CSS reads from a fixed line once right? Maybe Jquery / Javascript is the way to go... 
 

<?php 
if ()){
?>
html
<?php
} else {
? >
html
<?php 
}
?>

Edited December 4, 2014 by greenace92

[Psycho]

I don't really understand what you are trying to accomplish. But, you cannot have dynamic content with only HTML & CSS. PHP is only dynamic on the server. In other words, PHP generates the content (which can be variable) and then send the whole thing to the browser. If you want to have content be dynamic after the page has been received from the server, you will want to use JavaScript

Edited December 4, 2014 by Psycho

[greenace92]

Hello Psycho,

Thank you for your interest.

 

This is the website right now, I didn't want to make it public yet because it is nowhere near complete and aside from that my concern was crawling but I figure that's okay, once I complete it I will start to advertise it and then the searches from there on will bring my rank up. That's a thought anyway, based on what ? 

 

And besides, adding a .htaccess caused a 500 Internal Server Error... not sure what happened, it worked as far as logging me in but then that happened and when I deleted the .htaccess file, the 500 problem went away. 

 

http://www.dn2d8.com

 

The problem we're discussing is having photos scroll with variable number of photos, and each one has a unique linking address to a profile. There is also another feature involving mouse hover but I won't discuss that. 

 

What I'm showing you isn't that valuable so I'm not that concerned. These aren't the key aspects of the site that separate it from everything else that currently exist. When I do have it complete, it will be beautiful. Or at least a nice addition to my "resume" as a non-degree, software developer. 

 

Anyway, this was my initial response to you but when I was pulling up the YouTube video link, my computer froze. Upgrading to Linux Mint 17 was a bad idea it turns out, 15 was great. But those distros don't exist anymore on the Linux website. 

 

This is pretty uhh... revealing and kills my professional image if I even have one but it is the truth and what is on my mind, makes me "unique" or a nut case 

 

http://www.dn2d8.com/rambling.txt

 

it isn't formatted, eg. line breaks and what not so it will be miserable to read but it's probably best that I don't even post it (why are you?) 

 

My mind is spent right now, you reach that point of exhaustion where you can't really be productive but you are awake 

 

The website is a horrid mess right now, slide it into the left or right of your screen and see it really fall apart. I'm aware of scaling and responsive web design and such, I haven't gotten there yet and the format of the site / what it is supposed to do... it's interesting how I will handle mobile devices. I have to redesign it differently for mobile devices but I'm going to get everything working for computers first then after that, once I know the exact pieces and specific pages / functions, it should be easy to design an optimal web version. 

Edited December 4, 2014 by greenace92

[greenace92]

I've been having such weird problems lately

 

For instance, I'm using Chromium to view / write this post and when I click on the links I have provided, I get a "404" error 

But when I look at it through my windows phone or in a firefox browser on this same computer, the site works... what the hell is that about? 

 

"Have you cleared your cookies" 

 

Common question I've been asked 

 

Also I can't login to my server through Firefox, but I can through Chromium... I don't know... 

[greenace92]

Yeah I have an acknowledgement page for this website for the "duds" which will be deleted as users are created, eventually the 90 duds will be gone and only real people will remain. 

 

It's funny how you can diminish or "boil down", what is the word... a woman's beauty to a mere digit. 

That's what I did when I was downloading these dud profile photos, I just searched through countless photos, picked the "good ones" and then applied a digit to them. That's messed up in some way... some random person's face... amounts to a digit, a photo being accessed by php and shown by html... that has to be profound in some way 

[Alex_]

With just PHP alone you probably won't be able to pull it off, if I got your question right. You want to add an image to the rendered HTML Template using only HTML and PHP right?

 

If so, I don't see how that would work. PHP isn't an event-driven language, and it's blocking. It'll render the template in your given if-else statement snippet above, and then it will consider itself done, and won't continue executing any more php-code.

 

Maybe you can find luck in CSS, but that I doubt as well. I say as the first replier did, go with Javascript. It's easy and fast.

[greenace92]

The if else wasn't really related besides saying that it does what I want which is to have php mixed with html. My thought was that the php can read in a file and "re-fresh" the html list which would be read by the css code. But I think the main thing that is not going to work is the CSS execution which starts only once when the page is loaded, and the data is already known... so it may be that I have to also indulge myself in some javascript (and jQuery?)

Thank you for your response 

[Alex_]

Javascript is primarily used for that specific purpose, making a website dynamic/'alive', rather than a completely static 'dead' website.

 

You could fairly easily implement a form of "timer" that changes the image every X seconds to a random image in any given list with just a few lines of code. Don't have to use jQuery, but it does make it easier. Not only to read, but also to write.

[greenace92]

"...changes the image..." I don't like the sound of that, it must scroll 

 

So Javascript it is, though I have to see what the difference is between that and jQuery, funny that I don't know as jQuery is actually used on the website, I remember linking the latest jQuery library 

 

one thing at a time, right now I have to figure out how to take in data in a form and store it / apply a unique increment identifier. 

 

Thank you for your time (it's probably meaningless to keep saying thank you) but I realize that my stuff is a hell of a mess, especially the stuff I say but... that's me you know... we're all unique in some way. Courtesy, professionalism... not doing so hot 

[QuickOldCar]

Your site has an issue loading when is www

 

Not working

http://www.dn2d8.com/

 

Working

http://dn2d8.com/

 

At your domain name registrar, you can create a new cname www and point to your servers ip

 

You can edit your htaccess file and redirect them to non www (providing mod_rewrite is enabled on the server)

RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
RewriteRule ^(.*)$ http://%1/$1 [R=301,L]

[greenace92]

Hi thank you for pointing this out,

What is that? mod_rewrite? I can Google search but anyway

 

I don't immediately know exactly what cname is, i think alias? but 

 

When I wrote the virtualhost entries I specified www/dn2d8 but that must not be the same thing, I'll look into it 

Thanks again 

Edited December 4, 2014 by greenace92

[CroNiX]

Just to clarify... jQuery IS javascript. It's a javascript framework that makes code easier to write (less code needed, easier syntax) and is also cross-browser compatible and fixes missing functions for each browser. Not all browsers implement js exactly the same, so jQuery fixes that so it will work the same in all browsers so you don't have to do things like:

if (browser is internet explorer) {
  //do it this way
} elseif (browser is firefox) {
  //do it that way
} elseif (browser is safari) {
  //some other hack
}

javascript is the only way to manipulate a page once it's sent to the browser by your php script (or anything else...pure HTML, etc)

[greenace92]

Okay thanks a lot CroNiX

 

Can't wait to get started again and pound out some code 

[gizmola]

Hey greenace,

 

I saw you got some great advice already.  

 

It would really help you in getting answers if you were to try and boil down your problems concisely.  You provide a lot of detail and superfluous info that has nothing to do with your problems at hand. 

 

Try to make a mockup or other visual representation, or provide something as a point in reference if you can.  It would really help.

 

Javascript is a complicated language with huge differences from php, and the DOM and cross browser details make things exceedingly confusing in comparison.

 

With that said, I agree that the fastest way to get solutions to what you're trying to do visually is to use jQuery and one of the many compatible classes out there that will handle the animations you originally wanted.

 

There are probably hundreds of different slideshow libraries out there.  

 

Trying to do a pure css slideshow is still exceedingly difficult and limited, even with css3, which of course means it will not work in older browsers.  This article shows that it's possible, but there's a lot to it:  http://www.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/

 

As to your original question, already answered:

 

For dynamic loading of content -- when a page is loaded, the connection to the server is ended.  Each individual component of that page will be loaded separately by the browser once it has gotten the html, however, eventually when all the components (html, javascript, css, images, flash etc) have been fetched by the browser, everything is completely client-side in the user's browser.  

 

The only options at that point are javascript or object embed techs like flash, which are again running on the user's computer in their browser.

 

The way to go beyond the basic HTTP request/response architecture involves using javascript to make dynamic requests (Ajax or the newer web sockets).

 

So at this point, you really have to get into javascript to get a rich multimedia experience with dynamic updates to content.  

 

I don't really know from your description whether or not you even need dynamic updates to the DOM based on your original objective.  You can generate a list of 'n' images randomly for each page view and provide enough so that your slideshow can work, and of course that would all be pre-determined when the page was originally server side in your php code.

[greenace92]

Okay thank you for your thorough response 

 

Superfluous yes that is the right word 

 

Yes ideally I want the dynamic experience, static is boring although the problem of the eyes hurting is an issue 

 

I can be completely open but you should understand that in a way my life depends on the success of this website so I am trying to keep the "good stuff" to myself until I release it. But regardless, I don't know how I could claim ownership without trademarking... anyway 

 

If it is all irrelevant I will gladly spell out every single detail that I am trying to achieve. I have drawn it out on paper and can draw a flow chart of how everything works together but I have to learn the specific syntax and language that will do what I want. 

 

It's bad to say that your life depends on something, it would be nice to say "I love doing this stuff, I don't care about money." but I also want to be an owner of a company (superfluous) 

 

Well... as I had stated the point of this website mainly aside from high traffic and income through revenue is a piece of credential to add to myself as a freelance web designer. 

 

So this is the selling point of dn2d8

 

There will not be any fake profiles theoretically because every user has to upload an 8 second video from their device in order to create an account. This is not a file upload, this is a direct from their camera which will be done with HTML5 as far as I know.

 

The profiles, when hovered over, that video will pop up. This is significantly better than static images because those images can be pulled from the web and they don't exactly capture a person's being, their animate... etc...

 

On top of this, a person is allowed only 3 pictures, obvious reason being to save memory but if they want more pictures for an additional $0.98 or something stupid like that they can add another picture. 

 

There is another key aspect, the quality points. A person can only give another person 1 point every day. So you can't just keep hitting the up arrow and give them thousands of points... similar to the photos, a person can buy a point for $0.20.

 

What are the points for? They are part of the display process, there will be either multiple streams of profiles and only those that have thousands of quality points can be seen more than once eg. in a loop 

 

The chillspot section is also a great thing, I haven't fully designed the multimedia cases but they will support audio files, links, text, photos, video files etc... with different layouts and these will also be fed into a scrolling thing which will piece the parts together almost like Tetris. 

These windows will have live connection status on them which will show how many people are currently viewing the thread. There is a "trending" section to the right of the message box which will have hierarchy by number of active users.

 

The lifespan of any thread is the screen's width, if nobody clicks or starts a link, the thread is deleted. Otherwise the thread is live and it detects for latency/lack of interest. I think 30 minutes is my cutoff, maybe that's too much. Then the thread is deleted. 

 

There will be intermittent ads displayed along with those multimedia windows that scroll across the screen, although I'm not sure if this will count towards views with Google Adsense I may have to talk to them about this because Facebook cycles their ads and I wonder if it is a similar concern. 

 

Later, the more advanced aspect is bio metric scanning for gender detection and attractiveness rating 

This means that when you are paired with matches, not only are you paired to the opposite sex (though you can you specify otherwise) but you will also be paired with people within your "league" sounds bad I know and the other lucrative aspect is to have people pay to see the rest of the people outside of their attractiveness aspect....

 

The bio metric aspect isn't too hard, I'll have to get into bit mapping but the plan is to have an archive of "beautiful" people and do some measurements on their faces and then come up with an average or control. 

 

The gender thing is huge because on websites like Omegle which support video chatting, it's usually constantly dicks, and if you have a gender detection then you will always be paired with someone of the opposite sex

 

Anyway that's the majority of what I need to accomplish and most it exists 

 

For instance the video pop up technique, shutter stock does that 

 

I think I'm going to have to hire some random girl with an upbeat positive attitude to record an 8 second video for me and I'll pay her a one time fee of like $50.00 and make sure she signs an agreement. 

 

Anyway I have lots of work to do, I will be sad if my idea is stolen by someone more code savvy but at the same time, I have specified that the end goal isn't completely money but to learn and then once I accomplish everything that I want this website to do, it should be relatively simple to launch other projects. 

[greenace92]

Oh Christ the secret is out, I forgot you can't edit posts after a certain time period... oh well hahaha

[greenace92]

 

Your site has an issue loading when is www

 

Not working

http://www.dn2d8.com/

 

Working

http://dn2d8.com/

 

At your domain name registrar, you can create a new cname www and point to your servers ip

 

You can edit your htaccess file and redirect them to non www (providing mod_rewrite is enabled on the server)

RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
RewriteRule ^(.*)$ http://%1/$1 [R=301,L]

 

 

I think I just have to wait but the change I applied does not seem to stay/ work

 

When I set the Points To value to be dn2d8.com it reverts to @ after I hit save

@ is pointed to the IP address so I don't know why it isn't working with a www prefix 

Thanks for pointing this out 

 

Yeah the reverting is the problem.

Maybe I have to make the changes in virtual host? create alias entries? I share the same server with three different domains/ip-addresses 

Edited December 5, 2014 by greenace92

[QuickOldCar]

@ points to ip in the a record, that's fine

 

You can add this top of htaccess to handle 404 error file

so anything that's 404 would go to main site

ErrorDocument 404 /

or use a custom 404 page

Edited December 5, 2014 by QuickOldCar

[greenace92]

I'm going to try and figure out your last post there but I took down the .htaccess file 

 

I found the error pages and tried do enter that up there :

 

ErrorDocument 404 / 

 

Which is probably not what you meant 

 

I'm sorry you guys have to spoon feed information to me like a child 

 

Yeah what you said makes sense / was correct 

 

I am reading through an article on .htaccess and 404 code forwarding 

Thanks so much for your time and response 

Edited December 5, 2014 by greenace92

[greenace92]

yeah so I created a new .htaccess file on my root public_html folder and included that ErrorDocument 404 /index.html 

 

Does not seem to work 

[QuickOldCar]

apache needs restart