so I am running a Blogger blog and I have just stumbled upon a website that has this code that makes it so that when you insert the tag inside your post's html code, it will display the ad unit.
The code that makes it all work is this:
<div expr:id='"aim1" + data:post.id'></div>
<div style="clear:both; margin:10px 0">
<!-- Your Ad code here -->
</div>
<div expr:id='"aim2" + data:post.id'>
<data:post.body/>
</div>
<script type="text/javascript">
var obj0=document.getElementById("aim1<data:post.id/>");
var obj1=document.getElementById("aim2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/\x3C!-- adsense --\x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>
So the problem is that if I don't insert a <!-- adsense --> comment inside the post's html, the ad unit will display on top of the post right below the title by default. I do not want it to do that.
What do I need to change? I've tried changing and removing some lines but it either ends up in disasters or I somehow break the code and it doesn't work at all.
Related
I am trying to figure out how to loop my jQuery/Ajax script to load two WordPress posts based off of each WordPress post ID in a div tag, so the Ajax URL loads based upon the ID tags.
You can see my example below. I am using the WordPress News blog as an example of the feed.
https://jsfiddle.net/jdcool279/7L361ru0/17/
I figured out how to load one feed based upon the post-id within the tag, but I can't seem to figure out how to load two feeds via the div tag. To see an example of single feed, please uncomment the script tag within the fiddle. Also, would it be better to change "fetch_comp_content" id tag to a class instead of an id, since I will be needing to include it twice?
Load multiple posts by div post-id:
<div class="col-md-6">
<div class="container">
<div id="fetch_comp_content" post-id="6810"></div>
</div>
</div>
<div class="col-md-6">
<div class="container">
<div id="fetch_comp_content" post-id="6848"></div>
</div>
</div>
Instead of loading 1 post via the script tag:
<script title="true" id="comp_cont_init" post-id="6810"></script>
I would also like to note that the script tag actually loads the script to run the feed. I did not include that in my fiddle, as I wanted to show the JavaScript code.
Any help on this would be much appreciated!
Thank you.
Two quick issues:
You can't repeat Id's in a page, they are unique by definition. use
class instead
You aren't making the requests in the each loop where you have access to specific element instances and the specific post id's from elements
Here's a minimalistic version of what you are trying to accomplish. All I have rendered is the title for the posts.
Note it is better to use data- attributes also
$('.fetch_comp_content').each(function() {
var $el = $(this),
postId = $el.data('post-id'),
urlstring = 'https://wordpress.org/news/wp-json/wp/v2/posts/' + postId;
$.getJSON(urlstring).then(function(data) {
var title = data.title.rendered
$el.append('<h3>' + title + '</h3>');
}).catch(function() {
console.log('Bad request')
})
});
.fetch_comp_content { border:2px solid #ccc; margin:10px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">
<div class="container">
<div class="fetch_comp_content" data-post-id="6810"></div>
</div>
</div>
<div class="col-md-6">
<div class="container">
<div class="fetch_comp_content" data-post-id="6846"></div>
</div>
</div>
I run a site at http://chasemccoy.net/, and on the desktop I serve an advertisement in the sidebar. This comes from some given JS code from the ad network.
The site loads a custom layout when viewed on an iPhone. I need to place that ad into the footer of the site when it's displayed on a mobile device. I am using media queries to change the mobile layout.
My initial solution was to add the JS to the footer, and just use display: none; on the desktop version. However, the JS will not load into the site twice. I basically news a way to prevent the JS from loading at all on the mobile version until it hits the footer code.
Any easy fix for this? I am not a JS wiz by any means. Thanks for your help.
Edit: Here is the JS for the ad:
<script async type="text/javascript" src="//cdn.yoggrt.com/yoggrt.js?zoneid=1353&serve=C6SD52Y&placement=chasemccoynet" id="_yoggrt_js"></script>
That is simply pasted into the place in the HTML where I would like it to appear. The only problem is that the browser will not load more than one instance of the code.
Edit: Here is an outline for the sidebar.
div id="sidebar">
<div class="gravatar">
<img alt src="avatar.png" class="avatar avatar-100 photo" height="100" width="100">
</div>
<ul>
<li>Start Here</li>
<li>Colophon</li>
<li>Archive</li>
<li>RSS</li>
</ul>
<!-- Yoggrt.com Zone Code -->
<script async type="text/javascript" src="//cdn.yoggrt.com/yoggrt.js?zoneid=1353&serve=C6SD52Y&placement=chasemccoynet" id="_yoggrt_js"></script>
<!-- End Yoggrt.com Zone Code -->
</div> <!-- Sidebar -->
Just copy the HTML codes. Not JS codes. And use your same display: none; method.
I mean use the HTML codes twice. But don't use the JS codes twice.
You have a few choices. One would be to create the script nodes dynamically. In your sidebar you need a script node with something like this (not tested):
if( ! navigator.userAgent.match(/iPhone/i)) {
var aScripts = document.getElementsByTagName('script'),
elContainer = aScripts[aScripts.length - 1].parentNode,
elScript = document.createElement("script");
elScript.type = "text/javascript";
elScript.src = "http://chasemccoy.net/wp-content/themes/lessismoresidebar/js/retina-1.1.0.js"
elContainer.appendChild(js);
}
More here.
I try to make some kind of ads rotator as follows:
<html>
<head>
<title></title>
<style>
body {
margin:0;
padding:0;
}
</style>
<script>
function fillBoard() {
s = document.getElementsByClassName('slots');
board = document.getElementById('board');
board.innerHTML = s[0].innerHTML
alert(board.innerHTML);
}
</script>
</head>
<body>
<div id="board" style="width:160px; text-align: center; margin:0">
</div>
<div class="slots" style="display:none">
<!-- THE PROBLEM IS HERE -->
<!-- Begin Hsoub Ads Ad Place code -->
<script type="text/javascript">
<!--
hsoub_adplace = 1310003403401506;
hsoub_adplace_size = '125x125';
//-->
</script>
<script src="http://ads2.hsoub.com/show.js" type="text/javascript"></script>
<!-- End Hsoub Ads Ad Place code -->
</div>
<div class="slots" style="display:none">
<img src="http://lorempixel.com/160/90/sports/1/" />
</div>
<div class="slots" style="display:none">
<img src="http://lorempixel.com/160/90/sports/2/" />
</div>
<div class="slots" style="display:none">
<img src="http://lorempixel.com/160/90/sports/3/" />
</div>
<script>
fillBoard();
</script>
</body>
</html>
In the code above:
There is a div with id board to act as a board that displays contents.
The board should be filled with data supplied from other hidden divs with class name slots using innerHTML property.
To do the above a function named fillBoard() is defined in the head section of the page and then called at the end of it just before closing </body> tag.
What is happening?
The hidden divs slots works fine with divs that contain images. However, in the first div there are a javascript code that should generates ads from an ads network which it does not work.
I expect that the javascript code of the ads network should fill its div with data, then the calling of fillBoard() will just copy its content to the board div. However, this is does not occur!
I need to know how could I overcome this issue?
A live example is found here
You can just show the desired hidden div and it's usually a better practice than copying DOM content. If you make sure to only show one of the hidden divs at a time you can show the image always in the same place.
Try this to show the first "slots" element:
s[0].style.display = 'block';
Ok so after some more digging I've found the issue, although I don't have an easy solution at the moment.
The js file show.js is generating some ad content inside of an iframe for you, which you are placing in the first 'slots' div. Simple enough. When you are setting the content of the board to the content of the first slots class, an iframe is being created in the board div but without the same content.
After some searching it seems that innerHTML of an iframe will not copy the contents of the iframe if it comes from a domain other than the page domain for security reasons.
It seems to me that the solution at this point is to either show and hide the slots divs like Zhertal suggested or you can possible find some other way to physically move the content of the slots div into board, but this may still be a violation of the same security concern. I'm going to keep digging and I'll edit this answer if I find anything more.
Reference SO posts:
Get IFrame innerHTML using JavaScript
Javascript Iframe innerHTML
I have an EE site that has a flickrshow gallery on it. I would like to create a channel field to edit the flickr set id. The problem is that ee tags are opened and closed with curly brackets {ee_tag} so the js gets broken.
is there a way to EITHER use a different ee tag OR to have the js fetch the set id from a hidden (display none) div element. I could then put the ee tag in the hidden element allowing the cms to manage the id. Code:
<!-- flickrshow -->
<div class="example" id="cesc">
<p>Please enable Javascript to view this slideshow</p>
</div>
{exp:channel:entries channel='flickr'}
<script src="/js/flickrshow-7.2.min.js"></script>
<script>
var cesc = new flickrshow('cesc', {
autoplay:true,
'set':'{flickr_set}'
});
</script>
{/exp:channel:entries}
<!-- end flickrshow -->
above with ee tags in js code. Bellow with js referencing hidden div:
<!-- flickrshow -->
<div class="example" id="cesc">
<p>Please enable Javascript to view this slideshow</p>
</div>
<script src="/js/flickrshow-7.2.min.js"></script>
<script>
var cesc = new flickrshow('cesc', {
autoplay:true,
'set':'=(#hidden_div value)'
});
</script>
<!-- end flickrshow -->
<div id="#hidden_div">
{exp:channel:entries channel='flickr'}
{flickr_set}
{/exp:channel:entries}
</div>
I dont know enough js to further complete the second example.
Thanks for any suggestions
Your Flickr set ID is outputting properly in the template, but you have your flickr_set field set to XHTML formatting in ExpressionEngine, so it's being wrapped in paragraph tags. Change the field formatting to "none", be sure to tick the box that says "update all existing entries with this formatting", then save your field.
Always view source on your page to find out what's going wrong!
<script>
var cesc = new flickrshow('cesc', {
autoplay:true,
'set':'<p>72157629620181853</p>'
});
</script>
Rather than trying to create tons of different pages on my website, I'm trying to update the content of a single div when different items in the navbar are click to update the maint div content. I tried to find a simple example using Javascript:
<script type="text/javascript">
function ReplaceContentInContainer(id,content) {
var container = document.getElementById(id);
container.innerHTML = content;
}
</script>
<div id="example1div" style="border-style:solid; padding:10px; text-align:center;">
I will be replaced when you click.
</div>
<a href="javascript:ReplaceContentInContainer('example1div', '<img src='2.jpg'>' )">
Click me to replace the content in the container.
</a>
This works just fine when I only try and update text, but when I put an img tag in there, as you can see, it stops working.
Either
1) what is the problem with how I am trying to do it?
or 2) What is a better/easier way to do it?
I'm not stuck on Javascript. jQuery would work too, as long as it is just as simple or easy. I want to create a function that will just let me pass in whatever HTML I want to update and insert it into the div tag and take out the 'old' HTML.
You just have some escaping issues:
ReplaceContentInContainer('example1div', '<img src='2.jpg'>')
^ ^
The inner ' need to be escaped, otherwise the JS engine will see ReplaceContentInContainer('example1div', '<img src=' plus some syntax errors resulting from the subsequent 2.jpg'>'). Change the call to (tip of the hat to cHao' answer concerning escaping the < and > in the HTML):
ReplaceContentInContainer('example1div', '<img src=\'2.jpg\'>')
A simple way to do this with jQuery would be to add an ID to your link (say, "idOfA"), then use the html() function (this is more cross-platform than using innerHTML):
<script type="text/javascript">
$('#idOfA').click(function() {
$('#example1div').html('<img src="2.jpg">');
});
</script>
First of all, don't put complex JavaScript code in href attributes. It's hard to read or to maintain. Use the <script> tag or put your JavaScript code in a separate file altogether.
Second, use jQuery. JavaScript is a strange beast: the principles underlying its patterns were not designed with modern-day web development in mind. jQuery gives you lots of power without miring you in JavaScript's oddities.
Third, if your goal is to avoid having to endlessly duplicate the same basic structure for all (or many) of your pages, consider using a templating system. Templating systems allow you to plug in specific content into scaffolds containing the common elements of your site. If it sounds complicated, it's because I haven't explained it well. Google it and you'll find lots of great resources.
Relying on JavaScript for navigation means your site won't be indexed properly by search engines and will be completely unusable to someone with JavaScript turned off. It is increasingly common--and acceptable--to rely on JavaScript for basic functionality. But your site should, at minimum, provide discrete pages with sensible and durable URLs.
Now, all that said, let's get to your question. Here's one way of implementing it in jQuery. It's not the snazziest, tightest implementation, but I tried to make something very readable:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Example</title>
<style type="text/css" media="all">
/* all content divs should be hidden initially */
.content {
display: none;
}
/* make the navigation bar stand out a little */
#nav {
background: yellow;
padding: 10px;
}
</style>
</head>
<body>
<!-- navigation bar -->
<span id="nav">
about me |
copyright notice |
a story
</span>
<!-- content divs -->
<div class="content" id="about_me">
<p>I'm a <strong>web developer</strong>!</p>
</div>
<div class="content" id="copyright">
<p>This site is in the public domain.</p>
<p>You can do whatever you want with it!</p>
</div>
<div class="content" id="my_story">
<p>Once upon a time...</p>
</div>
<!-- jquery code -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
// Wait for the document to load
$(document).ready(function() {
// When one of our nav links is clicked on,
$('#nav a').click(function(e) {
div_to_activate = $(this).attr('href'); // Store its target
$('.content:visible').hide(); // Hide any visible div with the class "content"
$(div_to_activate).show(); // Show the target div
});
});
</script>
</body>
</html>
Ok, hope this helps! If jQuery looks attractive, consider starting with this tutorial.
Your main problem with your example (besides that innerHTML is not always supported) is that < and > can easily break HTML if they're not escaped. Use < and > instead. (Don't worry, they'll be decoded before the JS sees them.) You can use the same trick with quotes (use " instead of " to get around quote issues).