Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Scrat_Black

Checkbox torto

Por , em Desenvolvimento frontend

Recommended Posts

Scrat_Black    0

Scrat_Black
Postado

Olá pessoal sou novato aqui, por isso peço desculpa caso tenha feito o tópico no lugar errado ou algo do gênero.

Pois vamos ao problema.

Eu estou fazendo um sistema onde uso o plugin Niceforms 2.0 somente pra estilizar os campos de checkbox e selects, o problema é que os checkbox e select ficam desalinhados. Eu uso ele linkado a pagina do projeto. meu layout é divido em duas folhas, e eu as chamo por "require_once" nas paginas.OBS> testei numa pagina q o layout não é dividido e o plugin funcionou perfeitamente.

1º parte do layout

<?php

echo '<!DOCTYPE html>
<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <script language="javascript" type="text/javascript" src="JS/niceforms.js"></script>
       <link rel="stylesheet" type="text/css" media="all" href="css/niceforms-default.css" />
       <link type="text/css" rel="stylesheet" href="css/Template.css">
       <link type="text/css" rel="stylesheet" href="css/Internas.css">
       <script type="text/javascript" scr="JS/EventosJs.js"></script>


   </head>
   <body>
       <div class="divGeral"><!--inicio div geral-->
           <div class="divTopo" id="topo"><!-- inicio da dive topo-->
               <h1></h1>
               <p><a href="#"> Sair</a></p>
               <p><a href="#">Logar </a></p>

               <img src="img/LGO3.PNG" alt="topo" />
               <div class="divBusca"><!--inicio da div busca-->
                  <form action="/search" class="right" id="caixaPesquisa" method="post">
                       <input type="text" id="caixaPesquisaBox" value="Procurar" onLoad="caixa()"/>
                       <input class="searchbutton" id="submit-button" type="submit" value="Vai" />
                   </form>
               </div><!--fim da div busca-->
           </div><!-- Fim da dive topo-->
           <div class="divEsquerda" ><!-- inicio da dive esquerda-->
               <div id="divMenu"><!--inicio div menu-->
                   <h3><center>CATEGORIAS</center></h3>
                   <ul>
                       <li><a href="#">BAZAR</a></li>
                       <li><a href="#">CAMPING</a></li>
                       <li><a href="#">ELETRONICOS</a></li>
                       <li><a href="#">FERRAMENTAS</a></li>
                       <li><a href="#">INFORMÁTICA</a></li>
                       <li><a href="#">COLEÇÕES</a></li>
                       <li><a href="#">LIVROS</a></li>
                   </ul>
                   <div>
                       <span id="RedeSocialspan">SIGA-NOS</span>
                   <div id="RedeSocial"><!-- Inicio da div Redes Sociais-->
                       redes sociais :P
                   </div><!-- fim da div Redes Sociais-->
                   </div>
               </div><!--fim div menu-->
           </div><!-- Fim da dive esquerda-->
           <div class="divCentro"><!--inicio da div centro-->
                <div id="divProdutos"><!-- inicio div produtos-->';
?>

Agora vem a parte do formulario 

<!DOCTYPE html>
<html>
   <?php
   require_once 'Template_Topo.php';
   ?>

       <form method="post" action="#" class="niceform">
           <div id="UploadImagen">
               classe imagen  
           </div>
           <div id="Select">
               <span id="">Selecione a categoria que o item pertence </span>
               <select size="1" name="gender" id="gender">
                   <option selected="selected" value="Bazar">Bazar</option>
                   <option>Camping</option>
                   <option>Eletronicos</option>
                   <option>Ferramentas</option>
                   <option>Informatica</option>
                   <option>Coleções</option>
                   <option>Livros</option>
               </select>

               <p><span>Entereçado em  por comprar?</span></p><br>
               <input type="checkbox" id="check1" name="enterecado[]" value="Bazar"/><label for="check1">Bazar<br></label>
               <input type="checkbox" id="check2" name="enterecado[]" value="Camping"/><label for="check2">Camping<br></label>
               <input type="checkbox" id="check3" name="enterecado[]" value="Eletronicos"/><label for="check3">Eletronicos<br></label>
               <input type="checkbox" id="check4" name="enterecado[]" value="Ferramentas"/><label for="check4">Ferramentas<br></label>
               <input type="checkbox" id="check5" name="enterecado[]" value="Informatica"/><label for="check5">Informática<br></label>
               <input type="checkbox" id="check6" name="enterecado[]" value="Coleções"/><label for="check6">Coleções<br></label>
               <input type="checkbox" id="check7" name="enterecado[]" value="Livros"/><label for="check7">Livros<br></label>
               <input type="checkbox" id="check8" name="enterecado[]" value="Outros"/><label for="check8">Outros<br></label>
               <input type="checkbox" id="check9" name="enterecado[]" value="Todos"/><label for="check9">Todos<br></label>
           </div>
           <input type="submit" id="button" value="Publicar Anúncio" />    
           <input type="reset" id="button" value="Cancelar Anúncio" />    

   <?php
   require_once 'Template_Rodape.php';
   ?>
</html>

2º parte do layout

 

 

agora as folhas de estilo e java

1º nice forms

 

/*Defaults Styling*/
body {font:12px/17px Arial, Helvetica, sans-serif; color:#333; background:#ccc; padding:40px 20px 20px 20px;}
fieldset {background:#f2f2e6; padding:10px; border:1px solid #fff; border-color:#fff #666661 #666661 #fff; margin-bottom:36px; width:600px;}
input, textarea, select {font:12px/12px Arial, Helvetica, sans-serif; padding:0;}
fieldset.action {background:#9da2a6; border-color:#e5e5e5 #797c80 #797c80 #e5e5e5; margin-top:-20px;}
legend {background:#bfbf30; color:#fff; font:17px/21px Calibri, Arial, Helvetica, sans-serif; padding:0 10px; margin:-26px 0 0 -11px; font-weight:bold; border:1px solid #fff; border-color:#e5e5c3 #505014 #505014 #e5e5c3;}
label {font-size:11px; font-weight:bold; color:#666;}
label.opt {font-weight:normal;}


/*##########################################
Script: Niceforms 2.0
Theme: StandardBlue
Author: Lucian Slatineanu
URL: http://www.emblematiq.com/
##########################################*/

/*Radio*/
.NFRadio {cursor:pointer; position:absolute; display:block; width:13px; height:13px; border:1px solid transparent; background:url(img/radio.png) no-repeat 0 0; z-index:2;}
/*Checkbox*/
.NFCheck {cursor:pointer; position:absolute; width:12px; height:12px; border:1px solid transparent; background:url('../img/checkbox2.png') no-repeat 0 0; z-index:2;}

/*Selects*/
.NFSelect {height:21px; position:absolute; border:1px solid transparent;}
.NFSelectLeft {float:left; width:3px; height:21px; background:url('../img/select-left.png') no-repeat 0 0; vertical-align:middle;}
.NFSelectRight {height:21px; width:auto; background:url('../img/select-right.png') no-repeat 100% 0; cursor:pointer; font:12px/21px Arial, Helvetica, sans-serif; color:#fff; padding-left:3px; margin-left:3px;}
.NFSelectTarget {position:absolute; background:none; margin-left:-13px; margin-top:18px; z-index:3; left:0; top:0; padding-bottom:13px;}
.NFSelectOptions {position:relative; background:#707175; margin-left:16px; margin-top:0; list-style:none; padding:4px 0; color:#fff; font:11px/13px Arial, Helvetica, sans-serif; z-index:4; max-height:200px; overflow-y:auto; overflow-x:hidden; left:0; top:0;}
.NFSelectOptions li {padding-bottom:1px;}
.NFSelectOptions a {display:block; text-decoration:none; color:#fff; padding:2px 3px; background:none;}
.NFSelectOptions a.NFOptionActive {background:#464646;}
.NFSelectOptions a:hover {background:#333;}

/*Focused*/
.NFfocused {border:1px dotted #666;}
/*Hovered*/
.NFh {background-position:0 100%;}
.NFhr {background-position:100% 100%;}
/*Hidden*/
.NFhidden {opacity:0; z-index:-1; position:relative;}
/*Safari*/
select, input, textarea, button {outline:none; resize:none;}

 

2º o java

 

/*#############################################################
Name: Niceforms
Version: 2.0
Author: Lucian Slatineanu
URL: http://www.emblematiq.com/projects/niceforms/

Feel free to use and modify but please keep this copyright intact.
#################################################################*/

//Theme Variables - edit these to match your theme
var imagesPath = "img/";
var selectRightWidthSimple = 19;
var selectRightWidthScroll = 2;
var selectMaxHeight = 200;
var textareaTopPadding = 10;
var textareaSidePadding = 10;

//Global Variables
var NF = new Array();
var isIE = false;
var resizeTest = 1;

//Initialization function
function NFInit() {
try {
	document.execCommand('BackgroundImageCache', false, true);
} catch(e) {}
if(!document.getElementById) {return false;}
//alert("click me first");
NFDo('start');
}
function NFDo(what) {
var niceforms = document.getElementsByTagName('form');
var identifier = new RegExp('(^| )'+'niceform'+'( |$)');
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) {
	var ieversion=new Number(RegExp.$1);
	if(ieversion < 7) {return false;} //exit script if IE6
	isIE = true;
}
for(var q = 0; q < niceforms.length; q++) {if(identifier.test(niceforms[q].className)) {
	if(what == "start") { //Load Niceforms
		NF[q] = new niceform(niceforms[q]);
		niceforms[q].start();
	}
	else { //Unload Niceforms
		niceforms[q].unload();
		NF[q] = "";
	}
}}
}
function NFFix() {
NFDo('stop');
NFDo('start');
}
function niceform(nf) {
nf._inputText = new Array(); nf._inputRadio = new Array(); nf._inputCheck = new Array(); nf._inputSubmit = new Array(); nf._inputFile = new Array(); nf._textarea = new Array(); nf._select = new Array(); nf._multiselect = new Array();
nf.add_inputText = function(obj) {this._inputText[this._inputText.length] = obj; inputText(obj);}
nf.add_inputRadio = function(obj) {this._inputRadio[this._inputRadio.length] = obj; inputRadio(obj);}
nf.add_inputCheck = function(obj) {this._inputCheck[this._inputCheck.length] = obj; inputCheck(obj);}
nf.add_inputSubmit = function(obj) {this._inputSubmit[this._inputSubmit.length] = obj; inputSubmit(obj);}
nf.add_inputFile = function(obj) {this._inputFile[this._inputFile.length] = obj; inputFile(obj);}
nf.add_textarea = function(obj) {this._textarea[this._textarea.length] = obj; textarea(obj);}
nf.add_select = function(obj) {this._select[this._select.length] = obj; selects(obj);}
nf.add_multiselect = function(obj) {this._multiselect[this._multiselect.length] = obj; multiSelects(obj);}
nf.start = function() {
	//Separate and assign elements
	var allInputs = this.getElementsByTagName('input');
	for(var w = 0; w < allInputs.length; w++) {
		switch(allInputs[w].type) {
			case "text": case "password": {this.add_inputText(allInputs[w]); break;}
			case "radio": {this.add_inputRadio(allInputs[w]); break;}
			case "checkbox": {this.add_inputCheck(allInputs[w]); break;}
			case "submit": case "reset": case "button": {this.add_inputSubmit(allInputs[w]); break;}
			case "file": {this.add_inputFile(allInputs[w]); break;}
		}
	}
	var allButtons = this.getElementsByTagName('button');
	for(var w = 0; w < allButtons.length; w++) {
		this.add_inputSubmit(allButtons[w]);
	}
	var allTextareas = this.getElementsByTagName('textarea');
	for(var w = 0; w < allTextareas.length; w++) {
		this.add_textarea(allTextareas[w]);
	}
	var allSelects = this.getElementsByTagName('select');
	for(var w = 0; w < allSelects.length; w++) {
		if(allSelects[w].size == "1") {this.add_select(allSelects[w]);}
		else {this.add_multiselect(allSelects[w]);}
	}
	//Start
	for(w = 0; w < this._inputText.length; w++) {this._inputText[w].init();}
	for(w = 0; w < this._inputRadio.length; w++) {this._inputRadio[w].init();}
	for(w = 0; w < this._inputCheck.length; w++) {this._inputCheck[w].init();}
	for(w = 0; w < this._inputSubmit.length; w++) {this._inputSubmit[w].init();}
	for(w = 0; w < this._inputFile.length; w++) {this._inputFile[w].init();}
	for(w = 0; w < this._textarea.length; w++) {this._textarea[w].init();}
	for(w = 0; w < this._select.length; w++) {this._select[w].init(w);}
	for(w = 0; w < this._multiselect.length; w++) {this._multiselect[w].init(w);}
}
nf.unload = function() {
	//Stop
	for(w = 0; w < this._inputText.length; w++) {this._inputText[w].unload();}
	for(w = 0; w < this._inputRadio.length; w++) {this._inputRadio[w].unload();}
	for(w = 0; w < this._inputCheck.length; w++) {this._inputCheck[w].unload();}
	for(w = 0; w < this._inputSubmit.length; w++) {this._inputSubmit[w].unload();}
	for(w = 0; w < this._inputFile.length; w++) {this._inputFile[w].unload();}
	for(w = 0; w < this._textarea.length; w++) {this._textarea[w].unload();}
	for(w = 0; w < this._select.length; w++) {this._select[w].unload();}
	for(w = 0; w < this._multiselect.length; w++) {this._multiselect[w].unload();}
}
}
function inputText(el) { //extent Text inputs
el.oldClassName = el.className;
el.left = document.createElement('img');
el.left.src = imagesPath + "0.png";
el.left.className = "NFTextLeft";
el.right = document.createElement('img');
el.right.src = imagesPath + "0.png";
el.right.className = "NFTextRight";
el.dummy = document.createElement('div');
el.dummy.className = "NFTextCenter";
el.onfocus = function() {
	this.dummy.className = "NFTextCenter NFh";
	this.left.className = "NFTextLeft NFh";
	this.right.className = "NFTextRight NFh";
}
el.onblur = function() {
	this.dummy.className = "NFTextCenter";
	this.left.className = "NFTextLeft";
	this.right.className = "NFTextRight";
}
el.init = function() {
	this.parentNode.insertBefore(this.left, this);
	this.parentNode.insertBefore(this.right, this.nextSibling);
	this.dummy.appendChild(this);
	this.right.parentNode.insertBefore(this.dummy, this.right);
	this.className = "NFText";
}
el.unload = function() {
	this.parentNode.parentNode.appendChild(this);
	this.parentNode.removeChild(this.left);
	this.parentNode.removeChild(this.right);
	this.parentNode.removeChild(this.dummy);
	this.className = this.oldClassName;
}
}
function inputRadio(el) { //extent Radio buttons
el.oldClassName = el.className;
el.dummy = document.createElement('div');
if(el.checked) {el.dummy.className = "NFRadio NFh";}
else {el.dummy.className = "NFRadio";}
el.dummy.ref = el;
if(isIE == false) {el.dummy.style.left = findPosX(el) + 'px'; el.dummy.style.top = findPosY(el) + 'px';}
else {el.dummy.style.left = findPosX(el) + 4 + 'px'; el.dummy.style.top = findPosY(el) + 4 + 'px';}
el.dummy.onclick = function() {
	if(!this.ref.checked) {
		var siblings = getInputsByName(this.ref.name);
		for(var q = 0; q < siblings.length; q++) {
			siblings[q].checked = false;
			siblings[q].dummy.className = "NFRadio";
		}
		this.ref.checked = true;
		this.className = "NFRadio NFh";
	}
}
el.onclick = function() {
	if(this.checked) {
		var siblings = getInputsByName(this.name);
		for(var q = 0; q < siblings.length; q++) {
			siblings[q].dummy.className = "NFRadio";
		}
		this.dummy.className = "NFRadio NFh";
	}
}
el.onfocus = function() {this.dummy.className += " NFfocused";}
el.onblur = function() {this.dummy.className = this.dummy.className.replace(/ NFfocused/g, "");}
el.init = function() {
	this.parentNode.insertBefore(this.dummy, this);
	el.className = "NFhidden";
}
el.unload = function() {
	this.parentNode.removeChild(this.dummy);
	this.className = this.oldClassName;
}
}
function inputCheck(el) { //extend Checkboxes
el.oldClassName = el.className;
el.dummy = document.createElement('img');
el.dummy.src = imagesPath + "0.png";
if(el.checked) {el.dummy.className = "NFCheck NFh";}
else {el.dummy.className = "NFCheck";}
el.dummy.ref = el;
if(isIE == false) {el.dummy.style.left = findPosX(el) + 'px'; el.dummy.style.top = findPosY(el) + 'px';}
else {el.dummy.style.left = findPosX(el) + 4 + 'px'; el.dummy.style.top = findPosY(el) + 4 + 'px';}
el.dummy.onclick = function() {
	if(!this.ref.checked) {
		this.ref.checked = true;
		this.className = "NFCheck NFh";
	}
	else {
		this.ref.checked = false;
		this.className = "NFCheck";
	}
}
el.onclick = function() {
	if(this.checked) {this.dummy.className = "NFCheck NFh";}
	else {this.dummy.className = "NFCheck";}
}
el.onfocus = function() {this.dummy.className += " NFfocused";}
el.onblur = function() {this.dummy.className = this.dummy.className.replace(/ NFfocused/g, "");}
el.init = function() {
	this.parentNode.insertBefore(this.dummy, this);
	el.className = "NFhidden";
} 
el.unload = function() {
	this.parentNode.removeChild(this.dummy);
	this.className = this.oldClassName;
}
}
function inputSubmit(el) { //extend Buttons
el.oldClassName = el.className;
el.left = document.createElement('img');
el.left.className = "NFButtonLeft";
el.left.src = imagesPath + "0.png";
el.right = document.createElement('img');
el.right.src = imagesPath + "0.png";
el.right.className = "NFButtonRight";
el.onmouseover = function() {
	this.className = "NFButton NFh";
	this.left.className = "NFButtonLeft NFh";
	this.right.className = "NFButtonRight NFh";
}
el.onmouseout = function() {
	this.className = "NFButton";
	this.left.className = "NFButtonLeft";
	this.right.className = "NFButtonRight";
}
el.init = function() {
	this.parentNode.insertBefore(this.left, this);
	this.parentNode.insertBefore(this.right, this.nextSibling);
	this.className = "NFButton";
}
el.unload = function() {
	this.parentNode.removeChild(this.left);
	this.parentNode.removeChild(this.right);
	this.className = this.oldClassName;
}
}
function inputFile(el) { //extend File inputs
el.oldClassName = el.className;
el.dummy = document.createElement('div');
el.dummy.className = "NFFile";
el.file = document.createElement('div');
el.file.className = "NFFileNew";
el.center = document.createElement('div');
el.center.className = "NFTextCenter";
el.clone = document.createElement('input');
el.clone.type = "text";
el.clone.className = "NFText";
el.clone.ref = el;
el.left = document.createElement('img');
el.left.src = imagesPath + "0.png";
el.left.className = "NFTextLeft";
el.button = document.createElement('img');
el.button.src = imagesPath + "0.png";
el.button.className = "NFFileButton";
el.button.ref = el;
el.button.onclick = function() {this.ref.click();}
el.init = function() {
	var top = this.parentNode;
	if(this.previousSibling) {var where = this.previousSibling;}
	else {var where = top.childNodes[0];}
	top.insertBefore(this.dummy, where);
	this.dummy.appendChild(this);
	this.center.appendChild(this.clone);
	this.file.appendChild(this.center);
	this.file.insertBefore(this.left, this.center);
	this.file.appendChild(this.button);
	this.dummy.appendChild(this.file);
	this.className = "NFhidden";
	this.relatedElement = this.clone;
}
el.unload = function() {
	this.parentNode.parentNode.appendChild(this);
	this.parentNode.removeChild(this.dummy);
	this.className = this.oldClassName;
}
el.onchange = el.onmouseout = function() {this.relatedElement.value = this.value;}
el.onfocus = function() {
	this.left.className = "NFTextLeft NFh";
	this.center.className = "NFTextCenter NFh";
	this.button.className = "NFFileButton NFh";
}
el.onblur = function() {
	this.left.className = "NFTextLeft";
	this.center.className = "NFTextCenter";
	this.button.className = "NFFileButton";
}
el.onselect = function() {
	this.relatedElement.select();
	this.value = '';
}
}
function textarea(el) { //extend Textareas
el.oldClassName = el.className;
el.height = el.offsetHeight - textareaTopPadding;
el.width = el.offsetWidth - textareaSidePadding;
el.topLeft = document.createElement('img');
el.topLeft.src = imagesPath + "0.png";
el.topLeft.className = "NFTextareaTopLeft";
el.topRight = document.createElement('div');
el.topRight.className = "NFTextareaTop";
el.bottomLeft = document.createElement('img');
el.bottomLeft.src = imagesPath + "0.png";
el.bottomLeft.className = "NFTextareaBottomLeft";
el.bottomRight = document.createElement('div');
el.bottomRight.className = "NFTextareaBottom";
el.left = document.createElement('div');
el.left.className = "NFTextareaLeft";
el.right = document.createElement('div');
el.right.className = "NFTextareaRight";
el.init = function() {
	var top = this.parentNode;
	if(this.previousSibling) {var where = this.previousSibling;}
	else {var where = top.childNodes[0];}
	top.insertBefore(el.topRight, where);
	top.insertBefore(el.right, where);
	top.insertBefore(el.bottomRight, where);
	this.topRight.appendChild(this.topLeft);
	this.right.appendChild(this.left);
	this.right.appendChild(this);
	this.bottomRight.appendChild(this.bottomLeft);
	el.style.width = el.topRight.style.width = el.bottomRight.style.width = el.width + 'px';
	el.style.height = el.left.style.height = el.right.style.height = el.height + 'px';
	this.className = "NFTextarea";
}
el.unload = function() {
	this.parentNode.parentNode.appendChild(this);
	this.parentNode.removeChild(this.topRight);
	this.parentNode.removeChild(this.bottomRight);
	this.parentNode.removeChild(this.right);
	this.className = this.oldClassName;
	this.style.width = this.style.height = "";
}
el.onfocus = function() {
	this.topLeft.className = "NFTextareaTopLeft NFh";
	this.topRight.className = "NFTextareaTop NFhr";
	this.left.className = "NFTextareaLeftH";
	this.right.className = "NFTextareaRightH";
	this.bottomLeft.className = "NFTextareaBottomLeft NFh";
	this.bottomRight.className = "NFTextareaBottom NFhr";
}
el.onblur = function() {
	this.topLeft.className = "NFTextareaTopLeft";
	this.topRight.className = "NFTextareaTop";
	this.left.className = "NFTextareaLeft";
	this.right.className = "NFTextareaRight";
	this.bottomLeft.className = "NFTextareaBottomLeft";
	this.bottomRight.className = "NFTextareaBottom";
}
}
function selects(el) { //extend Selects
el.oldClassName = el.className;
el.dummy = document.createElement('div');
el.dummy.className = "NFSelect";
el.dummy.style.width = el.offsetWidth + 'px';
el.dummy.ref = el;
el.left = document.createElement('img');
el.left.src = imagesPath + "0.png";
el.left.className = "NFSelectLeft";
el.right = document.createElement('div');
el.right.className = "NFSelectRight";
el.txt = document.createTextNode(el.options[0].text);
el.bg = document.createElement('div');
el.bg.className = "NFSelectTarget";
el.bg.style.display = "none";
el.opt = document.createElement('ul');
el.opt.className = "NFSelectOptions";
el.dummy.style.left = findPosX(el) + 'px';
el.dummy.style.top = findPosY(el) + 'px';
el.opts = new Array(el.options.length);
el.init = function(pos) {
	this.dummy.appendChild(this.left);
	this.right.appendChild(this.txt);
	this.dummy.appendChild(this.right);
	this.bg.appendChild(this.opt);
	this.dummy.appendChild(this.bg);
	for(var q = 0; q < this.options.length; q++) {
		this.opts[q] = new option(this.options[q], q);
		this.opt.appendChild(this.options[q].li);
		this.options[q].lnk.onclick = function() {
			this._onclick();
			this.ref.dummy.getElementsByTagName('div')[0].innerHTML = this.ref.options[this.pos].text;
			this.ref.options[this.pos].selected = "selected";
			for(var w = 0; w < this.ref.options.length; w++) {this.ref.options[w].lnk.className = "";}
			this.ref.options[this.pos].lnk.className = "NFOptionActive";
		}
	}
	if(this.options.selectedIndex) {
		this.dummy.getElementsByTagName('div')[0].innerHTML = this.options[this.options.selectedIndex].text;
		this.options[this.options.selectedIndex].lnk.className = "NFOptionActive";
	}
	this.dummy.style.zIndex = 999 - pos;
	this.parentNode.insertBefore(this.dummy, this);
	this.className = "NFhidden";
}
el.unload = function() {
	this.parentNode.removeChild(this.dummy);
	this.className = this.oldClassName;
}
el.dummy.onclick = function() {
	var allDivs = document.getElementsByTagName('div'); for(var q = 0; q < allDivs.length; q++) {if((allDivs[q].className == "NFSelectTarget") && (allDivs[q] != this.ref.bg)) {allDivs[q].style.display = "none";}}
	if(this.ref.bg.style.display == "none") {this.ref.bg.style.display = "block";}
	else {this.ref.bg.style.display = "none";}
	if(this.ref.opt.offsetHeight > selectMaxHeight) {
		this.ref.bg.style.width = this.ref.offsetWidth - selectRightWidthScroll + 33 + 'px';
		this.ref.opt.style.width = this.ref.offsetWidth - selectRightWidthScroll + 'px';
	}
	else {
		this.ref.bg.style.width = this.ref.offsetWidth - selectRightWidthSimple + 33 + 'px';
		this.ref.opt.style.width = this.ref.offsetWidth - selectRightWidthSimple + 'px';
	}
}
el.bg.onmouseout = function(e) {
	if (!e) var e = window.event;
	e.cancelBubble = true;
	if (e.stopPropagation) e.stopPropagation();
	var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
	if((reltg.nodeName == 'A') || (reltg.nodeName == 'LI') || (reltg.nodeName == 'UL')) return;
	if((reltg.nodeName == 'DIV') || (reltg.className == 'NFSelectTarget')) return;
	else{this.style.display = "none";}
}
el.dummy.onmouseout = function(e) {
	if (!e) var e = window.event;
	e.cancelBubble = true;
	if (e.stopPropagation) e.stopPropagation();
	var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
	if((reltg.nodeName == 'A') || (reltg.nodeName == 'LI') || (reltg.nodeName == 'UL')) return;
	if((reltg.nodeName == 'DIV') || (reltg.className == 'NFSelectTarget')) return;
	else{this.ref.bg.style.display = "none";}
}
el.onfocus = function() {this.dummy.className += " NFfocused";}
el.onblur = function() {this.dummy.className = this.dummy.className.replace(/ NFfocused/g, "");}
el.onkeydown = function(e) {
	if (!e) var e = window.event;
	var thecode = e.keyCode;
	var active = this.selectedIndex;
	switch(thecode){
		case 40: //down
			if(active < this.options.length - 1) {
				for(var w = 0; w < this.options.length; w++) {this.options[w].lnk.className = "";}
				var newOne = active + 1;
				this.options[newOne].selected = "selected";
				this.options[newOne].lnk.className = "NFOptionActive";
				this.dummy.getElementsByTagName('div')[0].innerHTML = this.options[newOne].text;
			}
			return false;
			break;
		case 38: //up
			if(active > 0) {
				for(var w = 0; w < this.options.length; w++) {this.options[w].lnk.className = "";}
				var newOne = active - 1;
				this.options[newOne].selected = "selected";
				this.options[newOne].lnk.className = "NFOptionActive";
				this.dummy.getElementsByTagName('div')[0].innerHTML = this.options[newOne].text;
			}
			return false;
			break;
		default:
			break;
	}
}
}
function multiSelects(el) { //extend Multiple Selects
el.oldClassName = el.className;
el.height = el.offsetHeight;
el.width = el.offsetWidth;
el.topLeft = document.createElement('img');
el.topLeft.src = imagesPath + "0.png";
el.topLeft.className = "NFMultiSelectTopLeft";
el.topRight = document.createElement('div');
el.topRight.className = "NFMultiSelectTop";
el.bottomLeft = document.createElement('img');
el.bottomLeft.src = imagesPath + "0.png";
el.bottomLeft.className = "NFMultiSelectBottomLeft";
el.bottomRight = document.createElement('div');
el.bottomRight.className = "NFMultiSelectBottom";
el.left = document.createElement('div');
el.left.className = "NFMultiSelectLeft";
el.right = document.createElement('div');
el.right.className = "NFMultiSelectRight";
el.init = function() {
	var top = this.parentNode;
	if(this.previousSibling) {var where = this.previousSibling;}
	else {var where = top.childNodes[0];}
	top.insertBefore(el.topRight, where);
	top.insertBefore(el.right, where);
	top.insertBefore(el.bottomRight, where);
	this.topRight.appendChild(this.topLeft);
	this.right.appendChild(this.left);
	this.right.appendChild(this);
	this.bottomRight.appendChild(this.bottomLeft);
	el.style.width = el.topRight.style.width = el.bottomRight.style.width = el.width + 'px';
	el.style.height = el.left.style.height = el.right.style.height = el.height + 'px';
	el.className = "NFMultiSelect";
}
el.unload = function() {
	this.parentNode.parentNode.appendChild(this);
	this.parentNode.removeChild(this.topRight);
	this.parentNode.removeChild(this.bottomRight);
	this.parentNode.removeChild(this.right);
	this.className = this.oldClassName;
	this.style.width = this.style.height = "";
}
el.onfocus = function() {
	this.topLeft.className = "NFMultiSelectTopLeft NFh";
	this.topRight.className = "NFMultiSelectTop NFhr";
	this.left.className = "NFMultiSelectLeftH";
	this.right.className = "NFMultiSelectRightH";
	this.bottomLeft.className = "NFMultiSelectBottomLeft NFh";
	this.bottomRight.className = "NFMultiSelectBottom NFhr";
}
el.onblur = function() {
	this.topLeft.className = "NFMultiSelectTopLeft";
	this.topRight.className = "NFMultiSelectTop";
	this.left.className = "NFMultiSelectLeft";
	this.right.className = "NFMultiSelectRight";
	this.bottomLeft.className = "NFMultiSelectBottomLeft";
	this.bottomRight.className = "NFMultiSelectBottom";
}
}
function option(el, no) { //extend Options
el.li = document.createElement('li');
el.lnk = document.createElement('a');
el.lnk.href = "javascript:;";
el.lnk.ref = el.parentNode;
el.lnk.pos = no;
el.lnk._onclick = el.onclick || function () {};
el.txt = document.createTextNode(el.text);
el.lnk.appendChild(el.txt);
el.li.appendChild(el.lnk);
}

//Get Position
function findPosY(obj) {
var posTop = 0;
do {posTop += obj.offsetTop;} while (obj = obj.offsetParent);
return posTop;
}
function findPosX(obj) {
var posLeft = 0;
do {posLeft += obj.offsetLeft;} while (obj = obj.offsetParent);
return posLeft;
}
//Get Siblings
function getInputsByName(name) {
var inputs = document.getElementsByTagName("input");
var w = 0; var results = new Array();
for(var q = 0; q < inputs.length; q++) {if(inputs[q].name == name) {results[w] = inputs[q]; ++w;}}
return results;
}

//Add events
var existingLoadEvent = window.onload || function () {};
var existingResizeEvent = window.onresize || function() {};
window.onload = function () {
   existingLoadEvent();
   NFInit();
}
window.onresize = function() {
if(resizeTest != document.documentElement.clientHeight) {
	existingResizeEvent();
	NFFix();
}
resizeTest = document.documentElement.clientHeight;
}

 

 

É isso pessoal espero a ajuda de vocês :lol:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Scrat_Black    0

Scrat_Black
Postado

Obrigado pela resposta Amigo Luiz Felipe, mas não é um simples caso de desalinhamento.. Vou por uma imagem que talvez explique a situação :D

printf.gif

 

 

Alguém já passou por isso ???

Compartilhar este post

Link para o post
Compartilhar em outros sites

MK-Pro    3

MK-Pro
Postado

Obrigado pela resposta Amigo Luiz Felipe, mas não é um simples caso de desalinhamento.. Vou por uma imagem que talvez explique a situação :D

printf.gif

 

 

Alguém já passou por isso ???

Ja tente fazer o codigo des do 0

ai talvez funcione e ultilize mais html do q o css

Compartilhar este post

Link para o post
Compartilhar em outros sites

MK-Pro    3

MK-Pro
Postado

Tentei seguir sua dica MK-Pro mas não consegui obter o resultado, se tiver algum tutorial de como inserir imagen em check box e selects eu agradeço ;)

mas voce refez tudo ou so a parte do check box ?

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito