"Splash Page" NOT index.asp - javascript

Client requests a small video to play as a "splash page". But I dont want to make it the index page for SEO purposes. Can I place a re-direct line of code at the top of my index? Cookies to make it only once?
I think there might be a few ways to do this, but i know none of them.
Thanks for your time.
James

Like my comment you can use jquery to achieve this. Check my example: http://jsfiddle.net/LSjbS/
The splash section should come last in the markup, as it has the least importance.

You can use javascript:
<script type="text/javascript">
setTimeout('Redirect()',4000); //time in ms
function Redirect()
{
location.href = 'http://www.website.com/path/splash';
}
​
</script>
It's that easy :) Just put it in the head section. the 4000 is the time in ms (as shown by my comment) change this to 1 for an almost immediate redirect :)

Related

Switching between documents using Javascript?

I'm working on a karaoke video assignment and was hoping to find a way to flip between two different index.html documents (one for chorus, one for verses) using JS. I have limited knowledge of Javascript and am in the process of learning it. So far I think I need to use the following:
$(document).ready(function () {
window.setTimeout(function () {
window.location.href = "index2.html";
}, 5000);
});
Right now I have my index1.html and index2.html for the chorus and verses. I'm thinking I'd make an external JS file with the above function which displays index1.html for x amount of seconds and then index2.html for another duration. Sorry if this question is too simple or not well clarified. Still a beginner so any help is appreciated! Thanks!
What you are looking for is:
window.location.replace('path/to/index2.html')
I'm not sure what your directory structure looks like but you can pass it a relative or absolute path.
you don't even need javascript for this purpose, just put this in your head section:
<meta http-equiv="refresh" content="5; url=index2.html">
it will redirect to index2.html after 5 seconds.
http-equiv means "http header equivalent". As you can guess it can also be a http header sent by the server so you can serve even pure txt documents and switch them using headers sent by server.
If you want to use the power of javascript, you don't need to switch between pages, you can simply hide one content or another which is pretty simple:
<pre id="verse1">
verse 1 here
</pre>
<pre id="chorus" style="display: none">
chorus here
</pre>
<script>
$(function () {
window.setTimeout(function () {
$('#verse1').hide();
$('#chorus').show();
}, 5000);
});
</script>

Smooth scrolling to anchor on another page

After combing the forums and how-to guides, I have found a solution to a Smooth Scrolling problem that I had, but I'd like to ask some kind folks if the solution below will work for me before I try it, or if I'm missing something important.
I'm working on a live site and I don't want to create problems or break anything, so I'd like to be sure before I add the code below. I also know nothing about java or coding, so please forgive me if I don't use the right terms.
I want to enable smooth scrolling to an anchor on another page.
e.g. from my home page "domain.com/home", click the link, then
load the new page, e.g. "domain.com/contact"
and on loading the new page, smoothly scroll to the anchor, "domain.com/contact#section1".
Currently, it simply jumps, and I'd like to know if the steps below will enable the smooth scrolling.
I'm planning to:
Add the following codes to the website template's '' section (in the Joomla admin panel):
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
</script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
I'm unsure whether this is necessary because I already use jQuery with some components, is it unnecessary to load jQuery again? Or will it not hurt to add this code regardless?
Then add this code to the same section in the template:
<script type="text/javascript" >
$('html').css({
display: 'none'
});
$(document).ready(function() {
var hashURL = location.hash;
if (hashURL != "" && hashURL.length > 1) {
$(window).scrollTop(0);
$('html').css({
display: 'block'
});
smoothScrollTo(hashURL);
} else {
$('html').css({
display: 'block'
});
}
});
function smoothScrollTo(anchor) {
var duration = 5000; //time
var targetY = $(anchor).offset().top;
$("html, body").animate({
"scrollTop": targetY
}, duration, 'easeInOutCubic');
}
</script>
As far as I know, this will enable the smooth scrolling, but I haven't added anything like 'smoothscroll.js' (which I've read a lot about) -- will that also need adding in the '' (after I upload it to the server), or is that included in the jQuery library?
I'm sorry if this seems very naive, I'm learning as I go. Thank you very much in advance to anyone who provides some feedback on this, I am truly grateful for your time and patience.
Best,
Ben
Firstly, Joomla already loads jQuery, so you do not need to load it again. I would either use a Joomla extension (there is a free one here) or use a smooth scroll library (like this one). Assuming you choose to do the latter, you just need to put the link in your Joomla template to the JS file and initialise it (this is all explained on the Github project page).
Both options are simple but if you don't have much experience in coding then the extension is probably the best way to go.
EDIT: To use smoothscroll on page load with the GitHub library, you will need to change your last function to:
function smoothScrollTo(anchor) {
var scroll = new SmoothScroll();
scroll.animateScroll(anchor);
}

jump page to id in an iframe

I have a web page (http://www.WillenhallPrimary.org/Science.shtml) which contains an iframe. The iframe includes an <h2 id="staff">Teachers</h2> tag which I'd like to jump to using the parent URL and a hash e.g. http://www.WillenhallPrimary.org/Science.shtml#staff. I'd also like to wait until the page loads before jumping. (I can use a ? instead of # if that's easier.)
The iframe is resized using onLoad:javascript (so it looks like a contiguous
page) which works nicely but I don't know if this is affecting it.
function rfs(){
_i=document.getElementById('ym')
_i.height=150
if(typeof _i.contentDocument!=='undefined'){
_cdd=_i.contentDocument.documentElement
_i.height=Math.max(_cdd.scrollHeight,_cdd.offsetHeight,_cdd.clientHeight)+25
}
else {
_cdb=_i.contentWindow.document.body
_i.height=Math.max(_cdb.scrollHeight,_cdb.offsetHeight,_cdb.clientHeight)+25
}
}
Is this possible? This sounds simple but I've spent hours looking and nothing's working. (I'm not an expert at this.) Is there a better way of doing it?
Any help greatly appreciated.
#mplungjan thanks for the redirect - that solved it straight away.
The code I ended up with is:
window.onload=function(){
if(window.location.hash!=''){
document.getElementById('iframe_id').contentWindow.location.hash=window.location.hash
}
}
seems to work ok. Very happy :-)

Is there a way to measure loaded content of page and show percentage of it?

I mean page preloaders where you see percentage of loaded page. Is it just fakened or is it truly a size of just loaded page related to whole page size? Is it possible to measure it with javascript? How developers make it? Here's example which seems to be kinda http://www.ultranoir.com/en/#!/home/
Have a look at the jPreLoader jQuery plugin
Using it is very simple :
$(document).ready(function() {
$('body').jpreLoader();
});
Most websites are faking it. I was also searching sometime ago and only found solution like this plugin:
see in action here http://www.inwebson.com/demo/jpreloader/
<script type="text/javascript" src="js/jpreLoader.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$('body').jpreLoader();
});
// ]]></script>
also check out this solution, it's probably the closest to the real thing:
http://www.seabreezecomputers.com/tips/progress.htm

Javascript function to reload a page every X seconds?

A couple of questions:
I've never really used JS listeners other than onclick and onkey events, so I wondered if someone could help me with what I need in order to reload the page every X seconds?
Secondly, the page contains bare minimum, literally just one input box. Do I still need to include the html head and body?
You don't need Javascript for this simple function. Add in the page header:
<meta http-equiv="Refresh" content="300">
300 is the number of seconds in this example.
To reload the page after 5 seconds (5000 milliseconds) using JavaScript, add the following to the bottom of the page:
<script type="text/javascript">
setTimeout(function () { location.reload(true); }, 5000);
</script>
As Greg Hewgill notes, you can also accomplish this with the meta refresh tag:
<meta http-equiv="Refresh" content="5">
Strictly speaking, you do still need <html> and <body> tags. Some browsers may render the page correctly without them, but your are safest to include them.
use a timer: http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/
and usee ajax to reload if it is dynamic
To your second question, ye you definitely do!!
Toy your first question check this out:
http://www.javascriptkit.com/script/script2/autofresh.shtml
Or this to do it without javascript:
http://webdesign.about.com/od/metataglibraries/a/aa080300a.htm
It does what you asked and is very easy to configure!

Categories