I am using Ajax for a website I am in the process of developing and something is wrong with this code... When the URL is something like mywebsite.com?about I want the about page to be displayed.
Here is the HTML portion of the code (NOTE: When a link is pressed Text is to be inserted into the DIV 'content'):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="script/open_page.js"></script>
<div id="wrapper">
<div id="header">
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Exchanges</li>
<li>Photos</li>
<li>Contact</li>
</ul>
</div>
<div id="content">
</div>
</div>
Here is a portion of the JavaScript:
var currentpage;
function load_about() { // Loads About Us
if ($current_page == "about") {
$(document).ready(function(){
$("#content").load("contents/about.html");
});
}
}
Thanks for any suggestions or answers...
Since you are calling load_about on click of home page link, I don't think the if condition is necessary. Also the use of dom ready is wrong in this case
It should be
function load_about() { // Loads About Us
$("#content").load("contents/about.html");
}
If it is upto me, I may do it slightly differently
<div id="wrapper">
<div id="header">
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Exchanges</li>
<li>Photos</li>
<li>Contact</li>
</ul>
</div>
<div id="content">
</div>
And
$(document).ready(function(){
$('#header ul.nav li').click(function(){
$("#content").load($(this).find('a').attr('href'));
return false;
})
});
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Exchanges</li>
<li>Photos</li>
<li>Contact</li>
</ul>
$(function() {
$('.nav').on('click', 'a', function(e) {
e.preventDefault();
var pageToLoad = $(this).data('page');
$.get('contents/' + pageToLoad + '.html'), null, function(response) {
$("#content").html(response);
});
});
});
Related
I have a page-out transition animation that I am using with css. It relies on changing the class of a container to start a css animation. I'm looking for a way to activate this animation (by adding the class to the container) then waiting for it to finish, then go to the link the href has. Here is the
JSFiddle.
<div class="navigationbar">
<a href="home.html">
<h2 class="logo">The Lowdown.</h2>
</a>
<ul>
<li>CONTACT US</li>
<li>EDITIONS</li>
<li>ARTICLES</li>
<li>ABOUT US</li>
<li><a class="active" href="https:/google.com">HOME</a></li>
</ul>
</div>
<div class="loader loader--active">
<div class="loader__icon">
</div>
<div class="loader__tile"></div>
<div class="loader__tile"></div>
<div class="loader__tile"></div>
<div class="loader__tile"></div>
<div class="loader__tile"></div>
<div class="loader__tile"></div>
</div>
Is there any way to do this?
Can you try the below solution, if it works for you
var el = document;
//el.onclick = showFoo;
$(document).ready(function(){
$(".jqLink").on("click",function(event){
var myRef=this;
console.log("ref=>",$(myRef).attr("href"));
showFoo(event);
setTimeout(function(){
$loader.classList.remove('loader--active');
setTimeout(function(){
window.location.href=$(myRef).attr("href");
},1000);
},2000);
});
})
function showFoo(e) {
$loader.classList.add('loader--active');
return e.preventDefault();
}
var $loader = document.querySelector('.loader')
window.onload = function() {
$loader.classList.remove('loader--active')
};
window.setTimeout(function () {
$loader.classList.remove('loader--active')
}, 2000)
Add "jqLink" css class to your every element, like below
<li>CONTACT US</li>
<li>EDITIONS</li>
<li>ARTICLES</li>
<li>ABOUT US</li>
<li><a class="active" href="https:/google.com" class="jqLink">HOME</a></li>
Try this, if it works for you.
I'm using javascript to open a push menu.But, I'd like to add the feature that if the mouse clicks outside of the push menu, it will close the menu. I've never coded this before so really unsure of where to begin.
$(document).ready(function() {
$menuLeft = $('.pushmenu-left');
$nav_list = $('#nav_list');
$nav_list.click(function() {
$(this).toggleClass('active');
$('.pushmenu-push').toggleClass('pushmenu-push-toright');
$menuLeft.toggleClass('pushmenu-open');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="pushmenu pushmenu-left">
<div class="pushmenu_inner">
<ul class="links">
<li>Home</li>
<li>About Us</li>
<li>Missions</li>
<li>Partners</li>
<li>Events</li>
<li>Contact</li>
<li>Give</li>
</ul>
</div>
</nav>
Add event to trigger click operation and follow if it contains your menu or not.
I am giving an example, I hope it will help you with solving your issue.
html
<nav class="pushmenu pushmenu-left" id='menuBar'>
<div class="pushmenu_inner">
<ul class="links">
<li>Home</li>
<li>About Us</li>
<li>Missions</li>
<li>Partners</li>
<li>Events</li>
<li>Contact</li>
<li>Give</li>
</ul>
</div>
</nav>
Javascript
window.addEventListener('click', function(e){
if (document.getElementById('menuBar').contains(e.target)){
console.log('clicked inside');
// toggle your menu according to your requirements
} else{
// toggle your menu according to your requirements
console.log('clicked outside');
}
});
Use this Jquery
$(document).click(function () {
//Write your code here
});
it means when you are clicked outside that part your respective code will run
Try this. I added an initial style to hide menu. You can then display the menu using the menu button or clicking on the document.
$(document).ready(function() {
$('#menu').click(function() {
if($('nav').is(':visible')) {
hideMenu();
}
else {
$('nav').show(function() {
$(this).animate({left:'0'});
$('#menu').html('hide menu');
});
}
});
$(document).click(function(e) {
if(!$(e.target).closest('#menu').length && $('nav').is(':visible')) {
hideMenu();
}
});
});
function hideMenu() {
$('nav').animate({left:'-100px'}, function() {
$(this).hide();
$('#menu').html('show menu');
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="menu">show menu</button>
<nav class="pushmenu pushmenu-left" style="display:none; left:-100px; position: relative">
<div class="pushmenu_inner">
<ul class="links">
<li>Home</li>
<li>About Us</li>
<li>Missions</li>
<li>Partners</li>
<li>Events</li>
<li>Contact</li>
<li>Give</li>
</ul>
</div>
</nav>
I'm new to Jquery/JS and still learning. I need to add an "active" class to my menu. I know there are already many similar questions across this forum and web as well but nothing works. It had bugged me for days and I still couldn't figure out the problem.
Here is my HTML :
<nav id="nav-menu-container">
<ul class="nav-menu">
<li class="menu-active">Home</li>
<li>About</li>
<li>News</li>
<li>Contact</li>
<li>Login</li>
</ul>
</nav><!-- #nav-menu-container -->
Here is my code to add the class:
$('.nav-menu a, #mobile-nav a').on('click', function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
if ($(this).parents('.nav-menu').length) {
$('.nav-menu .menu-active').removeClass('menu-active');
$(this).closest('li').addClass('menu-active');
}
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('#mobile-nav-toggle i').toggleClass('fa-times fa-bars');
$('#mobile-body-overly').fadeOut();
}
return false;
}
});
I'm sorry I didn't explain it in detail before. I want the link menu to be redirecting to another page. The code originally came from a one page-web theme I use, but I customize it to fit my multi-page web application.
Thanks again.
You can do:
$('.nav-menu').on('click', function (e) {
e.preventDefault();
$('.nav-menu .menu-active').removeClass('menu-active');
$(e.target).parent('li').addClass('menu-active');
});
li.menu-active a {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="nav-menu-container">
<ul class="nav-menu">
<li class="menu-active">Home</li>
<li>About</li>
<li>News</li>
<li>Contact</li>
<li>Login</li>
</ul>
</nav>
<div id="side-bar">
<ul>
<li>Home</li>
<li>Who we are</li>
<li>Services</li>
<li>What to expect</li>
<li>Representative clients</li>
<li>Success stories</li>
<li>Current litigation</li>
<li>What if you could not be a doctor?</li>
</ul>
</div>
script
$(document).ready(function () {
alert(localStorage.getItem("selectedolditem"));
$("#side-bar a").click(function () {
var id = $(this);
$(".active").removeClass("active");
$(id).addClass("active");
localStorage.setItem("selectedolditem", $(id).text());
alert(localStorage.getItem("selectedolditem"));
});
var selectedolditem = localStorage.getItem('selectedolditem');
if (selectedolditem !== null) {
$("a:contains('" + selectedolditem + "')").addClass("active");
}
});
css
.active {color:red;}
If you have multiple pages try with this. the below code activate the menu with the current page
when you have like this.
<nav id="nav-menu-container">
<ul class="nav-menu">
<li>Home</li>
<li>About</li>
<li>News</li>
<li>Contact</li>
<li>Login</li>
</ul>
</nav><!-- #nav-menu-container -->
<script>
$(function() {
$('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('menu-active');
});
</script>
Here is how it can work with localStorage.
I am afraid the snippet tool does NOT allow localStorage so you will have to see it working here:
https://repl.it/#PaulThomas1/BraveOffbeatByte
document.addEventListener('DOMContentLoaded', () => {
// try and load
if (localStorage) {
let active = localStorage.getItem('activeMenu');
if (active) document.querySelector(`a[class="${active}"]`).classList.add('active');
}
});
document.addEventListener('click', (e) => {
// try and save
if (e.target.matches('a') && localStorage) {
localStorage.setItem('activeMenu', e.target.className);
}
});
<nav id="nav-menu-container">
<ul class="nav-menu">
<li class="menu-active">Home</li>
<li>About</li>
<li>News</li>
<li>Contact</li>
<li>Login</li>
</ul>
</nav>
<!-- #nav-menu-container -->
I want to change background each time onClick is called and remove previous tab background, but when I try to do so the previous onClick effect stays
Here is the Code
<script type="text/javascript">
function myFunction() {
document.getElementById("a").style.backgroundColor = "lightblue";
}
</script>
<a href="#home" class="tabs">
<li id="a" onclick="myFunction" class="tabs-li">Home</li>
</a>
<a href="#about-us" class="tabs">
<li id="a" onclick="myFunction" class="tabs-li">About Us</li>
</a>
<a href="#contact-us" class="tabs">
<li id="a" onclick="myFunction" class="tabs-li">Contact Us</li>
</a>
Zeroth Law: An id shouldn't be duplicated.
First, learn HTML. It is annoying for every HTML guy to see non-semantic tags.
You should nest the tags correctly. Hit the person you taught this. Also, the most blundered and ill-fated W3Schools, (NEVER I RECOMMEND), which is hated by everyone also doesn't do this mistake.
Wrong:
<a><li></li></a>
Right:
<li><a></a></li>
Second, the onclick.
You need to add () at the end.
onclick="myFunction()"
Fourthly, you are generalizing.
I have recently seen a lot of developers doing this. Instead, why not just use a simple :hover in CSS, without JavaScript. Let's see without JavaScript:
li:hover {background-color: lightblue;}
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
For your way, using JavaScript, using onclick():
$(function () {
$("li").click(function () {
$(this).css("background-color", "lightblue");
});
$("li a").click(function () {
$(this).closest("li").css("background-color", "lightblue");
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
Finally, what you need:
$(function () {
$("li").click(function () {
$("li").removeAttr("style");
$(this).css("background-color", "lightblue");
});
$("li a").click(function () {
$("li").removeAttr("style");
$(this).closest("li").css("background-color", "lightblue");
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
I have this custom js code for basic (open/close) menu movement that was great when I used it on multi page websites, but it only closes the menu when you click the menu symbol. Now I need to implement it into a one page website and I need it to close after a user clicks on a menu item. I have very little experience in javascript so I need help solving this problem.
The js:
$(document).ready(function() {
var n = '#nav', no = 'nav-open';
$('#nav-menu').click(function() {
if ($(n).hasClass(no)) {
$(n).animate({height:0},300);
setTimeout(function() {
$(n).removeClass(no).removeAttr('style');
},320);
}
else {
var newH = $(n).css('height','auto').height();
$(n).height(0).animate({height:newH},300);
setTimeout(function() {
$(n).addClass(no).removeAttr('style');
},320);
}
});
});
The HTML:
<!-- Navigation Bar -->
<div class="nav-hold">
<div class="nav-bar">
<img src="images/logo.png" alt="logo" />
Company name
<a id="nav-menu" class="nav-menu-symbol">☰<!-- menu symbol --></a>
<a class="nav-menu">Menu</a>
<ul class="nav-list" id="nav">
<li>Top</li>
<li>About us</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
change
$('#nav-menu').click(function() {
if you want that your menu close only by clicking on the li element
$('#nav li').click(function() {
or if you want to close menu with both li and menu icon
$('#nav-menu, #nav li').click(function() {
That's because you only bind the click function to the menu symbol. I'm not sure why you separate the symbol and text, but I would prefer to wrap it in single element. Also you can use jQuery slideToggle() to slide down or up on click. Example:
$(document).ready(function() {
$('#nav-menu').click(function() {
$('#nav').slideToggle(300);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-hold">
<div class="nav-bar">
<img src="images/logo.png" alt="logo" />
Company name
<a id="nav-menu" class="nav-menu-symbol">
<span>☰</span>
<span>Menu</span>
</a>
<ul class="nav-list" id="nav">
<li>Top</li>
<li>About us</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>