Home
Download
Add-ons
Help
Forum
Organisation
Project
Welcome,
Guest
. Please
login
or
register
.
Did you miss your
activation email?
May 26, 2012, 06:45:38 PM
1 Hour
1 Day
1 Week
1 Month
Forever
Login with username, password and session length
Search:
Advanced search
Wollen Sie dem WebsiteBaker Team beitreten?
Nähere Informationen finden Sie unter
hier
und auf unserer
neuen Webseite
.
155549
Posts in
21714
Topics by
7760
Members
Latest Member:
gx-world
WebsiteBaker Community Forum
English
jQuery
(Moderator:
badknight
)
Jquery in backend theme
Pages: [
1
]
Go Down
Author
Topic: Jquery in backend theme (Read 1463 times)
KCM
Offline
Posts: 10
Jquery in backend theme
«
on:
June 29, 2011, 03:09:02 PM »
Hi
I'm trying to use jquery accordion in my newest backend theme, but it doesn't work. Can someone help me?
The links are working perfectly, but the javascript is just not activated.
The header.htt template code for test:
Code:
<meta name="description" content="{TEXT_ADMINISTRATION}" />
<meta name="keywords" content="{TEXT_ADMINISTRATION}" />
<link href="{THEME_URL}/theme.css" rel="stylesheet" type="text/css" />
<link type="text/css" href="{THEME_URL}/accordion/jquery-ui-1.8.14.custom.css" rel="stylesheet" />
<script type="text/javascript" src="{THEME_URL}/accordion/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="{THEME_URL}/accordion/jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript">
$(function(){
// Accordion
$("#accordion").accordion({ header: "h3" });
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
</script>
</head>
<body>
<div id="accordion">
<div>
<h3><a href="#">First</a></h3>
<div>Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3><a href="#">Second</a></h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3><a href="#">Third</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>
Logged
pcwacht
AddOn Development
Offline
Posts: 2859
Re: Jquery in backend theme
«
Reply #1 on:
June 29, 2011, 03:41:59 PM »
Dunnho if it wil lhelp you, but I had simular problems and did solve them finally
Have a look here :
http://www.websitebaker2.org/forum/index.php/topic,21816.0.html
John
Logged
http://www.ictwacht.nl
= Dutch ICT info
http://www.pcwacht.nl
= My first
both still work in progress, since years.....
dbs
WebsiteBaker Org e.V.
Offline
Posts: 3719
Re: Jquery in backend theme
«
Reply #2 on:
June 29, 2011, 08:20:00 PM »
Quote
Code:
<div id="accordion">
<div>
<h3><a href="#">First</a></h3>
<div>Lorem ipsum dolor sit amet.</div>
</div>
have you tried this? :
Code:
<div id="accordion">
<h3><a href="#">First</a></h3>
<div>Lorem ipsum dolor sit amet.</div>
«
Last Edit: June 29, 2011, 08:22:15 PM by dbs
»
Logged
KCM
Offline
Posts: 10
Re: Jquery in backend theme
«
Reply #3 on:
June 29, 2011, 09:38:40 PM »
@DBS, nor sorry, doesn't work. It also a standard setup from jquery.
@pcwatch. I have a bit hard understanding your solution. I looked at it before making this new topic. Besides that, I want to make a new backend theme, not a new module.. As I understand, a backend theme has it own jquery folder, like argos.
Logged
dbs
WebsiteBaker Org e.V.
Offline
Posts: 3719
Re: Jquery in backend theme
«
Reply #4 on:
June 29, 2011, 10:05:01 PM »
i use jquery tabs in argos-template.
maybe you try your code there (header.htt).
«
Last Edit: June 29, 2011, 10:07:05 PM by dbs
»
Logged
KCM
Offline
Posts: 10
Re: Jquery in backend theme
«
Reply #5 on:
June 30, 2011, 06:30:29 AM »
@dbs - It sounds like you have the solution I nead!
Is it possible for you to show me the code for the header.htt? - Maybe send me the whole theme, instead you could get something else from me..?
Logged
dbs
WebsiteBaker Org e.V.
Offline
Posts: 3719
Re: Jquery in backend theme
«
Reply #6 on:
June 30, 2011, 06:58:26 AM »
the head in the header.htt from argos-Theme:
Code:
<?php
// <-- this isn't here
<!--
BEGIN header_block
-->
<!
DOCTYPE html
PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
html xmlns
=
"http://www.w3.org/1999/xhtml"
xml
:
lang
=
"en"
lang
=
"en"
>
<
head
>
<
title
>{
WEBSITE_TITLE
}&
raquo
;{
TEXT_ADMINISTRATION
}-{
SECTION_NAME
}</
title
>
<
meta http
-
equiv
=
"content-type"
content
=
"text/html; charset={CHARSET}"
/>
<
meta http
-
equiv
=
"content-language"
content
=
"{LANGUAGE}"
/>
<
meta name
=
"description"
content
=
"{TEXT_ADMINISTRATION}"
/>
<
meta name
=
"keywords"
content
=
"{TEXT_ADMINISTRATION}"
/>
<
meta name
=
"author"
content
=
"WebsiteBaker Org e.V."
/>
<
meta http
-
equiv
=
"Content-Encoding"
content
=
"gzip"
/>
<
meta http
-
equiv
=
"Accept-Encoding"
content
=
"gzip, deflate"
/>
<
link href
=
"{THEME_URL}/theme.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
{
BACKEND_MODULE_CSS
}
<
script type
=
"text/javascript"
>
var
WB_URL
=
'{WB_URL}'
;
var
THEME_URL
=
'{THEME_URL}'
;
var
ADMIN_URL
=
'{ADMIN_URL}'
;
</script>
<script src="{WB_URL}/include/jquery/jquery-min.js" type="text/javascript"></script>
<script src="{WB_URL}/include/jquery/jquery-insert.js" type="text/javascript"></script>
<script src="{WB_URL}/include/jquery/jquery-include.js" type="text/javascript"></script>
<link rel ="stylesheet" type="text/css" href="{WB_URL}/include/jquery/jquery-ui.css" />
<script src="{WB_URL}/include/jquery/jquery-ui-min.js" type="text/javascript"></script>
<!--[if lt IE 7]><script type="text/javascript" src="{WB_URL}/include/jquery/plugins/jquery-pngFix.js"></script><![endif]-->
<script src="{THEME_URL}/jquery/jquery-plugins.js" type="text/javascript"></script>
<script type="text/javascript">
function confirm_link(message, url) {
if(confirm(message)) location.href = url;
}
$(function() {
$( "#tabs" ).tabs();
});
</script>
{BACKEND_MODULE_JS}
</head>
from me comes only this:
Code:
<link rel ="stylesheet" type="text/css" href="{WB_URL}/include/jquery/jquery-ui.css" />
<script src="{WB_URL}/include/jquery/jquery-ui-min.js" type="text/javascript"></script>
$(function() {
$( "#tabs" ).tabs();
});
argos_theme is one of two standard-backend-themes an part of your wb-installation.
maybe you send me your backend-theme for testing.
dbs
Logged
pcwacht
AddOn Development
Offline
Posts: 2859
Re: Jquery in backend theme
«
Reply #7 on:
June 30, 2011, 07:57:11 AM »
Standard Argos theme has jquery in footer
There is a argos theme wich has the jquery in the header. Don't think it is standard prior to wb282
John
Logged
http://www.ictwacht.nl
= Dutch ICT info
http://www.pcwacht.nl
= My first
both still work in progress, since years.....
dbs
WebsiteBaker Org e.V.
Offline
Posts: 3719
Re: Jquery in backend theme
«
Reply #8 on:
June 30, 2011, 08:31:19 AM »
oops, your're right, but my wb2.8.1, rev1287, adminvers. 1.4 ... jquery is loaded in the head.
this version could help:
http://www.websitebakers.com/pages/admin/backend-themes/release-2.8/argos-theme.php
Logged
KCM
Offline
Posts: 10
Re: Jquery in backend theme
«
Reply #9 on:
June 30, 2011, 11:49:08 AM »
Ok,
I installed "Argos with jQuery in header"
I tried just to implementer the short accordion function
And I tried on another WB installation
But it still doesn't work..
What is the problem??
I use WB2.8 and Admin v1.4.
Code:
<!-- BEGIN header_block -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>{WEBSITE_TITLE}»{TEXT_ADMINISTRATION}-{SECTION_NAME}</title>
<meta http-equiv="content-type" content="text/html; charset={CHARSET}" />
<meta http-equiv="content-language" content="{LANGUAGE}" />
<meta name="description" content="{TEXT_ADMINISTRATION}" />
<meta name="keywords" content="{TEXT_ADMINISTRATION}" />
<link href="{THEME_URL}/theme.css" rel="stylesheet" type="text/css" />
{BACKEND_MODULE_CSS}
<script type="text/javascript">
var WB_URL = '{WB_URL}';
var THEME_URL = '{THEME_URL}';
var ADMIN_URL = '{ADMIN_URL}';
</script>
<script src="{WB_URL}/include/jquery/jquery-min.js" type="text/javascript"></script>
<script src="{WB_URL}/include/jquery/jquery-insert.js" type="text/javascript"></script>
<script src="{THEME_URL}/jquery/jquery-plugins.js" type="text/javascript"></script>
<script src="{WB_URL}/include/editarea/edit_area_full.js" type="text/javascript"></script>
{BACKEND_MODULE_JS}
<script type="text/javascript">
function confirm_link(message, url) {
if(confirm(message)) location.href = url;
}
$(function() {
$( "#accordion" ).accordion({
collapsible: true
});
</script>
</head>
<body>
<div id="admin_header">
<div id="header_top">
<div id="topmenu"> <a href="{ADMIN_URL}" title="{TITLE_START}">Home</a>| <a href="{URL_VIEW}" target="_blank" title="{TITLE_VIEW}">{TITLE_VIEW}</a>| <a href="{ADMIN_URL}/logout/" title="{TITLE_LOGOUT}">{TITLE_LOGOUT}</a>
<br />
<br />
<span class="version">CMS Version {VERSION}</span><br/>
<span class="version">Revision {REVISION}</span><br/>
<span class="version">Admin version 1.4</span>
</div>
<a href="{ADMIN_URL}" title="{TITLE_START}" id="website_title">
{WEBSITE_TITLE} - {TEXT_ADMINISTRATION}
<!-- <img src="{THEME_URL}/images/logo.png" border="0" alt="Logo" /> -->
</a>
</div>
<div class="menu">
<ul>
<!-- BEGIN linkBlock -->
<li class="{CLASS}"><a href="{LINK}" target="{TARGET}"><span>{TITLE}</span></a></li>
<!-- END linkBlock -->
</ul>
</div>
</div>
<div id="content_container">
<table cellpadding="0" cellspacing="0" border="0" width="900" align="center">
<tr>
<td class="content">
<div id="accordion">
<div>
<h3><a href="#">First</a></h3>
<div>Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3><a href="#">Second</a></h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3><a href="#">Third</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>
<!-- END header_block -->
Logged
dbs
WebsiteBaker Org e.V.
Offline
Posts: 3719
Re: Jquery in backend theme
«
Reply #10 on:
June 30, 2011, 11:59:42 AM »
and you have jquery-files in /include/jquery/ ?
if not, download latest wb-version, extract and copie the folder /include/jquery to your installation-folder /include/.
«
Last Edit: June 30, 2011, 12:02:58 PM by dbs
»
Logged
pcwacht
AddOn Development
Offline
Posts: 2859
Re: Jquery in backend theme
«
Reply #11 on:
June 30, 2011, 03:27:42 PM »
Best start is to first make a simple html page and try it there , maybe local on xampp
Then when ithe html is working, check the output of your admin-template in the backend to see if everything is correct.
Check and double check the js files you use of their existence and the paths are correct.
Try a js debugger just error showing could help you a lot.
I did it this way with the calander picker. It is one step forward one step back. But it is a debugging wich works!!
By posting a part of the template it is tough to see where the error lies. The admin-template is a package wich one need to debug.
Good luck,
John
Logged
http://www.ictwacht.nl
= Dutch ICT info
http://www.pcwacht.nl
= My first
both still work in progress, since years.....
KCM
Offline
Posts: 10
Re: Jquery in backend theme
«
Reply #12 on:
June 30, 2011, 07:00:43 PM »
Well thank you very much for you good explanation. I had done all that (html, links, etc.), unless the "javascript bugger", that I will remember.
I tried another combi. Used the Agros theme without query in the footer, and used the original query setup from the download on the query site. - It now works..
Thank you very much John and dbs for quiding me in the right direction!
This is the code, if someone else needs to use it:
Again, download the query agros:
http://www.websitebakers.com/pages/admin/backend-themes/release-2.8/argos-jq.php
The code for the header.htt file in the agros-jq theme:
Code:
<!-- BEGIN header_block -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>{WEBSITE_TITLE}»{TEXT_ADMINISTRATION}-{SECTION_NAME}</title>
<meta http-equiv="content-type" content="text/html; charset={CHARSET}" />
<meta http-equiv="content-language" content="{LANGUAGE}" />
<meta name="description" content="{TEXT_ADMINISTRATION}" />
<meta name="keywords" content="{TEXT_ADMINISTRATION}" />
<link href="{THEME_URL}/theme.css" rel="stylesheet" type="text/css" />
{BACKEND_MODULE_CSS}
<script type="text/javascript">
var WB_URL = '{WB_URL}';
var THEME_URL = '{THEME_URL}';
var ADMIN_URL = '{ADMIN_URL}';
</script>
<script src="{WB_URL}/include/jquery/jquery-min.js" type="text/javascript"></script>
<script src="{WB_URL}/include/jquery/jquery-insert.js" type="text/javascript"></script>
<script src="{THEME_URL}/jquery/jquery-plugins.js" type="text/javascript"></script>
<script src="{WB_URL}/include/editarea/edit_area_full.js" type="text/javascript"></script>
{BACKEND_MODULE_JS}
<script type="text/javascript">
function confirm_link(message, url) {
if(confirm(message)) location.href = url;
}
</script>
<link type="text/css" href="{THEME_URL}/accordion/jquery-ui-1.8.14.custom.css" rel="stylesheet" />
<script type="text/javascript" src="{THEME_URL}/accordion/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="{THEME_URL}/accordion/jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript">
$(function(){
// Accordion
$("#accordion").accordion({ header: "h3" });
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
</script>
</head>
<body>
<div id="admin_header">
<div id="header_top">
<div id="topmenu"> <a href="{ADMIN_URL}" title="{TITLE_START}">Home</a>| <a href="{URL_VIEW}" target="_blank" title="{TITLE_VIEW}">{TITLE_VIEW}</a>| <a href="{ADMIN_URL}/logout/" title="{TITLE_LOGOUT}">{TITLE_LOGOUT}</a>
<br />
<br />
<span class="version">CMS Version {VERSION}</span><br/>
<span class="version">Revision {REVISION}</span><br/>
<span class="version">Admin version 1.4</span>
</div>
<a href="{ADMIN_URL}" title="{TITLE_START}" id="website_title">
{WEBSITE_TITLE} - {TEXT_ADMINISTRATION}
<!-- <img src="{THEME_URL}/images/logo.png" border="0" alt="Logo" /> -->
</a>
</div>
<div class="menu">
<ul>
<!-- BEGIN linkBlock -->
<li class="{CLASS}"><a href="{LINK}" target="{TARGET}"><span>{TITLE}</span></a></li>
<!-- END linkBlock -->
</ul>
</div>
</div>
<div id="content_container">
<table cellpadding="0" cellspacing="0" border="0" width="900" align="center">
<tr>
<td class="content">
The code for the sections you want to be accordion:
Code:
<div id="accordion">
<div>
<h3><a href="#">First</a></h3>
<div>Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3><a href="#">Second</a></h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3><a href="#">Third</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>
Logged
Spritemarkiv
AddOn Development
Offline
Posts: 113
Re: Jquery in backend theme
«
Reply #13 on:
July 10, 2011, 10:31:07 AM »
I got it working in my module Auto Gallery. Have a look.
http://www.websitebakers.com/pages/modules/image-galleries/auto-gallery.php
It wasn't an easy thing to do, very frustrating. The key was to have a backend_body.js file that includes
Code:
$(document).ready(function()
{
$.insert('../../include/jquery/jquery-ui-min.js');
});
It works with all the standard backend themes. But it's probably not the best way to implement Jquery-ui.
Hope it's helpful! Best of luck.
Logged
Stefek
WebsiteBaker Org e.V.
Offline
Posts: 4884
Re: Jquery in backend theme
«
Reply #14 on:
July 10, 2011, 10:55:31 AM »
Quote from: Spritemarkiv on July 10, 2011, 10:31:07 AM
It works with all the standard backend themes. But it's probably not the best way to implement Jquery-ui.
This is a good way to load the jQuery UI on demand.
However, you could first check if it is not already loaded (i.e. out of other module).
Here is a way how you could do this:
http://stackoverflow.com/questions/2260250/testing-if-jqueryui-has-loaded
Kind regards,
Stefek
Logged
"In a time of universal deceit, telling the truth becomes a revolutionary act."
- George Orwell, Nineteen eighty-four (1984)
Pages: [
1
]
Go Up
Jump to:
Please select a destination:
-----------------------------
General
-----------------------------
=> General Announcements
=> Security Announcements
=> Documentation
=> WebsiteBaker Website Showcase
=> Guest Area & Off-Topic
-----------------------------
English
-----------------------------
=> WebsiteBaker 2.9
===> Announcements
===> Help/Support
=====> Modules / Extensions
===> Suggestions
===> Software bugs
=> Help & Support
=> Modules
=> Droplets (PHP code for use with Droplet module) & Snippets (raw PHP code)
=> jQuery
=> Templates, Menus & Design
=> WebsiteBaker Language Files
=> WebsiteBaker 2.x discussion
=> WebsiteBaker 3
=> Archive (posts up to 2007)
-----------------------------
Deutsch (German)
-----------------------------
=> Ankündigungen
=> WebsiteBaker 2.9
===> Ankündigungen
===> Hilfe/Support
=====> Module / Extensions
===> Vorschläge
===> Softwarefehler
===> Erfahrungs und Testberichte
=> Hilfe/Support
=> Module & Snippets
=> Templates & Design
=> Tutorials
=> jQuery
=> Diskussion über WB
=> Off-Topic
=> Archiv für Themen bis 2007
-----------------------------
Nederlands (Dutch)
-----------------------------
=> Aankondigingen
=> Hulp & Ondersteuning
=> Niet-Terzake (Off Topic)
-----------------------------
Francais (French)
-----------------------------
=> Help/Support
-----------------------------
Italiano (Italian)
-----------------------------
=> Help/Support
-----------------------------
Bakery (WB shop module)
-----------------------------
=> Bakery English
=> Bakery Deutsch
-----------------------------
KeepInTouch (Multi Contact Module)
-----------------------------
=> KeepInTouch English
=> KeepInTouch Deutsch
Loading...