On one of my pages I use Isotope plugin. I hadn't known this before but Chrome flattens the z-order when using css3 transforms. So initially my nested menu was looking quite better with opacity changes and proper z-index. Problem is that nested ul goes under the content div.
Then I thought that it would be cool to apply resizing (by the nested ul) and change parent ul background on hover. So finally I've got this:
http://jsfiddle.net/challenger/xARgS/101/
How do I improve scripting here? Is it possible to optimize it?
Looking it in IE8 is like a natural disaster! Why?
Thanks!
A hover event for changing the css class to change the backgroundcolor is a bit clumsy: just use css :hover
You could also improve it by adding animation: http://jsfiddle.net/xARgS/102/
Part of the problem might be that every time that you hover over a nav item you have to visually resize the main navigation bar. Try removing the visual styling from that bar and adding a wrapper div with relative or absolute positioning and use its z-index to place it behind the navigation elements.
Related
I'm trying to achieve the fullPage.js scrolling effect inside of a container element.
The best way to describe it is kind of embedding another page inside the viewport and apply fullPage.js to it only.
In the picture below you can see the viewport background color is actually grey-ish while the container object is white. So the actual viewport should be static, non-moving, while the container should be the real scrollable page.
I know this should be possible by vertically stacking up div's the same size as the container, setting overflow to hidden and then emulating a scroll effect using JS manually. However as fullPage.js is pretty reliable and featured I'd like to know if there's a little hack for this so I can save myself from all this work.
Kind regards :)
Image of what I'm trying to achieve
EDIT
Solved using the mousewheel event, an overflow-hidden inner container and GSAP. Turned out to be pretty simple actually :) Could need some tweaking with the y-Delta value to have more page switch scrolling threshold
Demo: https://jsfiddle.net/bva8g3u9/
I have div container with width 100%. I need to make a content hide and show according to mouse over in container. But this will need to happen with 30% from left of main container and rest(70%) with no show/hide effect. Can we make this effect without adding any additional sub containers?
An Image representation
How to make this effect?
This Fiddle illustrates a very basic solution; it calls the effect every time the mouse moves inside the 30%, so you might need to add some further logic to prevent that happening.
I've used a container of 500px width, and a subcontainer div, but only for illustrative purposes; the JavaScript will manage a single container of any width. You'll need to add any positioning, margin or padding to the 'widthModifier' variable, but you could get those from the container in JavaScript too, if you wanted.
Daniel's answer doesn't solve the problem showing and hiding the content. Take a look at my solution that does exactly what you want. I used CSS features to achieve the result.
Use Chrome to view the example. For other browsers you just have to add their specific implementations of the css features.
I'm wondering how I could expand a 'div' without affecting the layout of the other elements in the page. Specifically, I'd like to achieve an effect similar to this - http://www.ikea.com/us/en/catalog/categories/departments/kitchen/kitchen_int_lighting/. If you hover your mouse over any product, you'll see that the box expands showing more information; however, other elements such as the product image below is not affected by the expansion.
use absolute position.
rather you can also achive the same effect by writing onhover event on the div with adding an additional div at that position with higher z-index.
use absolute positioning, and then you can grow/shrink the div and it won't effect any other elements around it.
Add position:absolute; to style of your div. This way it won't interfere with other elements but still overlap them, and you can specify any width and height to them.
Absolutely position your div and make sure the z-index is at the top level. It CAN be done using just CSS, but it'll probably be easier with js as well.
I'm looking for a way to do an effect which is most likely a combination of things, the base of it would be something like this:
http://nikestadiums.com/
As you can see, when you scroll down, a div is actually sliding up. I am not sure there is such a plugin, and if there is, is it possible to resize and maybe re-position elements as you scroll down?
I've seen the post:
How to make div scroll down with a page once it reaches top of page?
and I know of sticky elements http://imakewebthings.github.com/jquery-waypoints/sticky-elements/
Is it even possible to do something like this? If yes, can you give me links/examples please?
And of course I need to make it super super smooth like the Nike one...ha
Here is a jsfiddle, but I can't get it to work right.
http://jsfiddle.net/3U2Gj/65/
Thanks.
I've modified your JSFiddle. I tested it in Chrome, Firefox, and IE7+.
http://jsfiddle.net/t0nyh0/aMXRq/3/
I've cleaned it up a bit and moved all your "states" into classes. On scroll, it simply uses JQuery to add and remove classes based on the scroll position.
Note that there is no animation, if you wish to animate it, you can use class transitions to animate. See more here: http://docs.jquery.com/UI/Effects/ClassTransitions.
In regards to entering full mode on keydown, you can again create an "expand" class and apply it upon keydown. You can then structure your CSS as follows:
.minState3.expand { }
and to show the button again
.minState3.expand button { display:block; }
Doing it this way allows you the flexibility to define how it looks based on the different states.
I have problem with the slide effect with jquery-ui. I have a sidebar with a few buttons, which when clicked will spawn another sidebar to slide out from its left edge. One of these "secondary sidebars" contains a google JS map, and sliding that one out works fine.
Another one contains discussion with comments regarding the resource the right sidebar is showing. These discussions are filled using the template plugin and the code for filling the container is called before .toggle() is called.
While the container is sliding out the container (which has background color #eee) is not "spanning over its children in height." I'm seeing a box of perhaps 500x40 pixels with the correct background color, and the children of this container are shown as if their markup was outside the container.
Upon animation completion the container is stretched vertically to span over all its children and all is good. Unfortunately I cannot give anyone a link to a living example of this code, so what I am asking for is suggestions as to how I can start looking for the problem. This could be anything, but my guess is that it's jquery ui's fault.
important:
JQuery-UI's .slideToggle() does not reproduce this error, not does .fadeIn() or .toggle(). Unfortunately .slideToggle() does not take a direction parameter.
Thanks
check for floats, make suring your clearning them inside the sliding div, just before it, and just after it.
Add the following after a floated element(s) (divs with float:left or float:right)
Most people have a css class called "clear" or "clr"
.clr {clear:both;}
So then you can do
<div class="clr"></div>
It reads slightly better as you may use them alot in future :)