I'am working my web page on "WYSIWYG Web Bulider", and on the main page I have inline frame, and when I click that inline frame another page is opened who has online slide show on It. I want that when that page is opened, online slide show is automaticly triggered.
Probably I need some javascript code for that, but I'm not familiar with coding.
test web page is curently on croatian language, but just click the picture
http://3dvizlab.com/test/3d_vizualizacija.php
This is html code of the page with online slide show
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>exteriors</title>
<style type="text/css">
body
{
font-size: 8px;
line-height: 1.1875;
background-color: #FFFFFF;
background-image: url(images/classy_fabric.png);
color: #000000;
}
</style>
<style type="text/css">
a
{
color: #0000FF;
text-decoration: underline;
}
a:visited
{
color: #800080;
}
a:active
{
color: #FF0000;
}
a:hover
{
color: #0000FF;
text-decoration: underline;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<link rel="stylesheet" href="./prettyPhoto/css/prettyPhoto.css" type="text/css">
<script type="text/javascript" src="./prettyPhoto/js/jquery.prettyPhoto.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("a[rel^='prettyPhoto_OnlineSlideShow']").prettyPhoto({theme:'facebook'});
});
</script>
</head>
<body>
<div id="OnlineSlideShow" style="position:absolute;left:352px;top:337px;width:300px;height:200px;z-index:0;">
<?php
$images_folder = "../pictures/exteriors/";
$image_width = 300;
$image_height = 200;
$count = 0;
$dir = opendir($images_folder);
while ($filename = readdir($dir))
{
$ext = pathinfo($filename, PATHINFO_EXTENSION);
if ($ext == 'gif' || $ext == 'jpeg' || $ext == 'jpg' || $ext == 'png')
{
echo "<a href=\"$images_folder$filename\" rel=\"prettyPhoto_OnlineSlideShow[OnlineSlideShow]\">";
echo "<img class=\"image\" alt=\"\" style=\"border-width:0;left:0px;top:0px;width:" .$image_width. "px;height:" .$image_height. "px;";
if ($count != 0)
{
echo "display:none;";
}
echo "\" src=\"$images_folder$filename\">";
echo "</a>";
echo "\r\n";
$count++;
}
}
?>
</div>
</body>
</html>
Change the function call to
$(document).ready(function()
{
$("a[rel^='prettyPhoto_OnlineSlideShow']").prettyPhoto({theme:'facebook', ,slideshow:5000, autoplay_slideshow:true});
});
That should trigger the slideshow on load, with a delay of 5 seconds between slides.
Related
I have this simple code to turn a webpage into dark/light mode. It works fine on the page you are, but if I click any links or buttons to redirect me from index.html to test.html for example, then the settings resets to default. Let's say I want to browse my page in light mode, and lick test button it goes back to dark mode.
How do I make it remember to stay in the same mode I choose? Here is what I got.
Index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Dark -Light Mode Switcher</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<body id="body" class="dark-mode">
<h1>Dark/Light Mode Switcher</h1>
<button type="button" name="dark_light" onclick="toggleDarkLight()" title="Toggle dark/light mode">🌛
</button>
<p><button name="test">TEST PAGE</font></button>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
Script.js
function toggleDarkLight() {
var body = document.getElementById("body");
var currentClass = body.className;
body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode";
}
Style.css
body.dark-mode {
background-color: #111;
color: #eee;
}
body.dark-mode a {
color: #111;
}
body.dark-mode button {
background-color: #eee;
color: #111;
}
body.light-mode {
background-color: #eee;
color: #111;
}
body.light-mode a {
color: #111;
}
body.light-mode button {
background-color: #111;
color: #eee;
}
If you update your Script.js like below, you will obtain what you want :
body.className=localStorage.getItem("stateMode");
function toggleDarkLight() {
var body = document.getElementById("body");
var currentClass = body.className;
body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode";
localStorage.setItem("stateMode",body.className);
}
Code is working fine(showing css div backgrounds as well as the fetched news with javascript) as an individual html page but when using for chrome extension, in popup.html it is just showing background, not the fetched news.
google.load("feeds", "1");
var Container=document.getElementById("feed");
var Url="http://www.npr.org/rss/rss.php?";
var Limit=8;
var rssoutput="<h1>Latest NPR feeds:</h1><ul>";
function showFeed(result){
if (!result.error){
var feeds=result.feed.entries;
for (var i=0; i<feeds.length; i++)
rssoutput+="<li><a href='" + feeds[i].link + "'>" + feeds[i].title + "</a></li><br>"
rssoutput+="</ul>";
Container.innerHTML=rssoutput;
}
else
alert("Error fetching feeds!");
}
function startFeed(){
var feeder=new google.feeds.Feed(Url);
feeder.setNumEntries(Limit);
feeder.load(showFeed);
}
window.onload=function(){
startFeed()
}
#font-face {
font-family: Exo-Black;
src: url(Exo-Black.otf);
}#font-face {
font-family: LobsterTwo-Regular;
src: url(LobsterTwo-Regular.otf);
}
h1 {
font-family:LobsterTwo-Regular;
color:#3b5998;
margin: 25px;
}
a {
font-family:Exo-Black;
font-size: 1em;
text-decoration:none;
color:#8b9dc3;
}
a:hover {
text-decoration:underline;
color:#3b5998;
background-color:#c9c9ff;
}
ul {
list-style:circle;
margin-left:-15px;
}
div {
width:300px;
height:700px;
border: 8px solid #172631;
background-color: #dfe3ee;
/*
other choices for bg-color eecbff
*/
padding: 8px 10px;
}
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
<link href="feedStyle.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="feed"></div>
<script type="text/javascript" src="abc.js">
</script>
</body>
</html>
I would like to know how I can define CSS element dimensions before they are rendered eg. not using offset and jQuery
Can I echo php into where the width/height or position values are? eg.
<?php
$width = 290px;
$altwidth = 290;
?>
<style>
.widget {
width: <?php echo $width; ?>;
}
.altwidget {
width: <?php echo $altwidth; ?>px;
}
Would any of these work, is it completely wrong?
Similarly how would I apply JavaScript dimensions using a variable?
$(document).ready(function(){
$('.widget').css('width', <?php echo $width; ?>);
$('.altwidget').css('width', <?php echo $altwidth; ?>);
});
Your code will also works if it is written in php file.
Yes it will work, but you will have to make 290px a string for $width ( e.g. $width = "290px";), or better yet go with the $altwidth way and leave the px part out of the variable.
See below for how to dynamically set dimensions from JavaScript once the page has loaded. I have added some CSS for the example.
<html>
<head>
<?php
$width = "290px"; // Quotes added
$altwidth = 290;
?>
<style>
.widget {
width: <?php echo $width; ?>;
height: 100px;
color: white;
background: green;
cursor: pointer;
}
.altwidget {
width: <?php echo $altwidth; ?>px;
height: 100px;
color: white;
background: red;
cursor: pointer;
}
</style>
<script type="text/javascript">
var newWidgetWidth = '200';
var newAltWidgetWidth = '400';
</script>
</head>
<body>
<div class="widget" onclick="this.style.width = newWidgetWidth + 'px';">
Shrink me
</div>
<div class="altwidget" onclick="this.style.width = newAltWidgetWidth + 'px';">
Grow me
</div>
</body>
</html>
This is my first AJAX and my first use of .php file. I'm following an exercise in the text and it's not working. I tried to use the alert function as many times as possible to check what is feeding in to variables and functions, but I'm really unsure what's going on in the background. I checked the Yahoo! Weather RSS feed which is supposed to give this website some information ("http://weather.yahooapis.com/forecastrss?p=94558") and I do see the "item" tag. The console keeps saying "Cannot call method 'getElementsByTagName"!! Appreciate any input in advance....
<!DOCTYPE html PUBLIC "-\\W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Weather Report</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
html {
height: 100%;
margin: 0;
padding: 0;
}
body
{
height: 100%;
margin: 0;
padding: 0;
}
a { color: #91c056; }
a:link { color: #515151; text-decoration: none; }
a:visited { color: #515151; text-decoration: none; }
a.back:hover { color: #6eece3; }
#content-pane{
font-family: Courier New, monospace;
letter-spacing: -0.05em;
font-size: 15px;
line-height: 23px;
float:left;
width:100%;
padding-left: 5%;
padding-top: 5%;
}
#headline
{
font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
font-weight: bold;
letter-spacing: -0.05em;
font-size: 60px;
line-height: 60px;
color: #323232;
text-align: left;
}
</style>
<script type="text/javascript">
/* <![CDATA[ */
var weatherRequest = false;
function getRequestObject(){
try {
httpRequest = new XMLHttpRequest();
}
catch (requestError){
try {
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (requestError) {
try{
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (requestError){
window.alert("Your browser does not support AJAX!");
return false;
}
}
}
return httpRequest;
}
function weatherUpdate(){
if(!weatherRequest)
weatherRequest = getRequestObject();
var zip = document.forms[0].zip.value;
weatherRequest.abort();
weatherRequest.open("get", "WeatherReport.php?zip=" + zip, true);
weatherRequest.send(null);
weatherRequest.onreadystatechange=fillWeatherInfo;
}
function fillWeatherInfo(){
if (weatherRequest.readyState == 4 && weatherRequest.status == 200){
var weather = weatherRequest.responseXML;
var weatherItems=weather.getElementsByTagName("item");
if (weatherItems.length > 0){
for (var i=0; i<weatherItems.length; ++i){
var curHeadline = weatherItems[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
var curLink = weatherItems[i].getElementsByTagName("link")[0].childNodes[0].nodeValue;
var curPubDate = weatherItems[i].getElementsByTagName("pubDate")[0].childNodes[0].nodeValue;
var curDesc = weatherItems[i].getElementsByTagName("description")[0].childNodes[0].nodeValue;
var weatherSpot = document.getElementById('weatherPara');
var curStory = "<a href='" + curLink + "'>" + curHeadline + "</a><br />";
curStory += "<span style='color: gray'>";
curStory += curDesc + "<br />";
weatherSpot.innerHTML = curStory;
}
}
else
window.alert("Invalid ZIP code.");
}
}
/* }]> */
</script>
</head>
<body onload ="weatherUpdate()">
<div id="content-pane">
go back
<div id="headline">Weather Report</div>
<br />
<br />
<br />
<br />
<form method="get" action="">
<p>ZIP code <input type="text" name="zip" value="94558"/> <input type="button" value="Check Weather" onclick="weatherUpdate()" /></p>
</form>
<p id="weatherPara"></p>
</div>
</body>
</html>
Below is the WeatherReport.php file.
<?php
$Zip = $_GET["zip"];
$WeatherURL
= "http://weather.yahooapis.com/forecastrss?p=" . $Zip;
header("Content-Type: text/xml");
header("Content-Length: " . strlen(file_get_contents($WeatherURL)));
header("Cache-Control: no-cache");
readfile($WeatherURL);
?>
Try adding your WeatherReport.php in form action. You have to specify your php file in you action otherwise the form will point to the same file.
In your function fillWeatherInfo, you haven't passed it any parameters. Therefore, I believe weatherRequest.responseXML is an empty object.
In your onreadystatechange property, you need to pass in the parameters of the AJAX response to the handler.
Hi i am trying to use script to display a loading bar while my php is executing. I learnt from this website but when I did the exactly same thing, my loading bar still cannot display, any idea why?
<html>
<head>
<style type="text/css">
div#content {
display: none;
}
div#loading {
top: 200 px;
margin: auto;
position: absolute;
z-index: 1000;
width: 160px;
height: 24px;
background: url(img/142.gif) no-repeat;
cursor: wait;
}
</style>
<script type="text/javascript">
function preloader(){
document.getElementById("loading").style.display = "none";
document.getElementById("content").style.display = "block";
}//preloader
window.onload = preloader;
</script>
<style type="text/css"></style>
</head>
<body>
<div id="loading"></div>
<div id="content" >
<?php
sleep(10);
echo 'This content has been loaded via an AJAX request';
?>
<br>
</div>
</body>
</html>
Just run this code in any browser
<!DOCTYPE html>
<?php
#ini_set('zlib.output_compression', 0);
#ini_set('implicit_flush', 1);
#ob_end_clean();
set_time_limit(0);
?>
<html>
<head>
<style type="text/css">
div#content {
display: none;
}
img#loading {
top: 200 px;
margin: auto;
position: absolute;
z-index: 1000;
width: 500px;
height: 24px;
cursor: wait;
height: 500px
}
</style>
<style type="text/css"></style>
</head>
<body>
<?php
for ($i = 0; $i < 10; $i++) {
echo str_repeat(' ', 1024 * 64); // this is for the buffer achieve the minimum size in order to flush data
if ($i == 1)
echo '<img id="loading" src="img/142.gif" />';
}
?>
<div id="content" style="display: block;">
<?php
sleep(5);
echo 'This content has been loaded via an AJAX request';
?>
<br>
</div>
<script type="text/javascript">
function preloader() {
document.getElementById("loading").style.display = "none";
document.getElementById("content").style.display = "block";
}//preloader
window.onload = preloader;
</script>
</body>
</html>
if you have acces to php.ini set following configuration in your php.ini and remove
#ini_set('zlib.output_compression', 0); #ini_set('implicit_flush', 1); from begining
output_buffering = Off
implicit_flush = on
output_compression = Off
If your are curious about output buffering click here
<?php
sleep(1000);//increase sleep time
echo 'This content has been loaded via an AJAX request';
?>
and remove style="display: none;"