I am building a Firefox extension and have come a long way. One of the parts of my extension is where I display a DIV at the bottom of the page and I want to put an ad into the div, but for some reason every time it does so, it redirects to another page entirely with the ad on it. So it looks like its not allowing me to insert this code below into the div that sits at the bottom. Any chance anyone can help?
This code of course calls the "ad_display.js" file and thats where it does the redirect. Any way I can do this or am I stuck in the water?
Thanks!!!
<!-- Beginning of Project Wonderful ad code: -->
<!-- Ad box ID: 38154 -->
<script type="text/javascript">
<!--
var pw_d=document;
pw_d.projectwonderful_adbox_id = "38154";
pw_d.projectwonderful_adbox_type = "2";
pw_d.projectwonderful_foreground_color = "";
pw_d.projectwonderful_background_color = "";
//-->
</script>
<script type="text/javascript" src="http://www.projectwonderful.com/ad_display.js"></script>
<!-- End of Project Wonderful ad code. -->
Two solutions:
Either you replicate the functionality of that ad_display script, change "document.write(pw_s)" to something a little saner like "document.getElementById('mydivwithanad').innerHTML=pw_s"
Ether you use insert an iframe in the page rather than a div, and you inject that code in the iframe.
Related
So I am having a problem with some of my code because the website I'm pulling my widget from, is down. What I have is a script that calls to a widget to pull up future projected values of oil prices. This morning the website I pull my information from is down, and I was wondering if there was a way to load up an alternative site if this one is down. Here is a snippet of my code:
<div class="item1">
<span class="title">Brent Crude:</span>
<script type="text/javascript" src="https://www.oilcrudeprice.com/oilwidget.php?l=en&m=000000&g=ffffff&c=ed3232&i=ffffff&l=e88888&o=ed7070&u=brent"></script>
</div>
I was wondering if there way a way to pull information from https://oilprice.com/widgets/brent/brentchart.js instead of www.oilcrudeprice.com when www.oilcrudeprice.com is down.
You can always load an alternative js file by using the onError handler.
<script type="text/javascript" src="http://example.com/script1.js" onError="loadAlternative(this);"></script>
and the error handler function would be:
function loadAlternative(elem)
{
elem.src = "http://alternative_address.com/somefile.js";
}
I'd like to rotate ads at my website without reloading whole website, so each 25 seconds should be loaded new banner. Third party javascript of ad network looks like <script type=text/javascript src='http://adnetwork.tld/banner.js?id=55&user=200'></script>. I can put this code everywhere at my website and in that position is banner loaded.
I am using setTimeout(function, 25000);, but I don't know if code below is the right way how to do it.
var container = document.getElementsByClassName("cont")[0];
container.innerHTML = "<script type=text/javascript src='http://adnetwork.tld/banner.js?id=55&user=200'></script>";
jQuery( "div.cont" ).replaceWith( "<div class='cont'><script type=text/javascript src='http://adnetwork.tld/banner.js?id=55&user=200'></script></div>" );
How can I reload this position via javascript after 25 seconds, so new banner is shown?
UPDATE: (example provided)
<div id="cont">
<script type=text/javascript src='http://adnetwork.tld/banner.js?id=55&user=200'></script>
</div>
Just use scriptTag.src = "linkYouWantForYourAd"
You can get the script tag by giving it an id or a class name
I’m “developing” a web site from Sharetribe (this is a website to create marketplaces). Sharetribe limited the “freedom” of a developer. We can add anything to the <head> of the website. So in the <head> I can change the CSS of the website, and this is great because I can change the appearance of the website.
What I’d like to do is to add HTML tags, like buttons, divs, etc. If I can do that, it would be great.
I believe this can’t be done, but first, I’d like to question — who knows, maybe I’m wrong.
It's a bit hacky, but you can use javascript to "insert" or "append" html to the body of the webpage through the head.
If you only have access to the head element, but not to the body, then you could try to use Javascript to add elements into the body. This only works if script tags are allowed and it has to be said that it is not really a good way of coding. But if it is the only way...
My idea (to make it a bit easier) : Include jQuery and add elements to the body by using the append function. So: you go to the jQuery downloads page, download the file and include it in the head tag. Now, you can access the body tag and insert some custom code like this:
$("body").append('<h1>Hi! I am a headline</h1>');
Pure JavaScript way:
var sibling = document.querySelector('.sibling');
var newSibling = document.createElement('div');
newSibling.className = 'sibling';
newSibling.innerHTML = 'Appended before the below div';
document.body.insertBefore(newSibling, sibling);
<body>
<!-- Already Existing HTML -->
<div class="sibling">I wish I had a sibling</div>
</body>
Quick jQuery way:
Include jQuery inside your head. Include the custom jQuery code inside <script></script> within <head>.
$(document).ready(function() {
$('.sibling').append('<div class="sibling">Hey! I am here</div>');
$('.child').wrap('<div class="child">You are not orphan anymore!</div>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<!-- Already Existing HTML -->
<div class="child">I wish I had a parent</div>
<div class="sibling">I wish I had a sibling</div>
</body>
I am creating a website (http://yic.am) using wordpress and the theme includes a background and a "subpage_content_bg". The subpage-background is a semi-transparent white background that wraps around the content making it easier to read. I would like the subpage background to become position:fixed instead of position:absolute when you scroll down, so that when it reaches the top of the page it scrolls with the page.
I have found several pages describing and demonstrating the function when the subject is a picture, comment box or text in the actual post or page. However, I cannot seem to find a description for when the picture is a part of the css stylesheet.
The subpage-extract from the stylesheet looks like this:
#sp .content_wrapper_sbl {
width:940px;
min-height:320px;
margin:-107px auto 0;
padding:45px;
position:relative;
z-index:20;
background:url(../../images/subpage_content_bg.png) 0 0 no-repeat;
}
Where should I place the javascript for the function (I am trying to use the function from the above link)? I would like it to be for all pages and posts (except the cover-page)
How do I make the subpage image the target of the function? Is it possible to make the #sp or content_wrapper_sbl the target?
I have been trying a lot of different things for a lot of times - but I am very new to web-designing and coding. I hope all the necessary information is included - any help would be much appreciated.
The code I am working is this: http://jsfiddle.net/EahRx/870/
It looks like you've pretty much got it nailed in that fiddle, haven't you? It's personal preference how you want to arrange your javascript files, I guess. Personally, I like to use the Google library to load my jQuery...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
and then load any other plugins you might be using...
<script src="http://www.mydomain.com/js/jquery.plugin1.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin2.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin3.js"></script>
and finally I usually build a custom jQuery file and call it, surprise surprise, "jquery.custom.js"...
<script src="http://www.mydomain.com/js/jquery.custom.js"></script>
So the final javascript include list looks like this...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin1.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin2.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin3.js"></script>
<script src="http://www.mydomain.com/js/jquery.custom.js"></script>
This way the jQuery library is loaded first because the likelihood is that all other javascript files depend on it. Then the plugins are loaded, finally your custom file is loaded because that might depend on some of the earlier plugins being loaded first - for example, your custom file might want to tweak a slideshow file loaded in one of your plugins.
If, for any reason, you are not able to edit the head of your template file to add your javascript include you can add it to the bottom of your HTML like this...
<head>
[META INFO & TITLE]
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin1.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin2.js"></script>
<script src="http://www.mydomain.com/js/jquery.plugin3.js"></script>
[CSS AND STUFF]
</head>
<body>
[YOUR WEB PAGE STUFF]
<script src="http://www.mydomain.com/js/jquery.custom.js"></script>
</body>
</html>
Hope this helps point you in the right direction.
Oh, and remember to add the old "document ready" gubbins to the jquery.custom.js file too...
$(document).ready(function(){
[YOUR JQUERY HERE]
});
I am using an open source wysiwyg editor on one of my asp.net web pages to create news pages... On one page It is put into place like this:
Registered at top of asp.net web page...
<%# Register Src="~/WebUserControls/HTMLEditorControl.ascx" TagName="HTMLEditorControl" TagPrefix="uc2" %>
Incorporated into the page:
<div>
<uc2:HTMLEditorControl ID="HelpTextBox" runat="server" />
</div>
In the code behind there is a Save method that basically saves the above editor data using the id:
dataset.column = htmlTextArea.GetHTML ;
When I try to bring up the page with the editor, I get the error: 'WYSIWYG' is undefined at Line 900, which is:
<script language="javascript" type="text/javascript" >
WYSIWYG.attach('ctl00_ContentPlaceHolder_HelpTextBox_htmlTextArea');
</script>
What's confusing, I have another page set up identically, that produces the same WYSIWYG.attach source, but it handles it with no problem at all. The only difference is the names of the pages. The page that works produces the following, with no problem:
<script language="javascript" type="text/javascript" >
WYSIWYG.attach('ctl00_ContentPlaceHolder_htmlTextArea_htmlTextArea');
</script>
So I'm at a loss...
Does the name of your code-behind class match the class name of your aspx page? Does the aspx page point to the correct code behind file?
My guess is that you copied and pasted but forgot to change that.