JQuery - Snippets

2012-04-13T09:33:18Z

178.2.222.209: /* Links */

Nützliche jQuery Schnipsel
== Links ==
http://css-tricks.com/snippets/jquery/
=== jQuery Countdown Scripts ===
http://www.tripwiremagazine.com/2012/01/jquery-countdown-scripts.html

== Formulare ==
=== Fokus auf erstes Input-Feld im Formular setzen ===
// focus on the first text input field on the page
$("input[type='text']:first", document.forms[0]).focus();

== Browser ==
=== Resize des Browserfensters feststellen ===
<pre>
<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){

//If the User resizes the window, adjust the #container height
$(window).bind("resize", resizeWindow);
function resizeWindow( e ) {
var newWindowHeight = $(window).height();
$("#container").css("min-height", newWindowHeight );
}

});
</script>

</pre>

== Templates - Vorlagen ==
=== XHTML 1.0 Template mit jQuery ===
<pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Title goes here » Site title here</title>


<base href="" />
<meta name="author" content="#" />
<meta name="description" content="#" />
<meta name="copyright" content="#" />
<meta name="robots" content="#" />
<meta name="generator" content="#" />
<meta name="keywords" content="#" />
<meta http-equiv="expires" content="#" />
<meta http-equiv="cache-control" content="#" />


<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />


<script type="text/javascript">
/*<![CDATA[*/
// add 'js' class to root element to nicely allow css that degrades gracefully if js is disabled
document.getElementsByTagName('html')[0].className = 'js';
/*]]>*/
</script>


<link rel="stylesheet" href="/stylesheets/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="/stylesheets/print.css" type="text/css" media="print" />



</head>
<body>
<div id="container">

<div id="header">
<h1>Title of page goes here</h1>
<h2>Subtitle of page goes here</h2>
</div>

<div id="nav">
<ul class="menu">
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
<li><a href="#">Link #3</a></li>
</ul>
<ul class="breadcrumbs">
<li><a href="#">Home</a></li>
<li><a href="#">Sub directory</a></li>
<li><a href="#">Current page</a></li>
</ul>
</div>

<div id="main">
<ul class="sidebar">
<li><a href="#">Sidebar link #1</a></li>
<li><a href="#">Sidebar link #2</a></li>
</ul>

<div id="sub1">
<h3>Title of content</h3>
<p>Begin content here</p>
</div>

<div id="sub2" class="hide">
<h3>Title of content</h3>
<p>Begin content here</p>
</div>
</div>

<div id="footer">
<p>©2XXX company name here. Creative Commons link, your own link, validation, etc.</p>
</div>

</div>

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



</body>
</html>
</pre>
== JavaScript nachladen während die Seite schon angezeigt wird ==
<pre>
// Add this onDocumentReady function to the end of the jQuery.js file.
// It MUST be in the jquery file to work correctly.
$(function(){
var scripts = /\?(.*)/, files = [], path = /^.*\//, loaded = 0, count = 0;

$('script').each(function(){
var src = $(this).attr('src');
if (!scripts.test(src)) return;
var pathto = src.match(path);
files = files.concat($.map(src.match(scripts).pop().split(','), function(e,i){
return pathto+e+'.js'
}));
})

count = files.length;

$.each(files, function(){
$.getScript(this, function(){
loaded++;
if(loaded == count && typeof onBackload == 'function')
onBackload(loaded)
})
})
});

/**
* If you have the following script tags:
* <script src="/path/to/jquery.min.js?somefile,otherfile.min,thirdfile"></script>
* <script src="/other/path/foo.js?different.file,final.file"></script>
* This script will "backload" the following files:
* /path/to/somefile.js
* /path/to/otherfile.min.js
* /path/to/thirdfile.js
* /other/path/different.file.js
* /other/path/final.file.js
*/

// And if you declare a function named "onBackload", it will be fired when all the scripts are loaded
// This is handy for getting things going once you're confident your scripts have all been included.
function onBackload(loaded){
alert('All ' + loaded + ' files backloaded!')
}
</pre>

== DOM Manipulation ==
=== Einfaches Rollover Hide Show Skript ===
<pre>
<script type="text/javascript">
/*<![CDATA[*/

/*]]>*/
</script>
</pre>

Siehe auch: [[Media:Maphilight-sample01.zip]]‎

===Append Site Overlay DIV===

Quelle: http://css-tricks.com/snippets/jquery/append-site-overlay-div/ (11/2011)

<pre>
$(function() {

var docHeight = $(document).height();

$("body").append("<div id='overlay'></div>");

$("#overlay")
.height(docHeight)
.css({
'opacity' : 0.4,
'position': 'absolute',
'top': 0,
'left': 0,
'background-color': 'black',
'width': '100%',
'z-index': 5000
});

});
</pre>
=== jQuery - overlay, modal box, lightbox, tooltips ===
Infos über die verschiedenen Möglichkeiten und die Unterschiede (Todo)

Beispiele:

Diensthandy-Dekra

2012-04-13T05:30:50Z

178.2.222.209: /* Session BUG: */

== Serverdaten==

Produktionsserver
************
diensthandy.dekra.com

ssh und scp
schlegel und bubnov und mark

/var/www/diensthandy.dekra.com/data

Datenbank (vorläufig)
d
GRANT ALL ON diensthandy.*
TO 'diensthandyadm'@'localhost'
IDENTIFIED BY '********';

Entwicklungsserver
*********

Vorläufiger Server bei geo-bit

LDAP

Testserver LDAP

LDAT-ITU: *****
LDAP-Prod: *****
das Passwort für den LDAP-User lautet.
*******

der BASE DN für Gruppenabfragen lautet:
cn=bestellberechtigte,ou=diensthandy,ou=groups,dc=com

Bemerkungen:
der LDAP Zugang wurde erstmal nur für die ITU konfiguriert.

Host: ******
Port: *****
User: cn=dhandy,ou=administration,dc=com
BASE DN: ou=personen,ou=dekra,dc=com

Das Ergebnis sieht dann ungefähr so aus.

dn: uid=A32888,ou=personen,ou=dekra,dc=com
objectClass: top
objectClass: person
objectClass: organizationalPerson
objectClass: inetOrgPerson
objectClass: dekraPerson
objectClass: dekraHrPerson
sn:Max
givenName: Muster
uid: A32888
mail: sadfasda

ping ***** -> *****

ping **** -> ****

Definition Zugriff LDAP
A120458
Benutzer: A120458
Vorname: Geo
Nachname: Bit
E-Mail: adasd@geo-bit.de
Passwort: Geo****
Profil: cn= bestellberechtigte ,ou= diensthandy ,ou=groups,dc=com

LDAP Zugang Test:
$ldap_host = '***';
$ldap_port = ***;
$ldap_user = 'cn=dhandy,ou=administration,dc=com'; // entspricht $ldap_base_dn
$ldap_pass = '****';

Test z.B. mit :
http://****/ldap.php?uid=A32888&passwd=Dekra2011

Mit Diensthandy-Berechtigung sind:
- A120458 (Ihr Geo-Bit User mit Ihrem Passwort und Umlauten im Namen,
E-Mails werden an diensthandy@geo-bit.de versand)
- A32888 (Steven Buehner, PW: Dekra2011, E-Mails werden an mich versand)

Ohne Diensthandy-Berechtigung:
- A32889 (Semir Saric, PW: Dekra2011)

Das Passwort für den User A32888 im Test-LDAP lässt sich über diese
Webseite ändern:
https://****/auth/login/PWSS.jsf

(Vermutlich nur über das Dekra-Netz erreichbar ... Sie sollten ggf. prüfen
ob Sie den richtigen VPN-Tunnel / Proxy, etc eingetragen haben)
Der LDAP Zugang für die Produktion lautet:

==Modifications:==

gm_javascript.js.php im includes Verzeichnis
//JQ
include_once(DIR_FS_CATALOG.'gm/javascript/jquery/jquery.js');
auskommentiert und im Header eingebunden über
templates/EyeCandy/general.js.php
Dazu den jQuery Ordner in das Templateverzeichnis kopiert.

Sicherung und Backup
Backupstrategie, wie wird eingespielt

Synchronisierungsskript

====Session BUG:====
Vertauschen der Session von unterschiedlichen Usern

Aus dem Gambio-Forum:
Hallo,

ich habe mal einen Blick auf deinen Shop geworfen und festgestellt, dass dein Server die Session-ID untypisch aufbaut (keine 32, sondern nur 26 Zeichen und sogar Buchstaben von a-z sind möglich). Daher greift bei dir keine Sicherheitsfunktion in der includes/Smarty_2.6.14/plugins/outputfilter.note.php, die vorsichtshalber nochmals die Sessions-IDs im erzeugten HTML-Code filtert. Im Anhang findest du ein Update der Datei.

EDIT: Habe den Anhang nochmals überarbeitet.

Angehängte Dateien

Dateityp: php outputfilter.note.php‎ (2,4 KB, 4x aufgerufen)

'''Bemerkung Steff'''

Die Länge hängt von der php Einstellung session.hash_bits_per_character ab (4,5 oder6) - je mehr Bits desto kürzer der Schlüssel.

Mögliche Werte sind '4' (0-9, a-f), '5' (0-9, a-v) und '6' (0-9, a-z, A-Z, "-", ","). Der erwähnte Filter muß dazu passen.

====Exporter und Bestellungen in DB speichern ====
1. DB Erweiterung:

ALTER TABLE `orders_mod` ADD `hw0` VARCHAR( 150 ) NOT NULL ,
ADD `hw1` VARCHAR( 150 ) NOT NULL ,
ADD `hw2` VARCHAR( 150 ) NOT NULL ,
ADD `hw3` VARCHAR( 150 ) NOT NULL ,
ADD `hw4` VARCHAR( 150 ) NOT NULL ,
ADD `hw5` VARCHAR( 150 ) NOT NULL ,
ADD `hw6` VARCHAR( 150 ) NOT NULL

2. SHOP ERWEITERUNG / ÄNDERUNG
checkout_process.php - MOD
checkout_process_mod.php - NEW

3. EXPORT ERWEITERUNG / ÄNDERUNG
export_csv_new.php - NEW

Wikizone - Benutzerbeiträge [de]

JQuery - Snippets

Diensthandy-Dekra