I would like to know if it is possible to make fadings between two HTML-Documents.
I have a few HTML-Pages but let's make an example with two of them.
index.html, jobs.html
On both I have a menu with <a> buttons. What I want to do is:
I click on Jobs and index.html (which I am currently on) fades out and jobs.html fades in. Something like fading between divs but with a whole HTML document.
Any helps is much appreciated.
Hide the body using css.
Fade in the body
Click a button and grab its ID
Fade out the body
Navigate to the new url
<!DOCTYPE html>
<html>
<head>
<style>
body{
display: none;
}
.myBtn{
cursor: pointer;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
$(function(){
$('body').fadeIn();
$('.myBtn').click(function(){
url = $(this).attr('id') + '.html';
$('body').fadeOut(function(){
window.location = url;
});
});
});
</script>
</head>
<body>
<h1>index.html</h1>
<div class="myBtn" id="index">index</div>
<div class="myBtn" id="jobs">jobs</div>
</body>
</html>
http://jsfiddle.net/Dp4Hy/
PS. obviously the fiddle won't work, as you're trying to navigate to a new page, but you can still see the fade in at the beginning, and fade out when you click a button. Just need this script included for all pages to use.
Bottom line, this is not possible without some kind of pre-loading and interaction with a server side component
I would personally recommend PJAX. http://pjax.heroku.com/ It allows you not only catch an event and load a document based on the event, it updates the browser state, url, title, the back button works, etc.
example sites that use it to accomplish similiar behavior
http://bleacherreport.com/articles/1716958-the-top-10-fantasy-qbs-for-2013
http://reciperehab.com/blog/post/the-6-best-salads-for-spring
*disclaimer, I did the second one...
Create your anchor tag and set a javascript onclick event. Call your fadeOut() function (which i've pasted below) You'll want it to fade out when you click, and when the next page loads, you'll want it to fade in:
jsfiddle: http://jsfiddle.net/HmGap/3/
HTML:
<script type="text/javascript">
window.onload=function(){fadeIn('body')};
</script>
<div id="body">
Content <br /><br />
<a onClick="fadeOut('body')" style="cursor:pointer">Click Me to Fade Out</a>
</div>
Javascript:
//fadeEffects
var fade_in_from = 0;
var fade_out_from = 10;
function fadeIn(element){
var target = document.getElementById(element);
target.style.display = "block";
var newSetting = fade_in_from / 10;
target.style.opacity = newSetting;
// opacity ranges from 0 to 1
fade_in_from++;
if(fade_in_from == 10){
target.style.opacity = 1;
clearTimeout(loopTimer);
fade_in_from = 0;
return false;
}
var loopTimer = setTimeout('fadeIn(\''+element+'\')',100);
}
function fadeOut(element){
var target = document.getElementById(element);
var newSetting = fade_out_from / 10;
target.style.opacity = newSetting;
fade_out_from--;
if(fade_out_from == 0){
target.style.opacity = 0;
target.style.display = "none";
clearTimeout(loopTimer);
fade_out_from = 10;
return false;
}
var loopTimer = setTimeout('fadeOut(\''+element+'\')',100);
window.location.href = "link.html";
}
Yes, it's possible, you can append the html in DIV (like you know), or you can use iframes, to manager the fade of the iframe tag
Related
Currently I'm using WordPress and Elementor for my website builder. I want to prevent scrolling on my page before clicking specific button. The script that I use is working to prevent the scrolling but after I click the button it still prevent my webpage to scroll. Im using this code:
<script>
disableScrolling()
document.body.style.overflowY = "hidden";
document.body.style.heigth="100vh"
document.getElementById("open-invitation").onclick = function() {
myFunction()
};
function myFunction() {
playAudio()
document.body.style.overflowY = "unset";
enableScrolling()
}
function disableScrolling(){
var x=window.scrollX;
var y=window.scrollY;
window.onscroll=function(){
window.scrollTo(x, y);
};
}
function enableScrolling(){
window.onscroll=function(){};
}
</script>
This code work well for prevent scrolling but when I click the button with the Id "open-invitation" that I set the onclick function it still prevent scrolling and stuck my page on the first column
I have try to separate the onclick function and put it beside the button that assign to it and still didn't work I'm using elementor and also I put every id and CSS id with "open-invitation" and also it wont help
<html>
<head>
<title>How to disable scrolling using JavaScript?</title>
<style>
.scrollable-place {
height: 3000px;
}
</style>
</head>
<body>
<h1 style="color:blue">
Welcome To Our Website
</h1>
<p>Click the buttons below to enable or disable scrolling.</p>
<p class="scrollable-place">
<button>Disable Scrolling</button>
<button>Enable Scrolling</button>
</p>
</body>
<script>
functiondisable() {
// To get the scroll position of current webpage
TopScroll = window.pageYOffset || document.documentElement.scrollTop;
LeftScroll = window.pageXOffset || document.documentElement.scrollLeft,
// if scroll happens, set it to the previous value
window.onscroll = function() {
window.scrollTo(LeftScroll, TopScroll);
};
}
functionenable() {
window.onscroll = function() {};
}
</script>
</html>
I have a div id="coding" set on height:300px on CSS.
when I click another div id="menu", I want #coding to change it's height to 800px. I managed to do that like this
<script>
function changec() {
document.getElementById('coding').style.height = "800px";
}
</script>
Now, when click the #menu again, I want the height to get back to it's original 300px value. Can someone help? The code is:
HTML
<div id="coding">
<div id="menu" onclick="changec()">≡</div>
...
</div>
CSS
#coding{
...
height:300px;
}
Simple check if the value is set - remove it (then CSS height will take over).
function changec() {
var xDiv = document.getElementById('coding');
if (xDiv.style.height == '')
xDiv.style.height = '800px'
else
xDiv.style.height = ''
}
Demo: http://jsfiddle.net/ygalanter/BLE6N/
one of the solution for your problem is as follows:
First count how many times you click on #menu
now depending on your expectation you can change the javascript as follows
<script type="text/javascript">
var count = 0;
function changec() {
count++;
if(count%2==1)
document.getElementById("coding").style.height = "800px";
else
document.getElementById("coding").style.height = "300px";
}
</script>
Another alternative solution is
<script type="text/javascript">
function changec() {
var currentheight = document.getElementById('coding').clientHeight;
if (currentheight == 300)
document.getElementById('coding').style.height = "800px";
else if (currentheight == 800)
document.getElementById('coding').style.height = "300px";
}
</script>
Not sure why you tagged jQuery since you didn't use it, but still...Considering the possibility that you are willing to use/learn it, I created a jsFiddle for it: http://jsfiddle.net/Tm2Hd/.
CSS:
#coding{
border:1px solid black; /*optional: Keep track of your div's expand*/
height:300px;
}
#coding.larger{
height:800px;
}
JS:
function changeHeight() {
if($('#coding.larger').length>0)
{
$('#coding').removeClass("larger");
}
else
{
$('#coding').addClass("larger");
}
}
HTML
<div id="coding">
<!--<div onclick="changeHeight()">≡</div>
Personally, I don't suggest using divs as clickable objects... Why don't you use buttons instead?
-->
<button onclick="changeHeight()">≡</button>
...
</div>
My solution to your problem is: Create a new class named larger, pointing to your div, and toggle between this and the original whenever you click the button.
First disclosure: I have a lot of scripts running on this particular page.
I have a div of text that I have on page load, now there is a specific link which is toggled to this text, based on clicking on the link. WHEN the page is loaded, I want just the link to be a certain color.
Here is what I have for the text so far... which is displaying on pageload:
<script>
window.onload=function showDiv() {
document.getElementById('d1').style.display = "block";
}
</script>
Now I need to have my link a specific color on page load, but that color must be able to change back to its CSS default when another link is clicked:
Innovative Design Methodology
Like I said, there are other scripts I have running on this page, hence you see in the link.
Just for fun, here's my other code (toggling text & highlighting code):
<script type="text/javascript">
var currentItem;
function unhide(divID) {
if (currentItem) {
currentItem.className = 'hidden';
currentItem = null;
}
var item = document.getElementById(divID);
if (item) {
item.className = 'unhidden';
currentItem = item;
}
}
</script>
<script type="text/javascript">
var currentLink = null;
function changeLinkColor(link){
if(currentLink!=null){
currentLink.style.color = link.style.color;
}
link.style.color = '#f5b331';
currentLink = link;
}
</script>
You could add a css class on the anchor tag initially (which has your custom styling) and remove it on click on any of the links.
Your HTML
<a id="link1" class='CustomColor'></a>
And your CSS
.CustomColor
{
color:red;
}
And On click of any link,
document.getElementById("link1").className =
document.getElementById("link1").className.replace('CustomColor','');
Essentially what I am trying to do is create a website that has all of its content on the home page but only has some of the content visible at any one time. The way I read to do this is through toggling visibility.
The problem I am having is that: Assume the home page, when you first visit the website is blank (the way I want it to be). Lets say you click on the "about us" link. All of a sudden the about us section becomes visible (the way I want it to be). Now the problem that I have come across is when I know lets say click on the "products" link, I want the "products" content to become visible and the "about us" content to become invisible again. (Essentially creating the illusion of opening a new page within the same page).
Here is the code I have come up with so far. I can make certain div elements visible and invisible (onclick) but I can't figure out how to make sure only one div element is visible at any one time.
<script type="text/javascript">
function toggleVisibility() {
document.getElementById("about").style.display = "";
if(document.getElementById("about").style.visibility == "hidden" ) {
document.getElementById("about").style.visibility = "visible";
}
else {
document.getElementById("about").style.visibility = "hidden";
}
}
</script>
<script type="text/javascript">
function toggleVisibility1() {
document.getElementById("products").style.display = "";
if(document.getElementById("products").style.visibility == "hidden" ) {
document.getElementById("products").style.visibility = "visible";
}
else {
document.getElementById("products").style.visibility = "hidden";
}
}
</script>
The links to make the JavaScript work looks like this:
< href="#" onclick="toggleVisibility();">About
< href="##" onclick="toggleVisibility1();"> Products
here is another, simple function
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
if you click here, #foo will change visibility
<div id="foo">blablabla</div>
Without jQuery, you would want to do something like this:
<style type="text/css">
.content {
display: none;
}
#about {
display: block;
}
</style>
<script type="text/javascript">
function toggleVisibility(selectedTab) {
// Get a list of your content divs
var content = document.getElementsByClassName('content');
// Loop through, hiding non-selected divs, and showing selected div
for(var i=0; i<content.length; i++) {
if(content[i].id == selectedTab) {
content[i].style.display = 'block';
} else {
content[i].style.display = 'none';
}
}
}
</script>
About
Products
<div id="about" class="content">About stuff here</div>
<div id="products" class="content">Product stuff here</div>
Example here: http://jsfiddle.net/frDLX/
jQuery makes this much easier, but if you are beginning with JavaScript, sometimes you want to see the programmatic code, so you can tell what is going on.
This is exactly what jquery makes easier. Take this very simple example of what you're trying to achieve:
<style type="text/css">
.section {
display: none;
}
</style>
<script type="text/javascript">
function toggleVisibility(newSection) {
$(".section").not("#" + newSection).hide();
$("#" + newSection).show();
}
</script>
About
Products
<div id="about" class="section">about section</div>
<div id="products" class="section">products section</div>
Simple solution is like this:
<script type="text/javascript">
function toggleVisibility(divid) {
if (divid="about"){
document.getElementById("about").style.visibility = "visible";
document.getElementById("products").style.visibility = "hidden";
}
else if (divid="products")
{
document.getElementById("products").style.visibility = "visible";
document.getElementById("about").style.visibility = "hidden";
}
}
</script>
< href="#" onclick="toggleVisibility('about');">About
< href="##" onclick="toggleVisibility1('products');"> Products
use CSS display: property
element disappear
document.getElementById("products").style.display = "none";
element appear and is displayed as block (default for div)
document.getElementById("products").style.display = "block";
I posted sample code here: jQuery: menus appear/disappear on click - V2
PS
Here you can find nice examples about differences between display and visibility: http://wiw.org/~frb/css-docs/display/display.html
I'm pretty new to javascript and programming and have run into a brick wall with my project. I have a div which contains the javascript to embed a quicktime player, when the page is first loaded no .mov file is pointed at by the page so a placeholder div is 'unhidden' and the player div is set to style.display = 'none'.
So far so good, the user then enters the name of the new movie, the placeholder div is hidden and the player div is unhidden. My problem is that the javascript in the player div didn't run when the div was made visible, if I make the script for the player into a seperate function then call it when the player div is unhidden then the player runs full screen and not in the div.
I've tried using jquery to add the javascript into the div after the div is made visible but can't seem to get $("#player").load(somescript) or $("#player").html(htmlwithjavain) to add the script.
I know the player div contenst can be changed as I can use $("#player").empty(); and $("#player").html(); to manipulate it.
Thanks for reading, hope you can help
Here's the relevant code:-
<html>
<head>
<title>Browse Media Player</title>
<link rel="stylesheet" type="text/css" href="CSS/browser.css" />
<script type="text/javascript">
<!--
var userinterrupt=false;
var runonce=false;
var currentfile;
var basemediapath = "http://10.255.10.71/IsilonBrowse/movfiles/";
var playerheight = 750;
var playerwidth = 900;
var currenttc;
var basetime;
var baseduration;
var currentduration = "no tc available";
var tcoffset = 35990;
var playspeed = 1;
var boolisplaying=true;
var boolonslide=false;
//function to fire off other methods when the DOM is loaded
//Use in place of body onload, using jquery library
//
$(document).ready(function()
{
//showEvents('jquery running');
showhideplayer(null);
});
//-->
</script>
</head>
<body onload="forceslider(); timecode()">
<div class="container">
<div id="timecode_container">
<div class="tc_overlay"></div>
<div id="timecode" class="timecode"></div>
</div>
<div id="player" class="playerdiv" style="display:none;">
**javascript for player goes here...**
</div>
<div id="noclipoverlay" class="playerdiv" style="display:none;">
<p>No media loaded...
</div>
<div id="noclipoverlay2" class="playerdiv" style="display:none;">
<p>loading media....
</div>
</div>
<div id="loadstatus"></div>
<div id="alerts"></div>
</body>
</html>
Now the mainstuff.js file which should add the javascript code:-
//function to switch the player div and mask div is no media file is
//defined in the 'currentfile' variable
//
function showhideplayer(state)
{
if (!currentfile)
{
showEvents('wtf no media');
document.getElementById("player").style.display = 'none';
document.getElementById("noclipoverlay").style.display = 'block';
}
else if (currentfile)
{
document.getElementById("player").style.display = 'block';
document.getElementById("noclipoverlay").style.display = 'none';
showEvents('valid media file');
}
}
//end of showhideplayer
//function to change movie files, note SetResetPropertiesOnReload must be set to false
//otherwise the B'stard player will default all attributes when setURL runs
//
function changemovie(newmovie)
{
oldfile = currentfile;
if (newmovie == currentfile)
{
showEvents('same file requested so no action taken');
return;
}
if (newmovie != currentfile)
{
showEvents('changing movie');
//switch the divs around to hide the 'no media slide'
document.getElementById("player").style.display = 'block';
document.getElementById("noclipoverlay").style.display = 'none';
}
showEvents('movie changed to: '+newmovie);
currentfile=newmovie;
if (!oldfile)
{
$("#player").empty();
showEvents('the old media file was blank');
$("#player").load("/path/loadplayer.js");
}
document.movie1.Stop();
document.movie1.SetResetPropertiesOnReload(false);
document.movie1.SetURL(currentfile);
//showEvents('movie changed to: '+newmovie);
if (boolisplaying)
{
document.movie1.Play();
}
}
[EDIT] and here's the contents of loadplayer.js:-
var movie1 = QT_WriteOBJECT(
currentfile, playerwidth, playerheight, "",
"controller","false",
"obj#id", "movie1",
"emb#id","qt_movie1",
"postdomevents","True",
"emb#NAME","movie1",
"enablejavascript","true",
"autoplay","true",
"scale","aspect",
"pluginspage","http://www.apple.com/quicktime/download/"
);
Without knowing the content of your loadplayer.js file, it will be difficult to give you a solution.
For example, if the script attempts to do a document.write() after the page has loaded, it will create a new page, overwriting the current page. Is that what you mean when you say the quicktime movie is running full screen?
Also it is generally not a good idea to load a SCRIPT element and insert it as HTML. When you add HTML to the page, jQuery finds all the SCRIPT elements and evaluates them in a global context, which might give you unexpected results.
Use QT_GenerateOBJECTText_XHTML or QT_GenerateOBJECTText from AC_QuickTime.js if you'd like to return a string.