My goal is to make the "down-arrow.svg" change to "up-arrow.svg" if the image was "down-arrow.svg" when clicked on the upper div which contains this image and versa via.
I have looked up the past questions and answers, found something but they couldn't solve my problem, these index.html and index.js files grows from one of the answers written here. What am I doing wrong? Thank you in advance.
index.html:
<head>
<title> Some Title </title>
<script src="index.js"></script>
<link type="text/css" href="stylesheet.css" rel="stylesheet">
</head>
<body>
...
<div id="open-menu" onClick=changeArrow() >
<div id="open-menu-inner" >
<p id="open-menu-text" > Menü </p>
<img id="up-down-arrow" src="svg/down-arrow.svg" >
</div>
</div>
...
</body>
index.js:
function changeArrow() {
if (document.getElementById("up-down-arrow").src == "svg/down-arrow.svg") {
document.getElementById("up-down-arrow").src = "svg/up-arrow.svg";
}
else {
document.getElementById("up-down-arrow").src = "svg/down-arrow.svg";
}
}
stylesheet.css:
div#open-menu {
height: 50px;
width: 90%;
border: 2px solid rgba(94, 94, 94, 0.5);
position: absolute;
margin-top: 180px;
left: 50%;
transform: translateX(-50%);
}
div#open-menu-inner {
position: absolute;
left: 50%;
transform: translateX(-50%);
line-height: 50px;
vertical-align: middle;
display: table;
}
p#open-menu-text {
font-size: 30px;
color: #5e5e5e;
position: absolute;
right: 0px;
}
img#up-down-arrow {
height: 26px;
width: 26px;
position: absolute;
top: 50%;
left: 0px;
transform: translateY(50%);
margin-left: 10px;
}
I think you just need to change your image source and not the ID of it.
So with your HTML structure i can guide you with changing just the ID of the img tag.
The Solution is as below:
function changeArrow() {
//First grabing the current Source in below varaiable.
var img = document.getElementById('arrowSvg').src;
/*
** Now checking if it does match with path that we have in variable.
** And updating src based on the current src of image.
*/
if (img.indexOf('svg/down-arrow.svg') != -1) {
document.getElementById('arrowSvg').src = 'svg/up-arrow.svg';
} else {
document.getElementById('arrowSvg').src = 'svg/down-arrow.svg';
}
}
div#open-menu {
height: 50px;
width: 90%;
border: 2px solid rgba(94, 94, 94, 0.5);
position: absolute;
margin-top: 180px;
left: 50%;
transform: translateX(-50%);
}
div#open-menu-inner {
position: absolute;
left: 50%;
transform: translateX(-50%);
line-height: 50px;
vertical-align: middle;
display: table;
}
p#open-menu-text {
font-size: 30px;
color: #5e5e5e;
position: absolute;
right: 0px;
}
img#up-down-arrow {
height: 26px;
width: 26px;
position: absolute;
top: 50%;
left: 0px;
transform: translateY(50%);
margin-left: 10px;
}
<div id="open-menu" onClick=changeArrow()>
<div id="open-menu-inner">
<p id="open-menu-text"> Menü </p>
<img id="arrowSvg" src="svg/down-arrow.svg">
</div>
</div>
Hope this helps you.
Thanks!
The issue should be in your paths, with images from Google it works fine:
function changeArrow() {
if (document.getElementById("up-down-arrow").src == "https://d30y9cdsu7xlg0.cloudfront.net/png/242277-200.png") {
document.getElementById("up-down-arrow").src = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/Octicons-arrow-small-up.svg/1000px-Octicons-arrow-small-up.svg.png";
}
else {
document.getElementById("up-down-arrow").src = "https://d30y9cdsu7xlg0.cloudfront.net/png/242277-200.png";
}
}
div#open-menu {
height: 50px;
width: 90%;
border: 2px solid rgba(94, 94, 94, 0.5);
position: absolute;
margin-top: 180px;
left: 50%;
transform: translateX(-50%);
}
div#open-menu-inner {
position: absolute;
left: 50%;
transform: translateX(-50%);
line-height: 50px;
vertical-align: middle;
display: table;
}
p#open-menu-text {
font-size: 30px;
color: #5e5e5e;
position: absolute;
right: 0px;
}
img#up-down-arrow {
height: 26px;
width: 26px;
position: absolute;
top: 50%;
left: 0px;
transform: translateY(50%);
margin-left: 10px;
}
<head>
<title> Some Title </title>
<script src="index.js"></script>
<link type="text/css" href="stylesheet.css" rel="stylesheet">
</head>
<body>
<div id="open-menu" onClick=changeArrow() >
<div id="open-menu-inner" >
<p id="open-menu-text" > Menü </p>
<img id="up-down-arrow" src="https://d30y9cdsu7xlg0.cloudfront.net/png/242277-200.png" >
</div>
</div>
</body>
As an alternative, you may use classList.toggle instead. The idea of toggle is it will add the class if it's not present on the element, and remove it if it's present. It will be more optimize as well. Put the images into the class and toggle that class onClick so as the example below; see arrow-up on css and how it is used in toggle in javascript section. Initially the <div id="arrow".. has already an arrow class that's why you will see an arrow down icon, when the toggle is triggered, the element will become like this <div id="arrow" class="arrow arrow-up"></div> and this <div id="arrow" class="arrow"></div> alternatively. The toggling of arrow-up class gives the effect of changing arrow icons.
function changeArrow() {
var element = document.getElementById("arrow");
element.classList.toggle("arrow-up");
}
.open-menu {
padding: 20px;
position: absolute;
cursor: pointer;
background-color: #000000;
}
.arrow {
width: 16px;
height: 16px;
background: url('http://www.entypo.com/images/chevron-down.svg') no-repeat;
}
.arrow-up {
background: url('http://www.entypo.com/images/chevron-up.svg') no-repeat !important;
}
<div class="open-menu" onClick="changeArrow()" >
<div id="arrow" class="arrow"></div>
</div>
image's used on sample copyright to www.entypo.com
Replace
document.getElementById("up-down-arrow").src
with
document.getElementById("up-down-arrow").getAttribute('src')
src returns the full URL of the image
getAttribute('src') returns exactly what was in the HTML, i.e. the way that you wrote it
ps. I would also like to suggest a few potential improvements to your current HTML page:
I would recommend moving the JS import from the head to the bottom of the body tag just before closing it. This will make sure that the body of your webpage will render before downloading the JS file which will make the page render faster to your end users.
(This is because the way that the browser renders html is it executes
it line by line which means that it will stop to download the javascript file before executing anything else that comes after it, i.e. displaying the body of the webpage to the user.)
I would also recommend replacing the inline onClick function with an eventListener inside of your JS file that way you will have separation between your HTML and JS files which will make your website more maintainable as it grows in size
Depending on the size of your DOM it MIGHT also be faster to store, i.e. cache, the "up-down-arrow" node inside of a variable to avoid the performance cost of querying for that node inside of the DOM each time the user clicks on it, i.e.
$up_down_arrow = document.getElementById("up-down-arrow");
if ($up_down_arrow.getAttribute('src') === "bin2-lighter.svg") {
$up_down_arrow.setAttribute('src', 'bin2-darker.svg')
} else {
$up_down_arrow.setAttribute('src', 'bin2-lighter.svg');
}
Related
Say a menu is triggered when a button is clicked, now
1_ For canceling it, the user has to be able to click anywhere on the page (not only on the same button),
2_ Everything else on the page must still remain selectable throughout this process.
Here's what I've tried:
$(".dad").click(function() {
$(".son").show();
$(".mask").show();
});
$(".mask").click(function() {
$(".son").hide();
$(".mask").hide();
});
.dad {
background: greenyellow;
width: 20px;
height: 20px;
margin-top: 100px;
z-index: 2;
}
.son {
position: relative;
left: 20px;
bottom: 100px;
width: 100px;
height: 100px;
display: none;
background: tomato;
z-index: 2;
}
p {
z-index: 2;
}
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
display: none;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js "></script>
<p>This is a paragraph</p>
<div class="dad">
<div class="son"></div>
</div>
<div class="uncle"></div>
<div class="mask"></div>
This code satisfies the first condition(the ".son" hides when anywhere on the page is clicked), but the second condition isn't met. Because when the ".son" is visible, the paragraph is not immediately selectable, unless the user does another click. Although this seems like a minor problem, sometimes it can become a little annoying, thus is a requirement. (I've also tried other ways. E.g. CSS "pointer-events: none" on the mask, but it has a different purpose, because it also cancels click events). So how could it be done? Thanks in advance.
Note: This is not solely a CSS question, I embrace any Javascript or Jquery answers too should they give easier/better solutions.
Hope it helpful...
$(".dad").click(function() {
$(".son").show();
});
$(document).click(function (e) {
var container = $(".dad");
if(!container.is(e.target) &&
container.has(e.target).length === 0) {
$(".son").hide();
}
});
.dad {
background: greenyellow;
width: 20px;
height: 20px;
margin-top: 100px;
z-index: 2;
}
.son {
position: relative;
left: 20px;
bottom: 100px;
width: 100px;
height: 100px;
display: none;
background: tomato;
z-index: 2;
}
p {
z-index: 2;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js "></script>
<p>This is a paragraph</p>
<div class="dad">
<div class="son"></div>
</div>
<div class="uncle"></div>
I won't make some of this arcs on my website and I don know how to do it I tried to do it but I can't !
Referance Image
You could use a before/after pseudo element on one of the blocks. Then on that element you'd give it the same background color and use transform: skew(-2deg); to give it the tilted affect.
See the example below, it's fairly simple enough once you understand how you can use pseudo elements to your advantage.
section {
position: relative;
float: left;
width: 100%;
background: black;
height: 300px;
}
.skewedSection {
background: red;
}
.normalSection:before {
content: "";
background: red;
height: 100px;
-webkit-transform: skewY(-2deg);
transform: skewY(-2deg);
position: absolute;
left: 0;
right: 0;
bottom: -50px;
z-index: 2;
}
<section class='normalSection'>
</section>
<section class='skewedSection'>
</section>
I've never heard of this before and I'm really confused.
The deal is that I have the following code,
Javascript
$(document).ready(function () {
showSideBar('sbselection_1');
$('.talkbubble').click(function () {
var sidebarSelector = $(this).find('.tbselector').val();
showSideBar(sidebarSelector);
});
$('.clickables').on('click','.talkbubble',function () {
$(this).siblings('.talkbubble').removeClass('clicked');
$(this).addClass('clicked');
});
});
function showSideBar(selector) {
$('.sidebarContent').hide();
$('.sidebarContent.' + selector).show();
}
CSS
.sidebar{
position: absolute;
background-color: rgb(153,153,153);
width: 250px;
height: 300px;
}
.sidebarcontent{
display:none;
overflow:hidden;
}
.clickables {
position: absolute;
left: 270px;
}
.talkbubble {
background: white;
color: rgb(0,0,0);
font-family: Rockwell, Garamond, "MS Serif", "New York", serif;
font-size: 12px;
height: 40px;
margin-top: 1%;
margin-bottom: 20px;
position: relative;
width: 130px;
z-index: 5;
}
.talkbubble:before {
border-top: 10px solid transparent;
border-right: 10px solid white;
border-bottom: 10px solid transparent;
content:"";
height: 0;
position: absolute;
right: 100%;
top: 10px;
width: 0;
}
.clicked {
background:rgb(153,153,153);
}
.clicked:before {
border-right-color:rgb(153,153,153);
}
.talkbubble:hover{
background-color: rgb(112,112,112);
color: rgb(255,255,255);
}
.talkbubble:hover:before {
border-right-color: rgb(112,112,112);
}
.thumbnail {
height: 33px;
width: 30px;
float: left;
position: absolute;
margin: 4px;
z-index: 2;
left: 2px;
top: 0px;
}
.words {
height: 24px;
width: 150px;
position: absolute;
float: right;
left: 40px;
top: 10px;
}
#orangetriangle{
border-top:25px solid green;
height: 0;
position:absolute;
width: 0;
z-index:3;
border-right: 25px solid transparent;
height: 0;
position:absolute;
width: 0;
z-index:5;
border-top-color: rgb(255,138,0);
}
#dkpurpletriangle{
border-top:25px solid green;
height: 0;
position:absolute;
width: 0;
z-index:3;
border-right: 25px solid transparent;
height: 0;
position:absolute;
width: 0;
z-index:5;
border-top-color: rgb(120,3,105)
}
#powderbluetriangle{
border-top:25px solid green;
height: 0;
position:absolute;
width: 0;
z-index:3;
border-right: 25px solid transparent;
height: 0;
position:absolute;
width: 0;
z-index:5;
border-top-color: rgb(99,89,288);
}
HTML
Event 1
<div class="talkbubble">
<input type="hidden" class="tbselector" value="sbselection_2" />
<div class="thumbnail">
<img src="images/thumbnail1.png" height="33" width="30" align="middle" />
</div>
<div class="words">Event 2</div>
</div>
<div class="talkbubble">
<input type="hidden" class="tbselector" value="sbselection_3" />
<div class="thumbnail">
<img src="images/thumbnail1.png" height="33" width="30" align="middle" />
</div>
<div class="words">Event 3</div>
</div>
</div>
And you can see it on this fiddle https://jsfiddle.net/petiteco24601/rhjw8uzm/9/
Which is great and beautiful and does exactly what I want it to do.
Next I put it on a html page that I put together, you can see it here:
http://www.emich.edu/dining/draft/index.html
Again, this button display is working wonderfully and doing exactly what I want it to do.
Then I had to go through a specific server and use their system- which I'm a tad unfamiliar with and really forces you to separate everything, not just by folders but essentially you have two libraries working together to pull together the appropriate css, javascript, and html. As such, you can see that I do have a lot (against my better judgement) of inline styles and inclusion of javascript at the header rather than in a separate sheet. Nonetheless
http://webstage.emich.edu/dining-new/index.php
If you hit "inspect source" you see what I'm seeing when I'm working on it. The click-able display looks almost identical to the one on jsfiddle- but you hit Inspect Element and you see that all the <div class="sidebarContent"> is embedded inside each other. As such, it won't display the appropriate pictures to fill the <div class="sidebar"> area.
Any ideas??? Please and thank you!
Looks like the problem is you have used the self closing syntax for the inner divs of .sidebarContent elements like <div id="eetriangle" /> instead of using <div id="eetriangle"></div>.
Demo: Problem, Solution
What are all the valid self-closing elements in XHTML (as implemented by the major browsers)?
If you have noticed clearly in both the .clickables you have the below code
https://jsfiddle.net/petiteco24601/rhjw8uzm/9/
http://webstage.emich.edu/dining-new/index.php
.clickables {
position: absolute;
left: 270px;
}
in case of your which you dont have just add the below and it works identical :)
.clickables {
margin-left: auto;
position: absolute;
left: 333px;
}
So I went through and did some research on the server we're using. It turns out that I was correct in thinking that there was something wrong with how the library was parsing the information. Specifically, when the library puts everything together, it doesn't know what to do with an empty box and therefore immediately starts embedding other boxes inside of it- effectively destroying the code. Easy fix: just add an html comment inside of each empty box, and the program believe the is populated so it leaves it alone.
Thank you everyone for your help and suggestions!
I am trying to create some options that are hidden unless the user goes with the mouse in a specific area. Let's take an example: Google+ profile page:
When you go with the mouse cursor on the picture, the button appears.
Here is what I tried:
var $button = $("#button");
$("#profile-picture").on("mouseover", function() {
$button.show();
}).on("mouseout", function() {
$button.hide();
});
#profile-picture {
width: 150px;
height: 100px;
}
#button {
position: absolute;
display: none;
width: 30px;
height: 30px;
top: 45px;
left: 70px;
opacity: 0.75;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://datastore01.rediff.com/h450-w670/thumb/69586A645B6D2A2E3131/ckez1n08svw8f3en.D.0.Sidharth-Malhotra-Student-of-the-Year-Photo.jpg" id="profile-picture">
<img src="http://img3.wikia.nocookie.net/__cb20090227194712/java/images/0/0e/Camera_icon.gif" id="button" />
The problem is that when I go with the cursor over the #button, it flickers. What can I do?
The easiest method is placing them both in the same div, and then using mouseover/out for that div. Example: http://jsfiddle.net/1g24mhhz/
HTML:
<div id="profile-picture">
<img src="http://datastore01.rediff.com/h450-w670/thumb/69586A645B6D2A2E3131/ckez1n08svw8f3en.D.0.Sidharth-Malhotra-Student-of-the-Year-Photo.jpg" class="profile">
<img src="http://img3.wikia.nocookie.net/__cb20090227194712/java/images/0/0e/Camera_icon.gif" id="button" />
</div>
CSS edits:
#profile-picture .profile {
width: 150px;
height: 100px;
}
EDIT: You should probably not use an ID for the div, since you probably have multiple profiles on a page. This was just to show it with the code you had already used.
A simple css approach. You can have a click event on the button :)
$('#button').on('click', function() {
alert('I am clickable');
});
#profile-picture,
.hover-wrap {
width: 150px;
height: 100px;
}
#button {
position: absolute;
display: none;
width: 30px;
height: 30px;
top: 0px;
left: 0px;
bottom: 0;
right: 0;
margin: auto;
opacity: 0.75;
cursor: pointer;
}
.hover-wrap {
position: relative;
}
.hover-wrap:hover #button {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="hover-wrap">
<img src="http://datastore01.rediff.com/h450-w670/thumb/69586A645B6D2A2E3131/ckez1n08svw8f3en.D.0.Sidharth-Malhotra-Student-of-the-Year-Photo.jpg" id="profile-picture">
<img src="http://img3.wikia.nocookie.net/__cb20090227194712/java/images/0/0e/Camera_icon.gif" id="button" />
</div>
You can use CSS:hover properties to show/hide the button, no Javascript needed.
The trick is a sibling selector:
#profile-picture:hover + #button, #button:hover{
display:block;
}
Try this:
http://jsfiddle.net/6s9200ab/
Okay, so I recently learned that the ViewRight web player from Verimatrix is a so called NPAPI plugin which can be overlayed with HTML elements using a technique involving a "dummy iframe".
Div on top of ViewRight-player
HTML on top of NPAPI plugin
Now, as far as I've been able to gather, Silverlight appears to be a NPAPI plugin as well (I may be mistaking). So I tried the same approach to display a DIV on top of a Silverlight web player from another website loaded inside an iframe.
Unfortunately it doesn't work... As soon as the Silverlight player loads it sits on top of everything else.
I know that setting the windowless param to true in the player would fix it. But since the player isn't hosted by me I can't edit any of the object parameters.
Here's a test scenario based on the "dummy iframe" method: http://jsfiddle.net/c7Hsp/
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
background: black;
cursor: auto;
-webkit-user-select: none;
user-select: none;
overflow: hidden;
}
:::-webkit-scrollbar {
display: none;
}
.wrapperDiv {
position: absolute;
bottom: 200px;
left: 200px;
width: 200px;
height: 200px;
margin: 0 auto;
}
.dummyFrame {
position: absolute;
top: 200px;
left: 200px;
width: 200px;
height: 200px;
background-color: red;
}
.contentDiv {
position: absolute;
top: 25px;
left: 25px;
width: 300px;
color: white;
font-family: Arial;
font-size: 18pt;
text-align: center;
background-color: green;
}
#silverFrame {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
border: 0px;
background: transparent;
}
</style>
</head>
<body>
<iframe id="silverFrame" src="http://clubace.dk/silverlight.htm"></iframe>
<div class="wrapperDiv">
<iframe class="dummyFrame" frameborder="0"></iframe>
<div class="contentDiv">Weee!<br>I'm overlaying this<br>NPAPI plugin :D</div>
</div>
</body>
</html>
I hope somebody can help me make this work :-)
Thx
for your deleted question PHP: Get attribute value of a specific tag from HTML [duplicate]
you miss an S in the
document.getElementsByClassName('classname')
and you can then
.
.
$attr = $tag->item(15);
$percent = $tag.style.heigth
http://www.w3schools.com/jsref/prop_style_height.asp