I am a newbie so treat me gently.
I want to open an Highslide html window on load. I have seen an explanation on the old "Highsoft" site but cannot make it work.
Here is my test file without any script to make it open onload:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Open on load - test</title>
<script type="text/javascript" src="highslide/highslide-with-html.js"></script>
<script type="text/javascript" src="highslide/highslide.config.js" charset="utf- 8"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
</head>
<body>
<div>
<a href="#" onclick="return hs.htmlExpand(this, {
width: 400, creditsPosition: 'bottom left',
headingText: 'Stoke Gabriel Boating Association', wrapperClassName: 'titlebar' } )">Inline HTML</a>
<div class="highslide-maincontent">
<h3>Next Sailing Event</h3>
The next sailing event will take place on June 23.
</div>
</div>
</body>
</html>
What do I need to do to make the Highslide window open onload as well as keeping the clickable link?
Best Wishes
Geoffrey
First, you need to use the full Highslide script, not the stripped-down highslide-with-html.js version. Use highslide-full.js or highslide-full.min.js (a compressed version of the full script).
Next, your href needs a unique ID:
<a href="#" id="image1" onclick="return hs.htmlExpand....
The ID can be anything, as long as it's unique.
Finally, add this to the Highslide config options in your highslide.config.js file:
hs.addEventListener(window, "load", function() {
document.getElementById('image1').onclick();
});
hs.addEventListener(document, "ready", function() {
document.getElementById('image1').focus();
});
A good way would be to make a function fire when the document is ready.
if (document.readyState === "complete") { window.open(URL,name,specs,replace) }
Extra information:
Javascript - How to detect if document has loaded (IE 7/Firefox 3)
http://www.w3schools.com/jsref/prop_doc_readystate.asp
http://www.w3schools.com/jsref/met_win_open.asp
Related
I have created a JavaScript modal that opens on click it's isolated in one file and I want to reuse it on other pages, it works fine on the index.html page, but when I want to use it on another page it gives me Cannot read property 'addEventListener' of null I tried wrapping my js modal code in a window.onload = function() {} because I believed that the DOM had not been loaded fully but again it didn't work, how can I make it work on every page?
here is the index.html content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="./css/main.css">
<link rel="stylesheet" type="text/css" href="./css/modal.css">
<title>Word Spelling Game</title>
</head>
<body>
<div class="menu">
<audio controls autoplay loop>
<source src="./sounds/menu-song.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<a href="./pages/game-menu.html">
<img src="./images/choose-game-sign.png" class="board">
</a>
<div>
<img src="./images/help-sign.png" class="board trigger">
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<h1>Welcome!</h1>
<article>
This is a collection of interactive games designed for children, each game
aims to further develop the childs skill set in a variety of tasks that involve
spelling, writing and simple math. It is designed in a fun way so that your kid will never become bored!
There are different levels of difficulty for different ages. To select and play
a level click on the Choose level tab above this one. You can see each game's rules
by clicking on the rules tab that is located on the right corner on each level. The instructions are written in
a way that every kid can understand in case that he get's stuck at some point.
</article>
</div>
</div>
</div>
</div>
<script src="./scripts/help-modal.js"></script>
</body>
</html>
The other page on which I want to use it that the user reaches after he clicks the Choose Game link:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../css//game-menu.css">
<link rel="stylesheet" type="text/css" href="../css/modal.css">
<script src="../scripts/help-modal.js"></script>
<title>Levels</title>
</head>
<body>
<a href="../index.html">
<img src="../images/back-sign.png">
</a>
<div class="help">
<p class="question-mark">?</p>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<h1>Welcome!</h1>
<article>
This is a collection of interactive games designed for children, each game
aims to further develop the childs skill set in a variety of tasks that involve
spelling, writing and simple math. It is designed in a fun way so that your kid will never become bored!
There are different levels of difficulty for different ages. To select and play
a level click on the Choose level tab above this one. You can see each game's rules
by clicking on the rules tab that is located on the right corner on each level. The instructions are written in
a way that every kid can understand in case that he get's stuck at some point.
</article>
</div>
</div>
</div>
</body>
</html>
and my help-modal.js file:
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
On your second HTML file you seem to not have any element with trigger class. This is the reason for your error in Console.
Including your JavaScript files in the end of body(just how you did in your intex.html) is also a good practice, in order to make sure that JavaScript will run after all HTML elements were loaded.
1) On the "other" page, move the <script> tag to the bottom of the markup, like it is in the "index" page, or add a window.onload = function() {} wrapper around the code in the .js file.
The reason for this is that currently in the "other" page, the script is loading first. When it loads, it is immediately executed by the browser. So it immediately runs var modal = document.querySelector(".modal");. However, since the script was loaded before any of the HTML in the <body>, there is no element available which matches the selector .modal. So nothing is selected, and consequently the event listeners are not attached to any element, and so are never triggered.
2) Added to that, your "other" page doesn't contain any element with the class "trigger". So even once you fix the loading issue, the line var trigger = document.querySelector(".trigger"); will still not select anything, and you'll still get a similar error when it tries to attach an event handler to nothing. So you need to correct that too. (This will be why your earlier attempt at window.onload = function() {} failed).
In summary - the HTML elements you're targeting must exist before the JavaScript you're using to target them is executed.
Not sure if what I had in mind is possible or not, but why now.
I have a MVC4 Master page as follows
<head runat="server">
<meta charset="utf-8" />
<title>RYTE HCMS</title>
<meta name="viewport" content="width=device-width" />
<link href="<%: Url.Content("~/favicon.ico") %>" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" href="~/Content/jquery/jquery.mobile.theme-1.4.3.min.css" />
<link rel="stylesheet" href="~/Content/jquery/jquery.mobile.icons.min.css" />
<link href="~/Content/jquery-ui.datepicker.min.css" rel="stylesheet" />
<link href="~/Content/jquery.mobile.structure-1.4.5.min.css" rel="stylesheet" />
<%: Scripts.Render("~/bundles/modernizr") %>
<style type="text/css">
.wrap {
white-space: normal !important;
}
</style>
</head>
<body>
<div data-role="page" data-theme="a" data-url="master-page" id="master-page">
<div data-role="header" data-position="fixed">
<asp:ContentPlaceHolder ID="Header" runat="server">
<h1>
<asp:ContentPlaceHolder ID="TitleContent" runat="server" />
</h1>
<% Html.RenderPartial("LoginUserControl"); %>
</asp:ContentPlaceHolder>
</div>
<div data-role="content">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</div>
<script src="<%=Url.Content("~/Scripts/jquery-1.11.1.min.js")%>"></script>
<script>
$(document).on("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<script src="<%=Url.Content("~/Scripts/jquery.mobile-1.4.5.min.js")%>"></script>
<script type="text/javascript">
$(document).on("pageinit", "#master-page", function () {
$(document).on("swipeleft swiperight", "#master-page", function (e) {
// We check if there is no open panel on the page because otherwise
// a swipe to close the left panel would also open the right panel (and v.v.).
// We do this by checking the data that the framework stores on the page element (panel: open).
if ($.mobile.activePage.jqmData("panel") !== "open") {
if (e.type === "swipeleft") {
$("#right-panel").panel("open");
} else if (e.type === "swiperight") {
$("#leftpanel").panel("open");
}
}
});
});
</script>
<asp:ContentPlaceHolder ID="ScriptsSection" runat="server" />
</body>
I want to load and apply CSS/JQuery in the Android WebView. I want to keep the files in android mobile app and apply them as the page loads inside the webView.
If I don't load these files in specific order the design breaks. The reason I want to do this to make sure user don't feel its a web app. At present at each refresh/reload it takes about 1-2 seconds for jquery mobile and css to load.
Since MVC4 pages are compiled on remote server, Is it possible?
Okay, so the comment on your question basically sums it up. You need to add the js/css code into your assets files.
If you want an example, you can take a look at this sample project (I only load js code, but it's the same principle for css) here
To go over the general idea:
Make your webview use a custom WebViewClient (called MailWebViewClient in the example). You don't need a custom webview (as was done in the example) wv.setWebViewClient(webViewClient);
In your webview client, override the onPageFinished() method and load your javascript code in a string (src) view.loadUrl("javascript: " + src);
That's it. It should work fine
In the example, I'm loading a script that will resize all tables and images to fit inside the webview (a common requirement for android). There's also some haphazard linkify code (to identify and mark links). I wouldn't use the js code, since it's a little buggy, but it's a good example for the principle.
put All Css and JS in assets folder.
and try to load web view with :
webView.loadDataWithBaseURL("file:///android_asset/", <HTMLDATA> ,"text/html", "UTF-8", null);
I am trying to create a webpage including an iframe where the iframe has customizable content. Its an API project.
My main issue is not how to manage appending content to an iframe using jQuery, but in this case I have an empty iframe where I want to insert a full webpage into it. The code for the webpage going into the iframe is received using a .post function where I in return get the full webpage in the data variable.
I can't manage to insert the full code, which include local javascript with important javascript libraries. It is as if it doesn't execute the code inside the iframe. The code is inserted but all the main html/body etc tags are deleted from the code passed in data variable, which prevents various javascript code from working.
I have of course checked that the page received in data variable is ALL of the code. It is correct. The missing tags are missing when displayed in the iframe.
(parent page, domain unknown to me as a API provider)
<body>
<iframe id="EMSNLframe" srcdoc="" seamless></iframe>
<script>
$("#EMSNLframe").load(function(){
$.post("https://api.educationalmedia.se/API_displayNTNewsLetterMenu",
{
ResUID:"[secret code]",
MenuLanguage:"English",
PDFLanguage:"" // Blank for all languages, or state a language
},
function(data,status){
$("#EMSNLframe").contents().find("html").html(data); //<---- this is the line I need a solution for! If there is any.
});
$("#EMSNLframe").contents().find("head").append($("<style> #EMSNLmenu{font-family:'Arial',sans-serif;font-size:12px} </style>"));
});
</script>
</body>
Webpage received in data variable:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<meta charset="utf-8">
<link href="https://data.educationalmedia.se/styles/kendo.common.min.css" rel="stylesheet" type="text/css" >
<link href="https://data.educationalmedia.se/styles/kendo.default.min.css" rel="stylesheet" type="text/css" >
<script src="https://data.educationalmedia.se/js/jquery.min.js"></script>
<script src="https://data.educationalmedia.se/js/kendo.core.min.js"></script>
<script src="https://data.educationalmedia.se/js/kendo.popup.min.js"></script>
<script src="https://data.educationalmedia.se/js/kendo.menu.min.js"></script>
</head>
<body>
<div class="EMSNLmenu">
<!--#4DHTML HTMLmenu_t--> Don't mind this line of code. It is server side tags for data
</div>
<script>
$("#EMSNLmenu").kendoMenu({
animation: { open: { effects: "fadeIn" } },
orientation: "vertical",
closeOnClick: true,
openOnClick: true,
direction: "bottom right"
});
</script>
</body>
</html>
In my Dynamic Web Project (Eclipse), developed with the Spring MVC framework, I have the JSP page below, placed in the folder WEB-INF/jsp/ :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>HorarioLivre</title>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="js/index.js"></script>
<link rel="stylesheet" href="css/style-main.css">
<link rel="stylesheet" href="css/style-popup.css">
</head>
<body>
<header>
<div class="container">
<h1>HorarioLivre</h1>
<nav>
<ul>
<li>Eventos</li>
<li>Cadastrar Horarios</li>
<li>Listar Horarios</li>
<li>Usuarios</li>
<li>${usuario.nome}
<ul>
<li>Perfil</li>
<li>Configurações</li>
<li>Logout</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<div id="results">
Fechar
<div id="content"></div>
</div>
</body>
</html>
My problem is that apparently the application don't be reading the js/index.js file, placed in folder WebContent/js (the css files, placed in WebContent/css, are read normally). When I put some javascript / jquery code directly in the JSP page (like the code displayed in the question Browser doesn't recognize javascript / jquery code), they are executed without any problems.
Someone can find the problem with this page?
Update 1
$(document).ready(function(){
setupPopup();
});
function setupPopup() {
$('a').click(function() {
$('#content').load($(this).attr('href'));
$('#container').append('<div id="cover">');
$('#results').fadeIn(500);
popupPosition();
});
$('#close').click(function() {
$('#results').fadeOut(100);
$('#cover').remove();
});
$(window).bind('resize', popupPosition);
}
function popupPosition() {
if(!$("#results").is(':visible')){ return; }
$("#results").css({
left: ($(window).width() - $('#results').width()) / 2,
top: ($(window).width() - $('#results').width()) / 7,
position:'absolute'
});
$('#results').draggable();
}
FINAL UPDATE
In the end, I choose don't use jquery, and replace the code from the header by this:
<script>
function handleClick(url){
document.getElementById("results").style.display = 'block';
document.getElementById("content").innerHTML='<object type="text/html" data="'+url+'" ></object>';
}
function cleanDiv() {
document.getElementById("results").style.display = 'none';
document.getElementById("content").innerHTML=' ';
}
</script>
each link has this format:
Eventos
and the html code for my popup window get this form:
<section class="about" id="results" style="left: 183px; top: 111px;" onMouseDown="dragStart(event, 'results');">
<div align="right">X</div>
<div id="content" align="center"></div>
</section>
With the parte style="left: 183px; top: 111px;" onMouseDown="dragStart(event, 'results');" being responsible for move the popup across the screen (See the question how to drag and drop a <div> across the page)
I'm not entirely sure, but I think i've seen this done before:
remove http: and https: from your js sources. So it should look like this:
<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
This might not work, it was just a thought I had.
It's not the best solution, but you can try load script dynamically with jQuery.load or something like
<script>document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
Try <script src="/js/index.js"></script> instead.
edit: This Absolute path & Relative Path explains the relative and absolute path in more detail.
I would suggest viewing the source code once your run your JSP in browser (right click - view page source or something similar, depending on your browser). You should see what URL for the JS the page is trying to load and should be able to correct it accordingly.
Also, perhaps it's just your context path missing from the URL. In that case, I'd use <c:url> tags when generating the URL.
I've found various ideas on how to detect when a web video ends, but can't get the syntax right for the way I'm using javascript to play the video. Note that I'm using version 4 of the jwplayer.
Here is the HTML that uses swfobject.js and player.swf. It works fine, but I want to add code that detects when the video has finished at will then redirect to a web location using - window.location.href = http://www.webpage.com
Any help will be very appreciated! Here's the full page of HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type='text/javascript' src='swfobject.js'></script>
</head>
<body lang=EN-US bgcolor='#000000'>
<center>
<p id='preview'></p>
<script type='text/javascript'>
var so = new SWFObject('player.swf','player1','640','381','9');
so.addParam('allowfullscreen','true');
so.addParam('allowscriptaccess','always');
so.addParam('flashvars','&file=mymovie.m4v&bufferlength=3&autostart=true&controlbar=bottom');
so.write('preview');
</script>
</center>
</body>
</html>
You need to use our JS API - http://www.longtailvideo.com/support/jw-player/28851/javascript-api-reference
And, use our JW Embedder (Not SwfObject) - http://www.longtailvideo.com/support/blog/15827/using-the-jw-embedder-to-embed-your-player
Then, the set up will look something like this:
<h2>Redirecting on complete</h2>
<div id="container">This'll be the player</div>
<script type="text/javascript">
jwplayer("container").setup({
file:"bunny.mp4",
flashplayer:"player.swf",
height:400,
width:600,
events:{
onComplete: function() {
window.location = "http://www.google.com";
}
}
});
</script>
Hope that helps!