Saber em qual página está em javascript

JavaScript

O script é bem simples:

function is_page(page){
	var path = window.location.href;
	return (path.indexOf(page) != -1) ? true : false;
}

E como implementar….??

if (is_page("#!nossos-amigos/")){
console.log("entrou");
}

if (is_page("contato.php")){
console.log("entrou");
}

Boa dica do colega Rafael Carvalho que conseguir adaptar bem com âncoras!

Certo e isso seria útil para?
Bem… se você tem vários scripts em um arquivo só e chama eles em todo o seu site, com essa função você não precisa chamar tudo na página sem usar, só chama quando for realmente naquela página, resolve também o problema (que considero) de criar um arquivo para cada página ou simplesmente, como alguns desenvolvedores fazem… jogar o script na página e pronto!!

Simples e bem útil esse script, abraços!

Agência OFF, desenvolvimento de soluções web para as Agências Digitais

programador javascript em salvador bahia, programador javascript na bahia, front-end salvador bahia, montagem sites salvador bahia

Mostrar a janela do Upload marcada em “Anexadas a este post”

Quando eu estava adaptando o WordPress em um site, como usuário eu fiquei confuso na seguinte tela…

 
Primeiro eu acesso e ai vejo todas as imagens, preciso clicar no combo para aparecer só as imagens do post, pesquisei e achei algumas soluções, só que resolvia isso, e deixar outras coisas com problemas então conseguir resolver com esse script adaptado:
 

<?php
// Mostrar a janela do Upload marcada em "Anexadas a este post"
add_action('admin_footer', 'anexadas_ao_post');
function anexadas_ao_post(){
?>
<style type="text/css">
.attachments-browser .attachments, .attachments-browser .media-toolbar {display: none;}
</style>
<script type="text/javascript">
jQuery(function($){
	var called = 0;
	jQuery(document).on("DOMNodeInserted", function(){
		setTimeout(function(){
			jQuery('[value="uploaded"]').attr( 'selected', true ).parent().trigger('change');
			called = 1;
			jQuery('.attachments-browser .attachments').css({display: 'block'});
		}, 10);
	});
});
</script>
<?php
}
?>

É só adicionar esse código no arquivo functions.php

Espero ter ajudado a galera ai, o script funciona e adicione o setTimeout pois quando se tem muitas imagens demorava de carregar então a função acelera a visualização das imagens na janela

Agência OFF, desenvolvimento de soluções web para as Agências Digitais

programador javascript em salvador bahia, programador javascript na bahia, front-end salvador bahia, montagem sites salvador bahia

jQuery Plugin jTabk

O jTabk é um plugin que criei para auxiliar a animação em Tabs.
Pode utilizar também setas para passar as Tabs, segue abaixo o dois links, com e sem setas.

É bem simples sua utilização, só é preciso seguir umas regras de formatação de classes. Veja o link da aplicação DEMO

Agora veja o link com setas: DEMO

Navegadores: IE7+ / FF4+ / Chrome / Safari / Opera

 

Incluir Javascript:

<script type="text/javascript" src="{seu_diretorio}/jtabk.js"></script>
<script type="text/javascript">
$(function(){
	$("#jtabk").jtabk();
});
</script>

 

API de Referência:

var defaults = {
	arrows: {
				left: "",
				right: ""
			}
};

Defaults

left:
// Usado para chamar a ação de setas para a voltar

right:
// Usado para chamar a ação de setas para a avançar

 

HTML:

</pre>
<div id="jtabk">
<ul id="jtabk-menu">
	<li>Tab 1</li>
	<li>Tab 2</li>
	<li>Tab 3</li>
	<li>Tab 4</li>
</ul>
<div class="jtabk-panel jtabk-active">Conteudo 1</div>
<div class="jtabk-panel">Conteudo 2</div>
<div class="jtabk-panel">Conteudo 3</div>
<div class="jtabk-panel">Conteudo 4</div>
</div>
<pre>

 

O PLUGIN
Pra chamar a função identifique primeiro o ID do Tab que irá ser utilizado.

$("#jtabk").jtabk();

Vamos para as partes obrigatórias do Plugin:
– O ID jtabk-menu e na lista UL e as classes jtabk-panel no corpo da Tab são obrigatórias.
– A classe jtabk-active marca a Tab atual. (É fundamental essa classe no código; você pode colocar ela em qualquer Tab, sendo assim a primeira a ser mostrada.)

USO DAS SETAS
Nos parâmetros você pode colocar ID ou class, no caso foram utlizados IDs, veja exemplo:

$("#jtabk").jtabk({
    arrows: {
    			left: "#left", 
            	right: "#right"
            }
});

Veja o HTML das setas:

<div id="setas">
	<a id="left" href="javascript:;"><img src="imgs/left.png" alt="" /></a>
	<a id="right" href="javascript:;"><img src="imgs/right.png" alt="" /></a>
</div>

 

Segue o Código Completo das Tabs simples: DEMO
Download do código Tab: LINK

Segue o Código Completo das Tabs com Setas: DEMO
Download do código Tab com setas: LINK

DOWNLOAD do jTabk Versão: 1.0
Minified e Uncompressed Code

Agência OFF, desenvolvimento de soluções web para as Agências Digitais

programador javascript em salvador bahia, programador javascript na bahia, front-end salvador bahia, montagem sites salvador bahia

jQuery Plugin Plus Validate

O Plus Validate é Plugin jQuery que valida campos de um modo simples e objetivo.

Segue avaliação: DEMO

Navegadores: IE7+ / FF4+ / Chrome / Safari / Opera

Veja também no site oficial do jQuery:
http://plugins.jquery.com/project/plusvalidate

Com esse plugin você pode validar:
– Se o campo for vazio:
– O mínimo de caracteres para esse campo e colocando uma mensagem de alerta:
– Forçar o usuário a digitar se o campo tem só números:
– Verificar se o E-mail é um endereço eletrônico.

Pra chamar a função identifique primeiro o ID do formulário que irá ser utilizado.

$("#meu_formulario").plusvalidate();

Dentro da função .plusvalidate(); você passa os parâmetros necessario. Vamos ver um exemplo:

$(function(){
    $("#meu_formulario").plusvalidate({
        animation: {
            type : "alert"
        },

        cname: {
            message: "Preencha o campo Nome"
        },

        cemail: {
            message: "Preencha o campo Email",
            required: "email",
            requiredMessage: "Esse campo precisa ter um email eletronico"
        }
    });
});

Segue o HTML

<form id="meu_formulario">
    <p>
        <label>Nome</label>
        <input type="text" name="cname" />
    <p>
        <label>E-Mail</label>
        <input type="text" name="cemail" />
    </p>
    <p>
        <label>Comentário</label>
        <textarea name="comment"></textarea>
    </p>
    <p><input class="submit" type="submit" value="Submit"/></p>
</form>

 

 

DOCUMENTAÇÃO
1. Para adicionar os campos na validação é simples, basta ter o name do campo desejado e colocar na função, separado por vírgula, logo após o animation

cname: {

},
cemail: {

}

O “cname” e o “cemail” seriam os names dos campos “Nome” e “E-mail” do formulário

1.2. Validar se o campo for vazio: use o “message”:

cname: {
	message: "Preencha o campo Nome"
}

1.3. Use o parâmetro “required” para validar um campo, seguido de uma mensagem usando o “requiredMessage”:

cemail: {
    required: "email",
    requiredMessage: "Esse campo precisa ter um email eletronico"
}

OBS: O parâmetro “required” pode validar os sequintes parâmetros:
– email (Verifica se o e-mail é válido)
– number (Verifica se existem só números no campo)
– checkbox (Valida se está marcado um checkbox)
– radio (Valida se está marcado um radio)
– textarea (Valida um Textarea)
– select (Valida se está selecionado algum valor no combo)

Ex 1:

ctermos: {
    required: "checkbox",
    requiredMessage: "Você precisa aceitar os termos para continuar"
}

Ex 2:

cnumero: {
    required: "number",
    requiredMessage: "Esse campo só aceita números"
}

1.4. Existem campos que você pode colocar o o mínimo de caracteres desejados, para isso use o parâmetro “min” seguido da mensagem com o “minMessage”:

clogin: {
    min: 3,
	minMessage: "Esse campo não pode ter menos de 3 caracteres"
}

2. Para colocar um estilo de validação no formulário use o parâmetro animation, que recebe o type com 5 tipos:

2.1. type: “alert”
Ativa um alerta comum na página. O alerta passa campo por campo.
Ex:

animation: {
	type : "alert"
}

2.2. type: “allalert”
Ativa um alerta comum na página dizendo todos os campos que estão faltando preencher e tuas devidas propriedades.

animation: {
	type : "allalert"
}

2.3. type: “star”
Mostra um estrela (asterístico) ao lado do campo dentro de uma TAG span com uma classe chamada plusvalidate-star. Você pode mudar o estilo dessa classe através de um CSS comum, um estilo.

animation: {
	type : "star"
}

2.4. type: “allstar”
Segue o mesmo padrão do type: “star”, porém aparecem todas de vez. Também criam um span com classe e pode ser manipulado.

animation: {
	type : "allstar"
}

2.5. type: “animate”
Cria uma animação de “balanço” nos campos e deixa uma borda sinalizando o alerta. É a única validação que passa outros parâmetros, de cor da borda e de velocidade da animação. Não é obrigatório pois já vem como default a cor “#F00” (vermelho) e velocidade “50
Ex:

animation: {
	type : "animate",
    color: "#369",
    duraction: 100
}

OBS: O duraction seria igual ao jQuery, pode usar acima de 10 para melhor efeito.
OBS: O campo de select não cria efeito e nem marca. (disponíveis agora na versão 1.1) Os campos de checkbox e de radio não marcam, mais criam o efeito.

Segue abaixo um completo: DEMO
Faça o DOWNLOAD do Plugin 1.1.

DOWNLOAD do Plus Validate Versão: 1.1
Minified e Uncompressed Code

DOWNLOAD do Plus Validate Versão: 1.0
Minified e Uncompressed Code

Veja também no site oficial do jQuery:
http://plugins.jquery.com/project/plusvalidate

Navegadores: IE7+ / FF4+ / Chrome / Safari / Opera

Agência OFF, desenvolvimento de soluções web para as Agências Digitais

programador javascript em salvador bahia, programador javascript na bahia, front-end salvador bahia, montagem sites salvador bahia

jQuery Plugin DivBox

Criei esse Plugin jQuery para abrir uma Div como uma Janela Modal.
Para usar o Plugin DivBox é bem simples. Siga os passos abaixo:

Nessa versão, a Janela Modal acompanha o scroll.

Segue o link do DEMO
Veja também no site oficial do jQuery: http://plugins.jquery.com/project/divbox-for-tedk

Navegadores: IE7+ / FF4+ / Chrome / Safari / Opera

 

Incluir Javascript:

<script type="text/javascript" src="{seu_diretorio}/divbox.js"></script>
<script type="text/javascript">
$(function(){
	$("#clicar").click(function(){
		$("#nome_da_div").divbox({
			opacity: 0.9,
			close: '#fechar'
		});
	});
});
</script>

 

API de Referência:

var defaults = {
    color: "#000",
    opacity: 0.8,
    clickBackground: true,
    close: false,
    inClass: class_padrao,
    scrollAnimate: true
};

Defaults

color:
// Para adiconar cor ao fundo da máscara (Hexadecimal/Nome da cor)

opacity:
// Para aumentar a diminuir a opacidade da máscara: (DICA: "de 0.1 a 0.9")

clickBackground:
// Para retirar o link de fechar da máscara, mude o parâmetro (false/true)

inClass:
// O Plugin DivBox já vem com uma div default centralizada, mais você pode otimizar, colocando o estilo de sua div dentro do plugin. Para isso, use uma classe

close:
// Para adicionar uma funcionalidade de fechar a máscara em algum elemento da página, basta passar um ID ou Class do elemento

scrollAnimate:
// Anima de acordo com o scroll da página (true/false)

 

HTML:

<a href="javascript:" id="clicar">Clique aqui para abrir a DIV</a>
<div id="teste">  
	<h2>Minha Div atual.</h2>  
	<br />  
	<a href="javascript:;" id="fechar">Clique aqui para fechar!</a>  
</div>  

 

O PLUGIN
1. Adicione ele a div que precisa do efeito: Esse efeito será acionado assim que a página for carregada.
OBS: A div precisa estar oculta, usando um display: none; no CSS

$(function(){  
    $("#teste").divbox();  
});  

2.5: O Plugin DivBox já vem com uma div default centralizada, mais você pode otimizar, colocando o estilo de sua div dentro do plugin. Para isso, use uma classe como mostra o exemplo:
OBS: você só precisa passar a altura e largura da janela no CSS, exemplo: .div_teste {width: 600px; height: 300px;}

$(function(){  
    $("#teste").divbox({  
        inClass: "div_teste"  
    });  
}); 

Veja o Código completo e o exemplo:

$(function(){  
    $("#clicar").click(function(){
        $("#teste").divbox({  
            color: "#C33",  
            opacity: 0.9,  
            clickBackground: false,  
            close: "#fechar"  
        }); 
    }); 
}); 

 

Segue exemplo: DEMO
Faça o DOWNLOAD do Plugin 1.1.

DOWNLOAD do DivBox Versão: 1.1
Minified e Uncompressed Code

Agência OFF, desenvolvimento de soluções web para as Agências Digitais

programador javascript em salvador bahia, programador javascript na bahia, front-end salvador bahia, montagem sites salvador bahia

Objective-C e Xcode: Google Maps no iPhone e iPad

Olá galera vou mostrar como usar o GoogleMaps em suas aplicações para iPhone/iPad.
Nesse artigo estarei mostrando como usar MapKit.framework nativo do Xcode e também utilizar o Segmented Control.
Estou utilizando a versão do 3.2.6 do Xcode mais creio que com algumas versões anteriores pode funcionar também.
Primeiro vamos criar um projeto utilizando a opção View-based Application e dar o nome de Google Maps.

Clique com o botão direito do mouse em cima da pasta Frameworks e siga para Add > Existing Frameworks. Procure por MapKit.framework, selecione e clique no botão Add. O MapKit.framework irá aparecer dentro da pasta Frameworks

Feito isso, vamos agora criar os métodos necessários para nossa aplicação rodar. Vá até a pasta Class e clique no arquivo Google_MapsViewController.h. É nele que vamos criar nosso diretrizes e principalmente importar o MapKit.framework, vamos seguir o passo-a-passo abaixo.

#import <UIKit/UIKit.h>
#import <MapKit/MapKit.h>

@interface Google_MapsViewController : UIViewController {

    MKMapView *verMapa;

}

@property (nonatomic, retain)IBOutlet MKMapView *controleMapa;

- (IBAction)controleMapa:(id)sender;

@end

Repare que importei a biblioteca e crie um botão controleMapa que sera um Segmented Control e também foi criado a MKMapView, chamada de verMapa.

Reconhecendo todo o ambiente de trabalho do Xcode vamos para a pasta que cor lilas chamada Interface Builder Files e dar duplo click no arquivo Google_MapsViewController.xib, com isso o Interface Builder é aberto e nossa tela de edição fica em evidência.

Em nossa Library vamos arrastar uma Toolbar e retirar o botão default, no lugar do botão retirado vamos arrastar o Segmented Control, ele vêm com dois botões mais vamos colocar três (logo em seguida irei mostrar como editar e colocar os valores dentro dele) que vem e depois arrastar uma Map View e joga ela acima, ficando assim:

Para editar as configurações de um Segmented Control você tem que clicar nele, ir para aba Attributes, onde tem a opção Segments: 2 você troca por 3 e terá um combo com três opções: Segment 0, Segment 1 e Segment 2, abaixo dele existe um campo Title, é nele que você vai editar os valores do campo, veja como ficou na imagem abaixo:

Clique na imagem para ver ela ampliada

Ainda no Interface Builder, clique em File’s Owner e vá em Connections e arraste o verMapa para o MKMap View e o controleMapa para o Segmented Control ficando assim:

Clique na imagem para ver ela ampliada

OBS: quando você arrastar o controleMapa para o Segmented Control ele vai aparecer uma lista de opções, você escolhe a opção Value Changed, pois quando você clicar no Segmented Control ele vai passer os valores 0, 1 e 2 para a funcão controleMapa que já está recebendo o (id)sender.

Salve e feche o Interface Builder e vamos voltar para o Xcode. Volte para a pasta Class e abra o arquivo Google_MapsViewController.m e jogue o seguinte código:

#import "Google_MapsViewController.h"

@implementation Google_MapsViewController

- (IBAction)controleMapa:(id)sender {

    switch (((UISegmentedControl *)sender).selectedSegmentIndex) {
        case 0:
            verMapa.mapType = MKMapTypeStandard;
            break;

        case 1:
            verMapa.mapType = MKMapTypeSatellite;
            break;

        case 2:
            verMapa.mapType = MKMapTypeHybrid;
            break;
    }

}

- (void)dealloc {
    [verMapa dealloc];
    [super dealloc];
}

Repare que usei o UISegmentedControl para pegar o valor atual que foi jogado no Segmented Control e coloquei um switch para ficar mais fácil, cada case tem sua funcionalidade, fechei meu projeto com o [verMapa dealloc]; e vamos ver como ele ficou?

É isso aí, galera, podem perguntar se tiverem dúvidas. Pegue aqui o código completo do projeto.
Abraços e até a próxima.

Agência OFF, desenvolvimento de soluções web para as Agências Digitais

programador javascript em salvador bahia, programador javascript na bahia, front-end salvador bahia, montagem sites salvador bahia

Array Search em JavaScript

Esta função falicita a procura de um valor dentro de um array, como a função nativa do PHP array_search();

Segue a função abaixo:

<script type="text/javascript">
	function array_search(parametro, arr){
		var key = "";
		var strict = "";
	 
		for (key in arr){
			if ((strict &amp;amp;amp;&amp;amp;amp; arr[key] === parametro) || (!strict &amp;amp;amp;&amp;amp;amp; arr[key] == parametro)){
				return parametro;
			}
		}
	
		return false;
	}
</script>

Exemplo de aplicação:

<script type="text/javascript">
	var array_dados = ["Teste 01", "Teste 02", "Teste 03"];
	alert(array_search("Teste 02", array_dados));
</script>

Segue o script completo:

<script type="text/javascript">
// Função.
function array_search(parametro, arr){
    var key = "";
	var strict = "";
 
    for (key in arr){
        if ((strict &amp;amp;amp;&amp;amp;amp; arr[key] === parametro) || (!strict &amp;amp;amp;&amp;amp;amp; arr[key] == parametro)){
			return parametro;
        }
    }

    return false;
}

// Criando o Arrray para teste.
var array_dados = ["Teste 01", "Teste 02", "Teste 03"];

// Aplicando o Teste.
alert(array_search("Teste 02", array_dados));
</script>

Agência OFF, desenvolvimento de soluções web para as Agências Digitais

programador javascript em salvador bahia, programador javascript na bahia, front-end salvador bahia, montagem sites salvador bahia