Access children of HTML5 <object> with jQuery - javascript

I'm building a web application and extracted the code of my navigation menu in a separate file. Afterwards, I include the menu with the HTML <object> element in all of my pages as suggested here. This ensures that I can modify the navigation without touching any other files.
However, I have a problem of dynamically modifying the elements of my menu using jQuery (or d3.js). Here is a very small toy example to reproduce the problem:
nav.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Title of the navigation menu.</h1>
</body>
</html>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script>
$(document).ready(function() {
// this code does not work
$("h1").text("New Title Of The Menu");
// this code does work
$("h2").text("New Title Of The Website");
});
</script>
</head>
<body>
<!-- include the menu code here -->
<object id="navigation" class="navigationObject" name="navigation"
type="text/html" data="nav.html" width="100%" height="100px"></object>
<h2>Title of the website</h2>
</body>
</html>
It seems that jQuery (and also d3.js) have a problem of selecting elements of embedded objects. Is it possible to select these elements?
Alternatively, is there a better solution to extract the code for the navigation menu in a separate file? The setup of my web application is as follows:
Client side purely written in JavaScript using jQuery and d3.js
Server side written in Java
REST for client-server communication using Jersey 2.6.

Related

How do I use <model viewer> to upload and display a model onto my site?

I am currently working on a portfolio site through Cargo. I have minor understanding of writing script but have been attempting to load a 3D model onto my homepage. I found the tag and was wondering how to make it work, it is not visible on the screen right now.
<!DOCTYPE html>
<html>
<body>
<script type="module" src="https://unpkg.com/#google/model-viewer/dist/model-viewer.min.js"></script>
<model-viewer src="https://files.cargocollective.com/c1743864/exp_flower_oldv.obj" shadow-intensity="1" camera-controls touch-action="pan-y" generate-schema></model-viewer>
</body></html>
The code above I have attempted it and Cargo accepts it but the model is not visible. For
<script type="module" src="https://unpkg.com/#google/model-viewer/dist/model-viewer.min.js">
Do I copy and paste the code from this link and save it as an html file to then upload it onto cargo?

HTML to run javascript on wordpress site

<!DOCTYPE html>
<html>
<head>
<title>
Leader Makers Leadership Addessment
</title>
<!-- (A) LOAD QUIZ CSS + JS -->
<link href="quiz.css" rel="stylesheet">
<script type="text/javascript" src="https://www.dropbox.com/s/h96acg5jbwidphm/quiz.js"></script>
<STYLE>
H1 { text-align: center; background: #cf1a1f;
color: #fff}
</STYLE>
</head>
<body>
<H1>Leader Makers Leadership Level Assessment</H1>
<!-- (B) QUIZ CONTAINER -->
<div id="quizWrap"></div>
</body>
</html>
I am trying to run a JavaScript stored on my google drive but it does not run if I replace the src with just the file name it works fine.
If there is a alternative way to run the script and CSS on my WordPress site please share the same.
If you host a file more than some MBs, than g drive shows you an html file as a notice that it could not scan the file for virus. If you copy download link after downloading, then you will see that it is a temporary link, but you might be able to host images in it. (See this). But you can use github repo for this purpose. See more here: https://gomakethings.com/how-to-turn-any-github-repo-into-a-cdn

Getting separate callbacks on browsers back and forward button press

I've a simple web-application, which consists of 3 simple pages
a.html
b.html
c.html
<!-- a.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
b.html
</body>
</html>
<!-- b.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
a.html
<br />
c.html
</body>
</html>
<!-- c.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
b.html
</body>
</html>
As can be seen from the above code, a.html has a link to b.html, b.html has a link to both a.html & c.html and finally, c.html has a link to b.html.
All of the pages will be hosted on the same domain, and I want a very simple thing. All I want is to execute a callback whenever browser's back/forward button is pressed (specifically before navigating to the new page), and in the callback I want the page to which we'll be navigating. And I don't want to update the browser's history while achieving the above (I don't want to ruin the user's experience, updating browser-history will result in unexpected navigation for the user)
The solutions that I tried:
performance.navigation.type
performance.navigation.type == 2 can be used, but it doesn't distinguishes between back and forward button. So it's not of much use for me. Is there any way to distinguish the back and forward button press here?
I don't want to distort this.window.history so that I can get a callback on onpopstate (refer this). Distorting the windows history means ruining the user-experience. Can this be done without distorting the windows history?
I know that using window.history object, I can't find the URL to which the forward/back button will navigate to. (This is because of security). But provided that all of my pages are on the same domain, can I somehow get the url to which fwd/back button will be taking me to. I'm mostly concerned about b.html. While I'm on b.html the forward/back button can take me to either a.html or c.html, how do I detect this before actual navigation happens, so that I can get a callback at this point and execute it.
I tried using JQuery-Mobile but was stuck and posted it as a separate question. Though I'm not sure how JQuery Mobile achieves it and if it will distort the browser's history.
I tried using React-routers, but they are more suited for a single-page-application, and so not much help from there also. Can this be done using any react-concepts?

how to enable push.js ajax content loader with ratchet

i am trying to implement the push.js engine from ratchet:
http://maker.github.com/ratchet/#push
i downloaded the ratchet files from here:
http://maker.github.com/ratchet/ratchet.zip
and am using apache to serve all js, css and html. all files are in the same directory.
here is my one.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ratchet template page</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Include the compiled Ratchet CSS -->
<link rel="stylesheet" href="ratchet.css">
<!-- Include the compiled Ratchet JS -->
<script src="ratchet.js"></script>
</head>
<body>
<!-- Make sure all your bars are the first things in your <body> -->
<header class="bar-title">
<h1 class="title">one.html</h1>
</header>
<!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
<div class="content">
<ul class="list">
<li>
<a href="two.html">
<strong>two</strong>
<span class="chevron"></span>
</a>
</li>
</ul>
</div>
</body>
</html>
and here is my two.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ratchet template page</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Include the compiled Ratchet CSS -->
<link rel="stylesheet" href="ratchet.css">
<!-- Include the compiled Ratchet JS -->
<script src="ratchet.js"></script>
</head>
<body>
<!-- Make sure all your bars are the first things in your <body> -->
<header class="bar-title">
<h1 class="title">two.html</h1>
</header>
<!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
<div class="content">
<ul class="list">
<li>
<a href="one.html">
<strong>one</strong>
</a>
</li>
</ul>
</div>
</body>
</html>
how do i link these two files together?
it looks like push.js is included but when i clicking on the a href's does nothing.
i feel like i am missing something glaringly obvious about this implementation.
thanks for the help.
Ratchet works off of touch events, which are not available in your browser. In Chrome go to chrome://flags/ and enable "Force enable touch events". That should do the trick for browser development. If you want to make this work on desktops without the flag you are going to need a js framework to convert touch events to pointer events. Something like https://github.com/maker/ratchet/blob/master/docs/js/fingerblast.js should do the trick.
Ratchet uses touch events on mobile devices that are different than the pointer events used in a desktop browser.
You can use the Chrome flags as mentioned in earlier answers or your can use #fat's fingerblast.js that converts touch events to pointer events.
The fingerblaster.js file can be found here:
https://github.com/stephanebachelier/fingerblast.js
IMPORTANT: In order to enable fingerblaster.js you need to include a script such as the following at the end of your body element (once your html content has loaded):
<script type='text/javascript'>
var fb = new FingerBlast ('body');
</script>
This will create a new FingerBlast object and set the listener on body of the html document (you can put any css selector string in place of 'body').
I asked the same question. Seems like it only works on ios / phones, not on the web browser.
See: https://github.com/maker/ratchet/issues/148
I found that Ripple Emulator works great with this "issue" (I think only is available on Chrome)
It's nice because you don't need to add another js library
Modern Firefox browsers have a web developer feature called "Responsive Design View". It allows you to view a web page in a smaller viewport to simulate use on a phone/tablet. It also allows you to simulate touch events. I found it particularly useful when working with Ratchet on a web app.
In Firefox, you can enable the Responsive Design View by going to Tools -> Web Developer -> Responsive Design View or using the hotkeys "option + command + m".
More information on the Responsive Design View can be found here.
You can download Chrome Canary and with Developer Tools click over Phone icon ( first one ) then select which mobile phone you want to emulate, you can even use Responsinator.com.
PushJS is embedded into ratchet.js.
Use FingerBlast. Tried Chrome, Safari and it worked.
https://github.com/stephanebachelier/fingerblast.js/blob/master/lib/fingerblast.js
On Google Chrome you can use the developer console and emulate a mobile device with touch events
https://developer.chrome.com/devtools/docs/device-mode#emulate-touch-events

quick jQuery question

Should be a really quick one for you pro's:
I'm learning to use JS, in particular a plugin called (embarassingly) 'Easy Image'.
http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider
Here's my code:
http://jsfiddle.net/tomperkins/LnES6/
JS files are from here:
http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider
And obviously jQuery (1.5)
I've stripped it down to the basics and can't figure out why it's not working.
Any tips are much appreciated!
Thanks in advance,
Tom
jquery.js and easySlider.js gets an Server error 500 when the browser tries to load them from
http://customstudiodevelopment.co.uk/jquery-test/
Verify that the files are there and that they can be loaded
http://customstudiodevelopment.co.uk/js/jquery.js
http://customstudiodevelopment.co.uk/js/easySlider.js
Unless both these urls load the right JS files your code will not work ...
As a general tip, get FireBug addon to firefox, with the Net panel I found this error in less than 30 seconds ;)
In menu on the left you have to set your framework to JQuery and in Add resources box add 'Easy Image' script. Then comment out first two <script> tags (you will need them on your site but not on jsFiddle). Also change src attributes in <img> tags to absolute path because there is no images folder nor any images on jsFiddle site.
Edit
This is what you get with <script> tags on your site:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
2<html><head>
3<title>500 Internal Server Error</title>
4</head><body>
5<h1>Internal Server Error</h1>
6<p>The server encountered an internal error
Script doesn't work because there are no scripts on your site (both links are dead).
This is working:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<base href="http://customstudiodevelopment.co.uk"/>
<script type="text/javascript" src="/jquery-test/js/jquery.js"></script>
<script type="text/javascript" src="/jquery-test/js/easySlider.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider();
});
</script>
<meta charset="utf-8">
<title>jQuery Gallery Test</title>
<link href="/jquery-test/css/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div id="slider">
<ul>
<li><img src="/jquery-test/images/Website-Strip_Future.png"></li>
<li><img src="/jquery-test/images/SR-Toomer_small.png"></li>
</ul>
</div>
<!-- /end #slider -->
</body>
</html>
Note, I put the base element in there to test on my desktop. It's not required for it to work on your server, but if it's on your desktop computer, it should work (so you can copy the html into a Notepad file and save with filetype .html and run it locally to test).
It appears as if your file includes (js/css/image) are not pointing to where you want them to be.
Use Firebug to test these types of things. When you open the console, you can inspect the scripts included, including open each included file. In this way, you can doublecheck to make sure the browser is able to get to your included files.
http://getfirebug.com/
http://getfirebug.com/wiki/index.php/Script_Panel
http://getfirebug.com/wiki/index.php/File:Script_Panel.png <<< see del-linkrolls.js close to top, right; that's where you select which file to inspect
When I loaded the page I got an ".ready() is not a function" which would mean you are not loading jQuery. Then again I've never fooled around with jsfiddle

Categories