Tipo de letra con font-weight: bold

Como desarrollador web sabe, el problema con las fuentes comerciales, que son del diseño corporativo, pero no como fuentes web están disponibles. Popular esto son siempre diferentes formas de sustitución de la imagen. Las desventajas de esto son evidentes:

• N óptima Suchmaschinerkennung
• modificaciones de alta y los gastos administrativos
• El texto no es copiable
• Problema de la accesibilidad

Además de la solución de imágenes que sIFR ser un método conocido. He aquí el texto de un determinado tag HTML se lee y se sustituye por una película Flash con fuente incorporada. bien en teoría, en la práctica muy difícil debido a un esfuerzo de configuración de alta.

Siguiendo el mismo principio funciona en el js-plugin tipo de letra . Sólo que es más práctico de usar.
El siguiente código se une una fuente normal y más tarde describió un tipo de letra en negrita:

  1
 2
 3

 "typeface-0.14.js" ><!-- mce : 0 --></ script > < script src = "mysrcFont.typeface.js" ><!-- mce : 1 --></ script > < script src = "mysrcFontBold.typeface.js" ><!-- mce : 2 --></ script > <SCRIPT Src = "typeface-0.14.js"> <! - MCE: 0 --></ script> src = <script> <! - MCE "mysrcFont.typeface.js": 1 --></ script> <script src = "mysrcFontBold.typeface.js"> <! - MCE: 2 --></ script> 

Para el texto zuzuweißen la fuente adecuada, usted sólo tiene que utilizar la declaración CSS font-family.

  1
 2

  id="text" <div style="font-family: Font;"> mySrc
 ipsolum lorum ...</ div> 

El nombre del atributo en las fuentes utilizadas SYLE se puede leer en cada uno de los archivos js.
Todo esto tiene dos inconvenientes, como se describe en el sitio ya están bien. Problemas de rendimiento con grandes cantidades de texto y estándar CSS Hovereffekte ya no funciona.
Esta se convertirá en un archivo javascript en el Truetype fuente o formato OpenType es un debe existir. No para siempre en estos escritos, la versión en negrita se ha integrado. Con el fin de conseguir un apretón, puede exportar una herramienta de edición de fuentes, sólo la versión en negrita y convertirlos así. Añade una ahora estos dos archivos JS y asigna el tipo de letra negrita en un elemento HTML que un paso, aparte de una salida de error a la consola de Firebug, nada.
La solución es simple. El convertidor de fuente en el sitio web de tipografía integrada también ofrece información sobre tipos de letra por el selector CSS que también se necesita información:

  1
 2
 3
 4
 5
 6
 7
 8

  Texto # (
   mySrc Font , Verdana , Arial ; font-family: fuente mySrc, Verdana, Arial;
 )

 # (BoldFont
   mySrc Boldfont , Verdana , Arial ; font-family: mySrc Boldfont, Verdana, Arial;
   bold ; font-weight: bold;
 ) 

Así que la solución para la incorporación de la normal y negrita es perfecto.

Una alternativa a sIFR Javascript Cufón -
sIFR 3 r436 - problema de desplazamiento en Firefox 3, IE6 / 7

jQuery función de carga - la manera simple Ajax (Parte 1)

La carga de función puede ser simplemente elementos HTML de un archivo en el prospecto actual. Esta función es principalmente para la "importación" de código HTML en el pensamiento y por lo tanto no se corresponde con la típica petición Ajax en el ejemplo es un script PHP acceso, los datos de la base de datos lee y / o se golpee contra otros procesos de servidor.

Esto en cuanto a la primera teoría, la llamada a la función es el siguiente:

  1

  ) . load ( '/someFile #mydiv' ) ; $ ('# SomeElement »). Carga (' / somefile myDiv # '); 

Tan corto de simple. En el elemento con el ID "someElement" divs, todo el contenido de la myDiv "" cargado id. Lo genial es que "myDiv" nada en el documento actual es, pero en el archivo "fichero".
El segundo parámetro, la carga de datos como función también llamados pares de valor clave que pasa.

  1

  ) . load ( 'someFile.php' , { 'param' : 'someValue' } ) ; $ ('# SomeElement »). Carga (' someFile.php ', (' param ':' someValue ')); 

Esto corresponde, sin embargo, ahora parece más a la normal petición Ajax. Este o los pares clave / valor se pasan al script PHP como un post-parámetros. Por supuesto, se pierde la ventaja del ejemplo anterior con otros elementos HTML desde un simple script para obtener DOM. Pero si usted solicita un único directo, sin más transformación se traduciría en un elemento de la inserción, que es una fácil y cómoda opción muy.

La siguiente parte entonces progresó a otras variantes como obtener jQuery Ajax, getJSON, etc ir.

jQuery HowTo: Atravesando

Travesi pertenece a las herramientas básicas, si desea realizar animaciones utilizando jQuery avanzada. He aquí una pequeña guía para encontrar artículos específicos.

¿Qué pasó aquí? Bases, esta estructura HTML:

  1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19

 id="someParent" <div style="border: 1px #ccc"> <div> Padres Niño1 </ div> <div class="move"> Niño2 </ div> child3 <<div> / div> <div puntos class = "no se mueven"> Child4 </ div> </ div> <div id="someWrapper"> <a href="#"> id="testone" Mover todo </ a> <a id = "testtwo" ="#"> href Mover <filtrada / a> </ div> 

El siguiente código JavaScript realiza la animación. Sobre la base de la relación con los métodos de los padres "someWrapper" div seleccionado, selecciona el elemento anterior una anterior con el someParent "y, finalmente, id estar con niños de todos los elementos dentro de" someParent seleccionado.
El id en el ejemplo son orientativas. Los elementos animados a ser exclusivamente en la estructura del DOM encontrado.

código de jQuery para "Mover todos":

  1
 2
 3
 4

  ) . click ( function ( ) { jQuery ("# Testone"). haga clic en (función () (
     ) . parent ( ) . prev ( ) . children ( ) . animate ( { 'paddingLeft' : '20px' } , 200 ) ; jQuery (este). parent (). prev (). niños (). animar (('paddingLeft': '20px '), 200);
      ; return false;
 )); 

Ahora para la versión avanzada. Se basan en la función de jQuery, el filtro y no.
código de jQuery para "Mover filtrada":

  1
 2
 3
 4

 ) . click ( function ( ) { jQuery ( this ) . parent ( ) . prev ( ) . children ( ) . filter ( ".move" ) . not ( ".not" ) . animate ( { 'paddingLeft' : '20px' } , 200 ) ; return false ; } ) ; jQuery ("# testtwo"). haga clic en (función () (jQuery (este). parent (). prev (). niños (). filtro (". movimiento") no. (". no"). animar (( "paddingLeft ': '20px'), 200;) return false;)); 

Sugerencia: anchura botón de ajuste jqTransform

Tan bueno y lo bello plugin jqTransform es, hace iA, pero algunos pequeños problemas. Además de la interpretación diferente de la anchura de los cuadros de texto en FF e IE, también puede establecer la anchura de los botones estándar no poseen el conjunto de CSS.

Si usted quiere hacer esto y no puede encontrar la configuración adecuada, que se pidió un poco de ayuda aquí. Por lo tanto, jqtransform.css al aire libre y en el selector de Z.36 "span span button.jqTransformButton" el ancho de nuevas viviendas en asignar.
Esto puede ser, por ejemplo como sigue:

 1 2 3 4 5 6 7 8 9 10 11 12 13 

 background : transparent url ( img/btn_left.gif ) no-repeat top left ; color : #333 ; padding : 10px 4px 0px 8px ; font-weight : normal ; font-size : 12px ; line-height : 13px ; display : block ; text-decoration : none ; height : 33px ; width : auto ; min-width : 100px ; } botón. span span jqTransformButton (fondo: url (img / btn_left.gif)-parte superior izquierda no repita transparente; color: # 333; padding: 0px 10px 4px 8px; font-weight: normal; font-size: 12px; line-height : 13px; display: block; text-decoration: none; altura: 33px; width: auto; min-width: 100px;) 

Práctica Consejo - Error ancho jqTransform

¿Quién jqTransform utilizado una vez que ya seguramente han encontrado que el Internet Explorer y el navegador Firefox, los campos de texto en un ancho diferente de la pantalla.
Esto se debe a que el atributo de tamaño, aunque no sea en el campo de entrada anclada en IE se tiene en cuenta.

Una solución para este pequeño es el tamaño del atributo en el código js para eliminar el cálculo. Por supuesto, con el resultado de que este atributo se puede ya no se utilizan para este propósito. Lo que yo personalmente no considero tan malo como el mejor de la práctica es uno de los programadores web para definir la configuración de las propiedades superficiales de la CSS.

Ahora la solución:

  1
 2
 3
 4
 5

  / / Z. 107 en el jquery.transform.js
	 $input. attr ( 'size' ) ) { if ($ entrada. atr ('size')) (
		 ( 'size' ) * 10 ; inputSize = $ de entrada. atr ('size') * 10;
		 'width' , inputSize ) ; $ De entrada. Css ('width' inputSize);
	 ) 

Este fragmento de código que puede eliminar simplemente porque lleva a un cálculo erróneo de la anchura de los cuadros de texto. No podía detectar los posibles efectos secundarios no deseados. Si encuentra algo, le agradecería los comentarios.

Praxistip - jqTransform y display: none

Si alguien ha intentado una vez ya con un jqTransform campo de formulario en una de: establecer ninguna pantalla para mostrar los elementos HTML transformado y es probable que los problemas surgidos.
Esto puede ser una solución poco sin tener que cambiar el js en la revisión original, fácil.

En primer lugar, la propiedad de presentación establecidos visible de nuevo

  1
 2
 3
 4
 5
 6

  <form action="some.php" id="myForm" method="POST">
   <div style="display:block" id="status">
      <input value="content" />
   </ Div>
 </ Form>
 </ Div> 

Si la propiedad CSS pantalla a ninguno, que jqTransform fehlenhaften para mostrar incorporado conducen a mí. Para ver este objeto ahora todavía no se puede simplemente añadir el siguiente fragmento de código en el documento "listo" caso de jQuery

  1
 2
 3
 4
 5
 6

  "text/javascript" > <script Type = "text / javascript">
 . ready ( function ( $ ) { jQuery (document). ready (función de ($) (
      / / Algunos código ...

      ) . hide ( 'fast' ) ; jQuery ('# estado "). ocultar (' rápido ');
  )); 

El principio puede estar relacionado con los selectores de jQuery, por supuesto, también se aplica a varios elementos.

IxEdit - jQuery el camino más fácil

Con IxEdit es posible jQuery JS funciones sin necesidad de programar directamente en la marcha en el navegador a la zuzuweißen elementos HTML que desee. En lugar de muchas otras palabras, el vídeo de demostración:

Si quiere probarlo, ¿cómo funciona:

Primero En primer lugar, los archivos necesarios de IxEdit IxEdit Descargar

Segundo El Google Gears, el Firefox Addon Portable Google Gears instalar y reiniciar el navegador

Tercero En la carpeta descomprimida que llamar index.html IxEdit

Ahora usted puede con los elementos HTML existentes como jQuery deseada zuweißen Eventos. La herramienta es ideal para experimentar con diferentes efectos y, en general una mejor idea de las posibilidades de jQuery con el fin de dar.

Después de todo los efectos deseados se integran, la función de implementación del código jQuery observará en la pantalla, donde el documento original se puede copiar en ella.

Fácil o!?

Praxistip elemento de salida del plugin de jQuery Validar: Cambio

El famoso plugin de jQuery para validar campos de formulario a trabajar en la norma Sogut Szenarion con la misma facilidad.

Es más difícil aún cuando múltiples plugins son una forma en que utiliza para sus propios plugins para añadir los elementos DOM. Por ejemplo, jqTransform

Afortunadamente, este plugin ofrece una maravillosa validar esta función, es decir, la colocación de error.
La función es similar a esto:

  1
 2
 3

  ( error , element ) { error. appendTo ( element. TRAVERSINGFUNKTION ) ; } , Colocación de error: function (error, elemento) (error. appendTo (element. TRAVERSINGFUNKTION);) 

Tomemos un formulario:

  1
 2
 3
 4
 5
 6
 7

  <form action="somescript.php" id="form" method="get">
    name="user"> <input
    <label> <label> 
    name="pw"> <input
    <label> <label>
 </ Form>
  <div id="error"> </ div> 

Por defecto, el plugin de validación de una etiqueta etiqueta se inserta después de cada campo de entrada. Si ahora desea que el error a otro organismo para demostrar que puede volver a escribir la función de la siguiente manera:

  1
 2
 3
 4
 5

  ) . validate ( { $ ("# Formulario"). Validar ((
   ( error , element ) { Colocación de error: function (error, elemento) (
      element. next ( ) ) ; error. appendTo (element. siguiente ());
    )   
 )); 

Los mensajes de error que basados en los insumos ahora (elemento) en el próximo elemento DOM, en nuestro caso, la etiqueta de la etiqueta, que se escriben de.
Por supuesto que tenemos con este ejemplo, logra cuando la respuesta de salida del plugin. Este principio se puede aplicar fácilmente a aplicaciones más complejas. ¿Cómo jqTransform ejemplo, se menciona en la entrada al campo se establecen varias divs. El error del plugin Validar se demostrará más adelante (en el plano z) de los campos. Por Travesi a través del árbol DOM puede colocarse en cualquier lugar del mensaje de error.

Formulario de jQuery Plugin - Haga un poco de magia de AJAX fácilmente

El otro día me encontré en un plugin que manera más fácil a los desarrolladores ofrece la oportunidad de aplicar sus formularios basados en AJAX.

Fue co-desarrollado por John Resig , uno de los fundadores de jQuery.

Cuenta con una variedad de funciones, y su fácil aplicación. Basta con escribir un formulario estándar de HTML y luego llamar el plugin con las opciones que desee.
Este podría ser el siguiente:

  1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20

 script type = "text/javascript" src = "path/to/jquery.js" ></ script > < script type = "text/javascript" src = "path/to/form.js" ></ script > < script type = "text/javascript" > $ ( document ) . ready ( function ( ) { // bind 'myForm' and provide a simple callback function $ ( '#myForm' ) . ajaxForm ( function ( ) { alert ( "Formular wurde gesendet!" ) ; } ) ; } ) ; </ script > </ head > < body > < form id = "myForm" action = "comment.php" method = "post" > Name : < input type = "text" name = "name" /> Kommentar : < textarea name = "kommentar" ></ textarea > < input type = "submit" value = "Abschicken" /> </ form > </ body > <script = Tipo de "text <Head> / src = javascript" "path / a / jquery.js"> </ <script> "text tipo script = / src javascript" "path = / a / form.js"> < / <script> de tipo script = "text / javascript"> $ (document) listo (función () (/ / bind "MiFormulario., y asumirá la función de llamada simple $ ('# MiFormulario»). formulario AJAX (función () ( alert ("La forma ha sido enviado <!");));)) / script> </> <body> cabeza <form id = = método de acción "myForm" "comment.php" = Nombre "post">: < input type = "text" name = "nombre"> Comentario /: nombre <textarea "comment"> = </ textarea <input tipo> valor = = "submit" "submit" /> </ form> </ body> 

En este ejemplo se envía el formulario nombre de dos campos y comentar como petición Ajax a la forma de etiqueta en la secuencia de comandos especificado.
Esto es sólo un ejemplo sencillo. Además, existen métodos para Formularberarbeitung como reset, presentará, la preparación manual de una cadena de consulta, etc

El plug-in también tiene algunas opciones. Un extracto de ella:

• objetivo
• url
• éxito
• ...

veterano Ajaxian, estos parámetros deben ser conocidos. Así, y aplicando la siguiente manera:

  1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11

  / / Opción para establecer atributos de los objetos
 { var opciones = ( 
     , objetivo: '# divToUpdate' 
     , url: "comment.php ' 
     ( ) { éxito: la función () ( 
         'Erfolgreich abgeschickt!' ) ; alert ('enviado correctamente'); 
     ) 
 ); 

 / / Opciones Mehthode ajax forma simple como parámetros de la
 ) . ajaxForm ( options ) ; $ ('# MiFormulario »). Ajax forma (opciones); 

Simples pueden ser difíciles de implementar un formulario de Ajax. muy divertido para jugar. Usted puede encontrar toda la cosa en los documentos de Inglés, y en pequeños ejemplos Malsup .

Tutorial - Cierre de jQuery en el acordeón de forma automática

El punto decisivo para la aplicación de esto son los acontecimientos. La jQuery API ofrece un montón de diferentes eventos para el registro de los movimientos del ratón.
En nuestro ejemplo, ahora se asegura de que la División después de dejar el acordeón con el cursor el acordeón última se abre se cierra.

Así, en primer lugar a la estructura HTML

  1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16

 <h2 class="demoHeaders"> Acordeón </ h2>
 id="accordion"> <div
	 <div>
	 <h3> <a href="#"> Primera </ a> </ h3>
		 Lorem ipsum dolor <div> sentarse amet.  Su uso se amet.  Su uso se amet. </ div>
	            </ Div>
	 <div>
		 <h3> <a href="#"> Segundo </ a> </ h3>
		 <div> Phasellus Mattis nibh tincidunt. </ div>
	 </ Div>
	 <div>
		 <h3> <a href="#"> Tercera </ a> </ h3>
		 <div> Nam dui erat, un auctor, quis dignissim. </ div>
	 </ Div>
 </ Div> 

Esta es la estructura estándar de la Accoridons de jQuery UI . El CSS es tomado de la interfaz de usuario CSS marco jQuery .
Este tema puede ser fácilmente intercambiados en principio por una nomenclatura normalizada de los elementos.

Ahora para el código Javascript. Incluye la llamada de Acordeones y el registro de los acontecimientos del ratón.
Queremos Acordeón sólo después de un pequeño retraso del cierre, por lo que se utiliza como setTimout función. Si el usuario innhalb esta vez de nuevo con el cursor se mueve en el acordeón, el tiempo de espera debe ser detenido. Por lo tanto, almacenamos
el objeto de tiempo de espera en un mundial variables Javascript (TObj). La función es este tiempo de espera clearTimeout ahora sin llamar a la función de devolución de llamada termina antes de tiempo.

  1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22

 "text/javascript" > var tObj ; $ ( function ( ) { // simple accordion with special markup $ ( '#accordion' ) . accordion ( { header : 'h3' , active : '.selected' , collapsible : true , autoHeight : false } ) ; $ ( "#accordion" ) . mouseleave ( function ( ) { tObj = setTimeout ( "menu.accordion('activate', active);" , 3000 ) ; } ) ; $ ( "#accordion" ) . mouseenter ( function ( ) { clearTimeout ( tObj ) ; } ) ; } ) ; </ script > <script Type = "text / var javascript"> TObj; $ (función () (/ / Acordeón simple con marcado especial de $ ('# acordeón "). Acordeón ((encabezado:' H3 ', activa:". Seleccionada', plegables: true autoHeight: false)), $ ("# acordeón"). MouseLeave (función () (= TObj setTimeout ("menu.accordion ('active', activo)", 3000 );)), $ ( "# acordeón"). MouseEnter (función () (clearTimeout (TObj );));)) </ script> 

Dado que el acordeón se envuelve en el div con el ID "acordeón", es suficiente para nosotros para completar los eventos también ésta Div.
Se presta a los dos Mousevents al vínculo mediante el operador punto. La funcionalidad es la misma, sin embargo, es menos una operación de DOM en ejecución. Lo que en particular, los bucles claramente perceptible.
Concatenados vio la declaración de la siguiente manera:

  1
 2
 3
 4
 5

	 ) . mouseleave ( function ( ) { tObj = setTimeout ( "menu.accordion('activate', 'active');" , 3000 ) ; } ) . mouseenter ( function ( ) { clearTimeout ( tObj ) ; } ) ; $ ("# Acordeón"). MouseLeave (función () (= TObj setTimeout ("menu.accordion ('active', 'activa');", 3000 );)). MouseEnter (función () (clearTimeout (TObj) ;)); 

Un ejemplo se puede encontrar en nuestra zona de demostraciones .

Y saludos a Fabian Hallstein por su idea ...