I'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
I am currently in Web Design I class. I do not yet know javascript. However, I am currently making a music page and I am using the Phatfusion Image Menu as my navigation. What the Image Menu does is it cascades and expands when moused over, revealing an image, which can be a link. When clicked, the image stays in it's expanded form so that the user can see which page he/she is currently on. The problem is that I can get the menu to work correctly and open a new window, but that is not what I want it to do. What I want is for the menu to stay expanded (without refreshing) when an image (link) is clicked, but I want the rest of the page to change.
I believe that the problem is in the javascript: I don't know how to code in javascript well.
Here is the section I am currently looking at.
Code:
Right now, alert makes a javascript alert telling the user the link. If I change alert to open, it opens the link in a new window. How do I get a new page to load without reloading the menu? I want the page to load behind the menu.
The links I am using are here:
Code:
This is the main javascript code if it is needed.
Code:
Licence: Open Source MIT Licence
Basically I have added a Lightbox gallery, which is all working as it should here URL...However, the large photos can render underneath the two sets of rotating images - the ones near the top of various resorts, and the one on the left hand side showing sponsor's logos. It only seems to do it sometimes with the set at the top, but always with the Award Sponsors one.If it doesn't show with the page as it loads, you can see what I mean by scrolling down until the Awards Sponsors graphic is about halfway down the screen.
So my question is really just to ask if there's a way of ensuring that the Lightbox photos do appear over everything else on the page?
I have a site that uses the prototype and scriptaculous scripts. I also have a pulldown menu script (which I've used before) that I got from AListApart.com. The pulldown menu script does not work in IE on the pages that use the prototype/scriptaculous scripts. Is there a workaround?
View 1 Replies View RelatedBelow is a Random Quote generator script I found on the net, its a great script, but I want the quote to be in bold, how is that done please?
<center>
<font color="#71025F" size="2" face="Verdana,Arial">
<script language="JavaScript">
//
var Quotation=new Array() // do not change this!
[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]...
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 View Relatedi have a long string contain html tags, javascript code, in a variable, & of corse it contain both ' & " in it.now i want to put all the stuff somewhere in my page, so i assume should use .html() for this. but i think because of this ' & " it does not working. what should i do?
var content_area = $('div#zone1');
content = ' stuff contain quote & double quote';
content_area.html(content);
remember i have both quote & double quote i can't convert all of them to ' or ".
am writing a function in js that requires me to assign an javascript value to an html element. But I am stuck at a point where I have to assign document.write value to embed object.
function ytEmbedPlayer(videoUrl,w,h){
var flashvars = {};
var params = {allowFullScreen:'true',wmode:'transparent'};
params.allowscriptaccess = "always";
[code]....
I am having issue here were, I have to print videoUrl value as an embed src.
<embed src="document.write(videoUrl)"
I think I am messing up with the single quote and double quote.
URL...Anyone know of a jquery option that is similar to this mootools image menu?
View 3 Replies View RelatedMy website:
[URL]
What the thing is:
.horizitem a:hover, .horizsubitem a:hover
Must be fading out when the mouse is out.
.horizitem a:link, .horizitem a:visited
When i move over this object then the div .horizsubframe is coming down there. .horizsubframe must be coming easily from the the top to the bottom easing. And when i leave that div, it's disappearing from the bottom to the top.
I don't know anything of Jqeury.
So you get when you move over a block it's coming immediately but when you leave it it's slowly fading out. (the background color). When you move over a item in the mainmenu then there is coming a div beneath it now. But i wanna have that that div is easing from the top to the bottom then. And when you leave it from the bottom to the top.
I need help with the script for multiple mouseOver Effects for my Menu Bar.However, that only does one mouseover effect. Can someone help me with this?
View 1 Replies View RelatedI have this menu table that has a gradient effect and flips to a different color when mouse is over a cell of the table. It is working great for google chrome, the problem is it is not working for Internet Explorer, but it should work for internet explorer, firefox, chrome,and so on.. The code I got it from is: [URL]. The first cell should be black and grey then when I put move over it should change to grey baby blue.
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]">
<html xmlns="[URL]"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head><body><style type="text/css">
#coolmenu{
border: 1px #9CF;
width: 140px;
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));
background: -moz-linear-gradient(top, #ccc, #000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
background: #999; /* for non-css3 browsers */ .....
I 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]....
Having a problem on a clients website incorporating two js sliders in the same page. The scripts before editing were the TinySlider and TinyFader from [url]
The parsers in Internet Explorer, Firefox and Chrome cannot seem to differentiate between the two scripts, although I tried altering various defined names for script control it didn't make much difference.
The problems are the controls of the first slider operate the second and only the second slider works. Also, I'm getting validation errors (document type does not allow element "li" here; missing one of "ul", "ol" start-tag) where the showroom (second) script content lies. Not sure if this is related or not but either way if I try to fix it the only working slider is broken.
Here is the testing url.[url]
I've been using the excellent fValidate library to validate my forms and I just came across and intersting problem. I have cause to use htmlArea on one of my forms that uses fValidate. It seems that there is some conflict when both htmlArea and fValidate are working on the same page/form.
I can use one or the other independantly, and each will function without flaw, however when I try to set them up to both act on one of my forms, I get the following:
When I have both htmlArea and fValidate on the same page I seem to get 3 popup errors for each htmlArea dropdown items (in this case, the font and font size selectors):
I am rather to JQuery, but love the possibilities. However I am finding my first experience rather vexing. The JQuery Cycle plugin works great in my site folder if I place it in a new file. But when I try to place it in my existing index page with existing CSS it displays the images on top of one another not in the div where they are placed. I can send a screenshot if that helps. I have also included my site folder with just the index page and all the files including graphics, scripts and CSS. Can any of you see where my conflict is?Also since then I added this css to the index file and got images to come together but transition does not happen:
#myslides {
width: 605px;
height: 200px;
[code]....
I have a web page which utilizes both Moo tools and JQuery features. The Moo Tools seems to be negating my JQuery functionality for a sliding menu. I did some research and it looks like I can add $.noConflict(); to resolve this, but I am not sure how to add it. For instance I am linking to both the JQuery and Moo tools code.
<script type="text/javascript" src="../js/mootools.js"></script>
<script type="text/javascript" src="../js/JQuery.js"></script>
I am sure the Moo tools JS is interfering, b/c when I take it out the JQuery functionality works.
I have a very simple script that fails on macintosh only (works on PC browsers) when I include the ajax.js file. I am not even using it (not in my simple script anyway, shown below). When I include that file, the drag and drop no longer works on a mac.
[Code]...
Im trying to make a personal home page that both shows the time and a random background each refresh using javascript. so far i have managed to get either one or the other to work but not both.i want to know if anyone could try and tell me what is wrong.the files can be found at: http://ihf.lp.pl/narik/index.htmlas you will see if you visit that the random image script works.(if u have slow net, you'll have to be patient the bg image is large)however if u visitat by the name, the index file has the clock working but not the random background. They are both present in the html, but for some reason are not working together.the relevant javascript files within that folder are: randomimage.js & clock.jsthe background images can be found at http://ihf.lp.pl/narik/images/wallpapers/1.jpg (the image names go from 1.jpg through to 17.jpg)
View 1 Replies View RelatedWe use a variety of plugins on a wordpress site we're developping. But two of them seem to be conflicting, causing one not to load/work properly. One uses jQuery and the other one uses scriptaculous/prototype. It seems those two have some issues running together.
As jQuery is the default library loaded, is there a way (without modifying the $-function) to exclude jQuery from loading from this one page where Scriptaculous is needed?
I have an asp form where one field has potential for entry of single quote (usually a possessive -bob's-).How can I replace "'"with "`" before it is passed forward generating an error.
View 6 Replies View RelatedI would like to be able to load new sets of images everytime I hit refresh and use rollover. Code: uses this idea. Everytime you log into their website, you get a new image. if you roll the mouse over the menu on the left of the picture, you get different rollover text on the picture.
What I have so far is image rotator, which will randomly load differnt photo everytime you access the website. However, I don't how to do the complete thing.
I have a space on my page reserved for a banner to denote religious / special events and other notices that may be important for that specific day. At the moment the relevant banner is uploaded the night before ready for the next day.
A bit of research has led me to develop an automated Javascript script that loads up the relevant days banner using the getDate() and getDay() functions. This, however, means I have to name the banner for January 1st as 1.jpg in a folder named Ƈ'.
What I am wondering is whether it's possible to draw up a spreadsheet (or text file) so that I can type in a more memorable filename (e.g. 'christmasDay.jpg') and it locates it in the folder and displays it on that relevant day. Is it possible for Javascript to do this sort of thing?
Another thing I've thought of (as an advanced bit, don't want to run before walking!) is perhaps to have a random banner from a selection shown if there isn't a religious date / special event on a specific day.
I am trying to make a simple image rotator using JQuery. It seems to work for first loop however it does not iterate back to the start of images once it reaches the last image. I have tested and the code is getting the first image reference but due to some reason it is not working. I have attached my code.
[Code]...
I used the code here for my photo rotator: [URL]. It works when there's one rotator on the page, but I need to add a few and that does not work.
function theRotator() {
//Set the opacity of all images to 0
$('.photos img').css({opacity: 0.0});
//Get the first image and display it (gets set to full opacity)
$('.photos img:first').css({opacity: 1.0});
//Call the rotator function to run the slideshow, 4000 = change to next image after 4 seconds
setInterval('rotate()',4000);
} function rotate() {
//Get the first image
var current = ($('.photos img.show')? $('.photos img.show') : $('.photos img:first'));
var currentButton = ($('.photos a.active')? $('.photos a.active') : $('.photos a:first'));
//Get next image, when it reaches the end, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('.photos img:first') :current.next()) : $('.photos img:first'));
var nextButton = ((currentButton.next().length) ? ((currentButton.next().hasClass('active')) ? $('.photos a:first') :currentButton.next()) : $('.photos a:first'));
//Set the fade in effect for the next image, the show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);
nextButton.addClass('active');
//Hide the current image
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
currentButton.removeClass('active');
};
$(document).ready(function() {
//Load the slideshow
theRotator();});
