Adding Adsense ads in the middle of articles [duplicate] - javascript

ADS Center Not working perfectly with this script :
i need to add ads after p or br or h2 or h3 , but the problem is working just the first event like p but other like h2 and h3 is sqaure blank and white , who can help me to solving this problem ?
i need these working with all without any blank space or white space .
the ads shown here :
#wpear-ads p:lt(1)
here shown space of ads white or blank :
#wpear-ads h2:eq(3) #wpear-ads h3:eq(2)
Script :
/*-- Ads Center --*/
$AdsCenter = $("#AdsCenter").html();
$("#wpear-ads p:lt(1) , #wpear-ads h2:eq(3) , #wpear-ads h3:eq(2)").after($AdsCenter);
$("#AdsCenter").remove();
Ads from google adsense html code :
<div id='wpear-ads'><data:post.body/></div>
<div id='AdsCenter'>
<div class='adswp2'>
<!--Ads Center -->
<ins class='adsbygoogle' data-ad-client='ca-pub-XX9749475958XXXX' data-ad-format='auto' data-ad-slot='10737541XX' data-full-width-responsive='true' style='display:block'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>

Related

have header and footer that are on out side of iframe appear and disapear when mouse enters general area

I have an iframe inside a main page container. I have managed to remove the second scroll bar that is in the main html. Leaving only the iframe scroll, this was done by request of a higher up. We have mandatory headers and footers that need to appear at all times. We decided to get creative and added some .js to out html that makes the headers and footers appear and disappear. The only problem is this causes the iframe to not take up the whole page height. because if the headers and footers are shown when mouse is over them and the iframe is too long then the footers get hidden under the page. (cant scroll down to them because the scrollbar was removed.)
What I am trying to get at is there a way I can have both work? Ill post the code.
*JavaScript*
function show_topnav()
{
document.getElementById('nybe-top-nav').style.display="block";
document.getElementById('nygov-universal-navigation-frame').style.display="block";
}
function hide_topnav()
{
document.getElementById('nybe-top-nav').style.display="none";
document.getElementById('nygov-universal-navigation-frame').style.display="none";
}
function show_bottomnav()
{
document.getElementById('nybe-footer').style.display="block";
document.getElementById('nygov-universal-footer-frame').style.display="block";
}
function hide_bottomnav()
{
document.getElementById('nybe-footer').style.display="none";
document.getElementById('nygov-universal-footer-frame').style.display="none";
}
here is the html
<header id="test-header" onMouseLeave="hide_topnav()">
<iframe id="nygov-universal-navigation-frame" title="NY Gov Universal Navigation" class="nygov-universal-container" width="100%" height="86px" src="//static-assets.ny.gov/load_global_menu/ajax?iframe=true" data-updated="2014-11-07 08:30" frameborder="0" style="border:none; overflow:hidden; width:100%; height:86px;" scrolling="no">
Your browser does not support iFrames
</iframe>
<!-- Google Tag Manager -->
<noscript>
<iframe src="//www.googletagmanager.com/ns.html?id=GTM-T4FP6H" height="0" width="0" style="display:none;visibility:hidden" title="Google tag manager" ></iframe>
</noscript>
<script type="text/javascript">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0];var j=d.createElement(s);var dl=l!='dataLayer'?'&l='+l:'';j.src='//www.googletagmanager.com/gtm.js?id='+i+dl;j.type='text/javascript';j.async=true;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T4FP6H');</script>
<!-- End Google Tag Manager -->
<div id="nybe-wrapper">
<!-- Begin the top navigation -->
<div id="nybe-top-nav">
<div id="nybe-account">
<span class="glyphicon glyphicon-user"></span>Your Account
</div>
<div class="nys-global-header horizontal unstacked">
<h1><span class="glyphicon glyphicon-home"></span>New York Business Express</h1>
<ul id="nys-global-nav">
<li>
Start your Business
</li>
<li>
</li>
</ul>
</div>
</div>
<div id="hidden-top" onMouseEnter="show_topnav()"> </div><!-- helper div for onMouseEnter -->
</header><!-- end header -->
here is some of the css
html{
overflow-y: hidden;
}
body.nybe-opa-frame #main-content{
margin:0px;
padding:0px;
}
body.nybe-opa-frame #main-content > iframe{
min-height:650px !important;
width:100%;
border:none;
}
body.nybe-opa-frame #nybe-footer {
margin-top:-5px;
}
/* end opa frame*/
/*#hidden-top{background-color: #142047;}*/
/*added two help divs to use on mouse enter events for the page
opacity is set to 0 so they cant be seen */
#hidden-bottom,#hidden-top{
opacity: 0.0;
height: 20px;
}
/*set all the headers and footers to display none*/
#nygov-universal-navigation-frame,#nybe-top-nav,#nybe-footer,#nygov-universal-footer-frame{
display: none;
}
most of the code was not made me my higherup created most of the page the iframe comes from an external source.
Any Ideas would be great! I know this is kind of a weird post. What i Have now works pretty well but I feel like there is a better more efficient way to do this.
Thanks!

how to make an element padded to set the other element's, besides it, text visible completley on overflow in html

I have used float and made 3 divs floated, left, right and center. Left one and right one have images, Where as center one has text in it. But, when the center div's text is overflowed, it's text is displayed below. For example, I have programmed my html file based on my laptop browser. I have used padding so that the text will be fit exactly in between those 2 images. But when I have opened the same html file in my mobile, which has less pixels, the text has been displayed in 2 lines.
Now, my problem is that, I want to make the text fixed in between those 2 images no matter in which device or browser the file is opened. How can I do that?
Here is my code:
<header>
<div style="float:left;padding-left:24%">
<img src="avr_logo.jpg" style="display: inline" width="100" height="18%" alt="Browser not Supported">
</div>
<div style="float:right;padding-right:20%"><img src="hk.jpg" width="100" height="17%"></div>
<div style="float:center;padding-top:1%">
<h1>Welcome to AHK Organization</h1>
</div>
</header>
I do not have any fixed tags as of in:
How can I make an element on a webpage fixed BUT relative to another element?
The solution over there says to fix the center and make left and right tags relative to the center tag. I don't want to fix any tag.
try this fiddle use display:inline-block rather than float
<header>
<div style="display:inline-block;width:25%;">
<img src="avr_logo.jpg" style="display: inline" width="100%" alt="Browser not Supported">
</div>
<div style="display:inline-block;width:44%;">
<h1>Welcome to AHK Organization</h1>
</div>
<div style="display:inline-block;width:25%;"><img src="hk.jpg" width="100%" alt="Browser not Supported"></div>
</header>

Different background images jquery mobile

I am trying to set different background images for each page in jquery mobile.
<div data-role="page" id="pageone">...
</div>
<div data-role="page" id="pagetwo">...
</div>
As you can see, each page has a different id, so my thought was that i can assign background image for that id (and another image for another id)
#pageone {background: transparent url(URL) repeat center center !important;}
#pagetwo {background: transparent url(URL) repeat center center !important;}
The image is a pattern (really small 7x10 px). But i couldn't do it. For some reason it appears when you load the page (outside the page div) but then it disappears.
Did anyone encounter the same problem and knows what can i do about it?
Ty in advance :)
Ended up using theme roller and importing my theme there.
Then duplicated it into swatch b c and d.
In my CSS file i changed the color to background image (for each swatch there was a different image)
In my html i put:
<div data-role="page" id="pageone" class="ui-page-theme-a">...
</div>
<div data-role="page" id="pageone" class="ui-page-theme-b">...
</div>
and that for each page i have that have their own background image.

IOS 5 IFrame with a PDF, Display and scroll issues

I am running IOS 5.1.1 on an IPad One. My application is a HTML5 App and uses JQuery Mobile. I have an IFrame that is programmatically inserted. The IFrame has some criteria that is then used to generate a PDF inside the IFrame.
the PDF won't display unless the I-Pad is rotated.
I cannot scroll the IFrame
On I-Pad 2 (running 4.1.3) I have no problems it displays and (two finger) scrolls fine.
The code is as follows:
JQM Page, Content Section
<div class="content overflowScroll" data-role="content">
</div><!-- /content -->
CSS
.overflowScroll {
height: auto;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
The IFrame Insert
strHtml = '<iframe src="' + fullUrl + '" width="100%" height="95%" style="background-color: #FFFFFF;"></iframe>';
$page.find(".content").empty().html(strHtml);
Update
The problem looks to be IOS5 as the same thing happens on a mobile running IOS5. Is there a good alternative here? Perhaps If i remove dependancy from an iframe?

Problem printing google maps printing and using 'page-break-before' in IE8

I'm having an annoying problem trying to get an html page with a google map on it to print correctly, I have a google map with an <h2> above it all wrapped in a div and the div is set to 'page-break-before:always;' in the css so that the map and its heading always sits on a new page.
The problem is that in IE8 only i can always see a large portion of the map rendered on the previous page when printed, also the part of the map that is visible on the previous page is that which is outside the visible bounds of the map.
HTML:
<div id="description">
<h2>Description</h2>
<p>Some paragraph of text</p>
<p>Some paragraph of text</p>
<p>Some paragraph of text</p>
</div>
<div id="map">
<h2>Location</h2>
<div id="mapHolder"></div>
<script type="text/javascript">
// ... javascript to create the google map
</script>
</div>
CSS:
#map { page-break-before:always; }
Here is a screen grab of what it renders like in IE8
http://twitpic.com/1vtwrd
It works fine in every other browser i have tried including IE7 so i'm a bit lost, has anyone any ideas of any tricks to stop this from happening?
I found out if you add an page-break div with a height eg. 10px with empty html content in front of the Map div, then you can solve the problem.
in CSS:
page_break_before
{ height: 10px; page-break-before:always; }
then in front of the Map div:
var pageBreakDiv = window.document.createElement('div'); pageBreakDiv.id = 'page_break_before'; printingMapDiv.appendChild(pageBreakDiv);
And remove the page-break-before:always; in your #map div.
Cheers,
Jing

Categories

Resources