It is working when I do this with getElementByID. But when I change it to className, it doesn't work.
The reason why I am going to do this with class name is because there would be many looping (php) ticket in the page which is ordered by ticket number. And when "view" is clicked for a specif ticket, it will show the full message on it.
Of course, I can't get it by multiple duplicate "id" here. And I need to change it to class name only. Help, please.
<div id="menuTiket">
<span style="padding:10px; background:yellow; float:right;">
<a href = "javascript:void(0)" onclick ="document.getElementsByClassName('light').style.display='block';
document.getElementsByClassName('fade').style.display='block';
">Tiket Baru</a></span></div>
<!--Black Overlay-->
<div id="fade" class="fade overlayMessage" onLoad="initDynamicOptionLists()"></div>
<!--Pop Up Div-->
<div id="light" class="light popupBoxMesage">
<span style="position: absolute; top: 11px; right:1px; color:white;" id="closeBlocked">
<a style="color:green; text-decoration:none; background:white; padding:10px;" href = "javascript:void(0)" onclick ="document.getElementsByClassName('light').style.display='none'; document.getElementsByClassName('fade').style.display='none'"><b> X </b></a>
</span>
</div>
CSS:
<style type="text/css">
.overlayMessage{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:10000001;
-moz-opacity: 0.5;
opacity:.45;
filter: alpha(opacity=40);
}
.popupBoxMesage {
display: none;
position: fixed;
top: 0;
left: 0;
bottom:0;
right:0;
border: solid 10px darkseagreen;
background-color: greenyellow;
width:70%;
height:400px;
z-index:10000002;
overflow: auto;
padding: 1% 2% 12px 2%;
margin: auto;
}
/* CSS Document */
</style>
It's getElementsByClassName(notice the 's' after 'Element') because it returns more than one element. You can have multiple elements in the DOM with the same class.
The result will be a collection, and you can see a specific item like so :
var elements = document.getElementsByClassName("class");
var firstElement = elements[0];
Related
I'm going to set a parameter for an iframe that sets to 1 or 0. then if the parameter is 1 a div by class="badge" will visible else hide.
How can I define this condition in JavaScript? Thank you for your help :)
This is my HTML and CSS code.
.badge {
font-family: Tahoma;
position: absolute;
left: 0;
bottom: 0;
background: #7bbded;
color: white;
border-radius: 0 0px 0 0;
font-size: 10px;
padding: 1px 6px 0 3px;
}
<iframe scrolling="no" style="" src="" frameborder="0">
<div id="main" style="width: 100%; height: 100%;">
<div class="ad-container" id="container">
<a href="#" target="_blank" onclick="cmp_link_clicked()">
<img class="text-icon" alt="آموزش های فرادرس" title="آموزش های فرادرس" src="https://beta.kaprila.com/a/images/video-icon.gif">
<h3 id="title">فیلم آموزشی <span class="important">تافل <span class="ltr">(TOEFL)</span></span> تشریح آزمون — <strong>کلیک کنید</strong></h3>
<div class="badge" id="badge" style="display: block;">
تبلیغات
</div>
</a>
</div>
</div>
</iframe>
First, get a reference to the div:
var div = document.querySelector('.badge');
Then, add a new class, like show:
if(parameter === 1){
div.classList.add('show');
}
parameter should be the name of your parameter stored in a var.
Besides, you could set display: block in your css file, not as inline style.
Like this:
.badge {
font-family: Tahoma;
position: absolute;
left: 0;
bottom: 0;
background: #7bbded;
color: white;
border-radius: 0 0px 0 0;
font-size: 10px;
padding: 1px 6px 0 3px;
display:none; // ---> Hidden by default
}
.badge.show {
display:block; // --> Visible only when you have .badge and .show classes in the same element
}
To remove the class, you can use classList.remove('show');
if(parameter === 0){
div.classList.remove('show');
}
Check docs here
i have some setup... where tool tip appears on hover... so i have to put tool tip and anchor tags in same div... tool tips pointer events set to none.. but i cant set pointer events of container div to none because then Hover event is not detected... but i want the underlying element below tool tip to be clickable... please help me out (if possible) without java script... i have set up the dummy scenario below... also including code pen link.... and yeah... positions are not changeable...in my case the underlying div is partially visible as shown in this code below.. and i want it to be clickable/ fire alert function... yeah if there is other way by changing composition of UN-ordered list.. and separating it from that container please let me know... but tool tip should be visible on hover on switch...
<html>
<head>
<style>
.menudescription{
float: left;
width: 150px;
height: 30px;
text-align: center;
background-color: #A1BA94;
margin: 20px 0px 0px 12px;
font-size: 20px;
line-height: 25px;
font-family: 'Kaushan Script', cursive;
color: white;
border: solid white 2px;
opacity: 0;
pointer-events: none;
}
ul li {
list-style-type:none
}
#menulist{
clear: both;
width: 230px;
height: 342px;
position: fixed;
right: 0;
top: 5%;
z-index: 1000;
}
.menulistitem{
clear: both;
height: 60px;
width: 60px;
float: right;
position: relative;
text-align: center;
vertical-align: middle;
background-color: #A1BA94;
margin: 2px;
padding-top: 4px;
}
.menulistitem:hover + .menudescription{
opacity: 1;
}
.underlyingdiv{
height:200px;
width:50px;
background-color:red;
position:relative;
float:right;
margin:20px 40px;
display:block;
}
</style>
</head>
<body>
<div id="navbar">
<ul id="menulist">
<li><div class="menulistitem" id="menuitem_showreel"><a href="#">switch
</a></div> <div class="menudescription">tooltip</div></li>
<li><div class="menulistitem" id="menuitem_showreel"><a href="#">switch
</a></div> <div class="menudescription">tooltip</div></li>
<li><div class="menulistitem" id="menuitem_showreel"><a href="#">switch
</a></div> <div class="menudescription">tooltip</div></li></ul>
</div>
<div class="underlyingdiv" onClick="myfunction()"></div>
<script>
function myfunction(){
alert("hello");
}
</script>
</body>
</html>
below is the code pen link...
http://codepen.io/theprash/pen/MKwWoN
Check this out
The red container is clickable and the tooltip is visible on hover.
Things I do:
Added position:relative to li.
Removed floats to divs inside lis added below css to .menudescription
position: absolute;
right: 100%;
top: 0;
This will help to position the tooltip relative to li
Override the width of #menulist to 60px and remove padding-left for the same. This will make sure that the red container is clickable.
Working Code pen
I've been using a simple script to pop up a hidden div, and an absolute hyperlink in behind as a "failsafe" way for the user to close the popup. Now that I want to have multiple "pop ups" on the same page, I need to adjust so that I'm not targeting by ID. getElementsbyClassName does not seem to be working.
My current HTML code:
Button One
Button Two
<div id="buttonOne" class="white_content"><a class="closeWindow" href="javascript:void(0)" onclick="document.getElementById('buttonOne').style.display='none';document.getElementById('fade').style.display='none'">CLOSE</a>
<p>BUTTON ONE CONTENT</p>
</div>
<div id="buttonTwo" class="white_content"><a class="closeWindow" href="javascript:void(0)" onclick="document.getElementById('buttonOne').style.display='none';document.getElementById('fade').style.display='none'">CLOSE</a>
<p>BUTTON TWO CONTENT</p>
</div>
<div id="fade" class="black_overlay"></div>
And some CSS:
.black_overlay{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.black_overlay a {
display:block;
width:100%;
height:100%;
cursor:unset;
}
.white_content {
display: none;
position: fixed;
top: 12%;
left: 12%;
width: 75%;
height: 75%;
padding: 16px;
background-color: white;
z-index:1002;
overflow: auto;
}
So the pop-up triggers/buttons work fine, because I can connect each button to its respective content window with a unique ID. But the div at the bottom (#fade) is what goes behind the window and fills the background with a semi-transparent overlay. I liked having a giant link there that closed the window whenever you clicked outside the content window. Since it needs to target the current open div container by ID, I'm at a loss.
I tried replacing the link in there with document.getElementsbyClassName and giving all of the windows the same class, but I get an undefined error.
Any help would be greatly appreciated!
One minimal change solution is to track the active button using a global variable, like this (the global is activeButton, code changes are in the onclick attributes for the a tags and the #fade tag, and there's a bit of JavaScript declaring the variable):
var activeButton;
.black_overlay{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.black_overlay a {
display:block;
width:100%;
height:100%;
cursor:unset;
}
.white_content {
display: none;
position: fixed;
top: 12%;
left: 12%;
width: 75%;
height: 75%;
padding: 16px;
background-color: white;
z-index:1002;
overflow: auto;
}
Button One
Button Two
<div id="buttonOne" class="white_content"><a class="closeWindow" href="javascript:void(0)" onclick="document.getElementById('buttonOne').style.display='none';document.getElementById('fade').style.display='none'">CLOSE</a>
<p>BUTTON ONE CONTENT</p>
</div>
<div id="buttonTwo" class="white_content"><a class="closeWindow" href="javascript:void(0)" onclick="document.getElementById('buttonOne').style.display='none';document.getElementById('fade').style.display='none'">CLOSE</a>
<p>BUTTON TWO CONTENT</p>
</div>
<div id="fade" class="black_overlay"></div>
I would strongly suggest moving all of that JavaScript out of onclick=... attributes and into functions, though, not least because it would allow a lot less code duplication.
Hey I want to get the width of a div and add it to a css class as border width. Thanks in advance!
Here is the div:
<div id="web" class="well">
<div style="padding:19px">
<a style="text-decoration:none;" class="boxclose web_close"></a>
<h2 style="color:#242424; font-weight:bold;"><em style="color:#4fd886;">—</em> Web.</h2>
<p></p>
</div>
</div>
and here is the CSS class:
.well:before {
width: 0;
height: 0;
content: "";
border-bottom: 81px solid #fff;
border-left:/*WIDTH HERE*/ solid transparent;
position: absolute;
bottom: 100%;
}
I didn't mention you want border any one sided like border-left, right etc. or border in all direction.
I've tried to solve your query please find fiddle link below..
find js fiddle demo
.well{
position:relative;
float:left;
}
.well:before {
width: 100%;
height: 100%;
content: "";
position: absolute;
top: 0;
left:0;
border:1px solid red;
}
i am trying to use the tinyscrollbar plugin http://baijs.nl/tinyscrollbar/
like this:
$('#nvl2 .content').html( '<div class="scrollbar">'+
'<div class="track">'+
'<div class="thumb"><div class="end"></div></div>'+
'</div>'+
'</div>'+
'<div class="viewport">'+
'<div class="overview">' +$('#nvl2 .content').html()+'</div>'+
'</div></div>' ).attr('id','sc2');
$('#sc2').tinyscrollbar();
this is called right before of a ajax call that loads new content in #nvl2 but the tinyscroll is not enabled and firebug does not jump any errors
css:
/**************/
/* Tiny Scrollbar */
#nvl1 { }
#nvl1 .viewport { ¡overflow: hidden; position: relative; width:100% }
#nvl1 .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; }
#nvl1 .scrollbar{ background: transparent url(../images/bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: 15px; }
#nvl1 .track { background: transparent url(../images/bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:13px; position: relative; padding: 0 1px; }
#nvl1 .thumb { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 100%; height: 20px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px; }
#nvl1 .thumb .end { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; }
#nvl1 .disable { display: none; }
/**************/
/* Tiny Scrollbar */
#nvl2{ }
#nvl2 .viewport { ¡overflow: hidden; position: relative; width:100% }
#nvl2 .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; }
#nvl2 .scrollbar{ background: transparent url(../images/bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: 15px; }
#nvl2 .track { background: transparent url(../images/bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:13px; position: relative; padding: 0 1px; }
#nvl2 .thumb { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 100%; height: 20px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px; }
#nvl2 .thumb .end { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; }
#nvl2 .disable { display: none; }
and this is the sample of the content once the ajax call is done
<div class="level" id="nvl2" style="left: 540px; display: block; height: 663px; z-index: 1;">
<div class="content" style="display: block;">
<div class="scrollbar">
<div class="track">
<div class="thumb">
<div class="end">
</div>
</div>
</div>
</div>
<div class="viewport">
<div class="overview">
<span class="close"></span>
<div class="contentHeader">
<div class="contentHeaderImg">
<img alt="redLevel" class="attributeImgLogo" src="img/cnt/redLevel.png">
</div>
<h2>Red Level Glove</h2>
<h4>The boutique hotel within the hotel</h4>
</div>
<div class="contentImg">
<img class="attributeImg" alt="drink" src="img/cnt/redLevelDrink.jpg">
</div>
<div class="contentTxt">
<p>
Red Level Lounge: Exclusive VIP Red Level Lounge featuring private check-in with a welcome glass of Veuve Clicquot Grande Dame champagne.
</p>
<p>
The Red Level Family Concierge experience is offered in select resort locations. Luxuries include separate VIP check-in lounge exclusively for Family Concierge clients, designated family pools, premium suite accommodations designed with families in mind, upgraded ensuite amenities.
</p>
</div>
</div>
</div>
</div>
<div class="extra" style="width: 418px;">
</div>
</div>
And before the ajax call and tinyscrollbar init exectuted:
<div class="level" id="nvl2" style="left: 540px; display: block; height: 663px; z-index: 1;">
<div class="content" style="display: block;">
<span class="close"></span>
<div class="contentHeader">
<div class="contentHeaderImg">
<img alt="redLevel" class="attributeImgLogo" src="img/cnt/redLevel.png">
</div>
<h2>Red Level Glove</h2>
<h4>The boutique hotel within the hotel</h4>
</div>
<div class="contentImg">
<img class="attributeImg" alt="drink" src="img/cnt/redLevelDrink.jpg">
</div>
<div class="contentTxt">
<p>
Red Level Lounge: Exclusive VIP Red Level Lounge featuring private check-in with a welcome glass of Veuve Clicquot Grande Dame champagne.
</p>
<p>
The Red Level Family Concierge experience is offered in select resort locations. Luxuries include separate VIP check-in lounge exclusively for Family Concierge clients, designated family pools, premium suite accommodations designed with families in mind, upgraded ensuite amenities.
</p>
</div>
</div>
<div class="extra" style="width: 418px;">
</div>
</div>
and can be tested here: http://toniweb.us/gm any idea what am i missing?
What did you mean by
...).attr('sc2');
in you code?
Function .attr() with one parameter is getter for attribute value. Did you want to set id for element? If this was your idea then better way is to insert this id to this html code:
<div id="sc2" class="scrollbar">
On your page when execution comes to line with tinyScrollbar initialization:
$('#sc2').tinyscrollbar();
There is no element with id 'sc2' and this is why scrollbar is not showing up and in firebug there are no errors.
Try using tinyscrollbar_update() method. I was facing issue while i have to change content on a ajax request. and it works for me fine. Full documentation at http://baijs.nl/tinyscrollbar/