CoffeaElectronica

A smooth well-coded brew.

Posts Tagged HTML

Collapsible Divs With JQuery

Dec 23

Posted by Christopher J. Stehno in Programming | No Comments

I coded up a nice little collapsible-group side bar thingy using JQuery and it was surprisingly easy. Say you have a sidebar with collapsible group content such as:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="container">
    <div class="group">
        <div class="group-title">Group A</div>
        <div class="group-content">
            This is where you would put the content for Group A.
        </div>
    </div>
    <div class="group">
        <div class="group-title">Group B</div>
        <div class="group-content">
            This is where you would put the content for Group B.
        </div>
    </div>
    <div class="group">
        <div class="group-title">Group C</div>
        <div class="group-content">
            This is where you would put the content for Group C.
        </div>
    </div>
</div>

where you have group block titles and group content that you want to be able to toggle the visibility of. With a couple lines of JavaScript and JQuery it’s a sinch:

1
2
3
$('div.group-title').bind('click',function(evt){
    $(evt.target).parent().find('.group-content').slideToggle(500);
});

which will be put inside an onload handler (also using JQuery). When the group title is clicked, the group-content block will toggle by sliding up or down in about half a second. With this model you can also place any number of these “components” on a page without the concern about event collision since the event handling is based on the click location.

Add in a little CSS and you end up with:

Popularity: 8% [?]

  • Share/Bookmark

Tags: , , ,

Google Ajax APIs

Sep 26

Posted by Christopher J. Stehno in Programming | No Comments

I came across the Google Hosted Ajax Libraries recently and have since found them to be quite useful, especially in quick testing situations where you really don’t want to have to setup a project. You can do everything in one nice text file.

To use the library you want, simply link to it using the external script source link:

1
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Google has them hosted, minimized and cached so they are nice and fast. Pretty handy.

I mentioned this quickly in my post about Highlighting Text With JavaScript, but I felt that it needed its own little post so that it doesn’t get lost.

Popularity: 1% [?]

  • Share/Bookmark

Tags: , , ,

Calling Parent Code from IFrame

Oct 15

Posted by Christopher J. Stehno in Programming | No Comments

Every now and then I have needed to access the parent page enclosing an IFrame and I have never really found a good straight-forward example of how to do it, so I end up having to work it out each time I need it. So, for a parent (enclosing page) with an IFrame as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
    <head>
        <title>IFrame test</title>
        <script type="text/javascript">
        function closeIFrame(){
            if(confirm("Are you sure you want to close the iframe?")){
                document.getElementById("frame").style.display = 'none';
            }
        }
        </script>
    </head>
    <body>
        <iframe id="frame" src="visitor.html" width="200" height="200"></iframe>
    </body>
</html>

where the “visitor.html” page called by the IFrame is given as:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
    <head>
        <title>Visitor</title>
        <script type="text/javascript">
        function closeMe(){
            parent.closeIFrame();
        }
        </script>
    </head>
    <body>
        <p>Hello, just visiting.</p>
        <button onclick="closeMe()">Close Me</button>
    </body>
</html>

When the “Close Me” button is clicked, the parent page will dispose of the IFrame, but the JavaScript function to do this actually resides in the parent page.

One thing to note, is that both pages must reside on the same domain (or sub-domain) or else the script will not work, due to security restrictions.

Popularity: 1% [?]

  • Share/Bookmark

Tags: , ,

Switch to our mobile site