Using jQuery fade in and fade out, I want my current page to fade out when a link on the navigation bar is selected and then I want the new page to fade in. I am unable to get the anticipated effect.
Here's my code:
$(document).ready(function() {
$('body').css('display', 'none');
$('body').fadeIn(2000);
$('a').click(function() {
event.preventDefault();
newLocation = this.href;
$('body').fadeOut(2000, newpage);
});
function newpage() {
window.location = newLocation;
}
});
Give a try to will's suggestion. The best way to achieve this is to prevent a whole reload of your page. Use Ajax or .load() function ! "Description: Load data from the server and place the returned HTML into the matched element." Once the content is loaded, fade it in.
HTML
<body style="display:none;">
content
</body>
JS
function redirectPage() {
window.location = linkLocation;
}
$(document).ready(function() {
$("body").fadeIn(600);
$('a').click(function(event) {
if (this.href == "" || this.href == null) {
event.preventDefault();
return;
}
if ((this.href.indexOf("#") == -1) && (this.href.indexOf("mailto:") == -1) && (this.href.indexOf("javascript:") == -1) && (this.target != "_blank")) {
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(600, redirectPage);
}
});
});
Try this:
Let's your navigation link is:
My LINK
Then your jquery code should be:
$(document).ready(function() {
$('body').css('display', 'none');
$('body').fadeIn(2000);
$('a.switch').click(function(event) {
event.preventDefault();
newLocation = this.href;
$('body').fadeOut(2000, newpage);
});
function newpage() {
window.location = newLocation;
}
});
Don't forget to put the event as an argument to the function.
Hope it helps!
Related
I have HTML code as follows:
Text
When user clicks by "Left mouse button" on the link, then reloadPage() should be called.
But when user clicks using "Ctrl + click" or "middle button" on the link then I want to open a new window without reloadPage().
How can I do that?
You can refference here. Its my code
Click Me
<script>
$(document).ready(function() {
$(document).keydown(function(event){
if(event.which==17)
cntrlIsPressed = true;
});
$(document).keyup(function(){
cntrlIsPressed = false;
});
});
var cntrlIsPressed = false;
function reloadPage(mouseButton,event)
{
//event.preventDefault();
if( event.which == 2 ) {
//todo something
//window.open($("#test").attr("href"));
alert("middle button");
return false;
}
if(cntrlIsPressed)
{
//window.open($("#test").attr("href"));
// ctrl + click
return false;
}
//todo something
window.location.href = $("#test").attr("href");
return true;
}
</script>
You can simply set the href attribute on the a tag to the current page url, this way when a user clicks it will open the same page (reload) and if he middle clicks it will open the same page in a new tab.
If you want to use that on multiple pages then you can set the href in javascript to the current page url like this
document.getElementById('myId').href = location.href
You can try this approach (html):
Text
Javascript:
$(function () {
$("#mylink").click(function (event) {
if ((event.button == 0 && event.ctrlKey) || event.button == 1) {
event.preventDefault();
window.open("http://www.google.com");
}
else
if (event.button == 0)
window.location.reload();
});
});
I have two options for you.Pure javascript and with the use of jquery.
Here's the full code.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#jqueryStyle').mousedown(function(e){
//3 is right click
if(e.which == 3){
window.open("http://www.w3schools.com");
//1 is for click
}else if(e.which == 1){
reloadPage();
}
});
});
function reloadPage(){
location.reload();
}
function onMouseDown(e,obj){
e = e || window.event;
//3 is for right click
if(e.which == 3){
window.open("http://www.w3schools.com");
//1 is for click
}else if(e.which == 1){
reloadPage();
}
}
</script>
</head>
<body>
<a href="#" id="jqueryStyle">JQuery Code</a ><br/>
<a href="#" onmousedown="onMouseDown(event,this)">Pure Javascript Code</a >
</body>
</html>
Hope that helps.
note: i see this Question but the problem is not the same.
I have one page named login_check.cfm and this page do a location.href to home.cfm
inside the home.cfm i have this code
<script>
window.onbeforeunload = function() { window.history.go(0); };
</script>
or
<script>
window.onbeforeunload = function() { window.history.forward(1); };
</script>
my intention is to prohibit the User to use the back button, and its work, but only a do a refresh or use a link to do refresh.
the problem is my page is 90% ajax based and the most off the user go back to login page when they clicked backbutton.
use Document ready() make no difference.
suggestions ?
i found this old Question where rohit416 give a good answer and it still works
(function ($, global) {
var _hash = "!",
noBackPlease = function () {
global.location.href += "#";
setTimeout(function () {
global.location.href += "!";
}, 50);
};
global.setInterval(function () {
if (global.location.hash != _hash) {
global.location.hash = _hash;
}
}, 100);
global.onload = function () {
noBackPlease();
// disables backspace on page except on input fields and textarea.
$(document.body).keydown(function (e) {
var elm = e.target.nodeName.toLowerCase();
if (e.which == 8 && elm !== 'input' && elm !== 'textarea') {
e.preventDefault();
}
// stopping event bubbling up the DOM tree..
e.stopPropagation();
});
}
})(jQuery, window);
As soon as the web page loading is completes and whenever the cursor will be clicked/hover on any hyper links in that web page, I want to extract that particular link on which my mouse clicked/hover. So what is the JavaScript code snippet for this ?
window.onload = function() {
document.onclick = function(e) {
var target = e.srcElement;
if (target != null) {
var href = target.href;
if (href != null) {
alert("link extracted: " + href);
}
}
return false;
};
}
$(document).click(function(e){
if($(e.target).closest('a').length){
alert('You clicked a link');
alert($(e.target).closest('a').attr('href'));
}
else{
alert('You did not click a link');
}
});
I use the following function on keyup event to redirect to another javascript function.
Problem is it does'nt seem to fire, although it does bind the function to the textbox.
$(document).ready(function () {
EnablePickTargetButton();
//clear contents; use a delay because tinyMCE editor isn't always fully loaded on document.ready
var t = setTimeout(function () {
if (typeof textEditorForCreate != 'undefined' && tinymce.editors.length > 0)
tinyMCE.activeEditor.setContent('');
}, 300);
var txtSearchUser = $('#txtSearchUser');
if(typeof txtSearchUser != 'undefined')
{
$('#txtSearchUser').keyup(function (e) {
if (e.keyCode == 13) {
e.preventDefault();
searchUser();
}
else
alert('cucu');
});
}
});
Not even the alert shows up. Checking the html, I can see it doesn't add onkeyup to the textbox; The textbox is in a popup window hosted in a div on the form; But on document.ready it runs the function without error.
Try this delegate on document or closest static element. (If the element is added dynamically)
$(document).on('keyup','#txtSearchUser',function(){
//Code
});
it works :
$(document).ready(function(){
$('#txtSearchUser').keyup(function (e) {
if (e.keyCode == 13) {
e.preventDefault();
}
else
alert('cucu');
});
});
http://jsfiddle.net/jMk5S/
check if you're referencing your html element properly. Perhaps you mix id with the class?
I edited your code and is working :
The problem is in your document ready function , you have a syntax error , next time check console in your browser to see what's wrong :
DEMO HERE
$(document).ready(function () {
//EnablePickTargetButton();
//clear contents; use a delay because tinyMCE editor isn't always fully loaded on document.ready
var t = setTimeout(function () {
if ($('#textEditorForCreate').length != 0 && tinymce.editors.length > 0)
tinyMCE.activeEditor.setContent('');
}, 300);
if($('#txtSearchUser').length!=0)
{
$('#txtSearchUser').keyup(function (e) {
if (e.keyCode == 13) {
e.preventDefault();
searchUser();
}
else
alert('cucu');
});
}
});
So I have a simple jquery code to highlight the nav menu.
$(document).ready(function(){
$('#header .mm a').each(function(){
if( $(this).attr('href') == window.location.href ){
$(this).addClass('active');
}
var value = window.location.href.substring(window.location.href.lastIndexOf('/') + 1);
if( $(this).attr('href') == '/site/' && (value == '') ){
$(this).addClass('active');
}
});
});
On this page right here: http://perfectlanding.com.au/creativity
I have no idea why the code won't run. There are no errors in the console.
The code isn't inside a script tag. Fix that and it should work fine.
Looking at the page source, the script in question isn't between any tags. You can see it being emitted at the bottom of the page below the page's footer.
Copy paste this:
<script type="text/javascript">
$(document).ready(function(){
$('#header .mm a').each(function(){
if( $(this).attr('href') == window.location.href ){
$(this).addClass('active');
}
var value = window.location.href.substring(window.location.href.lastIndexOf('/') + 1);
if( $(this).attr('href') == '/site/' && (value == '') ){
$(this).addClass('active');
}
});
});
</script>