...

View Full Version : Anchor isn't anchoring :( and one other <a> issue



kazyn
08-10-2011, 08:01 PM
Hi there :D So I firstly, the site and the script I'm using:

http://dl.dropbox.com/u/9856200/babydollsred-wrk/lips/lipstick.html

Navi accordian thing:
http://designreviver.com/tutorials/jquery-examples-horizontal-accordion/


this line of the script:

lastBlock = $("#a");

makes whatever "slidey block thing" that has the #a ID already maximized on load, without having to mouse over one first. Unfortunately for me, it doesn't work and all the sliders are closed until mouseover.

Here's the code of the one that is ID'd as #a:


<a id="#a">
<img src="../images/lips.png" />
<p>
<strong>Lipcare</strong><br /><br />
~ Lipsticks<br /><br />
~ Lipgloss<br /><br />
~ Lip Pencils<br />
<br />
<br />
Click to begin
</p>
</a>

Now, I tried changing it to a id="#menudivcenter a" (and made the changes in the script and CSS) but it still wasn't working.

Any ideas?

Also, while I have you on the phone :P

I'm trying to set an a href tag to one of the words in the sliders, but it is adopting the ul li a CSS for menudivcenter:


#menudivcenter ul li a{
display: block;
overflow: hidden;
height: 175px;
width: 106px;
cursor: pointer;
}

so basically when you put a link in the box, it turns the text into a box that is 175x106 and also assumes the js actions (the sliding action) when hovered over. Is there a way to separate a hrefs from each other, similar to the way you've pointed out with li?

Here's a screenr recording of what I mean:

http://www.screenr.com/oxxs

In the beginning you can see that the box isn't expanded as it should be (problem numero uno of this particular post) and then you also see what text I'm trying to make a link. Then I swap pages and you can see the havoc that I've caused :P

Thanks so very much!

resdog
08-10-2011, 09:09 PM
The pound sign (#) is the declaration that it's an ID. You don't put the pound sign in your code.

Your <a> element should look like this:



<a id="a"...

kazyn
08-10-2011, 11:18 PM
I've tried:

<a id="#a" (this is how it originally was in the script)
<a id="a"
<a id="menudivcenter a"
<a id="menudivcenter"
<a id="#menudivcenter a"
<a id="#menudivcenter"

None work :(

alykins
08-10-2011, 11:43 PM
you have not attempted to modify the script at all? reading the JQuery notes it calls out to name the "initial" anchor tag "a1" not "#a"... so the first anchor would be <a id="a1" .........
let me know if that works and if not i will look at more

kazyn
08-11-2011, 01:35 AM
you have not attempted to modify the script at all? reading the JQuery notes it calls out to name the "initial" anchor tag "a1" not "#a"... so the first anchor would be <a id="a1" .........
let me know if that works and if not i will look at more

Other than the tag itself, nope.

I've updated it to reflect "a1" in the CSS:

#a1{
width: 241px;
}


In the LI:


<li>
<a id="a1">
<img src="../images/lips.png" />
<p>
<strong>Lipcare</strong><br /><br />
~ Lipsticks<br /><br />
~ Lipgloss<br /><br />
~ Lip Pencils<br />
<br />
<br />
Click to begin
</p>
</a>
</li>

and in the script:

<script type="text/javascript" >
$(document).ready(function(){
lastBlock = $("a1");
maxWidth = 241;
minWidth = 106;

$("#menudivcenter ul li a").hover(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
lastBlock = this;
}
);
});
</script>


Still no worky :(

alykins
08-11-2011, 01:40 AM
keep original script... if you modified it try copy/pasting it to make sure it is original...
this line


lastBlock = $("a1");

is incorrect according to the script's source


lastBlock = $("#a1");

it is using that lastBlock to find the object and target it... without the # it does not know to look for an ID of "a1"

kazyn
08-11-2011, 02:17 AM
I just copy/pasted it and it's accompanying CSS, but still no brass :(

Thank you for checking this for me, I very much appreciate it.

We did have to edit some of the other part of the code because it was interfering with another javascript (paypal script). Sorry that I forgot to mention this. We had to change this:


<script src="../javascript/jquery-1.6.2.min.js"
type="text/javascript"></script>
<script type="text/javascript" >
$(document).ready(function(){
lastBlock = $("#a1");
maxWidth = 241;
minWidth = 106;

$("#menudivcenter ul li a").hover(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
lastBlock = this;
}
);
});
</script>

Where it says $("#menudivcenter ul li a").hover(, it was originally just $("ul li a").hover( - naturally the CSS reflects this, although I cannot see how this would affect the anchor.

alykins
08-11-2011, 03:07 AM
looked again... my forte is not js... i tried reading through all the code but i am not seeing how it is fired... I would PM a mod to move this to javascript side of the forum... what you need to do is have the script fire automatically (maybe via page load function) but what exactly to fire or what parameter to send I am not too sure

kazyn
08-11-2011, 04:15 AM
Ok, I figured this was mostly an HTML/CSS thing since it was dealing with the A tag and all.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum