Blogger posting bug

Asked

Viewed 115 times

0

Well, here’s the thing,

inserir a descrição da imagem aqui

was working perfectly,the javascript functions that I implemented had no problem at all,:

inserir a descrição da imagem aqui

he kind of bugged out, probably because the same download block can’t take up the same space,:

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','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 solve this problem,I think it’s because of the display:inline-block that this is happening, but I have my doubts :S

PS. apparently I just solved one of the code problems,there was a problem in the javascript function when inserting more than two links in the download blocks,,and I added one more parameter for it to receive a keyword/key (hence the algorithm would not need to fetch the elements on the page), but I still could not solve this problem of the block bug

javascript html css

  • Rez, comment on html -> <!-- comentário -->, change this, and put the images you use on some web server, and change the code, so we can help you better :)

  • opa was bad guy, sometimes I think I’m programming in c kkkkk

  • was bad ai bro,actually I took this code was from my sketch that I did on Notepad,so the images were not indexed on a server,but I’ve changed it there

  • inline-block is a horizontal organization.

  • yes I realized that

1 answer

0

Well, I managed to solve the problems of the code, basically the javascript was the most laborious,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','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;
}

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

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.