JQuery :: LavaLamp - Rollover Line Does Not Align With Navigation Text
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
ADVERTISEMENT
Mar 30, 2011
I'm working on a website and am having trouble figuring out where I can add/edit the text for the navigation buttons, HOME, ABOUT, CONTACT, etc. There is a rollover.js file and the rollover effect works fine, I just can't figure out where to put the text for the navigation buttons and after a week of trying different things I thought I'd come here and try to get it working. My meager JS knowledge isn't enough. I started this website from a template in case you're wondering. Here's some of the code starting with where the images are preloaded then a few lines farther on are the onmouseover and onmouseouts.
<body id="page_1" onload="MM_preloadImages('images/bt_2_sel.jpg','images/bt_3_sel.jpg','images/bt_4_sel.jpg','images/bt_5_sel.jpg')">
<div class="main">
<!--==========header=========== -->[code].....
Are the mousseovers DHTML and not js I assumed they were js and were connected by the external rollover.js file.
View 2 Replies
View Related
Mar 28, 2010
When you have a list of elements (gallery of images in my case) with align:left style, in the line break they can fall not to the beginning of a new line, but to the side of some previous element that has a bigger heigth. This is a javascript to correct the position of these elements:
[Code]...
View 2 Replies
View Related
Aug 20, 2011
I am having a bit of trouble attempting to get this button roll over stuff working. I have looked up some really simple code to create a image rollover action for my navigation buttons. But nothing happens when I hover on any of the buttons though. When I use firebug to figure out what is wrong, it says that $(this) is the document and not the image button. The example/preview is here: [URL].
This is the jQuery code here for quick reference:
<script type="text/javascript">
$(document).ready(function(){
$('#navigation img').hover(
function() {
$(this).src = $(this).src.replace("Red","Yellow");
}, function() {
$(this).src = $(this).src.replace("Yellow","Red");
}); });
</script>
View 3 Replies
View Related
Oct 25, 2011
I'm building a WordPress site with a nice jQuery effect that fades/unfades images within a navigation menu on rollover. So when the mouse moves off the image, the colored image should fade back to reveal the original non-colored image. This works perfectly as-is, but client wants the active page to keep its colored/ highlighted menu image when mouse has moved off of it. The bolded line of the code is where I tried to set that up...
Code:
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
<script type="text/javascript"><!-- this is from [URL]-->
// make nav images highlight on hover
// when the DOM is ready:
$(document).ready(function () {
// find the navigation elements and hook the hover event
$('#mainmenu li').hover(function() {
// on hovering over, find the element we want to fade *up*
var fade = $('> div', this);
// if the element is currently being animated (to a fadeOut)...
if (fade.is(':animated')) {
// ...take it's current opacity back up to 1
fade.stop().fadeTo(250, 1);
} else {
// fade in quickly
fade.fadeIn(250);
}}, function () {
// on hovering out, fade the element out
if (!is_page(current)){
var fade = $('> div', this);
if (fade.is(':animated')) {
fade.stop().fadeTo(3000, 0);
} else {
// fade away slowly
fade.fadeOut(2000);
}}});});
</script>
<ul id="mainmenu">
<li id="home">
<a href="/home"><img src="<?php bloginfo(url); ?>/wordpress/wp-content/uploads/2011/09/sara_inactive.png" alt="home" width="152" height="309" /></a>
<div>
<a href="/home"><img src="<?php bloginfo(url); ?>/wordpress/wp-content/uploads/2011/09/sara_active.png" alt="home" width="152" height="309" /></a>
</div>
</li>
WordPress should know whether the page is 'current' or not, so why doesn't this work? Currently the nav images remain highlighted when the mouse moves away. If I remove my attempt (the bolded line of code) then nav rollovers work beautifully, but active page still isn't represented with a colored nav menu image.
View 9 Replies
View Related
May 8, 2009
I am trying to figure out whether or not there is an effective way to cut up the navigation on the right side of this banner so I can use the standard image swap. I am asking in this forum because I need to know if this will even work in the first place.
View 4 Replies
View Related
May 25, 2010
how to read a text file using javascript line by line and separate from special characters in it. for example
Text.txt has
001203=Line one=abc.html
024353=Line two=xyz.html
092434=Line three=hjf.html
i want each column in an array like { 001203,024353,092434 } so total 3 arrays.
View 14 Replies
View Related
Apr 25, 2005
I have following code in my JSP.
<select name="selectSeverity">
<option align="right" style="background-color:red;">High</option>
<option style="background-color:yellow;">Medium</option>
<option style="background-color:#008000;">Low</option>
</select>
I want to align the text high,medium and low to the right. With the above code I'm not able to do it. I tried style="text-align:right;", But no use.
View 5 Replies
View Related
Jul 27, 2006
it is possible to align a paragraph of text so it is placed in the middle of any browser window, using only html and css. Can this be done without js? If not, how much javascript will I need to know in order to do that?
View 3 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 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
May 17, 2011
I have 6 image buttons that I want to create a rollover caption for. So for each image, when you rollover it a text title appears and thendisappearswhen you rollout. There will be a different title for each image and will be located in the sameposition. I'd also like to have the text fade in and out if it's not to complicated.I already have the following code to create a smooth image rollover:
$(document).ready(function() {
$('.fadeThis').append('<span class="hover"></span>').each(function () {
var $span = $('> span.hover', this).css('opacity', 0);
[code]....
View 1 Replies
View Related
Aug 21, 2011
how to implement the same effect as the left hand side navigation bar on this site,
[URL]
I want the link to appear opaque when inactive but upon hover fade in darker.
View 3 Replies
View Related
Jul 20, 2011
I have two javascript elements (banners) within a div that I would like to style side by side. What is the best way to style javascript for image one to align left and image 2 to align right? And will this work across all browsers?[code]
View 3 Replies
View Related
Jan 5, 2010
I have the following HTML:
How could I use jQuery to wrap each line of text in a <li> and remove all the <br /> and finally wrap all the <li> in a <ul>?
Example:
View 1 Replies
View Related
Oct 16, 2010
I'm trying to select a line a text and format it, only problem is there are no tags around it other than a closing </p> tag and a <br /> tag after it. Please see below the line in bold text which I'm trying to surround with <h3></h3> tags. [code]...
View 8 Replies
View Related
Feb 22, 2010
getting first line coordinates of multiple line inline element.
Example HTML
aaa bbb ccc ddd <span id="target">eee fff ggg
hhh iii jjj</span>kkk lll mmm nnn ooo ppp qqq
$(document).ready(function() {
[Code]....
Assume that span#target has a line break, when I see a browser. Then I click span#target, above function returns the head of coordinates which second line ("hhh") has. I want to have the coordinates which first line ("eee") has. How can I get that?
View 1 Replies
View Related
Nov 2, 2009
I'm trying to implement a minimal navigation bar using jQuery's toggleClass() function but can't seem to get it working.
It's the .img_selector div at the bottom of the page:[url]
I want to toggle the 'active' class for each <a> when it's selected, to indicate which image is showing, so after calling jQuery, in the <head> I've got:
Then the links, which also include the showPic function:
View 4 Replies
View Related
Feb 6, 2011
I want to create an own horizontal navigation and so the navigation is a nested list like
<ul id="mymenu">
<li>entry1
<ul class="abc">
[code]....
View 3 Replies
View Related
Apr 19, 2009
Instead of doing a regular rollover which would require me to make 50 images with text in photoshop on I want the rollover but want to add the the text in html for exmaple I want something like this [URL]
View 3 Replies
View Related
Jan 14, 2011
In the services section with the 8 images you can see how I am TRYING to make the site work. The idea is that when scrolling over an image the related text will appear in the right column. This is to happen for each image with different text for each. The problem (as I'm sure is quite clear from using the site) is that there is a lot of jumping. When an image is not selected the images should stay in 2 columns with text to the right.
"Scroll over the images for a brief description of the services we provide." I doubt I'm describing this well but this is all new to me... I have used javascript to control these rollovers.
[Code]....
View 2 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
Jan 11, 2012
reading file in jQuery. Please if anyone knows how to write tome or to the website.
$.get("data/zelis.si.txt",function(data){
$.each(lines, function(n,line){
$.ajax({
[code]....
View 7 Replies
View Related
Feb 7, 2011
Can any one tell me javascript for pop up text on mouse rollover on image like this site SNIP
View 3 Replies
View Related
May 3, 2011
Example script I can use to do the following.
Essentially I have text on the left (sizes) and an image on the right.
When you put your mouse over the text the image needs to change to show the corresponding image to the text.
I know this isn't hard but I just mustn't be using the right search terms to find an example.
View 1 Replies
View Related
Jun 1, 2002
is there a way to popup a small 'bubble' or 'balloon' of text when a user lets their pointer rest over a particular part of an image? (an image map)
explorer does this sometime (randomly it seems) when i let my pointer rest of an image that has alt text - it displays the alt text in a speech bubble thing - but only sometimes! so that is no good. also netscape doesn't have this and obviously i want something that'll work in both.
the reason i want to do this is this - i've got a simplyfied map (a geographical map) as a picture. there's a small piece of info i wish to show for each country, but the map is too small to allow me to put the information directly on the map - so i figured popup bubbles would be a good way.
View 7 Replies
View Related