JavaScript change page effect - javascript

Hi by any chance anyone will know how to do the fade in fade out change page effect in JavaScript?
Like this..
http://soulwire.co.uk/hello
I have tried this..
But when fadeout is not linking together..I mean not smooth like the above website.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('body').css('display', 'none');
$('body').fadeIn(1000);
$('.link').click(function() {
event.preventDefault();
newLocation = this.href;
$('body').fadeOut(2000, newpage);
});
function newpage() {
window.location = newLocation;
}
});
</script>
Sorry am just think of....does background slideshow will work??? But on top can I add php/html code?
Another example...http://www.louisebradley.co.uk/portfolio/

Hey try the below code
See its WORKING DEMO
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery.js"></script>
<script type="text/javascript">
function Close()
{
$('#div1').animate({ height: 50 });
}
function Open()
{
$('#div1').animate({ height: 100 });
}
</script>
</head>
<body>
<div id="div1" style="width:100%; height: 50px; background-color: #C0C0C0;" onmouseover="Open()" onmouseout="Close()"></div>
</body>
</html>
Also take a look at these stuffs
Fade in div on page load
JavaScript Fade Tutorial – Fading Elements In/Out
How to: javascript fade in fade out text
.fadeIn() Tutorial

Related

Adding a click function to a image element

I am trying to add 2 simple click functions to 2 images and make them "active" when clicked, however for some reason the code is not working.
This is the link to the external file:
<head>
<link href="bootstrap.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.leanModal.min.js"></script>
<script type="text/javascript" src="likeandshare.js"></script>
<link type="text/css" rel="stylesheet" href="blogformat.css" />
<script type="text/javascript" src="likeandshare.js"></script>
</head>
This is the html:
<div class="blog-header">
<h1>This heading should be center aligned and colored</h1>
<p>Italised date and Author entered here</p>
<div id="facebook-like-button">
<img src="images/facebook_like_button_big.jpeg">
</div>
<div id="facebook-share-button">
<img src="images/facebook-share.png">
</div>
</div>
This is the js code:
$(document).ready(main);
var like = function() {
$("#facebook-like-button").click(function() {
$(this).toggleClass("active");
});
};
I'm not sure why the div is not becoming active when clicked but I would also like to attach the function ONLY to the image, rather than the entire div.
Help :D
thanks.
As far as I'm aware, your code should be working. You must be incorrectly calling the ready function.
working example http://jsfiddle.net/2j0s1j8v/3/
All of these events fire back:
share = document.getElementById("facebook-share-button");
share.onclick = function(){
console.log("ONCLICK");
}
share.addEventListener("click", function(){ console.log("CLICK LISTENER"); } );
$("#facebook-share-button").click(function() {
console.log("JQUERY CLICK");
});
Check the console and look at the messages. All of them fire properly. f12 on chrome.
You can simply do this :
$(document).ready(function(){
$("#facebook-like-button").find('img').click(function() {
$(this).toggleClass("active");
});
});
first include jquery
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="likeandshare.js"></script>
</head>
second you create a like function and use main function .. you have a main function also or bad typo or what anyway in your case it should be
$(document).ready(like);
if you want to select an image inside the div just use > a >img
var like = function() {
$("#facebook-like-button > a > img").click(function() {
$(this).toggleClass("active");
});
};
https://jsfiddle.net/2j0s1j8v/4/
Like button
$("#facebook-like-button img").click(function () {
$(this).toggleClass("active");
});
Share button
$("#facebook-share-button img").click(function () {
$(this).toggleClass("active");
});
Here is a working example if I understand correctly what you wanted.
adds active class to the image on click.
EDIT: added share as well

Open a new page in a new window, print it and closed it

I still can't get this code to work, I am trying to use the "onClick" to swap the image once clicked, open this new page in a new window, print this new opened window and closed it. It opens the new page on the new window, but it prints a blank page and it cant close it, it seems that the focus is not been set somehow. Can any one help me on tis? Thanks!
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Print it</title>
<!--style type="text/css" media="print"> .noprint {visibility: hidden;} </style-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".img-swap").live('click', function() {
if ($(this).attr("class") == "img-swap") {
this.src = this.src.replace("_off","_on");
} else {
this.src = this.src.replace("_on","_off");
}
$(this).toggleClass("on");
});
});
</script>
<script type="text/javascript">
// <!--
Popup = {
init : function () {
$('a.action_print').bind('click', Popup.printIt);
},
printIt : function () {
var win = window.open('doc1.html','Printed','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=350,height=250');
if (win) {
win.document.close();
win.focus();
win.print();
}
return false;
}
}
$(document).ready(function () {
Popup.init();
});
// -->
</script>
</head>
<body>
<br>
CLick to Print:<br><br>
<p style=" padding: 125px 0; text-align: center;">
<a class="action_print" target="Printed"><img src="images/cam_off.png" class="img-swap" width="100" height="100" /></a>
</p>
</body>
</html>
Thanks for looking!
I figured it out, all works, I just had to make sure that my files I am printing leave in the same domain. I hope it can help others in need for such a thing, but any improvements on the code are welcome.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Open n Print</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type='text/javascript'>//<![CDATA[
$(function(){
function openPrintWindow(url, name, specs) {
var printWindow = window.open(url, name, specs);
var printAndClose = function () {
if (printWindow.document.readyState == 'complete') {
clearInterval(sched);
printWindow.print();
printWindow.close();
}
}
var sched = setInterval(printAndClose, 200);
};
jQuery(document).ready(function ($) {
$(".test").on("click", function (e) {
var myUrl = $(this).attr('data-url');
alert(myUrl);
e.preventDefault();
openPrintWindow(myUrl, "to_print", "width=700,height=400,_blank");
});
});
});//]]>
</script>
</head>
<body>
</br>
<a class="test" href="javascript:;" data-url= "doc.html">open print and close doc</a>
<br />
</body>
</html>
The printIt looks weird. At first you close the document, then try to print the content. Try this:
if (win) {
win.focus();
win.print();
win.close();
}
Closing document won't close window, hence win.close(). Notice also the line order.
Also, jQuery 1.4 is quite old, have you considered to update to a newer version?
You may put your javascript/JQuery code in the place where I put the window.print();
ScriptManager.RegisterStartupScript(this, typeof(Page), "UpdateMsg", "window.print();", true);
To let the full content of the window load properly, change the
printWindow.close()
to
printWindow.onfocus=function(){ printWindow.close();}
See Close window automatically after printing dialog closes

How do I make my jquery loading spinner automatic?

I used a JQuery waiting spinner demo from Github and modified it to my liking. I want the spinner to initiate automatically as soon as the page appears (giving time for the larger images on the page to load), however at the moment one has to click 'start waiting' for the spinner to appear.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link href="waiting.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
margin: 50px;
}
.content {
margin-bottom: 50px;
max-width: 500px;
}
button.waiting-done {
display: none;
}
</style>
<!--script src="../libs/jquery/jquery.js"></script-->
<script src="jquery-2.0.2.min.js"></script>
<script src=" jquery.waiting.min.js"></script>
<script type="text/javascript">
$(function () {
var content = $('.content').first().html();
$('button').on('click', function () {
$(this).toggle().siblings('button').toggle();
if ($(this).hasClass('waiting-done')) {
$(this).siblings('.content').waiting('done')
.html(content.substring(0,Math.random() * content.length) + '...');
}
});
});
</script>
</head>
<body>
<div id="demo-fixed">
><button type="button" class="waiting">► start waiting</button>
><button type="button" class="waiting-done">■ waiting done</button>
<div class="content">
</div>
</div>
<script type="text/javascript">
$('#demo-fixed button.waiting').on('click', function () {
var that = this;
$(this).siblings('.content').waiting({ fixed: true });
setTimeout(function() {
$(that).siblings('button').click();
}, 3000);
});
</script>
</body>
</html>
This is my first post so I hope I've given enough info for people to understand. I could copy the JQuery but there's too much and i'm not sure on the relevant part.
Thanks in advance for any help.
jQuery has a nice tool built in for that -- you'll want to read the documentation
$(document).ajaxStart(function() {
//start spinner
});
$(document).ajaxStop(function() {
//stop spinner
});
$(document).ajaxError(function(event, jqXhr, ajaxSettings, thrownError) {
// handle the error
});

jQuery mobile popup is not closing

sorry for not supplying a fiddle, I can't get it set up there.
However, I use the following code to programatically open and close a popup. Only that it doesn't close and stays open. What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>
<script>
$(document).ready(function()
{
$("#initialpopup").popup("open");
setTimeout(function()
{
$("#initialpopup").popup("close");
}, 500);
});
</script>
</head>
<body>
<div data-role="page" data-theme="a" data-content-theme="c">
<div data-role="popup" id="initialpopup" data-overlay-theme="a" data-theme="a">Foobar</div>
</div>
</body>
</html>
you can try
$('#initialpopup').popup('open', {transition: 'pop'});
window.setTimeout('$("#initialpopup").popup("close");', 500);
I am not sure if this is the same case as the one reported here, but I had the same problem and fixed it with this extra CSS:
.ui-popup-container [data-role=popup] {
visibility: hidden;
}
.ui-popup-container.ui-popup-active [data-role=popup] {
visibility: inherit;
}
.ui-popup-screen.out {
visibility: hidden;
}
I believe there was a screw-up in the library at some point in time, or we might be missing something...
I feel this is related to the animations somehow, but I haven't found a way to properly fix it.

Scrolling through div with JavaScript

I am trying to show one div at a time and scroll trough them over and over. I have modified a Fiddle I found and I got it working on fiddle, but for some reason I cant implement a simple test page with the fiddle. It simply does not scroll trough the divs.
Here is the fiddle: http://jsfiddle.net/Twistar/d6nZP/86/
And here is my implemented code:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="styles/styles.css">
<script type="text/javascript" src="includes/headers/jquery.min.js"></script>
<script type="text/javascript">
function go() {
var visibleBox = $('#container .boxes:visible');
visibleBox.hide();
var nextToShow = $(visibleBox).next('.boxes:hidden');
if (nextToShow.length > 0) {
nextToShow.show();
} else {
$('#container .boxes:hidden:first').show();
}
return false;
}​
setInterval(go, 1000);​
</script>
</head>
<body>
<div id="container">
<div class="boxes" style="display:">first box</div>
<div class="boxes" style="display:none;">second box</div>
<div class="boxes" style="display:none;">third box</div>
<div class="boxes" style="display:none;">forth box</div>
</div>
</body>
Can anyone please tell me what i am doing wrong?
I am guessing that you have a working fiddle but on your local test page its not working
your fiddle works because you got selected the default handlers from left handside dropdowns and its not working on your test page because your jquery handler is missing.
the reason is you are missing the document ready handler here:
$(function(){
setInterval(go, 1000);
});
try replacing with this one and see if helps.
I would probably simplyfy and would go with something like this: http://jsbin.com/osepim/1/
$(function() {
// hide all and show first
$(".boxes").hide().first().show();
setInterval(function(){
moveNext();
}, 1000);
});
function moveNext() {
var box = $(".boxes:visible"),
nextBox = box.next();
if(nextBox.length === 0)
nextBox = $(".boxes:first");
//hide all
$(".boxes").hide();
// show next
nextBox.fadeIn();
}
you need to wrap your javascripts code with the ready event $(document).ready() or use the short version $() and that will only excecute your codes when the page is finished loading so your codes should looks something like that
$(function(){
function go() {
var visibleBox = $('#container .boxes:visible');
visibleBox.hide();
var nextToShow = $(visibleBox).next('.boxes:hidden');
if (nextToShow.length > 0) {
nextToShow.show();
} else {
$('#container .boxes:hidden:first').show();
}
return false;
}​
setInterval(go, 1000);​
});
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="styles/styles.css" />
<style type="text/css">.boxes{display:none}</style>
</head>
<body>
<div id="container">
<div class="boxes">first box</div>
<div class="boxes">second box</div>
<div class="boxes">third box</div>
<div class="boxes">forth box</div>
</div>
<script type="text/javascript" charset="utf-8" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
function go() {
var visibleBox = $('#container .boxes:visible'); // GET THE DIV
visibleBox.hide();
var nextToShow = $(visibleBox).next('.boxes:hidden');
if (nextToShow.length > 0) { // SHOW NEXT ITEM
nextToShow.show();
} else {
$('#container .boxes:hidden:first').show();
}
return false;
}​
setInterval(go, 1000);​ // MS SECOND OF LOOP
</script>
</body>
</html>

Categories

Resources