to put it simply, I am trying to add a hover effect onto my cv.
I want when someone hovers over my linkedin icon, for it to display a text underneath saying "LinkedIn"
However I need this to be in Javascript.
html part <i class="icon-linkedin"></i>
<div id="popup">LinkedIn</div>
js part
var e = document.getElementById('liIcon');
e.onmouseover = function() {
document.getElementById('popup').style.display = 'block';
}
e.onmouseout = function() {
document.getElementById('popup').style.display = 'none';
}
and css part
#popup {
display:none;
}
Any idea why it isn't working?
Thanks.
I noticed a few semicolons missing after the onmouseovers. I'm not an expert on JS, but an unterminated statement looks weird.
Also, I added a LinkedIn text to the button, cause there's no image link visible in the following code. This is how your code should be structured for your code to work (assuming your browser doesn't have JavaScript disabled):
<!DOCTYPE html>
<html>
<head>
<style>
#popup {
display: none;
}
</style>
</head>
<body>
<i class="icon-linkedin">LinkedIn</i>
<div id="popup">LinkedIn</div>
<script>
var e = document.getElementById('liIcon');
e.onmouseover = function () {
document.getElementById('popup').style.display = 'block';
};
e.onmouseout = function () {
document.getElementById('popup').style.display = 'none';
};
</script>
</body>
</html>
No hover:
Hover:
Sometimes selectors can get fussy, I've run into issues with tags nested in other elements similar to what you have here.
Have you tried adding an event listener to the icon tag as well?
var icon = document.getElementById('liIcon').getElementsByClassName('icon-linkedin');
// assuming there is only one element of class: icon-linkedin, access element by index 0
icon[0].onmouseover = function () {
document.getElementById('popup').style.display = 'block';
};
icon[0].onmouseout = function () {
document.getElementById('popup').style.display = 'none';
};
Related
I am creating some sort of filter in a webpage section.
when I click on a button, only the relatives divs should be shown.
The first script i made to make this work, was with one function for each button,
but since I'll have to add a lot more of buttons, I'd like to have only one function, and update it once added a new button.
here's a code similar to that part of the webpage.`
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function filter1(){
var x = document.getElementsByClassName("fruit");
document.getElementById("all").onclick = function(){
x.style.display = "block"
};
document.getElementById("apples").onclick = function(){
x.style.display = "none"; document.getElementsByClassName(".apples").style.display = "block"
};
document.getElementById("lemons").onclick = function(){
x.style.display = "none"; document.getElementsByClassName(".lemons").style.display = "block"
};
}
function filter2(){
var x = document.getElementsByClassName("btn").onclick.textContent;
var y = document.getElementsByClassName("fruit");
if (x.toLowerCase().includes("all")) {
y.style.display = "block";
} else {
y.style.display = "none";
}
if (x.toLowerCase().includes("apples")) {
document.getElementsByClassName("apples").style.display = "block";
}
if (x.toLowerCase().includes("lemons")) {
document.getElementsByClassName("lemons").style.display = "block";
}
}
</script>
</head>
<body onload="filter1()">
<button id="all" class="btn">All</button>
<button id="apples"class="btn">Apples</button>
<button id="lemons"class="btn">Lemons</button>
<section>
<div class="apples fruit">Green Apple</div>
<div class="apples fruit">Red Apple</div>
<div class="lemons fruit">Yellow Lemon</div>
</section>
</body>
</html>
<style type="text/css">
.btn {
display: block
}
.fruit {
display: block
}
</style>
`As you can see I thought of two different methods for this.
the first one "filter1()" by adding an id for each button;
the second one "filter2()" by cheching the .textContent propriety of the buttons.
None of these functions work,
Can someone please tell me what's the right way to do this using Javascript,
or what's wrong with this code?
I'd like to use the "filter2()" function, but if you can fix both of them, it would be great.
I'm a complete beginner to coding.
Thank you so much.
I'm learning javascript, and this simple piece of code just won't work the way I need it to.
All I need is to display the main tag at the click of a button. HOWEVER, it doesn't want to display until the SECOND click.
So the first click doesn't display the main. The second click does.
I've tried moving my coding around the html document (before/after body closing tag, etc).
I've looked through stack overflow, and similar questions don't really help my case. Or at least I don't understand how they can help me as a beginner.
var aboutShow = document.getElementById("aboutLink");
aboutShow.addEventListener("click", displayMain);
function displayMain(){
var mainSection = document.getElementsByTagName("main")[0];
if (mainSection.style.display === "none"){
mainSection.style.display = "grid";
}
else{
mainSection.style.display = "none";
}
}
main{display:none;}
<main> ... </main>
<button type="button" id="aboutLink">About</button>
There has to be something I'm missing that prevents that 1st click from firing the code. I mean, it seems simple enough???
if (mainSection.style.display === "none") is looking for an inline style tag, so instead of setting display:none; in your CSS, just set it inline on the element:
var aboutShow = document.getElementById("aboutLink");
aboutShow.addEventListener("click", displayMain);
function displayMain(){
var mainSection = document.getElementsByTagName("main")[0];
if (mainSection.style.display === "none"){
mainSection.style.display = "grid";
}
else{
mainSection.style.display = "none";
}
}
<main style="display:none;"> ... </main>
<button type="button" id="aboutLink">About</button>
As has been answered, mainSection.style.display is empty. Another option is to get the computed style of the element:
var aboutShow = document.getElementById("aboutLink");
aboutShow.addEventListener("click", displayMain);
function displayMain() {
var mainSection = document.getElementsByTagName("main")[0];
if (window.getComputedStyle(mainSection).getPropertyValue('display') === "none") {
mainSection.style.display = "grid";
} else {
mainSection.style.display = "none";
}
}
main {
display: none;
}
<main> ... </main>
<button type="button" id="aboutLink">About</button>
var aboutShow = document.getElementById("aboutLink");
aboutShow.addEventListener("click", displayMain);
function displayMain(){
var mainSection = document.getElementsByTagName("main")[0];
if (mainSection.style.display || "none" === "none"){
mainSection.style.display = "grid";
}
else{
mainSection.style.display = "none";
}
}
main{display:none;}
<main>text</main>
<button type="button" id="aboutLink">About</button>
Initially mainSection.style.display is empty, so it falls on the else part of the if statement and changes the property to none.
On the second click, the property now has the value of none, that's why it works on the second click.
The HTMLElement.style property is used to get as well as set the inline style of an element.
I am using a script which someone assisted me with on stackoverflow. It works perfectly, however it does not work with my amchart in IE8-10 (I have logged this issue with amcharts too because the issue appears to be with the chart).
I would like to troubleshoot further myself in the meantime with jQuery script. I am still learning jQuery and need some guidance in converting the following javascript code to a jQuery show() hide() script.
I have tried it in it basic form:
$(window).load(function() {
$("div").hide();
};
It works in all other browser except IE 8-10 when you toggle the form the chart does not appear. Below please see exerpts of two scripts that work but in IE 8-10.
<script type="text/javascript">
function chart1() {
var show = ['chartdiv1', 'unit-price'];
for ( var i = 0; i < show.length; ++i )
document.getElementById(show[i]).style.display = "block";
var hide = ['chartdiv2', 'unit-price-value','chartdiv3', 'unit-price-rand'];
for ( var i = 0; i < hide.length; ++i )
document.getElementById(hide[i]).style.display = "none";
};
</script>
<script>
function chart1() {
document.getElementById("chartdiv1").style.display = "block";
document.getElementById("unit-price").style.display = "block";
};
function chart2() {
document.getElementById("chartdiv2").style.display = "none";
document.getElementById("unit-price-value").style.display = "none";
};
function chart3() {
document.getElementById("chartdiv3").style.display = "none";
document.getElementById("unit-price-rand").style.display = "none";
};
</script>
</head>
<body style="background-color:#FFFFFF; margin: 10px;" onLoad="chart1()"> or onload"chart1(), chart2(),.............
There seems to be a syntax error in your code.
Shouldn't the function be like this? :
$(window).load(function() {
$("div").hide(); //and not $("div">.hide();
}); // added the closing bracket of load function
Try this:
$(window).load(function() {
$("div").hide();
$("#chartdiv1, #unit-price").show();
});
On window load you just hide all the divs but it is still better to hide it with css. then just show the div with specific ids you want to show.
I'm currently making an iphone webapp and have almost finished it, I just need to fix this one little issue im having
Ive managed to hide one div layer and show another, but what I would like is for the same button to then show the layer I have hid and hide the one that I have shown when clicked again. So basically clicking the button would take it back to the original state
the code I am currently using is
<script type="text/javascript">
function toggle_layout(d)
{
var onediv = document.getElementById(d);
var divs=['Posts','Posts2'];
for (var i=0;i<divs.length;i++)
{
if (onediv != document.getElementById(divs[i]))
{
document.getElementById(divs[i]).style.display='none';
}
}
onediv.style.display = 'block';
}
</script>
It hides a div I have named "Posts" and shows a div I have named "Posts2", but clicking it again does not reverse the effect.
If you wanna take a look at my site its http://a-m-creativecapture.tumblr.com/
Will have to view it on a mobile to see what I am talking about.
Have you tried style.visibility (visible|hidden) instead of style.display?
Assuming that your divs are something like this:
<div id="posts"></div>
<div id="posts2"></div>
You can use the following code:
var posts = document.getElementById('posts'),
posts2 = document.getElementById('posts2');
function toggle() {
if (this == posts) {
posts.style.display = 'none';
posts2.style.display = 'block';
} else {
posts.style.display = 'block';
posts2.style.display = 'none';
}
}
div1.onclick = toggle;
div2.onclick = toggle;
I was able to make the text loop infinitely and the body color change once:
<?php?>
<style type="text/css">
<!--
header{background-color:orange;}
#color1{background-color:red;}
#color2{background-color:green;}
#color3{background-color:blue;}
-->
</style>
<script type="text/javascript">
<!--
var flip = (function() {
var flip = ['_addText1','_addText2','_addText3'];
var count = -1;
return function() {
return flip[++count % flip.length];
}
}());
-->
</script>
<body id="color1">
<header onclick="document.getElementById('click').innerHTML = flip(); document.getElementById('color1').setAttribute('id', 'color2');">
<h1>StaticText<a id="click">_ThisWillChange</a></h1>
<p>Click anywhere in the header to change the text above.<br />
This will also change the body color.</p>
</header>
</body>
<?php?>
The first problem is; if I add more color changes to the 'onclick' attribute it stops working all together. Basically I want the color to loop with the text:
document.getElementById('color2').setAttribute('id', 'color3');
document.getElementById('color3').setAttribute('id', 'color1');
The second problem is that I'm not really 'fluent' in javascript. I'm actually lucky I figured out this much to be honest.
I'm sure there's a way to put it all into the javascript (to keep my HTML clean), but I don't know how.
Any help would be most appreciated! Thanks in advance...
Why do you want to change the id of the element if you are so keen to set the color.
You can just the class on the body element which should get the work done for you.
Secondly it's a bad practice to bind events inline. Use javascript to bind the events as well.
<body id="color1" class="color1">
This is one way of writing the code.
Code
var header = document.getElementsByTagName('header')[0];
header.addEventListener('click', function () {
var body = document.getElementById('color1');
document.getElementById('click').innerHTML = flip("text");
body.className = flip("color");
});
var flip = (function () {
var flip = ['_addText1', '_addText2', '_addText3'],
colors = ["color1", "color2", "color3"];
var count = -1,
colorCount = -1;
return function (arg) {
if(arg === 'text')
return flip[++count % flip.length];
if(arg === 'color')
return colors[++colorCount % colors.length];
}
})();
HTML
<body id="color1" class="color0">
<header>
<h1>StaticText<a id="click">_ThisWillChange</a></h1>
<p>Click anywhere in the header to change the text above.
<br />This will also change the body color.</p>
</header>
</body>
CSS
header {
background-color:orange;
}
.color0 {
background-color:yellow;
}
.color1 {
background-color:red;
}
.color2 {
background-color:green;
}
.color3 {
background-color:blue;
}
Check Fiddle