I am not a programmer, however I have been trying to look at similar samples to come up with my own version, here is what I am trying to do.
<script type="text/javascript">
var advertContainer = null;
var adblocked = null;
function Checkads() {
if ($('.wp_bannerize').height() == 0) {
var adblocked = document.createElement("span");
var adnotice = document.createTextNode("Please support our website by enabling ads");
adblocked.appendChild(adnotice);
var advertContainer = document.getElementById("wp_bannerize");
advertContainer.appendChild(adblocked);
};
}
$(document).ready(function(){
Checkads();
});
</script>
However I am getting an error : Uncaught Type error: Cannot call method append child "null"
Can anyone help me fix it
Update
Here is the much nicer and better code, however the text can only be visible in the source code and not on the website.
<script type="text/javascript">
function checkads() {
if ($('.wp_bannerize').height() == 0) {
$('<div id="adnotice">').text('Please support our website by enabling ads').appendTo('.wp_bannerize');
};
}
$(document).ready(function(){
checkads();
});
</script>
You use a class selector with jQuery:
$('.wp_bannerize')
But an ID selector with the native DOM method:
document.getElementById("wp_bannerize");
They're not the same. To fix your script, replace getElementById('wp_bannerize') with getElementsByClassName('wp_bannerize')[0], or just do it with jQuery:
if ($('.wp_bannerize').height() == 0) {
$('<span>').text('Please support our website by enabling ads').appendTo('.wp_bannerize');
}
Related
Can someone correct this code for me:
Missing ) after argument list.
<script>
$(document).ready(function() {
$("a").each(function() {
var i = $(this).attr("href");
var n = i.replace(http://www.pantsumation.com, "https://www.pantsumation.com");
$(this).attr("href", function() {
return n
})
})
});
</script>
Thank you, im not that good at javascript and just starting out.
Probably you need to add quotes around the first URL, like so:
$(document).ready(function() {
$("a").each(function() {
var i = $(this).attr("href");
var n = i.replace("http://www.pantsumation.com", "https://www.pantsumation.com");
$(this).attr("href", function() {
return n;
})})});
UPDATE
Reading what you're actually trying to do rather than the question you asked, you might find it easier to simply replace the protocol wherever it's found:
$("a[href]").each(function(){
if( this.protocol === "http:")
this.protocol = "https:"
});
That selector ensures you're only getting links with href's in them. You can make a more refined selector if you don't want to get external links or similar.
First Question here, too! Yay! Just moved this from AskUbuntu.
I am just about to finish a little private project for gaining some experience where i try to change the app layout so it works as a normal website (on Jimdo, so it was quite of a challenge first) without much JavaScript required but is fully functional on mobile view.
Since Jimdo serves naturally only the actual site, I had to implement an
if (activeTab.getAttribute('jimdo-target') != null)
location.href = activeTab.getAttribute('jimdo-target');
redirect into the __doSelectTab() function in tabs.js . (In js I took the values from the jimdo menu string to build the TABS menu with this link attribute)
Now everything works fine exept at page load the first tab is selected. I got it to set the .active and .inactive classes right easily, but it is not shifted to the left.
So my next idea is to let it initialize as always and then send a command to change to the current tab.
Do you have any idea how to manage this? I couldn't because of the this.thisandthat element I apparently don't really understand...
Most of you answering have the toolkit and the whole code, but I am listing the select function part of the tabs.js:
__doSelectTab: function(tabElement, forcedSelection) {
if ( ! tabElement)
return;
if (tabElement.getAttribute("data-role") !== 'tabitem')
return;
if (forcedSelection ||
(Array.prototype.slice.call(tabElement.classList)).indexOf('inactive') > -1) {
window.clearTimeout(t2);
activeTab = this._tabs.querySelector('[data-role="tabitem"].active');
offsetX = this.offsetLeft;
this._tabs.style['-webkit-transition-duration'] = '.3s';
this._tabs.style.webkitTransform = 'translate3d(-' + offsetX + 'px,0,0)';
this.__updateActiveTab(tabElement, activeTab);
if (activeTab.getAttribute('jimdo-target') != null)
location.href = activeTab.getAttribute('jimdo-target');
[].forEach.call(this._tabs.querySelectorAll('[data-role="tabitem"]:not(.active)'), function (e) {
e.classList.remove('inactive');
});
var targetPageId = tabElement.getAttribute('data-page');
this.activate(targetPageId);
this.__dispatchTabChangedEvent(targetPageId);
} else {
[].forEach.call(this._tabs.querySelectorAll('[data-role="tabitem"]:not(.active)'), function (el) {
el.classList.toggle('inactive');
});
var self = this;
t2 = window.setTimeout(function () {
var nonActiveTabs = self._tabs.querySelectorAll('[data-role="tabitem"]:not(.active)');
[].forEach.call(nonActiveTabs, function (el) {
el.classList.toggle('inactive');
});
}, 3000);
}
},
...and my app.js hasn't anything special:
var UI = new UbuntuUI();
document.addEventListener('deviceready', function() { console.log('device ready') }, true);
$(document).ready(function () {
recreate_jimdo_nav();
UI.init();
});
So meanwhile found a simple workaround, however I'd still like to know if there is another way. Eventually I noticed the __doSelectTab() function is the one that executes the click, so it does nothing but to show the other tab names when they are hidden first. so I added the global value
var jnavinitialized = false;
at the beginning of the tabs.js and run
var t = this;
setTimeout(function(){t.__doSelectTab(t._tabs.querySelector('[data-role="tabitem"].jnav-current'))}, 0);
setTimeout(function(){t.__doSelectTab(t._tabs.querySelector('[data-role="tabitem"].jnav-current'))}, 1);
setTimeout(function(){jnavinitialized = true;}, 10);
at the top of the __setupInitialTabVisibility() function. Then I changed the location.href command to
if (activeTab.getAttribute('jimdo-target') != null && jnavinitialized)
location.href = activeTab.getAttribute('jimdo-target');
And it works. But originally I searched for a way to change the tab on command, not to run the command for selecting twice. So if you know a better or cleaner way, you are welcome!
I'm new to the Jquery world and am having an issue with the code below. I'm hoping you can let me know what I'm doing wrong.
<script type="text/javascript">
$(document).ready(function () {
$('#SocialSecurity').on('input', function () {
var newNum = jQuery('#SocialSecurity');
if (newNum.val().contains("x")) {
newNum.val("");
} newNum.clone().attr('alt','999-99-9999').insertAfter('#SocialSecurity').prev().remove();
$('#SocialSecurity').focus();
});
});
</script>
The issue I am having is that my application has a SSN box which on page load,for security reasons, is populated xxx-xx-9999. However, if a user wants to update it I am attempting to clone the box, but changing the format to 999-99-9999.
The code above works fine in Firefox, however in Chrome and all versions of I.E. the field is not auto-inserting the dashes for the SSN. This causes the authentication to fail.
A few changes I've tried after research that have not worked are,
Changing the attr() to prop()
Changing the $ to Javascript
I appreciate any advice you can give me. Also let me know if I need to provide any additional information/code.
Regards,
I believe this is what you are trying to do.
JSFiddle
$(document).ready(function () {
$('#SocialSecurity').on('input', function () {
var $ss = $(this);
var ssval = $ss.val();
if (ssval.indexOf("x") > -1) {
$ss.val("");
} else {
ssval = ssval.split(/\D+/g).join('');
ssvals = ssval.match(/(\d{1,3})(?:(\d{1,2})(\d{1,4})?)?/);
if (ssvals) {
ssvals.shift();
ssval = ssvals.filter(Boolean).join("-");
}
$ss.val(ssval);
}
});
});
Please try this
Demo: jsFiddle
$(document).ready(function () {
$('#SocialSecurity').on('input', function () {
var newNum = jQuery('#SocialSecurity');
if (newNum.val().indexOf("x")) {
newNum.val("");
} newNum.clone().val('999-99-9999').insertAfter('#SocialSecurity').prev().remove();
$('#SocialSecurity').focus();
});
});
I'm new to PhantomJS and javascript, so forgive me if there is a simple solution.
I'm using PhantomJS to do screenshots of websites, and I want to replace certain DOM nodes with dynamic content from a remote javascript, something like this:
<script language="JavaScript" src="http://server/dynamic.js" type="text/javascript"></script>
My first try:
var page = require('webpage').create();
page.open('http://stackoverflow.com', function (status) {
if (status !== 'success') {
phantom.exit();
}
page.evaluate(function() {
//// Case #1: what I really want
// var s = '<script language="JavaScript" src="http://server/dynamic.js" type="text/javascript"></script>';
//// Case #2: simple js test case
// var s = '<script language="JavaScript" type="text/javascript">document.write("<p>THIS IS A TEST</p>");</script>';
//// Case #3: very simple case
var s = '<b>THIS IS A TEST</b>';
var node = document.getElementById('mainbar');
var pnode = node.parentNode;
var newele = document.createElement('div');
newele.innerHTML = s;
pnode.replaceChild(newele, node);
});
page.render('test.jpg');
phantom.exit();
});
For the simple case (case #3) where I'm just replacing it with some text, it works fine, but not for either of the javascript cases. It seems the javascript isn't being evaluated after being inserted via replaceChild(). I tried page.reload() just before page.render() but it didn't help.
Next, I tried creating the new element using iframe:
var newele = document.createElement('iframe');
newele.setAttribute('src', 'javascript:document.write("<p>THIS IS A TEST</p>");');
This works for the simple js test case #2, but I can't figure out how to make iframe work with what I really want (Case #1).
Any suggestions?
I came up with a workable solution:
var newele = document.createElement('iframe');
newele.setAttribute('src', 'javascript:document.write("<script src=\'http://server/dynamic.js\'></script>");');
I also had to put in a bit of delay:
window.setTimeout(function () {
page.render('test.jpg');
phantom.exit();
}, 500);
This works, but feels a little klugy to me. I would love to hear a better solution.
Nope, you can add your javascript reference to the page like this, right before calling evaluate the first time (excerpt):
...
page.open(url, function (status) {
if (status !== 'success') {
console.log('Error: Cannot load url. Status: {0}.'.format(status));
phantom.exit(1);
} else {
page.injectJs('../../../code/common/jquery.min.js');
// call evaluate once to change the dropdown:
page.evaluate(function (myobj) {
// manipulate DOM here with jquery, or whatever you want.
}, myobj);
...
Please note that you can call evaluate several times, so you can extract stuff from the page, call javascript functions from the page, modify DOM, etc.
I downloaded the File upload script called Simple Photo Manager.
Since I'm more familiar with jQuery functions I want to use them in combination with the already existing JS code from that script.
I basically want to hide the Delete button when it's clicked.
Why is the Delete button not being hidden after I click on it?
(Note: the JS files are correctly included into the HTML file)
Also, the delLink.removeChild and delLink.appendChild are useless here because it was originally intended for a Delete/Restore switch link, but I decided to go for a button instead.
Thanks a lot if you can help me.
The html code is:
<input type='button' id='deleteit' onClick="deleteLinkOnClick
(this, 'delFlag<?=$imgid?>')">
The JS code for creating that element when an image is uploaded is:
var image_del_link = par.createElement('input');
image_del_link.type = "button";
image_del_link.value = "Delete";
imgdiv.appendChild(image_del_link);
The function for the onclick is: (I tried to write the jQuery function at the bottom)
function deleteLinkOnClick(delLink, delFlag) {
var par = window.document;
var imgDiv = delLink.parentNode;
var image_hidden = delFlag == '' ? imgDiv.childNodes[2] : par.getElementById(delFlag);
if (image_hidden.value == '1') {
image_hidden.value = '0';
delLink.removeChild(delLink.childNodes[0]);
delLink.appendChild(par.createTextNode("Restore"));
delLink.style.color = '#FF0000';
}
else {
image_hidden.value = '1';
delLink.removeChild(delLink.childNodes[0]);
delLink.appendChild(par.createTextNode("Delete"));
delLink.style.color = '#64B004';
}
$(document).ready(function(){
$(image_del_link).click(function(){
$(this).hide();
});
});
}
Here it is.
$("#deleteit").click(function(){
$(this).hide();
})
Try :
$("#deleteit").live("click", function(){
$(this).hide();
});