It's probably a silly question but is there a way to get the css id selected from the url?
For example in a url like this:
www.website.com#adiv
to get #adiv using Javascript/jQuery?
Edit
My script so far:
$(document).ready(function() {
var c = window.location.hash;
$(c).addClass('current');
$('a').click(function (){
$('.current').removeClass('current');
$(this).addClass('current');
});
});
Html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
<script src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var c = window.location.hash;
$(c).addClass('current');
$('a').click(function () {
$('.current').removeClass('current');
$(this).addClass('current');
});
$('a[href*=#]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
</script>
</head>
<body>
<nav>
First
Second
</nav>
<section id="header">
...
</section>
<section id="history">
...
</section>
</body>
</html>
That would be window.location.hash
var hash = window.location.hash;
$(hash).addClass(...);
Or directly
$(window.location.hash).addClass(...);
Related
I need to code a website with onepage scroll sections without using a plugin(like fullPage.js). So i just created 6 sections like:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="hlpjs.js" type="text/javascript"></script>
<title>My Website</title>
<link href="hlpcss.css" rel="stylesheet" type="text/css">
</head>
<body>
<section id="section1">
<h1>text1</h1>
</section>
<section id="section2">
<h1>text2</h1>
</section>
<section id="section3">
<h1>text3</h1>
</section>
<section id="section4">
<h1>text4</h1>
</section>
<section id="section5">
<h1>text5</h1>
</section>
<section id="section6">
<h1>text6</h1>
</section>
</body>
and i tried to scroll through the sections in a javascript document like this:
var count = 1;
$(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
if (count < 6) {
count++;
$('html, body').animate({
scrollTop: $("#section"+count).offset().top
}, 2000);
}
} else {
if(count>1){
count--;
$('html, body').animate({
scrollTop: $("#section"+count).offset().top
}, 2000);
}
}
});
But its not working as it should. It's just scrolling randomly until it's at the top(or bottom) and then it stops.
I removed the if statements and added the complete callback so now it works. My only problem is now that I can scroll infinitely up and down but if i try to add any if statement the animations do not work at all(Any suggestions?). Otherwise i'm gonna go with that:
var count = 1;
$(window).bind('mousewheel DOMMouseScroll', function(event){
if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
count--;
$('html, body').animate({
scrollTop: $("#section"+count).offset().top
}, 1000,function(){
$('html, body').clearQueue();
});
}
else {
count++;
$('html, body').animate({
scrollTop: $("#section"+count).offset().top
}, 1000,function(){
$('html, body').clearQueue();
});
}
});
I have an error in my javascript only when I run it locally, but when I run it on jsfiddle it works fine.
Javascript
var pos, scrollY,
$el = $('nav'),
navItems = $el.find('> span'),
menuHeight = $el[0].clientHeight,
sections = $('section').toArray(), // cache elements
pointOfAttachment = $el[0].getBoundingClientRect().top;
// Bind events
$(window).on('scroll.nav', updateNav)
.on('resize.nav', updateNav);
function updateNav(){
scrollY = window.pageYOffset || document.documentElement.scrollTop;
for( var i = sections.length; i--; ){
if( sections[i].getBoundingClientRect().top - menuHeight < 0 ){
navItems.filter('.' + sections[i].id).addClass('active').siblings().removeClass('active');
break;
}
navItems.removeClass('active');
}
if( scrollY > pointOfAttachment )
$el.addClass('fixed');
else
$el.removeClass('fixed');
}
// for initial page load
updateNav();
$("nav span").click(function() {
var sectionId = $(this).attr('class')
$('html, body').animate({
scrollTop: ($('#'+sectionId).offset().top - $('nav').height()) + 1
}, 300);
});
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript">
</script>
<script src="script.js" type="text/javascript">
</script>
<title></title>
</head>
<body>
<header>Header</header>
<nav>
<span class='a1'>Section 1</span>
<span class='a2'>Section 2</span>
<span class='a3'>Section 3</span>
</nav>
<div id='navPlaceholder'></div>
<section id='a1'>Some section..</section>
<section id='a2'>Another Section</section>
<section id='a3'>And another one</section>
</body>
</html>
When I run it on JSfiddle it works fine but when I run it locally I get the javascript error:
Uncaught TypeError: Cannot read property 'clientHeight' of undefined
Can anyone tell me why this would only happen locally, and how I can fix it please?
You should include script once DOM is ready:
<script src="script.js" type="text/javascript">
</body>
For example here, just before </body> closing tag
I'm using bootstap for this one.
I want the class of each will change when scrolling to its section.
I successfully did that when I want to add 'active' or remove it.
but I bought an html design using 'selected',
to make it clear this is a sample of what I want to do (--HERE--)
this one only changes 'active' and each one is a 'link',
but in my work its 'selected' and each one is a 'scroll-link',
these are my buttons that I want to change:
<li class="home">
Home
</li>
<li>
About
</li>
and this is a section example :
<section id="home" class="slider-bg">
and this is the java script that I did:
<script class="scroll-link">
// ADDS ACTIVE CLASS TO LINKS WHEN SECTION WITH THE SAME SELECTOR AS THE HREF IS REACHED (CLASS .LINK IS NEEDED ON ALL <a> TAGS)
$(document).ready(function () {
$(window).scroll(function () {
var y = $(this).scrollTop();
$('.scroll-link').each(function (event) {
if (y >= $($(this).attr('href')).offset().top - 40) {
$('.scroll-link').not(this).removeClass('selected');
$(this).addClass('selected');
}
});
});
});
// SMOOTH SCROLLING (with negative scroll of 40 for header)
$(function () {
$('a[href*=#]:not([href=#])').click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: (target.offset().top - 40)
}, 850);
return false;
}
}
});
});
vent.preventDefault();
</script>
and this is all the includes that the designer did:
<!-- jQuery & Helper library -->
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.appear.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/modernizr-latest.js"></script>
<script type='text/javascript' src="js/jquery.fitvids.js"></script>
<script type="text/javascript" src="js/retina.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.pack8cbb.js?v=2.1.5"></script>
<script type='text/javascript' src="js/owl.carousel.min.js"></script>
<script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
<script type="text/javascript" src="js/masonry.pkgd.min.js"></script>
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="js/stellar.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="js/jquery.themepunch.revolution.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript" src="js/jquery.gmap.min.js"></script>
As you see I did write in my script:
vent.preventDefault();
this line will Override what ever preventing this from happening.
Please help me I'm new to web pages, But I'm a fresh graduate from CS.
I think there is a problem of vent.preventDefault();, this should be like event.preventDefault(); and inside the function where you pass event as a parameter, like:
<script class="scroll-link">
// ADDS ACTIVE CLASS TO LINKS WHEN SECTION WITH THE SAME SELECTOR AS THE HREF IS REACHED (CLASS .LINK IS NEEDED ON ALL <a> TAGS)
$(document).ready(function () {
$(window).scroll(function () {
var y = $(this).scrollTop();
$('.scroll-link').each(function (event) {
if (y >= $($(this).attr('href')).offset().top - 40) {
$('.scroll-link').not(this).removeClass('selected');
$(this).addClass('selected');
}
event.preventDefault();
});
});
});
// SMOOTH SCROLLING (with negative scroll of 40 for header)
$(function () {
$('a[href*=#]:not([href=#])').click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: (target.offset().top - 40)
}, 850);
return false;
}
}
});
});
</script>
at the end of script it didn't get any event data.
I'm trying to implement this (http://www.hongkiat.com/blog/responsive-web-nav/) script for a responsive menu. I followed all the steps and used the proper code, but the menu won't open in a 320px screen width. Can anyone give me a heads up on how to fix this? FYI: I'm a newby in scripting.
Thanks a lot!
<?php
defined('_JEXEC') or die;
$doc = JFactory::getDocument();
$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap.min.css');
$doc->addStyleSheet($this->baseurl . '/media/jui/css/bootstrap-responsive.css');
$doc->addStyleSheet('templates/' . $this->template . '/css/style.css');
?>
<!DOCTYPE html>
<html>
<head>
<jdoc:include type="head" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="normalize.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function() {
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
</script>
</head>
<body>
<nav class='clearfix'>
<ul class='clearfix'>
<li>Sea PR?</li>
<li>Sea PR voor...</li>
<li> Press Relations</li>
<li>Copywriting</li>
<li>Websites</li>
<li>Contact</li>
</ul>
Menu
</nav>
</body>
</html>
you may want to remove this:
$(window).resize(function() {
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
and replace it with
$(window).resize(function() {
if(menu.is(':hidden')) {
menu.removeAttr('style');
}
});
After go through the source of your demo site, it's turn out that you haven't included the nav.js file:
<script src="http://demo.hongkiat.com/_nav/js/nav.js" type="text/javascript"></script>
I implemented a script which load another page without refresh the page and everything works as expected. But I have a bug/problem: if I try to go from "index.html" to "about.html" page (for example) and return to the "index.html", the jquery function on the index page to hide the elements between <p></p> tags stops working :(
Anyone know why this happens and the most important how to fix it?
This is my index page:
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>PAGE1!</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
#import url(css.css);
</style>
<script type="text/javascript" src="js.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<div id="wrapper">
<h1>Test</h1>
<ul id="nav">
<li>welcome</li>
<li>about</li>
<li>portfolio</li>
<li>contact</li>
<li>terms</li>
</ul>
<div id="content">
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</div>
</body></html>
This is the about page:
<html>
<head>
<script src="jquery.js">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<div id="content">
<p>ABOUT HERE.</p>
</div>
</body>
</html>
This my JS code which load the page without refresh:
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
$('#nav li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});
Thanks in advance, guys!
The reason it happens is because jQuery functions don't work off the bat with new DOM elements so you need to use the on function, assuming you are using a version of jQuery > 1.7, if not, you need to use the live function instead.
Replace
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
with
$(document).ready(function(){
$("body").on("click", "p", function(){
$(this).hide();
});
});
Or, for older versions of jQuery:
$(document).ready(function(){
$("p").live("click", function(){
$(this).hide();
});
});
Alternatively, you could also place the p hiding function in your existing loadContent function:
function loadContent() {
$('#content').load(toLoad,'',showNewContent());
$("p").click(function(){
$(this).hide();
});
}