Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    14
    Thanks
    7
    Thanked 0 Times in 0 Posts

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

    Hi there So I firstly, the site and the script I'm using:

    http://dl.dropbox.com/u/9856200/baby.../lipstick.html

    Navi accordian thing:
    http://designreviver.com/tutorials/j...tal-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:

    PHP Code:
    <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:

    PHP Code:
    #menudivcenter ul li a{    
        
    displayblock;    
        
    overflowhidden;
        
    height175px;
        
    width106px;
        
    cursorpointer;    

    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!
    Last edited by kazyn; 08-10-2011 at 09:23 PM.

  • #2
    Regular Coder
    Join Date
    Aug 2011
    Location
    U.S.A.
    Posts
    233
    Thanks
    2
    Thanked 48 Times in 48 Posts
    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:

    Code:
    <a id="a"...

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    14
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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

  • #4
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,930
    Thanks
    46
    Thanked 203 Times in 202 Posts
    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

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #5
    New Coder
    Join Date
    Aug 2011
    Posts
    14
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by alykins View Post
    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:

    PHP Code:
    <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:
    PHP Code:
    <script type="text/javascript" >
    $(
    document).ready(function(){
        
    lastBlock = $("a1");
        
    maxWidth 241;
        
    minWidth 106;    

        $(
    "#menudivcenter ul li a").hover(
          function(){
            $(
    lastBlock).animate({widthminWidth+"px"}, { queue:falseduration:400 });
        $(
    this).animate({widthmaxWidth+"px"}, { queue:falseduration:400});
        
    lastBlock this;
          }
        );
    });
    </script> 

    Still no worky

  • #6
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,930
    Thanks
    46
    Thanked 203 Times in 202 Posts
    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"

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #7
    New Coder
    Join Date
    Aug 2011
    Posts
    14
    Thanks
    7
    Thanked 0 Times in 0 Posts
    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:

    PHP Code:
    <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.

  • #8
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,930
    Thanks
    46
    Thanked 203 Times in 202 Posts
    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

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #9
    New Coder
    Join Date
    Aug 2011
    Posts
    14
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Ok, I figured this was mostly an HTML/CSS thing since it was dealing with the A tag and all.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •