I have a script which toggles block/none display of a div, onClick. The onClick also toggles an associated "thumbnail" image from active to inactive.
Only in Firefox, the div's stack on top of each other. It seems as if the onClick is not associating the display:none style with the current item.
I made sure that all divs have associated ID's which seems to be the top questions related to getElementById issues in Firefox.
Any thoughts on troubleshooting this would be helpful, thank you!
Here is my javascript:
var curVid = "VideoA";
var curImg = "VideoA_thumbnail";
function changeVideo(id, img)
{
if(document.getElementById(id) != null && curVid != id)
{
document.getElementById(curVid).style.display = "none";
document.getElementById(id).style.display = "block";
document.getElementById(id + "_thumb").src = "..//Thumbnails//" + img + "_selected.jpg";
document.getElementById(id + "_thumb").style.cursor = "default";
document.getElementById(curVid + "_thumb").src = "..//Thumbnails//" + curImg + ".jpg";
document.getElementById(curVid + "_thumb").style.cursor = "pointer";
if(VideoJS.browserSupportsVideo())
{
document.getElementById(curVid + "_video").pause();
document.getElementById(curVid + "_video").currentTime = 0;
VideoJS.setup(id + "_video");
document.getElementById(id + "_video").play();
}
else
{
$f(curVid + "_flash").stop();
$f(id + "_flash").play();
}
curVid = id;
curImg = img;
}
}
and this is the HTML
<div id = "VideoA" style = "display:block;">content here</div>
<div id = "VideoB" style = "display:none;">content here</div>
<div id = "VideoC" style = "display:none;">content here</div>
<div id = "VideoD" style = "display:none;">content here</div>
<div id = "VideoE" style = "display:none;">content here</div>
<div>
<img src = "a.jpg" id = "VideoA_thumb" onclick = "changeVideo('VideoA', 'VideoA_thumb')" />
<img src = "b.jpg" id = "VideoB_thumb" onclick = "changeVideo('VideoB', 'VideoB_thumb')" />
<img src = "c.jpg" id = "VideoC_thumb" onclick = "changeVideo('VideoC', 'VideoC_thumb')" />
<img src = "d.jpg" id = "VideoD_thumb" onclick = "changeVideo('VideoD', 'VideoD_thumb')" />
<img src = "e.jpg" id = "VideoE_thumb" onclick = "changeVideo('VideoE', 'VideoE_thumb')" />
</div>
Related
I want to change the color of my text that I displayed on the html by JS on hover
here is the HTML :
<div class="text_user_info" id="tui" onmouseover="hoverText()" onmouseout="noHoverText()" ></div>
Here is the JS :
var userName = "Hamdy"
var userNamef = userName.bold()
const welcome = "Hello, "
document.getElementById("tui").innerHTML = welcome + userNamef;
just create your functions hoverText and noHoverText and set the style.color as needed
var userName = "Hamdy"
var userNamef = userName.bold()
const welcome = "Hello, "
document.getElementById("tui").innerHTML = welcome + '<span id="s">'+userNamef + '</span>';
function hoverText(){
let div = document.getElementById('s')
div.style.color='blue'
}
function noHoverText(){
let div = document.getElementById('s')
div.style.color='black'
}
<div class="text_user_info" id="tui" onmouseover="hoverText()" onmouseout="noHoverText()" ></div>
I have multiple buttons (with the ids 'a', 'b', ...) and if you click them, they should display their corresponding image ('a.JPG', 'b.JPG', ...) at a fixed point on the website.
The idea is to listen for when a button is clicked and change the code inside the output to include its id.
'use strict';
var bild = '', i, j, k;
function gedrueckt(k) {
bild = '<img src="img/' + k + '.JPG" width="1600" hight="900" alt="Vergroessertes Bild"></img>';
document.querySelector('output').innerHTML = bild;
}
for (i = 1; i < 8; i = i + 1) {
j = String.fromCharCode(97 + i);
document.getElementById(j).addEventListener('click', gedrueckt(j));
}
The problem is that an image already appears before any button is clicked and pressing a different button does not change the displayed image.
This code should change the src on each button click, changing the picture according the the ID of the button:
let img = document.getElementById('img')
const change = id => {
img.src = `${id}.jpeg`
img.alt = `${id}.jpeg`
}
<img id="img" src="">
<br>
<button onclick="change(this.id)" id="a">A</button>
<button onclick="change(this.id)" id="b">B</button>
<button onclick="change(this.id)" id="c">C</button>
If there no src and no alt property provided, the image will not be displayed.
I might've misunderstood you, in that you want the image to change on keyboard button press, which this code should do the trick:
let img = document.getElementById('img')
const change = id => {
img.src = `${id}.jpeg`
img.alt = `${id}.jpeg`
}
const list = ['a','b','c']
document.addEventListener('keydown', e => list.includes(e.key) && change(e.key))
<img id="img" src="">
Get all the buttons and attach an click listener to it. Create img element on button click and append it to the element with id output.
const buttons = document.querySelectorAll('button')
const output = document.querySelector('#output');
buttons.forEach((button) => {
button.addEventListener('click', function() {
const img = document.createElement('img');
img.src = this.id + '.jpg';
output.innerHTML = "";
output.appendChild(img);
});
});
<button id="a">one</button>
<button id="b">two</button>
<button id="c">three</button>
<div id="output"></div>
I am creating event listener below and I have no idea how to set ngFor value to this.pop for parameter.
ngAfterViewInit() {
this.elementRef.nativeElement.querySelector('.spells img')
.addEventListener('mouseover', this.pop.bind(this, event));
}
This is HTML code
<ul class= "list-unstyled row">
<li *ngFor = "let z of data(m[m.length-1]) | slice: 0 : 10; index as j" class = "list-item col-6">
<img class = "champ" src = {{z[0]}}/>
<div class = "spells">
<img src = {{z[1].spellurl}}/>
<img src = {{z[2].spellurl}}/>
<div class = "desc"></div>
</div>
</li>
</ul>
So when I mouse over those images in div.spell, I want to call function, pop
pop(event){
//let ds = document.getElementsByClassName(".spells .desc");
let pos = event.target.getBoundingClientRect();
let newpos = "translate(" + pos.right + "px, " + pos.bottom + "px)";
console.log(newpos);
let selected = this.elementRef.nativeElement.querySelector('.spells .desc');
selected.style.display = "block";
selected.innerHTML = desc;
selected.style.transform = newpos;
}
The function will decide the position of div.desc and its contents. I can use "event" to calculate the position but a problem is selected.innerHTML that "z" in *ngFor = "let z of data(m[m.length-1]) has description which I want to use that as contents of the div but I don't know how to use that value as parameter of the function in addEventListener.
Any suggestion?? thank you
I am doing color palettes and it needs to have a predefined palette and then choose the colors from it the thing is it must be mutable and for this I have come with this solution
<div class='colorScope'>
<div id="colorBackgroundDark<%=project.id%>">
<div id="Dark1<%=project.id%>">
</div>
<div id="Dark2<%=project.id%>">
</div>
</div>
<div id="colorBackgroundLight<%=project.id%>">
<div id="Light1<%=project.id%>">
</div>
<div id="Light2<%=project.id%>">
</div>
</div>
</div>
Project Id is given by rails, when a project with palettes is created (this is the html for the idea)
And here is the Js that should make the mutable palettes and is not working for some reason I am not able to figure out, I really hope you guys can please help me, please take in account again I am a rookie and be kind with me :x
function colorPalettes(id){
var myElement = document.getElementById('colorBackgroundDark'+id);
myElement.style.backgroundColor = "#D93600";
myElement.style.width = "50%";
myElement.style.height = "256px";
var myElement3 = document.getElementById('Dark1'+id);
myElement3.style.backgroundColor = "#D93600";
myElement3.style.width = "50%";
myElement3.style.height = "256px";
var myElement4 = document.getElementById('Dark2'+id);
myElement4.style.backgroundColor = "#D93600";
myElement4.style.width = "50%";
myElement4.style.height = "256px";
var myElement2 = document.getElementById('colorBackgroundLight'+id);
myElement2.style.backgroundColor = "#ffffff";
myElement2.style.width = "50%";
myElement2.style.height = "256px";
var myElement5 = document.getElementById('Light1'+id);
myElement5.style.backgroundColor = "#00474E";
myElement5.style.width = "50%";
myElement5.style.height = "256px";
var myElement6 = document.getElementById('Light2'+id);
myElement6.style.backgroundColor = "#6CEEFC";
myElement5.style.width = "50%";
myElement5.style.height = "256px";
}
$( document ).ready(function() {
var id = $('[type="range"]').attr('id')
colorPalettes(id);
});
I would agree with j-dexx's css comment but if you are going to go with your javascript, assuming the element has the correct id, I would change your document ready to:
$('[type="range"]').each(function() {
colorPalettes(this.id);
});
Also check if this $('[type="range"]') returns anything as your html in your question doesn't include any inputs
But as I say - your requirements are it needs to have a predefined palette - this is perfect for using a class to apply that predefined pallete
Below is your code working - I have change some heights and colours so you don't get overlapping divs or divs of the same colour hiding each other
function colorPalettes(id) {
var myElement = document.getElementById('colorBackgroundDark' + id);
myElement.style.backgroundColor = "#D93600";
myElement.style.width = "100%";
myElement.style.height = "532px";
var myElement3 = document.getElementById('Dark1' + id);
myElement3.style.backgroundColor = "#ff0000";
myElement3.style.width = "50%";
myElement3.style.height = "256px";
var myElement4 = document.getElementById('Dark2' + id);
myElement4.style.backgroundColor = "#ee3333";
myElement4.style.width = "50%";
myElement4.style.height = "256px";
var myElement2 = document.getElementById('colorBackgroundLight' + id);
myElement2.style.backgroundColor = "#ffffff";
myElement2.style.width = "100%";
myElement2.style.height = "532px";
var myElement5 = document.getElementById('Light1' + id);
myElement5.style.backgroundColor = "#00474E";
myElement5.style.width = "50%";
myElement5.style.height = "256px";
var myElement6 = document.getElementById('Light2' + id);
myElement6.style.backgroundColor = "#6CEEFC";
myElement6.style.width = "50%";
myElement6.style.height = "256px";
}
$(document).ready(function() {
$('[type="range"]').each(function() {
colorPalettes(this.id);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="colorScope">
<div id="colorBackgroundDarktest1">
<div id="Dark1test1"></div>
<div id="Dark2test1"></div>
</div>
<div id="colorBackgroundLighttest1">
<div id="Light1test1"></div>
<div id="Light2test1"></div>
</div>
</div>
<input id="test1" type="range" min="0" max="20" step="5">
guys this fixed my problem, thank you ver much for your help if anyone has a similar problem, you may use this.
$( document ).ready(function() {
$('[type="range"]').each(function(){
colorPalettes(this.id);
})
I already have a function that adds content to a div once an image is clicked; however, I want the content to be removed once the same image is clicked a second time. Is there a simple way to do this?
Is there also a way for the function that adds content to also appear with a number field next to it?
Here is the function that I used to add content.
function frenchBread(){
var div = document.getElementById("orderBox");
div.innerHTML = div.innerHTML + "French Bread" + "<br>";
}
Assign a variable to determine if the image was clicked or not.
Edit
Forgot to assign is_clicked :)
Edit Again
Added the input field next to the "Frech Bread" text.
var is_clicked = false;
function frenchBread(){
var div = document.getElementById("orderBox");
var curr = div.innerHTML, frenchy = 'French Bread <input type="number" name="amount"><br>';
if ( is_clicked ) {
var tmp = div.innerHTML;
curr = tmp.replace(frenchy, "");
div.innerHTML = curr;
is_clicked = false;
} else {
div.innerHTML = curr + frenchy
is_clicked = true;
}
}
<img src="" style="width: 30px; height: 30px; background: black;" onclick="frenchBread()" />
<div id="orderBox">
An item here <br />
</div>
You could just check for the content in innerHTML:
function frenchBread() {
var div = document.getElementById("orderBox");
if(var.innerHTML == "") {
div.innerHTML += "French Bread" + "<input type='number' /><br />";
} else {
div.innerHTML = "";
}
}
Edit: even shorter with the ternary operator, although less readable:
function frenchBread() {
var div = document.getElementById("orderBox");
div.innerHTML = if(var.innerHTML == "") ? "French Bread" + "<input type='number' /><br />" : "";
}
Edit: added the number field in both versions.