jQuery fadeIn/fadeOut in an Unordered List - javascript

I am trying to use jQuery's fadeIn/fadeOut effects on images that are being used as buttons in an unordered list. I want to be able to have the hovered image fade in quickly and out slowly on mouseout. The problem I am having is that I am trying to do this as horizontal menu with floated <li> tags. I created a jsfiddle with as simple of an example as I could. The list in the example contains only 1 list item, but it will actually have 4 or 5.
In order to position the hover images I have created a second <ul> so that it is positioned on top of the other list. What is happening now is that when hovered it does the fadeIn fadeOut twice. I assume that this is happening once for each of the <ul>.
Is there something I can do to position two images on top of each other, within the same <li>? Or another(better) way altogether to accomplish this? Any help is appreciated.
DEMO

You can get rid of the second <ul> by putting the two images within your #menu1, and then adding this few properties to your CSS:
#menu1 {
position: relative;
}
#hovbutton1 {
position: absolute;
top: 0;
}
That way you're positioning your hover image in an absolute position relative to its parent, so when shown, it will appear on top of the other one.
Here's the jsFiddle, hope it helps.

Related

Make Menu have a slideToggle Effect and push below elements down

I'm using a nice Mega Menu from CODROPS and I'm trying to customize it to have:
1) a slideToggle effect
2) When the menu is opened to push the below div element down (IE: not overlapping the below elements)
Here is my JS FIDDLE
This is what I've done so far:
1) I know very basic jquery and usually I know how to apply a slideToggle effect but I can't seem to get it right with their javascript code, so I'm left guessing where to place it but having no success. I've tried researching online but can't find a solution.
2) To make the element below the menu get pushed down, I know to make the position relative in the css below but that just breaks the menus float when it's activated.
/* sub-menu */
.cbp-hrmenu .cbp-hrsub {
display: none;
position: absolute;
background: #47a3da;
width: 100%;
left: 0;
}
It would be nice to have the elements below pushed down but the slideToggle effect is a bit more important to me...
You'll have to refactor this a bit to get it to work the way you want it to.
The .cbp-hrsub element containing the sub text is positioned absolutely, overlaying any text below. You would need to remove position:absolute to revert to the browser default position:static.
However, as the .cbp-hrsub element is part of each menu <li>, this pushes the other <li> elements down.
I'd suggest splitting the HTML out so that your menu <li> elements are separate to your sub text elements. Contain the subtext elements in a new <ul> and get these to slide down on click of the associated menu item link.

Draggable divs from accordion

I have created a pop out sideBar. In that sideBar I have a accordion which contains divs. Those divs are draggable. The user can drag those divs and position them main page.
The problem that I am experiencing is that when the divs are dragged they are not visible outside the accordion. This can been seen in This video.
I can see that it is to do with the overflow being set to hidden however when I remove this the accordion content is shown when it should be hidden.
overflow: hidden;
JSFiddle to further show my problem.
How could I possibly fix this / what are possible ways to get around it.
Try adding this to your css
.accordion-heading + div.accordion-body {
position: static;
}
Is this what you are looking for? Updated fiddle http://jsfiddle.net/gNAFY/3/
If this solved your problem, it seems that inside bootstrap.css file, at line 5245, "position: relative" rule makes your divs not appearing outside the accordion. So you need to "reset" position to static.
For "el + el" css selector to work in IE8 and earlier, don't forget the <!DOCTYPE>.

Link Tag Display Block Not Stretching Full Width

Please correct me if I am wrong, but display: block; turns any element that has that CSS declaration into a block element, correct? That means that the specified element with the display: block; declaration will span it's entire width available, right?
I ask this because I currently have a navigation that houses a drop down menu with nested unordered list items, that are supposed to inherit the width of the width of the parent list item.
link removed
Notice once hovered over Teams, you see the 18U and 17U link list items are not stretching their appropriate width. I can only assume that this same issue is applying to all of the list link items.
BUT: Once you go here: link removed and notice there are more than two links, the issue is no longer a problem. It takes up the full width.
Also, once the page has loaded and you hover over one of the list items for the first time, the navigation menu is kicked to the right a little bit.
The problem is persistent in Google Chrome.
May someone help me out here?
Thank you.
You have your li's width being set with
width: 100%
Which will only work if the elements parent (the ul) has a width set. Set...
width: 100%
... on the ul too, and it works fine.

How to make a div of fixed height and width scroll horizontally when childs are not more visible?

I need to create a sort of cart, where I store elements created by the user.
I've created a simple scheme to help you understand my needs:
.buttons are two div containing an image (an arrow), where I'll bind an onclick event to scroll elements (#scroller). The layout has fixed sizes, thus the exact length of ul#scroller (the element that will contain items and that needs to be scrolled) is 900px.
I think the size of any #scroller child <li> will be ~100px.
There's a button (not present in the scheme) that allows the user to store in #scroller an item.
Actually when there are too many items the next will go on the bottom (beginning a new line). Instead I'd like that the new elements go ahead on the same line, but hidden (without hit #button_right).
I was thinking to do this with javascript, storing elements in an array, and keeping visible only the first 9 (x 100px), then by clicking on the arrow (let's say, the right one) hide the first item and show the 10th.
Do you think this is a good solution?
If not, what do you suggest? What CSS rules could help me to do it?
Thanks in advance.
you need to create an extra div with a very long width, and put it inside #scroller and make #scroller have an overflow: hidden so it doesn't show the scrollbar.
like this:
html:
<div id="scroller">
<div id="inner">
(your items)
</div>
</div>
css:
#scroller {
width: 900px;
overflow: hidden;
}
#inner {
width: 90000px;
}
P.S. now the items won't go to another line but you need to code the buttons so they scroll the content depending on the number of items, depending on their width behing the same it can be more simple or not.

jQuery bind position:absolute to an element

i have a situation of:
<div class="hey1"><img class="img1"></img></div>
<div class="hey2"><img class="img2"></img></div>
<div class="hey3"><img class="img3"></img></div>
so .img imgaes are in position:absolute; binded to right top corner of related .hey div
when i fadeOut(); for example .hey1 div, the other .hey2,.hey3 divs scrolls more on top (right) but images binded remains on same absolute position, what i would like is to bind .img images also when fading out related div
any way to do that?
Make sure your container divs have position.
Example: http://jsfiddle.net/redler/D6Ucg/
In the example, click a yellow box to make it fade out. Then see what happens if you re-run the test after removing the div { position: relative; } style.
Instead of positioning img elements absolutely with in div elements, position them relatively. This way they will move along with the div when div is re-positioned through scroll or programmatically.

Categories