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...
}
Related
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";
}
I'm learning how to code and I wanted to link a loading page to my HTML but it doesn't seem to be working. I got my code from here but it seems like it's not working at all. If you guys could identify the problem, that'd be great.
This is the code as of now:
<html>
<head>
<meta charset="UTF-8">
<title>Loading</title>
<link href="demo.css" rel="stylesheet" type="text/css">
<link href="normalize.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>
I did not find your code.
So Here is a sample approach.
While the page is loading, image will be displayed at the middle of the page and the entire page is in transparent background. So Whenever your page gets loaded, then add hidden class to that image div.
Create 2 Classes one is to make div hidden.
.hidden{
display:none;
}
Second one to show image.
.show_image{
position:fixed;top:0;right:0;bottom:0;left:0;
background: rgba(0,0,0,0.5) url(/img/spinner.gif) no-repeat 50% 50%;
z-index:100;
background-size: 5ex;
}
And your HTML code would be
<div class="show_image"></div>
<div class="hidden box"> Your actual content </div>
Initially your content will be hidden state and loading image will be displayed.
After completion of page loading just toggle the hidden class.
$('.box').removeClass("hidden");
$('.show_image').addClass("hidden");
You can use load function to know that page is fully rendered.
$(window).load(function() {
//everything is loaded
});
So that your content will become visible and loading image will be hidden.
Let me know if you need to any help regarding Page Load.
you can try this one:
function onReady(callback) {
var intervalID = window.setInterval(checkReady, 1000);
function checkReady() {
if (document.getElementsByTagName('body')[0] !== undefined) {
window.clearInterval(intervalID);
callback.call(this);
}
}
}
function show(id, value) {
document.getElementById(id).style.display = value ? 'block' : 'none';
}
onReady(function () {
show('page', true);
show('loading', false);
});
DEMO HERE
I want an image to automatically popup when someone goes to our main page. One that they can click to close after they have seen it. Can someone please show me how to do this that doesn't require a ton of coding. Thanks you!
I would do this with jQuery (and I bet you're using jQuery for your template too :) )
Be sure you're calling the jQuery library in your page, I would recommend to place it just before the </body> tag and BELOW all the scripts.
for example
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- let's call the following div as the POPUP FRAME -->
<div id="popup">
<!-- and here comes the image -->
<img src="http://i.imgur.com/cVJrCHU.jpg" alt="popup">
<!-- Now this is the button which closes the popup-->
<button id="close">Close button</button>
<!-- and finally we close the POPUP FRAME-->
<!-- everything on it will show up within the popup so you can add more things not just an image -->
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
//your jquery script here
</script>
</body>
</html>
This will show up a piece of code, if you want to simply show an image, put the id="popup" directly on your <img> tag.
Now, let's move to the example... the code is pretty easy to understand:
//with this first line we're saying: "when the page loads (document is ready) run the following script"
$(document).ready(function () {
//select the POPUP FRAME and show it
$("#popup").hide().fadeIn(1000);
//close the POPUP if the button with id="close" is clicked
$("#close").on("click", function (e) {
e.preventDefault();
$("#popup").fadeOut(1000);
});
});
The script behaves like this: When the page is loaded, the content inside <div id="popup"> show up, and if the button with id="close" is clicked, then the pop up is hidden. Add whatever you want inside this <div id="popup"> and it will show inside the popup.
The CSS: SUPER IMPORTANT!
/*we need to style the popup with CSS so it is placed as a common popup does*/
#popup {
display:none;
position:absolute;
margin:0 auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
You can see it working along with the HTML on this live example:
http://jsfiddle.net/Lp9edyg5/1/
I have two different div's I want to make one of them invisible and after clicking the link or button I want it to be visible and the other invisible. I don't know javascript so I know only HTML and CSS. Can I do that with only using HTML&CSS and How can I do that? Thanks.
You need to use jQuery for this.
Just add this line to your head tag:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
If your HTML is like this:
<div id="div1">This is div1</div>
<div id="div2">This is div2</div>
<button id="button1">Toggle divs</button>
CSS:
#div2 {
display:none;
}
At the bottom of your page, just before the closing tag </body> add the following JavaScript:
<script>
$("#button1").on("click", function () {
$("#div1, #div2").toggle();
}
</script>
Here's a link for a similar example:
http://api.jquery.com/toggle/#entry-examples
How can I create a simple HTML/CSS social sharing menu similar to the one found at the bottom of each post on http://bitquill.com/ — (I know it's my site, but I didn't code the sharing menu. I'm using a Squarespace template and love their sharing menu and want to re-create it elsewhere.)
You have to use an API from each site to get the buttons/badges. For example, you have to review the docs for the Facebook like button: https://developers.facebook.com/docs/reference/plugins/like/ and get the code that way.
To create the menu:
Make a share button using a div, then put another div after it, which is the menu. Style to your liking. Then, make the menu display: none - this will hide it. Use JS to bind the button's click event to a function that shows the menu:
HTML
<div class="share">Share</div>
<div class="menu">
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Stack</li>
</ul>
</div>
CSS
.menu {
display: none;
}
JS
$('body').on('click', function (e) {
if (e.target.className !== 'share')
$('.menu').css('display', 'none');
else
$('.menu').css('display', 'block');
});
So your entire HTML file should look like:
<html>
<head>
<style>
.menu {
display: none;
}
</style>
</head>
<body>
<div class="share">Share</div>
<div class="menu">
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Stack</li>
</ul>
</div>
<!-- This is the jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$('body').on('click', function (e) {
if (e.target.className !== 'share')
$('.menu').css('display', 'none');
else
$('.menu').css('display', 'block');
});
</script>
</body>
</html>
Here is a quick example. You set up a container div (which must have position:relative), and menu div (which has positioned:absolute). Use jQuery to hide the menu div when the page loads. When a user clicks on Share, the div will be displayed.
The API code that you get from Facebook will be placed in the div that has the Facebook placeholder text.
To see more about how the menu in your example was implemented, open the page using Chrome. Right click on "Share" and go to "Inspect Element."
<script type="text/javascript">
$(document).ready(function () {
//Initally hide social-menu div
$("#social-menu").hide();
//When social-button is pressed, show social-menu
$("#social-button").click(function () {
$("#social-menu").show();
});
});
<div id="social-button" >Share</div>
<div id="social-container" style="position:relative;">
<div id="social-menu" style="position:absolute;top:0px;bottom:0px;z-index:10" >
<div>Facbook</div>
<div>Google +</div>
</div>
</div>