Okay, I'm currently working on a website and I wanted to embed a timeline into each post. I am using WordPress. The timeline I insert would differ from post to post so this timeline cant be inserted into the actual theme I'm using? I'm also very new to PHP, HTML, and JS. But I have searched a ton of forums and cannot for the life of me figure out how to do this. Anyway Here is a link to my timeline. http://derikgrass.com/timeline/xml/2012-2014/pbj/index.html
And here is a link to the timeline embedded on my website using iFrame. http://www.derikgrass.com/events/?p=526
iFrame would work great only that the iframe needs to be much bigger than the timeline itself as the timeline extends when you click on events in the timeline as you can see from the links I provided. Here is the timelines html code:
<meta charset="utf-8">
<title>TimelineXML</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/timelinexml.sleek.css">
<section class="demo">
<p> <br/><br/> </p>
<div class="demo-box">
<div id="my-timeline">
<div class="timeline-html-wrap" style="display: none">
</div>
</div>
</div>
</section>
</div>
<!-- JavaScript at the bottom for fast page loading -->
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>
<!-- scripts concatenated and minified via build script -->
<script defer src="js/mylibs/timelinexml.js"></script>
<script defer src="js/script.js"></script>
<!-- end scripts -->
I want to embed this directly into specific posts I create. If anyone would be able to help me write the code in order to embed this timeline, I would be EXTREMELY appreciative. Thanks.
I think what you mean is that you just want to put his in your html
<iframe src="http://derikgrass.com/timeline/xml/2012-2014/pbj/index.html" scrolling="no" height="400" width="900"> </iframe>
And change the width.
But you should go to the source (so follow that link) and you'll see he uses a nice js file to make it work. If you do that you'll see he's using this script:
http://codecanyon.net/item/jquery-timelinexml/1448100
I don't like scripts from there seeing I believe they are funky websites, but hey, it's your computer and server. You decide.
Related
Hello amazing people in here!
My Goal: Display a Bunch of images neatly on
http://1110kd.blogspot.in/
using Justified image gallery by Miro (http://miromannino.github.io/Justified-Gallery/)
Progress till now:
step 1: Pasted JS files in head section
step-2: tried to post images in a post, also tried to use a HTML widget to imbed the images
Now I tried to paste the remaining code at various locations in the template as well as widget, but no success :(
Now looking around for a fix. I am okay with any solution by which I can showcase a responsive image gallery on my blog (Only gallery, nothing else).
[due to inability of self hosting due to various reasons, I am basically trying to convert the blogger in a single page image gallery]
Thank you so much in advance.
Firstly Down load "justifiedGallery.min.css" and "jquery.justifiedGallery.min.js" then follow this URLhttps://jsfiddle.net/AwadheshVerma/uy0d41f2/
First, when I try your link, the first thing I see is the following image.
You have to fix this before trying to do something else.
A possible solution will be to use a CDN instead.
So to resume, here's a possible template:
<!DOCTYPE html>
<html>
<head>
GooglebaseData goes here ...
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.6.3/css/justifiedGallery.min.css" />
</head>
<body>
All your content
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/justifiedGallery/3.6.3/js/jquery.justifiedGallery.min.js"></script>
<script type="text/javascript">
$("#basicExample").justifiedGallery();
</script>
</html>
With blogger, you have to put all your scripts like jquery and script which need it to be between </body> and </html>
My WebGL example doesn't work if I embed it into Joomla web site, example is pretty simple as there is only one spining cube in the scene as shown in that example Code pen example-spiningcube
<script type="text/javascript" src="http://osgjs.org/examples/vendors/Q.js"></script>
<script type="text/javascript" src="http://osgjs.org/examples/vendors/Hammer.js"></script>
<script type="text/javascript" src="http://osgjs.org/examples/vendors/Leap.js"></script>
<script type="text/javascript" src="http://osgjs.org/builds/active/OSG.js"></script>
<canvas id="3DView" width="100%" height="100%"></canvas>
<ul>Apply Rotation<ul>
<li>Update time: <a id="update"></a></li>
<li>Rotation angle: <a id="angle"></a></li>
</ul>
Normally this example has 2 files one for the HTML file and other for external reference to javascript files.
To make that work in Joomla 3.2.1, I created a Custom HTML module and embed it into one of the articles with loadposition command, but nothing is shown up in the page of web-site. I know that my browser supports WebGL, I noticed only one discrepancy if I open the related page of web site, where my embeded code starting with script type="text/javascript" is not in the head section of page, could that be a reason of why WebGL example is not working?
I tried Google PageSpeed Insights to check how much my website speed does well! But it shows an error in mobile version. Google suggested me to remove render blocking javascript to make my site better looks in mobile device. I've written bellow what exactly they said to me.
Your page has 1 blocking script resources and 3 blocking CSS
resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered
without waiting for the following resources to load. Try to defer or
asynchronously load blocking resources, or inline the critical
portions of those resources directly in the HTML. Remove
render-blocking JavaScript:
https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
Optimize CSS Delivery of the following:
http://fonts.googleapis.com/…%3A300%2C400%7CRaleway%3A400%2C500%2C900
https://www.blogger.com/…/3728782508-widget_css_mobile_bundle.css
https://www.blogger.com/…&zx=88195f1c-da8c-4c99-bb3e-609abb88c4fa
If you've written your page to be dependent on using jquery on load, removing it would mean you'd have to re-write a lot of your code, to save, perhaps 10 milliseconds in load time?
Open your browser's debugger, look at the NETWORK tab and reload the page. You should be able to decide whether this suggested optimization is worth it or not (I'm suggesting it is not).
I was having a similar issue with Javascript. Make sure that in your code after your source your java that you put a type="text/js". Like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/js"></script>
Otherwise you need to go into your server and make adjustments to your htcaccess file.
Heloo Nazmul, may be you should to edit your question to "How to Remove default JS and CSS that make Render Blocking Javascript in Blogger?" may be so long but I think your problem is it.
Follow my step with :
change <head> to <head>
If your Internet Service Provider give some bloking JS and CSS add <!-- </head> --> before </head>
Change </head> to <!--<head/>-->
add <!-- </body></html> --> before </body></html>
It is about DOM get work, I will give you example my blank blogger template if you still headache.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta charset='utf-8'/>
<style/>
<b:skin><![CDATA[]]></b:skin>
<!-- </head> -->
<!--<head/>-->
<body>
<b:section class='header' id='header' showaddelement='yes'/>
<h1 style="color:blue;font-family: monospace">klikada.com</h1>
<b:section class='main' id='main' showaddelement='yes'/>
<b:section class='footer' id='footer' showaddelement='yes'/>
<!-- </body></html> -->
<style>a:link{text-decoration:none;}a:visited{text-decoration:none;}a:hover{text-decoration:none;}a:active{text-decoration:underline;}</style>
</body>
</html>
I am extremely new to Javascript and although some is intuitive, I feel moderately lost.
Trying to create a Jquery Magnific-popup website to showcase vimeo videos since it is a free plugin.
I would like thumbnails to link to this pop-up script.
I find myself getting very confused about what files to include and which to not use since I am new to Javascript.
I have been working with this website:
http://dimsemenov.com/plugins/magnific-popup/documentation.html#mfp-build-tool
Which scripts do I use and which do I leave out to do that?
Please help! I appreciate any help
Thanks
What exactly are you unsure about including? The Magnific documentation is pretty good for that at the link you pasted.
Basically you'll get the 3 files they say, and include them in the order you see on their page. CSS, then jquery then magnific. Your paths to those files will vary depending on where you save them.
The Vimeo stuff, I've no idea.
you can look Jquery stuff, it may help you to solve all your Javascript needs. First of all, JQuery is nothing but, its Javascript package, it have many useful predefined functions, properties and more... first look the JQuery page
http://jquery.com/
if you looking popup forms, just look the link
http://jqueryui.com/dialog/#modal-form
Here you have a very simple example for a pop-up image:
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="css/magnific-popup.css">
<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Magnific Popup core JS file -->
<script src="js/jquery.magnific-popup.min.js"></script>
</head>
<body>
<a class="test-popup-link" href="img/img.jpg">Open popup</a>
</body>
<footer>
<script>
$('.test-popup-link').magnificPopup({
type: 'image'
// other options
});
</script>
</footer>
</html>
I've been writing a simple four-screen Android application using Cordova and jQuery Mobile. The different screens are arranged inside a single page of HTML as DIVs with the data-role="page" attribute. I basically copied the multi-page sample template from the jQuery Mobile documentation.
http://jquerymobile.com/test/docs/pages/page-anatomy.html
Navigation between the pages happens via a persistent navbar stuck to the bottom of each page. Again, I used the code suggested in the jQuery Mobile docs with little modification.
<div data-role="footer" data-id="appNavBar" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>History</li>
<li>Settings</li>
<li>About</li>
</ul>
</div>
</div>
The various Javascript libraries are included in the head section of the HTML page, as follows (application.js contains the logic of the app).
<head>
<title>Redacted</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery/RedactedTheme.min.css" />
<link rel="stylesheet" href="jquery/jquery.mobile.structure-1.1.0.min.css" />
<link rel="stylesheet" href="application.css" />
<script type="text/javascript" src="jquery/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="jquery/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="flot/jquery.flot.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript" charset="utf-8" src="statusbarnotification.js"></script>
<script type="text/javascript" charset="utf-8" src="application.js"></script>
</head>
When Cordova is finished loading and is ready for use, it emits the "deviceready" signal. the Cordova docs recommend binding all setup code to an event listener tied to that signal. I have done it like this in application.js:
function onDeviceReady() {
console.debug("Cordova initialized.");
setup();
}
document.addEventListener("deviceready", onDeviceReady);
setup() is a function that reads information from the browser Web SQL database and storage (using the Cordova API defined here) in order to maintain user preferences and usage information between application launches.
Now for the problem: I was under the impression that jQuery Mobile would use the jQuery ajax method to load any subsequent pages after the first page, and that in doing so it would strip out the head section and skip straight to the DIV with the data-role="page" attribute and the appropriate ID. What I am observing instead is that the scripts in the head section appear to be reloaded whenever I visit a new page of the application. This happens the first time the page is visited in the session and then stops happening.
It appears that Cordova is being reinitialized and that it is emitting the deviceready signal again. Using LogCat in Eclipse, I can see the debug message I placed in the onDeviceReady function. the setup() function is also being called again. This slows things down considerably.
Does anybody know where I'm going wrong? Is there a way to ensure that Cordova only loads once?
Thanks,
Evan
I'm having the same problem using the phonegap facebook connect plugin. The only workaround is to design the entire app to be one html document with panels that are shown and hidden as your different screens. If you want to keep the panels in separate files, you could use something like require.js
I know that this issue is about 9 months old, but just in case my solution helps someone else with the same issue
Don't build your pages with display per HTML, instead build one long HTML page with each display part in it's own DIV with data-role="page"
Now, when you're changing page, you can use JQM's call of $.mobile.changePage() to change the display page
e.g. your page could look like this:
<div data-role="page" id="startingPage">
<p onClick="$.mobile.changePage('page2')">Page Link</p>
</div>
<div data-role="page" id="page2">
<p>more content here</p>
</div>
I know this seems counter-intuitive for most web development, but working with PhoneGap & JQM means NOT working in standard web development