Making simple buttons to autoscroll to next and previous Id'd elements - javascript

I'm new to web design, but have been tasked with making the website for an organization I'm in.
I've been googling with various keywords but my coding knowledge is only just starting on Javascript and CSS animations.
I'm trying to make a simple pair of buttons to scroll to the next and previous in a series of elements on a page.
A button that takes you to the previous section and a button that takes you to the next section, which is all on the same page.
Everything I've found so far is about having a list of the sections to click to, not two buttons that scrolls between them or it pertains to an image slideshow.
Any help here would be appreciated, Javascript or CSS.
I get the general Idea, I have to give each div a particular ID, set up an event to monitor what's currently in the viewport, and have the buttons set up to onclick to the previous or next sections, but I'm not familiar enough with CSS or Java to code either.

Jumping to the next or previous div is plain HTML, e.g. your markup looks like:
<div id="first">First content</div>
<div id="second">Second content</div>
<div id="third">Third content</div>
Then you can use simple anchors to jump to the different parts, e.g.:
Got to second <!-- Jump to second part -->
Now if you want animated scrolling and not just jumping, you can use a suitable Javascript library, e.g. JQuery. CSS-Tricks has a quite simple example of doing smooth scrolling.

Related

jQuery: Scrolling like a contained ios scrolling box you would see in the app store

Here is what I am talking about:
When you visit https://soundcloud.com/ , when you look at the homepage you see the whole "Connect on Soundcloud" thing.
The texts and buttons on the screen in that confined space scrolls by itself in a given amount of time. It also has those two small white circle buttons that tell you which item it is on(the first white circle gets filled in while the other one is hollowed out with a border when the user is looking at "Connect on SoundCloud" and the other way around when it is on "Discover more with SoundCloud GO+").
How is this made?
Thank you!
You should take a look at Carousels on w3schools, they cover this pretty well.
Bootstrap brings functions and html attributes for building components that slide though elements. Elements not currently visible are pushed off the view with CSS and visible ones can slide into view.
That is called carousel, and it is part of many frameworks/libraries like Bootstap. Some frameworks/libraries call it gallery.

Sticky header with next and previous button

I'm trying to build a sticky header with next and previous button in my site.
Initially there is no sticky section but when the user scrolls down the menu hides into a hamburger menu and the sticky element comes up. On further scrolling the sub section titles like Features, Contact Us, etc... are updated .Also we we can goto next and previous section as shown in the image.
So, how do I build this or is there a plugin that I can make use of?
Thank you.
Sticky Things
Sticky sections can be achieved using a combination of regular HTML, regular CSS and a Javascript plugin like sticky.js here. Using it you can use JS to attach a CSS class to certain HTML sections when a visitor is scrolling.
You can then style the CSSaccordingly to display / or hide certain sections of the page on scroll and thereby override / rewrite the original positioning.
Previous and Next
To achieve a previous and next button you could link those manually using HTML as well - which would be quite some work. If you look for dynamically linke site content you should have a look at static site generators like Octopress, or Jekyll - or consider using a CMS like Wordpress.
Edit: If you mean "jumping" up and down from one section of the site to another you can look at HTML anchor links
I have done a sticky header and a previous / next button in the footer for my website using Jekyll with some manual modifications. You can have a look at my blog on Github to see how I solved it.
Besides this it is not easy as there is not default solution to what you are trying to do. It fairly depends on your constraints, preferences and skills.

Flip animation for multiple DIV's

I have a strange problem it seems to be a simple one but I am unable to find the solution.
I have 3 divs that are generated by the drupal->views and every div contains a button on the bottom and I need to flip the div on button click. Basically, if div #1 is currently displayed and button is pressed the second div is shown with flip effect and same with the third div.
Here is the arrangement:
<div class="views-row views-row-1 views-row-odd views-row-first">
<div id="careers_excerpt_88" class="careers_excerpt">
<div id="careers_description_88" class="careers_description">
<div id="careers_form_88" class="careers_form">
</div>
And the content is within the above three divs.
Now the problem is that I can show and hide these divs but the flip is not working. I have tried many JavaScript plug-ins, some work for two divs.
I just need help on this issue (or perhaps suggest me some good plug-ins).
Check out this tutorial.
No need of a JS lib.
Simply use CSS, and don't forget to properly set these properties on the right elements: transform-style, transition, perspective, backface-visibility and transform.
Beware of the vendor prefixes!
And also of Internet Explorer. [You can find some hacks for it.][3]
I do not know what exactly is your functionality/Intention of the flip divs you are looking for, but here is a plugin which can be moderated to achieve what you want.
Here is the: Demo and Plugin
And Github Link
Hope this helps.

How can I scroll multiple DIVs in a slide-bar using jQuery?

I am a beginner at jQuery and I have been trying to place more than one div in one slide bar. Basically, I am working on auction site and I want a DIV which displays more than one item in same div with “Next” and “Previous” button arrows.
For example:
When you visit an auction site, one slide-bar should appear containing more than one item (multiple DIVs). The slide-bar should have a text that appears, saying “newly arrived item or recommended for you etc.”
Here's a screenshot of what I mean:
Is there any way to achieve this using jQuery? I have just recently started working with jQuery and I am stuck. Any help is much appreciated.
Assuming that “building your own” isn't an option for you, you could take a look at jQuery plugins like Smooth DIV Scroll, or any alike plugin that scrolls content horizontally left or right.
Generally, one of the nice places to find a multitude of jQuery plugins would be (for example) the jquery-plugins.net website. There you'll find usable plugins for what you're trying to do. Just one of many available there that also does what you're looking for: Any List Scroller – jQuery Plugin To Scroll Lists.
As said, there's more than a dozen alike plugins scattered all over the internet. All you need to do is to deciding which one fits your individual site best. In case of doubt, fire up your favorite search engine and look for “jquery div scroller”.

twitter's scrolling bar effect

Did you notice the scrolling trend bar on twitter home page.
What is the right way to do it with jquery? I hear jquery is better than javascript.
If you take a look at the source code, you can see the basic structure:
<div>
<div>
<ul>
<li>Year Without Rain</li>
<li>Gameday</li>
<li>etc...</li>
</ul>
</div>
<span class="fade fade-left"> </span>
<span class="fade fade-right"> </span>
</div>
The ul element is the list container containing the topics. The position of this element is animated to scroll it. When the scrolling list is about to come to the end, the contents of the list are appended to the end of the list (to simulate the list coming around and scrolling continuously). If this wasn't done, Twitter would probably have chosen to reverse the direction of the scroll. But how they did it is much nicer.
To get the fading effect, the .fade-left and .fade-right elements are used. They are aligned to the left and right, respectably. They are set to be transparent and the image itself is a transparent gradient: http://s.twimg.com/a/1283564528/images/fronts/fade-trends2.png. Using z-index, it is positioned over the scrolling list, thus giving a transparent effect on both sides.
Twitter does indeed use jQuery (but just so you know, jQuery is JavaScript, just a JavaScript framework) and I haven't taken the time to analyze the code, but it should be pretty straight forward to implement.
many options:
What's a good bit of JS or JQuery for horizontally scrolling news ticker
I recreated the twitter marquee check it out :Twitter marquee
I used raw javascript and automated it so that if you ad more links
it will calculate the width and know when to slice it and go back to zero

Categories