I have an advertisement section on my website. For most users, this loads just fine and works as intended. However, if the user has an ad-blocker of sorts, the advertisement doesn't show up and an empty area of the site is displayed.
My solution? I would like to place a background image under the advertisement that asks users to consider enabling advertisements on this site only. This image is un-obtrusive, and gives the user a choice whether or not to support the site they are visiting. Through simple CSS, I can make this work just fine (just use background-image and it's good).
The problem is that advertisements take a little bit to load (about a second or so for some users). I don't want this background-image to be displayed BEFORE the advertisement has a chance to load, so I'd like to change the background of the div after a certain amount of time (2-3 seconds, maybe).
Here's my current attempt at a JavaScript function:
<script type="text/javascript">
function show_banner(){
document.getElementById('banner').style.background="url('images/banner_bg.png')";
}
function show_banner_delay(){
setTimeout("show_banner()", 3000);
}</script>
This is the HTML code:
<div id="banner-wrap">
<div id="banner">
<!--Google AdSense Code Here-->
</div>
</div>
I feel like I am probably just missing something as far as basic syntax here, but I can't seem to figure it out!
THANKS FOR ANY HELP!!!
Drop the show_banner_delay function.
Test it:
function show_banner(){
document.getElementById('banner').style.backgroundImage="url('images/banner_bg.png')";
}
window.onload = function() {
setTimeout(show_banner, 3000);
};
Try this: setTimeout(show_banner, 3000);
Also, just for good measure change ...style.background = url... to ...style.backgroundImage = url... unless you're going to change other attributes of the background.
Related
I've been googling the whole day for this... I'm still a beginner at html/css/php/javascript, so I probably have some rookie mistakes, but that's why you guys are here to help me!
So, I have a dynamic website with a static template and dynamically loaded content. For example, when I click the "About Us" link, the template remains the same, but the content gets loaded from another .php file and printed out in a iframe in that same index, using the $_GET method. I'm using iframe so I don't affect the template layout. My problem is that my .js file with animations gets executed each time I click any of the navigation links, so it makes my wish to, for example, fade in the whole website once it's loaded impossible. Each time I click a link the entire website would dissapear and fade in again. I don't know did I use Google wrong, but I cannot find the solution to my problem. I only want that script to run once when the page is loaded, not whenever I click a link! Here are some parts of the code:
Part of index.php:
<?php
include('setup/setup.php');
?>
<html>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="javascript.js"></script>
<body>
<div class="wrapOverall">
<div class="header">Logo, language buttons etc.</div>
<div class="wrapMainNav">Main navigation (Home, About us etc.)</div>
<div class="content">
<iframe src=<?php echo "content_$language/$pg.php"; ?> frameborder="0" style="width:951px; height:486px;">aaa</iframe>
</div>
</div>
</body>
</html>
where "content_$language" is the folder from which I get the file, and "$pg.php" is the file itself.
The setup.php file:
<?php
error_reporting(E_ALL ^ E_NOTICE);
if($_GET['page'] == '')
{
$pg = 'naslovna';
}
else
{
$pg = $_GET['page'];
}
if($_GET['lang'] == '')
{
$language = 'cro';
}
else
{
$language = $_GET['lang'];
}
?>
The javascript.js file:
$(document).ready(function() {
$(".wrapOverall").hide(); //Hide the website
$("html").css("visibility", "visible");
var bg = new Image();
bg.src = "images/background.jpg";
bg.onload = function(){ //Load the background image
$("html").css("background-image", "url(images/background.jpg)");
$("html").css("background-repeat","no-repeat");
$("html").css("background-attachment", "fixed");
$("html").css("background-position", "center");
$(".wrapOverall").fadeIn(1000); //Fade in the site
$(".content").animate({height:'468px'},1000); //Animate content loading
}
});
That's about it, if you guys think you need more code I can send it.
Each time you click a link, and the URL changes, the browser makes a GET request to the server for that page. PHP will return the page and the browser will reload it, even if it's 95% the same as the last page you were on. It'll re-render the DOM and hence the $(document).ready event will fire again.
What you're looking to do is to refresh a part of the page without making a GET request to the server for the whole page. To do this you need to use AJAX.
One of the simplest ways to do this is using jQuery's load() method (click for documentation).
Have a look at the documentation and try a simple example, hopefully that will get you started.
NOTE: as has been mentioned already in the comments, there are plenty of frameworks that try to make achieving this functionality easier. Take a look at backbone.js, angularjs and ember.js to name a few. They also add a lot more, so depending on what you're trying to do, might be overkill, but it's worth a look.
Since your javascript is included in every page, it runs each time the page loads, and therefore hides and then shows the whole page. You should exclude it when loading other pages.
Have you tried to call the the iframe content with ajax ? That way the php will be called in the same time than your js functions.
I'm having problems with history object and iframes in javascript/html5. I wrote a simple project to describe my problem:
http://dktest.evermight.com/
It's a page with an iframe and a next button. Every time you click next, it loads a new page with an incrementing counter. However, clicking the browser back button doesn't do what I want it to do. Let me explain the problem by breaking this post up into the following sections:
What I'd like to achieve
Undesired results in current project
Post all my code
1. What I'd like to achieve
I want the user to:
Open a new window and go to http://dktest.evermight.com/
Click next page and see a redbox fade in, and to see the url http://dktest.evermight.com/count.html?count=0 appear in both the iframe AND the browser's address bar
Click next page again and see http://dktest.evermight.com/count.html?count=1 in the iframe and browser's address bar
Click browser's back button ONCE and see http://dktest.evermight.com/count.html?count=0 in both the iframe and the browser's address bar
Click browser's back button ONCE and see http://dktest.evermight.com/ in the browser's address bar AND see the red box fade out
2. Undesired results in current project
With my code at http://dktest.evermight.com/, it's currently not performing steps 4 and steps 5 correctly. When I perform step 4, the iframe shows http://dktest.evermight.com/count.html?count=0 but the browser address bar shows http://dktest.evermight.com/count.html?count=1. I have to press the browser's back button again to make the browser address bar show http://dktest.evermight.com/count.html?count=0. When I perform step 5, the red box fades out which is great, but the address bar is still showing http://dktest.evermight.com/count.html?count=0. I have to press back again to make the address bar show http://dktest.evermight.com/.
3. Post all my code
My code is pretty straight forward. You can view source on http://dktest.evermight.com/. I will also post here for convenience.
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var count=0;
function clicknext()
{
$('#container').fadeIn();
$('#iframe').attr('src','count.html?count='+count.toString());
$('html title').html(count);
history.pushState({blahblah:'whatgoeshere?'},'i dont know what goes here either','http://dktest.evermight.com/count.html?count='+count);
count++;
}
function hideContainer()
{
$('#container').fadeOut();
var closeurl = 'close.html';
if($('#iframe').attr('src') != closeurl )
$('#iframe').attr('src', closeurl);
}
$(document).ready(function(){
hideContainer();
});
</script>
</head>
<body>
<div id="container" style="display:none; background:red;">
<!-- IMPORTANT
When DOM first created, the iframe.src MUST BE initialize.html
I have some code that I need to fire on that page before the rest
of this document starts
-->
<iframe id="iframe" src="initialize.html"></iframe>
</div>
<input type="button" onclick="clicknext()"; value="next page" />
</body>
</html>
close.html
<!DOCTYPE html>
<html>
<script type="text/javascript">
parent.hideContainer();
</script>
</html>
count.html
I CAN NOT modify the contents of count.html. In my real project, count.html is actually a youtube video, which is on a server I can't directly access.
<html>
<body>Youtube video at url <script type="text/javascript">document.write(location.href);</script></body>
</html>
initialize.html
Perform application specific functionality
Can anyone correct my code to achieve the results of step 4 and step 5 as described in section 1?
UPDATE
Ok, I'm appreciating the problem a bit more based on some experiments I'm doing.
Experiment 1: I tried changing the line:
$('#iframe').attr('src','count.html?count='+count.toString());
to
$('#iframe')[0].contentWindow.location.replace('count.html?count='+count.toString());
This allowed me to perform step 4 correctly. Apparently, contentWindow.location.replace() will not create an entry in the history object. However, this caused some other issues related with the contents of count.html, which is actually a page to youtube/vimeo content. The youtube/vimeo content REQUIRES that you load information via the attr('src') approach instead of .contentWindow.location.replace(). So perhaps the solution is to find a way to make attr('src') NOT create an entry with the history object?
Experiment 2 Another possible solution I tried was changing the order of the attr('src') and history.pushState() call. I tried calling attr('src') first then history.pushState() second, and also history.pushState() first then attr('src') second. But in both cases, when I push the browser's back button, it is the iframe content that goes back first. So there's no way for me to capture pass myself a message via the history object to do a "double back", since information in the history object is available LAST in the sequence of events.
Experiment 3 I also tried working with History.js. It did not do anything to solve my problems above. From what I could tell, it worked exactly like the regular history object.
Does anyone have any thing else I can try? Or suggest modifications to any of the experiments above? I'm going to explore Experiment 1 further as a separate stack overflow question.
I create a new iframe and destroy the iframe when loading new content. That solves the history issues.
I know this is a history problem but if you are still open to other possibilities, I think jquery-pjax is actually more suitable for what you are trying to do.
UPDATE I think this should work.
count.html
<div id="pjax-container">
<a id="pjax" data-pjax href="#">Next Page</a>
</div>
javascript
// get URL parameter (count): http://stackoverflow.com/questions/1403888/get-url-parameter-with-jquery
function getURLParameter(name) {
return decodeURI(
(RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
);
}
$(document).on('pjax:beforeSend', function() {
// your fading code goes here
})
$(document).on('pjax:complete', function() {
// fade out
// and then modify the anchor's href with something like
var new_count = getURLParameter('count') + 1;
$('a#pjax').attr('href', 'count.html?count=?' + new_count);
})
// where the pjaxed content should go
$(document).pjax('a[data-pjax]', '#pjax-container')
I'm trying to do something in Sharepoint 2010 that ought to be very simple, create a button that changes page (to a "create new item" form as it happens).
I set up a Content Editor Webpart and put a button in it (not in a form, because in Sharepoint the whole page is a form) with an "onclick" handler that changed the windows.location.href.
In 2010 the CEWP fights you a bit when you try to enter non-trivial HTML, it keeps escaping characters like "&" which can be a real pain. However in the end I got the right content entered.
It didn't work (the page just refreshed itself without changing URL). By checking on StackOverflow I found some recommendations for a more robust form for the CEWP content, which ended up as-
<script type="text/javascript">
function submit_rec(){
window.location.href = "<my server root URL>/Lists/Rec/NewForm.aspx";
return;
}
</script>
<button onclick="javascript:return submit_rec();return false"/>Submit a Recommendation</button>
Here's the strange part.
If I use Firebug and put a breakpoint in the submit_rec() function this works fine. But without a breakpoint, it goes back to the behaviour of always returning to the current page.
It seems there's a timing issue, or Sharepoint is taking control after my URL starts to load, and reloads the original page again!
Anyone seen this before and found a solution?
Ideas and suggestions woudl be much appreciated.
Regards: colin_e
Try this:
javascript:SP.UI.ModalDialog.OpenPopUpPage('/dev/KfD/KfDdev/Lists/Recommendation/NewForm.aspx');return false;
in the onclick event
Thanks to everyone who responded. With some more experimentation, and following hints from other threads on Stackoverflow, I was finally able to get this working.
My mistake with my last effort, using the Sharepoint builtin OpenNewFormUrl() function, was to expect this this would be a global function defined in a central library by SP. Turns out it's not, it has to be defined separately on every page where it's used, partly because it hard-codes the size of the popup frame for the library edit form.
(Yes this is ugly, like a lot of Sharepoint under the covers, anyway, I digress...)
I was able to get a Sharepoint 2010 style "popup" editor working with a button of the same style as the standard SP Document Centre "Submit a Document" button using the following code in a Content Editor WebPart. I have no idea what the script does in detail, I just copied it from the Document Centre site template home page-
<script type="text/javascript">
// <![CDATA[
function ULS18u(){var o=new Object;o.ULSTeamName="DLC Server";o.ULSFileName="default.aspx";return o;}
var navBarHelpOverrideKey = "wssmain";
// ]]>
function OpenNewFormUrl(url)
{ULS18u:;
var options = {width:640, height:720};
SP.UI.ModalDialog.commonModalDialogOpen(url, options, null, null);
}
</script>
<div class="ms-uploadbtnlink">
<button onclick="javascript:OpenNewFormUrl('/dev/KfD/KfDdev/Lists/Recommendation/NewForm.aspx');return false;" type="submit"><nobr><img alt="Submit a Recommendation" src="/_layouts/Images/uploaddoc.png"/> <span>Submit a Recommendation</span></nobr>
</button>
</div>
I'm wary of what setup this will do if (say) the users screen is smaller than the hard-coded popup size, and i'm still confused as to why my earlier (and much simpler) efforts failed, but at least I have a working soluion.
I found this nice jQuery preloader/progress bar, but I cannot get it to work as it is supposed to. The problem is that it first loads my page and after my whole page is loaded the 0%-100% bar displays quickly, after that it reloads my page again. So it does not show the progress bar BEFORE the page loads and it loads the page a second time as well.
Here is my implementation code:
<head>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.queryloader2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("body").queryLoader2();
});
</script>
</head>
<body>
My content...No other reference in here for the Jquery preloader
</body>
Thanks for any help in advance.
I could be very, very wrong here, but in my opinion:
The plugin is flawed.
You have some issue in your page that causes a redirect.
I have created a test fiddle and found out the following:
If there are no images on the page, then the plugin's private function completeImageLoading(); is never called because it is only bound to the image elements. When there are no images -> there's no binding -> no triggering -> nothing completes -> you stay with overlay 0% as demonstrated by the fiddle that is NOT RUN (jsfiddle doesn't see relative images when the page is not run).
The plugin doesn't take into consideration remote images. So if you declare them like so <img src="http://example.com/image.jpg"> - then it won't work because the plugin doesn't recognize them. In fact it is using $.ajax to load images which, obviously, generates a error when trying to access another domain.
The plugin doesn't reload the page (at least in Google Chrome)... check your console output while in the fiddle. It displays the message once per click on Run.
Suggestions:
Make sure you provide at least one relative or background image (though I haven't tested backgrounds...) for the plugin to work.
Show us more code. The fiddle demonstrates that the plugin does NOT cause page reload (at least in Chrome... are you using another browser?). It must be something you made that interferes here.
Specify some options for the plugin (behaves weird when there are none).
Edit regarding preloader
Regarding preloader... if displaying progress is not mandatory for you, then you can just use a window.onload trick. On DOM ready $(...) you create an opaque page overlay with a "Please wait..." message and some animation if you fancy it. Then you wait for window.onload event which "fires at the end of the document loading process... when all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading." When window.onload triggers, you just remove your overlay and voila - the page is ready!
Edit 2 regarding preloader
Actually, you don't even need $(...)... what the hell was I thinking? Just create your overlay (a simple div with a unique id) in your html, style it so that it fills the screen and give it a z-index:1337 CSS attribute so that it covers the entire page. Then, on window.onload:
window.onload = function () {
// Grab a reference to your overlay element:
var overlay = document.getElementById('myOverlay');
// Check if the overlay really exists
// and if it is really appended to the DOM,
// because if not - removeChild throws an error
if (overlay && overlay.parentNode && overlay.parentNode.nodeType === 1) {
// Remove overlay from DOM:
overlay.parentNode.removeChild(overlay);
// Now trash it to free some resources:
overlay = null;
}
};
Of course, it's not really a preloader, but simply an imitation.
Here's a working fiddle you can play with.
P.S. I personally don't appreciate preloaders, but that's just me...
Try out this(Remove the document.ready event and simply call this):-
<script type="text/javascript">
$("body").queryLoader2();
</script>
I have been trying to debug a click on a thumbnail sized "jump map" initiating scrollTo on a large 8000x6000px full sized map (main_map) but it was not behaving and I become very confused so I went back to basics.
You will see below the setup is very simple, but when the page loads the first time I get the scrollbars as expected, however if I clear cache with Ctrl F5, thereafter I may or may not get them, and in fact I may or may not get the image appear, (sometimes just an apparently empty space) then after refresing once or twice they reappear. The patten seems random. In fact this behaviour seems the same on a refresh only.
I also discovered that if the main_map displays in part whilst the scrollbars remain invisable, turning on firebug and pressing the "Reload to see all sources" link forces the scrollabrs to reappear.
What am I not seeing?
for your info - Using the simplest method:
$(document).ready(function() {
$(function()
{
$('.scroll-pane').jScrollPane();
});
});
and the html part:
<!-- Begin Column main -->
<div id="column_main">
<div class="scroll-pane">
<img id="main_map" src="maps/map.bmp" />
</div>
</div>
<!-- End Column Main-->
When you clear the cache and reload the page the images will be re downloaded and offcourse you will see some delay before the images are downloaded. The javascript you have in ready method is redundant use the below.
$(document).ready(function()
{
$('.scroll-pane').jScrollPane();
});