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]
View 1 Replies
[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.
[Code]....
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?
[Code]...
URL...Anyone know of a jquery option that is similar to this mootools image menu?
View 3 Replies View RelatedI'm trying to put a rotating testimonial effect in the header (working) and use a Phatfusion style image menu (not working). I know the menu uses MooTools and the other a google script?Honestly, I've been going at this for a while and don't know that I know enough about javascript yet to understand what to do...
View 4 Replies View RelatedI am having trouble accessing both the Class and the current element. How can I have access to both the current element and the Class?
// Class stuff above
fuction1 : function () {
myelements.addEvent('click', this.function2);
[code]....
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?
The current jquery code is:
function initMenus() {
$('ul.menu ul').hide();
$.each($('ul.menu'), function(){
$('#' + this.id + '.expandfirst ul:first').show();
[Code].....
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.
css:
.nav-scroller-container
{
width:900px;
height:75px;
[Code].....
I have a drop down menu and an image slider that both use javascript code to function. The image slider appears right below the menu but when the actual menu drops down, the drop down part of the menu goes behind the image slider. How do I make it so that the menu drops above the image slider and not behind it? [URL]
View 1 Replies View RelatedI've got 2 scripts from scriptiny.com which BOTH appear to have problems. When I use:
HTML Code:
<script type="text/javascript" src="style/js/dropdown.js"></script>
<script type="text/javascript" src="style/js/slider.js"></script>
My dropdown menu won't work and IE gives the error: Quote: 'TINY.dropdown.init' is empty or isn't an object - with code 0 If I turn those too:
[Code]...
building an HTML/CSS component that would:
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 have included image slider and lavalamp menu in one of my projects. The problem here is both works well in Firefox. But not working in IE. I have included easing for the jquery.
View 2 Replies View RelatedI have a problem with a drop down menu showing behind image slider (not flash), as the menu shows up behind the large image slider [URL]It only happens in FireFox.....
View 5 Replies View RelatedI 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?
View 3 Replies View RelatedI 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.
Here is a link to the form: [url]
<script>
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 got 2 sliders in a List:
<li data-role="fieldcontain">
<label for="slider_year"><big>Jahr auswählen</big></label>
<input type="range" name="slider_year" id="slider_year" value="2000" min="2000" max="2011" />
[Code]....
Both alerts wont get called...
I know this should be very easy, but i dont get it.
1.I found a Slider Toggle thats demonstrated here [URL] and it seems to work fine but only if the link is placed above the div that slides down.. im trying to make the div slide down from above my menu and i want 1 of the links on my menu to toggle the slider. how do i get it work to where I can place the link below the sliding div? 2. the script originally used .fader{opacity:0;display:none;} but I wanted the slider div to be visible if javascript was disabled so I added
jQuery(".fader").hide(); so its now
<script type="text/javascript">
$(document).ready(function() {
jQuery(".fader").hide();
$(".fadeNext").click(function(){
$(this).next().fadeSliderToggle()
[Code]...
i am using jquery slider.i need to display the values on mouseover of the slider handle
View 4 Replies View RelatedI 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.
View 1 Replies View RelatedI'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. .
Code HTML4Strict:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
[Code]....
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
Code HTML4Strict:
<select id="someId" >
<option>1</option>
<option>1</option>
<option>1</option>
</select>
is there an easy way to transform that into a slider?
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.
View 1 Replies View RelatedIt'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...
[Code]...
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" />
<script type="text/javascript" src="../calendar/jslib/mootools-1.2-core.js"></script>
<script type="text/javascript" src="../calendar/jslib/vlaCal-v2.1.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
new vlaDatePicker('P_L_Date_Id', { separator: '-', leadingZero: false, twoDigitYear: true, offset: { y: 3 },format: 'y/m/d', twoDigitYear: false});
});
</script>
<script type="text/javascript" src="../prototype.js"></script>
</head>
<body>
<input type="text" name="P_L_Date" id="P_L_Date_Id" onchange="Purchase_List_Fun()"/>
</body>
</html>
