I am trying to implement a vertical ticker feed of 20 news say. Here I want to have this with below points :
1.) The ticker should display first 5 news at a time. When a user scroll down in the ticket box, he/she can view the others news down to 20th one.
2.) when a user hovers on any news div section, it should display a box in the left side of the news text. Just like as in the case of Facebook ticker. Here what's important is, The box should be displayed well relative to the position of the news div section. If the current position of the news div section is at the bottom of the page then the hover box should be appear at the bottom only. Similarly if the news div position is at the middle of the page, then it should display the hover box at the middle. In a nutshell the hover box should be dynamically adjust its position based on the position of the new div section.
I am facing challenges while developing this so decided to take help from you guys. The main challenge is, while trying to make the ticker box scrollable of fixed height to contain only 5 elements, it is hiding the hover box as well.
The easiest way to achieve the moving context div would be to render it for every item and show it when the user hovers over the ticker item.
Each item would look like <div class="a">NEWS 1 <div class="a1">TO THE LEFT (news)</div></div>
Then you simply set .a1 to display:none on load and add
.a:hover .a1 {
display:block;
}
in your css.
To solve your overflow problem when setting overflow-y to scroll, you can set a margin-left to your list which will expand the overflow-x bounds (and allow your hover over content to display)
Example here
to get what you're really wanting, you're gonna have to use javascript. You'll need to listen to the onmouseover event for all your ticker items and set the Y position of the content div to match. example here: codepen you'll need to sort updating the content of the div and correct left/right position based on where you want it to show
Related
I am writing a code which when a user clicks on premium plan button translateX(-300px) is set for a DIV which has property "overflow-x: scroll;" and the premium column is showing. but the problem is when user drag over the page to the right and left content should be visible, the remaining 300px view of DIV does not appear and show. I mean on mouse horizontal scroll, translateX(-300px) property limits us from scrolling to the left. should I call a function on mouse scrolling to override this property? excuse me because of bad English and Thank you for your response in advance.
Instead of using translateX, you should look into element.scrollLeft if you want to scroll a div.
MDN: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
I am trying to make a page which which have only two section 1st section which is at top have please see the image . Now I m able to go to div 1 to div 2 easily using pagePiling.js. can anyone tell me how to achieve the horizontal effect in div 1 . and after the end of the content on div 1 it must pagePile to div 2 . and when coming back to div 1 it user also see the effect of horizontal scroll.
In case you want to have a section with large content and therefore create an scroll bar for that section, you can do it by adding the class pp-scrollable to that section:
Making a web app similar to instragrams layout and the post items have a full width image and then a div heading above each once.
e.g.
<div class="blogpost">
<div class="blogtitle">
</div>
<div class="blogimage">
</div>
</div>
This is a simple list of the posts with the title above. On instragram, once the title hits the tops of the page (because of user scroll) that title div is fixed. Once the user scrolls more and the next title div meets the bottom of the current fixed once, the current one is pushed up and the new one fixed to the stop.
Any help on this?
You are looking to create a site that uses parallax scrolling. Here is a link to a helpful site.
Make a variable with a value of zero, and check (in JQuery) $('.blogtitle').eq('variableWithZero')offset().scrollTop() and if it's zero, change its position to fixed, and add one to the variable with zero. Before that, remove() (.blogTitle).eq('numberWithZero - 1)
This will only help with scrolling up, but it should get you started ;)
I have created the following page http://kylehouston.com/testing/localscroll/ where I have a number of main links and then sublinks for these. At the moment when a main link is clicked the content scrolls vertically and when a sublink is clicked eg Blue Inner Link 1 the content slides horizontally.
My question is how can I update the script so that when I click a main link the content scrolls horizontally and when I click a sublink the content scrolls vertically?
Thanks
Kyle
Based on the documentation I think you need to setup selectors that target the parents and children separately. Then set the axis property.
$('parent selector').localScroll({
axis:'yx'
});
$('child selector').localScroll({
axis:'xy'
});
Right now your code uses the same selector and default axis for everything
$.localScroll.defaults.axis = 'xy';
I have a menu system made up of divs and i want to animate the left property to slide each time the user mouses over a menu item but i need the outer div(which is black) element to expand as the menu items move left to right also I want the div element(.container) to slide back and contract the outer div element(this black div which is 0 width) I have a basic example done in jsFiddle it olny moves the elements to the left
Having a little trouble fully understanding, but is this sort of what you mean?
http://jsfiddle.net/V3RHr/2/
If I could rewrite your html a bit, I would put make each .menu-item into an unordered list.
When you mouseenter the unordered list, you expand the second container. Inside that mouseenter function, I would have a second event when you mouseenter a list item, you populate the second container and stopPropogation.
You could probably still do it with a mouseenter on the first container, and another mouseenter on the div.menu-item, but your first container has extra height and width.
You should be able to fix the left is null issue by having the code not execute on the last .content, like this:
$('.container').not(':last').find('.menu-item').mouseenter(function () {
This will not apply to the menu-items within the green box.
For the re-show issue, I would change the way you are showing. Instead of sliding the box out from behind the other, you can position it where you want it to end up and hide it, then you can use:
.animate({width: 'show'})
Which will give a similar sliding effect.
That, or do it similar to my response to your other question, only without the collapsing I had previously:
http://jsfiddle.net/V3RHr/3/