Integrazione adfly nel forum come plugin tinypic
Inviato: 19/12/2013, 9:56
Ciao a tutti, dopo uno scambio d'idee con i ragazzi di adfly volevo integrare nella board il servizio in modo similare al plugin di tinypic (di seguito due screen fatti con photoshop).
http://i44.tinypic.com/ws21kx.png
http://i43.tinypic.com/2hx3yfc.png
L'amministratore del sito mi ha detto che lo posso fare, ma che lui non può fare nulla e non fornirà un plugin ufficiale.
a questo punto sono andato su gli strumenti d'amministrazione del browser e ho iniziato a guardare il codice del sito...
Questo è l'html che riguarda il campo in cui si inserisce il link, il bottone di shrink e il campo in cui dovrebbe apparire il nuovo link:
Mentre questo dovrebbe essere il css (più o meno)
Premesso questo cosa mi manca...?
Come faccio ad aggiungere la possibilità di fare aprire e chiudere il tutto con un bottone?
Grazie in anticipo a chi mi aiuterà
http://i44.tinypic.com/ws21kx.png
http://i43.tinypic.com/2hx3yfc.png
L'amministratore del sito mi ha detto che lo posso fare, ma che lui non può fare nulla e non fornirà un plugin ufficiale.
a questo punto sono andato su gli strumenti d'amministrazione del browser e ho iniziato a guardare il codice del sito...
Questo è l'html che riguarda il campo in cui si inserisce il link, il bottone di shrink e il campo in cui dovrebbe apparire il nuovo link:
Codice: Seleziona tutto
<section class="shorten">
<form id="shrink" onsubmit="return false;" pmbx_context="0CD69E50-A67F-4C22-A0E1-29074D4F2020">
<input id="shrink_link" name="shrink_link" placeholder="http://" pmbx_context="7478EBA2-7CD5-4BEC-870E-CF0904C2ED5E">
<span id="loading_spinner"><div class="spinner" aria-role="progressbar" style="position: relative; z-index: 2000000000; left: 0px; top: 0px;"><div style="position: absolute; top: -1px; opacity: 0.25; -webkit-animation: opacity-60-25-0-12 0.8333333333333334s linear infinite;"><div style="position: absolute; width: 9px; height: 3px; background-color: rgb(51, 51, 51); box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px; -webkit-transform-origin: 0% 50%; -webkit-transform: rotate(0deg) translate(6px, 0px); border-top-left-radius: 1px; border-top-right-radius: 1px; border-bottom-right-radius: 1px; border-bottom-left-radius: 1px; background-position: initial initial; background-repeat: initial initial;"></div></div><div style="position: absolute; top: -1px; opacity: 0.25; -webkit-animation: opacity-60-25-1-12 0.8333333333333334s linear infinite;"><div style="position: absolute; width: 9px; height: 3px; background-color: rgb(51, 51, 51); box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px; -webkit-transform-origin: 0% 50%; -webkit-transform: rotate(30deg) translate(6px, 0px); border-top-left-radius: 1px; border-top-right-radius: 1px; border-bottom-right-radius: 1px; border-bottom-left-radius: 1px; background-position: initial initial; background-repeat: initial initial;"></div></div><div style="position: absolute; top: -1px; opacity: 0.25; -webkit-animation: opacity-60-25-2-12 0.8333333333333334s linear infinite;"><div style="position: absolute; width: 9px; height: 3px; background-color: rgb(51, 51, 51); box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px; -webkit-transform-origin: 0% 50%; -webkit-transform: rotate(60deg) translate(6px, 0px); border-top-left-radius: 1px; border-top-right-radius: 1px; border-bottom-right-radius: 1px; border-bottom-left-radius: 1px; background-position: initial initial; background-repeat: initial initial;"></div></div><div style="position: absolute; top: -1px; opacity: 0.25; -webkit-animation: opacity-60-25-3-12 0.8333333333333334s linear infinite;"><div style="position: absolute; width: 9px; height: 3px; background-color: rgb(51, 51, 51); box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px; -webkit-transform-origin: 0% 50%; -webkit-transform: rotate(90deg) translate(6px, 0px); border-top-left-radius: 1px; border-top-right-radius: 1px; border-bottom-right-radius: 1px; border-bottom-left-radius: 1px; background-position: initial initial; background-repeat: initial initial;"></div></div><div style="position: absolute; top: -1px; opacity: 0.25; -webkit-animation: opacity-60-25-4-12 0.8333333333333334s linear infinite;"><div style="position: absolute; width: 9px; height: 3px; background-color: rgb(51, 51, 51); box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px; -webkit-transform-origin: 0% 50%; -webkit-transform: rotate(120deg) translate(6px, 0px); border-top-left-radius: 1px; border-top-right-radius: 1px; border-bottom-right-radius: 1px; border-bottom-left-radius: 1px; background-position: initial initial; background-repeat: initial initial;"></div></div><div style="position: absolute; top: -1px; opacity: 0.25; -webkit-animation: opacity-60-25-5-12 0.8333333333333334s linear infinite;"><div style="position: absolute; width: 9px; height: 3px; background-color: rgb(51, 51, 51); box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px; -webkit-transform-origin: 0% 50%; -webkit-transform: rotate(150deg) translate(6px, 0px); border-top-left-radius: 1px; border-top-right-radius: 1px; border-bottom-right-radius: 1px; border-bottom-left-radius: 1px; background-position: initial initial; background-repeat: initial initial;"></div></div><div style="position: absolute; top: -1px; opacity: 0.25; -webkit-animation: opacity-60-25-6-12 0.8333333333333334s linear infinite;"><div style="position: absolute; width: 9px; height: 3px; background-color: rgb(51, 51, 51); box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px; -webkit-transform-origin: 0% 50%; -webkit-transform: rotate(180deg) translate(6px, 0px); border-top-left-radius: 1px; border-top-right-radius: 1px; border-bottom-right-radius: 1px; border-bottom-left-radius: 1px; background-position: initial initial; background-repeat: initial initial;"></div></div><div style="position: absolute; top: -1px; opacity: 0.25; -webkit-animation: opacity-60-25-7-12 0.8333333333333334s linear infinite;"><div style="position: absolute; width: 9px; height: 3px; background-color: rgb(51, 51, 51); box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px; -webkit-transform-origin: 0% 50%; -webkit-transform: rotate(210deg) translate(6px, 0px); border-top-left-radius: 1px; border-top-right-radius: 1px; border-bottom-right-radius: 1px; border-bottom-left-radius: 1px; background-position: initial initial; background-repeat: initial initial;"></div></div><div style="position: absolute; top: -1px; opacity: 0.25; -webkit-animation: opacity-60-25-8-12 0.8333333333333334s linear infinite;"><div style="position: absolute; width: 9px; height: 3px; background-color: rgb(51, 51, 51); box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px; -webkit-transform-origin: 0% 50%; -webkit-transform: rotate(240deg) translate(6px, 0px); border-top-left-radius: 1px; border-top-right-radius: 1px; border-bottom-right-radius: 1px; border-bottom-left-radius: 1px; background-position: initial initial; background-repeat: initial initial;"></div></div><div style="position: absolute; top: -1px; opacity: 0.25; -webkit-animation: opacity-60-25-9-12 0.8333333333333334s linear infinite;"><div style="position: absolute; width: 9px; height: 3px; background-color: rgb(51, 51, 51); box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px; -webkit-transform-origin: 0% 50%; -webkit-transform: rotate(270deg) translate(6px, 0px); border-top-left-radius: 1px; border-top-right-radius: 1px; border-bottom-right-radius: 1px; border-bottom-left-radius: 1px; background-position: initial initial; background-repeat: initial initial;"></div></div><div style="position: absolute; top: -1px; opacity: 0.25; -webkit-animation: opacity-60-25-10-12 0.8333333333333334s linear infinite;"><div style="position: absolute; width: 9px; height: 3px; background-color: rgb(51, 51, 51); box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px; -webkit-transform-origin: 0% 50%; -webkit-transform: rotate(300deg) translate(6px, 0px); border-top-left-radius: 1px; border-top-right-radius: 1px; border-bottom-right-radius: 1px; border-bottom-left-radius: 1px; background-position: initial initial; background-repeat: initial initial;"></div></div><div style="position: absolute; top: -1px; opacity: 0.25; -webkit-animation: opacity-60-25-11-12 0.8333333333333334s linear infinite;"><div style="position: absolute; width: 9px; height: 3px; background-color: rgb(51, 51, 51); box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px; -webkit-transform-origin: 0% 50%; -webkit-transform: rotate(330deg) translate(6px, 0px); border-top-left-radius: 1px; border-top-right-radius: 1px; border-bottom-right-radius: 1px; border-bottom-left-radius: 1px; background-position: initial initial; background-repeat: initial initial;"></div></div></div></span>
<button class="blueButton2" id="shrink_another" onclick="return false;"><span></span>Do Another!</button>
<button class="blueButton2" id="shrink_submit" type="submit" onclick="return false;"><span></span>Shrink!</button>
<button class="blueButton2" id="shrink_copy" onclick="return false;"><span></span>Copy</button>
<div id="more-options">
<div class="line">
<label>Domain:</label>
<select id="domain" name="domain" class="chzn-select chzn-done" style="display: none;"><option value="1" selected="selected">adf.ly</option><option value="12">j.gs</option><option value="20">q.gs</option></select><div id="domain_chzn" class="chzn-container chzn-container-single" style="width: 280px;"><a href="javascript:void(0)" class="chzn-single"><span>adf.ly</span><div><b></b></div></a><div class="chzn-drop" style="left: -9000px; width: 278px; top: 0px;"><div class="chzn-search" style=""><input type="text" autocomplete="off" style="width: 243px;" pmbx_context="1C683CCD-A8FE-4D0C-BE46-25840DBE3392"></div><ul class="chzn-results"><li id="domain_chzn_o_0" class="active-result result-selected" style="">adf.ly</li><li id="domain_chzn_o_1" class="active-result" style="">j.gs</li><li id="domain_chzn_o_2" class="active-result" style="">q.gs</li></ul></div></div> </div>
<div class="line">
<label>Advertising Type:</label>
<select class="chzn-select chzn-done" id="advert_type" name="advert_type" style="display: none;">
<option value="1">Interstitial Advertisement ($$$$$)</option>
<option value="3">Framed Banner ($$$)</option>
<option value="2">No Advert</option>
</select><div id="advert_type_chzn" class="chzn-container chzn-container-single" style="width: 280px;"><a href="javascript:void(0)" class="chzn-single"><span>Interstitial Advertisement ($$$$$)</span><div><b></b></div></a><div class="chzn-drop" style="left: -9000px; width: 278px; top: 0px;"><div class="chzn-search" style=""><input type="text" autocomplete="off" style="width: 243px;" pmbx_context="10552E95-85AF-43E9-8A2D-612BE3AAED67"></div><ul class="chzn-results"><li id="advert_type_chzn_o_0" class="active-result result-selected" style="">Interstitial Advertisement ($$$$$)</li><li id="advert_type_chzn_o_1" class="active-result" style="">Framed Banner ($$$)</li><li id="advert_type_chzn_o_2" class="active-result" style="">No Advert</li></ul></div></div>
</div>
<div class="line">
<label>Custom Name:</label>
<input id="custom_name" name="custom_name" pmbx_context="375BB33B-7F85-45F8-863F-73605BA8B5EC">
</div>
<div class="line">
<label>Folder:</label>
<select id="group" name="group" class="chzn-select chzn-done" style="display: none;"><option value="0">Default</option></select><div id="group_chzn" class="chzn-container chzn-container-single" style="width: 280px;"><a href="javascript:void(0)" class="chzn-single"><span>Default</span><div><b></b></div></a><div class="chzn-drop" style="left: -9000px; width: 278px; top: 0px;"><div class="chzn-search" style=""><input type="text" autocomplete="off" style="width: 243px;" pmbx_context="0A32E319-5B7F-4AD3-9D35-B48974428720"></div><ul class="chzn-results"><li id="group_chzn_o_0" class="active-result result-selected" style="">Default</li></ul></div></div> </div>
</div>
</form>
<nav>
<div class="button options" id="view-more">View more options</div>
</nav>
</section>Mentre questo dovrebbe essere il css (più o meno)
Codice: Seleziona tutto
element.style {
}
toolsmedia="screen"
section.page>.container section.bar section.shorten {
position: relative;
float: left;
width: 630px;
height: 112px;
background: url("../image/shorten_bg.png") 400px 64px no-repeat;
}
toolsmedia="screen"
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
display: block;
}
user agent stylesheetarticle, aside, footer, header, hgroup, main, nav, section {
display: block;
}
Pseudo element
toolsmedia="screen"
::selection {
background: #3c7298;
}
toolsmedia="screen"
::selection {
background: #fe57a1;
color: #fff;
text-shadow: none;
}
Inherited from body.en_GB.webkit.webkit537
toolsmedia="screen"
body {
font-family: Arial,sans-serif;
}
toolsmedia="screen"
body, button, input, select, textarea {
font-family: sans-serif;
color: #222;
}
toolsmedia="screen"
body {
font-size: 13px;
line-height: 1.231;
}
Inherited from html.js.flexbox.canvas.canvastext.webgl.no-touch.geolocation.postmessage.websqldatabase.indexeddb.hashchange.history.draganddrop.websockets.rgba.hsla.multiplebgs.backgroundsize.borderimage.borderradius.boxshadow.textshadow.opacity.cssanimations.csscolumns.cssgradients.cssreflections.csstransforms.csstransforms3d.csstransitions.fontface.generatedcontent.video.audio.localstorage.sessionstorage.webworkers.applicationcache.svg.inlinesvg.smil.svgclippaths
toolsmedia="screen"
html {
font-size: 100%;
}Come faccio ad aggiungere la possibilità di fare aprire e chiudere il tutto con un bottone?
Grazie in anticipo a chi mi aiuterà