Hi i have simple single page website with # sections. I am using # to hide and show sections.
For example; someurl/index.html/#sectionOne
There is div with "sectionOne" id, so i can show related section.
My question is there a way to prevent or replace "/" path character in url with # like;
someurl/index.html/sectionOne --> someurl/index.html/#sectionOne
Because it gives 404 of course.
i tried beforeunload, window on load, body on load but these didn't solve my problem.
This is simple example
$(document).ready(function() {
window.onload = function(event) {
var hash = "about";
$("section").hide();
$("#" + hash).show();
};
$(".nav").click(function() {
console.log("CLICK");
var hash = $(this).attr('href').substring(1);
console.log(hash);
$("section").hide();
$("#" + hash).show();
});
});
section {display: none;}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ul>
<li><a class="nav" href="#about">ABOUT</a></li>
<li><a class="nav" href="#services">SERVICES</a></li>
<li><a class="nav" href="#contact">CONTACT</a></li>
</ul>
<section id="about">
<h1>ABOUT</h1>
<p>About section</p>
</section>
<section id="services">
<h1>SERVICES</h1>
<p>Services section</p>
</section>
<section id="contact">
<h1>CONTACT</h1>
<p>Contact section</p>
</section>
If I understand correctly, target pseudo class could be used here:
section {
display: none;
}
#about:target,
#services:target,
#contact:target {
display: block;
}
<ul>
<li><a class="nav" href="#about">ABOUT</a>
</li>
<li><a class="nav" href="#services">SERVICES</a>
</li>
<li><a class="nav" href="#contact">CONTACT</a>
</li>
</ul>
<section id="about">
<h1>ABOUT</h1>
<p>About section</p>
</section>
<section id="services">
<h1>SERVICES</h1>
<p>Services section</p>
</section>
<section id="contact">
<h1>CONTACT</h1>
<p>Contact section</p>
</section>
With regards to preventing an user from navigating away using / (let it be anything), I believe there is no easy way to accomplish from the client-side alone.
We could use window.onbeforeunload event and let a dialog-box to be displayed to keep the user in based on whether or not they want.
Another option which I see is to use React Router for client-side 404.
Related
I have my navbar on my page. I had used CSS and jQuery to fix it at the top but when I am selecting any menu item in navbar it doesn't go to that section. Give me the solution.
<header id="index-banner">
<nav id="navigation" class="banner-header z-depth-0 ">
<ul class="left hide-on-med-and-down">
<li><span>HOME</span></li>
<li><span>LOCATIONS</span>
<li><span>FAQ</span></li>
</li>
</ul>
<img src="img/logo/50.png" class="banner-logo" id="mylogo">
<ul class="right hide-on-med-and-down">
<span><li>MENU</li></span>
<span><li>CONTACT US</li></span>
<li><img src="img/tunnsingh/face.png" id="tunnsinghface"></li>
<li>
<h5 id="call" class="head"><span>989898XXXX</span></h5>
</li>
</ul>
  <i class="fa fa-bars"></i>
<div id="slide-out" class="side-nav hide-on-large-only">
<img src="img/logo/50.png" id="side-nav-logo">
<img src="img/divider/green.png" class="divide">
<ul>
<span><li>HOME</li></span>
<span><li>LOCATIONS</li></span>
<span><li>MENU</li></span>
<span><li>FAQ</li></span>
<span><li>CONTACT US</li></span>
</ul>
</div>
</nav>
<img src="img/banner.jpg" class="hide-on-large-only" id="index-banner">
</header>
You have to define each section with the "id" attribute and then you have to use the "scrollTop" for those navigation which will scroll to those defined "id".
HTML Code
Scroll to Target Element
<section id=”target-element”>Target Element Content</section>
Jquery Code:
jQuery('.scroll_to').click(function(e){
var jump = $(this).attr('href');
var new_position = $(jump).offset();
$('html, body').stop().animate({ scrollTop: new_position.top }, 500);
e.preventDefault();
});
Is there any way to make hovering over a navigation anchor link act similarly to a href action, where hovering the link for an 'About' link (like in my site below) displays goes directly to the 'About' section of the page, and then moving the mouse away from the link goes back to the original div if the 'About' link is not clicked on?
Codepen: http://codepen.io/anon/pen/zZdzmB.
HTML:
<nav>
<ul id="menu">
<li>
<a>Menu</a>
<div id="dropdown">
<ul>
<li class="navLink active"><div class="navLine"></div>Home</li>
<li class="navLink"><div class="navLine"></div>About</li>
<li class="navLink"><div class="navLine"></div>Skills</li>
<li class="navLink"><div class="navLine"></div>Work</li>
<li class="navLink"><div class="navLine"></div>Contact</li>
</ul>
</div>
</li>
</ul>
</nav>
<main>
<section id="homeSection" class="section" data-anchor="home">
<div class="sectionContent">
<h1 id="intro">Intro text</h1>
</div>
</section>
<section id="aboutSection" class="section" data-anchor="about">
<div class="sectionContent">
</div>
</section>
<section id="skillsSection" class="section" data-anchor="skills">
<div class="sectionContent">
</div>
</section>
<section id="workSection" class="section" data-anchor="work">
<div class="sectionContent">
</div>
</section>
<section id="contactSection" class="section" data-anchor="contact">
<div class="sectionContent">
</div>
</section>
</main>
you could use jQuery
$('.navLink').hover(function(){
$(this).trigger('click');
});
You can just use the .mouseover() function.
I updated your CodePen with these change: http://codepen.io/anon/pen/vxJWVp
Here's the Jquery Mouseover function:
$( document ).ready(function() {
$('#1').mouseover();
});
$('#1').mouseover(function() {
$('#intro').html('Intro');
});
$('#2').mouseover(function() {
$('#intro').html('About Content goes here');
});
$('#3').mouseover(function() {
$('#intro').html('Skills Content goes here');
});
$('#4').mouseover(function() {
$('#intro').html('Work Content goes here');
});
$('#5').mouseover(function() {
$('#intro').html('Contact Content goes here');
});
Then just add the respective ' id = "1" '
<li class="navLink active" id="1"><a href="#homeSection">
<div class="navLine"></div>Home</a></li>
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>
Here is my MVC View section:
#section popups{
<div class="popup-class" id="popup">
<div class='btn-group' id='actions'>
<div class='collapse navbar-collapse'>
<ul class='actions'>
<li class='dropdown'>
<a href='#' class='dropdown-toggle grid-icon' data-toggle='dropdown'></a>
<ul class='dropdown-menu'>
<li><a href='#'>Product</a></li>
<li><a href='#'>Test</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class='clear'>
</div>
</div>
}
I want to call it from JavaScript file (only this section).How can i do that?
There is no way to get a asp.net mvc section in javascript. What you can do is define an html element around the section on the layout page, a <div> for sample, and get this element, for sample, in your layout page:
<div id="popups">
#RenderSection("popups", false)
</div>
In your javascript code, just call this element, for sample:
$(function(){
// call the element, call a method
$("#popups").show();
});
You do not specify what you want to do with this.
I've got a problem. I have some submenus on my website that i show and hide with jQuery.
The #Sekundar is the submenu, but what i want to ask about is, Is there a better way to check if the menu is shown or not shown?
I couldn't get it make it work unless i put a setInterval on it, and that isn't the best way of doing it i think? Any suggestions?
Here is the JS code:
function sekundarmenu() {
$('#sekundar').fadeToggle();
$('#sekundar2').hide();
$('#sekundar3').hide();
$('#sekundar4').hide();
$('#sekundar5').hide();
}
setInterval(function () {
if ($("#sekundar").is(":visible") || $("#sekundar").css("display")== "block") {
$("#li1").css("background-color", "#24ac5f");
}
else {
$("#li1").css("background-color", "transparent");
}
}, 1);
And the HTML:
<nav id="primar">
<ul>
<li id="li1"><a onclick="sekundarmenu()" class="pointer">Indhold</a></li>
<li id="li2"><a onclick="sekundarmenu2()" class="pointer">Nyheder</a></li>
<li id="li3"><a onclick="sekundarmenu3()" class="pointer">Billeder</a></li>
<li id="li4"><a onclick="sekundarmenu4()" class="pointer">Bruger</a></li>
<li id="li5"><a onclick="sekundarmenu5()" class="pointer">Diverse</a></li>
</ul>
</nav>
</header>
<div id="sekundar" class="sekundar">
<nav class="nav2">
<ul>
<li>Opret Tekster</li>
<li>Rediger/Slet tekster</li>
<li>Rediger kontakt</li>
</ul>
</nav>
</div>
Since there are many ways to solve similar problems you have to choose the one that best suits your case.
in this Fiddle
i thought to solve the problem in another way by adding some classes in your html code. In this way the jQuery code is drastically reduced.
I also added the ability to disappear the submenu on mouseleave, if you don't like this solution you can easily delete the lines of code highlighted in the fiddle.
If you like this solution remember to flag in green my answer ;)
all jQuery code you need is:
<script type="text/javascript">
$(document).ready(function(){
$('li.principal').click(function(){
var whatSubmenu=$(this).attr('id').slice(1)
$('li.principal').css("background-color", "transparent")
$(this).css("background-color", "#24ac5f")
$('div.sekundar').hide()
$('.'+whatSubmenu).fadeIn()
})
/*IF you don't want the submenu disappear on mouseleave comment these lines of code*/
$('div.sekundar').on('mouseleave',function(){
$(this).hide()
$('li.principal').css("background-color", "transparent")
})
})
</script>
html:
<header>
<nav id="primar">
<ul>
<li class="principal" id="li1"><a class="pointer">Indhold</a></li>
<li class="principal" id="li2"><a class="pointer">Nyheder</a></li>
<li class="principal" id="li3"><a class="pointer">Billeder</a></li>
</ul>
</nav>
</header>
<div id="sekundar" class="sekundar i1">
<nav class="nav2">
<ul>
<li>Osadff</li>
<li>Rwefewg</li>
<li>Reehjy</li>
</ul>
</nav>
</div>
<div id="sekundar2" class="sekundar i2">
<nav class="nav2">
<ul>
<li>dgdgdg</li>
<li>sdfdfdg</li>
</ul>
</nav>
</div>
<div id="sekundar3" class="sekundar i3">
<nav class="nav2">
<ul>
<li>defdgdgdg</li>
</ul>
</nav>
</div>
In this simple example, you have a button that displays or hides your sub menu.
To verify if the menu is visible just give it a class using the toggleclass method and then check for the presence of that class.
<!DOCTYPE HTML>
<html>
<head>
<style>
#sekundar{
display:none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#test').click(function(){
$('#sekundar').toggleClass('visible')
if($('#sekundar').hasClass('visible')){
alert('not visible')
$('#sekundar').show()
}else{
alert('visible')
$('#sekundar').hide()
}
})
})
</script>
</head>
<body>
<div id="sekundar" class="sekundar">
<nav class="nav2">
<ul>
<li>Opret Tekster</li>
<li>Rediger/Slet tekster</li>
<li>Rediger kontakt</li>
</ul>
</nav>
</div>
<input name="" type="button" value="check" id="test">
</body>
</html>