I need to create a horizontal menu that shows all of the possible items given the browser size, the rest of the items are hidden (they do not wrap to the next line). Then there is an arrow button on the far right side of the div, which when clicked, shows the next row of items. How can I do this? I'm not asking for anyone to write the code for me, I just need some direction. Are there any examples online of this? I don't want the arrow button to move the items slowly across the screen. I need it to just "jump" to the next row.
For example if the list of items is made up of three, each li element is 100px long and the total page with is 200px, one of the elements will be hidden. Once the button is clicked the first two items disappear and the last item displays.
There are many ways to do this, you can make the ul position:relative, then the li position: absolute, when clicked, change the positon of lis to show them.
As Ji Guang said. There are many ways of doing this. All that matters is that how you would like to implement it, or better said how the rest of your project is implemented.
For the menu as Ji Guang said, you can create a horizontal style list (maybe use float left on li for that). The ul must be now declared as relative and fixed height or width with overflow hidden, or better off fix the height as much you want and set width relative to the page. For the arrow to go throw the rest of the rows what I guess you want is some type of carousel. Now there are plenty of good plugins available online for that. Or you can always have it done yourself. If you are planning to do it yourself then you need to follow Ji Guang advice. Put the menu ul inside another div and then play with ul's positioning.
Related
I need a bit help with this thing I am trying to write. I don't need code, just a bit of help with the logic.
So I have this navigation, that at any point can be a different width with different number of anchors in it. If it happens to be longer than the wrapping container, I must trim it, put "..." and if the user clicks on the dots, the remaining items must show in a dropdown.
Ok for now, but the navigation is also sticky. And when it sticks to top, I must reduce a logo and share (sometimes also language selector) from its width. When it goes back to being static, I must again update it, and show elements that I previously trimmed.
All of those "extra" elements, that I must reduce from the width, are containers somewhere in the website, that do not have special classes or anything special in them, pure content (it comes from a CMS, and that cannot be changed).
I would appreciate any type of help!
Thanks!
If you know the dimensions of the navigation, I would say the following steps might help:
Always have an ellipsis element, with a hidden class, toggled as needed.
Using jquery $('navElement').offset().left + $('navElement').width you get the right end position for the nav.
Now you can get the element at this position, maybe using Document.elementFromPoint(),
Identify all elements after this element, you'll have to figure out the logic for this, make them display block, and wrap all of them within a container dynamically.
now showing hiding that container will result in a dropdown effect.
As long as you can identify the logo and other components you want toshow/hide when sticky using css selectors, when your nav goes sticky, add a parent class to your nav and write css to hide these elements when inside the sticky class.
That is the logic I would follow at a broad level based on your question.
here i don't know the technically what will call but will try to explain the scenario what i want to achieve. following is the image what i am facing issue
when page right boundary is not touching the list it is showing like this.
when i minimize the browser window from any side i want list should come in the visible area of the page it should change the position now it is clipping the list like this
Please help me how i will change the position of the list as its touching to the any boundary of page like top, left, right, bottom. using jquery or css
Put your table inside a div and for div add css rule overflow:auto
Yes, You can achieve that things,
For that you have to use Shuffle.js
Please refer this Link
I need to make a dynamic jQuery menu for showing products.
There will be one main picture with text and hyperlink on it, taking 60% of the screen, and on the right of it I need three small pictures (one above the other, horizontally) with 20% width of screen (but all together taking same height as the main one).
I need help for the animation. The animation will be next:
the three pictures on the right are sliding up, and the top most disappears, and a new one is appended to the bottom (at the same time as the top most is disapearing). Now, the one that dissapeared becomes the main one.
I've made an easy solution with .slideUp function, but that doesn't actually made the div go up, instead it is just losing it's height until it becomes invisible. It is not the solution I wanted.
Thanks.
EDIT:
I've managed to get some solution with jQuery.sliedUp function, but still I didn't get the effect that the client was asking for.
Now with a little bit more search, I've found that the jQuery UI hide function extension can do the effect I am looking for.
Here's an example: http://jsfiddle.net/WMPRJ/
My problem now is if you click on the top div, while it is sliding up, the bottom div does not follow it up and take its place. I need to do that. Please provide me with a solution.
Append the current main to the bottom of your thumbnails, slide up the top one and remove() it. Take its src attribute and set it to the main image.
Here's some (sorry, not a self-contained example) code that should get you where you're going. If you actually take the time to read it you'll see it does exactly what I described in the first two sentences.
$('.thumb').first().slideUp(function(){
$('#main').attr('src', $(this).attr('src'));
$(this).remove();
});
if this a homework please append homework tag.
I can't provide you with full HTML and javascript, but an idea. You have two blocks. Float the right block;
Left Block - 60%.
Right Block - 20% (float:right)
Define height for Right & Left block and give overflow:hidden for Right Block.
Now define a click function like this.
var nextAnimateImageId = 1;
$("#my_button").click(function{
jQuery("#my_image"+animateImageId).animate({height:'toggle'});
nextAnimateImageId = nextAnimateImageId + 1;
});
My idea is, if you have 5 images, only 3 will be shown becaue of defined height and overflow:hidden property. When you animate the first image to height=0 (which is what toggle does), the 4th image will come up due to the space freed up, giving you a nice scroll up animation.
Alright, so the title may not be the best way to describe what i am trying to do, but i am not sure quite how to phrase it.
To start of (when the page loads) there are 20 'tiles' which serve as buttons on a page. They are divs. The 5 on top are larger and the rest of the rows are the same size.
Once one of the buttons is clicked, i want a div to show under the row of the button that is clicked. I know how to do this part using jquery toggle. Here is an example of what i will want it to look like once a button is clicked.
You can see in the drawing how i want it to sort of look like a tab once it is clicked. I am having trouble thinking of how i am going to add the part that ties the button div into the div that is toggled in the middle of the rows. This part:
I sort of thought that i could make 5 images, one for each column of buttons, that has that little part of background color, and toggle the image as well. I believe that there is a better way to do this so i am looking for a steer in the right direction. I have had some trouble searching for something like this as I dont really know what to call it so i thought i would come here for help. Thanks!
I would increase the height of the tile when it is clicked (so that it expands down from the upper red line to the lower red line shown in the last image).
It can all be done just with CSS (using the checkbox hack in the same way I made this div to increase its height) or with JavaScript (if you want reliable behaviour for IE8 and especially IE7).
Like this fiddle :
http://jsfiddle.net/techunter/ph8vY/
I'm trying to add a twitter "follow" button to the footer on my site, but it is causing numerous problems with the display of the footer.
If you take a look at this fiddle, you can see the issues. I've added testing controls to make it easier to demonstrate, but basically, I want to stop the following things from happening when the button is added:
Extra padding at the top
Everything being moved to the left (losing text-align:center)
The button not being vertically aligned with the text to the left of it.
Please can someone advise on how to achieve this?
The Twitter button gets styled through javascript to a width of 300px, only thing getting around that is to wrap it up with a span or a div and put it on a width of 60px; Because 300px pushes you menu to the side. Losing your text align center.
Also you might want to wrap your links in a unordered list element so you have more control over the whole group and it becomes more semantic.
My solution