About DIVs (Hiding and Showing not Java) - html

<div id="abc" style="display: none;"><h1>abc</h1></div>
Hello! I hide the div but I want to see when I type it #abc I can't see this text.

In case people want to do it without having to resort to JavaScript, the CSS solution is to use the :target pseudo class, as mentioned in the comments.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style>
#abc {display:none}
#abc:target {display:block}
</style>
</head>
<body>
<div id="abc"><h1>abc</h1></div>
</body>
</html>

Please find below sample as per your requirement.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
if(window.location.href.indexOf("#abc")!=-1)
{
//alert("Page is loaded");
document.getElementById("abc").style.display="block";
}
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
<div id="abc" style="display: none;"><h1>abc</h1></div>
</body>
</html>

This is how you can do it using jquery:
var url = "https://abcdefgh.carrd.co/#abc";
var hash = url.substring(url.indexOf("#"));
// You can use
// var hash = window.location.hash;
// but i need to write the url to show you that is working.
if ($( hash ).length) { //check if div exists
$( hash ).show();
}
#abc, #cde
{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="abc">ABC</div>
<div id="cde">CDE</div>

That should do it:
if(window.location.href.indexOf("#abc")!=-1) {
document.getElementById("abc").style.display="block";
}}

Related

How to get the Vue's element's child DOM?

How to get the Vue's element's child DOM?
I have bellow code, I want to get the <div>'s <input> element.
var vm = new Vue({
el: '#box',
data: {
pick: true,
a: 'a'
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box">
<input type="radio" v-model="pick" :value="a">
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
How can I get that in Vue.js? Or in the Console?
I think you should tell us what functionality do you want to realize.
For your question:in vue.js there is ref binding to get the reference of DOM elements.
//html
<div id="box">
<input ref="domOfInput" type="radio" v-model="pick" :value="a">
</div>
//js code
vm.$refs.domOfInput will be the DOM node

HTML To Fit an image only in specific resolution

I want to display an image (It can be of any size) only in a table of 1280 x 800 Resolution it will not display on other screens.
Now I'm using an <img> element inside the body, and if the image is small, it doesn't fill the screen and if the image is big, it display it out off the screen.
So the html is this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mapa</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script src="/libs/qimessaging/1.0/qimessaging.js"></script>
<script type="text/javascript" src="js/senaletica.js"></script>
</head>
<body>
<img id="mapa" alt="mapa" src="">
</body>
</html>
And the javascript:
$('document').ready(function(){
var session = new QiSession();
session.service("ALMemory").done(function (ALMemory) {
ALMemory.subscriber("PepperQiMessaging/totablet").done(function(subscriber) {
subscriber.signal.connect(toTabletHandler);
});
});
function toTabletHandler(value) {
var imgMap = $('#mapa');
imgMap.attr('src', 'data:image/png;base64,' + value);
imgMap.width($('window').width());
imgMap.height($('window').height());
}
});
I don't use any CSS at the moment.
window is an actual javascript entity and should not be quoted, which then makes it a string. Removing the quotes from 'window' will solve your problem.
See Below Snippet :
$(document).ready(function(){
function toTabletHandler(value) {
var imgMap = $('#mapa');
imgMap.attr('src', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSd8cAJmOsrWimMAMpTAFOPURbw4q7uDKKxau1nimZ4V-usMb0w');
imgMap.width($(window).width());
imgMap.height($(window).height());
}
toTabletHandler(5);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<img id="mapa" alt="mapa" src="">
</body>

Why the class.click method doesn't work?

I am beginner at web programming. I am trying to assign click method to a className. But it doesn't work and no solution on the internet worked for me. How can I fix this problem?
My simple code:
<html>
<head>
<title>ada</title>
<style>
.menu{background-color:green;}
</style>
<script>
$(document).on("click",".menu",function()
{
alert("Hello World");
});
</script>
</head>
<body>
<input type="button" class="menu" value="click!" />
</body>
</html>
Add jquery library file
http://code.jquery.com/jquery-1.8.3.min.js
$(document).on("click",".menu",function()
{
alert("Hello World");
});
https://jsfiddle.net/uq8zf0m4/
<html>
<head>
<title>ada</title>
**<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>**
<style>
.menu{background-color:green;}
</style>
<script>
$(document).on("click",".menu",function()
{
alert("Hello World");
});
</script>
</head>
<body>
<input type="button" class="menu" value="click!" />
</body>
</html>
1st. Make sure you're referencing the Jquery api in your scripts tag in the head elements.
2nd. A good tutorial and easy to read reference for beginners
http://www.w3schools.com/jquery/event_click.asp

How can I choose who of the tabindex="0" start when the page load

Important note: all the indexes must be 0 (tabindex="0"), I can not use another numbers (like: tabindex="1",tabindex="2"...tabindex="n").
for example: my html code is:
<div tabindex="0">first</div>
<div tabindex="0">second</div>
<div tabindex="0">third</div>
<div tabindex="0">Etc...</div>
Now - I want to focus on the second div by default, so when I click on Tab - the focus will be on third div, and so on
<!DOCTYPE html>
<head>
<meta charset="utf-8"></meta>
<script src="https://code.jquery.com/jquery-git1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div[tabindex='0']").eq(1).focus();
});
</script>
</head>
<body>
<div tabindex="0">first</div>
<div tabindex="0">Second</div>
<div tabindex="0">third</div>
<div tabindex="0">Etc...</div>
</body>
</html>
You can use jquery next function to get next sibling.
Here you have working example: https://jsfiddle.net/2muaxbbf/

use of head tag in between div tag

this is sample code i tried n its working
<html>
<head>
<style>
<!--
.execute { background-color: red; height: 25px; }
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js">
</script>
<!-- Let's register a onClick handle for any .execute div. -->
</head>
<body>
<div class="execute">
<head>
<script>
dojo.ready(function() // Dojo will run this after being initialized
{
// Get A list of all tags with id execute and add a event onClick
dojo.query(".execute").connect("onclick", function(evt)
{
alert("Event triggered!");
// ...
});
});
</script>
</head>
<body>
Click me 1
</body>
</div>
<br /><br />
<div class="execute">Click me 2</div>
</body>
</html>
but if i merge it in another code it highlights and as invalid code. what does it means?
Ther are several code issues. double <head> tags, HTML elements after the <body> tag.
cleaned up code:
<html>
<head>
<style>
.execute { background-color: red; height: 25px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"></script>
<script>
dojo.ready(function() { // Dojo will run this after being initialized
// Get A list of all tags with id execute and add a event onClick
dojo.query(".execute").connect("onclick", function(evt) {
alert("Event triggered!");
// ...
});
});
</script>
</head>
<body>
<div class="execute">Click me 1</div>
<br><br>
<div class="execute">Click me 2</div>
</body>
</html>
<head> should only appear once, directly under the <html>, and not within <body>.
Exceptions to this are iframes embedded within existing pages, which have their own document structure.
Just remove the second <head>.
Why do you have two heads? <script>s don't have to be in <head>s.
You should only have a single <head> in your document.
The structure of an HTML page should be as follow:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Although they do not have to be, most people put script tags within the opening and closing header tags. For example:
<html>
<head>
<title></title>
<script>
<!--This is where all your functions should be.-->
</script>
</head>
<body>
</body>
</html>