Develop Reference

Vertical ticket feed with Ajax and jquery

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

Make horizontal nav menu slide to show more options on click of arrow

I have a horizontal sub menu with 8 options (can't add more or it drops to a second line), but now it needs more and i want a particular effect. I want the last option to be an arrow and the whole menu slide horizontally to the left when the arrow is clicked to show more options and a left arrow to slide back.
I have researched for a few days and have found a few examples similar, but just haven't worked in my case. Also, alot of answers to this similar thing involved plug-ins or carousel's and I don't think those are going to work for my particular site.
Right now I have it working kind of how I want but it's not the right effect. I'm using .hide() and .show() in my jQuery function and basically used the class: "firstSide" for the first part of the menu you can see after it drops down from the main menu, and class="slideSide" for the 2nd part. I've also tried .slideToggle() and playing with the widths but haven't got it to work right.
This is my codepen that I've started as an example: CodePen
This codepen isn't pretty but it works for this example, this is my function in it:
$('#arrowRight').on('click', function () {
$('.firstSide').hide(function () {
$('.slideSide').show();
$('#blankSub1').show();
});
});
$('#arrowLeft').on('click', function () {
$('.slideSide').hide(function () {
$('.firstSide').show();
});
});
Also I have the class slideSide set so that it doesn't display along with the first part of the menu or else its all on a 2nd line which i don't want as the width of the 8 menu options is about the full width of the whole site.
.slideSide {
display: none;
}
The desired effect I want can be seen on: http://store.apple.com/us/iphone
I've tried to see how this works but have not figured it out, below is a screen shot of the menu I'm talking about on that page.
Any help or advise would be appreciated as I'm kind of stuck.

Check out this fiddle.
Is this what you are looking for?
you nest a ul within a div and make use of overflow:hidden on the div.
Using jquery you can then implement the sliding via margin-leftor positioning like
position:relative; left:-100%
and you hide the arrows as they are clicked and so the other one.
you can play around with the values to match your needs.

Wordpress navigation submenu shifts items to the right on hover

I am working on a website developed in Wordpress that uses a three-depth navigation menu. The menu is automatically generated and consists of <li> and <ul> items. I am encountering a problem where list items shift to the right when a list containing a submenu is opened.
The site where this happens is the Dutch site http://www.skoll.nl/. I'm having trouble converting this to a JS-fiddle, but I'll try again tomorrow.
The problem
Whenever I hover on an item in the first submenu, the second submenu opens. Often, the items in this second submenu are larger than the item itself, causing the list item to expand and pushing other items to the right. This can be seen by navigating to "Informatie" and then "Evenementen". You can see that the item on the right shifts to the right, making it rather hard to click on.
I've spent numerous hours on this problem and haven't got any further, so the question I would like to be answered is:
How do I stop the list items in the first submenu from shifting to the right, while preserving the current layout of the navigation menu? I am fine with both CSS- and JS-solutions.
Thanks in advance.

Add following style to li elements which contains for example 'Evenementen' link:
position: relative;
Then for submenus add following styles:
position: absolute;
left: 0;
top: 20px; /* this needs to be adjusted */
You may have to add some other styles too to make everything look like it looks now, but after this submenus wont shift items anymore.

Is there a way to get the index position for Bootstrap 3 Carousel?

I am just following the example on the Bootstrap 3 docs and everything is working fine but I want to be able to know which slide is the active slide (or its position). I saw a number of methods for jumping to a slide but nothing that tells you what the current slide is.
Any suggestions?

This might be one way
If you want the index, assuming your id of your div tag containing carousel is the same as the example
$("#carousel-example-generic .carousel-indicators .active").data('slide-to');
With give you the index of what slide is currently being used with 0 as the first
If you want the active slide itself in jQuery,
$("#carousel-example-generic .carousel-inner .active img");
And that will give you the current slide being shown
I'm sure there are other ways as well.
Hope this helps

How to fix main navigation on top when scrolling down

First, Merry Christmas to all
I want to fix my top navigation menu bar on top when scrolling down like : csschopper.com
this happen by position: fixed; css property but when i put it in css menu will be fixed at top. this will require some javascript code but I don't know what exactly the code is. also when someone scroll down i also want to display small logo beside the menu like csschopper.com
Thanks in advance.

This is what the code would look like: jsFiddle In this example I created two navigation bars but you can also have one and then add an item
This is jQuery code, so make sure to load the jQuery libery:
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>

Initial position of topbar is static. But when user scroll (you have to catch onscroll event) like this on jquery :
$(window).scroll(function());
with a scroll position bigger than header height, the Javascript modifiy the topbar position to fixed with this for example :
documentById().style.display
The same thing for the logo on left.