LavaLamp - Modifying JS For Single-page Site - Subtle Animated Effect ?
Jun 27, 2010
I'm using LavaLamp [url] for the main navigation on a site I'm building, for a subtle animated effect.
The site itself is a single-page portfolio site with 3 sections organized vertically, "Home," "About," and "Work."
The problem I'm having is that the clicked navigation does not return to its original position on each panel if I double back on it.
For example, if I'm on the Home panel, and I want to get to About, I'll want to select "About." The LavaLamp animation will ease over to the "About" link on hover, and I'll click it, then the page will scroll to the About panel, where "About" in the navigation is being shown as selected (LavaLamp has a "current" class you can apply to whatever you want to start off as being selected)...
And that's great, BUT, say I want to get back to the Home panel. I click "Home" in the nav, and I'm transported back to the Home panel - but when I was there before, I'd selected "About", and since it's all on the same page, the link is focused on "About," even though I'm on the Home panel. Make sense?
I'm not good enough at JS or jQuery to figure out how to fix this. I think what I want to happen is for every link on each panel to STAY where it was originally assigned ("Home" link will stay on Home, "About" link will stay on About, etc.), but animate on hover only.
Is there a way to write something into the LavaLamp JS to make it so the animation works only on hover, and not on active, focus, or visited?
Here's the code, can't provide a demo page, I don't have anywhere to upload it at the moment...
index.htm with an example of what each panel looks like:
jquery.lavalamp.js:
And last but not least, the LavaLamp CSS:
Forgot to add the page js:
EDITED ALSO TO ADD: Could it have something to do with this:
View 4 Replies
ADVERTISEMENT
Oct 13, 2011
I tried inserting the lavalamp effect into my wordpress theme.However, I was unsuccessful.I was wondering if anyone could help me out a bit and tell me where I went wrong? It isn't working and i'm not sure what I need to do in order to make it work?I have tried putting .lavaLamp after my #nav tag. That didn't work so I put it after my #header tag (which is where the css changes, etc. were anyway).Then, I uploaded an external css file for the .lavaLamp class.Still no dice.I refuse to move on in my theme creation until I have this figured out.
View 1 Replies
View Related
Apr 20, 2009
Firstly apologies for my javascript ignorance - I'm not a programmer, just someone thrust into programming since there's no-one else at my company who can do it.
I found a nice js script online for a drop-down menu where the drop downs both expand to their full size and fade-in (very quickly) from transparent.
The script in action can be seen on the script writer's site here: http://sandbox.leigeber.com/dropdown-menu/index.html
[Code]...
View 1 Replies
View Related
Nov 24, 2011
How to create animated Neon Sign Board using jQuery? I want to create it only with text without using images. Is it possible to create using text shadow?
View 1 Replies
View Related
Mar 22, 2010
I have a quick question for all you skilled developers -- I'm new to the forum, intermediate with JS/jQ.
How simple would it be to implement a subtle and quick slide-in of the page content using jQuery (only that once for the home page onload).
For a reference check out this site example. I wanted to do something nice like this WITHOUT FLASH =)
View 4 Replies
View Related
Oct 30, 2009
I am trying to integrate with my page it worked but ever since I used this form validation the lavalamp went away: [URL] This is the link to the lavalamp: [URL] So the lavalamp should work like this: [URL] But instead it doesn't like this: [URL] and I am not sure why, also the form validation doesn't work very well at all.
View 2 Replies
View Related
Apr 20, 2011
I am looking for a simple parallax/animate like effect, i have a single image and if i hover on it the image should move like the parallax effect. So if i put my mouse in the topleft corner the image should move in the direction bottomright. I know this i very simple but i cant seem to get it working or how to get this working.
View 4 Replies
View Related
Jun 10, 2011
Ok i just created my portfolio site using a simple accordion effect i got from. [URL] Im very new to javascript and coding in general, so im sure my code is far from pretty. My question, is their a way to fix the delay on the way the accordion loads. if you go to my site [URL] you'll see that initially all the sections are visible and then they collapse after a few moments. is there anyway to make it so they are collapsed immediately.
[Code]....
View 2 Replies
View Related
Jul 21, 2011
I'm using Chrome and it's JSShell extension I remove the <emb> and some <iframe> tags from a lot of different sites because their annoying ads.
The I use code for most sites looks like this:
It doesn't do anything. If I don't use $(document).ready() it removes all the ads. Is there a way to do that before loading the document or am I doing something wrong.
View 1 Replies
View Related
Jan 12, 2011
I have been trying to learn JavaScript and most recently jQuery. After playing with some cool stuff like hiding, showing, animating etc... html elements I started wondering if when doing this you should do it thinking about how your layout and be careful not to break it since I noticed that when for instance if you hide a div it actually takes it out of the normal flow and if this div is part of the layout structure it could potentially break it.
Is it a common practice to think about the layout when using JavaScript/jQuery to play with elements or objects on a page?
Is this the first think before making any modification to any element that could affect the layout or is there something that I'm not aware of to prevent from taken these elements out of the normal flow?
View 2 Replies
View Related
Aug 10, 2011
I'm using a Volusion shopping cart and it uses JavaScript to insert code into DIVs with specific IDs. The code that it inserts can't be changed from the backend, so I'm wondering if there is a way to replace it with JavaScript after it's rendered.
Here is my problem specifically: I'm trying to change the wording "Find by Type" to "Sort by Type", but I can't modify it since it's being added in later by JavaScript. The tag I have in my template file is:
Code:
<div id="search_refinement_filters"></div>
but when rendered, Volusion turns it into:
[Code]....
View 7 Replies
View Related
Feb 26, 2010
I have a page that is on a secure server, lets say https://server.com and I have a link on a page /somelink.html. I am trying to use jQuery to change the link to http://server.com/somelink.html
Here is the code I have come up with:
$(document).ready(function() {
$("a[href^='https://server.com']")
.each(function(){
this.href = this.href.replace(/^https://server.com/,"http://www.server.co");
});
$("a[href^='/']")
.each(function(){
this.href = this.href.replace(/^//,
"http://www.server.co");
});
});
However, my code only seems to work in Firebug after everything has rendered. I assume that the links are changes when the Document is Ready but before the server address is attached to the links.
View 1 Replies
View Related
Mar 3, 2007
(A) Some of us in the UK will have been watching with amusement what
seems to be happening in the USA and its Northern Sidekick with regard
to the change in DST rules.
I've discovered that the change will also be happening in the Bahamas
(Commonwealth), Bermuda and Turks & Caicos (British Overseas
Territories) - I wonder whether anyone told Her Majesty?
(B) Date Validation - ISTM that using D = new Date(y, m', d) then
checking getMonth and getDate may well fail on one or two days of the
year for users in the Azores and in South-East Greenland.
Time validation by similar means could occasionally fail likewise
anywhere that has Summer Time - but probably not, depending on code.
(C) US+ DST changes can be important for anything hard-coded for the
afflicted areas, and for machines there with non-updated OS data.
View 4 Replies
View Related
Apr 15, 2011
I'm trying to unravel / understand / re-code a website i've inherited. I can just about work my way around the html, but the javascript is proving to be a bit more taxing!
Anyway - the pages all have the following javascript functions coded into the head. I'm assuming a function is only activated if it's referenced from the body. I can't find any reference to these functions in the body and... if i remove them the pages seem to work ok - but of course they may be doing something subtle in the background that i'm unaware of so...what these functions are likely to be doing, and if they are actually useful/needed?
View 2 Replies
View Related
Aug 9, 2010
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 Related
Oct 18, 2010
I am using the lava lamp plugin on my navigation page and I am having trouble fixing an issue I have got. I have it working perfectly, it sits right within he height of the nav and when I rollover it works. The only problem I have is when I rollover the lavalamp line does not align with the navigation text. I have attached a screen shot so you can see how it is working and if you wanted to have a look I have attached the code:
This is the CSS;
Copy code
ul, li {
margin: 0;
padding: 0;
} #line {
width:auto;
height:15px;
position: absolute;
z-index: 1;
top: 35px;
float:right; .....
This is the Jquery;
Copy code
(function($) {
$.fn.spasticNav = function(options) {
options = $.extend({
overlap : 20,
speed : 500,
reset : 2000,
color : 'none',
easing : 'easeOutExpo'
}, options); .....
View 6 Replies
View Related
Oct 11, 2009
i want to make a iframe page that loading a page from other site. I have try "jQuery iFrame Sizing" to set auto height in iframe... but it is failed.
This is my code :
-------------
on Head
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/iframe.js"></script>
on Body
[Code]....
View 1 Replies
View Related
Feb 3, 2011
I'm building some forms, and when they are submitted, I'd like to integrate a method that will fade out the screen a bit, and show an animated "processing" .gif. Basically when the "submit" button is pressed, the form is being submitted to it's destination. The page will hang on the form until the next page is ready to load. While it's hanging there after submitting, I'd like the screen to fade out, and display an image in the center of the screen. I'm hoping this can be achieved with CSS, as I try to use as little Javascript as possible.What's the best way to achieve this? I figure if anything a javascript "onsubmit" function will be a good start. Can the screen be faded with CSS?
View 3 Replies
View Related
Aug 22, 2011
Our company own a lot of domains and want to put a short page of copy on each address along with keywords before redirecting the user to our main site. I have been able to get the page to load the main site after the desired time using this code in the head...
<META HTTP-EQUIV="refresh" CONTENT="40;URL=http://webaddress.com/">
That works perfectly, I am now trying to display a countdown timer from 40 seconds down to 0, and on 0 redirect the user. Saying something like "You will be redirected in XX seconds". Is there anyway of doing this? I've been searching google for the answers with no luck and can only seem to find timers that countdown to a set date.
View 13 Replies
View Related
Oct 6, 2010
greetings i am using quite a few different js plugins for my websites, and recently i have come into a problem with my <li> tag i have two menus that are using it and need two distinct css codes for them.
can i make two different css for li or inline code them what are my options? problem in a nutshell. main menu with one set of css <li> gallery images also using <li> the css of the gallery is conflicting and completely ruining the <li> for the main menu.
View 1 Replies
View Related
Jan 16, 2010
I have developed one project and in that i have taken two css now i want to add jquery effects in that, But my display is not properely adjusted and extra enlargement is done so how i can add jquery in my php project without affecting another effect? And one more thing where i can get the jquery effect codes?
View 1 Replies
View Related
Jan 19, 2010
How to use multiple .js files in a single web page??Is it possible to use both external .js file and inbuilt java script functions in a single page?
View 1 Replies
View Related
Feb 11, 2010
I have this script which is set to generate random anagrams of my name in rotation which works fine, but I can't work out how to put multiple instances of it on one page.
The code is:
And i'm calling the function using:
View 3 Replies
View Related
Jun 30, 2010
Ok so i'm trying to write a Greasemonkey script to change all the hrefs on a single page. The href by default looks like this:
<a href="javascript:get('246154895')" class="postid">ID</a>
What i'm trying to do is make the number from get() appear in stead of "ID". How should i get this done? I started up with this:
var posts = document.getElementsByClassname('postid');
for (i=0; i<posts.length; i++) {
//Replacing
}
But i doubt it will work, since there are other items with the class "postid" that aren't related to these tags i'm trying to change.
View 5 Replies
View Related
Jun 22, 2011
Is there a way to disable a SINGLE script on the page, something that a user can click and it disables only the script choosen?
View 2 Replies
View Related
Aug 13, 2009
I am using window.print() for print the web page, its working fine but i want more than one copy each and every time the the window will pob and ask me to select the printer name instead of that i want to pass the printer name through code if possible to print like this.
View 2 Replies
View Related
