I'm fielding a request that someone essentially wants one master page with their logo at the top, and the remainder of the page will load a series of pages (populated by a static array) and then repeat itself.
My intent is to have a page load in the 'content' div element, wait a period of time (I only listed 2 seconds for testing purposes), and then the next page loads. When it reaches the end of the array, I want the array to reset so that this is continuously loading.
I'm sure there are probably better ways to do this, but through my research this seemed the simplest.
Any help, or pointing me in another direction is all greatly appreciated.
Editing for clarity:
What I'm looking for is one master page, which just simply has a header at the top of the page. The rest of the page would be composed of a single div element (or iFrame if need be) and the content of said element would change after a determined amount of time, automatically, with no input. The element would initially load 'testdata.php' which would be composed of multiple database calls, after a determined amount of time, that div element would reload 'testdata1.php', which is composed of completely different database calls.
I hope this helps better describe what I am hoping to achieve.
What I have so far:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<script type="text/javascript" src="scripts_css/jquery.js"></script>
</head>
<body>
<div style="background-color: #E0E0E0; height: 150px; width: 100%; margins: 0 auto;">
<img src="images/logo.png"/>
</div>
<div id="content" style="height: 850px;"></div>
</body>
<script>
var linkArray=[ "testdata.php",
"testdata1.php"];
for (var i=0; i < linkArray.length; i++) {
setTimeout(function(){$("#content").load(linkArray[i])},2000);
if (i === (linkArray.length-1))
i = 0;
}
</script>
I know this isn't very helpful, and it doesn't directly address your problem, but you might want to try using jQuery (http://jquery.com/). You could have something like this:
$(document).ready(function() {
// Set timeout to 2 seconds
var array = ['page1', 'page2'];
document.write(array[1].href);
});
Or, you could use some server-side script like ruby, or PHP.
This ended up doing the trick for me:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<script type="text/javascript" src="scripts_css/jquery.js"></script>
</head>
<body>
<div style="background-color: #E0E0E0; height: 150px; width: 100%; margins: 0 auto;">
<img src="images/logo.png"/>
</div>
<div id="content" style="height: 850px;"></div>
</body>
<script>
var linkArray=[ "testdata.php",
"testdata1.php"];
var timeout = 0;
var counter = 0;
var arrayCount = linkArray.length;
changeContent(timeout, counter, arrayCount);
function changeContent(def_timeout, def_counter, def_arrayCount) {
//setTimeout(function() {$("#content").load(linkArray[def_counter])}, def_timeout);
$("#content").load(linkArray[def_counter]);
def_counter++;
if (def_counter >= def_arrayCount)
def_counter = 0;
def_timeout = def_timeout + 5000;
setTimeout(function() {changeContent(def_timeout, def_counter, def_arrayCount)}, 5000);
}
</script>
Related
So hi guys, this one has had me scratching my head for sometime now, so I wanna create an alert that will only popup when the progress of the transition gets to a certain point (ie when width gets to 3rem). Any help on this will be greatly appreciated
<!DOCTYPE HTML>
<html>
<head>
<title>converting html elements to numbers</title>
<meta charset="utf-8"/>
<style type="text/css">
.child11{background:blue;}
.transipion{
width:20px;
height:10vh;}
.cover{background:red;
width:100vw;
transition:10s all ease-in;}
</style>
</head>
<body>
<div class="child11">increaseByOne</div>
<div class="score" id="score">
score:<span>0</span>
<div class="cover"><div class="transipion"></div></div>
</div>
<script>
var rec1=document.querySelector(".child11");
var color=document.querySelector("#color");
var score=document.querySelector("span");
var vover=document.querySelector(".cover");
function funki(){
var integer=score.textContent;
var add=Number(score.textContent);
score.innerText=add + 1;}
This right here below 👇 is the js code I've tried
if(vover.style.width="50vw"){
alert("3rem");}
rec1.addEventListener("click", funki);
</script>
</body>
</html>
I also tried replacing the width there with transition=5s something like that but the alert always pops up before anything else. Oh and I don't wanna do this with setInterval.
I would like to scroll to a certain element via #:
Element
<div name="element" />
It accomplishes this quite well, but it goes to the very top of the element. However, I'd like the element scrolled to to be centered for the user.
I am hesitant to use Javascript's scrollTo or other, external libraries, since I will need to use this functionality a lot (very, very much). I am using React and don't want to overuse refs and slow down my app. So I'd like to accomplish this with HTML only, preferably. JS is fine too, of course, but most solutions I came across modify the DOM and/or use refs.
There is probably a better/cleaner way to do it, but with only html/css, the only thing that I think about is to use a hidden span under your div element, like so:
html {
scroll-behavior: smooth;
}
.space {
width: 100%;
height: 400px;
background-color: blue;
}
#element {
position: relative;
top: -50vh;
visibility: hidden;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
Element
<div class="space"></div>
<p> some text </p>
<div class="space"></div>
<p> some text </p>
<div class="space"></div>
<div>
<p>
Your element
</p>
<span id="element">anchor </span>
</div>
<div class="space"></div>
</body>
</html>
AFAIK, no way to achieve your desirable effect without a bit of js. As for "centered", then some calculation is needed.
<html>
<head>
<title>Document</title>
<style>
.placeholder {
height: 1000px;
}
</style>
<script>
function scrollToDest(event) {
var id = event.target.getAttribute("href");
if (id.charAt(0) !== "#") return; // not a valid <a> element
var dest = document.getElementById(id.substr(1));
if (!dest) return; // no destination found;
event.preventDefault();
// calculate the top and bottom margin remained when dest is centered
var margin = window.innerHeight - dest.clientHeight;
// what if the dest's height is larger than viewport?
if (margin < 0) margin = 0;
window.scroll({ left: 0, top: dest.offsetTop - margin / 2, behavior: "smooth" });
}
</script>
</head>
<body>
<div class="placeholder">
Let's go!
</div>
<div id="dest">ARRIVAL</div>
<div class="placeholder"></div>
</body>
</html>
So I'm trying to make a slideshow using js, I have asked for help on that and it's working in JSFiddle, but it won't work in my local environment, so I'm wondering if I have some wording or something wrong somewhere that someone could help me see.
HTML5
<!DOCTYPE html>
<html>
<head>
<title>slider</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="with=device-width, initial-scale=1.0">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="slider.js"></script>
</head>
<body onload="slider()">
<div class="slider">
<img id="1" src="slide_image1.jpg" alt="TV Deals"/>
<img id="2" src="slide_image2.jpg" alt="Furniture Deals"/>
<img id="3" src="slide_image3.jpg" alt="Electronic Deals"/>
</div>
</body>
</html>
CSS3
.slider {
width: 990px;
height: 270px;
overflow: hidden;
margin: 30px auto;
background-image: url('ajax-loader.gif');
background-repeat: no-repeat;
background-position: center;
}
.slider img{
border: 0;
display: none;
}
JavaScript
$(document).ready(function () {
slider();
});
function slider(){
var count = 1;
$('#1').show();
(function slide(){
$('.slider img').hide();
if (count > 3) {count = 1;} // makes this a loop
$('#'+count).fadeIn('slow');
count += 1;
setTimeout(function () {
slide();
}, 5000);
})();
}
Is my "onload" command correct? I'm using Web Expression as a designer and I actually went in through the url path for each and ever image and selected the image, so I know the paths are correct (did the same thing for the js). The JavaScript itself is called "slider.js" could this affect my code in anyway? This is my first attempt at doing one of these so I have no idea what's causing it to go wrong.
When you say local environment, is it running on your computer under the file:// protocol? (i.e., when you look at it is it something like file://C:\My\Files\index.html) or with a server running over the http:// protocol?
If it is the former, you need to change the script srcs from // to http:// explicitly. // means "use whatever protocol the page is using", so that would mean it tries file://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js, which obviously doesn't exist.
That's the only thing that jumps out at me as being off and is a common mistake when working locally.
Basically I saw this page THIS PAGE and if you scroll up and down you can see the glass of drink becoming full and empty depeing on where your scrollbar is. Any idea how this is done?
It's pretty complex to do stuff like that but not particularly hard.
First, you'll need to manage this using something like jQuery. You got that already so good...
The html below is a working example that assumes the user has an image:
it is 700 x 100. The code is pretty simple. Round the window's scrollTop() value and figure the right frame offset based on the results. No need to fully explain, the code below says it all.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Test</title>
<meta name="viewport" content="width=device-width">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<style>
#main{position:relative;}
.dummy{height:500px;}
#glass{
height:200px;
width:100px;
background:url(http://www.hep-g.com/glass.jpg) no-repeat;
background-position:0 0;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var frame = 0;
$(window).scroll(function(){
if($(window).scrollTop() % 100 < 10)
frame = Math.floor($(window).scrollTop() / 100) * 100;
if(frame > 700)
frame = 700;
$('#glass').css('background-position', '-' + frame + 'px 0');
});
});
</script>
<body>
<div id="main">
<section class="dummy">
This is dummy content
</section>
<section id="glass"></section>
<section class="dummy">
This is dummy content
</section>
<section class="dummy">
This is dummy content
</section>
</div>
</body>
</html>
It is actually one image with the background-position changing. The image is completely loaded by the time you see the glass originally.
http://www.smokeybones.com/static/img/tv/beer_sprite_lrg.jpg?e3e4e50f54ea
Here is the home page for the popular jquery-plugin galleria. I need to insert the download link to the right bottom corner for the active image. Now there is available statistic like (3/10), which indicates the current number from list.
Maybe someone already did this. What is the fastest way?
UPD: using the gearsdigital's idea I wrote the code:
var gallery = Galleria.get(0);
gallery.bind(Galleria.IMAGE, function(e) {
imgHandle = e.imageTarget;
console.log(imgHandle);
console.log(imgHandle.attr('href'));
//$('.galleria-counter').append('Download');
});
The first log line shows up something like:
<img width="584" height="438" src="http://....jpg" style="display: block; position: relative; left: 0px; top: -4px; opacity: 1;">
But how to get the src location, I see the error that attr function isn't available.
your getting the imgHandle from a DOMEvent, not a jquery object.
As attr is part of the jQuery object you need to transfer the dom object to a jquery object.
gallery.bind(Galleria.IMAGE, function(e) {
imgHandle = $(e.imageTarget); //Wrap it here
alert(imghandle.attr('href'))
//$('.galleria-counter').append('Download');
});
I would try to get the current Source-Attribute from the current image and append this as link.
//Untested. This is just a suggestion :)
currentImageSource = $('.galleria-image img').attr('src');
$('.galleria-counter').append('Download');
But a link like this will open the image separatly and not download ordinary. If you want a "real" Download you have to put this image in an zip archive.
$('.galleria-counter').append('Download');
This will produce something like that: http://www.example.com/galleria/img/mygreatimage.jpg.zip
Works for me:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
currentImageSource = $('.container img').attr('src');
$('.placeholder').append('Download');
});
</script>
</head>
<body>
<div class="container">
<h2>Get img src</h2>
<img src="http://www.duba.at/wp-content/uploads/2007/08/bild_0570000.jpg" witdh="200" height="220"/>
</div>
<div class="placeholder">
<h2>Append Here</h2>
</div>
</body>
</html>