jquery tools hello world template

Question

This is a very promising set of tools, but the very first steps do not seem to be described anywhere. THe forum returns 501 error and there are no ready to launch html templates.

Below is my attempt to get started, but something is wrong, apparently. could you correct it to make it show some basic functionality?

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"> </script>
</head>

<body style="text-align:center">

<%-- :mode=jsp: get handle to demo area --%>
<%@ page import="org.flowplayer.demo.*" %>
<c:set var="demoArea" value="${context.toolDemos2}"/>
<% DemoArea area = (DemoArea)pageContext.getAttribute("demoArea"); %>


<style>
#demos {
    background:#fff url(/img/global/gradient/h150_reverse.png) repeat-x scroll 0 -95px;     
    padding:30px 0 30px 40px;
    border:1px solid #ddd;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

.col {
    margin-right:0;  
    width:280px; 
    border-right:1px dotted #ccc;
    float:left;
}

#col1, #col2 {
    padding-left:30px;      
}

#col2 {
    border-right:0px;       
    width:310px;
}


.cat {
    width:230px;
    margin-top:25px;
}

.cat a {
    display:block;
    text-decoration:none;
    font-size:11px;
    color:#999; 
    margin:2px 0;
}

.cat a:hover {
    color:#333;
}

.cat h3 {
    font-size:14px;
    margin-bottom:2px;
}

.combinations h3 {
    font-weight:bold;
}

.col h2 {
    font-size:20px;
    text-shadow:0 0 3px #fff;
    text-transform:uppercase;
    font-weight:bold;
}

.col h2 strong {
    color:#5A57AB;
}

.pic {
    background:url(${cdn}${jqt}/img/jqt_sprite_medium.png) no-repeat 0 10px;
    height:200px;
    margin:-10px 0 -50px;   
}

#pic-form {
    background-position:0 -200px;       
}

#pic-toolbox {
    background-position:0 -400px;
}
</style>


<script>
$("#jqt3").addClass("active");
</script>

<div id="demos">
    <c:forTokens items="ui,form,toolbox" var="main" delims="," varStatus="j">

        <div class="col" id="col${j.index}">

            <h2>${main} ${j.index < 2 ? '<strong>TOOLS</strong>' : ''}</h2>

            <div class="pic" id="pic-${main}"></div>

            <c:forEach items='<%= area.getCategories((String)pageContext.getAttribute("main")) %>' var="cat" varStatus="i">

                <div class="cat ${cat.title == 'Combinations' ? 'combinations' : ''}">
                    <h3 title="${cat.description}">${cat.title}</h3>

                    <c:forEach items="${cat.demos}" var="demo">
                        <a href="${demo.path}">${demo.title}</a>
                    </c:forEach>
                </div>

                <c:if test="${i.index == 3}"><br clear="all" /></c:if>

            </c:forEach>

        </div> 

    </c:forTokens>

    <div class="clear"></div>
</div>
</body>
</html>

What are you trying to achieve? There is no element with id="jqt3" and I can't find where you are creating it. Besides I'd suggest trying to add class after DOM is ready $(document).ready(function(){$("#jqt3").addClass("active");}); — twil
Following your comments, here's version 2: jsfiddle.net/tearex/Q5nQs — secr
Stripped it down to jsfiddle.net/EwhzW and added jQuery as library in left menu — twil
Thank you. There is a difference - the button gets surrounded by a red square. it has lost its jquery to it, though. clipular.com/c?11036009=hlmHoX9oNVlJToneA82BgqvakBg&f=.png What is the expected effect? As i hover over the button nothing happens... — secr
I mean could you make the script display a bubble upon hovering over the button? to my eyes, the functionality that this fiddle does not seem to draw on jqtools. Easy to check: when I remove external resources reference to jquery.tools.min.js, the fiddle does the same. — secr

twil twil · Accepted Answer · 2013-07-21T07:38:04

Here is basic example of using jquery-tools tooltips

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>

<script type='text/javascript' src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>    

<style type='text/css'>
.form {
    margin: 50px;
}

.tooltip {
    display:none;
    background:gray;
    font-size:12px;
    height:30px;
    width:100px;
    padding:5px;
    color:#eee;
}
</style>

<script type='text/javascript'>//<![CDATA[ 

$(document).ready(function(){
    $('form input[type="radio"]').tooltip();
});
//]]>  

</script>
</head>

<body>
<form name="form1" method="post" class="form" action="">
    <input type="radio" name="radio" id="jqt1" value="jqt1" title="Tooltip text 1"><label for="jqt1">label 1</label><br>
    <input type="radio" name="radio" id="jqt2" value="jqt2" title="Tooltip text 2"><label for="jqt2">label 2</label><br>
    <input type="radio" name="radio" id="jqt3" value="jqt3" title="Tooltip text 3"><label for="jqt3">label 3</label><br>
</form>

</body>
</html>

http://jsfiddle.net/79rHK/

In your fiddles link to jquery tools was broken.

jquery tools hello world template

1 Answers