Develop Reference

Is there a way to change a style/html on a specific tagged page on Tumblr blog?

I have a pretty good understanding of HTML & CSS, but I am having trouble with the Tag Page feature of tumblr. On my blog for every tagpage, I have a heading being grabbed from the name of the tag. I do not want to change the URL. I want to change the heading on the page, but that heading is being grabbed from the {tag}. The tag is vld. Instead of the page saying vld, I want it to say "All Designs". Pretty much overriding the {tag} for just the /tagged/vld tagpage. The TagPage code is:
{block:TagPage}
<div class="tagtitle">{tag}s</div>
{/block:TagPage}
For /tagged/vld, I want the heading on the page to be "All Designs" instead of "vld". how can I make this change for this specific tagpage?
I have tried
{block:TagPage}
<div class="tag" id="{Tag}">All Designs</div>
{/block:TagPage}
My code being:
{block:TagPage}
<div class="tagtitle" id="vld">All Designs</h2>
{/block:TagPage}
I have also tried
<script>
switch(window.location.pathname) {
case "/tagged/vld":
$('.tagtitle').text('All Designs');
break;
}
});
</script>
But neither of the methods have worked - everything is still showing the tag as the heading. You can see my blog at vintagelovedesigns.tumblr.com

OK, I have a test version working here using one of your themes:
https://madox-test.tumblr.com/tagged/vld
Your switch statement should be throwing an error as you have an additional closing bracket.
The script should look like this:
<script type="text/javascript">
$(document).ready(function(){ // if you are using jquery it is a good idea
// to wrap code in a document ready function
switch(window.location.pathname) {
case "/tagged/vld":
$('.tagtitle').text('All Designs');
break;
};
});
</script>
Hope this helps.

Bootstrap tooltip doesn't work (whatever I try)

I'm trying to use Bootstraps tooltip. But I just don't get it working. Its not showing up. Whatever I try. I got all latest Jquery, Javascripts loaded. I tested if they actually work by the URL.
I followed many tutorials, read documentations, but no luck :/
This is my complete code with Javascript toggle:
https://gist.github.com/matthijs110/1e7fc36902b0da5184aa
To save you the searching, here is the Script:
<script>
$(function(){
$('#domain').tooltip(animation)
})
});
</script>
And here is the text where it should toggle on hover:
<h4 id="domain" data-toggle="tooltip" title="first tooltip">play.domain.com</h4>
I just don't know what is wrong. I also tried the A tag. But I've read somewhere that H4 etc.. works too.

You must use:
jquery-1.8.3.js
bootstrap.min.css
bootstrap.min.js
I edited codes:
<div class='my_div'>
hover me
</div>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function(){
$(".marker").tooltip({placement: 'right'});
});
});//]]>
</script>
view on http://jsfiddle.net/ytpAy/314/
Edited:
For change the tooltip directions, on placement: 'right' use bottom , top , left or right

Why doesn't the following piece of jquery run?

I'm trying to fetch some html with jquery/ajax, load it into a div, then call the show method with the blind effect on it. But I can't figure out what's going wrong for the life of me.
$(document).ready(function() { // The relevant jQuery
$("#effect").hide(); // Make sure the div I'm going to show is not visible first off.
$("#foo").click(function(){ // foo is a button
$.ajax({url:"after.html", success:function(result){ // Grab the html I want. (just an <h1> tag)
$("#effect").html(result).show("blind", {direction: "horizontal"}, 400); // When I comment out this line it works, but with the exception of the id's to select it's exactly the same as in another working page.
alert("loaded after.html...");
}});
});
});
HTML:
<div class="narrow">
<p><input type="submit" id="foo"/></p>
</div>
<div id="effect" style="background-color:white; float:right; height:400px; width:400px;">
</div>
Without calling the $("#effect").html(result).show("blind", {direction: "horizontal"}, 400); line, everything runs fine. However, with that line it says Uncaught SyntaxError: Unexpected end of input in the console. (Chrome)
I was using this page as a reference when I ran into this problem.
What's going on here?

Blind effect is a part of JQueryUI. In the tutorial you shared, you can see that code. Are you sure that something like jquery-ui-1.7.2.custom.min.js is referenced on your page as:
<script type="text/javascript" src="/jquery/jquery-ui-1.7.2.custom.min.js"></script>

Javascript, why wont my onclick function work

Returning to JavaScript after a long break and I can't get this to work. I must be doing thing really stupid because it works fine with an onclick('') attached to the button in the HTML file just not when I try and do it in the script.js
I've tried to include everything that should be needed but if i've missed something let me know.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"</script>
<script type="text/javascript" src="script.js"></script>
<div class="application">
<button type="button" class="solution" id="webSolution">
<p>
Website Solutions
</p>
</button>
<button type="button" class="solution" id="mobileSolution">
<p>
Mobile Solutions
</p>
</button>
</div>
<div class="mobileSolutionDetails">
<h3>
Mobile Solution
</h3>
price details
</div>
<div class="webSolutionDetails">
<h3>
Website Solution
</h3>
price details
</div>
and my javascript
$(document).ready(function() {
$('#webSolution').onclick(function() {
alert('webSolution');
$('.webSolutionDetails').style.display = 'block';
$('.mobileSolutionDetails').style.display = 'none';
});
$('#mobileSolution').onclick(function() {
alert('Hey!');
$('.mobileSolutionDetails').style.display = 'block';
$('.webSolutionDetails').style.display = 'none';
});
});
Any help would be great

It doesnt like onclick for one. Changed to:
.on("click", function(){});
instead of
.onclick(function(){})
if you wanted to do it your way, you would want to do
.click(function(){});
on a similar note, your CSS tags are wrong for jquery.
use:
$(item).css({display:"block"}); //instead
Here is a fiddle. http://jsfiddle.net/qMsm2/

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
Your script must come after jquery.min.js, otherwise $ won't be defined when you try to use it. You're also missing the end > in the jQuery script tag.

jquery uses "click" as function.
http://api.jquery.com/click/
You should use it like this:
$('#webSolution').click(function() {
});
Check this fiddle: http://jsfiddle.net/4CNML/

Two ways for you to write it.
With .on (this is becoming the most favored way it seems)
$('#mobileSolution').on('click', function() {
alert('Hey!');
$('.mobileSolutionDetails')..css({display: 'block'});
$('.webSolutionDetails').css({display: 'none'});
});
or with .click
$('#mobileSolution').click(function() {
alert('Hey!');
$('.mobileSolutionDetails').css({display: 'none'});
$('.webSolutionDetails').css({display: 'none'});
});
Also, since your using jQuery the .style is invalid. Use .css like I did above.

How can I execute the code inside a <script></script> only when I'll show its container?

I have this code :
HTML
Show Agency
<div id="invisibleDiv">
<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/CompanyProfile" data-id="1035" data-format="inline" data-related="false"></script>
</div>
jQuery
$("#showDiv").click(function () {
$("#invisibleDiv").show();
});
CSS
#invisibleDiv
{
display:none;
}
When I load the page, I see the scripts loaded from external source, also if the div is hidden. The scripts call with some API and generate HTML/Javascript.
Well, what I'm looking for is to force the script to be unloaded if the parent is hidden; than, when I'll show it (through the link), load the script inside the div.
How can I do it? I'll avoid AJAX.

UPDATED:
DEMO: http://jsfiddle.net/HqeD2/
Show Agency
<div id="invisibleDiv">
<script type="IN/CompanyProfile" data-id="1035" data-format="inline" data-related="false"></script>
</div>
$(function() {
$("#showDiv").click(function() {
$.getScript("http://platform.linkedin.com/in.js");
});
});

If I understand it correctly, you just want to delay the running of arbitrary scripts that are provided by the third party? Would something like this work?
<div id="invisibleDiv" style="display:none">Please wait while we load some stuff from Facebook...</div>
$("#showDiv").click(function(){
$("#invisibleDiv").show().load("http://facebook.com/whatever/andStuff");
});
Has the downside that you can't pre-fetch the HTML content, but I don't see any other way.
EDIT: ok, it looks like you edited the question whle I was typing this up... so YOU control the content of invisibleDiv, but you want to delay the loading of in.js? try this...
$("#showDiv").click(function(){
$("#pleaseWaitDiv").show();
$.getScript("http://platform.linkedin.com/in.js", function(){
$("#pleaseWaitDiv").hide();
$("#invisibleDiv").show();
});
});
Again, you have to make the user wait while the script downloads, hence my addition of pleaseWaitDiv
More edit:
New up a script node and append it.
var scriptNode = $("<script></script>")
.attr("type","IN/CompanyProfile")
.attr("data-id","1035")
.attr("data-format","inline")
.attr("data-related","false");
$("#invisibleDiv").append(scriptNode);
$.getScript("http://platform.linkedin.com/in.js", function(){
$("#pleaseWaitDiv").hide();
$("#invisibleDiv").show();
});

You can bind it to your showDiv click function, inline scripts are processed right away...the only other thing I can think of is to have the script be loaded via ajax which you don't want.

Try this :
http://jsfiddle.net/sXJa6/6/