Hi I was wondering what php code I can use that would allow my page to contain more than one image that changes. I would like the php code to output the HTML tag. Can anyone help me with this? Thanks!
you need to output all images to the browser from PHP, then use Javascpt to change the pictures. PHP is for server side scripts, the change you are talking about requires Client Side procxessing, ie Javascript. Do a search for jQuery image changer for some ideas
The kind of mechanism you are referring to is often called a slideshow or a carousel, and it is done with javascript. Google "jQuery slideshow" or "jQuery carousel" and you'll find plenty of those.
If you need something simple, I suggest you the tiny the jQuery plugin tiny carousel.
Scroll to the How To section to know how to set it up.
Then, to change the images with php, you will need to do something like this:
<div id="slider-code">
<a class="buttons prev" href="#">left</a>
<div class="viewport">
<ul class="overview">
<?php foreach(glob('slideshow/*.jpg') as $imagePath): ?>
<li><img src="$imagePath" /></li>
<?php endforeach; ?>
</ul>
</div>
<a class="buttons next" href="#">right</a>
</div>
Related
I have researched some answers that talk about php, javascript, iframes etc. but I have tried a couple and none of them work. I am new to HTML coding.. and coding in general!
<link rel="menu" href="menu.html"> does nothing
<!--#include virtual="/menu.html" --> does nothing (presumably because its a comment?)
<iframe src="page.html"></iframe>
or object... both place the menu in a silly little scroll box.
I want to run my menu on my page as if it were a function in C. Where I can just include it, and it be there, or just link it.
Thanks for the help!
Ryan
webpage file: biology.html
menu file: menu.html
<div class="container">
<img src="homeicon.jpg" width="50" alt="Home">
<div class="redhover">
<div class="dropdown">
<button class="dropbtn">GCSEs</button>
<div class="dropdown-content">
Chemistry
Biology
</div>
</div>
<div class="dropdown">
<button class="dropbtn">A-Levels</button>
<div class="dropdown-content">
Chemistry
Biology
</div>
</div>
<div class="dropdown">
<button class="dropbtn">University</button>
<div class="dropdown-content">
Telecommunications
Electronic Engineering
</div>
</div>
<div class="dropdown">
<button class="dropbtn">More</button>
<div class="dropdown-content">
About me
Youtube
</div>
</div>
</div>
</div>
You can use php to include files on other pages. Here is some example code to get you started:
<?php
require_once('menu.php');
?>
You can put this in your HTML page appropriately, however you must make sure that php can be processed on your server and the file containing php code must end in the .php extension.
There are also other methods of including files via php, see here:
http://php.net/manual/en/function.include.php
and
http://php.net/manual/en/function.require.php
Edit - I'm not a big fan of this approach, but it will work on Github pages.
Create a file called nav.js with your menu defined as a js variable, then use javascript to insert it into an empty div created on each page. This way to update your nav you only have to ever edit nav.js Not pretty but it works
nav.js
var navigation = "<nav>";
navigation += "<ul>";
navigation += "<li>Home</li>";
navigation += "<li>About</li>";
navigation += "</ul>";
navigation += "</nav>";
document.getElementById("navigation").innerHTML = navigation;
Other pages
<div id="navigation"></div>
<!--rest of page goes here.-->
<script src="nav.js"></script>
Fiddle: https://jsfiddle.net/ze3hLxx8/1/
There are multiple ways to include a file into another depending on the backend technology you wish / want / need to use.
PHP
The most common way to do it in php is by using the include or require statement inside a php file.
In your specific case your biology.html file must be converted to a biology.php file and then you can add the relative code to include the file:
<?php include('menu.php');?>
This simple statement will add the content in your menu.php file to the current page. This will not work if php is not present on the server and obviously will not work locally without a local development environment
The differences between require and include can be found on the official documentation:
include: http://php.net/manual/en/function.include.php
require: http://php.net/manual/en/function.require.php
SSI
Another method is to use Server Side Includes. To use the SSI it must be supported and enabled on the webserver. To use SSI you need to change the extension from biology.html to biology.shtml and then add the following statement:
<!--#include file="menu.html" -->
More information on server side includes can be found on wikipedia: https://en.wikipedia.org/wiki/Server_Side_Includes
I'm rather new to programming, but I'm trying to find a way to do what is described below.
<body>
<div class="gallery">
<img src="photo_1.jpg">
<img src="photo_2.jpg">
<img src="photo_3.jpg">
<!-- trigger for user to load items that weren't downloaded on page load -->
<img src="photo_4.jpg">
<img src="photo_5.jpg">
<img src="photo_6.jpg">
</div>
</body>
I'm trying to find PHP functions that would, ideally, only load the first 3 img embeds within a certain class/ID, and have a clickable trigger to request the remaining img embeds from the server.
I don't know if this is how the typical message board software(such as vBulletin) handles things with "spoiler tags" .. as in whether or not it actually prevents loading, or just hides the content from view. Something like that, if it actually prevents loading, is what I'd like to know about.
First, this has nothing to do with PHP.
The only way to prevent a page from loading the image is to not include the tags on the page.
You could accomplish this a couple ways:
Place the last three photos inside a hidden container and use a Javascript click event to display them when wanted, but that still loads the images when the page is loaded.
Or, you can use an AJAX call to retrieve the items only on demand. Unless they are really large images I would think the first option the best.
<div class="gallery">
<img src='photo1.jpg'/>
<img src='photo2.jpg'/>
<img src='photo3.jpg'/>
<a href="#" onClick='document.getElementById("hidden-gallery").display="visible"'>show more</a>
<div id="hidden-gallery" class="hidden-gallery" style="display:none">
<img src='photo4.jpg'/>
<img src='photo5.jpg'/>
<img src='photo6.jpg'/>
</div>
</div>
I recognize that embedding CSS styles and Javascript the way I did is not the preferred method but it is there just for the examples sake.
I want to try and get the latest movie I checked on the IcheckMovies site and display it on my website. I don't know how, I've read about php_get_contents() and then getting an element but the specific element I want is rather deep in the DOM-structure. Its in a div in a div in a list in a ...
So, this is the link I want to get my content from: http://www.icheckmovies.com/profiles/robinwatchesmovies and I want to get the first title of the movie in the list.
Thanks so much in advance!
EDIT:
So using the file_get_contents() method
<?php
$html = file_get_contents('http://www.icheckmovies.com/profiles/robinwatchesmovies/');
echo $html;
?>
I got this html output. Now, I just need to get 'Smashed' so the content of the href link inside the h3 inside a div inside a div inside a list. This is where I don't know how to get it.
...
<div class="span-7">
<h2>Checks</h2>
<ol class="itemList">
<li class="listItem listItemSmall listItemMovie movie">
<div class="listImage listImageCover">
<a class="dvdCoverSmall" title="View detailed information on Smashed (2012)" href="/movies/smashed/"></a>
<div class="coverImage" style="background: url(/var/covers/small/10/1097928.jpg);"></div>
</div>
<h3>
<a title="View detailed information on Smashed (2012)" href="/movies/smashed/">Smashed</a>
</h3>
<span class="info">6 days ago</span>
</li>
<li class="listItem listItemSmall listItemMovie movie">
<li class="listItem listItemSmall listItemMovie movie">
</ol>
<span>
</div>
...
There are some libraries which could help you!
One I've used for the same purpose, a long time ago, is this: http://simplehtmldom.sourceforge.net/
I hope it help you!
follow steps to achieve this
STEP1:-
First get the contents using file_get_contents in a php file
ex: getcontent.php
<?php
echo file_get_contents("http://www.icheckmovies.com/movies/checked/?user=robinwatchesmovies ");
?>
STEP2:-
CALL the above script using ajax call and add the content to a visibility hidden field in the html.
ex:
$('#hidden_div').html(response);
html:-
<html>
<body>
<div id='hidden_div' style='visibility:hidden'>
</div>
</body>
</html>
STEP3:-
now extract the id what ever you want.
What you are asking for is called as web scraping ,I have done this a few months back, the process goes like this,
Make a HttpRequest to the site from which you need the content,check
the php class for it
Use a DOM parse library for handling the downloaded page (it would be in html),simple HTLM DOM would be a good choice
Extract your required information
Here are some tutorials for you,
HTML Parsing and Screen Scraping with the Simple HTML DOM
Library
Beginning web page scraping with php
SO Posts:
HTML Scraping in Php
And best of all Google is your friend just search for "PHP scraping"
I'm trying to get some attributes for HTML tags in a web page.
<html>
<head>
<title>test page</title>
</head>
<body>
<div id="header" class="clearit" role="banner">
<div id="headerWrapper">
<ul id="primaryNav" role="navigation">
<li id="musicNav" class="navItem">
Music
</li>
<li id="listenNav" class="navItem">
Radio
</li>
<li id="eventsNav" class="navItem">
Events
</li>
<li id="chartsNav" class="navItem">
Charts
</li>
<li id="communityNav" class="navItem">
Community
</li>
<li id="originalsNav" class="navItem">
Originals
</li>
</ul>
</div>
</div>
</body>
</html>
For example, I need the actual height and width for #headerWrapper and compare it with #musicNav in my PHP script. Since PHP is server-side, I can't get these attributes so I'm thinking to append Javascript code to calculate these attributes and store them in a JSON file like in this code:
<script type="text/javascript">
document.ready(function() {
var JSONObject= {
"tagname":"headerWrapper",
"height":$("#headerWrapper").height(),
"width":$("#headerWrapper").width()
},
{
"tagname":"musicNav",
"height":$("#musicNav").height(),
"width":$("#musicNav").width()
}
});
});
</script>
Then I'd like to read it in the php file that contains my algorithm to extract visual features from web pages. So I need to render the web page with appended Javascript using some browser. I'm using exec to send the new file to Firefox, like this:
exec('"C:\Program Files (x86)\Mozilla Firefox\firefox.exe" "http://localhost/Autoextractor/test.html" 2> errors.txt');
And Firefox opens in taskmanager but does not dispaly, the page is not rendered, and my appended Javascript code is not executed.
safe_mode=off - disabled_functions deleted from php.ini and when executing
exec("whoami");
The result is my user (note: my user in Administrator group) and I did try wscript with no result.
Does anyone have any idea why it's not working, or has another solution to get the dimensions of HTML tags?
Simply running a browser won't allow you to read any data back from it, so forget about using system.
You can use Selenium Webdriver to control a browser with PHP, run JavaScript, then return the result.
When you write your real JavaScript, you will need to fix the syntax errors that appear in the example you included in the question.
Keep in mind that the size of elements on screen will depend on factors such as installed fonts, chosen font size, browser, window size, etc. You can get a result for a browser running on your system, but you can't depend on it to be a universal result.
"have another solution to get Get dimension of HTML tags?"
Something wrong with Firebug/Inspect, which will give you rendered offsets with a few simple operations.
Run your code in a console if you want to do it programmatically, though you'll still need firebug/Inspect to find the right selectors (which really obviates the ability to do any of this automatically). Trying to log it all... well, it sounds like you're trying to keep a database... perhaps you should set one up.
This might be a problem that you need to add more context to get a useful response.
i'm trying to get some attributes for HTML tags in web page for example
<html>
<head>
<title>test page</title>
</head>
<body>
<div id="header" class="clearit" role="banner">
<div id="headerWrapper">
<ul id="primaryNav" role="navigation">
<li id="musicNav" class="navItem">
Music
</li>
<li id="listenNav" class="navItem">
Radio
</li>
<li id="eventsNav" class="navItem">
Events
</li>
<li id="chartsNav" class="navItem">
Charts
</li>
<li id="communityNav" class="navItem">
Community
</li>
<li id="originalsNav" class="navItem">
Originals
</li>
</ul>
</div>
</div>
</body>
</html>
for example i need the actual Height and width for #headerWrapper and compare it with #musicNav in my PHP program , since php is server side i can't get these attribute so i'm thinking to append javascript code to calculate these attribute and store it in json file like this code
<script type="text/javascript">
document.ready(function() {
var JSONObject= {
"tagname":"headerWrapper",
"height":$("#headerWrapper").height(),
"width":$("#headerWrapper").width()
},
{
"tagname":"musicNav",
"height":$("#musicNav").height(),
"width":$("#musicNav").width()
}
});
});
</script>
then read it by php file contain my algorithm witch extract visual features from webpages.
but my problem is i need to render the webpage with appended javascript using some browser or rendering engine in PHP or java ... so dose any one have some thing like that? is my method right or there is better solution?
Incase you want to render a webpage given a url and need an api to walk through the rendered dom
Phantomjs and its api and examples will help you. Check out open render
PhantomJS is a headless WebKit with JavaScript API. It has fast and
native support for various web standards: DOM handling, CSS selector,
JSON, Canvas, and SVG.
If i understand you correctly, you need a means to control the browser from your java app.
This
seems to be relevant.
Things you may also want to account for --
Letting the app know about your browser(binary or otherwise).
Choosing from multiple available browsers on the host.
Account for cross-platform support.