I have coded a math quiz mostly in PHP which pulls 10 questions and answers randomly from a database of about 20 questions.
This works fine, however when I click on "view source code", the source code displays DIFFERENT questions than the ones displayed on the actual webpage. It seems to show other random questions from the database. Does anyone know why this happens?
Here is the link to the quiz: http://socialsoftware.purchase.edu/nicholas.roberts/mathquiz/mathselect.php?category=Calculus
Notice how the source code shows different data than the actual webpage...
If you 'View page source', the browser issues a new request, so you get a new random set of questions in the source.
It's different when you choose 'inspect element'. If you do that, you are inspecting details of the current document, not as it was loaded, but as it currently is in the DOM in the browser.
This is because on every refresh, you are fetching 10 random questions. In some browsers, view-source fetches fresh copy of page source. So your script is returning random questions again.
Use inspect element (Developer tools) instead of view source.
When you view the page source, your browser will issue another request to the server. The page source you are viewing then contains a new random set of questions.
If you need to inspect the page currently loaded, use inspect element instead.
Related
I want to load more images in my website when I reach the bottom of my page. I'm using php and postgresql as my database.
For this post I simply load some text instead of image. I can write the code for it's equivalent.
So currently, I'm using a button at the bottom of my page, which when pressed re-loads the page and gives you more images(I'm displaying 50 images at a time).
But there are 2 problems with it, one being that the user will have to press the button again and again while I want it to happen automatically.
And the second one being that when new images are loaded, the previous ones are gone. I don't want to happen. For eg., if currently 1-50 images are present, my page later changes it to 51-100 while I want it to have all 1-100. I'm unable to solve this.
Please help. Thanks!
What you are looking for is commonly referred to as "infinite scroll pagination", while what you're asking for is techniclly possible using only PHP it would be a terrible user experience, as each reload would take the user to the top, and they would constantly have to continuously scroll further and further just to reach the location they were previously at.
Alternatively, handle this with JavaScript, an example: https://infinite-scroll.com/demo/full-page.
Doing simple Google searches reveals a plethora of options for JavaScript and JQuery plugins to achieve this.
An alternative, without the need for a plugin you can implement the answer to this:infinite-scroll jquery plugin
Simply call your PHP code in the form of an AJAX request when the bottom of the page is reached and append your new results. (this could be easily achieved with vanilla javascript as well).
Hope this helps.
I have a jQuery Mobile application, and on certain pages, such as for example this one: "http://olkensway.se/upplevdinkommun/activities.php?community_id=6&category_id=1", I'm facing a problem. When the page is loaded the first time, it shows correctly, but the problem occurs when I refresh the page (by pressing F5). Try and see for yourselves. The search field re-sizes and becomes much larger than what is supposed to be. This problem occurs both in my desktop browser (Tested with Google Chrome and Internet Explorer) and my mobile browser (Google Chrome as well). Using Google, I haven't found anybody with the same problem yet. I'm new to both jQueryMobile and web design in general. Is this a problem with my PHP, HTML or CSS. Some conflict with jQM? Please tell if I should show more code than what is available by viewing the page's source.
EDIT: It can be worth telling that I have other pages, not using any PHP, where this isn't a problem. So it's likely come conflict there...
When I load the page, the search thing is taking up the entire page. After inspecting the element in chrome, the article element's font size is 200% (.ui-body-c) . When I unchecked that it went to a "normal" size. I'm not sure exactly what you want it to look like, but maybe that's your problem? hopefully that helps
I'm not even 100% sure how to ask this question, but I will try my best...
So, take youtube. You've got this:
URL/watch?v=Video_URL_Here
While on this video, you decide to click a video in the related on the right-side.
While doing that, the page refreshes, and instantly jumps to that video.
I have the basic concept down:
> Create a variable.
$var;
> User: *Clicks First Video*
$var = Video_One; // Pulls from mySQL-DB
> Open a new page (ex: URL/watch?v=Video_ONE)
PHP: >Creates a whole new page for the video.<
> User: *clicks new video*
$var = Video_Two;
> Open a new page (ex: URL/watch?v=Video_TWO)
PHP: >Working more magic.<
However, I'm having a hard time actually doing this.
Could anyone point me in the right direction or explain how it works?
It would be very appreciated.
The way YouTube works is using $_GET variables. That's what the ?v= is. It's taking in the v variable and checking the database for a video with that video id. The way they create the new page is by fetching each of the values corresponding to the id that was passed in the url, then putting that data in each of the page sections.
Let me answer with a very general and oversimplified example
actually, more than having a unique "$var" that changes every time you click on a video (on your example), it is more like the page already knows where to go for each link (or click), that is, every video already has a link associated, with the corresponding url.
all this is done BEFORE the page loads. (there are ways to make it after, but that is another matter).
Just to give a quick example (it may not be exactly how youtube works, it is just an example)
Lets say you store each videos name, description, rating, etc on a database table.
e.g.
video1name, url1, description1, etc1
video2name, url2, description2, etc2
video3name, url3, description3, etc3
also assume each video has already related videos stored somewhere (the videos which would show on the right side) (imagine they are in the same table, each video having their own "related videos" associated.
so, when putting the page together, via PHP (in this case), what the code does is, read the data from the database, so it will know what it will "paint", at that point, it stores such data in variables, and using those vairables, it is ready to build the page, using such data.
imagine you say "i need 5 videos here, those videos are this, this other .... etc"
so php will read those 5 videos info form the database, AND knowing their data, it already "knows" what will the specific url for each video will be.
it only has to build links for each video, each having it's speciffic url.
e.g.
[some html]
...
<a href="myvid1url" > ...</a>
<a href="myvid2url" > ...</a>
<a href="myvid2url" > ...</a>
...
[the rest of html]
the only thing php is doing, is creating HTML dynamically, based on that data, and once it finishes, it sends it to the browser, which only has to "paint" plain html, all of which is already filled with the particular urls, names, etc for each part.
This is a VERY generalized example, but i hope you get the idea.
The most important part is to understand that most of the time, pages are already "built" before being displayed, once loaded, they already "know" what to do when you click somewhere, etc.
Of course, you can add interactive functionality, using javascript, ajax, etc, and that MAY change the page already loaded, but that is another concept.
I think you should first tell us what your experience with programming is, or if you have only made plain simple htmls pages or anything, so we could give you better advice.
have fun!
You could use JQuery and have the second video load in a frame, iframe, div, table, new window, etc (depending on the data source, of course)
External sources (depending)
jQuery loading external page (cross domain) into Div element
Local content sources
Load HTML page dynamically into div with jQuery
For external data loading you could get all creative and run a curl to save the data locally, parse it for what you need and then serve that locally
This might be a bit difficult to explain but I will try my best.
I have a page that will display some results from JavaScript (time (HH/MM/SS) to be exact).
I need to display the results of JavaScript which is shown on the page in the source code of that page when viewed from a browser, like Firefox right click -> view source files.
I was thinking about echoing the results but that seemed to be a wrong idea, as echoing will only show the results on the page, and not in the source code of the page.
EDIT:
Okay, if it is impossible to show the results of the JavaScript in the page source, then how does this site display the result of the current time, etc, in the page source? I.e. Wednesday, July 31, 2013, etc, etc can be viewed on the page and on the page source.
http://www.timeanddate.com/worldclock/city.html?n=136
I am using Google Chrome to view the page source.
You can't alter the source code that comes from server by the means of JavaScript. While javascript can manipulate DOM objects, the text you see when you click "view source" is exactly as it came from the server, and there is no way you could change that.
To view the changes done by your scripts, use Firebug or some similar tool.
Unfortunately the source code you see when you hit view source, is the response of the http request that was send. Javascript can not alter that source. Any change you would make to the source (DOM) would only be visible in a DOM inspector (ie. ctrl+j in chrome or F12 in IE).
What you want is simply not possible from the javascript side.
Is it possible to take a screenshot of the visible part of the website directly as it is seen by user (rendered by by the browser), including any changes made by user (e.g. moved divs, text typed in forms etc.)?
So you open a website, where you can make changes to its content. And there's a button (on the website of course), when you click it, the actual visible part of the website with all the changes you made is saved as an image and for example there goes a popup window where you can type in an email to send this image to, or something like that. Javascript, php, html5 or anything else? Old browsers and ie doesn't matter.
I've searched a lot for the answer, read lots of related articles, but I couldn't find the solution, cause what I need is not the script that would re-render the page like html2canvas, but capture the actual content displayed on the screen.
Any ideas and comments are much appreciated!
This is something that can be extremely tricky.
Essentially your only option of doing this in browser with no extensions or such is to try rendering HTML into the <canvas> tag.
There are several projects which do that, most reliable choices are noted in this SO question's answers: Render HTML in Canvas/WebGL
Note that none of the projects are 100% accurate, but a canvas can be rendered into an image and thus could be saved or emailed by the user like you asked.