On a few websites that I maintain, I noticed that adding a share button like AddThis to a page varyingly slows down page loading, sometimes significantly.
What is the explanation for this and what can be done to keep share buttons while not incurring page loading performance penalty for this?
add the script call to the bottom of your page, that's what i do, right on top of </body>.
...
all my html
...
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
Share
<span class="addthis_separator">|</span>
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
</div>
<!-- AddThis Button END -->
...
all my html
...
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4d4c6a9028bcda9b"></script>
</body>
</html>
Edit: By moving the script call to the bottom of the page your page will load before the script and your users will not feel the impact.
#Anodroid - I would leave your PHP at the top.. PHP scripts will be dependant on the processing speed of your server and the javascript will be determined first on the connection speed to the host "http://www.addthis.com/bookmark.php?v=250&username=xa-4d4c6a9028bcda9b" and how fast they can server the content to be embedded on page "|
"
good luck
Related
I have researched some answers that talk about php, javascript, iframes etc. but I have tried a couple and none of them work. I am new to HTML coding.. and coding in general!
<link rel="menu" href="menu.html"> does nothing
<!--#include virtual="/menu.html" --> does nothing (presumably because its a comment?)
<iframe src="page.html"></iframe>
or object... both place the menu in a silly little scroll box.
I want to run my menu on my page as if it were a function in C. Where I can just include it, and it be there, or just link it.
Thanks for the help!
Ryan
webpage file: biology.html
menu file: menu.html
<div class="container">
<img src="homeicon.jpg" width="50" alt="Home">
<div class="redhover">
<div class="dropdown">
<button class="dropbtn">GCSEs</button>
<div class="dropdown-content">
Chemistry
Biology
</div>
</div>
<div class="dropdown">
<button class="dropbtn">A-Levels</button>
<div class="dropdown-content">
Chemistry
Biology
</div>
</div>
<div class="dropdown">
<button class="dropbtn">University</button>
<div class="dropdown-content">
Telecommunications
Electronic Engineering
</div>
</div>
<div class="dropdown">
<button class="dropbtn">More</button>
<div class="dropdown-content">
About me
Youtube
</div>
</div>
</div>
</div>
You can use php to include files on other pages. Here is some example code to get you started:
<?php
require_once('menu.php');
?>
You can put this in your HTML page appropriately, however you must make sure that php can be processed on your server and the file containing php code must end in the .php extension.
There are also other methods of including files via php, see here:
http://php.net/manual/en/function.include.php
and
http://php.net/manual/en/function.require.php
Edit - I'm not a big fan of this approach, but it will work on Github pages.
Create a file called nav.js with your menu defined as a js variable, then use javascript to insert it into an empty div created on each page. This way to update your nav you only have to ever edit nav.js Not pretty but it works
nav.js
var navigation = "<nav>";
navigation += "<ul>";
navigation += "<li>Home</li>";
navigation += "<li>About</li>";
navigation += "</ul>";
navigation += "</nav>";
document.getElementById("navigation").innerHTML = navigation;
Other pages
<div id="navigation"></div>
<!--rest of page goes here.-->
<script src="nav.js"></script>
Fiddle: https://jsfiddle.net/ze3hLxx8/1/
There are multiple ways to include a file into another depending on the backend technology you wish / want / need to use.
PHP
The most common way to do it in php is by using the include or require statement inside a php file.
In your specific case your biology.html file must be converted to a biology.php file and then you can add the relative code to include the file:
<?php include('menu.php');?>
This simple statement will add the content in your menu.php file to the current page. This will not work if php is not present on the server and obviously will not work locally without a local development environment
The differences between require and include can be found on the official documentation:
include: http://php.net/manual/en/function.include.php
require: http://php.net/manual/en/function.require.php
SSI
Another method is to use Server Side Includes. To use the SSI it must be supported and enabled on the webserver. To use SSI you need to change the extension from biology.html to biology.shtml and then add the following statement:
<!--#include file="menu.html" -->
More information on server side includes can be found on wikipedia: https://en.wikipedia.org/wiki/Server_Side_Includes
I couldn't find any other info about anyone with this problem... I am not using .page() anywhere, i even unlinked my exterenal javascript file, and it still happens.
I navigate using a navbar and randomly (not always) it will start reloading the page in an infinite loop. and there is this 1 page, that has nothing special that will always happen if i press f5 to reload it, but if i come from another page... it doesnt happen o O it's so weird.
I'm using php and jqm 1.4.2 with jquery 1.10.2. I would post code, but can't really pinpoint anything.
On the page that i can press f5/refresh and it always does this bug, i tried removing all content, and php, other than includes/header/footer partials and it still happens...., removing my js from header and it still happens, the only conclusion I can come to is jqm 1.4.2 jquery or my php settings, which i am clueless on what to do. Any idea? This site used to be in jqm 1.2.0 and don't remember having this problem then.
EDIT: It seems removing the _footer.php partial stopped the bug this is its contents:
<?php
$navCSS = "ui-btn-active ui-state-persist";
?>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>Quarts</li>
<li>Nouvelle</li>
<li>Dispo.</li>
<li>Paies</li>
<li>Autres...</li>
</ul>
</div>
</div>
<!-- page end -->
</div>
</body>
</html>
EDIT: removing data-prefetch stops the issue, but i wanted to prefetch pages for smooth navigation and make it feel like an app, why does it cause this issue?
External pages/links are being prefetched several times as you are using the same navbar internally for each page. Your solution is to use an External footer and navbar which can be accessed from any internal or external page.
<body> <!-- or page container div -->
<div data-role="page">
</div>
<!-- external footer -->
<div data-role="footer" data-theme="a">
<div data-role="navbar">
</div>
</div>
When using external widgets, you need to initialize them manually by calling .toolbar() and then .enhanceWithin() to initialize inner widgets.
$(function () {
$("[data-role=footer]").toolbar().enhanceWithin();
});
I'm rather new to programming, but I'm trying to find a way to do what is described below.
<body>
<div class="gallery">
<img src="photo_1.jpg">
<img src="photo_2.jpg">
<img src="photo_3.jpg">
<!-- trigger for user to load items that weren't downloaded on page load -->
<img src="photo_4.jpg">
<img src="photo_5.jpg">
<img src="photo_6.jpg">
</div>
</body>
I'm trying to find PHP functions that would, ideally, only load the first 3 img embeds within a certain class/ID, and have a clickable trigger to request the remaining img embeds from the server.
I don't know if this is how the typical message board software(such as vBulletin) handles things with "spoiler tags" .. as in whether or not it actually prevents loading, or just hides the content from view. Something like that, if it actually prevents loading, is what I'd like to know about.
First, this has nothing to do with PHP.
The only way to prevent a page from loading the image is to not include the tags on the page.
You could accomplish this a couple ways:
Place the last three photos inside a hidden container and use a Javascript click event to display them when wanted, but that still loads the images when the page is loaded.
Or, you can use an AJAX call to retrieve the items only on demand. Unless they are really large images I would think the first option the best.
<div class="gallery">
<img src='photo1.jpg'/>
<img src='photo2.jpg'/>
<img src='photo3.jpg'/>
<a href="#" onClick='document.getElementById("hidden-gallery").display="visible"'>show more</a>
<div id="hidden-gallery" class="hidden-gallery" style="display:none">
<img src='photo4.jpg'/>
<img src='photo5.jpg'/>
<img src='photo6.jpg'/>
</div>
</div>
I recognize that embedding CSS styles and Javascript the way I did is not the preferred method but it is there just for the examples sake.
The <div id="page>" and <div id="pagecontent"> don't show in on my webpage. In Firebug, the "Script" tab shows that index.php has both of these divs in it, but the HTML tab doesn't show either div. Why?
All of the content is generated by PHP, and everything shows correctly on the page except for these two divs. Both divs are immediately after the <body> tag. The active website with this problem can be found here.
HTML document:
<?php include "topofpage.php" ?>
<!--Main Content Area-->
<div id="main">
<!-- TABLE HTML GOES HERE, BUT IT'S KINDA LONG AND BORING AND THE PROBLEM ISN'T HERE SO I TOOK IT OUT -->
<!--Copyright Notice-->
<p><br />
<div id="divdate">© 2009-2025 Poet Slam. All rights reserved.</div><br />
<script type="text/javascript">
var divisiondate=document.getElementById("divdate"); var newdater=new Date(); var years=newdater.getFullYear(); divisiondate.innerHTML="© 2013-"+years+" Poet Slam. All rights reserved.";
</script>
</div> <!-- THIS CLOSES THE <DIV ID="PAGECONTENT"> CREATED IN THE EXTERNAL PHP FILE
</div> <!--THIS CLOSES THE <DIV ID="PAGE"> CREATED IN THE EXTERNAL PHP FILE
</body>
</html>
it's a small thing, but looking at line 49 in the page source you have an unclosed comment
<!--CREATE A POEM * TAG DRAG AND DROP->
Running the page as it stands through the W3CValidator - http://validator.w3.org/ - shows that causes a few errors that might be throwing the DOM parser.
As a first step I'd suggest fixing that, and iterating through the validator to at least knock off the (unexpected) errors
I have a multi-page form which works on the principle of loading all of the pages inside the DOM under different DIV id's and as you progress through the form, it simply ads a style="display:none" to the Div's which should not be displayed.
I have a problem where two pages need to have the same content, however as i am using javacript and jquery, i am getting conflicts (as technically, both pages are loaded and the scripts are conflicting).
Can i get a php if Function to say - IF Div id gform_page_2_2 has style="display:none" load (block of html a), and IF Div id gform_page_2_3 has style="display:none" load (block of html b), otherwise load nothing.
How would i go bout doing this?
I'm not quite sure what exactly you are asking but since you have a way to determine when to apply style="display:none" you can use a boolean value display_none=true and use that in your if.
This is a sample code. Here, I have made use of jQuery here. I have included each page's content inside separate DIVs in my index page. Then displayed the content of the page upon clicking the menu in my navbar. I hope this will give you an idea. :)
JScript:
<script type="text/javascript">
$('.nav_button').click(function (){
var page = $(this).text().toLowerCase();
$('#content').html($('#'+page+'_page').html()); //display content of div(that holds the content of the respective page) in the "conetent" div
$('html, body').animate({scrollTop: $("#navbar").offset().top}, 'slow'); //scroll back to the top
return false;
});
</script>
HTML:
<!-- Navigation menu -->
<div id="navbar">
<a class="nav_button" href="#">Home</a>
<a class="nav_button" href="#">About</a>
<a class="nav_button" href="#">Contact</a>
</div>
<div id="content">
<!-- Here page content will be displayed -->
</div>
<!-- This div holds the contents of each page -->
<div style="display:none;">
<!-- Contact Page -->
<div id="contact_page">
You can contact me through this email....
</div>
<!-- About Page -->
<div id="about_page">
About me? I love coding...
</div>
<!-- Home Page -->
<div id="home_page">
Yo! You are at my home page. Check out my whole site and enjoy :)
</div>
</div>
I hope this will help :)
If you want to see it in action, goto: www.magcojennus.co.cc (it's a site that I have created for my college day :) )