The problem of finding div class number with jquery - javascript

I would like to find a number of div classes and add a code after class two.
UPDATE
It works just as it should when writing another code instead of Google ad codes.
<script>
$(function()
{
var say = $('.panel-footer.clearfix').length;
if(say >= 3){
$('.panel-footer.clearfix')[1].after('<script async
src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:inline-block;width:320px;height:100px"
data-ad-client="ca-pub-3767785488130692"
data-ad-slot="3213073317"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>');
}
});
but it doesn't work. The code is running at the bottom of the page instead of the number two div.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel-footer clearfix"></div>
<div class="panel-footer clearfix"></div>
<div class="panel-footer clearfix"></div>
<script>
function insert_adsbygoogle(arg1) {
//https://support.google.com/adsense/answer/7477845?hl=en
(window.adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-3767785488130692",
data_ad_slot: "3213073317",
enable_page_level_ads: true
});
var say = $('.panel-footer.clearfix').length;
if (say >= 3) {
$('.panel-footer.clearfix').eq(1).after("<div id=write_container_for_adsbygoogle></div>");
// container is where you want the ad to be inserted
var script = document.createElement("script");
script.type = "text/javascript";
script.setAttribute("async", "");
script.src = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
$('#write_container_for_adsbygoogle').after(script);
} else if (arg1 === "first") {
$(window).on("load", insert_adsbygoogle);
}
}
insert_adsbygoogle("first");
</script>

Aussuming that clearfix is class name
<script>
$(function()
{
var say = $('.panel-footer.clearfix').length();
if(say >= 3){
$('.panel-footer.clearfix:eq(2)').after('<?php echo
get_option("my_php_code");?>');
}
});
</script>

You can achieve this by using the indexation of the array returned by jquery, also length is not a function so it's just length.
$(function()
{
var say = $('.panel-footer clearfix').length;
if(say >= 3){
$('.panel-footer clearfix')[1].after('<?php echo get_option("my_php_code");?>');
}
});
If clearfix is a class you must use: $('.panel-footer.clearfix') as remarked in another comment.

Related

Placing Amazon Banner | Angular V4

I'm placing an Amazon banner inside an angular material 2 card.But the problem is that it is not rendering.It shows empty div.What could be the reason.Below is the code showing how I did it.
<md-card class="full-width full-height border-box ">
<div class="adv">
<script type="text/javascript" language="javascript">
var aax_size = '728x90';
var aax_pubname = 'XXXXXXXXXXX';
var aax_src = '302';
</script>
<script type="text/javascript" language="javascript" src="http://c.amazon-adsystem.com/aax2/assoc.js"></script>
</div>
</md-card>
I also tried to to bind it using property binding
<span [innerHTML]="advertisement()"></span>
advertisement(){
return `<div class="adv">
<script type="text/javascript" language="javascript">
var aax_size = '728x90';
var aax_pubname = 'XXXXXXXXXXX';
var aax_src = '302';
</script>
<script type="text/javascript" language="javascript" src="http://c.amazon-adsystem.com/aax2/assoc.js"></script>
</div>`;
}
I also tried to dynamically add the div inside my card,it shows inside the div but the banner doesn't appear.Below is the code showing how I did that.
ngAfterViewInit() {
let x: HTMLElement = document.getElementById('adv');
let s: HTMLScriptElement = document.createElement('script');
s.type = 'text/javascript';
// s.language = 'javascript';
let code = `var aax_size = '728x90';
var aax_pubname = 'XXXXXXX';
var aax_src = '302';`;
let src = document.createElement('script');
src.type = 'text/javascript';
// src.language = 'javascript';
src.src = 'http://c.amazon-adsystem.com/aax2/assoc.js';
try {
s.appendChild(document.createTextNode(code));
x.appendChild(s);
x.appendChild(src);
} catch (e) {
s.text = code;
document.body.appendChild(s);
}
console.log(x);
}
After scrapping every post in SO regarding or similar to this question I did not find any solution to this.I followed almost everything in those posts but nothing was working for me.After that I came across postscribe library which does the externally loading of any third party script.
First I installed the library and imported it in my component
import * as postscribe from 'postscribe';
After that all I did was calling a function inside my ngAfterViewInit function, by targetting the div with its id which in my case was adv and passed the script as a second parameter to this function.
ngAfterViewInit() {
postscribe('#adv', `<script type="text/javascript" language="javascript">
var aax_size='728x90';
var aax_pubname = 'XXXXXXXX';
var aax_src='302';
</script>
<script type="text/javascript" language="javascript" src="http://c.amazon-adsystem.com/aax2/assoc.js"></script>`);}
By doing this my banner was loaded.

element is getting variable without declared

I am having a JavaScript code that is having a value in #message but i have not defined anywhere.
Does $("#message").html(result); is something inbuilt in Javascript?
I apologize if it is very basic and stupid question.
It is linked to my another question "
https://stackoverflow.com/questions/41745209/save-javascript-value-when-converting-speech-to-text-via-webkitspeechrecognition#
Complete Code
<!DOCTYPE html>
<html>
<head>
<script src="Content/SpeechScript.js"></script>
<title>Login Screen</title>
<meta charset="utf-8" />
</head>
<body >
<div id="results">
<span id="final_span" class="final"></span>
<span id="interim_span" class="interim"></span>
</div>
<script type="text/javascript">
function Typer(callback) {
speak('Welcome ,Please Speak your CPR Number');
var srcText = 'WelcomeToDanske,PleaseSpeakyourCPR Numberwhat';
var i = 0;
debugger;
var result = srcText[i];
var interval = setInterval(function () {
if (i == srcText.length - 1) {
clearInterval(interval);
callback();
return;
}
i++;
result += srcText[i].replace("\n", "<br />");
$("#message").html(result);
debugger;
document.getElementById('user').innerHTML = result;
// var parent = document.getElementById('parentDiv');
// var text = document.createTextNode('the text');
// var child = document.getElementById('parent');
// child.parentNode.insertBefore(text, child);
// var div = document.getElementById('childDiv');
//var parent = document.getElementById('parentDiv');
//var sibling = document.getElementById('childDiv');
////var text = document.createTextNode('new text');
// //parent.insertBefore(result, sibling);
},
100);
return true;
}
function playBGM() {
startDictation(event);
}
Typer(function () {
playBGM();
});
// say a message
function speak(text, callback) {
var u = new SpeechSynthesisUtterance();
u.text = text;
u.lang = 'en-US';
u.onend = function () {
if (callback) {
callback();
}
};
u.onerror = function (e) {
if (callback) {
callback(e);
}
};
speechSynthesis.speak(u);
}
</script>
</div>
<div id="clockDisplay">
<span id="id1">Welcome:</span>
<table width="100%" border="1"><tr><td width="50%"> Username : </td><td><div id="message"></div></td></tr></table>
</body>
</html>
$("#message").html(result); is something inbuilt in Javascript?
No.
$ is a variable that is no part of the JavaScript spec, nor is it part of the common extensions to JS provided by browsers in webpages. It is commonly used by libraries such as PrototypeJS and jQuery. This particular case looks like jQuery, but you aren't including that library in your page.
Fist off, remember to include jQuery as script in your html document or $ will not be defined.
#message Refers to an element in your html document with the tag of id="message"
To get an element in jQuery, by id, you use this syntax: var Element = $("#ID");
So, to make sure your code works, ensure that both there is an element with the ID message, and a defined variable named result containing the html text to put into your element.
Since you want to append to <div id="clockDisplay"> <span id="user">Username :</span></div>, why not change it to:
<div id="clockDisplay">
<span id="user">Username :</span>
<div id="message"></div>
</div>

How to add an ad using document.getElementById()?

I have a with an id of "ad". I am trying to put in an adsense ad in there using JavaScript when a user meets a condition. Basically when a user meets a certain condition, ads will be shown.
This is my code:
if ($resultTot = $db->query($queryTot))
{
$data = $resultTot->fetch_assoc();
if($data["total"]>1)
{
echo "<script>
document.getElementById('ad').innerHTML = 'async src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'
<!-- YC2 ads -->
<ins class='adsbygoogle'
style='display:block'
data-ad-client='ca-pub-4557496244647182'
data-ad-slot='4151529047'
data-ad-format='auto'></ins>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>";
}
}
When I use document.getElementId() to change let's say a p tag, it works. I just can't get the adsense to display. Any ideas on how I can add it in there and why my code isn't working?
You just need to print regular AdSense JS code. No need to get any elements with JS.
Currently you are just editing contents of #ad DOM element. This dosen't work, because it has to be <script> and not inside of it. src is attribute.
It must end up like this
<script async src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script>
So, use this:
if ($resultTot = $db->query($queryTot))
{
$data = $resultTot->fetch_assoc();
if($data["total"]>1)
{
echo "
<div id='ad'>
<!-- YC2 ads -->
<ins class='adsbygoogle'
style='display:block'
data-ad-client='ca-pub-4557496244647182'
data-ad-slot='4151529047'
data-ad-format='auto'></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<script>
var script = document.createElement('script');
script.async = true;
script.src = '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
document.getElementById('ad').appendChild(script);
</script>
";
}
}

JavaScript : display Google ad conditionally

I want to display google ads at vbulletin forum when the thread not contains any crack or serial so I write this code:
<div id ="d_content"> post goes here...</div>
<div id="adv_content"></div>
<script>
function isBlank(str) {
return (!str || /^\s*$/.test(str));
}
var str = document.getElementById("d_content").innerHTML;
var pattern = /crack|nulled|serial|register|key|pach|patch/gi;
var Len= str.match(pattern);
if( isBlank(Len) ) document.write("adv..");
</script>
but how to put the google ad code instead of "adv.."
this is my try :
<div id ="d_content"> post goes here...</div>
<div id="adv_content"></div>
<script>
function isBlank(str) {
return (!str || /^\s*$/.test(str));
}
var str = document.getElementById("d_content").innerHTML;
var pattern = /crack|nulled|serial|register|key|pach|patch/gi;
var Len= str.match(pattern);
if( isBlank(Len) ) document.write("
<script type="text/javascript"><!--
google_ad_client = "ca-pub-1564912551365218";
/* 728x90, تم إنشاؤها 02/06/11 زهير طه */
google_ad_slot = "7785253845";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
");
</script>
but not worked..
Your code is not going to work because browsers will interpret the first </script> as the end of your script, eve though it is within a text string.
A workaround is to use an escape/unescape sequence:
document.write(unescape("%3Cscript type='text/javascript'%3E[your script here]%3C/script%3E"));
where < is escaped as %3C and > is escaped as %3E.

I am getting "Object Required" error message

I am trying to stick a news scroller on the home page of our website.
I am a bit confused by the error message I am getting because I get it on one PC but not on another:
Object Required
I am using the below code but the following line keeps throwing Object Required error when I use this file as a web user control on my default.aspx page:
el2.style.height='<%=box_height %>';
As a result, the news is not scrolling.
Any help greatly appreciated.
<uc1:NewsScroller ID="NewsScroller1" runat="server" />
<script language="VB" runat="server">
Public box_TextColor As String = "black"
Public box_height As Integer = 150
Public box_width As Integer = 166
Public box_padding As String = "0 0 0 20"
</script>
<script type="text/javascript" for="window" event="onload">
// <!CDATA[
return window_onload()
// ]]>
</script>
<script type="text/javascript">
// <!CDATA[
// <!--
var speed = 2;
function init(){
var el = document.getElementById("newsdiv");
el.style.overflow = 'hidden';
el.style.height='<%=box_height %>';
el.style.width='<%=box_width %>';
el.style.padding='<%=box_padding %>';
el.style.color='<%=box_TextColor %>';
var el2 = document.getElementById("newsdiv-p1");
el2.style.height='<%=box_height %>';
var el3 = document.getElementById("newsdiv-p2");
el3.style.height='<%=box_height %>';
//alert(document.getElementById("newsdiv-p2").style.height+document.getElementById("newsdiv-p2").style.height);
scrollFromBottom();
}
var go = 0;
var timeout = '';
function scrollFromBottom(){
clearTimeout(timeout);
var el = document.getElementById("newsdiv");
if(el.scrollTop >= el.scrollHeight-'<%=box_height %>'){
el.scrollTop = 0;
};
el.scrollTop = el.scrollTop + speed;
if(go == 0){
timeout = setTimeout("scrollFromBottom()",50);
};
}
function stop(){
go = 1;
}
function startit(){
go = 0;
scrollFromBottom();
}
// -->
function window_onload() {
init();
}
// ]]>
</script>
<%--<asp:Panel ID="newsdiv" runat="server" onmouseout="startit();" onmouseover="stop();">--%>
<div id="newsdiv" onmouseout="startit();" onmouseover="stop();" >
<p id="newsdiv-p1" class="spacer"></p>
<asp:Label ID="lblNews" runat="server" Text="News..."></asp:Label>
<p id="newsdiv-p2" class="spacer"></p>
</div>
<%--</asp:Panel>--%>
#Marcel, I suppose you mean the source (right-click, view source and copy the code)?
If so, here it is and again, thanks
<script type="text/javascript" for="window" event="onload">
// <!CDATA[
return window_onload()
// ]]>
</script>
<script type="text/javascript">
// <!CDATA[
// <!--
var speed = 2;
$(document).ready(function init(){
var el = document.getElementById("newsdiv");
el.style.overflow = 'hidden';
el.style.height='150';
el.style.width='166';
el.style.padding='0 0 0 20';
el.style.color='black';
var el2 = document.getElementById("newsdiv-p1");
el2.style.height='150';
var el3 = document.getElementById("newsdiv-p2");
el3.style.height='150';
//alert(document.getElementById("newsdiv-p2").style.height+document.getElementById("newsdiv-p2").style.height);
scrollFromBottom();
});
var go = 0;
var timeout = '';
function scrollFromBottom(){
clearTimeout(timeout);
var el = document.getElementById("newsdiv");
if(el.scrollTop >= el.scrollHeight-'150'){
el.scrollTop = 0;
};
el.scrollTop = el.scrollTop + speed;
if(go == 0){
timeout = setTimeout("scrollFromBottom()",60);
};
}
function stop(){
go = 1;
}
function startit(){
go = 0;
scrollFromBottom();
}
// -->
function window_onload() {
init();
}
// ]]>
</script>
<div id="newsdiv" onmouseout="startit();" onmouseover="stop();" >
<p id="newsdiv-p1" class="spacer">
</p>
<span id="NewsScroller1_lblNews"><a href='#' OnClick=javascript:window.open('newsDetail.aspx?NewsID=10','NewsDetail','width=800,height=600;toolbar=no;');><font face='verdana' size='2' color='#184D68'>Steve's Birthday</font><br><br><a href='#' OnClick=javascript:window.open('newsDetail.aspx?NewsID=15','NewsDetail','width=800,height=600;toolbar=no;');><font face='verdana' size='2' color='#184D68'>Our Anniversary</font><br><br><a href='#' OnClick=javascript:window.open('newsDetail.aspx?NewsID=14','NewsDetail','width=800,height=600;toolbar=no;');><font face='verdana' size='2' color='#184D68'>Jessie's Birthday</font><br><br></span>
<p id="newsdiv-p2" class="spacer"></p>
</div>
I am still trying to wrap my head on how this great forum works. Yesterday, I was able to see a button that says, "Add comment". Since today, I have not been able to see it. I guess my question is, how do you log back in so you are able to add comments, etc? Login appears to be cookie-driven which means that your priviledges disappear once you close the browser, no?
In this case, the error message ‘Object required’ means that variable el2 doesn't contain an HTMLElement object.
ID's of elements are case-sensitive, so you can't get the element
<p id="newsdiv-p1" class="spacer"></p>
using
var el2 = document.getElementById("newsDiv-p1");
Moreover, you can't access elements that have not been rendered yet. Put your function in an onload handler or after the markup.
BTW, the language attribute of the script element has been deprecated long ago.
Update: this piece of code
<script type="text/javascript" for="window" event="onload">
// <!CDATA[
return window_onload()
// ]]>
</script>
uses an IE-specific way to attach an event handler. Never use it!
Instead, use a DOM level 2 method or just
window.onload = window_onload;
You need to ensure that the DOM is ready before you start to interact with it.
I'd recommend using jQuery and wrapping your DOM-interactive code in the .ready() event hander, like this:
$(document).ready(function(){
init();
});
That way you can be sure that all your elements exist before you start to reference them, as stated in the jQuery API reference:
The handler passed to .ready() is
guaranteed to be executed after the
DOM is ready, so this is usually the
best place to attach all other event
handlers and run other jQuery code.
put your script tags after newsDiv. I think the problem arises because the html hasn't rendered yet.
Make sure that you have java script functions available in your page. Some times you get such errors when no method is accessible.

Categories