I'm using bootstrap scrollspy on my project, basically I have a click here link which has the following url format http://example.com/#positionA and on the page that it loads I have the following html code
<p></p>
<h3 id="positionA">Position A</h3>
<p>This is a test code</p>
The issue that I had is that the page loads on the position that I want but the scroll stops on the This is a test code position instead of the Position A.
How I can fix the position that the scrollspy stops so that I will stop before the title of the paragraph and display the title as well? Thank you
[UPDATE]
The project is a prestashop website and I'm working on the Terms and Conditions of the website. So on the delivery page I have the click here where if the client clicks it it will take him to the terms and conditions page on the specific sections. On the body I have this one
<body id="cms" class="cms cms-3 cms-terms-and-conditions-of-use hide-right-column lang_en two-columns" data-spy="scroll" data-offset="50">
And all the text belogs to this div
<div id="center_column" class="center_column col-xs-12 col-sm-9">
<div class="rte">
</div>
</div>
So on the delivery page I have the following code
<li>Terms and conditions for delivery, refund and returns please click here</li>
I have found the solution, here is my code how i fixed it
var hash = false;
if(window.location.hash) {
hash = true;
}
if (hash)
{
hash = document.URL.substr(document.URL.indexOf('#')+1);
var anchor = $('#'+hash).offset();
console.log("left" + anchor.top);
anchor.top = anchor.top - 100;
console.log("top" + anchor.top);
$('html, body').animate({
scrollTop: anchor.top
}, 500);
}
Use Scrollspy offset
By adding
data-offset="10"
to
<a data-spy="scroll" data-target="#positionA" data-offset="20" href="#positionA" >
it will 'offset from top when calculating position of scroll' in pixels
Related
I'm using Foundation, and would like a sticky top bar with sub links to internal parts of the page. The problem is, if I do it naïvely, i.e.:
<div class="sticky">
<nav class="top-bar" data-topbar role="navigation">
<section class="top-bar-section">
<ul class="left">
<li>Intro</li>
<li>Basic</li>
</ul>
</section>
</nav>
</div>
... not much stuff ...
<a name="/intro"></a>
<h2>Intro</h2>
... much stuff ...
<a name="/basic"></a>
<h2>Basic</h2>
... much stuff ...
... then the top of the page scrolls to the top of the header, which is then obscured by the sticky top bar. See the jsfiddle and click on the top links to see what I mean.
How can I keep a sticky top bar, yet have clicks on the top bar scroll the page such that the header is right below the top bar, instead of obscured?
Solution #1
Add an <h2> style rule to the CSS, something like:
h2 {
margin-top: 30px;
}
Solution #2
If you want to minimise the extra white-space added to the document, you might try something like the following, instead:
a[name]:target {
padding-top: 30px;
}
This will only add white-space to the <a> element which is currently targeted.
I ended up writing a function to do this.
It changes the window location, so acts as if the user clicked an <a href='#internal-ref></a> link.
It scrolls to the link anyway using scrollIntoView() (thanks to this answer for making me aware of its existence).
It then scrolls back by $("nav.top-bar").height() pixels using window.scrollTo().
The code:
function scrollToAnchor(name) {
// change location
window.location = '#' + name;
// scroll to element anyway
var element = $("a[name='" + name + "']")[0];
if (!element) {
console.error("No such anchor with name", name);
return;
}
element.scrollIntoView();
// scroll back to leave room for sticky nav
var stickyNavHeight = $("nav.top-bar").height();
console.log(stickyNavHeight);
window.scrollTo(window.scrollX, window.scrollY - stickyNavHeight);
}
Live demo.
I have been using a bootstrap one page theme in my ASP MVC 5 app. Since it is one page, all the navigation links points to anchors inside the page. Then I needed an additional link to direct to another page, but it does not work. When I see the source code, the href is just fine, the hover is also fine, but when clicked it does nothing. Please help me spot the problem.
the problem is here:
<li class="active">Cart (2)</li>
here is the html code:
<nav class="fixed-top" id="navigation" style="top: 0px; opacity: 1;">
<div class="container">
<div class="row-fluid">
<div class="span12 center">
<!-- LOGO -->
<a class="brand pull-left" href="./">
<img src="/assets/images/logo.png" alt="Treble">
</a>
<!-- END LOGO -->
<!-- MOBILE MENU BUTTON -->
<div class="mobile-menu" data-toggle="collapse" data-target=".nav- collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<!-- END MOBILE MENU BUTTON -->
<!-- MAIN MENU -->
<ul id="main-menu" class="nav-collapse collapse">
<li class="">Home</li>
<li class="">Product</li>
<li class="">About Us</li>
<li>News</li>
<li class="">Contact</li>
<li class="active">Cart (2)</li>
</ul>
<!-- END MAIN MENU -->
<!-- SOCIAL ICONS -->
<div class="social-icons pull-right" id="navRight">
info#panairsan.com
+62 (21) 580 7881
</div>
<!-- END SOCIAL ICONS -->
</div>
</div>
</div>
</nav>
Here is the related css classes:
.fixed-top {
position: fixed;
top: 0px;
opacity: 0;
filter: alpha(opacity=0);
}
#navigation #main-menu {
float: right;
}
#navigation .social-icons {
display: none;
}
I think that is all about the code, nothing else seems to be effecting the link. Please let me know if you need more code to solve this weird problem.
I tried this one also:
<a href="./ShoppingCart">
Adding a dot, like the logo that is able to go to home page (refresh the page), but still does not work.
Thanks
Update
I use jquery.scrollTo. Maybe there is something with this plugin?
The theme I use is this one:
Wrapbootsrap - Treble One Page Theme
UPDATE about jquery.scrollTo
I keep searching, and I am narrowing the problem to jquery.scrollTo. It seems that the plugin is preventing the page from going anywhere. Anywone here is experienced with jquery.scrollTo?
UPDATE Routing Mechanism:
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional },
namespaces: new string[] { "percobaan2.Controllers" }
);
IMPORTANT UPDATE
the main problem: the link is active but it does not direct to the linked page. It does not even direct to a 404 page or anything. It just does not execute the href location.
In the href link call the class "external" like this:
<a href="./ShoppingCart"class="external">
i experienced the same some of the element may overlap your link, just increase the z-index of the link separately
I just solved this issue in my project.
The file plugin.js was causing the trouble, in my case, because the template itself was a one-page template.
I commented-out the line:
self.$nav.on('click.onePageNav', $.proxy(self.handleClick, self));
And the links in the nav just work fine.
I had a similar issue with the template. The application.js file has a script that makes this happen. So you should be able to just remove the
scroll class from the a tag to allow redirect.
/* use class="scroll" on the a element to activate*/
$(".scroll").click(function (event) {
event.preventDefault();
//calculate destination place
var dest = 0;
if ($(this.hash).offset().top > $(document).height() - $(window).height()) {
dest = $(document).height() - $(window).height();
} else {
dest = $(this.hash).offset().top - 50;
}
//go to destination
$('html,body').animate({
scrollTop: dest
}, 1500, 'swing');
/* Fix jumping of navigation. */
setTimeout(function() {
$(window).trigger('scroll');
}, 900);
return false;
});
here is the solution on this page:
a href is not going to other pages
open up your console and then click the inspection tools and then click on the link to open what script runs when you click on that link. you have to state an if statement to say: if (".navbar a" =! ".external"){here goes the rest of li that have external links and now it works}
and then add the external links to the li tags that have external links.
if (".navbar a" =! ".external"){
$(".navbar a, footer a[href='#myPage']").on('click', function(event) {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 900, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
});
}
The bug is in the smooth scroll function event.preventDefault();
the best and most simple way to do it would be to add a .not('.ext_link')
to the smooth scroll function witch will look something like:
$(".navbar a, footer a[href='#myPage']").not('.ext_link').on('click', function(event) {
and the add to all the external links a class="ext_link"
Hope that works for you...
I have a website made with foundation 4 and I have an accordion in the footer. It's just a link that when you click, it expands with further information. It works but I have to manually scroll to see the new content after it's displayed, and the user will not notice anything has happened after the click so I need the page to scroll automatically after he clicks so he can see the expanded content.
My Accordion is this (http://foundation.zurb.com/docs/v/4.3.2/components/section.html):
<div class="section-container accordion" data-section="accordion" data-options="one_up:false;">
<section>
<p class="title" data-section-title>CLICK TO SEE MORE</p>
<div class="content" data-section-content>
<p>The hidden content is here</p>
</div>
</section>
</div>
Using jquery will allow you to scroll the page on click, to allow the accordion container to be visible:
$(document).ready(function(){
$(".title").click(function(event){
event.preventDefault();
var sectionHeight = $('.section-container').height();
var target_offset = $(this).offset();
//this variable sets your target anchor place, adjust as needed
var target_top = target_offset.top-sectionHeight;
$('html, body').animate({scrollTop:target_top}, 1500);
});
});
I was wondering how would I be able to make a sub nav where only the sub nav changes once I've clicked one of the links in the navigation bar instead of the whole page refreshing if you can help me much appreciated
http://jsfiddle.net/qrn8Q/
Thank you.
HTML Code:
<header class="header">
<div class="container">
<div class="header-primary_container">
<a class="header_brand" href="#"></a>
<div class="navigation-primary_right">
<div class="navigation-primary">
<nav class="navigation-primary_links"> Home
Designs
About Us
</nav>
</div>
</div>
</div>
</div>
</header>
<nav class="sub_nav">
Home
Sign in
Sign up
</nav>
</div>
What you need to do is to use either Ajax or iFrame. For onclick event of those links, you can write your javascript codes to load the new content.
You can accomplish this with jQuery. check out my code. it's pretty simple and easy:
http://jsfiddle.net/mELsr/
$('.nav_icon').click(function() {
$('nav.sub_nav:visible').fadeOut(300); // 1
$('.selected').removeClass('selected'); // 2
var classKey = $(this).attr('id'); // 3
$('nav.'+classKey+'_sub_nav').fadeIn(500); // 4
$(this).addClass('selected'); // 5
return false; // 6
});
In plain english: whenever on of the .nav_icon's is clicked, fade out the visible sub_nav (1) and remove .selected class from the .nav_icon that was selected (2). fetch the clicked item's id attribute (3) and find the sub_nav related to it and fade it in (4) and then add .selected class to the clicked item (5). at last return false; in order to ignore the links default behavior (6).
Hope it help you get started.
Well I´ve been breaking my head with this problem for some time, I´ve tried tons of solutions online yet none of them work.
What I need is to feed data from a json to a listview on page load and present it yet it only works on index after that I need to reload every page so I can see the listview.
Here´s my jquery code:
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
$(document).bind('pageinit',function() {
DrawPageContent();
});
function DrawPageContent() {
$.ajax({
dataType: "json",
url: "js/categorias.json",
success: function(msg){
console.log(msg.categorias[1].nombre);
var categos = '';
for(var i=0;i<msg.categorias.length;i++){
categos += '<li><a href="refrescos.html?id='+ 0 +'"><img src="'
+ msg.categorias[i].logo + '"><h2>'+msg.categorias[i].nombre
+ '</h2><p>' + msg.categorias[i].desc + '</p></a></li> ';
}
$("#categorias").html(categos);
$("#categorias").listview("refresh");
//$("#page").trigger("pagecreate");
}
});}
I've also tried $(document).ready() and some other things.
Here's the HTML for that part:
<div id="page" data-role="page">
<div data-role="header">
<h1>Categorias</h1>
Opciones
</div>
<div data-role="content">
<ul id="categorias" data-role="listview" data-inset="true">
</ul>
Any ideas how to fix this?
If you are trying to append to the id "categorias" each time that is why it only appends to the first page.
In JQuery mobile the pages that are loaded aren't actually removed from the DOM right away. That means that if you load more than one page that has the and element with id categorias in it, it will end up with multiple DOM elements with categorias identifying them. In this case, it will only append to the first one, which would explain why it is not showing up on your other pages until you refresh and the other pages are removed from the DOM.
A good solution here is to give each page a unique identifier and then select the categorias from that page using
$("#categorias", "#pageidentifier");
This selector will search within the specific page you specify to find your categorias element.