Can I apply javascript behavior to stylesheet?

Discussion in 'Web Design and Development' started by yojitani, Aug 24, 2007.

  1. yojitani macrumors 68000

    yojitani

    Joined:
    Apr 28, 2005
    Location:
    An octopus's garden
    #1
    What I want to do is set a behavior for a single div so that when a lesser (than me:p) admin enters a new link or sets of links within the div the link(s) will open in a new window with a specified size. Is this possible to do? How?

    Thanks!
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    It sounds like you're saying you're using CSS to make sure the pop-up window size is set to what you want, but this isn't something CSS does. But I'm thinking that isn't what you're trying to ask.

    If you want to control all links within a div you can do,

    #divName a {
    /* your CSS */
    }

    If I'm way off base be more descriptive on the setup of your problem/situation.
     
  3. yojitani thread starter macrumors 68000

    yojitani

    Joined:
    Apr 28, 2005
    Location:
    An octopus's garden
    #3
    No, I guess I didn't make myself clear. I was wondering if there was some way to get the javascript to apply to all links within the div. I'm not so well versed in javascript - I tend to rely on dreamweaver for this sort of thing - but I'm writing a site for people who don't know even basic html.

    Actually, perhaps if I tell you exactly what I'm doing, you might be able to offer other suggestions. The page I'm working on is an 'events' page, basically. The client needs to add new events on regular basis. The listed events link to various event descriptions that are generated from 'webevent'. Those descriptions popup in smallish boxes on the webevent page. Now, they can link to the description in a regular window, but I was wanting to links that they write on the page I'm working on in the same way.

    I'm not sure I can explain this any clearer. Here is an example webevent page: note how the events popup in another window. I want to link to the same place in a similar sized window.

    YT
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    OK, I think I'm following now. Below is some JS that'll set the href of all links within the specified div element. I think this should set you in the right direction for what you want. This is a simplified version, but hopefully is useful. Just add a call to onInit from onload in the body tag (<body onload="onInit();">).

    HTML:
    function onInit()
    {
      theDiv = document.getElementById("ex");
      links = theDiv.getElementsByTagName("a");
      
      for (i=0; i < links.length; i++)
      {
        links[i].href = "#new";
      }
    }
     
  5. yojitani thread starter macrumors 68000

    yojitani

    Joined:
    Apr 28, 2005
    Location:
    An octopus's garden
    #5
    OK. This took me awhile to work out and I realize that it is not quite what I am looking for. What I want is to induce the same behavior for all links within the div. In this case, the behavior i want is to open a popup. I want to be able to specify the link within the div, not in the JS.

    I don't even know if this is possible...

    Thanks a million for the help!!
     
  6. CoreWeb macrumors 6502

    Joined:
    Mar 2, 2007
    Location:
    Edge of reason
    #6
    The most obvious solution would be to not use Javascript at all, and just use target = "_blank".

    Aside from that, you can use the Javascript supplied, but use your own code to change the links:
    Code:
    var links;
    function onInit () {
        /* First, we get the div */
        var theDiv = document.getElementById("ex");
        
        /* Now, we fill the links list (declared above) */
        links = theDiv.getElementsByTagName("a");
        
        /* Now, we loop through the links list */
        for (i=0; i < links.length; i++) {
            /* For each link:
                Make it call popup function (with link number) when it is clicked
                Store the old href somewhere. Since Javascript allows you to add
                    a variable wherever, just make a property "oldHref"
                Set the href of the link to something that does nothing, so we are
                    not bothered by what the link was originally supposed to do
                    before we changed it.
            */
    
            links[i].onclick = "myShowPopup(" + i + ");";
            links[i].oldHref = links[i].href;
            links[i].href = "javascript:void(0);";
        }
    }
    function myShowPopup(i){
        var path = links[i].oldHref;
        /* Do whatever code you want to open a popup window to "path" */
    }
    
    While I would probably do it a more complicated way on my own website so I could add more later and make it more flexible (I am constantly changing things), this should do for most purposes.

    I hope that helps!
     
  7. yojitani thread starter macrumors 68000

    yojitani

    Joined:
    Apr 28, 2005
    Location:
    An octopus's garden
    #7

Share This Page