I am looking to achieve page transition effects between 2 web domains. One being mcpixel.co.uk/new and the second being mcpaper.co.uk. I own both of the domains. I would like it so that if the link in the header is clicked, the page fade transitions to the new page, so there isn't any white or flicker between pages. Programs primarily programmed in PHP with Javascript/JQuery (Latest as of writing) and CSS.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>
MCPaper - Your Number #1 Minecraft Newspaper
</title>
<meta name="description" content="A newspaper with news dedicated to Minecraft!">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/fonts.css" />
<script type="text/javascript" src="css/jquery.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#ip').click(function() {
$('.top-network').slideToggle("slow");
});
});
function toggle()
{
$('.top-network').slideToggle("slow");
}
</script>
</head>
<?php
if($_GET['ref']=='network')
{
echo "<body onload='toggle()'>";
echo "<center><div class='top-network' id='top-network'>";
echo "</div>";
}
else
{
echo "<body>";
echo '<center><div class="top-network" id="top-network" style="display: none;">';
echo "</div>";
}
?>
<div class="top">
<div class="top-container">
<div class="ip" id="ip">
<font color='yellow'>Click to see the RedstoneTor.ch Network</font>
</div>
This is the code I have, I haven't tried anything as I wouldn't know where to start.
On click hide the current page:
$('body').fadeOut('500');
Redirect to the new page:
window.location.href = "http://stackoverflow.com";
On the new page hide everything:
<body style="display:none;">
And script:
$(document).ready(function() {
$("body").fadeIn(2000);
});
But you might see a white page after fadeOut. It might be possible to make a better transition using an iframe...
You can do it simply with js/jquery:
On click event, fade out the page:
$('body').fadeOut('500');
Then redirect to the url you want.
Here is a tutorial: http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/
Related
I have all files zipped here if you want to view all of them yourself
So... Ace text editor has been really complicated for me to set up. I thought I had everything down, but no. So far, I have incorporated download buttons just fine. It took me a while, but then I went the hidden element way and did this.
function downloadHTML() {
var HTMLtextToSave = editor.getValue();
var HTMLhiddenElement = document.createElement("a");
HTMLhiddenElement.href = 'data:attachment/text,' + encodeURI(HTMLtextToSave);
HTMLhiddenElement.target = '_blank';
HTMLhiddenElement.download = 'untitled.html';
HTMLhiddenElement.click();
}
Everything worked great until I tried CSS. For some stupid reason, the getValue() decides to have a seizure everytime it sees a hashtag (#). It downloads all of the code up until it sees it, and then it stops. I really need a fix for this. I call my project GridOff for right now (beta). You can download what I have zipped right now here. Here is my HTML code for the HTML editor.
<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE HTML Editor</title>
<!-- Put editor language e.g.: Ace HTML Editor -->
<style type="text/css" media="screen">
#editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
<meta charset="UTF-8">
<!-- Defines character set -->
<link type="text/css" rel="stylesheet" href="../CSS/stylesheet.css">
<!-- CSS Stylesheet -->
<link type="image/x-icon" rel="shorcut icon" href="../Other/html5favicon.ico">
<!-- Favicon -->
<script type="text/javascript" src="../JavaScript/index.js"></script>
<!-- JavaScript Index -->
</head>
<body>
<div id="editnav">
<input type="button" id="downloadbtn" onclick="downloadHTML()" value="Download">
<input type="button" id="openbtn" onclick="openCode()" value="Open">
<input type="button" id="homebtn2" onclick="window.location.href = 'index.html';" value="Home">
</div>
<input type="button" id="togglebtn2" onclick="toggleVisibility2()" value="Toggle">
<div id="editor"><!DOCTYPE html>
<html>
<head lang="">
<meta charset="">
<link type="text/css" rel="stylesheet" href="">
<!-- CSS Stylesheet -->
<link type="image/x-icon" rel="shortcut icon" href="">
<!-- Favicon -->
<title></title>
</head>
<body>
<p>Ace HTML Editor</p>
</body>
</html></div>
<!-- In this div, put filler text -->
<!-- use < for < -->
<script src="../Other/Ace/ace-builds-master/src/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/html");
// editor.setTheme("ace/theme/themeHere")
// editor.session.setmode("ace/mode/languageHere")
</script>
</body>
</html>
Also, I cannot find a way for it to browse for only html files, open them in the editor, and edit them. If anyone has a solution to any of these issues that I'm having, feel free to comment. I'm looking for anything right now. Thank you StackOverflow!
You need to use encodeURIComponent instead of encodeURI to encode special characters like # or &
Or use
href = URL.createObjectURL(new Blob(value)], { type: "text/plain" }));
Here's my app.js file
<!DOCTYPE html>
<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">
<link href="/css/style.css" rel="stylesheet" type="text/css">
<script src="https://cdn.ckeditor.com/4.10.0/standard/ckeditor.js"></script>
<title>Jo Blog</title>
</head>
<body>
{{{body}}}
<script type="text/javascript" src="/js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/js/ckeditor/adapters/jquery.js"></script>
<script type="text/javascript">
// CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR;
CKEDITOR.replace('content', {
plugins: 'wysiwygarea , toolbar, basicstyles, link',
enterMode: CKEDITOR.ENTER_BR,
autoparagraph: false,
uiColor: '#AADC6E',
removePlugins: 'elementspath'
});
</script>
</body>
</html>
and here is the form I'm wanting it to affect - new.handlebars
<h1>New Blog</h1>
<form method="post" action="/blog">
<label>Title</label><br>
<input type="text" name="title"/><br>
<label>Blog Content</label><br>
<textarea name="content" id="ckEdit"></textarea><br>
<input type="submit" name="submit">
</form>
Now the editor comes up just fine and I can write in it but when I hit submit the HTML tags are still all there eg "< p >Hello World< p >"
I've googled the crap out of this problem, and read everything I can find on here about it and tried everything I have read but nothing is working :/ Any ideas??
I got your code to submit the form content and title without displaying the html tags in the browser.
The file ckeditor.js is loaded twice from two sources, once in the head by a cdn and again in the body. It's possible they are conflicting. I commented out the scripts in the body, and kept the cdn.ckeditor[...]ckeditor.js script in the head.
For testing purposes I removed the handlebars {{{body}}} and inserted the form directly into the html file.
I doubt the problem is in the form's action "/blog", but in order to see the returned result I changed the form's action to "form.php" (included below). The file form.php just sends the submitted content back to the browser. It does show the submitted content and title correctly displayed in the browser.
Here's "form.php" and the modified html files.
Hope this helps a little with trouble shooting.
form.php
<?php
$title = $_POST['title'];
$content = $_POST['content'];
print <<< PRINT
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>$title</title>
</head>
<body>
$content
</body>
</html>
PRINT;
?>
HTML file
<!DOCTYPE html>
<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">
<!--<link href="/css/style.css" rel="stylesheet" type="text/css">-->
<script src="https://cdn.ckeditor.com/4.10.0/standard/ckeditor.js"></script>
<title>Jo Blog</title>
</head>
<body>
<!-- changed the form's action from /blog to form.php for demo purposes -->
<form method="post" action="form.php">
<label>Title</label><br>
<input type="text" name="title"/><br>
<label>Blog Content</label><br>
<textarea name="content" id="ckEdit"></textarea><br>
<input type="submit" name="submit">
</form>
<!--
<script type="text/javascript" src="/js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/js/ckeditor/adapters/jquery.js"></script>
-->
<script type="text/javascript">
// CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR;
CKEDITOR.replace('content', {
plugins: 'wysiwygarea , toolbar, basicstyles, link',
enterMode: CKEDITOR.ENTER_BR,
autoparagraph: false,
uiColor: '#AADC6E',
removePlugins: 'elementspath'
});
</script>
</body>
</html>
i have two page test1.php and test2.php when i click on my button for going to test2.php my function not running in test2.php only if i put data-ajax="false" in said button it working but i want without disable ajax .. Is there a way ?
test1.php
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-
1.4.5.min.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
</head>
<body >
<div id="page-1" data-role="page" >
<div data-role="content">
click
</div>
</div>
</body>
</html>
test2.php
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-
1.4.5.min.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
</head>
<body >
<div id="page-1" data-role="page" >
<div data-role="content">
</div>
</div>
<script type="text/javascript">
$(function() {
alert("hi");
})
</script>
</body>
</html>
If you want to run an external function, you can just create a file, let's call it myfunction.js. Then you add it below you jquery includes, like this:
...
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
<script src="myfunction.js"></script>
And in "myfunction.js" you add this:
$("a").click(function(){
alert("Hi");
});
Kind of like I did in here: https://jsfiddle.net/uzt27mm2/ just call the script from an external .js file.
I've been wanting to make an image fadeout after a period of time. I've looked through the same topics found here in Stackoverflow but mine doesn't want to work.
If anyone could take a quick peek at my code I would be very grateful please?
The image I would like to fade is:
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>ACC BIC - Business Industry Description</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="images/favicon.png">
</head>
<body>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="container">
<div class="row">
<div class="twelve columns">
<!-- Bottom bar navigation -->
<div class="btn btn-two">
<span class="btn-two--link"></span>
<span class="btn-three--link"></span>
<span class="btn-four--link"></span>
<img id="myImage" class="email-sent-img" src="images/email-link-sent.png" alt="">
<script>
$(window).load(function(){
setTimeout(function(){ $('#myImage').fadeOut() }, 5000);
});
</script>
</div>
<!-- Background image -->
<img class="proto-img" src="images/cards-view-selected.png" alt="">
</div>
</div>
</div>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>
Have you given your page a link to the jQuery code. It doesn't look like you have, so the computer can't understand the
$(window).load() event or the $("#myImage").fadeOut() method. To fix this just add this line of code into the head section of your page-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
If you would prefer to use a later version of jQuery, you can look on the jQuery website for more information.
If this still doesn't work, try replacing the $("myImage").fadeOut() with $("#myImage").fadeTo("slow",0)
Hope this helps.
try
$(window).on('load', function () {
setTimeout(function () {
$("#image").fadeOut("slow", function () { // Instead of Slow you could add 5000 (5s)
// fade out complete if you need to run another event
});
}, 5000); // fade out starts after 5s
});
I have a div in which contains a td class='small' I want to use jQuery to remove this.
<td class="small" style="padding:8px 0;color:#999;vertical-align:middle;">
A bunch of gibberish...
</td>
In my main code I am using jQuery to extract a div from a file then replace the div in the main code with the extracted.
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta http-equiv="content-language" content="en">
<meta name="viewport" content="width=500" />
<title>Rooster Teeth News</title>
<link rel="stylesheet" type="text/css" href="site/wwwRand1.css">
<?php
include( 'site/simple_html_dom.php');
$html=file_get_html( 'http://roosterteeth.com/home.php');
$html->save('site/result.htm')
?>
<script type="text/javascript" src="site/jquery.js"></script>
<script type="text/javascript">
$('document').ready(function() {
$('#postsArea').load('site/result.htm #postsArea');
});
</script>
</head>
<body>
<div id="wrap">
<div id="postsArea"></div>
</div>
The problem I am having is that I can only remove the 'td' after the 'div' has been replaced. If anyone could help me I would really appreciate it. Thank you.
The load() method has a callback function so you could use:
$('#postsArea').load('site/result.htm', function(){
$('#postsArea td.small').removeClass('small')
});