I'm developing a Tumblr site.
When the user clicks on the "read more", the content is revealed and expanded on the same page,how can I do this?
As Tumblr is reworking the UI for editing, the Read More tool may have been hidden from you. Reset your preferences to use the Rich Text Editor to edit posts. The Read More tool is between the bulleted list tool and the image tool. See the screenshot.
Ok, It's a simple script, but it works. Add this code in your theme before tag (or as it should be):
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.spa').click(function(){
$(this).parent().children('div.spb').toggle('normal');
return false;
});
});
</script>
<style type="text/css">
.spb{display:none;}
.spa{cursor:pointer;display:block;}
.spa:after{display:block;content: "{lang:Read more}";margin-bottom:10px;}
</style>
Now, when you write a new text, add to it those things.
Text before Spoiler
<div class="spb">
Text after Spoiler
</div>
Related
I'm trying to make all picture posts on my homepage not clickable, so they can't link to the permalinks. (I just want them to stay as miniatures with the hover cycle effect already provided by the theme)
I've tried removing {LinkOpenTag} and {LinkCloseTag} from:
{block:Photo}
<div class="wide-sizer">
<div class="image">
{LinkOpenTag}
<img src="{block:PermalinkPage}{PhotoURL-HighRes}{/block:PermalinkPage}{block:IndexPage}{PhotoURL-500}{/block:IndexPage}" alt="{PhotoAlt}"
data-high-res="{PhotoURL-HighRes}"
data-width="{PhotoWidth-HighRes}"
data-height="{PhotoHeight-HighRes}"
/>
{LinkCloseTag}
</div>
But photos and photosets are still clickable.
This is my page: http://woodstudiofr.tumblr.com
I'm using the "Spectator Theme".
UPDATE: ok so i tried removing as data-permalink={Permalink}as lharby suggested, but now all the links redirect to /undefined.
Any ideas?
thanks again for your time !
As mentioned in my comment, the data-permalink attribute has been removed, but there is still some custom javascript which is casing the url to be returned undefined.
Go to the bottom of your template, before the closing <body> tag and add this code:
<script type="text/javascript">
$(document).ready(function(){
$('.post').unbind('click').click(function(){});
});
</script>
(Basically instead of binding the post to a click function which is in the custom javascript we are now attempting to unbind it on click).
I tested it in the browser and it looks to be working (although a couple of other methods I thought would work didn't).
EDIT
In order to change the cursor on the post element. Remove the clickable class from the .post div from the template (if you can, if it is hard coded in).
Alternatively inside the style tags at the bottom, add the following css:
.post-grid .post.photo.clickable a,
.post.clickable {
cursor: default;
}
I want to insert custom html code in document via code button (like this for example taken from bootstrap + some JS code):
<link rel="stylesheet" ref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
console.log("Hello world");
});
</script>
I wan't this to be in the source code of the document (not in text) so it can be rendered properly.
I have tried many settings (it would be long list, I spent whole afternoon with this smile) but nothing works, i.e. code is stripped / changed when I close the code window and open again.
for the context, I use TinyMCE as editor for CMS and sometimes there is need to add extra style or javascript library
So I would be very grateful if somebody could post tinymce 4.2 init settings which allows this... or say if it's even possible
You may use the tinymce command mceInsertContent:
my_editor_instance.execCommand('mceInsertContent', ui, '<my>html</my>');
I have a tumblr blog on which I post short webcomic stories. I want that when I post a few pages in a single post, they appear small, but when I click it enlarges and one can browse through the comic.
I would like to have something similar to this.
How can I set it up?
You can achieve this by implementing the Pirobox plugin in your theme: http://www.pirolab.it/pirobox/
You will then need to edit the photoset code in your theme to something like this:
{block:Photoset}
<div class="photo">
{block:Photos}
<a rel="gallery" class="pirobox_gall" href="{PhotoURL-HighRes}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></a>
{/block:Photos}
</div>
{/block:Photoset}
And make sure you also adjust the photo-post block so they also open in Pirobox when clicked.
{block:Photo}
<div class="photo">
<a rel="single" class="pirobox" href="{PhotoURL-HighRes}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"/></a>
</div>
<div class="caption">
{Caption}
</div>
{/block:Photo}
Add a link to the Pirobox js file in the "head" of your theme.
<script type="text/javascript" src="http://static.tumblr.com/ajtokgb/DfDluuzg8/pirobox_extended.js"></script>
Add this before the "head" or preferably in the "body" section near your other scripts.
<script type="text/javascript">
$(document).ready(function() {
$().piroBox_ext({
piro_speed : 700,
bg_alpha : 0.5,
piro_scroll : true // pirobox always positioned at the center of the page
});
});
</script>
And you will need to style it with CSS of course. You can also look into the "fancybox plugin" which does something similar.
Now when people click on a photo from one of your posts, an enlarged version of the picture will open up and they will be able to browse through the pictures from that specific post.
Note: This method will only work with photo posts. Every theme is different, you will need to adjust the code to suit your theme.
I found this example http://wearevanity.co where the new ads are loaded in every page.
In addition to the maximum number of posts allowed by Tumblr. The ads are automatically adjusted to the layout of the page, which makes them add to the look of the blog.
Does anyone know how to achieve this? If so, would you please explain it to us, step by step?
Use {block:Post6} and {block:Post12} to show content on the 6th and 12th posts. Documentation here
Example usage:
{block:Posts}
{block:Photo}Your content blocks here{/block:Photo}
{block:Video}Your content blocks here{/block:Video}
{block:Post6} Your ad code here{/block:Post6}
{block:Post12}Your ad code here{/block:Post12}
{/block:Posts}
Add this
{block:Post6} Your ad code here{/block:Post6}
{block:Post12}Your ad code here{/block:Post12}
above {/block:Posts} to add ads.
I found the solution and the ads look great, and have their own photo-border, adding to the look of the blog. I used bfred's method and placed the ad code right before
{/block:Posts}
However, even though the ads were being loaded after posts 6 and 12, they were inside those posts, sharing the same photo-border, and that didn't add up to the look of the whole theme. So I looked for the line of code that was causing the photos to be organised and have their own space on the grid. In my case this was the line:
<article id="{PostID}" class="entry{block:HasTags}
{block:Tags} tag-{Tag}{/block:Tags}
{/block:HasTags}{block:Photo} photo-border{/block:Photo}">
Once I found it, after trying different placements, I finally placed this line inside
{block:Post6} {/block:Post6}
I also had to change the size of the ads so that the width could match the width of the photo-posts on my blog. So the final code looks like this:
{block:Post6}
<article id="{PostID}" class="entry{block:HasTags}
{block:Tags} tag-{Tag}{/block:Tags}
{/block:HasTags}{block:Photo} photo-border{/block:Photo}">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- page -->
<ins class="adsbygoogle"
style="display:inline-block;width:264px;height:250px"
data-ad-client="ca-pub-7147439154267017"
data-ad-slot="1006289886"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</article>
{/block:Post6}
{block:Post12}
<article id="{PostID}" class="entry{block:HasTags}
{block:Tags} tag-{Tag}{/block:Tags}
{/block:HasTags}{block:Photo} photo-border{/block:Photo}">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- page -->
<ins class="adsbygoogle"
style="display:inline-block;width:264px;height:250px"
data-ad-client="ca-pub-7147439154267017"
data-ad-slot="1006289886"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</article>
{/block:Post12}
I need to show details on the popup. I don't have any idea how to do this. I need to do it in a MVC3 Razor view.
my Controller-
public ViewResult ViewDetail(Int32 id)
{
var q = from p in db.accs
where p.id == id
select p;
return View(q.FirstOrDefault());
}
my View-
<td># Html.ActionLink("View Detail", "ViewDetail", new { id=item.id }) </td>
use the Jquery UI ModalForm to show up your data.
Say you want to display the following in Modal pop-up of jquery .
<div id="displayinmodal">
<input type="file" id="file" name="file" />
<input type="submit" id="submitdata" value="Upload" />
</div>
Now write your jquery like this.
<script>
$(document).ready(function(){
$("#displayinmodal").dialog({ //displayinmodal is the id of the div you want to display in modal popup
autoOpen: true
});
});
</script>
That's it. you should get Modal popup in your browser.
Hope this helps
This kind of task isn't really what ASP.NET MVC / Razor does. Consider using a Javascript library like JQuery UI Dialog. You have to add several of the JQuery UI scripts to your page, but the payoff is a very simple API; you can create a basic dialog out of any HTML element (say with id mydiv) with one line of code:
$( "#mydiv" ).dialog();
And of course there are customizations and themes you can apply.
Of course, you could simply use the Javascript:
alert("my details here");
to get a basic modal popup, but I'm guessing that's not what you want.
If you want a simple no frills modal (with not much content) you can use a JavaScript alert like so:
alert('Hello from a modal popup');
If you would like a prettier option a common solution is to use jQuery UI's dialog which allows for a modal option. Take a look here for a demo of what you get with this option:
http://jqueryui.com/demos/dialog/#modal
The code is pretty simple; the below should do everything for you using Google's CDN as a source for the scripts and stock jQuery UI CSS:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function() {
$( "#details" ).dialog({
modal: true
});
});
</script>
<div id="details">
Hello from a modal popup
</div>