I have this page, the superfish menu does not show over the google earth plugin but under!
This problem is happening in IE8 and Google Chrome.
Any Ideas?
To run the following code run it under localhost (that is the domain registered with the google earth api key)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<link type="text/css" rel="Stylesheet" href="http://users.tpg.com.au/j_birch/plugins/superfish/css/superfish.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://users.tpg.com.au/j_birch/plugins/superfish/js/superfish.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?key=ABQIAAAAFoBwRF7WovCjsFJemYop1hT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTpGk76aE2Yul2N6gAS9CZLeDBtuA"></script>
<script>
$(document).ready(function() {
$('ul.sf-menu').superfish();
});
var ge;
google.load("earth", "1");
function init() {
google.earth.createInstance('map3d', initCallback, failureCallback);
}
function initCallback(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
}
function failureCallback(errorCode) {
}
</script>
</head>
<body onload="init()">
<ul id="sample-menu-1" class="sf-menu">
<li class="current">
menu item
<ul>
<li>
menu item
</li>
<li class="current">
menu item
</li>
</ul>
</li>
</ul>
<div id="map3d" style="width: 500px; height: 380px;"></div>
</body>
</html>
It is not possible to apply z-index layering of arbitrary HTML content on top of the Google-Earth-Plugin window. There is a long standing feature request for that functionality here:
http://code.google.com/p/earth-api-samples/issues/detail?id=9
In the comments to that request there are workarounds and demos posted involving an IFRAME shim, but that works only for iframe boxed content. Due to low-level details of how plugins work within browsers, I think it's unlikely z-index layering of arbitrary content over the plugin window will be possible anytime soon, especially across all browsers.
Related
I like to indent <html>, <head>, <body> and the child elements (not all descendants) of <body> at the same level, at the very start of each line. Like so:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body>
<h1>Example</h1>
<ul>
<li>Example 1</li>
<li>Example 2</li>
</ul>
</body>
</html>
I also don't want any empty lines between <html>, <head>, and <body> tags, which is what happens by default when I run the selection formatting operation. Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body>
<h1>Example</h1>
<ul>
<li>Example 1</li>
<li>Example 2</li>
</ul>
</body>
</html>
How can I configure Visual Studio Code to do this automatically?
Currently I have to manually undo the extra indentations for every new HTML file. After removing them and adding one child element to <body>, it does behave like I want. But it's still quite irritating to have to do it every time.
I am returning to web development after many years. I did web development before jQuery came along.
Now I see a lot of frameworks to choose from. I see web frameworks (aurelia, ember etc) and then web design frameworks (bootstrap, foundation etc).
My task at hand is too narrow down the technology options for a web app which will provide a certain drag and drop user interface to build workflows.
For drag n drop I have seen, not used, dragulla and interact.js
But not having a hands on experience I am in a confused state. The only certain thing at the moment is the backend which is going to be Django.
Can you please provide some guidance here? My main concern is the ability of doing a smooth drag and drop experience. I would also like to save the state of the flow which is designed by dropping the objects on the canvas, to keep the visual representation of the workflow.
Cheers
A simple and basic drag and drop functionality is provided by jquery ui draggable.
You can see how simple it is to implement:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Draggable + Sortable</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
li { margin: 5px; padding: 5px; width: 150px; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#sortable" ).sortable({
revert: true
});
$( "#draggable" ).draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
});
$( "ul, li" ).disableSelection();
} );
</script>
</head>
<body>
<ul>
<li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</body>
</html>
Alright, I thought I implemented this correctly, but I guess I must've goofed somewhere.
Here's my code:
Jquery here:
jQuery(document).ready(function( $ ){
$(function() {
$( ".cta-nav-hover" ).tooltip({
show: null,
position: {
my: "right+40 bottom",
at: "left bottom"
},
open: function( event, ui ) {
ui.tooltip.animate({ top: ui.tooltip.position().top - 10 }, 75 );
}
});
});
$(function() {
$(".fancybox").fancybox();
});
});
Then The HTML:
<div id="cta-nav-wrapper">
<ul id="cta-nav">
<li class="bio">
<span></span>
</li>
</ul>
</div>
I thought that this would work, but when I click the link, it just brings me to the placeholder image instead of making a popup. What did I do wrong? It looks as though i have the files lined up properly, or at least when i inspect them through firebug it goes to the proper js.
Here's what I called in the head:
<!-- Add fancyBox -->
<link rel="stylesheet" href="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/content/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/jquery.fancybox.pack.js"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
<script type="text/javascript" src="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-media.js"></script>
<link rel="stylesheet" href="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
<script type="text/javascript" src="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-thumbs.js"></script>
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="/wp-content/themes/hustle-child/includes/js/magnific-popup.css">
<!-- Magnific Popup core JS file -->
<script src="/wp-content/themes/hustle-child/includes/js/magnific-popup.js"></script>
I also tried another plugin called Magnific Popup but it's also unresponsive. I'm thinking it has something to do with my wordpress theme's set up.
This href="http://placehold.it/350x125" doesn't say to fancybox that you are opening an image so you either :
1). add the fancybox.image special class to your link like
<a class="cta-nav-hover fancybox fancybox.image" href="http://placehold.it/350x125" title="Bio"><span></span></a>
2). add the (HTML5) data-fancybox-type attribute to your link like
<a data-fancybox-type="image" href="http://placehold.it/350x125" title="Bio" class="cta-nav-hover fancybox"><span></span></a>
3). add the type option to your fancybox script like
$(".fancybox").fancybox({
type: "image"
});
whatever you think works better for your case.
NOTE: numbers 1). and 2). above work for fancybox v2.x only. Number 3). works for either v1.3.4 and v2.x
EDIT : included a JSFIDDLE with your code and jQuery v1.8.3.
There are two links :
one using "fancybox.image" class : working
other without : not working
I'm having problems with my HTML and jQuery Code. I was wondering if someone could tell me what's wrong with it. Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Main Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Scripts -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<!-- Stylesheets -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<!-- Color Scheme -->
<!-- Beige: #eee8cd; Green: #008b8b; Blue: #203471; -->
</head>
<body>
<div id="MainPage" style="background:#008b8b;color:#203471" data-role="page">
<div style="background:#008b8b;color:#203471" data-role="content">
<p style="background:#008b8b;color:#203471"><img alt="" src="Images/Header.png" style="width:100%" /></p>
<p style="background:#008b8b;color:#eee8cd">The content for the main page is here</p>
<a style="background:#eee8cd;color:#203471" href="AboutUs.htm" data-role="button">About Us</a>
<a style="background:#eee8cd;color:#203471" href="ContactUs.htm" data-role="button">Contact Us</a>
</div>
<div style="background:#203471;color:#eee8cd" data-role="footer">
<h4>Main Page Footer</h4>
</div>
</div>
</body>
</html>
There are two problems that I am having problems figuring out:
1) When I put this code on my web server and navigate to it via my iPhone it is fine when the phone is held in the vertical position. When the phone is moved into the horizontal position though, the buttons seem to be displayed over the text and are not workable. Any ideas on how to resolve this?
2) I tried to create a custom stylesheet.css and link to it via the class attribute of the various tags. This would not work so I had to put the inline code (for example:)
<div style="background:#203471;color:#eee8cd"
Can someone show me how to create a stylesheet.css with these attributes and "tag" them in the HTML so that this works?
Thanks So Much.
Well, you've got a link to jQuery where your link to your CSS should go. Check out www.codecademy.com !
I've separated inline css to its own and seems to render fine.
Play with this fiddle here http://jsfiddle.net/kVqWJ/
You can include css files in your html file many ways:
1)
<style type="text/css">
//your style here
</style>
2)
<link rel="stylesheet" type="text/css" href="css url here">
A quick googling will help. The Mozilla developer network is a great place to start.
I am attempting to use a document ready function I found on your site to force a fancybox lightbox to appear when a page loads. Here is the code I am using, (I found it here on your site). It does force the fancybox to appear on page load, but it forces it to open in a new page and it loses it's modal properties when I add in the $document ready function.
I'm not terribly technical, but after hours of researching and trying several methods, I'm giving and seeking help. Any support would be greatly appreciated.
<link media="all" rel="stylesheet" type="text/css" href="css/all.css" />
<link media="all" rel="stylesheet" type="text/css" href="css/fancybox.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.js"></script>
<script type="text/javascript" src="js/jquery.sameheight.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#hidden_link").fancybox().trigger('click');
});
</script>
</head>
<body>
<div id="wrapper">
<a name="hidden_link" id="hidden_link" a class="lightbox" href="#popup01"></a>
</div>
<div class="popup-holder">
<div id="popup01" class="lb">
Your code is correct but you may missed to include css or js files for fancybox.