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.
Related
Now i try to make my site by fullpage.js plugin.
https://github.com/alvarotrigo/fullPage.js#callbacks
But there is a weird bottom area inside the section that have content which longer than their section height. (Section that have scrollOverflow)
Like this.
This is my code.
$(document).ready(function() {
$('#fullpage').fullpage({
'navigation': true,
paddingTop: '0',
paddingBottom: '0',
scrollOverflow: true,
afterLoad: function(anchorLink, index){
//using anchorLink
if(anchorLink == 'grey-fade-bg-slide'){
//alert("eoaehou");
$("body").css("background-image","url('img/team-bg.jpg')");
}
if(anchorLink == 'banner-slide'){
//$("#map").css("height","120px");
if(window.location.href.indexOf("our-team-bg-slide") > -1 || window.location.href.indexOf("contact-us-bg-slide") > -1 ) {
//alert("ccccc");
$("body").css("background-image","url('img/team-bg.jpg')");
}
}
if(anchorLink == 'blue-bg-slide'){
//alert("eoaehou");
$("body").css("background-image","url('img/banner-bg-image.jpg')");
}
},
afterRender: function(){
initMap();
$(".our-team-bg-section h3").css("margin-top","120px");
$(".contact-us-bg-section h3").css("margin-top","60px");
$(".grey-fade-bg-section h3").css("margin-top","120px");
}
});
});
All js file that i included.
<script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/scrolloverflow.min.js" type="text/javascript"></script>
<script src="js/jquery.fullPage.min.js" type="text/javascript"></script>
<script src="js/jquery.easings.min.js" type="text/javascript"></script>
So anyone know how to fix this?
Thanks!
You should be using the class fp-auto-height as detailed in the fullpage.js docs.
See the demo online or the one in codepen.
<div class="section">Whole viewport</div>
<div class="section fp-auto-height">Auto height</div>
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 want to open a new page inside of shadowbox, when I click the code
this link Opens a new page inside the shadowbox in the same page. How to do that?
<a class="fancybox" href="edit.php?pn"></a>
rfq_list.php
<link rel="stylesheet" href="css/style.css" type="text/css" id="" media="print, projection, screen" />
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/jquery-latest.js"></script>
<script type="text/javascript" src="javascript/jquery.tablesorter.js"></script>
<script type="text/javascript" src="fancybox/lib/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.1.3"></script>
<link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.1.2" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
type: "iframe",
helpers : {
overlay : {
closeClick: false}
// prevents closing when clicking OUTSIDE fancybox
},
closeClick : false, // prevents closing when clicking INSIDE fancybox
scrolling : 'no',
width : 550,
height : 0,
autoScale : true,
openEffect : 'elastic',
closeEffect : 'fade',
closeBtn : true,
afterClose:function () {
window.location.reload();
}
}).trigger("onclick");
});
parent.$.fancybox.close();
</script>
<style type="text/css">
.fancybox-custom .fancybox-skin {
box-shadow: 0 0 50px #222;
}
</style>
<script type="text/javascript">
$(function() {
$("table").tablesorter({debug: true});
});
</script>
<script type="text/javascript">
$(function(){
var tfrow = document.getElementById('tfhover').rows.length;
var tbRow=[];
for (var i=1;i<tfrow;i++) {
tbRow[i]=document.getElementById('tfhover').rows[i];
tbRow[i].onmouseover = function(){
this.style.backgroundColor = '#f3f8aa';
};
tbRow[i].onmouseout = function() {
this.style.backgroundColor = '#ffffff';
};
}
});
</script>
</head>
rfq.php
<script type="text/javascript" src="javascript/jquery.js"></script>
<script>
function showUser(str) {
var $txtHint = $('#txtHint');
if (str == "") {
$txtHint.html('');
return;
}
$txtHint.load('rfq_list.php?q=' + str)
}
</script>
<div id="txtHint">
</div>
What is the problem in this scripts?
You are including jQuery three times:
<script type="text/javascript" src="javascript/jquery-latest.js"></script>
<script type="text/javascript" src="fancybox/lib/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="fancybox/lib/jquery-1.8.2.min.js"></script>
and aside particular cases you have to include it once (and use noconflict).
Now the the table sorter plugin will be detached from jQuery by the third include and you face your error.
Remove the other jQuery include and use only the latest.
I have jquery script for menu and other for gallery, how to enable both of them to work? Below is my code
I also have some expanding box problem on the li element, whit thi explanation:
Any content that does not fit in a fixed-width or -height box causes the box to expand to fit the content rather than letting the content overflow.
Affects: Internet Explorer 6.0
Likelihood: Likely
And also double float margin bug error:
When a margin is applied to a floated box on the same side as the direction of the float, the margin is doubled. This bug only affects the first float in a row of one or more floats.
Affects: Internet Explorer 6.0
Likelihood: Very Likely
It is very urgent,pls help!
SCRIPT FOR MENU BAR
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../js/jquery.easing.min.js"></script>
<script type="text/javascript" src="../../js/jquery.lavalamp.min.js"></script>
<script type="text/javascript" src="../../js/image_fade.js"></script>
<script type="text/javascript">
$(function() {
$("#lava_menu").lavaLamp({
fx: "backout",
speed: 700
});
});
</script>
SCRIPT FOR GALLERY
<script type="text/javascript"src="../../hisasann-jStack/js/jquery.js"></script>
<script type="text/javascript" src="../../hisasann-jStack/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../../hisasann-jStack/js/jStack.js"></script>
<!-- syntax -->
<link rel="stylesheet" href="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css" type="text/css" />
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shCore.js"></script>
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shBrushXml.js"></script>
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shBrushCss.js"></script>
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shBrushCss.js"></script>
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shBrushJava.js"></script>
<script type="text/javascript" src="http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/shBrushRuby.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
dp.SyntaxHighlighter.ClipboardSwf = 'http://hisasann.com/housetect/js/dp.SyntaxHighlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
// fadeInOut
$("#logo").fadeOut().fadeIn();
// smooth scroller
$("a[href^=#]").click(function() {
var hash = this.hash;
if(!hash || hash == "#")
return false;
$($.browser.safari ? 'body' : 'html')
.animate({scrollTop: $(hash).offset().top}, 1500, "easeInOutBounce");
return false;
});
});
var options = {
isClickAnimation: true,
isPositionRandom: true,
durationOut: 300,
durationIn: 200,
easingOut: "easeInOutBack",
easingIn: "easeOutBounce",
moveLeft: 250,
moveTop: 150,
opacityOut: 0.6,
opacityIn: 1,
delay: 10,
direction: "next",
callback: function() {}
};
$(window).bind("load", function() {
// jStack
var jstack = $("#imageBox").jStack(options);
$("#next").click(function() {
jstack.next();
});
$("#prev").click(function() {
jstack.prev();
});
$("#shuffle").click(function() {
jstack.shuffle();
});
});
</script>
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript"src="../../hisasann-jStack/js/jquery.js"></script>
if im not mistaken, both of them are jquery library?, they probably has conflict with each other if they are loaded on the same page, this problem occured to me, what i did was removed one of the library,
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(...);