0

Bem,é o seguinte,eu estava tentando fazer um bloco de download personalizado para os usuarios do meu blog poderem baixar e tudo mais

inserir a descrição da imagem aqui

tava funcionando perfeitamente,as funções javascript que eu implementei não tinham problema nenhum,porém quando eu fui botar mais um bloco de download na postagem,acontenceu essa bizarrice:

inserir a descrição da imagem aqui

ele meio que bugou,provavelmente porque um mesmo bloco de download nao pode ocupar um mesmo espaço,porém eu queria organiza-los de cima para baixo e nao lado a lado,aqui ta o meu codigo,ele é um pouquinho grosso mas relativamente curto:

html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0""http://ww.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>downloads-script</title>
    <link rel="stylesheet" type="text/css" href="css/doc.css" media="all" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script type="text/javascript" src="js/scriptdownloadform.js"></script>
</head>

<body>
    <div class="caixa"><!--caixa e o bloco em si-->
        <img id="tumb" src="https://lh6.googleusercontent.com/0JbjEfvTl5IAEPDxekpqOj7aMq_OHu51KAT7gMup6IAObcb3b5v6fqrCmn8bTsTFWDktB7xofnuYPCA=w1366-h589"></img>
        <div id="texto">
            <p>Titulo</p>
            <p>Epsodio ???</p>
            <p>formato:mkv</p>
            <p>tamanho:300mb</p>
        </div>
    </div>
    <a href="#" id="down" name="post" onmouseover="setoption('http://www.google.com.br','http://www.wikipedia.com.br',0)">Baixar</a><!--botao de download junto com os parametros da funcao set-->
    <div id="op1">
        <img src="https://lh5.googleusercontent.com/ZwdgvGW5o7Kv8JS_ILeMti20el26Ab8wGzkUa7OmHyM1xswkjH2FT7Up8PmVtjmVM17_HEkmBy3-a9I=w1366-h589" style="margin-top:0px;width=70px;height:70px;"></img>
    </div>
    <div id="op2">
        <img src="http://1.bp.blogspot.com/-oLI12AT3nHU/Vcu4HYBF5iI/AAAAAAAACis/BhPT5_Ce6Cg/s1600/uptobox-logo.png" style="margin-top:10px;width=50px;height:50px;"></img>
    </div>
</body>

css

.caixa {//design da caixa de download
    display:inline-block;
    background-color:#FFCC00;
    border:2px solid #000;
    float:left;
    width:410px;
    height:120px;
    border-radius:10px;
    position:absolute;
}

#op1 {//design das opçoes
    margin-top:110px;
    display:inline-block;
    float:left;
    margin-left:25px;
    background-color:#FFCC00;
    border:2px solid #000;
    width:154px;
    height:54px;
    border-radius:10px;

}

#op2 {
    margin-top:110px;
    display:inline-block;
    float:left;
    margin-left:25px;
    background-color:#6600FF;
    border:2px solid #000;
    width:154px;
    height:54px;
    border-radius:10px;
}

#texto {
    display:inline-block;
    float:left;
    font-style:Arial bold 2px;
    font-size:10px;
    font-family:"Comic Sans MS",cursive,sans-serif;
    margin-left:10px;
}

#tumb {//design da tumbnail
    display:inline-block;
    float:left;
    width:180px;
    height:100px;
    border:2px solid #000;
    border-radius:10px;
    margin-left:2px;
    margin-top:2px;
}

#down {//design do botao de download
    display:inline-block;
    float:left;
    position:absolute;
    border-radius:10px;
    background-color:#000;
    width:410px;
    height:20px;
    font-style:Arial bold 2px;
    font-size:15px;
    text-align:center;
    text-decoration:none;
    color:#FFF;
    font-family:"Comic Sans MS",cursive,sans-serif;
    margin-top:110px;
    margin-left:0px;
}

javascript

var op1,op2;
var flag = 0;

function setoption(link1,link2,i){//seta links de download
    var x = document.getElementsByName("post")[i];

    op1 = link1;//armazena dois links em duas variaveis distintas
    op2 = link2;
    if(flag==0){//seta o atributo href no botao de download
        x.setAttribute('href',op1);
    }else{
        x.setAttribute('href',op2);
    }
}

window.onload = function() {
    var btnop1 = document.getElementById("op1");
    var btnop2 = document.getElementById("op2");


    btnop1.onclick = function(){//funcao que troca a opcao de download assim que selecionada
        this.style.backgroundColor = "#ffcc00";
        document.getElementById("op2").style.backgroundColor = "#6600FF"
        flag = 0;
    }

    btnop2.onclick = function(){
        this.style.backgroundColor = "#ffcc00";
        document.getElementById("op1").style.backgroundColor = "#FF3333";
        flag = 1;
    }

}

eu agradeceria quem pudesse me ajudar a resolver esse problema,eu penso que seja por conta do display:inline-block o motivo disto estar acontencendo,porém tenho as minhas dúvidas :S

PS.:aparentemente acabei de resolver um dos problemas do codigo,existia um probleminha na funçao javascript ao inserir mais de dois links nos blocos de download,mas ja resolvi isso adicionando uma tag name pra poder pegar varios botoes de baixar(getElementsByName),e adicionei mais um parâmetro para ele receber um indice/chave(dai o algoritmo não precisaria buscar os elementos na pagina),mas ainda nao consegui resolver esse problema do bug dos blocos

5
  • Rez, comentário em html -> <!-- comentário -->, altere isso, e coloque as imagens que utiliza em algum servidor web, e altere o código, assim conseguimos te ajudar melhor :)
    – David
    Commented 23/03/2017 às 23:20
  • opa foi mal cara,as vezes eu penso que eu to programando em c kkkkk
    – ReZ
    Commented 24/03/2017 às 2:31
  • foi mal ai mano,na verdade eu peguei esse código foi do meu esboço que eu fiz no notepad,por isso as imagens nao estavam indexadas em um server,mas ja alterei isso ai
    – ReZ
    Commented 24/03/2017 às 2:39
  • inline-block é uma organização horizontal.
    – Edilson
    Commented 24/03/2017 às 5:19
  • sim eu percebi isso
    – ReZ
    Commented 24/03/2017 às 16:51

1 Resposta 1

0

Bem,consegui resolver os problemas do código,basicamente o javascript foi o mais trabalhoso,quem tiver o mesmo problema,ta ai

html

<div class="caixa">
<img id="tumb" src="https://lh6.googleusercontent.com/0JbjEfvTl5IAEPDxekpqOj7aMq_OHu51KAT7gMup6IAObcb3b5v6fqrCmn8bTsTFWDktB7xofnuYPCA=w1366-h589" />
<br />
<div id="texto">
<span style="color: white; text-shadow: 2px 0 0 #000 , -2px 0 0 #000 , 0 2px 0 #000 , 0 -2px 0 #000 , 1px 1px #000 , -1px -1px 0 #000 , 1px -1px 0 #000 , -1px 1px 0 #000;">Titulo</span><br />
<span style="color: white; text-shadow: 2px 0 0 #000 , -2px 0 0 #000 , 0 2px 0 #000 , 0 -2px 0 #000 , 1px 1px #000 , -1px -1px 0 #000 , 1px -1px 0 #000 , -1px 1px 0 #000;">Epsodio ???</span><br />
<span style="color: white; text-shadow: 2px 0 0 #000 , -2px 0 0 #000 , 0 2px 0 #000 , 0 -2px 0 #000 , 1px 1px #000 , -1px -1px 0 #000 , 1px -1px 0 #000 , -1px 1px 0 #000;">formato:mkv</span><br />
<span style="color: white; text-shadow: 2px 0 0 #000 , -2px 0 0 #000 , 0 2px 0 #000 , 0 -2px 0 #000 , 1px 1px #000 , -1px -1px 0 #000 , 1px -1px 0 #000 , -1px 1px 0 #000;">tamanho:300mb</span></div>
</div>
<a href="https://www.blogger.com/null" id="down" name="post" onmouseover="setoption('http://www.google.com.br','http://www.wikipedia.com.br',0)">Baixar</a><!--funcao que seta os links e recebe o indice de postagem como parametro-->
<br />
<div id="op1" name="option1" onclick="clickbutton('option1',0)"><!--funcao clickbutton implementada em javascript-->
<img src="https://lh5.googleusercontent.com/ZwdgvGW5o7Kv8JS_ILeMti20el26Ab8wGzkUa7OmHyM1xswkjH2FT7Up8PmVtjmVM17_HEkmBy3-a9I=w1366-h589" style="border: none; height: 70px; margin-top: 0px;" />
</div>
<div id="op2" name="option2" onclick="clickbutton('option2',0)">
<img src="https://1.bp.blogspot.com/-oLI12AT3nHU/Vcu4HYBF5iI/AAAAAAAACis/BhPT5_Ce6Cg/s1600/uptobox-logo.png" style="border: none; height: 50px; margin-top: 10px;" />
</div>

javascript

var op1,op2;
var flag = 0;

function setoption(link1,link2,i){/*funcao recebe 3 parametros,os links e o indice de postagem*/
    var x = document.getElementsByName("post")[i];

    op1 = link1;
    op2 = link2;
    if(flag==0){
        x.setAttribute('href',op1);
    }else{
        x.setAttribute('href',op2);
    }
}

function clickbutton(opt,i){ /*funcao recebe dois parametros a string opt e o indice de postagem*/
    if(opt=="option1"){
        document.getElementsByName('option1')[i].style.backgroundColor= "#ff9900";
        document.getElementsByName('option2')[i].style.backgroundColor = "#6600FF";
        flag = 0;
    }else{
        document.getElementsByName('option2')[i].style.backgroundColor= "#ff9900";
        document.getElementsByName('option1')[i].style.backgroundColor = "#FF3333";
        flag = 1;
    }

}

css

.caixa {
    background-color:#FF9900;
    border:2px solid #000;
    float:left;
    width:410px;
    height:120px;
    border-radius:10px;
    position:absolute;
}

#op1 {
    margin-top:90px;
    margin-left:25px;
    background-color:#FF9900;
    border:2px solid #000;
    width:154px;
    height:54px;
    border-radius:10px;

}

#op2 {
    margin-top:-57px;
    margin-left:200px;
    background-color:#6600FF;
    border:2px solid #000;
    width:154px;
    height:54px;
    border-radius:10px;
}

#texto {
    display:inline-block;
    float:left;
    font-style:Arial bold 2px;
    font-size:10px;
    font-family:"Comic Sans MS",cursive,sans-serif;
    margin-left:10px;
}

#tumb {
    display:inline-block;
    float:left;
    width:180px;
    height:100px;
    border:2px solid #000;
    border-radius:10px;
    margin-left:2px;
    margin-top:2px;
}

#down {
    display:inline-block;
    float:left;
    position:absolute;
    border-radius:10px;
    background-color:#000;
    width:410px;
    height:20px;
    font-style:Arial bold 2px;
    font-size:15px;
    text-align:center;
    text-decoration:none;
    color:#FFF;
    font-family:"Comic Sans MS",cursive,sans-serif;
    margin-top:110px;
    margin-left:0px;
}

dessa forma,o codigo funciona perfeitamente,o grande problema é a estrutura javascript ultilizada aqui,ja que ela necessita do indice de postagem para cada bloco de download que você adicionar,terá que ser mudado necessariamente o index dos links e das opções de download,se alguém possuir uma solução mais otimizada e puder compartilhar fique a vontade :)

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .