I want to have a site search, I am using google custom search, but it has its own style. I want to change the style of the search box using CSS.
Please no AJAX & no jQuery.
JavaScript:
(function() {
var cx = 'myID';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
HTML:
<gcse:search></gcse:search>
I want sth like : www.w3schools.com
You can use DOM inspection tool right click on the search bar and inspect element . And you can determine the IDs and classes and the default styles .
Next, you can make your own css rules which will override the default ones try the css code like this :
input.gsc-input {}
input.gsc-search-button {}
form.gsc-search-box {}
div.gsc-control-cse {}
Related
I am trying to load script and link using javascript.Previously I was using jquery not I am removing jquery from our project only using javascript.
previously I write like this
$('head link[data-reqjq][rel=preload]').each(function(){
var a = document.createElement('script');
a.async=false;
a.src=$(this).attr('href');
this.parentNode.insertBefore(a, this);
});
$(function(){
$('script[data-reqjq][data-src]').each(function(){
this.async=true;
this.src=$(this).data('src');
});
});
Now I am trying to load both things using javascript.
like this but it is not loading
var elements = document.querySelectorAll('head link[data-reqjq][rel=preload]');
Array.prototype.forEach.call(elements, function(el, i){
var a = document.createElement('script');
a.async=false;
a.src=this.getAttribute('href');
this.parentNode.insertBefore(a, this);
});
var elements = document.querySelectorAll('script[data-reqjq][data-src]');
Array.prototype.forEach.call(elements, function(el, i){
el.async=true;
el.src=el.data('src');
});
here is my code
https://jsbin.com/havuxujixi/3/edit?html,js,output
Simple Solution
/*
add JS File
*/
function addJsFileFunc(filename) {
document.getElementsByTagName('head')[0].innerHTML.toString().includes(filename + ".js"))
loadScript('/',filename + ".js");
}
addJsFileFunc("paht/script-file-name.js")
/*
script tag
*/
let scriptTag = document.createElement('script');
scriptTag.type = 'text/javascript';
scriptTag.src = 'url.js';
document.getElementsByTagName('head')[0].appendChild(scriptTag);
1 - add a end tag to the script; </script> instead of /> (check here)
2 - your second query selector have an error in its callback : .data('src') should be .getAttribute('src')
also as a suggestion use simple forEach instead of Array.prototype.call
var elements = document.querySelectorAll('script[data-reqjq][data-src]');
elements.forEach(function(el, i){
el.async=true;
el.src=el.getAttribute('src');
});
the first selector can be written as:
var elements = document.querySelectorAll('head link[data-reqjq][rel=preload]');
elements.forEach(function(el, i){
var a = document.createElement('script');
a.async=false;
a.src=el.getAttribute('href');
// mounting new one inplace
el.parentNode.append(a);
// unmouting the old one
el.remove();
});
Script old (1) :
document.write('<scr'+'ipt src="http://example.com/script.js?'+Math.random()+'" type="text/javascript" onerror="checkScriptLoaded2();" onload="scriptLoaded2=true;"></scr'+'ipt>');
Script new (2):
var sNew = document.createElement("script");
sNew.async = true;
sNew.src = "http://example.com/script.js?"+Math.random();
var s0 = document.getElementsByTagName('script')[0];
s0.parentNode.insertBefore(sNew, s0);
How do I put this tag in the script 2 in order to work properly.
onerror="checkScriptLoaded2();" onload="scriptLoaded2=true;"
This way.
Create attribute and add it to script element.
The createAttribute() method creates an attribute with the specified name, and returns the attribute as an Attr object.
attribute.value property is used to set the value of the attribute.
element.setAttributeNode() method is used to add the newly created attribute to an element.
function checkScriptLoaded2()
{
alert("Error in loading.")
}
var sNew = document.createElement("script");
sNew.async = true;
sNew.src = "https://example.com/script.js?"+Math.random();
sNew.setAttribute('onerror', 'checkScriptLoaded2();') // Shorthand as suggested by Felix
var att = document.createAttribute("onload"); // Elaborated way
att.value = "scriptLoaded2=true;"
sNew.setAttributeNode(att)
var s0 = document.getElementsByTagName('script')[0];
s0.parentNode.insertBefore(sNew, s0);
<div>hello</div>
Like so:
sNew.onerror = checkScriptLoaded2;
sNew.onload = function() {
scriptLoaded2 = true;
};
You can learn more about this type of event handling on quirksmode.org. Basically, for most events an element supports, is as a on<eventname> property to which you can assign a function to handle it.
See the HTMLScriptElement documentation on MDN (although it doesn't list the event handlers).
Also note that
var s0 = document.getElementsByTagName('script')[0];
s0.parentNode.insertBefore(sNew, s0);
will only work if there is already another existing <script> element. If the script doesn't have to appear anywhere particular then doing what MDN suggests is a bit more failsafe:
document.head.appendChild(sNew);
I want to include Google Custom Search Engine in my navigation bar after the menu items, on the same line. However, Google Custom Search Engine displays as a block by default and puts itself in a new line below the menu items. I have tried to put it inside a <span> and styled it display:inline; display:inline-block; float:right; among many others to no avail. I have learnt that <gcse:searchbox-only></gcse:searchbox-only> is what makes it display as a block element but on removing it the search box doesn't display at all.
NOTE: In the below snippet, html <script> tags are to enclose the javascript above them. <gcse:searchbox-only></gcse:searchbox-only> is after the closing </script> tag. The code editor needed html and javascript to be typed into different blocks.
(function() {
var cx = '006011447236506019758:t1r90lozvsc';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
<script>
</script>
<gcse:searchbox-only></gcse:searchbox-only>
You can always use css to style the div by using its id.
For Example:
<style>
/* New Code Here! */
div#___gcse_0 {
display: inline-block;
width: 200px;
}
</style>
<script>
(function() {
var cx = '006011447236506019758:t1r90lozvsc';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchbox-only></gcse:searchbox-only>
<div style="display: inline-block">This is after the search</div>
<div style="display: inline-block">This is after the text</div>
This creates a 200px search bar.
EDIT: Showed an example in a working copy.
When a particular event happens that I listen out for - I want to populate the div 'divDynamicAdvert` with the javascript that calls my Google Ad code.
Huge thanks to "tenbits" for showing me that I need to be appending a script node like this:
function myEventHandler(evt) //called when event is caught
{
var script = document.createElement('script');
script.textContent = 'alert(1)';
document.getElementById('divDynamicAdvert').appendChild(script);
}
This works great, but in place of the alert, I need to insert the Google Ads Javascript:
<script type="text/javascript"><!--
google_ad_client = "ca-pub-3286208413631803";
/* Standard MPU */
google_ad_slot = "8630273973";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
I've tried:
var script = document.createElement('script');
script.textContent = 'google_ad_client = 'ca-pub-3286208413631803'; google_ad_slot = '8630273973'; google_ad_width = 300; google_ad_height = 250;';
document.getElementById('divDynamicAdvert').appendChild(script);
var script = document.createElement('script src="http://pagead2.googlesyndication.com/pagead/show_ads.js"');
document.getElementById('divDynamicAdvert').appendChild(script);
I've tried escaping the slashes too, but no luck... Can you guys help?
As #slebetman already said, innerHTML wont work. If you trying to evaluate script via DOM, and not eval(code), etc - do this with SCRIPT Node:
var script = document.createElement('script');
script.textContent = 'alert(1)';
document.getElementById('divDynamicAdvert').appendChild(script);
// actually it doesnt matter where you append it
EDIT:
In any case create a SCRIPT NODE, and then manipulate with it - add a script content to it OR add src attribute if you reference external source
var script;
// content
script = document.createElement('script')
script.textContent = 'alert(1)'
document.body.appendChild(script);
// google api source
script = document.createElement('script');
script.src = 'ANY_URL';
// -> in this case, same as script.setAttribute('src', 'ANY_URL');
document.body.appendChild(script);
Having some further questions, do not hesitate to ask in comments.
I want to change the cursor style when user hovers the Google "+1" button.
I tried to use the div tag and add the style attribute, but it's not working.
<div class="g-plusone" data-size="tall" style="cursor:wait" ></div>
<script type="text/javascript">
(function() {
var po = document.createElement('script');
po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
I guess we need to add something to their js code.
+1 is a button with these classes: class="esw eswd", and when hovered, these: class="esw eswd eswh". you can get this element with jQuery and control it:
for example:
// with jQuery:
$("button.esw.eswd").each(function(){
$(this).hover(function(){
// your mouseover code here:
$(this).addClass("some-class");
},function(){
// your mouseout code here:
$(this).removeClass("some-class");
});
});
///////////////
// or with css:
button.esw.eswd{
// mouseout style here
}
button.esw.eswd.eswh{
// mouseover style here
cursor:wait;
}