I'm using smooth-scroll.js on my website, and I have an active javascript that creates an anchored link depending on the information entered into option tags. The problem I'm having is:
smoothScroll.init() is executing before the anchor link is initiated, so it just jumps to the link instead of smooth scrolling. I was thinking that using setTimeout() to delay the execution of smoothScroll.init(); would fix the problem, but it still isn't working.
Here's the link to the site. Paper Inventory
My goal is to get the site to smooth scroll to the correct paper DIV when the person clicks on the "Go To Paper" DIV. It should be simple, but because everything is dynamic, it's adding a bit more difficulty than I expected.
If you go to the site to test it, I suggest choosing United Trade Printers, 12x18, 100#, Accent Opaque, Smooth, White, Cover. I don't have an error message yet if you choose a paper that doesn't exist. So That's a good default one.
I'm also using jQuery, so jQuery answers are more than welcome, and would be easier to implement.
Any help is greatly appreciated. Thank you in advance.
Related
Recently I am creating a page with a small menu in the content, just to switch between different content topics. Nearly similar to a small slideshow, just with a simple line navigation above the content with the different topics.
So I am just looking through the web to find some alternative ideas for the typicall hamburger icon for the mobile version, since I am using it already for the main navigation.
I found this:
'http://codepen.io/fbrz/pen/bNdMwZ'
I dont want to use the pull-down function, but I love how the different menuitems appear and come from outside the content area in focus.
So I had the Idea of maybe just using the swipe menu-items, without the pull down function.
So my question is, did anybody of you have found or even created a similar navigation somewhere, and if yes where? I would love to find some more options/ideas?
Thanks as always for your input!
I think this could be something useful for you
Scroll Overflow Menu
I am having a very odd issue and also finding it difficult to implement smooth scrolling on my single page website.
You can view my site HERE
Firstly, Is the strange anchor issue, when I click the link in the hamburger menu, the link appears in my address bar (which I would like to get rid of at some point) but when I scroll down the page it just keep being stuck on that div only I cannot scroll the page freely.
Secondly, I can't seem to implement any smooth scrolling techniques which I find on the net so far and I would really appreciate a little hint as to what I am doing wrong. I have tried to put name="" and rel="" into the <li> and <a> elements (adjusting the smooth scroll code accordingly but still nothing.
Please find reference HERE
I am a bit of a newbie with javascript so maybe i am not doing something simple here.
Thanks in advance!
Terry
After speaking to some other students I found that the issues is due to the html and body CSS. I needed them to both have height auto and min-hight 100%.
Although this still does resolve the issue with the revealOnScroll. I need to tweak this code I think as it isn't able to then calculate the offset().top
I'm working on horizontal website. I would like to create 2 buttons (left button and right button) which can help users to scroll to left and right.
The site that I'm working on
The functionality that I wanted to create is, when I mouseover the button the page will start and continue the scrolling action until the mouse move away from the button then the page stop scrolling.
I found something from codepen "http://goo.gl/uTQdzD" that is similar to what I looking for but that is not function in the way I wanted. It's required to keep clicking it only it can continue scroll, once it clicked then it only move a certain pixels distances and stop then have to click again... even I tried to change to mouseover, the same thing... I have to moving the mouse in and out the button only it can continue to scroll the page.
I'm not a professional web coder or developer but just a new guy. I Hope someone out here could help me out.
Thanks in advance.
Here you go: http://codepen.io/caseybaggz/pen/uBysA?editors=001
I changed the .click to a mouseenter event which is what you are looking for. Additionally, the increments that you noticed were happening because of the step variable being assigned 400. So, I just replaced the 400 with wWidth and within the mouseenter function, told it to scroll the bodyWidth.
I'm not totally sure why you would want to do this? The natural flow of web design is to design/build sites vertically. To have the user scroll horizontally is a little awkward regarding the UX and could be considered bad design…especially now that devices come into play.
Be sure to learn web-design and UX standards first before you get into a position for developing sites. It not only helps to contribute for bettering the web, but also the UX. ;)
Hope this helps and good luck!
I have this website; http://kieronboz.co.uk/inspired/
Im a beginner to web design, so forgive me :P
If you click on the top link in the ugly navigation bar on the left, a new page is loaded, I thought it might be a good idea to now shrink the header image for the non-main pages, so I was thinking a jquery script to make it 'slide' up when the page is loaded, to the top of the light white border around Inspired Marketing, so it would turn into a smaller header!
Anyway, problem is I cant find anything like this in google, I have seen the jquery slideup function but im having trouble implementing it in such a naked fashion as the code reference sheets present it.
If this is a terrible idea and there's better options, ill hear those too! Thanks again
Simply add to the header the margin-top: -540px; (or via jquery: $("#header").css("marginTop","-540px");
You may use jquery.animate to add an animation to it.
As to doing it only on pages that are not the index - Either include the script doing it only to non-index pages, or use document.location.href to figure out whether you're on index or not.
as you may have guessed from my post title I have no idea how to work with jQuery or javascript in general. I know that this isn't too hard of a function to put together but I can't seem to do it on my own.
Pretty much what I'm trying to do (in theory) is there are four large boxes that cover the available content area that link to (literal) menu items like breakfast, lunch, sides, and drinks hidden inside a div that when one of them is clicked the full menu expands down and scrolls gracefully down to the one they clicked on after which they can browse all the sections together as they please.
I have no idea how to do it and every time I try it breaks the page. Hopefully somebody with more than five minutes experence can help. I have no problem at all with CSS and HTML but scripting is just pitiful.
So for scrolling you can do something like this.
I don't quite understand how the full menu portion is supposed to work but you could hide it initially and then show it when the menu item link is clicked.