Okay so I have this idea for a menu but I really have no idea how to implement it or what is required, I am very new to web design. So basically when an item on the menu is highlighted I want the slider bar to move under the highlighted item like so
http://s7.postimage.org/qa3vfh797/purple.gif
So when I am on a page I want the slider under the menu tab that relates to the page. When I hover over an item in the menu the slider slides from the current tab to the highlighted one. When the user un-highlights it, it returns to the tab that relates to the page the user is on. Any help would be greatly appreciated
I was going to provide you with a jsfiddle example but no need to reinvent the wheel.
jQuery MagicLine:
Article & Demo
If this is not the direction you would like to go in, then I suggest using jQuery UI, in particular, the tabs section: here. Make sure to use jQueryUI with Themeroller, which allows for user customization.
Hope this helps and let me know if you have any questions!
I won't give you the complete code, but I'll point you in the right direction with some keywords to search for.
What you need is to create a for the bar that will slide underneath your menu items.
Encapsulate each menu item within a div and implement a onMouseOver event for each of them.
Then in onMouseOver event, you need to move the div from its current location to under this menu div, i.e. change slider div's offsetLeft to the offsetLeft value for the menu div (if you use jquery, it provides handy functions to get this).
Now changing the div's position will directly move it there. If you want to have it done in a 'slide' animation, then you need to move it in steps, let's say in increments of 5 px each time. For this use setTimeOut function. Create a function to change slider div's offsetLeft value in 5 px increments, and call this function again and again till it reaches its destination via setTimeout function. setTimeout basically is a timer, that will call a function after specified amount of time.
This should give you enough to search on google :)
Related
I'm trying to create a project in angularJS and ionic where there is a slidebox with three slide and each slide contains some content. I want to scroll to top each time I change the slide.
I have supposed that the better way to do this is use on-swipe-left/right methods but I didn't manage to do my task and so, each time I change slide it doesn't change scroll position. Someone have some ideas of how to do it?
Thanks
Since you're using Ionic, you can (should) use the $ionicScrollDelegate's method scrollTo(). By calling $ionicScrollDelegate.scrollTo(0, 0, true) you're scrolling to the top. If you don't want the scrolling to be animated, call the method with false as the third parameter or omit it.
So I wanted to do for my company's webpage, a thing where are links that belong to people, to make it when you click, you have a little menu where you can choose to send him a message or view his profile..
Before click:
After click:
I tryed to search for it, couldn't find anything of much valuable.. Maybe someone can help me out.
If you're looking for an easy way to do it, I recommend using jQuery (http://jquery.com/) with one of the popup plugins (http://plugins.jquery.com/tag/popup/). It's easy to install, and most of them have a working demo for you to test out before download.
Otherwise, coding a popup window with pure JS takes time.
This general method is to:
Create a hidden div
Position: absolute and play with the z-index so your div will be on top of all other elements.
Set the position to where you clicked, or somewhere around the area of the target.
Take into account the width and height of the window/screen. (i.e. No poing in showing a div that'll appear off screen).
Fill it in with information you need.
Make it appear.
The way I've done things like that in the past is to have a hidden absolute or fixed DIV layer that houses that message menu. Then have a click trigger make that div layer visible and positioned at the current mouse coordinates.
There should be a lot of articles on google telling you how to do the various stages of all those steps.
I am displaying 10 wordpress post titles in a list followed by a "Load more" button that loads the next 10 results.
How would I automatically trigger that button (let's make it a javascript event) when reaching the end of the scrollable parent of that list?
Is it possible to detect the position of the scrollbar, or the visibility of the last list item on the screen? what is the most failprove method?
Thanks you for your tips and tricks guys!
P.S. I do not work with jQuery so no need to suggest solutions that are using it :).
You can check how far down a page/element is scrolled by listening on the scroll event listener myElm.addEventListener('scroll',scrolled,false); with a function like that defined here https://stackoverflow.com/a/4638434/1615483 (which does not actually rely on jQuery)
I'm hoping somebody is able to point me in the right direction with what I'm hoping to achieve. I'm building a responsive site, and have a traditional navigation menu spanning the top, with several items inside.
I need for this menu to shrink when the page gets narrower, but rather than the navigation menu breaking I would like for the items that don't fit to go underneath a "More..." drop down tab. Does this make sense? Here's a graphical representation...
So the top image would be what it might look like with 1024 width, and below is the 768 width.
The content in the menu is unknown so the widths would vary, so I'd need to calculate the width of the combined links and then anything more than that would get put underneath the More.. dropdown.
Any tips would be greatly appreciated, just not sure where to start at the moment.
Thanks
Implementing this is quite simple, if the menu can be static and doesn't have to adjust when the window is resized; #skip405's example is a really good solution in this case (+1).
If the implementation has to adjust the menu dynamically on window resize, it get's tricky though... The window.onresize event is fired quite often while the user scales the browser window, so a naive implementation (e.g. #skip405's approach executed on every event) would be too slow/expensive.
I'd solve the problem as follows:
Calculate and add up the outer width of all links at the beginning.
Append all available links to the "more" tab (cloning) so they can be shown/hidden dynamically. This is much faster than creating new (resp. destroying) DOM elements all the time.
Bind a handler to the onresize event. In the handler, get the current menu width and compare it to the width of the links. Hide all links that don't fit in the menu and show their counterparts in the "more" tab. The same goes the other way round for showing links if the menu is wide enough.
Here's my implementation: http://jsfiddle.net/vNqTF/
Just resize the window and see what happens. ;) Note that the solution can still be optimized of course - it's just an example.
Here's a nice jQuery plugin that may solve the problem: https://github.com/352Media/flexMenu
Also be sure to check out a great article providing a step-by-step instructions on how to organize this kind of flexible navigation using the aforementioned flexMenu plugin: http://webdesign.tutsplus.com/tutorials/site-elements/a-flexible-approach-to-responsive-navigation/
I think my variant may be a starting point for you. I'm a novice in jQuery and am learning a lot myself - so anybody, feel free to correct (and improve) my method or my logic :)
My starting point is here: http://jsfiddle.net/skip405/yN595/1/
To see it in action you need to resize the Result window so that there were 3 or 4 items in a row (not 7) and press Run again. Hover over More to see the rest of them.
In this fiddle I calculate the width of the list items in a loop and compare it with the width of the whole menu. When the calculated width of the items becomes higher than that of the menu - we can get the number of visible lis at the moment.
NB: This code works on document.ready and won't work on resizing of the window yet. So press Run when you resize the window for now.
So, here is how the slideshow looks.
a[b]cde
In this example, b is the visible part of the slideshow. When b is visible, you can't see a,c,d, or e.
Is it possible that when b is showing, that you can see a preview, or overflow, of the right quarter of a and left quarter of c? These previews would essentially be next and previous buttons that have a translucent background.
I don't want for just the one active slide to show, I want to be able to see a left quarter of the before slide and right quarter of the after slide just before they come in or after they leave, respectively.
I don't know what part of the cycle plugin I need to rewrite or code in order to do this. Is it too hard or difficult to accomplish with the cycle plugin?
The cycle plugin gives numerous callbacks, such as before and after which can probably be used to to add the behavior you described. They are all outlined here: http://jquery.malsup.com/cycle/options.html
The before callback is called before a transition happens and is passed currSlideElement and nextSlideElement as parameters.
Using these parameters, you can get a reference to the image that will appear next, or has just appeared and do anything you wish with it. This may mean cloning it and displaying it next to the slideshow.
I'm confident that some combination of before and after callbacks will make this behavior possible.