Basically I'm trying to get a plugin to work which opens up a webpage as an overlay rather than taking you away from the current page you are on. I cannot get the demo to work properly. It is demonstrated here:
http://jquerytools.github.io/demos/overlay/external.html
with a working demo here:
http://jquerytools.github.io/demos/overlay/external.htm
I can get this working perfectly for other pages which I host (relative paths), but I would like the overlay to open, for example, www.google.com - when I try this the overlay is simply blank. I am at a loss!
<!DOCTYPE html>
<html>
<!--
This is a jQuery Tools standalone demo. Feel free to copy/paste.
http://flowplayer.org/tools/demos/
Do *not* reference CSS files and images from flowplayer.org when in
production Enjoy!
-->
<head>
<title>jQuery Tools standalone demo</title>
<!-- include the Tools -->
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<!-- standalone page styling (can be removed) -->
<link rel="shortcut icon" href="/media/img/favicon.ico">
<link rel="stylesheet" type="text/css"
href="/media/css/standalone.css"/>
<link rel="stylesheet" type="text/css"
href="/media/css/overlay-apple.css"/>
<style>
/* use a semi-transparent image for the overlay */
#overlay {
background-image:url(/media/img/overlay/transparent.png);
color:#efefef;
height:450px;
}
/* container for external content. uses vertical scrollbar, if needed */
div.contentWrap {
height:441px;
overflow-y:auto;
}
</style>
</head>
<body><!-- external page is given in the href attribute (as it should be) -->
<a href="external-content.htm" rel="#overlay" style="text-decoration:none">
<!-- remember that you can use any element inside the trigger -->
<button type="button">Show external page in overlay</button>
</a>
<!-- another link. uses the same overlay -->
<a href="external-content2.htm" rel="#overlay" style="text-decoration:none">
<button type="button">Show another page</button>
</a>
<!-- overlayed element -->
<div class="apple_overlay" id="overlay">
<!-- the external content is loaded inside this tag -->
<div class="contentWrap"></div>
</div>
<!-- make all links with the 'rel' attribute open overlays -->
<script>
$(function() {
// if the function argument is given to overlay,
// it is assumed to be the onBeforeLoad event listener
$("a[rel]").overlay({
mask: 'darkred',
effect: 'apple',
onBeforeLoad: function() {
// grab wrapper element inside content
var wrap = this.getOverlay().find(".contentWrap");
// load the page specified in the trigger
wrap.load(this.getTrigger().attr("href"));
}
});
});
</script>
</body>
</html>
Related
I have a parent page with thumbnails that link to a Jquery AJAX modal, so that when someone closes the AJAX html, the user will return to the scrolled part of the parent page that they clicked on. Everything is working as far as navigation and related thumbs etc. The only problem I am running into is that when i try to share the AJAX html page, the parent is being read, and not the AJAX html page meta.
Is it possible to use some script to have the first set of meta elements skipped and the AJAX meta read? Does that make sense?
Here is the page I'm working on --> Example
HTML:
<a class="thumb {url_title}" rel="modal:open" href="/{segment_1}/{url_title}">Blah</a>
SHARE BUTTONS:
<!-- AddToAny BEGIN -->
<a class="a2a_dd" href="https://www.addtoany.com/share"><i class="far fa-share-alt"></i></a>
<script>
var a2a_config = a2a_config || {};
a2a_config.onclick = 1;
a2a_config.num_services = 6;
</script>
<script async src="https://static.addtoany.com/menu/page.js"></script>
<!-- AddToAny END -->
Jquery:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"> . </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
I can't figure out a way to prevent a flash of unstyled content when fading in text which is supposed to be styled with a font from Google Fonts.
It looks like fonts.googleapis.com loads when the page loads, but it isn't until the text is supposed to fade in that fonts.gstatic.com will load, which leads to a brief and unsightly flash of text in Times New Roman or whatever the default font is before it is abruptly styled properly.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
<!-- Static CSS -->
<link rel='stylesheet' type='text/css' href="main.css"/>
</head>
<body>
<div>
<button id="startButton">Start</button>
</div>
<div id="textDiv">
<p id="textContents"></p>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<!-- Static JavaScript -->
<script src="main.js"></script>
</body>
CSS
#textDiv {
font-size: 40px;
font-family: 'Quicksand';
}
Javascript
var textDiv = $('#textDiv');
var text = $('#textContents');
var button = $('#startButton');
// handle click and add text
button.bind("click", function() {
textDiv.hide();
text.html("<p>Hello</p>");
textDiv.fadeIn();
})
https://jsfiddle.net/eshapiro42/xmf23uqw/15/
Any help figuring out how to prevent this would be greatly appreciated!
You can preload fonts when you're referencing an actual font. What you're referencing here is a stylesheet that adds #font-face to your document with different variations of Quicksand.
The solution is to go to paste the stylesheet link in your browser and grab the direct link to the font, and then load it as a reference in your html document with this:
<link rel="preload" href="ttps://fonts.gstatic.com/s/quicksand/v15/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkP8o58a-xDwxUD2GFw.woff" as="font" crossorigin>
Use the display=block request parameter when referencing the font from Google. Full URL for your example:
https://fonts.googleapis.com/css?family=Quicksand&display=block
This in turn will cause the Google stylesheet to use the font-display: block rule in its #font-face declaration. This rule will specify that you would rather that the text remain unrendered until the font is loaded, than render the text in a local font and re-render when the webfont is ready.
Source:
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization#customize_the_text_rendering_delay
https://css-tricks.com/google-fonts-and-font-display/
In the CSS, you could add display: none; and the in your JavaScript add
$(function() {
$('#textDiv').css('display', 'block');
});
I am trying to create a website that's split into two interactive frames. If you click on a link on the left hand side, the left hand side reloads with new content, while the right hand side remains unchanged (and doesn't refresh).
If I click on a link at the top of the sidebar just once, it behaves fine. Once I click on the same link twice, though my navigation elements disappear.
This is my sidebar's content code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$.get("sidebar-navigation.html", function(data){
$(".sidebar-nav").html(data);
});
/*
Use $.on() to associate a click handler with any link nested under .sidebar-navigation,
even if the links are dynamically added to the page in the future (ie after a
$.get())
*/
$('body').on('click', '.sidebar-nav a', function() {
/*
Get the href for the link being clicked
*/
var href = $(this).attr('href');
/*
Issue a request for the html document
or resource at href and load the contents
directly into .sidebar if successful
*/
$('.sidebar-content').load(href);
/*
Return false to prevent the link's default
navigation behavior
*/
return false;
})
</script>
</head>
<body>
<div class="sidebar-content">
<div class="sidebar-nav">
</div>
<p>
My sidebar content
</p>
</div>
</body>
</html>
your answer is about right, you just need to target a bit better
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$.get("sidebar-navigation.html", function(data){
$(".sidebar-nav").html(data);
});
/*
Use $.on() to associate a click handler with any link nested under .sidebar-navigation,
even if the links are dynamically added to the page in the future (ie after a
$.get())
*/
$('body').on('click', '.sidebar-nav a', function() {
/*
Get the href for the link being clicked
*/
var href = $(this).attr('href');
/*
Issue a request for the html document
or resource at href and load the contents
directly into .sidebar if successful
*/
$('#stick-my-stuff-here').load(href);
/*
Return false to prevent the link's default
navigation behavior
*/
return false;
})
</script>
</head>
<body>
<div class="sidebar-content">
<div class="sidebar-nav">
</div>
<p id="stick-my-stuff-here">
My sidebar content
</p>
</div>
</body>
</html>
I think what ultimately happened was I was calling out for the sidebar navigation to be reloaded when it shouldn't have been on the destination page. Once I removed the sidebar-nav div from the other pages I wanted to display in the sidebar, everything worked out fine.
I am trying to create an HTML order type page with 3 buttons using jQuery Mobile:
Pick Up
Drop Off
Ship It
I've created the buttons and placed them properly on the page. Now, I'd like to display a unique form based on which button is clicked by the user.
Taking a look at examples it appears my options are jQuery, AJAX or Javascript. I'm already using jQuery so I tried going that route with no luck. Having added in the load HTML and JS Alert... my page will completely ignore the loading of HTML, but still display the alert. I've verified that my divs are properly named and that each link has a proper id set. So I gave up on jQuery for a bit.
On to javascript... add my logic in the between tags and again... it ignores loading of HTML content. I've tried putting things in divs, renaming divs, moving my form code to a seperate .html and .txt, but still no luck. I found a working example here and tried forcing its code into my page. Again, it does not load anything on button click when included in my page. (I'm using Chrome Version 35.0.1916.153)
Currently, the code for my page is as follows:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Order Type</title>
<script type="text/javascript">
function showDiv(idInfo) {
var sel = document.getElementById('divLinks').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) {
sel[i].style.display = 'none';
}
document.getElementById('result'+idInfo).style.display = 'block';
}
</script>
<link rel="stylesheet" href="assets/css/pp_mis_oa.css" />
<!-- Standard jQquery Mobile themes can be created and replaced, to apply universal styling -->
<!-- Go to: http://jquerymobile.com/themeroller/index.php to build one, and download it to the themes directory. -->
<link rel="stylesheet" href="themes/jqm-test/theme.min.css" />
<!-- Do not edit or remove the following jQuery framework files. -->
<link rel="stylesheet" href="lib/jquery.mobile.structure-1.3.1.min.css" />
<script src="lib/jquery-1.9.1.min.js"></script>
<script src="lib/jquery.mobile-1.3.1.min.js"></script>
<script src="http://code.jquery.com/jquery-1.4.min.js" type="text/javascript"></script>
</head>
<body>
<!-- Start Main Landing Page -->
<div data-role="page" data-theme="b" class="has_footer">
<div data-role="content">
<p>
<div id="buttonDiv" data-role="navbar">
<ul>
<li>Pick Up</li>
<li>Drop Off</li>
<li>Ship It</li>
</ul>
</div><!-- /navbar -->
<div id="result" style="clear:both;"></div>
</div> <!-- End Content Div -->
<!-- start footer -->
<div data-role="footer" data-position="fixed" data-id="footer-nav" data-theme="d" class="footer-bar">
<div class="ui-grid-solo">
<div class="ui-block-a"><button type="v" data-theme="b">Continue</button></div>
</div>
</div><!-- end footer -->
</div>
<!-- End Main Landing Page -->
<div id="divLinks">
<div id="container1">Container #1<p>Whole bunch of text 1</div>
<div id="container2">Container #2<p>Whole bunch of text 2</div>
<div id="container3">Container #3<p>Whole bunch of text 3</div>
</div>
</body>
What is going on here that jQuery/Javascript refuse to load in my content to my divs? Can someone help point me in the right direction?
Thank you!
If you wanted to do this with jQuery, you could change your showDiv function to the following:
function showDiv(idInfo) {
//hide all divs
$('#divLinks div').each(function() { $(this).hide(); });
//show the one selected
$('#container'+idInfo).show();
}
To move content from your "container" divs to your "result" div:
function showDiv(idInfo) {
//populate "result" div with selected content
$('#result').html($('#container'+idInfo).html());
}
I think you're trying to show divs with ids "result"+IdInfo where your div ids are container1, container2 and container3, so you should replace:
document.getElementById('result'+idInfo).style.display = 'block';
for
document.getElementById('container'+idInfo).style.display = 'block';
Also keep in mind that loading all the forms in the html (even if they are hidden) is not a good practice, so someone could see what he doesn't have to (and also can submit it). Consider to use some dynamic language (such PHP) to load only the form needed as the user type.
I am trying to use jquery virtual keyboard - http://mottie.github.io/Keyboard/mobile.html to create a numbers only input text with a few accelerator keys for a mobile web application.
However I am having a huge issue that is the native android keyboard gets triggered when i press the input box to trigger the on-screen/ virtual keyboard. How do I trigger only virtual keyboard, other plugins can also be used. I have tested a few that all have the same issue.
Perhaps there is a way to disable the input field so it does not trigger the native keyboard but still triggers the on-screen one? making input "readonly" has some issue.
I have the same issue as this other so user: https://stackoverflow.com/questions/15289281/disable-mobile-default-keyboard-to-show-up-using-my-own-virtual-keyboard-web-a however there is no answer to his question.
First attempt
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Virtual Keyboard Basic Demo</title>
<!-- demo -->
<link href="demo/demo.css" rel="stylesheet">
<!-- jQuery & jQuery UI + theme (required) -->
<link href="http://code.jquery.com/ui/1.9.0/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.min.js"></script>
<!-- keyboard widget css & script (required) -->
<link href="css/keyboard.css" rel="stylesheet">
<script src="js/jquery.keyboard.js"></script>
<!-- keyboard extensions (optional) -->
<script src="js/jquery.mousewheel.js"></script>
<!--
<script src="js/jquery.keyboard.extension-typing.js"></script>
<script src="js/jquery.keyboard.extension-autocomplete.js"></script>
-->
<!-- initialize keyboard (required) -->
<script>
$(function(){
alert("Keyboard ON");
//$('#keyboard').keyboard();
$('#keyboard').on('click tap vclick', function (event) {
//alert("detected touch");
event.stopImmediatePropagation();
event.preventDefault();
$('#keyboard').keyboard();
});
});
</script>
</head>
<body>
<!-- Links to other demo pages & docs -->
<div id="nav">
Main Demo
<a class="current" href="basic.html">Basic</a>
Mobile
Layouts
Navigate
Calculator
<a class="play" href="http://jsfiddle.net/Mottie/MK947/">Playground</a>
<a class="git" href="https://github.com/Mottie/Keyboard/wiki">Documentation</a>
<a class="git" href="http://github.com/Mottie/Keyboard/downloads">Download</a>
<a class="issue" href="https://github.com/Mottie/Keyboard/issues">Issues</a><br><br>
</div>
<!-- End Links -->
<div id="wrap"> <!-- wrapper only needed to center the input -->
<!-- keyboard input -->
<input id="keyboard" type="text">
<div><p>Static TEST</p></div>
</div> <!-- End wrapper -->
</body>
I added the following code it does appear to work, however more testing is required to make this a solid workaround:
$('.keyboard').on('focus click tap vclick', function (event) {
event.stopImmediatePropagation();
event.preventDefault();
$('.keyboard').blur();
});
You can add readonly to the <input> tag, this will stop the native keyboard from appearing. Though remember to remove it for desktop users, which will require some device detection which is never fun.
Just use the global attribute <div inputmode="none">,it shoule help.
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode