I have recently started learning DOM and I have seen some examples of it, however, I'm trying to make a function (getting id) which would trigger after being double clicked.
This is the CSS, HTML and JavaScript codes I'm using.
function getID() {
var x = document.getElementsByClassName("blueblock")[0].id;
document.getElementById("xx").innerHTML = x;
.blueblock {
width: 30%;
height: 50vh;
float: left;
background-color: lightblue;
text-align: justify;
overflow: auto;
}
<p id="xx" ondblclick="getID()">
<div class="blueblock" id="bluebl">
<p>Just some text inside of the block.</p>
</div>
How should I change my code so that clicking on any part of the blueblock would trigger the function and output the id value?
This happens because the <p> tag you have does not have a content. If you would add text to the <p> and double click the text it will work.
The solution for this is to use div instead of p:
function getID() {
var x = document.getElementsByClassName("blueblock")[0].id;
document.getElementById("xx").innerText = x;
}
.blueblock {
width: 30%;
height: 50vh;
float: left;
background-color: lightblue;
text-align: justify;
overflow: auto;
}
<div id="xx" ondblclick="getID()">
<div class="blueblock" id="bluebl">
<p>Just some text inside of the block.</p>
</div>
</div>
You need to have valid html element nesting, and you should probably accomodate for more than one of these sections. Here is an example.
function getID(el) {
var x = el.getElementsByClassName("blueblock")[0].id;
document.getElementById(el.id).innerHTML = x;
}
.blueblock {
width:30%;
height:50vh;
float:left;
background-color:lightblue;
text-align:justify;
overflow:auto;
}
<div id="xx" ondblclick="getID(this)">
<div class="blueblock" id="bluebl">
<p>Just some text inside of the block.</p>
</div>
</div>
<div id="xx2" ondblclick="getID(this)">
<div class="blueblock" id="bluebl2">
<p>Just some more text inside of the block.</p>
</div>
</div>
The first p element is basically terminated by the next div element because a p (paragraph equivalent) cannot contain divs. Hence the double click code is not seen because effectively the first p element has no content.
Replacing that p element by a div, and terminating correctly, means that anything within the div will lead to the double click being seen.
However, note that ondblclick is not supported by all browsers (see https://caniuse.com/?search=ondblclick) so we replace that by adding an event listener to the element using Javascript.
Here is the complete snippet. Note that when you have double clicked the innerHTML gets replaced and therefore if you doubleclick again you will see an error in your browser's console as the element cannot be found - it is no longer there.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script>
function getID() {
var x = document.getElementsByClassName("blueblock")[0].id;
document.getElementById("xx").innerHTML = x;
}
</script>
<style>
.blueblock {
width: 30%;
height: 50vh;
float: left;
background-color: lightblue;
text-align: justify;
overflow: auto;
}
</style>
</head>
<body>
<div id="xx">
<div class="blueblock" id="bluebl">
<p>Just some text inside of the block.</p>
</div>
</div>
<script>
document.getElementById('xx').addEventListener('dblclick',getID);
</script>
</body>
</html>
Related
I'm trying to get a gallery set up that, upon clicking a smaller image, it will show a hidden div with a larger size with that specific image that was clicked.
I'm wondering how you set up a Jquery where, upon clicking a div, it feeds the img src into another img tag (with a variable or otherwise).
I was playing around with something like
function getImageSrc(x) {
var x= document.getElementsByClassName("image").src,
return x;
Which I would then feed into another function, where x would be the img src from the getImageSrc function, but I just can't quite wrap my head around it. I can't seem to think of how to fire an onClick event inside the first function without throwing in an additional function inside the first one.
Any help would be great. I'll even take a whole new direction with this if this method won't work (besides plugins).
Here is the code snippet now that I have time to get to it. I'm basically trying to pass the image src into the .clicked when the image is clicked, upon which the .clicked will go from visibility: hidden to visibility: visible.
The next script that needs to run is when the .clicked div is visible and clicked, it goes back to hidden.
I'm mostly having trouble figuring out the first script.
.clicked {
visibility: hidden;
height: 100%;
width: 100%;
background: rgba(35,35,41,.9);
z-index: 100;
top:0;
}
.imgcontainer {
height: 200px;
width: 200px;
overflow: hidden;
}
<div class="clicked">
<img class="clickedimg" src="">
</div>
<div class="imgcontainer">
<img class="image" src="https://processing.org/tutorials/pixels/imgs/tint1.jpg">
</div>
Its pretty simple, Code explains itself
$(document).ready(function() {
$('.small > img').click(function() {
$('.big > img').prop('src', $(this).prop('src'));
$('.big').show();
})
});
.small {
height: 100px;
width: 100px;
}
.small >img,
.big > img {
height: 100%;
width: 100%;
}
.big {
height: 300px;
width: 300px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="small">
<img src="https://processing.org/tutorials/pixels/imgs/tint1.jpg" />
</div>
<div class="big">
<img />
</div>
You could do something like this,
function getImageSrc(x){
var x= document.getElementsByClassName("image").src;
//Call the function to append the img src to the new element
appendImageSrc(x);
}
function appendImageSrc(imageSrc){
//append the src to the new Element
document.getElementsByClassName("imageLarger").src = imageSrc;
}
Please try this code. I think this will help you.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
document.getElementById("SmallerImageURL").src = "https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_(JPEG-HDR).jpg";
});
function EnlargeImage() {
var SmallImg = getImageSrc("SmallerImageURL");
document.getElementById("EnlargedImageURL").src = SmallImg;
}
function getImageSrc(ImageClass) {
var x = $("."+ImageClass).attr("src");
return x;
}
</script>
<style>
.SmallContainer {
width: 250px;
float: left;
}
.LargeContainer {
width: 500px;
float: left;
}
.LargeContainer img,
.SmallContainer img {
float: left;
width: 100%;
}
.row {
width: 100%;
float: left;
}
</style>
</head>
<body>
<div class="SmallContainer">
<img id="SmallerImageURL" class="SmallerImageURL"/>
</div>
<div class="LargeContainer">
<img id="EnlargedImageURL" />
</div>
<div class="row">
<button onclick="EnlargeImage()">Enlarge Me</button>
</div>
</body>
</html>
I have made a small modification to your getImageSrc method. I think implementing the same in jQuery is much better.
$(document).ready(function() {
$("#open_page").click(function(){
var go_to_url = $("#redirect").find(":selected").val();
document.location.href = go_to_url;
});
});
You could do something like this
I've been sitting with this problem for like 2 hours. What I'm trying to make is a website where you push a button and it changes color. I know this can be done with CSS, but I'm not interested in that.
The main problem is that when I push the button, nothing happens.. However, if I remove the ' #sug from the css' everything works perfectly... So what I want to do, is to make the layout very basic at the beginning, so there's nothing to it, except like the black background, and when I push the buttons it should switch..
Also, I know you can implement onclick in the button tag, but that's not what I'm going for either. I want to know WHY this happens and how I can resolve this problem.
Here's my javascript, CSS and HTML code:
window.onload = setUp;
function setUp() {
document.getElementById("normal").onclick = setNormalStyle;
document.getElementById("crazy").onclick = setCoolStyle;
document.getElementById("insane").onclick = setInsaneStyle;
}
function setNormalStyle() {
var messageBox = document.getElementById("sug");
messageBox.className = "normal";
}
function setCoolStyle() {
var savingTheSecondVar = document.getElementById("sug");
savingTheSecondVar.className = "cool";
}
function setInsaneStyle() {
var savingTheThirdVar = document.getElementById("sug");
savingTheThirdVar.className = "insane";
}
#sug {
background-color: black;
}
.normal {
height: 500px;
background-color: blue;
color: white;
padding: 30px;
margin: auto;
width: 500px;
}
.insane {
height: 500px;
background-color: green;
padding: 30px;
margin: auto;
width: 500px;
color: white;
}
.cool {
height: 500px;
background-color: red;
padding: 30px;
margin: auto;
width: 500px;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="Struktur.css" />
<script type="text/javascript" src="struktur.js"></script>
<title>My first Javascript project</title>
</head>
<body>
<div id="sug" class="cool insane normal">
<header>
<h1> Welcome to this Javascript site! </h1>
</header>
<section>
<p>
text
</p>
</section>
<button type="button" id="normal">First style</button>
<button type="button" id="crazy">Second style</button>
<button type="button" id="insane">Third style</button>
</div>
</body>
</html>
The problem is your CSS.
#sug{
background-color: black;
}
Overrides the background-color of your classes because it is a more specific selector (i.e. an id selector).
change the rest of your classes in the css to include the id like
#sug.normal, #sug.insane, #sug.cool etc.
Here is a nice article on CSS specificity to help you understand more: https://css-tricks.com/specifics-on-css-specificity/
That's because an id has preference over a class. You will need to specify it like this:
#sug.cool { background: red; }
etc.
You are not removing the background-color provided by the #sug id in CSS onClick() events of the buttons.
Id has more preference over classes
It is a good habit to use below code as classes has spaces between them and it can be used if you want to add more than one class.
messageBox.className += " " + "normal";
I am unable to set caret into the first <p> in the contentEditable <div>.
I have seen this solution but its for before or after the element. How do I get it into an element?
Here is what I have so far:
$('#content').on('click', function(){
if($('#placeholder').length > 0)
$('#placeholder').removeAttr('id').text('').focus();
});
#content{
border: 1px solid black;
min-height: 100px;
padding: 20px;
}
#placeholder{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='content' contentEditable=true>
<p id='placeholder'>placeholder</p>
</div>
It clears the placeholder and doesnt set the caret at all.
How do I fix this?
The problem you have is that you p element has no content and so has 0px height. Watching the console you can see that contenteditable often add a <br> when clicking on it, you can do the same here and you'll have your caret.
$('#content').on('click', function(){
if($('#placeholder').length > 0)
$('#placeholder').removeAttr('id').html('<br>').focus();
});
#content{
border: 1px solid black;
min-height: 100px;
padding: 20px;
}
#placeholder{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='content' contentEditable=true>
<p id='placeholder'>placeholder</p>
</div>
Before you read any further please address to Range (MDN) and getSelection (MDN).
This is a working fiddle.
Code inside the fiddle is very self-explainatory, but what I found interesting was: let's say we have
<p id='paragraph'>I want to focus on this text</p>
then we do (as expected):
var p = $('#paragraph');
range.selectNode(p[0]);
This is actually going to put caret (roughly speaking) before <p>, but we need to get inside <p>.
Surprisingly...
var p = $('#paragraph');
var textInsideP = p.childNodes[0]; // the text inside p counts as a ChildNode
range.selectNode(textInsideP);
Boom.
What I have:
8 numbered boxes in a row.
I'm not allowed to use jQuery.
What I want to do:
When the user hovers a numbered box, text changes dynamically inside a div element depending on which box is being hovered on.
Example:
If user hovers over Box 1, the text inside the div element says "Hello"
If user hovers over Box 2, the text inside the div element (same as before) says "World"
Edit: the closest I have is text changing if the user clicks on a button: http://jsfiddle.net/pVN2a/
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>BluePad</title>
<style type="text/css">
#button1 {
background-color:red;
display:inline-block;
}
#button2 {
background-color:green;
display:inline-block;
}
</style>
</head>
<body>
<div id="button1">
Click 1
</div>
<div id="button2">
Click 2
</div>
<div id="textResults">
Click on a button to change text
</div>
<script>
// when #button1 is clicked...
document.getElementById("button1").addEventListener("click", function(e) {
// change text of #textResults
document.getElementById("textResults").innerHTML ="Hello World";
});
// when #button2 is clicked...
document.getElementById("button2").addEventListener("click", function(e) {
// change text of #textResults
document.getElementById("textResults").innerHTML ="Just Clicked #button2";
});
</script>
</body>
</html>
Am I supposed to use .onMouseEvent in conjunction with some sort of event listener? Sorry, I'm totally new to this. :(
Edited to fit OP's request to change content of a singular box based on hover of other boxes. Using the general sibling combinator, we can select a div with the class results when a box is hovered.
JSFiddle Demo
HTML
<div class="container">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="results"></div>
</div>
CSS
.box1, .box2 { display: inline-block; width: 100px; height: 100px; background: #ccc; }
.results {
width: 250px;
height: 100px;
background: #ccc;
margin-top: 4px;
}
.box1:hover ~ div.results:before {
cursor: pointer;
content: "Hello";
}
.box2:hover ~ div.results:before {
cursor: pointer;
content: "World";
}
Using the General Sibling Combinator.
How about using onmouseover, that's not jQuery.
I'm trying to create some draggable boxes in javascript. I decided to make an empty class "draggable" in CSS and a "box" class. The code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
.draggable
{
}
.box
{
position: absolute;
width: 80px; height: 60px;
padding-top: 10px;
text-align: center;
font-size: 40px;
background-color: #222;
color: #CCC;
}
</style>
</head>
<body>
<div class="draggable box">1</div>
<div class="draggable box">2</div>
<div class="draggable box">3</div>
<script>
var draggableStuff = document.querySelectorAll('draggable');
var tabLength = draggableStuff.length;
alert(tabLength);
</script>
</body>
The problem is that tabLength is always zero. I want to get an array filled with all draggable stuff. I'm new to javascript. What have I missed here?
You want to select elements by class, so don't forget about the dot:
var draggableStuff = document.querySelectorAll('.draggable');
Another option is to use document.getElementsByClassName:
var draggableStuff = document.getElementsByClassName('draggable');
I came across this situation. Although it is too old post I would like to help people with my answer:
To select all the elements (no matter what it is, it may be div, span, h1, etc...) with particular attribute
Without value?:
var dragables = document.querySelectorAll('[draggable]');
With value?:
var dragables = document.querySelectorAll('[draggable="true"]');