How to fade out a page then direct to a new page - javascript

I was just wondering how to fade out a page then open up another html page. Right now I have:
<div class="close" onclick="window.location.href='../index.html';">
<div class="lr">
<div class="rl"></div>
</div>
<script>
$(function() {
$('.close a').click(function() {
var destination = this.href;
$('body').fadeOut(2000, function() {
window.location = destination;
});
});
return false;
});
});
</script>
</div>
I want it so that when "close" is clicked, the page fades out then then opens up my index.html page?
Currently my code is not working :(.
Thanks in advance!

Try this
HTML
<div class="close" data-link="https://www.youtube.com">
<div class="lr">
<div class="rl">LOREM IPSUM DOLORs</div>
</div>
</div>
JS
$('.close').click(function() {
var destination = $(this).data("link");
$("body").fadeOut(1000,function(){
window.location.replace(destination);
});
});

There is no a tag in your html. This code should work.
<div class="close" onclick="window.location.href='../index.html';">
<div class="lr">
<div class="rl"></div>
</div>
<script>
$(function() {
$('.close').click(function() {
var destination = this.href;
$('body').fadeOut(2000, function() {
window.location = destination;
});
});
return false;
});
});
</script>
</div>

Your JavaScript has an extra closing bracket and closing parenthesis. You are also missing your a
<div class="close">
Click Here
<div class="lr">
<div class="rl"></div>
</div>
<script>
$(function() {
$('.close a').click(function(e) {
e.preventDefault();
var destination = this.href;
$('body').fadeOut(2000, function() {
window.location = destination;
});
});
return false;
});
</script>
JS Fiddle: https://jsfiddle.net/4wz9uqwd/

$(document).ready(function() {
$(window).bind("unload", function() {
});
$("body").css("overflow", "scroll");
$("body").fadeIn(2000);
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1500, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
Live example:
www.damianodesign.com

Related

How to prevent default action of all anchor tag from opening href URL

I want to learn how to use:
document.getElementById("myAnchor").addEventListener("click", function(event){
event.preventDefault()
});
or any other way to prevent default action of all anchor tag from opening href URL in it using any ways in core javascript or minified javascript and open the URL in EventListener.
var imgurl = "http:"+lcurl+touch_id+".jpg";
var data = "<div id=charm_"+touch_id+" data-charmid="+touch_id+" data-vis="+bgid+" data-vid="+seid+" data-vtitle="+vtitle_url+" data-title="+title_url+" style='float:left;' class='mdl-cell mdl-cell--4-col charm-wrapper'>\n\
<div class='mdl-card-wrapper charm-inner'>\n\
<div class='demo-card-wide mdl-card mdl-shadow--8dp'>\n\
<div class='mdl-card__media'>\n\
"+locicon+"\n\
<a id="myAnchor" href = '"+popupurl+"'>\n\
<div style='position:relative;'>\n\
<div style='position:absolute;z-index:9;right:0px;bottom:0px;'><img width=32px src="+cf_assets+"img/hanger.png></div>\n\
<div id=imagearea_"+touch_id+" title='"+title+"' class='imagearea loading'>\n\
</div></div></a>\n\
</div>\n\
<div class='mdl-card__title'>\n\
<div class='right-charm'>\n\
<div class='social-share'>\n\
"+copycontent+"\n\
"+watsapp+"\n\
<a onclick=sharetofb('"+ct_domain+socialshare_url+"'); title='Facebook' id=fb"+touch_id+" \n\
class='fb_share'></a>\n\
<a onclick=sharetotwitter('"+ct_domain+socialshare_url+"'); title='Twitter' id=tw"+touch_id+" class='tw_share'> </a>\n\
</div>\n\
</div>\n\
<div class='icharm'>\n\
<h2 class='mdl-card__title-text'>"+subtitle+"</h2>\n\
<div class='mdl-card__subtitle-text'>"+title+"</div>\n\
<div id=vid_"+touch_id+" class='mdl-card__subtitle-videoname'>"+videoname+"</div>\n\
</div>\n\
</div>\n\
</div>\n\
</div>\n\
</div>";
$('#main-home-page-inner').add(HTML(data));
callcloudinary(imgurl,title,touch_id);
callmasonry();
if(i == setarr.length-1){
localStorage.touchids=touchid_arr.join(",");
localStorage.searchresults=gcharmarr.join(",");
}
// document.getElementById("main-home-page-inner").innerHTML += html;
}
/* document.getElementById("fb"+touch_id).setAttribute("onclick","sharetofb('"+title+"','"+text+"','"+ct_domain+socialshare_url+"','"+social_domain+lcurl+touch_id+".jpg')");*/
}
document.getElementById("myAnchor").addEventListener("click", function (event) {
event.preventDefault();
openpopup('"+popupurl+"');
sendpym('"+touch_id+"','0');
});
})
.error(function(status, statusText, responseText) {
//console.log(statusText);
//console.log(responseText);
});
I would use .getElementsByTagName() to get an array of all anchor tags on the page, you can then loop through these adding a similar event listener to the one mentioned in your question.
I've create a Fiddle but the gist is:
var test = document.getElementsByTagName("a");
for(i = 0; i < test.length; i++ ){
test[i].addEventListener("click", function(e) {
e.preventDefault();
});
};
Mostly in React use like this:
const = someEventHandeler = (event) => {
event.preventDefault();
}

Replace Log In text to say Logged in with jquery

I am fairly new to this and I need help making the link "login" to be replaced with logged in after clicking submit with javascript/jquery.
Here is what I have on my index page. Currently I have a pop up login page and I need to stop the function after clicking the word submit and then replace login with logged in.
This is a simple demo site and only needs simple code. Thank you!
<Head>
<script type='text/javascript' charset='utf-8'>
$(document).ready(function(){
$('.popbox').popbox();
});
<div id= "toggle" class='popbox'>
<a div id=login class='open' href='#'>Login</a>
<div class='collapse'>
<div class='box'>
<div class='arrow'></div>
<div class='arrow-border'></div>
<form name="myform" action="#" method="post" id="subForm">
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'193731474136796', cookie:true,
status:true, xfbml:true
});
</script>
<img src="facebookbutton.png">
<script>
//your fb login function
function fblogin() {
FB.login(function(response) {
//...
}, {scope:'read_stream,publish_stream,offline_access'});
}
</script>
<div class="line-separator"></div>
<div class="input">
<input type="username" name="cm-name" id="name" placeholder="Username" />
</div>
<div class="input">
<input type="password" name="cm-password" id="password" placeholder="Password" />
</div>
<input type="submit" value="login" id="submit" /> Forgot Username or Password?
</form>
And I have a linked javascript page for the popup.
(function(){
$.fn.popbox = function(options){
var settings = $.extend({
selector : this.selector,
open : '.open',
box : '.box',
arrow : '.arrow',
arrow_border : '.arrow-border',
close : '.close'
}, options);
var methods = {
open: function(event){
event.preventDefault();
var pop = $(this);
var box = $(this).parent().find(settings['box']);
box.find(settings['arrow']).css({'left': box.width()/2 - 10});
box.find(settings['arrow_border']).css({'left': box.width()/2 - 10});
if(box.css('display') == 'block'){
methods.close();
} else {
box.css({'display': 'block', 'top': 10, 'left': ((pop.parent().width()/2) -box.width()/2 )});
}
},
close: function(){
$(settings['box']).fadeOut("fast");
}
};
$(document).bind('keyup', function(event){
if(event.keyCode == 27){
methods.close();
}
});
$(document).bind('click', function(event){
if(!$(event.target).closest(settings['selector']).length){
methods.close();
}
});
return this.each(function(){
$(this).css({'width': $(settings['box']).width()}); // Width needs to be set otherwise popbox will not move when window resized.
$(settings['open'], this).bind('click', methods.open);
$(settings['open'], this).parent().find(settings['close']).bind('click', function(event){
event.preventDefault();
methods.close();
});
});
}
}).call(this);
EDIT:
I figured out what was wrong. Thank you guys!
jsfiddle
This is a pretty simple solution. It replaces the login link with a span that contains the text you wanted.
http://jsfiddle.net/gVVcM/
jQuery:
$('button').on('click',function(){
$('#login').replaceWith('<span>Logged In</span>');
});
HTML:
<a id='login' href='#'>Log In</a>
<button>Submit</button>
edit: now that you posted the submit id.
$('#submit').on('click',function(){
$('#login').replaceWith('<span>Logged In</span>');
});
edit2: Prevent Default?.
$('#submit').on('click',function(e){
e.preventDefault();
$('#login').replaceWith('<span>Logged In</span>');
});
If you're using jQuery you can call the following once you've successfully logged in.
$('a#login.open').text('Logged In');
This is if you're trying to be super specific about the element you're searching for. If you are using chrome or anything other than IE you can try this out in the console debugger window to see that it works.

jquery appendTo and detach in order to replay animated gif

This is my js:
$(document).ready(function () {
$lrgBanner = $('#panel');
$lrgBanner.detach();
$('#banner img').click(function () {
$lrgBanner.appendTo('#ad').show();
$('#banner').hide();
console.log('banner was clicked');
});
});
$('#close img').click(function () {
$('#banner').show();
$lrgBanner.detach();
console.log('close was clicked');
});
And the HTML:
<div id='ad'>
<div id='banner'>
<img src="img/hp-small.gif" alt="banner advertisement" />
</div>
<div id='panel'>
<div id='background'>
<img src="img/hp-large.gif" alt="" />
</div>
<div id='close'>
<img src="img/btn_close.gif" alt="close" />
</div>
</div>
</div>
The div #background contains an animated gif. I was told that using detach and appendTo would restart the gif content, but it doesn't seem to be working.
I wondered about trying to use a load function (or an unload on the #close img click function.
Does anyone have any advice?
Thanks in advance.
You should reset src attribute of animated gif instead:
SEE DEMO
Note that you shouldn't set variables as global if you don't need to access it from global scope.
$(document).ready(function () {
gifAnimated = $('#background img')[0],
gifSrc = "http://mlkshk.com/r/R245.gif";
$lrgBanner = $('#panel');
$lrgBanner.detach();
$('#banner img').click(function () {
gifAnimated.src = gifSrc;
$lrgBanner.appendTo('#ad').show();
$('#banner').hide();
console.log('banner was clicked');
});
});
$('#close img').click(function () {
$('#banner').show();
$lrgBanner.detach();
gifAnimated.src = "";
console.log('close was clicked');
});

Change More options to Less options or vice versa when toggle/untoggle

I would like to know how to make [[More options]] change to [[Less options]] and vs if I click it.
<div class="toggle-this" style="display: none">
<h3 style="border:1px solid;">Job Search</h3></div>
<div class="toggle-this" style="display: none"><div class="form_input"></div></div>
<div class="toggle-trigger" style="text-align:center; cursor: pointer;">[[More options]]</div>
<script language="javascript">
$(".toggle-trigger").click(function() {
$('.toggle-this').toggle();
return false;
});
</script>
$(document).ready(function(){
$(".toggle-trigger").click(function(e) {
var $elem = $('.toggle-this');
$elem.toggle();
$(this).text($elem.is(':hidden') ? '[[More options]]' : '[[Less options]]')
e.preventDefault();
});
})
http://jsfiddle.net/ffEMq/
More elegant:
$(".toggle-trigger").click(function()
{
var map = {"none": "[[More options]]", "block": "[[Less options]]"};
var element = $('.toggle-this').toggle();
$(this).text(map[element.css("display")]);
return false;
});​
Look at this jsFiddle.

How can I shorten this javascript code? show hide multiple divs

How can I shorten this code? Each css selector increases +1. All Bio's divs are hidden unless the .mug(x) is selected.
Thanks
<script type='text/javascript'>
$(document).ready(function () {
$(".mug1").click(function() {
$("#bios div").hide();
$(".bio1").show();
});
$(".mug2").click(function() {
$("#bios div").hide();
$(".bio2").show();
});
$(".mug3").click(function() {
$("#bios div").hide();
$(".bio3").show();
});
});
</script>
<h2>Meet the team</h2>
<div id="mugshots">
<img src="images/img-mugshot.jpg" alt="mug" class="mug1"/>
<img src="images/img-mugshot.jpg" alt="mug" class="mug2"/>
<img src="images/img-mugshot.jpg" alt="mug" class="mug3"/>
</div>
<div id="bios">
<div class="bio1"></div>
<div class="bio2"></div>
<div class="bio3"></div>
</div>
Something along these lines?
Change the html to this:
<div id="bios">
<div class="bio" data-id="1"></div>
<div class="bio" data-id="2"></div>
<div class="bio" data-id="3"></div>
</div>
Then your js to this:
$(".mug").click(function() {
$("#bios div").hide();
$(".bio[data-id='" + $(this).data("id") + "'", $("#bios")).show();
});
This way you could add as many mugs and bios as you like without having to add any more js.
Simplest way is a for loop
$(document).ready(function () {
for (var i = 1; i <= 3; i++) {
$(".mug" + i).click(function() {
$("#bios div").hide();
$(".bio" + i).show();
});
}
});
There may be a better way still that I'm not thinking of.
just use index and add as many as you want:
$('#mugshots>img').on('click', function() {
$("#bios div").hide();
var myIndex = $(this).index("#mugshots> img");
$("#bios> div").eq(myIndex).show();
});
a shorter version of this is:
$('#mugshots>img').on('click', function() {
$("#bios div").hide().eq($(this).index("#mugshots> img")).show();;
});
Use the .eq() and the index of your mugshots, assuming the first mugshot goes with the first bio, second mugshot with second bio, and so on.
http://api.jquery.com/eq/
Also, use a class to keep track of your active bio rather than calling hide on all bios for each update.
JS:
$(document).ready(function() {
$('#mugshots img').click(function() {
$('#bios .active').hide().removeClass('active');
$('#bios div').eq($(this).index()).show().addClass('active');
});
});
HTML:
<h2>Meet the team</h2>
<div id="mugshots">
<img src="images/img-mugshot.jpg" alt="mug"/>
<img src="images/img-mugshot.jpg" alt="mug"/>
<img src="images/img-mugshot.jpg" alt="mug"/>
</div>
<div id="bios">
<div></div>
<div></div>
<div></div>
</div>
try this:
$(document).ready(function () {
$("img[alt=mug]").each(function() {
$(this).click(function(){
var id = $(this).attr("class").substr(3, 1);
$("#bios div").hide();
$(".bio" + id).show();
});
});
});

Categories

Resources