I would like to implement a cool nav menu featuring a slider that drops down different content for each link above using mootools. The slider works well but unsure how to add more links that deliver different content. If someone would like to look at existing code and/or my intended plans in a couple of photoshopped images.[code]
[URL ] The easiest way to show my problem is for you to view the slider in firefox and IE7. Clicking on the MORE DETAILS button slides down the tab..what i need to figure out though is why in Firefox there is a massive gap underneath and IE it appears fine..also the box appears smaller and in firefox the background image is getting clipped.
I'm using Mootools 1.2.0 and I'm trying to create a mouseover slide menu. That means that there will be a slideIn effect on menu-item's mouseover event. I have created a menu and I have achieved the sliding effect. The problem is that when I mouseover quickly on menu items, the slide in effect of each item doesn't have enough time to complete. In the end, there are more than one slides opening at once, instead of one. Is there someway to force my script to end all slidein or slideout effects before starting a new one?
I have some jquery running on a menu (here ) but before jquery loads, the content (all of the <li>'s) appear, then disappear once jquery loads. Is there a way to stop the brief displaying of the <li>'s?
I just started with jquery because I need a solution for a website that doesn't involve flash. I found this tutorial [URL]and I tried to modify the code without realy knowing what I'm doing, needless to say, it's not working at all.
Basically I have the same idea for my menu but it looks a bit different, instead of using a line underneath the links I want the scroller-image to tween on the x-axis with the white line stopping in the middle of each button. I made the image to fill the whole page so that it covers the scroller-line image underneath, I want the effect of a line expanding and contracting and this is the only way I could figure to do it.
1) Feature a small set of icons that would be placed on the right-side of a div
2) If someone clicked on one of the icons, the component would slide out towards the right, featuring various UI elements (i.e. descriptive text and form elements). The component slides out to match the width of the content (not fixed width)
3) The slider slides back if the user clicks on the "X" in top right corner or moves their mouse/clicks outside the slider area.
4) A nice to have would be if the component is towards the right side of the screen, the component slides out left (so it does not go outside the screen area or show a horizontal slider on the bottom of the screen window).
A visual of what I am trying to accomplish can be found in the attached file.
I am quite new to jquery and like it so far, dipping my feet but getting them very wet!
I wonder if someone with knowledge could steer me in the right direction regarding the conflict I have with my Mega Menu and my Content Slider at sample page, [URL].. as you can see the Mega Menu appears under the Content Slider,.
There are several sliders out there. But are there possibly a plugin or tut or an suggestion to how you could have a black bar on the bottom of the viewport with a menu on it and when clicking the menuitem it would slide up with content related to the menuitem..I would imagine the you could might tweek a existing slider with some z-index function?
I have a form with two slider on it so the user can select an amount. The slider works fine and passes the values to email ok etc. but when the page is loaded there is "[object Object]" in box of the second slider. I can't find the problem with the code as it is the same for the first slider.
1) Script Title: Ajax Tabs Content Script (v 2.2) and Featured Content Slider Using jQuery UI
2) Script URL (on DD): [URL]
3) Script URL of Featured Content Slider Using jQuery UI [URL]
4) Script URL of my implementation of both script. [URL]
5) Problem: I've integrated the featured content slider in one of the default content section of the tab menu as you can see on the link on point 4. The slider is working perfectly when until i click on other tab menu and then back tab menu 1. The slider seize to work no more and worst the other featured content slides are appearing below the first one.
I have to change the slider color depending on its value, but I didn't manage to do it, I changed the attribute "background" of the class "ui-slider-range" this way : $("#slider.ui-slider-range").css("background","red"); Since I have three states (red, orange and green) I have to use three sliders, each one has one color, all hidden at the beginning then I show the appropriate slider when the value changes.
I've got the following problem: I have a Jquery slider and I want to disable the click on the slider. I only want to change the slider when I click and drag the pointer. Standard you can also click everywhere on the slider and the pointer will go to that point. That I don't want. .
I have a php code that creates a select combo box depending on some values stored in a database and I am trying to make it look nicer I found the jquery slider I found this but it does not work in the environment I am working (joomla) well, it does but it disappears as soon as I move the slider. so if I had
I have a page using Moo Tools with 4 images. What I would like to do is to pass a boolean value to an array that exists outside of the image, but then I need to test to see if all elements outside the array are true. If so then I want to alert the user.
It's a "live search" module for Joomla 1.5 and I'm trying to modify to use with Virtuemart (shopping cart component) I've got most of it to work but just can't figure how to extract the element I need. The script makes a url call to a search script which returns the formatted results. (works fine) The results are "set" in a hidden div. (works fine) They are in this format...
Prototype.js and mootools.js working fine individual. But when I am trying to use both of them (prototype.js and mootools.js) together so it is not working. This is my code....... <html> <head> <link rel="stylesheet" media="screen" href="../calendar/styles/vlaCal-v2.1.css" type="text/css" /> <link rel="stylesheet" media="screen" href="../calendar/styles/vlaCal-v2.1-adobe_cs3.css" type="text/css" /> <link rel="stylesheet" media="screen" href="../calendar/styles/vlaCal-v2.1-apple_widget.css" type="text/css" />