jquery+rounded corners

[susanna]

Liebe Leute,

ich versuche seit einer Woche immer mal wieder ein div mit "runden Ecken" zu erzeugen. Ich habe mich inzwischen kreuz und quer durchs Forum gelesen, fühle mich auf Dietmars Seite wie zu Hause , habe ne Menge probiert und nichts hat geklappt (ausser einer "normalen" html-Seite mit "rounded corners" nach Anleitung).
Inzwischen werfe ich wahrscheinlich auch vieles durcheinander...

Vielleicht ist ja jemand von euch so freundlich und überprüft mal kurz meinen Wissenstand:

1. Ich kopiere vor </body>

Code:

<?php
if(function_exists('register_frontend_modfiles_body')) {
  register_frontend_modfiles_body('jquery');
  register_frontend_modfiles_body('js');
}
?>

2. Ich erstelle mir einen Ordner "plugins" in meinem Template-Ordner und kopiere das jquery plugin jquery.corners.js dort hinein.
Ich rufe das plugin auf (auch im Headbereich):

Code:

<script src="http://localhost/wb/templates/round/plugins/jquery.corners.js"></script>
<script type="text/javascript">
$(document).ready( function() {
  $('.rounded').corners();
});
</script>

3. Ich erstelle ein div und vergebe die Klasse .rounded:

Code:

<div id="rundeecken"><div style="background-color:#000; padding:5px" class="rounded">

Das klappt nicht....

Grüße,
susanna

[mr-fan]

hi,

für punkt 1. must du das Jquery plugin von luiseHahne installiert haben....?

http://www.websitebakers.com/pages/libs/jquery.php

mfg martin

[susanna]

JQuery api habe ich installiert....

[dbs]

hi, ein link zu deiner seite wäre vielleicht nicht schlecht.

wenn du das modul installiert hast, dann geb ich dir den corner-aufruf für die jquery_frontend.js
brauchst den plugin-ordner eigentlich nicht mehr.

dein aufruf für register_frontend_m odfiles_body hast du aber nur einmal im template, ja?

[Luisehahne]

Hallo susanna,

wen ndu nich tgerade eine lokale installation hast, dann gib mir mal bitte eine url, dann kann ich sagen was du verkehrt gemacht hast.

Dietmar

[susanna]

Ich habe leider diese Testseite auf xampp/localhost installiert und ja, ich habe jquery nur im body-Bereich eingebunden...

[Luisehahne]

Arbeitest du mit FireFox, dann mal bitte im Firebug, wenn installiert, nachschauen, ob ein Fehler angezeigt wird.

Dietmar

[dbs]

hm, nun ist dieter da, der ist der jquery-cheffe.

bei mir in der jquery_frontend.js (im template-ordner) sieht es so aus:

Code:

if (jQuery) {
      jQuery(document).ready(function(){

        if($("a[rel^='lightbox']").length) {
              $.insert(WB_URL+'/modules/jquery/plugins/jquery-slimbox2.css');
              $.insert(WB_URL+'/modules/jquery/plugins/jquery-slimbox2-min.js');
            }

/* more functions here */

/******************/
        if($(".rounded, .rounded2").length) {
     $.insert(WB_URL+'/modules/jquery/plugins/jquery-corner.js');
        $(function() {
                $(".rounded").corner('round 8px'); /* test for rounding */
                $(".rounded2").corner('round 5px'); /* test2 for rounding */        
        });
      }
/*****************/
      });
    };

habe dem rounded zwei werte gegeben für alle fälle, nicht verwirren lassen.
wenn du also nun irgendwo die klasse rounded oder rounded2 vergeben hast, sollte es funktionieren.

[Luisehahne]

Wichtig ist ja auch, dass im Html Tag eine entsprechende  class steht, z.B.  class="rounded". Hattest du mein jquery modul installiert?

Dietmar

[Luisehahne]

Vielleicht hilft dir auch diese Seite weiter

http://methvin.com/jquery/jq-corner.html

Könnte ich auf einer url nachschauen, wäre der Fehler wohl schon erkannt. Kann man nichts machen

Dietmar

[susanna]

Hallo,

@dbs: ich habe das Modul installiert (http://www.websitebakers.com/pages/libs/jquery.php), habe aber keine jquery_frontend.js im Template-Ordner....

@Dietmar: Fehlercode von Firebug

[maverik]

warum einfach wenns auch umständlich geht 

ich schreibe nachher mal was einfaches dazu 

jetzt gugge ich erstmal stern tv 

alles schön rounded http://template.developer-base.de/

[susanna]

Hier ist noch mal die index.php (Template wb_business)

Code:

<?php

/**
 * Master Baker template: WB Business v2.0
 *
 * This template defines the guidelines to be applied for new
 * templates added to the WebsiteBaker add-ons repository from 
 * August 2008 onwards.
 *
 * This file defines the variables required for websitebaker.
 * 
 * LICENSE: GNU General Public License 3.0
 * 
 * @author     John P. , Charles M.
 * @copyright  OPEN SOURCE GNU GENERAL PUBLIC LICENSE
 * @license    http://www.gnu.org/licenses/gpl.html
 * @version    2.00
 * @platform   WebsiteBaker 2.7
*/


// redirect if this file is invoked directly
if (!defined('WB_URL')) {
    header('Location: ../index.php');
    exit(0);
}
// TEMPLATE CODE STARTS BELOW

?>
<!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">
<head>



<!-- Information list Below must not be removed -->
<!-- Version: WB Business Version 1.0 / Layout-1.0 (WB Retrofitted) -->
<!-- Date: February 25, 2008 -->
<!-- Original Author: John Parker / Charles M.-->
<!-- License: Fully open source without restrictions. -->
<!-- Please keep footer credits with a link to -->
<!-- Thank you! -->
<!-- GNU General Public License -->
<!-- WB Version: 2.6.x and 2.7 -->
<!-- Retrofitted by: John P. and Charles M. -->
    <title><?php page_title('', '[WEBSITE_TITLE]'); ?></title>
    <meta http-equiv="Content-Type" content="text/html; charset=<?php echo defined('DEFAULT_CHARSET') ? DEFAULT_CHARSET :'utf-8';?>" />    
    <meta name="description" content="<?php page_description(); ?>" />
    <meta name="keywords" content="<?php page_keywords(); ?>" />
    <?php 
    // automatically include optional WB module files (frontend.css, frontend.js)
    if (function_exists('register_frontend_modfiles')) {
        register_frontend_modfiles('css');
    } ?>
    <link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/template.css" />    
    <script src="http://localhost/jquery/templates/WB_Business/plugins/jquery.corners.js"></script>
<script type="text/javascript">
$(document).ready( function() {
 $('.rounded').corners('round 15px');
});
</script>
   
</head>
<body>
<div class="wrapper">
  <div class="upperhead">
    <div class="tel"><?php if(SHOW_SEARCH) { ?>


<form class="search" action="<?php echo WB_URL.'/search/index.php'; ?>" method="post">

<p>
<input name="string" class="field" value=" <?php echo $TEXT['SEARCH']; ?>..." size="14" />
<input class="button" type="submit" name="Submit" value="Search" />
</p>
</form>
<?php } ?>
</div><!-- END SEARCH -->
  </div>
  <div class="banner"><b><?php page_title('', '[WEBSITE_TITLE]'); ?></b>
<h3>Put your site slogan here...</h3>
</div>
  <div class="underbanner">
    <table border="0" width="100%" cellspacing="0" cellpadding="0">
    <tr>
        <td>
        <table border="0" width="100%">
            <tr>
                <td align="left"><?php echo date("l, F d, Y"); ?></td>
                <td align="right"><?php show_menu2(0, SM2_ROOT, SM2_CURR, SM2_CRUMB, '<span class="[class]"> &raquo; [a][menu_title]</a>', '</span></small>', '', '', '<small><b>&nbsp;You are here:</b> <span class="[class]">[a][menu_title]</a>'); ?></td>
            </tr>
        </table>
        </td>
    </tr>
</table>
  </div>
  <div class="content">
<!-- START LEFT COLUMN -->    
    <div class="leftcolumn">
      <div id="navvy">
        <ul id="navvylist">
          <?php show_menu(1,0,1,true,'<li class="sidemenu">[a][menu_title][/a]','</li>','','','',''); ?>
        </ul>
      </div>
      <div class="box"> <?php page_content(2); ?></div>
    </div>
    <div class="rightcolumn">
      <h2><?php page_title('', '[WEBSITE_TITLE]'); ?></h2>
      <!--div class="underbanner2"><?php //get_modified_when(); ?></div-->
      <div class="article">
        <?php page_content(1); ?>
        <div id="rundeecken"><div style="background-color:#000; color: #fff; font-weight: bold; padding:20px" class="rounded">Runde Ecken</div></div>
      </div>
      
    </div>
    <div class="clear"></div>
  </div>
  <div class="footer"><?php page_footer(); ?></div>
</div>
<div style="font-size: 0.8em; text-align: center; margin-top: 1.0em; margin-bottom: 1.0em;">
    Powered by  <a href="http://www.websitebaker.org/">websitebaker</a> -  </div>
    <?php
if(function_exists('register_frontend_modfiles_body')) {
  register_frontend_modfiles_body('jquery');
  register_frontend_modfiles_body('js');
}
?>
</body>
</html>

[Luisehahne]

Ne ist klar original gibt es keine   register_frontend_m odfiles_body('jquery');

Ich hatte mal ein jquery modul geschrieben, weil danach gefragt worden ist. Dazu wird aber das frontend.function.p hp verändert. Steht aber alles auf meinen Seiten.  Ist halt eine Lösung, wo nicht lange überlegt werden muss, wie binde ich jquery ein. Es besteht die Möglichkeit Jquery im head oder body einzubinden. die jquery_front.js wird automatisch im aktuellen Template Ordner erstellt und enthält als Grundfunktion das slimbox plugin (Lightbox). Es lasse nsich dort weitere plugins einfügen, die erst dann aufgerufen werden, wenn diese auch benötigt werden.

Ich sehe hier aber auch, dass das   register_frontend_m odfiles_body('jquery'); gerne angenommen würde, denke ich jedenfalls,

Dietmar

[Luisehahne]

Achja vergessen, laut der Fehlermeldung ist die jquery api nicht eingebunden.

Dietmar

[dbs]

würde vorschlagen
corner-script nimmst du wieder raus aus dem head
holst dir nochmal jquery-api von dieter
machst nur im head(dafür das body-zeug unten weglassen)

Code:

<?php if(function_exists('register_frontend_modfiles')) {
  register_frontend_modfiles('css');
  register_frontend_modfiles('jquery');
  register_frontend_modfiles('js');} 
  ?>

guckst ob im template die jquery_frontend.js ist und erweiterst sie mit dem was ich weiter oben postete.

oder wartest auf maverik
oder cheffe

[Luisehahne]

Naja dann wird cheffe mal antworten. ich suche mal meinen alten Link raus zum Einbinden von jquery. Man muss ja nicht das jquery module installieren. Das Grundgerüst ist ja bereits im include Ordner der WB 2.8.

Denke das ist das was Maverik erklären möchte.

Dietmar

[dbs]

ja das wird er sicher sagen wollen, denn er macht es ja so

das heißt, dass die modul-idee wieder gestorben ist?

[Stefek]

^{dbs war etwas schneller//}

Hallo Dietmar.

Ich habe eine Frage: wäre es nicht möglich, eine Art Modul (besser gesagt Admin Tool) zu schaffen, über das man die jQuery Plugins verwalten kann?
So ähnlich wie AddonsFileEditor, wo man die Möglichkeit hat einzelne Dateien hochzuladen usw.

Ich wüßte nicht genau, wie man das strukturieren sollte - da bist Du eher gefragt.
Ich frage mich auch, ob es gut ist, die Plugins in den Include Ordner zu packen (ich selbst verfahre momentan so, dass die Plugins im Temlateordner selbst liegen).

*grübbel*
Wirßt Du Rat/hast Du da was angedacht, was noch nicht öffentlich richtig bekannt ist?

Gruß,
Stefek

[Luisehahne]

@dbs
nein für mich ist das nicht gestorben, werde es auch weiter als Modul pflegen. Ob es in WB Einzug hält, habe ich nicht alleine zu entscheiden. Auf jeden Fall werde ich das so weiter entwickeln, dass auch Plugins darüber geladen und verwaltet werden sollen.

Damit habe ich wohl die Frage von Stefek auch beantwortet.

Im Moment ist es wichtiger den CKEditor einzubinden. So langsam nimmt es Gestalt an.

Dietmar

[Stefek]

Im Moment ist es wichtiger den CKEditor einzubinden. So langsam nimmt es Gestalt an.

Das hört sich gut an, ich bin sehr gespannt darauf.

Das mit Deinem Plugin, wo kann man das denn alles nachlesen, wie Du es geplant hast?
Wenn Du es nicht alleine zu entscheiden hast, dann können ja einige jQuery Enthusiasten mit drauf schauen und wenn es als praktikabel empfunden wird, können wir für Dich die Claque spielen

Gruß,
Stefek

[Luisehahne]

Danke für dein Angebot. Aber lass mal, jetzt wird WB erst mal gefixed. Da ist ja schon einiges passiert in der letzten Zeit, und ich möchte da auch nicht vorgreifen.

Zum Upload von Plugins, habe ich eine wunderschöne Umsetzung mit Jquery gefunden, die ich aber noch anpassen muss. Wie geagt jetzt erstmal Prioritäten setzen, und das ist der CKediotor. Da die Docu von CK noch nicht fertig ist, gibt es genug Probleme, die noch gelöst werden müssen.

Dietmar

[maverik]

moin

also die modulgeschichte mag wenn sie fertig ist maybe eine gute sache werden was aber derzeit aus luises seite hervorgeht ist für mich eine technische referenz die ich als copy und paste coder anwender nicht verstehe. ich habe sehr lange auf luises seite verbracht und versucht das ganze zu verstehen, mir dann meinen eigenen weg ergoogelt / recherchiert, mit try and error erarbeitet.

als erstes erstelle ich mir einen ordner mit dem namen des plugins im plugin ordner und pack da die dazu gehörigen dateien rein.

da ich verschiedene plugins gern global auf jeder seite zur verfügung habe packe ich mir das ganze schnöde und einfach in den head der seite.

erstmal für jquery

Code:

<link rel="stylesheet" type="text/css" href="<?php echo WB_URL; ?>/include/jquery/plugins/jquery-ui.css" media="screen,projection" />
<script language="JavaScript" type="text/javascript">
         var URL = '<?php echo WB_URL ?>';
        </script>
        <script type="text/javascript" src="<?php echo WB_URL;?>/include/jquery/jquery-min.js"></script>
        <script type="text/javascript" src="<?php echo WB_URL;?>/include/jquery/jquery-ui-min.js"></script>
        <script type="text/javascript" src="<?php echo WB_URL;?>/include/jquery/jquery-insert.js"></script>

so damit habe ich schon einmal jquery am start

jetzt geht es ja um rounded corner hier, also das script auch ab in den head

Code:

<script type="text/javascript" src="<?php echo WB_URL;?>/include/jquery/plugins/jquery-corner.js"></script>

so nun haben wir bei aufruf der seite auch das corner plugin am start.

die ecken nun an der entsprechenden stelle rund zu bekommen ist nun auch kein hexenwerk mehr denn das plugin macht einfach ausgedrückt nix anderes als die ecken des divs welches runde ecken haben soll abzufeilen. 

alle oder die meisten bereiche der seite liegen ja in div containern und wir müssen dem plugin eigentlich nur noch sagen welches div es wie wo abrunden soll.


am beispiel meiner seite http://template.developer-base.de/ möchte ich die sidebar rechts mit runden ecken versehen. da aber das div der suche über oder in der sidebar liegt muss ich der suche oben und der sidebar unten die ecken abrunden.

der aufruf dafür

Code:

<script language="javascript" type="text/javascript">
            $('#sidebar').corner('round bottom 25px');
            $('#suche').corner('round top 25px');
</script>

ich habe also nur die vorhandenen divs aufgerufen und mit corner belegt und die entsprechenden style anweisungen übergeben

das div sidebar bitte mit runden ecken von 25px unten und das div suche bitte mit runden ecken von 25px oben.

thats all

bei mir steht das ganze vor </body> in der index und funktioniert einwandfrei, ob es technisch einwandfrei ist weis ich nicht aber es funktioniert und das zählt für mich

[Luisehahne]

Ich mache im Prinzip nichts anderes. Nur braucht man sich keinen Kopf mehr zu machen. Copy und paste ist auch nicht nötig. Es ist nur eine Erklärung was bei der Modulinstallation verändert wird. Da ja in der Programmierung sich von heute auf morgen andere Gedanken ergeben können, tendiere ich im Moment dazu,  das Modul nur als jquery plugin Modul zu belassen. Ist bestimmt noch nicht der WEisheit letzter Schluss.

Tricksy bei meiner Lösung ist, dass bis auf die jquery api und jquery ui und 2 css alle plugins in the demond geladen werden. Spart eine Menge http requests.  Dewegen auch das plugin insert. Da wird im Backend, z.B. auch jsadmin drüber geladen. Kannst dir wunderbar deinen Code damit sauber und vailde halten. Inzwischen lagere ich so ziemlich alles an scripten extern aus. Dewegen werden auch ein paar WB Variablen als Javascript Variablen angelegt.

Jaja ist immer so ne Sache mit dem Erklären. Habe dieses Modul zusammen mit DBS getestet und ist eigentlich auch durch seine Gedanken auch erst so in der Art entstanden. Einfach installieren, alles passiert von alleine. Bestimme nur noch im Template, ob es im Head oder Body aufgerufen werden soll, brauche nur noch die jquery_frontend.js mit weiteren plugins und Funktionen zu erweitern und fertig.

Dachte hätte ich auf meinen Seiten auch so erklärt. Werde mir das nochmal anschauen.

Dietmar

[dbs]

auch moin,

dietmar, auf deinen seiten hast du einfach zu viel erklärt.
um verwirrungen zu vermeiden schlug ich dir vor das jquery-api einfach jquery-modul zu nennen.
das wird installiert, dann kommt die eine zeile noch in die index.php und fertig ist man.
um corners zu nutzen würde man dann noch in der neu entstandenen jquery_frontend.js(im template-ordner zu finden) den aufruf einfügen(so wie ich weiter oben postete).

was fehlt ist eigentlich nur, dass solches hinzufügen von neuen dingen vereinfacht wird. also das einfügen von scripten in den jquery-plugins-ordner und die ergänzung in der jquery_frontend.js.

maverik macht es eigentlich nicht viel anders, nur hat er eben viel mehr script-aufrufe im head stehen, aber die werden nicht weniger wenn neues dazu kommt.

dbs