Blogger post bug

Question

Blogger post bug

Navigation

#1 by (0 votes)

0

Well, it's the following, I was trying to make a custom download block for the users of my blog to download and everything else

Itwasworkingperfectly,thejavascriptfunctionsthatIimplementedhadnoproblem,butwhenIwasputtingonemoredownloadblockinthepost,ithitthatbizarrething:

Itkindofbuggedme,probablybecausethesamedownloadblockcannotoccupyonespace,butIwantedtoorganizethemfromtoptobottomandnotsidebyside,here'smycode,it'salittlebitthickerbutrelativelyshort:

html

<!DOCTYPEhtmlPUBLIC"-//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><scripttype="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><divid="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;
    }

}

I would appreciate anyone who could help me to solve this problem, I think it's because of the display: inline-block the reason this is happening, but I have my doubts: S

PS: I just solved one of the problems of the code, there was a problem in the javascript function when inserting more than two links in the download blocks, but I already solved this by adding a tag name to be able to pick up several download buttons (getElementsByName ), and I added one more parameter for it to receive an index / key (hence the algorithm would not need to fetch the elements on the page), but I still can not solve this block bug problem

javascript html css

asked by anonymous 23.03.2017 / 23:58

1 answer

add information to the database PutExtra in various acitivity

score 0 · Answer 1

Well, I managed to solve the problems of the code, basically the javascript was the most laborious, who has the same problem, ta ai

html

<div class="caixa">
<img id="tumb" src="https://lh6.googleusercontent.com/0JbjEfvTl5IAEPDxekpqOj7aMq_OHu51KAT7gMup6IAObcb3b5v6fqrCmn8bTsTFWDktB7xofnuYPCA=w1366-h589"/><br/><divid="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;
}

In this way, the code works perfectly, the big problem is the javascript structure used here, since it needs the posting index for each download block that you add, it will have to be changed necessarily the index of the links and the options If someone has a more optimized solution and you can share, feel free to:)