I want to disable tooltips exclusively for videos on a Tumblr blog (https://testblognew.tumblr.com/), that is, I'd like no tooltip to appear when hovering over videos on the blog, but for a tooltip to remain over titled links.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script><script>
(function($){
$(document).ready(function(){
$("a[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:75,
tip_fade_speed:50,
attribute:"title"
});
});
})(jQuery);
</script>
#s-m-t-tooltip {
}
.ui-tooltip {
position:absolute;
z-index:9999;
padding-top:15px;
}
.ui-tooltip-content {
background:{color:background};
width:300px;
margin-left: -150px;
text-align:center;
font-size:.9em;
text-transform: none;
letter-spacing:1px;
padding:2px 5px;
}
Full blog code:
<!--
theme: midnight v2
- sorrism -
-->
<head>
<link rel="shortcut icon" href="{favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<!--Default Variables-->
<meta name="color:Background" content="#ffffff"/>
<meta name="color:Text" content="#cccccc"/>
<meta name="color:Link" content="#a7a7a7"/>
<meta name="color:Link Hover" content="#000000"/>
<meta name="color:Title" content="#000000"/>
<meta name="color:Scrollbar" content="#d5d5d5"/>
<meta name="color:Accents" content="#f8f8f8"/>
<meta name="color:Text Borders" content="#eeeeee"/>
<meta name="if:Full Photoset" content="0"/>
<meta name="if:Show Tags" content="1"/>
<meta name="if:Infinite Scroll" content="1"/>
<meta name="if:Manual Load" content="0"/>
<meta name="select:Captions" content="def" title="Default"/>
<meta name="select:Captions" content="inl" title="Inline"/>
<meta name="select:Captions" content="hide" title="Hide"/>
<meta name="image:Icon" content=""/>
<meta name="select:Post Width" content="250" title="250px"/>
<meta name="select:Post Width" content="275" title="275px"/>
<meta name="select:Post Width" content="300" title="300px"/>
<meta name="select:Post Width" content="325" title="325px"/>
<meta name="select:Post Width" content="350" title="350px"/>
<meta name="select:Post Width" content="375" title="375px"/>
<meta name="select:Post Width" content="400" title="400px"/>
<meta name="select:Post Width" content="450" title="450px"/>
<meta name="select:Post Width" content="500" title="500px"/>
<meta name="select:Post Width" content="540" title="540px"/>
<meta name="select:Post Width" content="600" title="600px"/>
<meta name="text:Post Spacing" content="100"/>
<meta name="select:Font" content="arial" title="Arial"/>
<meta name="select:Font" content="trebuchet ms" title="Trebuchet ms"/>
<meta name="select:Font" content="inconsolata" title="Inconsolata"/>
<meta name="select:Font" content="Helvetica" title="Helvetica"/>
<meta name="select:Font" content="Roboto" title="Roboto"/>
<meta name="select:Font Size" content="10px" title="10px"/>
<meta name="select:Font Size" content="11px" title="11px"/>
<meta name="select:Font Size" content="12px" title="12px"/>
<meta name="select:Font Size" content="13px" title="13px"/>
<meta name="select:Font Size" content="14px" title="14px"/>
<meta name="text:Link 1 URL" content=""/>
<meta name="text:Link 1" content=""/>
<meta name="text:Link 2 URL" content=""/>
<meta name="text:Link 2" content=""/>
<meta name="text:Link 3 URL" content=""/>
<meta name="text:Link 3" content=""/>
<meta name="text:Profile Title" content="profile"/>
<meta name="text:Ask Title" content="contact"/>
<meta name="text:Archive Title" content="archive"/>
<!--CSS customization here. -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght#400;700&display=swap" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href='https://static.tumblr.com/sas2ex2/HFinqriui/photoset.css' rel='stylesheet' type='text/css'>
<script src="//use.edgefonts.net/{select:font}:n4,i4,n5,n6,n7.js"></script>
<style type="text/css">
/*tumblr controls and lightbox*/
.tmblr-iframe-overlay {margin: 0;}
.tmblr-lightbox {background:rgba({RGBcolor:background}, .95)!important;}
.tmblr-lightbox img {opacity:0;}
.lightbox-caption {
color:{color:title}!important;
font-family:inherit!important;
font-size:1em!important;
font-weight:normal!important;
text-shadow:none!important;
}
.lightbox-image {
-moz-box-shadow:none!important;
-webkit-box-shadow:none!important;
box-shadow:none!important;
-moz-border-radius:0px!important;
-webkit-border-radius:0px!important;
border-radius:0px!important;
padding:0px!important;
margin:0px!important;
border:0!important;
opacity:1!important;
}
.lightbox-target {
left: 0px;
}
.lightbox .lb-image:
.vignette {opacity:0!Important;}
}
/*tooltip*/
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script><script>
(function($){
$(document).ready(function(){
$("a[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:75,
tip_fade_speed:50,
attribute:"title"
});
});
})(jQuery);
</script>
#s-m-t-tooltip {
}
.ui-tooltip {
position:absolute;
z-index:9999;
padding-top:15px;
}
.ui-tooltip-content {
background:{color:background};
width:300px;
margin-left: -150px;
text-align:center;
font-size:.9em;
text-transform: none;
letter-spacing:1px;
padding:2px 5px;
}
/*scrollbar*/
::-webkit-scrollbar {
height:2px;
width:3px;
background:inherit;
}
::-webkit-scrollbar-thumb {
background:{color:scrollbar};
border-radius:0px;
-webkit-border-radius:0px;
}
/*basics*/
.tmblr-full:last-child {
padding-bottom:20px!Important;
}
*, body {myedit:crosshair;}
body {
image-rendering: -webkit-optimize-contrast!important;
background:{color:background};
color:{color:text};
font:normal {select:font size}/1.4em {select:font}, arial, sans-serif;
line-height: 1.6em!important;
word-wrap:break-word;
position:relative;
text-align:left;
-moz-osx-font-smoothing:grayscale;
-webkit-font-smoothing:antialiased;
margin:0;
}
a {
color:{color:text};
text-decoration:none;
transition:all .2s ease;
-webkit-transition:all .2s ease;
-moz-transition:all .2s ease;
-o-transition:all .2s ease;
}
a, a img {myedit: no;}
.text a, .caption a, .source a, .a a {color:{color:link};} /*decoration links*/
a:hover:not(.when) {
color:{color:link hover};
text-decoration:none;
}
img {
opacity:1;
border:none;
text-decoration:none;
}
blockquote {
padding:.25em 0 .25em 15px;
text-align:left;
margin:.5em 0;
border-left:0px solid {color:text borders};
}
pre {
padding:0;
margin:0;
line-height:inherit!important;
background:transparent;
font-family:inherit!Important;
font-size:inherit!important;
white-space:pre-wrap;
white-space:-moz-pre-wrap;
white-space:-pre-wrap;
white-space:-o-pre-wrap;
word-wrap:break-word;
}
p {margin:1em 0;}
p:first-of-type {margin-top:0;}
p:last-of-type {margin-bottom:0;}
b, strong, b a, strong a {color:{color:title};}
ol, ul {
list-style:none;
text-align:left;
padding-left:0;
}
li {
position:relative;
padding-left:30px;
}
ol li {counter-increment:list;}
ol li:before {
content:counter(list, decimal-leading-zero);
left:0;
position:absolute;
}
ul li:before {
position:absolute;
left:15px;
vertical-align:baseline!important;
content:'›';
}
.chat li:before, .pagenotes li:before {display:none;}
small, big, sub, pre {
font-size:1em!important;
line-height:1.5em!important;
vertical-align:baseline!important;
}
h1, h2, h3, h4 {
font-size:1em;
margin:0;
padding:0;
color:{color:title};
font-weight:normal;
}
hr {
border:none;
box-shadow:0;
margin:1.5em 25%;
border-top:1px solid {color:text borders};
}
/*header*/
header {
width:{select:post width}px;
margin:140px auto 0 auto;
text-align:center;
font-family: inconsolata;
position:relative;
-webkit-animation-name: none-in;
-webkit-animation-duration: 2.5s;
}
.ico {
display:block;
margin-bottom:35px;
}
.ico img { /*icon*/
margin:0 auto;
width:60px;
height:60px;
border-radius:100%;
-webkit-border-radius:100%;
-moz-border-radius:100%;
}
.about {
position:relative;
height:0px;
overflow:hidden;
}
.desc {
padding:25px 0;
opacity:0;
}
.dnav {margin-top:1.0em;
margin-bottom: 110px;
}
.dnav a {
font-size: 11px;
letter-spacing:3px;
text-transform:lowercase;
display:inline-block;
margin-left: 7px;
margin-right: 7px;
}
.dnav a:hover::after {color:{color:link}!important;}
.dnav a:last-of-type::after {display:none;}
nav {
font-size: 11px;
letter-spacing:3px;
text-transform:uppercase;
}
nav a {margin:0 0px;}
#blogt {
font-size: 11px;
font-weight:bold;
/*color:{color:title};*/
}
/*pagination*/
footer {
{block:ifinfinitescroll}
{block:ifnotmanualload}
display:none;
{/block:ifnotmanualload}
{/block:ifinfinitescroll}
position:relative;
text-align:center;
margin:0 auto 150px auto;
width:{select:post width}px;
-webkit-animation-name: none-in;
-webkit-animation-duration: 1.5s;
}
#pagination {
{block:ifinfinitescroll}
display:none;
{/block:ifinfinitescroll}
}
footer a {
display:inline-block;
margin:0 10px;
font-size:.8em;
text-transform:uppercase;
letter-spacing:2px;
}
.nice {
position:fixed;
right:15px;
font-size:.9em;
bottom:10px;
}
.nice a {color:{color:text};}
#infscr-loading {display:none!important;}
/*posts*/
section {
width:{select:post width}px;
margin:{text:post spacing}px auto 150px auto;
{block:ifinfinitescroll}{block:indexpage}
margin-bottom:0;
{/block:indexpage}{/block:ifinfinitescroll}
}
.posts {
width:{select:post width}px;
position:relative;
margin-bottom:105px; {post spacing}
-webkit-animation-name: none-in;
-webkit-animation-duration: 2.5s;
}
.likereblog {
transition: .2s ease-in-out;
-moz-transition: .2s ease-in-out;
-webkit-transition: .2s ease-in-out;
opacity:0;
position:absolute;
width: 30px;
height:60px;
margin-left:605px;
margin-top:0px;
}
.post, .photo, .pxu-photo {margin-bottom: 0.7em;}
.post:hover .likereblog {
opacity:1;
}
.posts img {
height:auto;
width: auto;
margin: auto;
backface-visibility:visible;
min-width: 100%;
}
.photo img {display:block;
}
.photo a {display:none;}
.photo a:first-child {display:inline!important;} /*edit*/
.go .set {display:none;}
.stop {display:none;}
.go .stop {display:block!important;}
.media {
display:block;
position:relative;
}
.media iframe, .tumblr_video_container {display:block;}
.tumblr_video_container {
width:auto!important;
height:auto!important;
}
a.read_more, a.tumblr_blog,.readmore {text-transform:lowercase;}
.posts img, .posts li, .posts blockquote {max-width:100%;}
.caption img, .caption iframe {max-width:100%;}
/*text*/
.title {
text-align:center;
font-size: 11px;
text-transform:uppercase;
letter-spacing:3px;
/* color:{color:title}; EDIT */
}
.title a {
color:{color:title};
border-bottom:1px solid {color:text borders};
}
.title a:hover {color:{color:link hover};}
.ted {margin-top:20px;}
/*quote*/
.quote {
margin-top: 7em;
font-family: Georgia,Times,Times New Roman,serif;
font-size: 1.6em!important;
text-align: left;
line-height: 1.4em;
text-transform: initial;
letter-spacing: initial;
}
.source {
margin-top: 1.5em;
line-height: 1.3em;
text-align: left;
margin-right: 0px;
}
/*captions*/
.caption {position:relative;}
.caption blockquote {padding-left:10px;}
.inl .caption *:not(a):not(ul):not(ol):not(li) {
margin:0;
padding:0;
display:inline;
}
.inl .caption:not(ul):not(ol):not(li) {text-align:center;}
.inl .caption p:first-of-type {display:block!important;}
.inl .caption p:first-of-type::after {content:' ';}
.inl .caption blockquote {
padding:0;
display:block;
border:0;
text-align:center;
}
.inl .caption blockquote p{display:block!important;}
.inl .caption p {
display:block!important;
margin:.5em 0!important;
}
.inl .caption p:first-of-type {
display:inline!important;
margin:0!important;
}
.inl .caption *::after:not(a):not(ul):not(ol):not(li) {content:' ';}
.posts img, .posts li, .posts blockquote, .caption img {max-width:100%;}
.caption *:last-child, .a *:last-child, .tex *:last-child {
margin-bottom:0!Important;
padding-bottom:0!Important;
}
{block:indexpage}.hide .caption {display:none!important;}{/block:indexpage}
/*audio*/
.tumblr_audio_player {
width:100%;
clear:both;
width:calc({select:Post Width} - 20px);}
.soundcloud_audio_player
{width: 100%;}
/*asks*/
.q {
text-align:center;
font-style:italic;
}
.as span {
text-transform:uppercase;
font-size:.8em;
letter-spacing:2px;
display:inline-block;
margin:15px auto 0 auto;
padding:5px 10px;
background:{color:Accents};
}
.as a {color:{color:text};}
.as a:hover {color:{color:link hover};}
.a {
margin-top:15px;
text-align:center;
}
.a:not(ul):not(ol):not(li) {text-align:center;}
/*chat*/
.chat {
margin:0;
padding:0;
list-style:none;
}
.l {
padding:10px;
}
.l.odd {background:{color:accents};}
.label {
font-size:.8em;
letter-spacing:2px;
text-transform:uppercase;
font-weight:bold;
color:{color:title};
display:inline-block;
}
/*permalink and notes*/
.when {
font-family: arial; /*edit*/
margin:15px 0 0 0;
text-align:center;
text-transform:uppercase;
letter-spacing:2px;
font-size:.6em;
}
.when a {
display:inline-block;
color:{color:text};
margin-left: 2.5px;
margin-right: 2.5px;
}
.when a:hover {color:{color:link hover};}
.tags {
display:inline;
{block:indexpage}{block:ifnotshowtags}
display:none;
{/block:ifnotshowtags}{/block:indexpage}
{block:permalinkpage}
display:block;
{/block:permalinkpage}
}
.tags a {
display:inline;
opacity:.7;
word-break:break-word;
}
.tags a:hover {opacity:1;}
.pagenotes {
position:relative;
height:0px;
overflow:visible;
}
.op.pagenotes {overflow-y:auto!important;}
.same {opacity:1;}
.pagenotes *:not(blockquote) {text-align:center!important;}
.ti {
margin:30px 0;
myedit: no;
}
.pagenotes a {text-decoration:none;}
ol.notes .action {
color:{color:text borders};
text-transform:uppercase;
font-size:.8em;
letter-spacing:2px;
list-style-type:none;
padding:0;
margin-bottom: 25px;
}
ol.notes li.note {
display:block;
margin:0;
border-bottom:1px dotted {color:text borders};
padding:2px 0;
}
ol.notes /*li.note:nth-child(odd)*/ /*myedit*/ * {color:rgba({RGBcolor:title},.9);}
ol.notes li.note img.avatar {display:none!important;}
.more_notes_link, .notes_loading {
display:block;
color:{color:title};
text-align:left;
}
{CustomCSS}
</style>
<!-- jquery -->
<!--
NPF images fix v3.0 by #glenthemes [2021]
💌 git.io/JRBt7
--->
<script src="//npf-images-v3.github.io/script.js"></script>
<link rel="stylesheet" href="//npf-images-v3.github.io/recon.css">
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src ="//static.tumblr.com/fwgzvyf/l6jnyutne/shythemes.vr.js"></script><script src="https://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
<script>
$(document).ready(function() {
$(document).tooltip({
track:true
});
$('.go .photo-slideshow').pxuPhotoset({
lightbox: true,
rounded: false,
gutter: '0px', /*edit*/
photoset: '.photo-slideshow',
photoWrap: '.photo-data',
photo: '.pxu-photo'
});
$('.pro').click(function(event){
event.preventDefault();
if ($(this).hasClass('op')) {
$('.desc').noneTo("200", 0);
$('.about').animate({height:0}, 600);
}
else {
$('.about').stop().animate({height:$('.desc').outerHeight()}, 600);
$('.desc').delay(300).noneTo("200", 1);
}
$(this).toggleClass('op');return false;
});
$('.ti').click(function(event){
event.preventDefault();
if ($(this).hasClass('op')) {
$('.same').noneTo("200", 0);
$('.pagenotes').animate({height:0}, 600);
}
else {
$('.pagenotes').stop().animate({height:'350px'}, 600);
$('.same').delay(300).noneTo("200", 1);
}
$('.pagenotes').toggleClass('op');return false;
});
});
</script>
</head>
<body>
<header>
{block:ifIconImage}<img src="{image:Icon}">{/block:ifIconImage}
<nav>{block:ifAskTitle}{text:ask title}{/block:ifAskTitle}{block:ifProfileTitle}<a class="pro">{text:profile title}</a>{/block:ifProfileTitle}<a id="blogt" href="/">{Title}</a>{block:ifArchiveTitle}{text:archive title}{/block:ifArchiveTitle}</nav>
<div class="about"><div class="desc">{Description}</div></div>
<div class="dnav">{block:ifLink1}{text:Link 1}{/block:ifLink1}{block:ifLink2}{text:Link 2}{/block:ifLink2}{block:ifLink3}{text:Link 3}{/block:ifLink3}</div>
</div></div>
</header>
<section id="entries" class="{block:indexpage}{block:iffullphotoset}go{/block:iffullphotoset}{/block:indexpage}{block:permalinkpage}go{/block:permalinkpage}">{block:Posts inlineMediaWidth="1280" inlineNestedMediaWidth="1280"}<article class="posts {select:captions}"><div class="post">
<div class="likereblog">
{likebutton color="red" size="20"} {reblogbutton color="red" size="20"}
</div>
{block:Quote}<div class="title quote">{Quote}</div>
{block:Source}<div class="source">{Source}</div>{/block:Source}
{/block:Quote}
{block:Text}
{block:Title}<div class="title">{Title}</div>{/block:Title}
<div class="tex {block:title}ted{/block:title}">{Body}</div>
{/block:Text}
{block:Link}
<div class="title">{Name}</div>
{block:Description}<div class="tex ted">{Description}</div>{/block:Description}
{/block:Link}
{block:Chat}
{block:Title}<div class="title">{Title}</div>{/block:Title}
<ol class="chat {block:title}ted{/block:title}">
{block:Lines}
<li class="l {Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label} {Line}</li>
{/block:Lines}
</ol>
{/block:Chat}
{block:Photo}
<div class="photo"><a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-HighRes}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false">
<img src="{PhotoURL-HighRes}">
</a><!--{LinkURL}-->{block:indexpage}{/block:indexpage}{block:indexpage}{/block:indexpage}{block:permalinkpage}{linkclosetag}{/block:permalinkpage}</div>
{/block:Photo}
{block:Photoset}<div class="hug">{block:indexpage}<div class="photo set">{block:photos}<img src="{PhotoURL-HighRes}">{/block:photos}</div>{/block:indexpage}<div class="photo-slideshow stop" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img alt="{PhotoAlt}" src="{PhotoURL-HighRes}" width="{PhotoWidth-highres}" height="{PhotoURL-HighRes}" data-highres="{PhotoURL-highres}" data-width="{PhotoWidth-highres}" data-height="{PhotoHeight-highres}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div></div></div>
{/block:Photoset}
{block:Video}<div class="video">{Video-500}</div>{/block:Video}
{block:Audio}
<div class="tumblr_audio_player">
{block:AudioEmbed}{AudioEmbed color="white"}{/block:AudioEmbed}</div>
{/block:Audio}
{block:Answer}
<div class="q">{Question}<div class="as"><span>sent by {Asker}</span></div></div><div class="a">{Answer}</div>
{/block:Answer}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
<!-- -->
<br>{block:Date}<div class="when">{block:indexpage}{DayOfMonthWithZero}{MonthNumberWithZero}{/block:indexpage}{block:permalinkpage}{DayOfMonthWithZero}{MonthNumberWithZero}<p><span class="tags">{block:Tags}<a href="{TagUrl}">#{Tag} {/block:Tags}</span><!--{timeago}-->{/block:permalinkpage}</a>{block:permalinkpage}{block:RebloggedFrom}<br>via{block:ContentSource}/source{/block:ContentSource}{/block:RebloggedFrom}{/block:permalinkpage}</div>
{/block:Date}
{block:PostNotes}{block:notecount}<div class="title ti">{NoteCountWithLabel}</div>{/block:notecount}<div class="pagenotes"><div class="same">{PostNotes}</div></div>
{/block:PostNotes}
</article>
{/block:Posts}</section>
{block:pagination}<footer><div id="pagination">
{block:previouspage}« back{block:nextpage}/{/block:nextpage}{/block:previouspage}{block:nextpage}next »{/block:nextpage}</div>{block:ifinfinitescroll}{block:ifmanualload}<a style="myedit: no;" class="load">load more</a>{/block:ifmanualload}{/block:ifinfinitescroll}</footer>{/block:pagination}
{block:ContentSource}
<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
{/block:SourceLogo}
{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
{/block:ContentSource}
{block:indexpage}
<script src="https://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
{block:ifinfinitescroll}
<script src="https://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>{/block:ifinfinitescroll}
<script>
$(document).ready(function() {
var $container = $('section');
{block:ifinfinitescroll}
$container.infinitescroll({
itemSelector: 'article',
navSelector: '#pagination',
nextSelector: '#pagination a',
loadingImg: '',
loadingText: '<em></em>',
errorCallback: function(){ $('.load').text('no more posts').parent().delay(4000).slideUp(400); },
bufferPx: 3000
},
function( newElements ) {
var $newElems = $( newElements );
$newElems.css({opacity: 0, zIndex: -1});
{block:iffullphotoset}
$newElems.find('.photo-slideshow').pxuPhotoset({
lightbox: true,
rounded: false,
gutter: '0px', /*edit*/
photoset: '.photo-slideshow',
photoWrap: '.photo-data',
photo: '.pxu-photo'
});
{/block:iffullphotoset}
resizeVideos();
$newElems.imagesLoaded(function(){
$container.masonry( 'appended', $newElems );
$newElems.delay(600).animate({opacity: 1, zIndex: 1});
});
});
{block:ifmanualload}
$(window).unbind('.infscr');
$('.load').click(function(){
$(this).parent().noneTo("400", 0);
$('section').delay(400).infinitescroll('retrieve').parent('body').find('.load').parent().delay(400).noneTo("400", 1); return false;
});
{/block:ifmanualload}
{/block:ifinfinitescroll}
});
</script>
{/block:indexpage}<a class="nice" href="https://sorrism.tumblr.com" target="_blank">σ</a>
<script>
$(document).ready(function() {
// audio player
var $audio = $('iframe.tumblr_audio_player');
$audio.load(function() {
$(this).contents().find('head').append('<style type="text/css">' +
'.audio-player { background: #000; color: #fff !important; }' +
'.audio-player .audio-info .track-artist { color: #fff !important; font-family:roboto!important; }' +
'.audio-player .audio-info .track-name { color: #fff !important; font-family:roboto!important; }' +
'.audio-player .progress { background: rgb(255 255 255 / 20%); !important ;}' +
'</style>');
});
});
</script>
</body>
</html>
The Tooltips are displayed because of Title attribute. You need to remove them in order to make them not appear. Here's a small piece of code which would remove the title attribute on hover in and put it back when you hover out
HTH
$("#youtube_iframe").hover(function() {
$(this).attr("tooltip-data", $(this).attr("title"));
$(this).removeAttr("title");
}, function(){
$(this).attr("title", $(this).attr("tooltip-data"));
$(this).removeAttr("tooltip-data");
});
Related
Where did I got wrong I'm trying to create an img element in javascript, nest inside of a button element, and also set onmouseover and onmouseout to the img element which will change images when the event is detected.
Here is my Javascript (ps I know I repeat some functions more than once I didn't know how to simplify them properly)
I also tried to create the img attributes 2 different ways
moveImg = document.createElement("img");
removeImg.innerHTML = "< img src='icons/trash.png' id='dormant' onmouseover='newTrashPicture()' onmouseout='oldTrashPicture()'/>"
var createImg = document.createElement("img");
createImg.src="icons/check.png";
createImg.setAttribute("id" , "dormant2");
createImg.onmouseover = newCheckPicture();
createImg.onmouseout = oldCheckPicture();
document.getElementById('add').addEventListener('click',function() {
var value = document.getElementById('item').value;
If(value) addItemTodo(value); {
}
});
function addItemTodo(text) {
var list = document.getElementById('todo');
var item = document.createElement("li");
item.innerText = text;
var buttons = document.createElement('div');
buttons.classList.add('buttons');
var removePic = document.createElement('button');
removePic.classList.add('remove');
removePic.innerHTML = removeImg;
var complete = document.createElement('button');
complete.classList.add('complete');
complete.innerHTML = createImg;
buttons.appendChild(removePic);
buttons.appendChild(complete);
item.appendChild(buttons);
list.appendChild(item);
}
function newTrashPicture() {
document.getElementById("dormant").src="icons/redtrash.png";
}
function oldTrashPicture() {
document.getElementById("dormant").src="icons/trash.png";
}
function newCheckPicture() {
document.getElementById("dormant2").src="icons/greencirclecheck.png";
}
function oldCheckPicture() {
document.getElementById("dormant2").src="icons/check.png";
}
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Todo List App</title>
<link href="https://fonts.googleapis.com/css? family=Roboto:400,500,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="resources/css/reset.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
</head>
<body>
<header>
<input type="text" placeholder="Enter an activiy..." id="item">
<button id="add"><img id="img1" src="icons/plus.png"></button>
</header>
<div class="container">
<ul class="todo" id="todo">
<li>
This is an item
<div class="buttons">
<button class="remove"><img src="icons/trash.png" id="dormant" onmouseover="newTrashPicture()" onmouseout="oldTrashPicture()"></button>
<button class="complete"><img src="icons/check.png" id="dormant2" onmouseover="newCheckPicture()" onmouseout="oldCheckPicture()"></button>
</div>
</li>
</ul>
<ul class="todo" id="completed">
</ul>
</div>
<script type="text/javascript" src="resources/javascript/main.js">. </script>
</body>
Here is my CSS
#charset "utf-8";
body {
background:#edf0f1;
padding:80px 0 0 0;
margin:0px;
}
body input button {
font-family:'Roboto'sans-serif;
}
header {
width:100%;
height:80px;
position:fixed;
padding:15px;
top:0;
left:0;
z-index:5;
background:#25b99a;
box-shadow:0px 2px 4px rgba(44,62,80,0.15);
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
header input {
width:100%;
height:50px;
float:left;
color:#fff;
font-size:15px;
font-weight:400;
text-indent:18px;
padding-top:0px;
padding-right:60px;
padding-bottom:0px;
padding-left:0px;
background:rgba(225,225,225,0.2);
border-top-left-radius:5px;
border-bottom-left-radius:5px;
border-top-right-radius:25px;
border-bottom-right-radius:25px;
border:0px;
box-shadow:none;
outline:none;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
-webkit-appearance:none;
-moz-appearance:none;
-ms-appearance:none;
-o-appearance:none;
appearance:none;
}
header input::-webkit-input-placeholder {
color:rgba(255,255,255,0.75);
}
header input:-moz-input-placeholder {
color:rgba(255,255,255,0.75);
}
header input::-moz-input-placeholder {
color:rgba(255,255,255,0.75);
}
header input:-ms-input-placeholder {
color:rgba(255,255,255,0.75);
}
header button {
width:50px;
height:50px;
position:absolute;
top:15px;
right:15px;
z-index:2;
border-radius:25px;
background:#fff;
border:0px;
box-shadow:none;
outline:none;
cursor:pointer;
-webkit-appearance:none;
-moz-appearance:none;
-ms-appearance:none;
-o-appearance:none;
appearance:none;
}
header button:hover {
background:#fcfcfc;
}
header button:active {
background:#bcbcbc;
}
header button #img1 {
width:16px;
height:16px;
position:absolute;
top:50%;
left:50%;
margin-top:-8px;
margin-right:0px;
margin-bottom:0px;
margin-left:-8px;
}
.container {
width:100%;
float:left;
padding:15px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
ul.todo {
width:100%;
float:left;
list-style-type:none;
-webkit-margin-before:0px;
-webkit-margin-after: 0px;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start:0px;
}
ul.todo li {
width:100%;
min-height:50px;
float:left;
font-size:14px;
font-weight:500;
color:#400;
line-height:22px;
background:#fff;
border-radius:5px;
position:relative;
box-shadow:0px 1px 2px rgba(44,62,80,0.10);
margin:0 0 10px 0;
padding:14px 100px 14px 14px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
ul.todo li:last-of-type {
margin:0;
}
ul.todo li .buttons {
width:100px;
height:50px;
position: absolute;
top:0;
right:0;
}
ul.todo li .buttons button {
width:50px;
height:50px;
float:left;
background: none;
position:relative;
border:0px;
box-shadow: none;
outline: none;
padding:0 0 0 0;
-webkit-appearance:none;
-moz-appearance:none;
-ms-appearance:none;
-o-appearance:none;
appearance:none;
}
ul.todo li .buttons button:last-of-type:before {
content:"";
width:1px;
height:30px;
position:absolute;
top:10px;
left:0px;
background:#edf0f1;
}
ul.todo li .buttons button img {
width:22px;
height:22px;
position:absolute;
top:50%;
left:50%;
margin:-11px 0 0 -11px;
cursor:pointer;
}
#dormant2:hover {
width:36px;
height:36px;
margin:-18px 0 0 -18px;
}
What you can do is append the image to your button element instead of setting it as an innerHTML propertie.
Replace :
removePic.innerHTML = removeImg;
with :
removePic.appendChild(removeImg);
Same with the complete button.
The innerHTML propertie accepts string as an argument, but your are passing it an object.
This does not work :
var removeImg = document.createElement("img");
removePic.innerHTML = removeImg;
But this does :
var removeImg = "<img src='icons/trash.png' id='dormant'>";
removePic.innerHTML = removeImg;
So either you :
Append the object
Set the innerHTML with a string
As the title suggests, I am trying to create a horizontal scrollable <ul> with <li> with width:auto and with prev and next buttons, clearly with overflow:hidden.
Any suggestions on how to manage it with jquery?
This is the code that I have prepared...
JSFiddle
HTML:
<div id="wrapper">
<span class="arrow"><</span>
<span class="arrow">></span>
<ul id="nav">
<li>Abbaiare</li>
<li>Bolle</li>
<li>Cantante</li>
<li>Domodossola</li>
<li>Elefante</li>
<li>Giovanni</li>
<li>Hotel</li>
<li>Inti</li>
<li>Montagna</li>
<li>Nave</li>
</ul>
</div>
CSS:
* {
margin:0;
padding:0;
}
#wrapper {
width:calc(100% - 120px);
height:60px;
background-color:#dbdbdb;
padding:0 60px;
margin-top:60px;
font-family:helvetica;
overflow:hidden;
position:relative;
z-index:99;
}
.arrow {
display:block;
width:60px;
height:60px;
line-height:60px;
text-align:center;
background-color:#cccccc;
font-weight:bold;
cursor:pointer;
position:absolute;
top:0;
z-index:101;
}
.arrow:first-of-type {
left:0;
}
.arrow:nth-of-type(2) {
right:0;
}
#nav {
width:auto;
height:60px;
overflow:hidden;
list-style-type:none;
white-space:nowrap;
transition:2.0s;
}
#nav li {
display:inline-block;
height:60px;
line-height:60px;
font-size:13px;
padding:0 30px;
}
You can simply use bxSlider without reinventing the wheel. To make your code work, you just need to add:
$(function () {
$('#nav').bxSlider({
pager: false,
minSlides: 3,
maxSlides: 3,
slideWidth: 150,
slideMargin: 25
});
});
#wrapper {
margin: auto;
}
.bx-viewport {
height: 50px !important;
padding: 0 30px;
box-sizing: border-box;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/vendor/jquery.easing.1.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/vendor/jquery.fitvids.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css" />
<div id="wrapper">
<ul id="nav">
<li>Abbaiare</li>
<li>Bolle</li>
<li>Cantante</li>
<li>Domodossola</li>
<li>Elefante</li>
<li>Giovanni</li>
<li>Hotel</li>
<li>Inti</li>
<li>Montagna</li>
<li>Nave</li>
</ul>
</div>
Hoping it will be useful for anyone, This what I needed...
(Thank you Praveen Kumar)
JSFiddle
$(".arrow:first-of-type").click(function() {
var navwidth = $("#nav");
navwidth.animate( { scrollLeft: '-=200' }, 1000);
}
);
$(".arrow:nth-of-type(2)").click(function() {
var navwidth = $("#nav");
navwidth.animate( { scrollLeft: '+=200' }, 1000);
}
);
Most of the examples I've seen on the subject have people manipulating input boxes to increment and update the total price accordingly.
My dilemma is that I am using two divs and I am trying to increment the price further when the user checks off the input related to the router option, which only appears if they have either Gigabit or Basic internet selected.
I've set up custom data-attributes data-price=val" for the three items, and I've also managed to at least update the total price when either of the two boxes are selected. I just can't figure out how best to go about incrementing the input/checkbox price onto the total (if checked).
JSFiddle for reference: https://jsfiddle.net/976dc1xd/
Any help/input is greatly appreciated.
Thanks,
-M
var raceInternet = false;
var racePhone = false;
var raceTv = false;
var $internetDiv = $('#race-internet > .itembox'),
$targetRouter = $('.router-container'),
$continueDiv = $('#int-continue');
$(function() {
$internetDiv.on('click', function(){
$(this).toggleClass('user-selected').siblings().removeClass('user-selected');
if($internetDiv.hasClass('user-selected')) {
$targetRouter.slideDown(300);
$continueDiv.text('Continue');
raceInternet = true;
} else {
$('#check1').prop('checked', false);
$targetRouter.slideUp(300);
$continueDiv.text('Continue without Internet');
raceInternet = false;
}
})
});
// Function to increment Total
$(function() {
var total = 0;
$internetDiv.on('click', function() {
if($(this).is('.user-selected')) {
total = $(this).data('price');
} else if ($(this).not('.user-selected')) {
total = 0;
}
$('.int-price').text('$' + total + '/mo');
})
})
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
}
p {
font-size:16px;
}
h2 {
color:#787878;
font-weight:700;
}
.divider {
background-color:#e8e8e8;
height:2px;
}
.prime-aux {
position:relative;
padding:15px;
-webkit-box-shadow: 3px 3px 2px 0px rgba(0,0,0,0.13);
-moz-box-shadow: 3px 3px 2px 0px rgba(0,0,0,0.13);
box-shadow: 3px 3px 2px 0px rgba(0,0,0,0.13);
overflow:hidden;
}
.itembox-container {
display:flex;
}
.boxes-2 {
width:calc((100% - 25px)/2);
margin:10px;
padding: 10px;
}
.itembox {
position:relative;
display:inline-block;
border:5px solid #e8e8e8;
border-radius:10px;
cursor:pointer;
}
.user-selected {
border:5px solid #E16E5B;
}
.itembox h4 {
color:#22ddc0;
font-weight:700;
}
span.price {
display:inline-block;
font-weight:700;
float:right;
color:#22ddc0;
}
.itembox > ul {
list-style: none;
}
.itembox > ul > li {
line-height:3;
}
.radial {
position:absolute;
float:right;
height:35px;
width:35px;
padding:2px;
border:5px solid #e8e8e8;
border-radius:50%;
top:43%;
right:10px;
}
.itembox .center-dot {
display:none;
position:relative;
height:21px;
width:21px;
background-color:#E16E5B;
border-radius:50%;
}
.itembox.user-selected .center-dot{
display: block;
}
/* ===(Internet) Router Item === */
#check1:not(:checked),
#check1:checked {
position:absolute;
left:-99999px;
}
#check1:not(:checked) + label,
#check1:checked + label {
position: relative;
padding-left:50px;
font-size:18px;
cursor: pointer;
}
/* checkbox aspect */
#check1:not(:checked) + label:before,
#check1:checked + label:before {
content: '';
position: absolute;
left:10px;
top:0;
width: 25px;
height: 25px;
border: 5px solid #e8e8e8;
border-radius: 5px;
}
/* checked mark aspect */
#check1:not(:checked) + label:after,
#check1:checked + label:after {
content: '■';
position: absolute;
top:-15px;
left:13px;
font-size: 35px;
color: #E16E5B;
}
/* checked mark aspect changes */
#check1:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
#check1:checked + label:after {
opacity: 1;
transform: scale(1);
}
/* disabled checkbox */
#check1:disabled:not(:checked) + label:before,
#check1:disabled:checked + label:before {
box-shadow: none;
border-color: #bbb;
background-color: #ddd;
}
#check1:disabled:checked + label:after {
color: #999;
}
#check1:disabled + label {
color: #aaa;
}
#check1:checked ~ span {
color:#22ddc0;
}
.router-container {
display:none;
height:100%;
}
.router-item {
margin:25px 0;
max-width:525px;
-webkit-animation-delay:.5s;
-moz-animation-delay:.5s;
animation-delay:.5s;
}
.router-item label {
color:#787878;
}
.router-item span {
float:right;
color:#787878;
font-size:18px;
font-weight:700;
}
/* === Price Bar === */
.price-bar:before {
content:'';
display:block;
background:#e8e8e8;
height:1px;
margin:10px;
}
.price-bar p {
position:relative;
margin:0;
top:5px;
left:10px;
float:left;
}
/* === Continue Button === */
.continue {
display:inline-block;
font-size: 18px;
color:#fff;
background-color:#E16E5B;
border:0;
border-radius:0;
float:right;
margin-right:10px;
}
.continue:hover {
color:#fff;
background-color:#E16E5B;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container main"><!-- Primary Content Container -->
<div class="prime-aux">
<h2>Internet</h2>
<hr class="divider"/>
<div id="race-internet" class="itembox-container">
<div class="itembox boxes-2 noselect" data-price="60">
<h4>Gigabit Internet <span class="price">$60/mo</span></h4>
<ul>
<li>1,000 Mbps</li>
<li> No data caps</li>
</ul>
<div class="radial">
<div class="center-dot"></div>
</div>
</div>
<div class="itembox boxes-2 noselect" data-price="25">
<h4>Basic Internet <span class="price">$25/mo</span></h4>
<ul>
<li>25 Mbps</li>
<li>No data caps</li>
</ul>
<div class="radial">
<div class="center-dot"></div>
</div>
</div>
</div>
<div class="router-container clear">
<div class="router-item animated pulse">
<input id="check1" type="checkbox" name="check" value="check1" data-price="10"/>
<label class="noselect" for="check1">Add Wi-Fi Router</label>
<span class="price">+ $10/mo</span>
</div>
</div>
<div class="price-bar">
<p>Total: <span class="int-price">$0/mo</span></p>
<div id="int-continue" class="continue btn">Continue without Internet</div>
</div>
</div><!-- First Prime Aux End -->
</section> <!-- Primary Content Container End -->
I'd suggest you to centralize logic, what I did here was to abstract the updatePrice function and bind it to the onClick method to both $routerCheck and $internetDiv selectors.
var $internetDiv = $('#race-internet > .itembox'),
$routerCheck = $('#check1'),
$targetRouter = $('.router-container'),
$continueDiv = $('#int-continue');
$(function() {
$internetDiv.on('click', updatePrice);
$routerCheck.on('click', updatePrice);
})
function updatePrice() {
var total = $('.user-selected').data('price') || 0;
if ($routerCheck.prop('checked'))
total += $routerCheck.data('price');
$('.int-price').text('$' + total + '/mo');
}
I was working on this code and I all the sudden couldn't type in the input boxes. I don't know what caused it but I have tried everything. I posted all of the code below because frankly for all I know it could be anything. (Also on an unrelated note when I try to edit the span tag with the class "createone" in css it won't cooperate with :hover. It lets me change the styling properties of it without the :hover but with it, it doesn't work.)
<!DOCTYPE html>
<html>
<head>
<title>Log in box</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Ramabhadra' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Khand:700' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Merriweather:700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div class="successLog">
<div class="header">
<ul class="cats">
<li class="listItems" id="home">Home</li>
<li class="listItems" id="dashboard">Dashboard</li>
<li class="listItems" id="contactUs">Contact Us</li>
</ul>
</div>
<div class='dropdownHome'>
<ul class="catLists">
<li class="catListItem">Event Calender</li><br>
<li class="catListItem">Bookings</li><br>
<li class="catListItem">Picture Gallery</li><br>
<li class="catListItem">Login</li><br>
<li class="catListItem">Sign Up</li>
</ul>
</div>
<div class="dropdownDashboard">
<ul class="catLists">
<li class="catListItem">Saved Info</li><br>
<li class="catListItem">Friends</li><br>
<li class="catListItem">Document</li><br>
<li class="catListItem">Profile</li><br>
<li class="catListItem">Account</li>
</ul>
</div>
<div class="dropdownContactUs">
<ul class="catLists">
<li class="catListItem">Email</li><br>
<li class="catListItem">Forum</li><br>
<li class="catListItem">Phone-numbers</li><br>
<li class="catListItem">Facebook</li><br>
<li class="catListItem">Twitter</li>
</ul>
</div><Br><Br><Br>
<h1 class="welcomeBack">Hello! Welcome back to Code Acedamy</h1>
<!--<button class="logOut">Log Out</button>-->
</div>
<div class="backarea">
<div class="loginArea">
<input type="text" placeholder="Username" class="userInput" name="userInput"><h2 class="username">Username:</h2></input>
<input type="password" class="passInput" placeholder="Password" name="passInput"<h2 class="password">Password:</h2></input>
<button class="login">Log In</button>
<p class="createacc">Don't have an account? <span class="createone">Creat one.</span></p>
<p class="error">Sorry but that username or password is incorrect.</p>
</div>
<div class="newAccArea">
<h1 class="newAccText">Create New Account</h1>
<h2 class="newUsername" id="position">Username:</h2>
<input class="newUser" type="text" name="newUser" placeholder="Username" id="position"></input>
<h2 class="newPassword" id="position">Password:</h2>
<input class="newPass" type="password" name="newPass" placeholder="Password" id="position"></input>
<h2 class="newPassword" id="position">Password:</h2>
<h2 class="confNewPassword" id="position">Confirm Password:</h2>
<input class="confNewPass" type="password" name="confNewPass" placeholder="Confirm Password" id="position"></input>
<button class="createAccButt">Create Account</button>
</div>
</div>
</body>
</html>
CSS:
body {
background-color:#F0F0F0;
}
.successLog {
background-color:#8A8A8A;
height:450px;
width:700px;
z-index:1;
opacity:0;
}
.loginArea {
opacity:1;
}
/*CREATE NEW ACCOUNT AREA*/
.newAccArea {
position:relative;
bottom:500px;
opacity:0;
}
.newUsername {
position:relative;
top:80px;
text-align:center;
color:black;
font-family: 'Oswald', sans-serif;
}
.newUser {
position:relative;
top:60px;
left:45px;
padding:5px;
font-family: 'Lato', sans-serif;
}
.newPassword {
position:relative;
top:42px;
text-align:center;
color:black;
font-family: 'Oswald', sans-serif;
}
.newPass {
position:relative;
top:23px;
left:45px;
padding:5px;
font-family: 'Lato', sans-serif;
}
.confNewPassword {
position:relative;
bottom:50px;
text-align:center;
color:black;
font-family: 'Oswald', sans-serif;
}
.confNewPass {
position:relative;
bottom:70px;
left:45px;
padding:5px;
font-family: 'Lato', sans-serif;
}
.createAccButt {
color:white;
background-color:#E60716;
padding:5px;
font-family: 'Oswald', sans-serif;
border:none;
margin:10px;
position:relative;
bottom:77;
left:78;
height:40;
width:80;
font-size:20px;
border-radius:4px;
}
.createAccButt:hover {
background-color:#A81919;
}
.newAccText {
position:relative;
top:100px;
font-family: 'Oswald', sans-serif;
font-size:30px;
text-align:center;
color:red;
}
/*LOG IN AREA*/
.backarea {
background-color:#6DE3E3;
width:255px;
height:300px;
border:1px solid black;
border-radius:9px;
position:relative;
top:67px;
left:230px;
position:fixed;
}
.userInput {
padding:5px;
margin:7px;
font-family: 'Lato', sans-serif;
position:relative;
top:50px;
left:35px;
border:1px solid white;
}
.userInput:hover {
border:2px solid #60BF68;
}
.username {
color:#E60716;
font-family: 'Oswald', sans-serif;
position:relative;
bottom:50px;
left:75px;
}
.passInput {
padding:5px;
margin:7px;
font-family: 'Lato', sans-serif;
position:relative;
top:20px;
left:35px;
border:1px solid white;
}
.passInput:hover {
border:2px solid #60BF68;
}
.password {
color:#E60716;
font-family: 'Oswald', sans-serif;
position:relative;
bottom:80px;
left:75px;
}
.login {
color:white;
background-color:#E60716;
padding:5px;
font-family: 'Oswald', sans-serif;
border:none;
margin:10px;
position:relative;
bottom:60;
left:71;
height:40;
width:80;
font-size:20px;
border-radius:4px;
}
.login:hover {
background-color:#B81414;
border:1px solid black;
}
.createacc {
position:relative;
bottom:73px;
font-family: 'Roboto Condensed', sans-serif;
padding:8
}
.createone {
text-decoration:none;
color:#4548E6;
}
.createone:hover {
color:purple;
}
.error {
color:red;
font-family: 'Merriweather', serif;
font-size:10;
position:relative;
bottom:93px;
text-align:center;
opacity:0
}
/*DROP DOWN MENU
/*DEFUALT CLASSES*/
.clicked {
color:#fff;
}
.invis {
opacity:0;
}
/*HTML CLASSES*/
.header {
background-color:black;
height:50px;
border-radius:10px;
z-index:10;
}
li {
color:white;
display:inline;
width:100%
}
.cats {
padding:6px;
width:100%;
font-size:27px;
font-family: 'Khand', sans-serif;
}
.cats .listItems:hover {
width:100px;
font-size:27px;
font-family: 'Khand', sans-serif;
color:#96F29C;
display:inline;
position:relative;
padding-left:70px;
}
.cats .listItems:active {
width:100px;
font-size:27px;
font-family: 'Khand', sans-serif;
color:#318A29;
display:inline;
position:relative;
padding-left:70px;
}
.listItems {
padding:70px;
}
.dropdownHome {
height:200px;
width:180px;
background-color:#9E9E9E;
position:absolute;
left:14px;
bottom:210px;
border:2px solid black;
z-index:1;
border-radius:13px;
opacity:0;
}
.dropdownDashboard {
height:200px;
width:180px;
background-color:#9E9E9E;
position:absolute;
left:255px;
bottom:210px;
border:2px solid black;
z-index:1;
border-radius:13px;
opacity:0;
}
.dropdownContactUs {
height:200px;
width:180px;
background-color:#9E9E9E;
position:absolute;
left:507px;
bottom:210px;
border:2px solid black;
z-index:1;
border-radius:13px;
opacity:0;
}
.catLists {
font-size:18px;
text-align:center;
position:relative;
right:20;
font-family: 'Ramabhadra', sans-serif;
}
.catListItem {
color:black;
}
.welcomeBack {
font-family: 'Oswald', sans-serif;
color:blue;
text-align:center;
}
.logOut {
position:relative;
top:130px;
left:312px;
padding:5px;
border:none;
background-color:red;
color:white;
width:100px;
height:40px;
font-size:20px;
font-family: 'Oswald', sans-serif;
}
.logOut:hover {
background-color:#B51919;
border-top:1px solid #F7A3A3;
border-left:1px solid #F7A3A3;
}
Javascript:
//Username and passwords
var UserandPass = array[(
userResult === "CodeAcademy"
&&
passResult === "fun-coding"
||
userResult === "User_Example"
&&
passResult === "Pass_Example"
||
userResult === "JoshH"
&&
passResult === "Wisconsin"
||
userResult === "Wisconsin21"
&&
passResult === "go_packers")];
$(document).ready(function() {
$('.login').click(function(){
var userResult = $('input[name=userInput]').val();
var passResult = $('input[name=passInput]').val();
if(userResult === "CodeAcademy" && passResult === "fun-coding" || userResult === "User_Example" && passResult === "Pass_Example") {
$('.backarea').fadeOut('fast');
$('.successLog').fadeTo('fast',1);
}
else {
$('.passInput').css('border-color','red');
$('.userInput').css('border-color','red');
$('.error').fadeTo('fast',1);
$('.error').effect( "bounce",{ times: 3 },"slow" );
};
});
});
$(document.ready(function(){
$('.createone').click(function(){
$('.backarea').fadeOut('fast');
$('.newAccArea').fadeTo('fast',1);
});
});
$(document).ready(function(){
$('#home').click(function(){
$('.dropdownHome').slideToggle('slow');
$('.dropdownHome').fadeTo('fast',1);
});
});
$(document).ready(function(){
$('#dashboard').click(function(){
$('.dropdownDashboard').slideToggle('slow');
$('.dropdownDashboard').fadeTo('fast',1);
});
});
$(document).ready(function(){
$('#contactUs').click(function(){
$('.dropdownContactUs').slideToggle('slow');
$('.dropdownContactUs').fadeTo('fast',1);
});
});
I put this in a jsfiddle to have a look.
The issue is you have an element on top your inputs. Using the Chrome dev tools i found .newAccArea. If you remove it or drop the z-index below 0 the inputs work, you'll probably will want to fix it another way but at least you know what's broke!
.newAccArea {
position: relative;
bottom: 500px;
opacity: 0;
z-index: -5; // this for example
}
This is my tumblr url(custom domain):
http://intchauhan.com/
I want to remove "Follow intchauhan" and "tumblr." buttons that are on the right side.
This is the html of the theme
:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="color:Background" content="#ffffff"/>
<meta name="color:Title" content="#000000"/>
<meta name="color:Text" content="#202020"/>
<meta name="color:Minor text" content="#999999"/>
<meta name="color:Line" content="#EEEEEE"/>
<meta name="color:Link" content="#49D28D"/>
<meta name="color:Link hover" content="#3FB67A"/>
<meta name="color:Top line" content="#eeeeee"/>
<meta name="color:Bottom line" content="#eeeeee"/>
<meta name="color:Notes background" content="#f7f7f7"/>
<meta name="if:Center all" content="0"/>
<meta name="if:Center links" content="1"/>
<meta name="if:Large Photoset" content="0"/>
<meta name="font:Heading" content="Futura"/>
<meta name="image:Header" content="0">
<meta name="if:Show notes on permalink pages" content="1">
<meta name="if:Ask Link" content="0" />
<meta name="if:Submit Link" content="0" />
<meta name="if:Stretch small images" content="0" />
<meta name="text:Caption size" content="14px"/>
<meta name="text:Title size" content="20px"/>
<meta name="text:Header size" content="85px"/>
<meta name="font:Description" content="Georgia"/>
<meta name="font:Body" content="Georgia"/>
<meta name="text:Disqus Shortname" content=""/>
<title>{Title}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
{block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
<link rel="shortcut icon" href="{Favicon}"/>
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
<style type="text/css">
body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,dl,dt,dd,ul,ol,li,th,td,form,fieldset,legend,input,textarea{margin:0;padding:0;}
html{font-size:{text:Caption size};}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
h1,h2,h3,h4,h5,h6{font-size:12px;font-weight:normal; padding:5px 0;}
abbr,acronym{border:0;}
body {background:{color:Background}; color:{color:Text}; font:1em/1.5 {font:Body}; margin:0 0 0 0;}
h1, h3 {font-family:{font:Heading};}
pre,code {font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif}
a:link, a:visited {color:{color:Link}; text-decoration:none;}
a:hover, a:active {color:{color:Link hover};}
#header {color:{color:Minor text}; position:relative; margin:-49 auto; padding-top:40px; width:875px;}
#header h1 {color:{color:Title}; font-weight:bold; text-align:center; font-size:{text:Header size}; line-height:90%; margin-bottom:30px; margin-top:-30px;
letter-spacing:-1px;}
#header h1 a:link, #header h1 a:visited {color:{color:Title}; display:block;}
#header h1 a:hover, #header h1 a:active {color:{color:Link hover};}
#description {font-family:{font:Description}; font-size:{text:Caption size}; text-align:center; line-height:autopx; margin-bottom:20px; margin-top:-5px;}
#header form {margin-bottom:20px;}
#header form input {width:630px;}
#header ul {margin:0 -0.25em 1.5em;}
#header li {list-style:none; text-transform:lowercase;}
#header li a {background:{color:Background}; display:block; padding:0 0.25em;
text-decoration:none;}
#header li a:hover {background:none;}
#container {background-color:{color:Container}; margin:30px auto; padding-top:5px; width:875px}
#container .box img {
max-width: 100%;
}
.logo {
border:0;
margin-bottom:5px;
max-width:875px;
}
.single { width:875px; margin-bottom:10px;}
#posts {background-color:{color:Background}; border-top:1px solid {color:Top line};
border-bottom:1px solid {color:Bottom line}; margin:0px; padding:0px; {block:IfCenterall}text-align:center;{/block:IfCenterall}font-size:{text:Caption size};}
#posts .post {list-style:none; padding-bottom:10px; max-width:875px;
clear:both;}
#posts .content {color:{color:Text}; padding:0; margin-left:0px;}
#footer {margin:0 auto; max-width:875px; padding-bottom:30px;}
#pagination p {font-size:{text:Caption size}; min-width:150px; line-height:autopx; margin:0 0 10px;
white-space:nowrap;}
#pagination p.back {display:inline; text-align:right; float:right; margin-left:20px;}
#pagination p.forward {display:inline; float:left; margin-right:1.5em;}
#pagination a {font-style:italic;}
#pagination .page {text-align:center; font:12px {font:Body};
margin-bottom:20px; text-transform:lowercase;}
#credits {clear:both; display:inline; text-align:center; font-size:12px; color:{color:Minor text}; margin:0; padding:1.5em 0;}
#footer a:hover, #footer a:active {text-decoration:none;}
p {margin-bottom:25px;}
form .submit {height:0; overflow:hidden; display:block;}
.meta {float:left; clear:left; {block:IfCenterall}width:875px{/block:IfCenterall}; font-size:14px; text-align:left; line-height:10px;}
.meta h2 {font-size:14px; margin-bottom:5px; border-bottom:1px solid {color:Line};}
.meta h2 a {text-decoration:none; display:block; padding:0px 0px;}
.meta h2 a:hover {background:none;}
.meta p {color:{color:Minor text}; font-style:italic; margin:0 0 0 1em;
text-indent:-0.75em; text-transform:lowercase;}
p.meta {color:{color:Minor text}; font-style:italic; margin:0;
width:150px; text-indent:-0.75em; text-transform:lowercase;}
.meta a {font-style:normal; white-space:nowrap;}
.meta .plays {font-weight:bold; font-style:normal;}
h3 {font-size:{text:Title size}; line-height:autopx; padding-bottom:20px; font-weight:bold;}
.content a {border-bottom:1px solid {color:Line};}
.content a:hover {border-bottom-width:2px;}
.content .photo a {border:none !important;}
.content ul, .content ol {margin:20px;}
.content ul li {list-style:square;}
blockquote {margin:0 20px 20px; font-style:italic;}
blockquote i, blockquote em, blockquote [lang="ja"] {font-style:normal;}
pre, code {font-size:10px; line-height:12px;}
pre {background:#e1e1e1; margin:15px; padding:10px;
overflow-x:auto;}
pre code {display:block;}
pre i, code i {font-style:normal; color:{color:Minor text};}
ins {text-decoration:none; font-style:italic;}
blockquote ins, em ins, ins em {font-style:normal;}
abbr, acronym, .caps {font-size:12px; letter-spacing:0.1em; word-spacing:0.1em;}
abbr, acronym {text-transform:uppercase;}
.caps {text-transform:uppercase;}
.text {margin-bottom:20px;}
.caption {margin-bottom:20px;}
.nocaption {margin-bottom:-20px;}
.vidcaption {margin-top:120px;}
.post img, .post object, .post embed {max-width:100%; {block:IfStretchsmallimages}
width: 875px;
{/block:IfStretchsmallimages}}
.link-post h3 {padding:0; margin-bottom:18px;}
.photo-post .photo {margin-bottom:19px; margin-top:20px; }
.video-post .video {margin-bottom:0px; margin-top:20px; }
.quote-post .quote {font-family:{font:Body};}
.quote-post .source, .cite
{float:right; margin:0 0 35px 0; text-indent:-1.5em;}
.quote-post .source a:first-child, .cite
{letter-spacing:0;}
.short-quote .quote, .medium-quote .quote, .long-quote .quote
{font-size:{text:Title size}; line-height:autopx; margin:10px 40px 20px 0;}
.audio-post .audio {
display: block;
width:875px;
margin-bottom: 20px;
padding: 0px;
-moz-border-radius: 5px;
border-radius: 5px;}
.chat-post ol {list-style:none; margin:15px 0;}
.chat-post li {margin-left:1.5em; text-indent:-1.5em;}
.chat-post .label {font-weight:bold; padding-right:0.125em;}
.chat-post .speaker {font-style:italic;}
.chat-post .speaker2 .label, .chat-post .speaker4 .label,
.chat-post .speaker6 .label, .chat-post .speaker8 .label
{color:{color:Minor text};}
.chat-post .speaker3 .label, .chat-post .speaker4 .label,
.chat-post .speaker7 .label, .chat-post .speaker8 .label
{text-transform:uppercase; letter-spacing:0.1em;}
.chat-post .speaker5 .label, .chat-post .speaker6 .label,
.chat-post .speaker7 .label, .chat-post .speaker8 .label
{font-family:{font:Heading};}
.day .month {text-transform:uppercase;}
{block:DayPage}.day {font-weight:bold;}{/block:DayPage}
.content.text-post img {
max-width: 100%;
}
.multi {margin-bottom:30px; margin-right:15px; {block:IfCenterall}margin-right:10px; margin-left:10px;{/block:IfCenterall};}
.video embed, .video object, .video iframe {width:875px; height:500px; margin-bottom:-100px;}
.wide_audio iframe {width:875px; }
#comment {
font-size: 10px;
text-align: left;
line-height: 18px;
margin: 0px 0px 0px 0px;
}
#comment a {
text-decoration: none;
color: {color:Caption};
}
#comment a:hover {
text-decoration: none;
color: {color:Link Hover};
}
#dsq-content {
background: rgba(0, 0, 0, .30);
background: url(' ');
padding: 5px 20px 20px 20px;
margin-top: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
a.single_links:last-child { margin-right:0px; }
a.single_links
{display: inline-block; list-style-type: none; margin-right:20px;}
{block:PermalinkPage}
p.answer_form_container { width: 512px; }
ol.notes { width: 875px; list-style-type: none; margin:20px auto; padding: 0; }
ol.notes li.note { background: {color:Notes background}; margin: 0 0 0px 0; padding: 0 4px; }
ol.notes a { color: {color:Links In Notes}; }
ol.notes img.avatar { display: none; }
ol.notes blockquote { margin: 0; }
ol.notes blockquote a { text-decoration: none; }
{/block:PermalinkPage}
a.install {
width: 96px;
height: 20px;
background: url(http://static.tumblr.com/thpaaos/dHHkt0jor/install_theme.png);
display: block;
position: absolute;
top: 26px;
right: 3px;
}
a {
outline: none;
}
{CustomCSS}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
{block:IfLargePhotoset}
<script>
$(document).ready(function(){
$(".photoset").each(function() {
$(this).width('875px');
var newSrc = $(this).attr("src").replace('700','875');
$(this).attr("src", newSrc);
});
$(function(){
var iFrames = $('.photoset');
function iResize() {
for (var i = 0, j = iFrames.length; i < j; i++) {
iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
}
if ($.browser.safari || $.browser.opera) {
iFrames.load(function(){
setTimeout(iResize, 0);
});
for (var i = 0, j = iFrames.length; i < j; i++) {
var iSource = iFrames[i].src;
iFrames[i].src = '';
iFrames[i].src = iSource;
}
} else {
iFrames.load(function() {
this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
});
}
});
});
</script>
{/block:IfLargePhotoset}
</head>
<body>
<div id="container">
<div id="header">
<a href="/">
{block:IfHeaderImage}<h1><img src="{image:Header}" class="logo" /></h1>{/block:IfHeaderImage}
{block:IfNotHeaderImage}<h1>{Title}</h1>{/block:IfNotHeaderImage}</a>
{block:Description}<p id="description">
{Description}
</p>{/block:Description}
<p>
{block:IfCenterlinks}<center>{/block:IfCenterlinks}
{block:HasPages}{block:Pages}
<a class="single_links" href="{URL}">{Label}</a>
{/block:Pages}{/block:HasPages}
{block:SubmissionsEnabled}{block:IfSubmitlink}
<a class="single_links" href="/submit">{SubmitLabel}</a><br>
{/block:IfSubmitlink}{/block:SubmissionsEnabled}
{block:AskEnabled}{block:IfAskLink}
<a class="single_links" href="/ask">{AskLabel}</a>
{/block:IfAskLink}{/block:AskEnabled}
{block:IfCenterlinks}</center>{/block:IfCenterlinks}</p>
</div>
<ol id="posts"><br>
{block:Posts}
<li class="post" id="post{PostID}">
{block:Text}
<div class="meta">
{block:IfCenterall}<center>{/block:IfCenterall}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterall}</center>{/block:IfCenterall}
</div><br><br>
<div class="content text-post">
{block:Title}<h3><span>{Title}</span></h3>{/block:Title}
<div class="text">{Body}</div>
</div>
{/block:Text}
{block:Photo}
<div class="meta">
{block:IfCenterall}<center>{/block:IfCenterall}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterall}</center>{/block:IfCenterall}
</div><br>
<div class="content photo-post">
<div class="photo">
{block:IndexPage}<a href="{Permalink}">{/block:IndexPage}
{block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}
<img src="{block:IndexPage}{PhotoURL-HighRes}{/block:IndexPage}{block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}" alt="{PhotoAlt}">
{block:IndexPage}</a>{/block:IndexPage}
{block:PermalinkPage}{LinkCloseTag}{/block:PermalinkPage}
</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
</div>
{/block:Photo}
{block:Photoset}
<div class="meta">
{block:IfCenterall}<center>{/block:IfCenterall}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterall}</center>{/block:IfCenterall}
</div><br>
<div class="content photo-post">
<div class="photo">
{block:IfLargePhotoset}{Photoset-700}{/block:IfLargePhotoset}
{block:IfNotLargePhotoset}{block:Photos} <div class="single"><img src="{PhotoURL-HighRes}"/></div>{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}{/block:Photos}{/block:IfNotLargePhotoset}
</div>
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
</div>
{/block:Photoset}
{block:Quote}
<div class="meta">
{block:IfCenterall}<center>{/block:IfCenterall}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterall}</center>{/block:IfCenterall}
</div><br><br>
<div class="content quote-post {Length}-quote">
<blockquote class="quote">"{Quote}"</blockquote>
{block:Source}<div class="source">— {Source}</div>{/block:Source}
</div>
{/block:Quote}
{block:Link}
<div class="meta">
{block:IfCenterall}<center>{/block:IfCenterall}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterall}</center>{/block:IfCenterall}
</div><br><br>
<div class="content link-post">
<h3 class="link">{Name}  »</h3>
{block:Description}<div class="caption">{Description}</div>{/block:Description}
</div>
{/block:Link}
{block:Chat}
<div class="meta">
{block:IfCenterall}<center>{/block:IfCenterall}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterall}</center>{/block:IfCenterall}
</div><br><br>
<div class="content chat-post">
{block:Title}<h3>{Title}</h3>{/block:Title}
<ol class="chat">
{block:Lines}<li class="{Alt} speaker{UserNumber}">
{block:Label}<span class="label">{Label}</span>{/block:Label}
<span class="line">{Line}</span>
</li>{/block:Lines}
</ol>
</div>
{/block:Chat}
{block:Video}
<div class="meta">
{block:IfCenterall}<center>{/block:IfCenterall}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterall}</center>{/block:IfCenterall}
</div><br>
<div class="content video-post">
<div class="video">{VideoEmbed-700}</div>
<div class="vidcaption">{block:Caption}{Caption}{/block:Caption}<div class="nocaption"> </div></div>
</div>
{/block:Video}
{block:Audio}
<div class="meta">
{block:IfCenterall}<center>{/block:IfCenterall}<h2>
<a title="link to this post" href="{Permalink}">{DayOfMonth} {ShortMonth}</a>
</h2>{block:IfCenterall}</center>{/block:IfCenterall}
</div><br><br>
<div class="content audio-post">
{block:IfCenterall}<center>{/block:IfCenterall}
<div class="audiobox">
<div class="audio">
{block:AudioEmbed}<div class="wide_audio">{AudioEmbed-640}</div>{/block:AudioEmbed}
</div></div> {block:IfCenterall}</center>{/block:IfCenterall}
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
</div>
{/block:Audio}
<div class="clear"> </div>
</li>
{/block:Posts}
{block:IfDisqusShortname}
{block:Permalink}
<div id="disqus">
<div id="disqus_thread"></div><script type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/embed.js"></script><noscript>View the discussion thread.</noscript>
</div>
{/block:Permalink}
<script type="text/javascript">
//<![CDATA[
(function() {
var links = document.getElementsByTagName('a');
var query = '?';
for(var i = 0; i < links.length; i++) {
if(links[i].href.indexOf('#disqus_thread') >= 0) {
query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
}
}
document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/{text:Disqus Shortname}/get_num_replies.js' + query + '"></' + 'script>');
})();
//]]>
</script>
{/block:IfDisqusShortname}
</div> <!-- .box -->
{/block:Posts}
</div> <!-- .posts -->
<div style="clear: both"></div>
{block:PermalinkPage}
{block:IfShownotesonpermalinkpages}
{PostNotes}
{/block:IfShownotesonpermalinkpages}
{block:PermalinkPage}
<div style="clear: both;"></div>
</ol>
<div id="footer">
<div id="pagination">
{block:Pagination}
<p class="back"> {block:NextPage}
{lang:Next} >>>
{/block:NextPage}</p>
<p class="forward">{block:PreviousPage}
<<< {lang:Prev}
{/block:PreviousPage} </p>
{/block:Pagination}
{block:PermalinkPagination}
{block:PreviousPost}<p class="back">
{lang:Next} >>>
</p>{/block:PreviousPost}
{block:NextPost}<p class="forward">
<<< {lang:Prev}
{/block:NextPost}</p>
{/block:PermalinkPagination}
{block:DayPagination}
{block:PreviousDayPage}<p class="back">
{lang:Next} >>>
{/block:PreviousDayPage}</p>
{block:NextDayPage}<p class="forward">
<<< {lang:Prev}
</p>{/block:NextDayPage}
{/block:DayPagination}
</div>
<br><br />
<center>
<!--{lang:Archive} //
{lang:Random post} //
{lang:RSS}
<br />
<font size="2"><i>{lang:Powered by Tumblr 2} -
Quite Big theme by George Dunkley</i></font></center>-->
</div>
</div>
</body>
<div style=" opacity:0.0;">
</html>
Suggest changes to be done to remove the 2 buttons.
I'm not into web designing.
Disable Tumblr Controls
To disable the top right controls ( follow abc / user ) you can disable the promotion option on the customise screen.
Log in to Tumblr
Click Settings
Click Customise
On the left hand pane, click Advanced
Uncheck Promote Tumblr
This will disable the Tumblr Controls for none Tumblr users, however, Tumblr users will still get the controls.
The reason, these controls are really a short cut for a logged in user, and I would advise against hiding them, however this is possible. If you add the following to your Custom CSS box:
#tumblr_controls, .controls {
display: none !important;
}
Normally I wouldn't condone using !important but the Tumblr embed really does some funky things, so in this case brute force is needed.
Hope that helps.