simply i am using AddThis Plugin in html and below my code
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid="></script>
and in html tag i used
<div class="addthis_inline_share_toolbox"></div>
but it is not working till i refresh page only .. so how can i load this script and make div work once
Related
I am developing an web based video channel where I have to add mailing functionality. I have added a mail button, all the functionality is working fine, but it is taking more time to load the page. I have included mail.php in the video.php page. Whole page wait until mail.php is included. Hence it is taking more time.
Note my application is developed in PHP codeigniter.
mail.php contain some js file,ajax call,and html form.
Can i do something to load all the page content first then at last load mail.php in background.
here what i tried...
video.php
<script>jQuery("#mail_btn").click(function()jQuery("#div1").load(mail.php);});</script>
<div id="div1" class ="mail_form">
//include_once(mail.php); //it was working fine but it takes time,i want to load mail form here.
</div>
please help me or suggest any alternative way.
Thanks..
I would add the jQuery lazy load plugin http://jquery.eisbehr.de/lazy/. I added a snippet below but there are better examples on the plugin site.
$(function() {
$("div[data-src]").Lazy();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.lazy/1.7.1/jquery.lazy.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.lazy/1.7.1/plugins/jquery.lazy.ajax.min.js"></script>
<div data-loader="ajax" data-src="ajax.html">
<p>Content you want to load later goes here.</p>
</div>
i think you can use Ob_start and ob_end_flush
those are function to control the page output loading and display
check the manual here
php manual
<div data-video="gPXSs-6qRFc"
data-autoplay="1"
data-loop="1"
id="youtube-audio">
</div>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="https://cdn.rawgit.com/labnol/files/master/yt.js"></script>
If I stick this in the HTML, the div becomes populated with a play button, and the corresponding Youtube video (audio) will start to play. However, if I use Javascript to stick it on the page some time after the page has loaded, the div fails to become populated (I assume this is because the scripts we've added don't run).
Using Javascript (triggered by a user action), how can I put this content onto the page and make these scripts run?
I am developing a website from scratch and I realized that instead of having the header (banner+horizontal navigation menu) code in each html page, it would be more efficient to have it in a separate HTML file and use the JS load function in every page's body, so I can modify the header in only one file to apply changes to the whole website instead of wasting time modifying it on every page.
problem is since I made that change using :
<script>
$("#header").load("header_eng.html");
</script>
in every page's body (where header_eng is an html file containing my header code), my website started to "blink" between each page. Now when I navigate the website, the banner image, for example, blinks/flickers between pages instead of just staying there.
I did not have this problem when my header code was in every page's code.
here is the example of the website with the header code in every page file :
https://cbrieuc.github.io/index.html
(only the two first pages are up for the first example so just spam the link "About Me" or "News" to check for blinking)
and here with the "load" function instead :
https://cbrieuc.github.io/index_eng.html
here is what the code looks like for a page using the "load function"
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<title>BRIEUC COUILLEROT</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header"></div></br>
<div id=corps>
<pre>
test
</pre>
</div>
<!--loading header from header.html-->
<script>
$("#header").load("header_eng.html");
</script>
</body>
</html>
Any idea what occured?
by the way i'm quite new to web development!
It is because the javascript is being executed after page load. You need to include your header file using a server side language like php
I've come across a strange problem with jQuery mobile - If i have an anchor link to the same page, then the javascript on the page is not run after clicking the link and returning to the same page.
For example (test.html):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.1/jquery.mobile.structure-1.4.1.min.css" />
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript">
alert('hello');
</script>
</head>
<body>
<div style="height: 1000px">
test
</div>
</body>
</html>
... "hello" alert is shown the first time, but after clicking the "test" link (to go back to the same page), the alert doesn't happen.
If I remove the reference to jquery mobile js then it does work as expected, showing "hello".
Does anyone know what's going on here?
jQuery mobile loads internal links via AJAX.
Try changing your anchor to:
<a data-ajax="false" href="test.html?dosomething=1">test</a>
Documentation - Linking Pages:
Default link behavior: Ajax
To enable animated page transitions, all links that point to an external page (ex. products.html) will be loaded via Ajax. To do this unobtrusively, the framework parses the link's href to formulate an Ajax request (Hijax) and displays the loading spinner. All this happens automatically by jQuery Mobile.
If the Ajax request is successful, the new page content is added to the DOM, all mobile widgets are auto-initialized, then the new page is animated into view with a page transition.
I created an index.html page that have 3 different tabs. With the function tabs() of jQuery UI I want to load an html page with Ajax. Every HTML page use jQuery library, so every page have this code:
<link type="text/css" href="css/redmond/jquery-ui-1.8.5.custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.4.3.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js"></script>
If I click on a tab the page is loaded but the JavaScript function of the page doesn't work!
So can I load in a tab a new complete HTML page (HTML+JS)?
two possibilities:
1) if you need jquery-ui in each tab, it's better to load it when initalizing your tabs.
2) use following to load your javascript files:
$.getScript("js/jquery-ui-1.8.5.custom.min.js");
and for css:
$.get("css/redmond/jquery-ui-1.8.5.custom.css", function(css) {
$("head").append(""+css+"");
});
Edit: You never load a complete new html page with ajax tabs - you only load a code snippet which is included in your existing html page. Use Firebug for Mozilla Firefox to see what happens ;o)
Ok, the problem is to understand what the tabs do. With Ajax I can load some content in a tab.
If I declare a <div> for a tab, Ajax loads the content in that <div> so I can't load a new complete HTML page becouse the DOM after the load have two open <html><head> ecc.
So now I understand the function of the Ajax in the tab, and the load of complete HTML page is a big mistake!
Thanks Tobias.