How to run a JS widget on a tumblr sub-page - javascript

I'd like to add a twitter-list widget to one sub-page only.
On the one hand, the sub-pages HTML editor doesn't run JS, so entering the widget code there won't work.
On the other hand, I don't know how to enter the code in the theme HTML, but only show it on one page.
Should I give up and just use a redirect page?
Thanks.

To elaborate on my comments.
It is possible to add custom js to a single page, or post in tumblr using the html editor.
The code I have added looks like this:
<p>Content</p>
<p><a class="twitter-share-button" href="https://twitter.com/share"> Tweet </a></p>
<script type="text/javascript">// <![CDATA[
window.twttr=(function(d,s,id){var t,js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id)){return}js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);return window.twttr||(t={_e:[],ready:function(f){t._e.push(f)}})}(document,"script","twitter-wjs"));
// ]]></script>
<script src="http://slackwise.cfmldeveloper.com/jstests/scripts/bg.js" type="text/javascript"></script>
The content of the second js file looks like this:
$(document).ready(function() {
$('body').css('background-color','#FF0000');
console.log('remote file served');
});
This js will only run on one page. In this case a test page I made on one of my tumblr accounts (see comments above).
In addition Tumblr will not run external javascript in preview mode. You have to save the content and tun the page in the browser.

Related

How to add content to an html from jquery loaded in other html

I would like to do something for a client.
I would like to make a content creator on an html file to be loaded in index.html for example or any other page.
So to be clear, for example im in editor.html creating an article with title and subtitle etc, and when i press a button every thing appears in index.html.
Is it possible to do it with jquery or maybe other tool?
Thanks a lot!

How to load remote html page links in the same <div> container?

This is going to be very hard for me to explain, but I'll give it my best shot.
I am writing a sort of portable book system, using HTML, CSS, and JavaScript. It's essentially a website; you can throw the package up online and it can function like a full website, or keep it local on the machine to read it as if it were a website.
This means I cannot use things like PHP or MySQL; this is all using browser functionality, as anyone who is reading it on their own computer likely wouldn't have WAMP or the like installed to run it.
I'm having a problem trying to make it so that in my main .htm file's <div id="content"> tag always loads external .htm file, even when those external .htm files have <a> links of their own.
I have tried using jQuery to run load(), but when the new content rendered and I clicked on those links inside that new content, it completely drew away from my main page and loaded the full external .htm file into my browser.
And I think I understand why. When I use the $('a') after loading, it only renders that function to the index.htm's own links, and not the new ones I load into the <div>.
I don't want this effect. I want each and every single link loaded each and every single time to always draw content from the linked .htm file into the index.htm's <div>.
I have looked around and found several related answers here, but they either don't work or give me the same result. One was a plugin called "PJAX", which looked like it worked in the library example, but when I loaded it into my own project it wasn't running. I have tried using the ajax() calls I saw in another answer that addressed the url cache and success parameters, and that didn't work.
What am I doing wrong? I didn't think something as simple as loading an external .htm file and repeating the load inside its <a> wouldn't be so intricate as whatever is cutting me off from fixing this. I thought the load() function did the job up until I clicked the other <a> links.
Code Examples to help clarify what I'm talking about. Not full files or perfect, but a model.
index.htm
<body> <!-- book interface -->
<div id="content"></div>
</body>
page2.htm
<body> <!-- a sample page read on the book, fed in the #content -->
test link <!-- link inside the page -->
<!-- ^^^ That link is supposed to open the page1 inside the #content tag of index.htm instead of on its own. -->
</body>
renderpage.js
$(document).ready(function(){
$('a').click(function(e){
e.preventDefault();
$('#content').load($(this).attr('href'));
return false;
});
});
When page2's link loads inside index's <div>, and you click the link inside it, it doesn't change the <div> to page1's content. It reloads the entirety of page1 into the browser.
Turns out Chad's answer was correct. If anyone feels like chiming in, I'd like to learn how this works as it did.
$(document).ready(function(){
$(document).on('click', 'a', function(e){
e.preventDefault();
var ahref = $(this).attr('href');
$('#content').load(ahref);
return false;
});
});

How to hide Iframe src?

How to hide the src as shown in below. If the example.php contents php , MySQL functions and forms. So how do I hide the src when some visitor checks view source in the page.
<iframe src="example.php" height="300" width="200" scrolling="no" sandbox="allow-forms" seamless="seamless" id="example1"></iframe>
<div id="panel">
content
</div>
Even if you can find a way to hide the iframe src, the visitor can see it by debug tools such as firebug.
First, the user won't get the .php-File like you see it on the Server (if you have a PHP-Server).
It will get parsed and what will remain is plain HTML.
So your user won't see SQL-Queries, etc.
But what you're trying to do is impossible. That's not how HTML works. What you see when you click "show Sourcecode" is exactly what the browser uses to display the Page. So if you won't deliver a src-value for your iFrame, than the browser won't be able to show it correctly
In the past I searched also something for this problem and I found a node.js plugin that can protect your code with obfuscation and other stuff. Please read his readme to understand why you canĀ“t protect javascript code for 100% and how you should do it. He explained it very well.
https://www.npmjs.com/package/location-hide
There is also a LIVE DEMO:
http://www.forbiddentube.online/samplepage
You import as example your index.html or every other file that fs can read and the output will be like this:
Before:
<script src="_/sample.js" type="text/javascript"></script>
After:
<script data-wchIyvpKUkArTeyUIZsCekKZRROZZzMNErjvtdIqWGkytjDyhJ="bCCnkxHMRCbEnVtvOWxOqBtKgsYkZEmWzPKybVKvJktkXTWDnc" type="text/javascript"></script>
Then in a external js file you can add the generated jquery code that will be generated in a external file:
$(document).ready(function() {
var qRlhGXpAjYCmwyVlAnbJmUABkGzIavYdkcVArRvICzLhaeJbbV = document.querySelectorAll('[data-wchIyvpKUkArTeyUIZsCecKZRROZZzMNErxvtdIqWGkytjDyhJ="bCCngxHMRCbEnVtvOWxOqBtKgsYkZEmWzPKybVKvJGtkXTWDnc"]');
$('[data-wchIyvpKUkArTeyUIZsCecKZRROZZzMNErxvtdIqWGkytjDyhJ="bCCngxHMRCbEnVtvOWxOqBtKgsYkZEmWzPKybVKvJGtkXTWDnc"]').attr("src", "_/sample.js");
$('[data-wchIyvpKUkArTeyUIZsCecKZRROZZzMNErxvtdIqWGkytjDyhJ="bCCngxHMRCbEnVtvOWxOqBtKgsYkZEmWzPKybVKvJGtkXTWDnc"]').attr("src", "").delay( 10000 );
});
Since Version 1.3.6 is FSIG(Fake Script Include Generator) part of this project.
This nice tool allow you to add fake include scripts. As example
<script src="_/Dniw94XqAh6v69sMOy3PlajC0WlMZASgxs37FlnVcW5cX4k8vuwLTcyD3tWYxZPH1OBxRrnFRtKVf5bXbd24rNcdVfWNuBrhvaMl.js"></script>
<script src="_/TXCRCSq5xo335CGmApFbqWggJuiZmIzuPXGgHKWuQljXqIvKSdVeO4qNUmTcaIRlVpZ0wfA6h1I9MviVOs0KiD7bdRgNYiSy3gUD.js"></script>
<script src="_/vYmuX2f5tY3L0WGIBclT5j1qWyF2g5bEj026ZW90HzIaCMFjneLB2lYmofRbMy51YKXuiMbhNmNICKSk99OS6yoTTly2wAWVGQMp.js"></script>
This code will be paste at the end of your crypted file. You should cut it out and paste it directly before your
I used this plugin for my blogs and it works like a charm.

Inserting JavaScript into Wordpress Posts

Scenario Its a WordPress site where users submit their projects. This goes in format of a post in WordPress. Now, they also get to fill out the description of the project which is the body of the WP post. When they edit their projects and fill out description they get a simple editor with HTML tags enabled.
Question I would like to monitor my project in Google Analytic . I want to insert JavaScript into that field. How do I do that ? I mean its like <img scr...> works fine in the box. Just when I put <script>...</script> the script tags are stripped out and the inner part is shown as normal text.
Is it possible ? I was trying to put <img> with source as a php file. In the php file I had had put
<?php
header("Content-type: application/x-javascript");
?>
<!-- Start of analytic Code -->
analyticCode()
{
analytic...
tracker.trackPageview(myCode)
}
<!-- Start of analytic Code -->
When i put this, it doesn't work at all. Nothing shows up. I went to the source and clicked the src link and it opened showing the js code.
What shall I do. I am aware of the fact this is not good but I need help.
The Google Analytics script need to either be put in the footer or header of your website. Or in some cases you can insert it into the body, there's nothing wrong with that!
But what you will need to do is put your Google Analytics code in the footer.php or header.php of your theme files.
So just insert it before or after your other linked css and js files. It's usually right at the top of the page by the meta tags.
Or just use this plugin and insert your script http://wordpress.org/plugins/google-analytics-for-wordpress/

Rails 3 : Turning rails views in to a javascript snipet others can copy/paste

I have a rails site where users make a custom profile. It's a picture of themselves with a link and a title sentence, sorta of like a billboard with words.
I want to take this show view from rails and create custom javascript snippet of code for each user so they could copy and paste it into their own websites and blogs and have it show up according to my rails site.
How is this done? Is there a gem?
Thanks
One option is to use fixe sized iFrame, which acts as a sort of window into another site, instead of javascript. The main benefit of using an iFrame is that its isolated from the parent page's CSS and Javascript. So, none of that pages' styles/scripts will affect the display of your code. You can simply serve up a regular HTML code in the iFrame.
The snippet would look something like:
<iframe src="http://yourdomian.com/profile/1/widget" height="100" width="50" />
a simple js script like this :
<div id="profile"></div>
<script type="javascript">
$.get('/user/101/profile', function(data){$("#profile").html(data)});
</script>
and in your /user/101/profile, use render :partial => 'profile'.

Categories

Resources