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
Related
I'm trying to create a responsive website in Dreamweaver with a header and menu which initially scroll and then stick to the top of the page.
The header and menu would need to scroll over the top of a fixed hero image.
This hero image can't be defined as a background as it will be powered by a flexslider script to change the image after a set time.
I would also like the sticky header to possibly shrink down in height when it reaches the top of the page, to reduce the amount of screen space it takes up.
I've found a number of sticky menu examples on-line and some seem to have the annoying trait where the content directly below the menu disappears behind it at the point at which the menu sticks to the top of the screen. I would like to avoid this.
Please find a Mock-up of what I'm looking for here
Obviously, all of the above won't be acceptable on a mobile device.
So for mobiles, the header would need to scroll out of the way, leaving just a hamburger style menu fixed at the top of the screen.
I have found a number of examples on-line with elements of what I require, but nothing yet that combines everything.
I've tried cutting and pasting code from different sources, but haven't yet achieved the desired effect.
I don't know if what I'm asking for is workable, but I would appreciate if anyone could point me to examples of how to achieve this (or improve upon what I'm looking for).
Thanks
Neil White
Use this JS
http://stickyjs.com/
it adds the class is-sticky to the element which you wanted to stick to top. So you can add height in css for is-sticky class. Which in terms will reduce or increase the height of element when it reaches to top as per your requirement.
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.
This is driving me NUTS!
Right, I've downloaded flickerplate's slideshow script and it's working 100% but if you go to the their website to view their demo, Click here you'll see that it has a parallax scroll effect. Now I want to use that parallax scroll effect too but they don't include it with their download (I initially thought the parallax scroll effect came with the slideshow).
So I've been spending HOURS and HOURS trying to locate the source code for this parallax scroll effect and for the life of me, I cannot find it! What makes it difficult is that they minify all their code so it's almost hopeless for person like me who isn't a javascript guru.
So I've had to resort to trying out a third party parallax scroll script Here and although I can get this script to work on a single image, I'm having no success implementing it into the flickerplate script (not surprisingly).
Here is the markup for the flickerplate script:
<div class="flicker-example" data-block-text="false">
<ul>
<li data-background="santa-maria-inhaca-island-mozambique-01.jpg"></li>
<li data-background="nhoxani-lodge-santa-maria-mozambique.jpg"></li>
<li data-background="santa-maria-accommodation-inhaca-island.jpg"></li>
</ul>
</div>
Here's the Markup for a SINGLE image using the Parallax script:
<div class="parallax-window" data-parallax="scroll" data-image-src="braby-villa-self-catering.jpg">
</div>
So obviously the problem is that this markup is per image (per ONE image), so I tried using it with the list items in the flickerplate markup above but that doesn't work - the image / background disappears. I'm assuming there's some conflict. This is the problem when trying to use a third party plugin with another.
What would probably be a lot easier is if I could find the same parallax scroll script that flickerplate used in their demo page, but I can't get any information on it ... maybe you can? I just want it like their demo page.
I've read several posts about using jQuery to change the height based on the resizing of the browser window which involves watching the window size then updating the 'inline' style to a new height formulated from the width size. However all discovered solutions do not work since I need something similar but not the same, basically I want a inside element that resizes, sadly the content isn't images as this would be easier and saved me writing this post.
So the HTML code as you would expect to see looks something like this:
<header> </header>
<div class="mainbox">
<div class="custombar"> </div>
<div class="contentContainer">
<div class="contentOne"> </div>
<div class="contentTwo"> </div>
<div class="ContentThree"> </div>
</div>
<div class="contentFooter">
<ul>
<li>Nav 1</li>
<li>Nav 2</li>
<li>Nav 3</li>
</ul>
</div>
</div>
<footer> </footer>
CSS looks something like:
.header{height:135px;width:100%;background:#000;}
.mainbox{width:100%;height:500px;background:#ccc;}
.footer{height:135px;width:100%;background:#000;}
Now I'm aware of solutions for a fixed header, fixed bottom without the use of the position fixed but before someone jumps the gun I'm looking for an extended version that will support a little more what I'll explain in a moment.
This is where it gets complicated or least for me
Basiclly I want a jQuery script that will update the height based on the size of the browser window so that only one content div is ever visible so think 3 colors and as you scroll down you get another but I want it in a way so only 1 is ever visible, this can be done with offsetting and using a names I know this much but this wouldn't resize the window so that only one element is ever visible.
I've compiled some images in the hope this might explain what I'm after a little more...
Taking into account the following from the above image and in text form
Header always visible
Inner content will resize with browser
Nav links will always be visible even when scrolling
Footer always visible
Another example of the slides
As you can see from the above image the content will slide but most importantly resize and only one ever slide will be present by using go to and 100% height.
Width and Height Changing
It's pretty easy to throw a solution in if your willing have the user scroll and have the content cropping but the content is light and will work nicely with only 1 slide ever visible.
Understanding
I know at some point the content in the middle will become so small that it won't render correctly, this is no problem and I'll turn of the feature when it gets to X width using media queries, I appreciate everyone that contributes to helping in any shape of form and sorry if its a little board on the jQuery front, its not my strong point, I'm hoping that someone can wiz together a jFiddle or similar or point me in the direction in something already made.
There might be an easier approach to this problem like using min-height, any working method is appreciated. PS for the mammoth of all posts, it wasn't my intention ;)
I think you want something like this
only the content should scroll
JS Fiddle
you can give min-height for the div on resize
$('.container').css("min-height", '250px');
I not very familiar with html, css and javascript
I am using twitter bootstrap, I'd like to have a section indicator in a long page that shows the relative position of the current view relative to the entire ver long scrollable page.
The sample of what I want to achieve is in:
http://global.tommy.com/int/en/Collections/start
I managed to do that with <ul> <li>, however, I'd also like to animate the arrow movement from one <li> to the next <li> as the user scroll up and down within the page. I managed to scope out the code for the <ul> <li> but have no idea how to animate the movement... could anyone help me point to the specific animation part or recommend some javascript or css library for that? Probably I missed twitter-bootstrap elements too, however I did not find any so far... Thanks!
EDIT:
My code in jsfiddler, however, it doesn't seem to work in jsfiddler:
The ul li code
What I wanted to achieve is exactly like the animation on the left side of Tommy Hilfiger's page when you scroll up and down, the arrow will keep track of which section you are in by adjusting the arrow's position pointing to the specific section on the li
Without more detail I can't really go into specifics, but I can at least suggest jQuery's animate function. It makes animating css properties very easy.
To animate the scrolling of the page, take a look at this library:
https://github.com/davist11/jQuery-One-Page-Nav.git
you can use the same js to animate the movement of the arrow as well