I have added a loader in my webpage which also contains GoogleMaps. When the page is loading, I use display: none; to hide the contents of the page when it is loading. display:none makes google maps to only display the canvas after the page is loaded and shown in block. Please help.
The code is:
<body onload="myFunction()" style="margin:0; background-color: white;">
<div style="display:none;" id="myDiv" class="animate-bottom">
I tried adding
display: block;
after the above line of code. The code is
<div style="display:block;" id="myDiv" class="animate-bottom">
and it still didn't work
myFunction contains
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 1500);
}
function showPage() {
document.getElementById("myDiv").style.display = "block";
}
Related
My problem is larger than this example but I've composed an example test which exhibits the same behaviour.
The problem, how to attach/reattach the resizable event after dynamically adding an element to the page. I realise that this can be done with click events using something like $('.table1').on('click', 'tr', function() {alert("clicked!");}); which will show the alert when a new tr is added to the table and it is clicked, this uses event delegation. However the examples for using jQuery Resizable do not appear to cater for this, so how can it be done?
Heres my test case (for simplicity this is in a single test file):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Event Delegation Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<style>
#resizable { width: 150px; height: 150px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
</style>
<script src="//code.jquery.com/jquery-3.6.0.js"></script>
<script src="//code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script>
jQuery(document).ready( function($) {
$( function() {
$( ".resizable" ).resizable();// <--- How to add a delegated event on this?
} );
$( "button" ).click( function () {
$( "#size-region" ).append('<div id="2" style="width:150px; height: 100px;" class="ui-widget-content resizable"><h3 class="ui-widget-header">Not Resizable</h3></div>');
} );
} );
</script>
</head>
<body>
<div id="size-region" class="height: 90%; width: 100%;">
<div id="1" style="width:150px; height: 100px;" class="ui-widget-content resizable">
<h3 class="ui-widget-header">Resizable</h3>
</div>
</div>
<button>Click me</button>
</body>
</html>
Docs for jQuery Resizable are at https://jqueryui.com/resizable/
Info on event delegation is found at https://learn.jquery.com/events/event-delegation/
I mention the problem being larger, I believe i could just add the element with javascript for it but what if i have 10 other events to add? I'm specifically looking for a method where I can add a single js file and use this whatever is added to the size-region (if this is in fact possible)
Consider the following.
jQuery(function($) {
function makeResize(target) {
return $(target).resizable();
}
makeResize(".resizable");
$("button").click(function() {
var c = ($(".resizable").length + 1)
var newBox = $("<div>", {
id: "resize-" + c,
class: "ui-widget-content resizable"
}).css({
width: "150px",
height: "100px"
}).appendTo("#size-region");
$("<h3>", {
class: "ui-widget-header"
}).html("Resize " + c).appendTo(newBox);
makeResize(newBox);
});
});
#resizable {
width: 150px;
height: 150px;
padding: 0.5em;
}
#resizable h3 {
text-align: center;
margin: 0;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.js"></script>
<script src="//code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<div id="size-region" class="height: 90%; width: 100%;">
<div id="resize-1" style="width:150px; height: 100px;" class="ui-widget-content resizable">
<h3 class="ui-widget-header">Resize 1</h3>
</div>
</div>
<button>Click me</button>
The initialization of a jQuery UI Widget cannot be delegated in the same way an Event can be. If you want to make a large number of elements be initialized with the same parameters, you can do this with a Function.
Looking at the makeResize() function, I pass in a variable, target that I then wrap so it is a jQuery Object and then initialize Resizable. This technique is very versatile as I can pass in a String, a element, or an object and it will work.
Examples:
$("button").click(function(){
makeResize(this);
});
Makes the button that was clicked upon resizable.
$(document).on("click", "button", function(){
makeResize(this);
});
Delegate the click event to any button that might be created and make it resizable.
I used more pure jQuery and this was my choice and it does not mean that your code, appending an HTML string, is wrong in any way. Two different approaches. I prefer my method as it is easier to read down the line, easier to manipulate or make small changes/fixes, and is easier to make more dynamic.
Your original code could work in a similar way:
$("button").click(function() {
$("#size-region").append('<div id="2" style="width:150px; height: 100px;" class="ui-widget-content resizable"><h3 class="ui-widget-header">Not Resizable</h3></div>');
makeResize("#2");
});
As the new HTML String has been added to the DOM, and is Rendered, we can call it by a selector, "#2".
The pitfall here is that if you click the button a 2nd or 3rd time, you now have multiple elements with the same ID when they need to be unique.
Last note, you do not need to wrap the jQuery in more than one Ready or Anonymous function. You do want to let all the HTML Load and be Ready before you execute your jQuery. This is what $(document).ready(function(){}); and $(function(){}); do for you.
As the developer of the GAS code, the initial HTML dialog appears and functions properly. The html source for EnhancementsDialog.html is:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function onFailure(error) {
var div = document.getElementById('output');
div.innerHTML = "ERROR: " + error.message;
}
</script>
</head>
<body>
<style>
.button {
background-color: blue;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
}
p.Lato{font-size: 20px; font-family: Lato,Arial,serif;}
</style>
<p class="Lato">
Please click the appropriate button for the type of Customization to be added.
</p>
<pre>
<input type="button" class="button" value="EVENT"
onclick="google.script.run.Add_Custom_Action('EVENT');
google.script.host.close);"
>
<input type="button" class="button" value="ENHANCEMENT"
onclick="google.script.run.Add_Custom_Action('ENHANCEMENT');
google.script.host.close;"
>
</pre>
</html>
The html is invoked from a pull down menu on a spreadsheet which calls this function:
function Add_Custom() {
var widget = HtmlService.createHtmlOutputFromFile("EnhancementsDialog.html");
//widget.setWidth(600);
widget.setHeight(175);
SpreadsheetApp.getUi().showModalDialog(widget,"dineDK");
} //end function Add_Custom
The buttons "EVENT" and "ENHANCEMENT" work for me and others except for one user on any browser he uses. Is there any specific system setting that would prevent the 'onClick' from working? The execution log shows me no information.
I am at a loss as to how to investigate this further. Help!
I'm following this tutorial (Removed link as YouTube videos are not allowed on SO).
I can't understand why the banner wont flick through as it should, I have 4 images I intend it to flick through.
Also if anyone does solve this how can I make the images link to another page, e.g is it as simple as adding <a href=.......> in the HTML code?
HTML:
<script type="text/javascript" src:"jquery.js"></script>
<div id="banner">
<img src="images/banner1.jpg" class="active" />
<img src="images/banner4.jpg" />
<img src="images/banner2.jpg" />
<img src="images/banner3.jpg" />
</div>
javascript/jQuery
$(document).ready(function () {
setInterval(function () {
//Get current active image
var active = $('#banner .active');
// If there is another image(object) left then make that image next
// If not, go back to the first image of the banner div
if (active.next().length > 0) var next = active.next();
else var next = $('#banner img:first');
//Get the next image ready by modifying the z-index
next.css('z-index', '2');
//Fade out the active image, then
active.fadeOut(1000, function () {
});
//Move the active image to the back of the pile, show it and remove the active class
active.css('z-index', '1').show().removeClass('active');
//Make the next image the active one
next.css('z-index', '3').addClass('active');
});
}, 3000);
});
CSS
#banner {
position: relative;
margin-left: auto;
margin-right: auto;
height: 350px;
width: 950px;
margin-top: 10px;
}
#banner img {
position:absolute;
z-index:1;
}
#banner img.active {
z-index:3;
}
Right so to start with you don't have your script linked up.
You have:
<script type="text/javascript" src:"jquery.js"></script>
It should be:
<script type="text/javascript" src="jquery.js"></script>
As you have just put jquery.js that means if you homepage (whatever page is using it) is in C:\Users\Me\Documents\Website then jquery.js also needs to be in that same folder.
Then we move to the jQuery, its all ok untill the end of it. You close it with }, 3000);
but then try to close it again using });. The indentation also gives it away.
So when we fix that we get this DEMO HERE
Honestly, I just don't know how to do it. I want to access two sites from one html document. I need to have only one showing at a time, here is what I have so far.
<!DOCTYPE html>
<html>
<body>
<iframe src="http://www.creeperhost.net">
<p>The current browser does not support iframes, or there is a problem with the iframe source.</p>
<iframe src="http://cp.creeperhost.net">
<p>The current browser does not support iframes, or there is a problem with the iframe source.</p>
</iframe>
<input type="button" name="CreeperPanel" value="CreeperPanel"><br>
<input type="button" name="CreeperHost" value="CreeperHost"><br>
</body>
</html>
I want the iframe with the src="www.creeperhost.net" to show when I select the input button "CreeperHost", and vise versa for when I click on "CreeperPanel", to show only the src="cp.creeperhost.net". If you could, I would like to know how to instead of completly hiding the other window, make it smaller in the bottom right.
This is the same principle as showing a div.
<iframe src="http://www.creeperhost.net" id="panel1"></iframe>
<iframe src="http://cp.creeperhost.net" id="panel2"></iframe>
<input type="button" name="CreeperPanel" value="CreeperPanel" onclick="showPanel1()">
<input type="button" name="CreeperHost" value="CreeperHost" onclick="showPanel2()">
<script type="text/javascript">
function showPanel1() {
document.getElementById('panel2').style.display = "none";
document.getElementById('panel1').style.display = "block";
}
function showPanel2() {
document.getElementById('panel1').style.display = "none";
document.getElementById('panel2').style.display = "block";
}
</script>
<style>
.bottom{
position : fixed;
bottom : 0px;
right :0px;
width : 50px;
height : 50px;
overflow : hidden;
}
</style>
<iframe src="http://www.creeperhost.net" id="panel1" ></iframe>
<iframe src="http://cp.creeperhost.net" id="panel2" class="bottom"></iframe>
<input type="button" name="CreeperPanel" value="CreeperPanel" onclick="showPanel1()">
<input type="button" name="CreeperHost" value="CreeperHost" onclick="showPanel2()">
<script type="text/javascript">
var panel1 = document.getElementById('panel1'),
panel2 = document.getElementById('panel2');
function showPanel1() {
panel1.className = "";
panel2.className = "bottom";
}
function showPanel2() {
panel2.className = "";
panel1.className = "bottom";
}
</script>
Try this fiddle:
http://jsfiddle.net/ky7X5/5/
function showPanel(a,b)
{
document.getElementById(a).style.display="inline-block";
document.getElementById(b).style.display="none";
}
this is a very basic question, because I'm a very basic coder :)
I'm using the drag and drop functionality in HTML5
Everything is fine up to the moment of opening the URL (in the same window)... the images are draggable, the drag and drop works fine. But...
How do I make the browser open a URL associated to an element dropped inside another one, and how do I associate that URL to that element?
To be more clear. In the homepage I have an image gallery. To each image I need to associate a different url (do I simply put it in the id?). Just under the gallery there is a box. When I drag and drop an image in this box, the browser needs to open a specific link.
Thank you!
Giovanni
Put your link on your data and load it on the drop event, like this :
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1, #div2
{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Url","http://www.google.fr");
}
function drop(ev)
{
ev.preventDefault();
window.location=ev.dataTransfer.getData("Url");
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
put event.preventDefault() in drop function or all drag/drop functions
function drop(e)
{
e.preventDefault();
// Code...
}