open div on click of image - javascript

I have a very simple module to develop. On click of an image I need to open up a div element that I have created.I have attached my HTML and javascript file.When I am loading the page the div wont be coming because I have given style="display:none
myfunction() {
document.getElementById('Chatbot').style.visibility = "visible";
}
<body>
<a href="#Chatbot" id="chat" onclick="myfunction()">
<img src="sticky.png" style="width:50px;height:50px">
</a>
<div id="Chatbot" style="display:none">
<div id="header">
Legal Genie
<div class="icons">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<i class="fa fa-refresh" aria-hidden="true"></i>
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</div>
<div><textarea rows="3" cols="20">Press enter to send your message</textarea>
</div>
</div>
</body>

document.getElementById('Chatbot').style.display = "block";
function myfunction() {
document.getElementById('Chatbot').style.display = "block";
}
<body>
<a href="#Chatbot" id="chat" onclick="myfunction()">
Some Image
</a>
<div id="Chatbot" style="display:none">
<div id="header">
Legal Genie
<div class="icons">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<i class="fa fa-refresh" aria-hidden="true"></i>
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</div>
<div><textarea rows="3" cols="20">Press enter to send your message</textarea>
</div>
</div>
</body>

Avoid using inline scripts and also avoid capitalising the first letter of your ID or class name.
Just add an event listener to your #chat anchor link that loads a function which sets the css display property of your div to block on click like this:
/* JavaScript */
var chat = document.getElementById("chat");
var div = document.getElementById('chatbot');
function showDiv(){
div.style.display = "block";
}
chat.addEventListener("click", showDiv);
/* CSS */
a {text-decoration: none; padding: 5px; background-color: green; color: white;}
#chatbot {display: none;}
<!-- HTML -->
<a type="button" href="#Chatbot" id="chat">Open Div</a>
<hr>
<div id="chatbot">
<div id="header">
Legal Genie
<div class="icons">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<i class="fa fa-refresh" aria-hidden="true"></i>
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</div>
<div><textarea rows="3" cols="20">Press enter to send your message</textarea>
</div>

It can be a simple way
<script>
$( document ).ready(function() {
$('#chat').click( function(){
if ( $('#Chatbot').hasClass('active') ) {
$('#Chatbot').removeClass('active');
} else {
$('#Chatbot').addClass('active');
}
});
});
</script>
Add lil css
<style>
.active {
display:block!important;
}
</style>
Your HTML
<body>
<div id="chat">
Some Image
</div>
<div id="Chatbot" style="display:none">
<div id="header">
Legal Genie
<div class="icons">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<i class="fa fa-refresh" aria-hidden="true"></i>
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</div>
<div><textarea rows="3" cols="20">Press enter to send your message</textarea>
</div>
</div>
</body>

Related

MyBB Logo position does not change

So It's a theme without a responsive logo and
I've been messing around trying to fix it but with any position it doesn't change /:
I wasted days trying to fix this but still it would not work
Does anyone have any suggestions or solutions how to fix this?
Html Code :
<a name="top" id="top"></a> <br /> <br />
<div id="mainwidth">
<div id="container">
<div id="content">
<div class="menu">
<ul>
<li id="nav-portal"><i style="font-size: 12px;" class="fa fa-home fa-fw"></i> Home</li>
<li id="nav-forums"> <i style="font-size: 12px;" class="fa fa-comments fa-fw"></i> Forums</li>
<li id="nav-search"> <i style="font-size: 12px;" class="fa fa-search fa-fw"></i> {$lang->toplinks_search}</li>
<li id="nav-member"> <i style="font-size: 12px;" class="fa fa-users fa-fw"></i> Members</li>
<li id="nav-instructions"><img src="img/new-icon.jpg" style="width: 20px;position:center;cursor:pointer;"> <i style="font-size: 12px;" class="fa fa-question-circle fa-fw"></i> Forum Instructions</li>
<li id="nav-calendar"> <i style="font-size: 12px;" class="fa fa-calendar fa-fw"></i> {$lang->toplinks_calendar}</li>
<li id="nav-help"> <i style="font-size: 12px;" class="fa fa-info fa-fw"></i> {$lang->toplinks_help}</li>
<li><i style="font-size: 14px;" class="fa fa-angle-down fa-fw"></i>More</li>
<ul>
</div>
<div id="extraslink_popup" class="popup_menu" style="display: none;">
<div class="popup_item_container">
Logout
</div>
<div class="popup_item_container">
Show team
</div>
<div class="popup_item_container">
{$lang->welcome_newposts}
</div>
<div class="popup_item_container">
{$lang->welcome_todaysposts}
</div>
<div class="popup_item_container">
Link five here
</div>
</div>
<div class="topbar">
<table width="100%" cellspacing="0" cellpadding="{$theme['tablespace']}" border="0">
<tr>
<td valign="top">
<!--- LOGOO CODE STARTS HERE -->
<div class="logo-b">
<img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" />
</div>
<!--- LOGOO CODE ENDS HERE -->
</td>
<td> </td>
<td valign="bottom">
<div style="margin-top: 120px;"><div class="userbg">{$welcomeblock}</div></div>
</td>
</tr>
</table>
</div>
<br />
<div class="wrapper">
{$pm_notice}
{$bannedwarning}
{$bbclosedwarning}
{$unreadreports}
{$pending_joinrequests}
{$awaitingusers}
<navigation>
<br />
<script type="text/javascript">
// <!--
if(use_xmlhttprequest == "1")
{
$("#extraslink").popupMenu();
}
// -->
</script>
And the CSS code :
#logo {
padding: 10px 0;
margin-top: 40px;
text-align: center;
max-width: 150px;
}
I've messed around alot with the CSS code but heres the original one
First of all, you didn't add an element with logo id, add it in html and change it in css. If the problem is still not resolved, check if you have added your css file to html. If the problem still persists, add display: block property to your logo in css and give margin

why nextelementsibling return null | dom traversing js

when I click on title ( Title Goes Here) text. I am getting null for nextElementSibling instead of a element...
Edit
you can nest any elements inside an <a> except the following :
<a>
<button>
follow link
<a> and<button> both are invalid..
but I am getting null for a tag.. not for button tag.... I am looking for more clarity and valid source...
if I console log console.log(document.links) .. it's give three HTMLCollection collection...
End Edit
Below Example Code
console.log(document.links)
document.querySelectorAll(".viewAbstractToggleTitle").forEach(function(item) {
item.addEventListener("click", function(e) {
if (e.target.parentElement.classList.contains('viewAbstractToggleTitle')) {
console.log(e.target.parentElement.nextElementSibling.nextElementSibling)
console.log(e.target.parentElement.nextElementSibling.nextElementSibling.nextElementSibling);
console.log(e.target.parentElement.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling);
}
})
})
<li style="border-bottom: 1px solid #d6d6d6;margin-bottom:10px;">
<a href="javascript:void(0)">
<span class="viewAbstractToggleTitle" style="display:inline-block;line-height:1.6 !important">
<span style="font-weight: 600;font-size:16px;">
Title Goes Here
</span>
<span> ( 1-10 page )</span>
</span>
<br>
<div class="authors">
<span><i class="fa fa-user" aria-hidden="true"></i>
Author
</span>
<span><i class="fa fa-user" aria-hidden="true"></i>
Author
</span>
</div>
<button>
button tag
</button>
<a class="inlineBlock" href="" download>
<i class="fa fa-download" aria-hidden="true"></i> Download PDF</a>
<a class="inlineBlock viewAbstractToggle" href="javascript:void(0)"> <i class="fa fa-eye" aria-hidden="true"></i> View Article</a>
<div class="showTabe sTab">
<div class="tabBox">
<div class="tab">
<label class="label" for="tab1_">Abstract</label>
<label class="label" for="tab2_">Graphical of Author </label>
</div>
<div class="box">
<div class="content"><input id="tab1_"> Description
</div>
<div class="content"><input id="tab2_">
<p>image</p>
</div>
</div>
</div>
</div>
<br>
</a>
</li>
Your HTML is invalid. You have disallowed things like nested hyperlinks. This means the HTML parser, which is designed to be forgiving in spite of errors, has to come up with a new interpretation of your element tree. Here's what Firefox at least translates it to:
<li style="border-bottom: 1px solid #d6d6d6;margin-bottom:10px;">
<a href="javascript:void(0)">
<span class="viewAbstractToggleTitle" style="display:inline-block;line-height:1.6 !important">
<span style="font-weight: 600;font-size:16px;">
Title Goes Here
</span>
<span> ( 1-10 page )</span>
</span>
<br>
<div class="authors">
<span><i class="fa fa-user" aria-hidden="true"></i>
Author
</span>
<span><i class="fa fa-user" aria-hidden="true"></i>
Author
</span>
</div>
<span>
span tag
</span>
</a>
<a class="inlineBlock" href="" download="">
<i class="fa fa-download" aria-hidden="true"></i> Download PDF</a>
<a class="inlineBlock viewAbstractToggle" href="javascript:void(0)"> <i class="fa fa-eye" aria-hidden="true"></i> View Article</a>
<div class="showTabe sTab">
<div class="tabBox">
<div class="tab">
<label class="label" for="tab1_">Abstract</label>
<label class="label" for="tab2_">Graphical of Author </label>
</div>
<div class="box">
<div class="content"><input id="tab1_"> Description
</div>
<div class="content"><input id="tab2_">
<p>image</p>
</div>
</div>
</div>
</div>
<br>
</li>
You can get this information for yourself by copying the HTML from your browser's DOM inspector.
As you can see, the other <a/> elements are not siblings of .viewAbstractToggleTitle. This is because the DOM parser had to insert a closing of your first <a/> element since you cannot nest them.

How to check if a specific SPAN class content text

wanna check whether a specific SPAN class context text or not?
The SPAN class I want to check against is "distance" that has the kilometers numbers like (, 27 kilometers).
Tried the below code but still not working
if ($('.trip-summary-info').find('distance').length > 0) {
alert("Working !!!");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="trip-summary-info">
<h3>
<a href="javascript:void(0);" class="back_first">
<span class="chevron-up"><i class="fa fa-chevron-up"></i></span> Booking Summary:
<span class="date-time"></span>07-07-2017 09:05<span class="distance">, 99.84 kilometers</span><span class="duration">, 1 hrs 13 mins</span>
</a>
<span class="custom-btn custom-btn-default edit back_first"><i class="fa fa-pencil"></i></span>
</h3>
<div class="trip_status custom-clearfix">
<span class="location-form-marker"><i class="fa fa-map-marker"></i></span>
<div class="location-form"></div>
<div class="list-address-point" style="display:unset;"></div>
<span class="location-to-marker"><i class="fa fa-map-marker"></i></span>
<div class="location-to"></div>
</div>
<div class="additional_seats_wrapper editable-field">
<strong>Additional Seats: </strong><span id="additional-seats" class="text-muted"></span>
<!-- overlay-icon -->
<div class="overlay-icon">
<a class="btn-icon back_first" href="javascript:void(0);"><i class="fa fa-edit"></i></a>
</div>
<!-- /overlay-icon -->
</div>
</div>
You could try the following:
var $distance = $('.trip-summary-info .distance');
if ($distance.text() === ""){
// There is no text, so handle that
}
else {
// There is text, so you could do something different
}
You are missing the . represent the class in find()
if ($('.trip-summary-info').find('.distance').length > 0) {
console.log($('.trip-summary-info').find('.distance').text())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="trip-summary-info">
<h3>
<a href="javascript:void(0);" class="back_first">
<span class="chevron-up"><i class="fa fa-chevron-up"></i></span> Booking Summary:
<span class="date-time"></span>07-07-2017 09:05<span class="distance">, 99.84 kilometers</span><span class="duration">, 1 hrs 13 mins</span>
</a>
<span class="custom-btn custom-btn-default edit back_first"><i class="fa fa-pencil"></i></span>
</h3>
<div class="trip_status custom-clearfix">
<span class="location-form-marker"><i class="fa fa-map-marker"></i></span>
<div class="location-form"></div>
<div class="list-address-point" style="display:unset;"></div>
<span class="location-to-marker"><i class="fa fa-map-marker"></i></span>
<div class="location-to"></div>
</div>
<div class="additional_seats_wrapper editable-field">
<strong>Additional Seats: </strong><span id="additional-seats" class="text-muted"></span>
<!-- overlay-icon -->
<div class="overlay-icon">
<a class="btn-icon back_first" href="javascript:void(0);"><i class="fa fa-edit"></i></a>
</div>
<!-- /overlay-icon -->
</div>
</div>
you need to add . before distance to find class.
<div class="trip-summary-info">
<h3>
<a href="javascript:void(0);" class="back_first">
<span class="chevron-up"><i class="fa fa-chevron-up"></i></span>
Booking Summary:
<span class="date-time"></span>07-07-2017 09:05<span class="distance">, 99.84 kilometers</span><span class="duration">, 1 hrs 13 mins</span>
</a>
<span class="custom-btn custom-btn-default edit back_first"><i class="fa fa-pencil"></i></span>
</h3>
<div class="trip_status custom-clearfix">
<span class="location-form-marker"><i class="fa fa-map-marker"></i></span><div class="location-form"></div>
<div class="list-address-point" style="display:unset;"></div>
<span class="location-to-marker"><i class="fa fa-map-marker"></i></span><div class="location-to"></div>
</div>
<div class="additional_seats_wrapper editable-field">
<strong>Additional Seats: </strong><span id="additional-seats" class="text-muted"></span>
<!-- overlay-icon -->
<div class="overlay-icon">
<a class="btn-icon back_first" href="javascript:void(0);"><i class="fa fa-edit"></i></a>
</div>
<!-- /overlay-icon -->
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
if($('.trip-summary-info').find('.distance').length > 0){
alert("Working !!!");
}
</script>
You can access it through this:
if($(".trip-summary-info").find('h3').find('.distance').length > 0){
alert('working!!').
}

How can I create a marking an answer as accepted one system?

Explanation: I'm trying to make an accepted-answer system and there are three cases:
marking a new answer as accepted one (there is no accepted answer already)
undo a accepted answer
switching from one answer to another one
Here is my code:
$("body").on('click', '.fa-check', function(e) {
// send a request by ajax and if it is successful then
if( this.attr('color') == '#44b449' ){ // undo
this.css({"color":"#aaa"}); // set gry color to marked icon
} else { // switchin or marking a new one
$('.fa-check').css({"color":"#aaa"}); // set gray color to all icons
this.css({"color":"#44b449"}); // set green color to marked icon
}
});
.fa-check{
color:#aaa;
cursor: pointer;
}
.fa-check:hover{
color: #999;
}
<script src="https://use.fontawesome.com/9e9ad91d21.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>answer1</p>
<i class="fa fa-check" aria-hidden="true"></i>
<hr>
<p>answer2</p>
<i class="fa fa-check" aria-hidden="true" style="color: #44b449;"></i>
<hr>
<p>answer3</p>
<i class="fa fa-check" aria-hidden="true"></i>
But as you see my code doesn't work. How can I fix it?
Note: The whole of my question is about coloring.
Firstly your code is throwing errors as you're calling jQuery methods on this when it refers to a DOMElement, not a jQuery object.
To fix your issues you can simplify your logic by using classes instead of applying inline CSS styling. This allows you to simply toggle the class on click of the .fa-check element. Try this:
$("body").on('click', '.fa-check', function(e) {
// send a request by ajax and if it is successful then
$('.fa-check').not(this).removeClass('checked');
$(this).toggleClass('checked');
});
.fa-check {
color: #aaa;
cursor: pointer;
}
.fa-check.checked {
color: #44b449;
}
<script src="https://use.fontawesome.com/9e9ad91d21.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>answer1</p>
<i class="fa fa-check" aria-hidden="true"></i>
<hr>
<p>answer2</p>
<i class="fa fa-check checked" aria-hidden="true"></i>
<hr>
<p>answer3</p>
<i class="fa fa-check" aria-hidden="true"></i>
Use this method
function click_div(div) {
$("#main_div div .fa-check").css("color"," #aaa");
$("#"+div+" .fa-check").css("color"," #44b449");
}
#div_1,#div_2,#div_3
{
width:100%;
height:100px;
}
.fa-check{
color:#aaa;
cursor: pointer;
}
.fa-check:hover{
color: #999;
}
<html>
<head>
<script src="https://use.fontawesome.com/9e9ad91d21.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<div id="main_div">
<div id="div1" onclick="click_div('div1')">
<p>answer1</p>
<i class="fa fa-check" aria-hidden="true"></i>
</div>
<hr>
<div id="div2" onclick="click_div('div2')">
<p>answer2</p>
<i class="fa fa-check" aria-hidden="true" style="color: #44b449;"></i>
</div>
<hr>
<div id="div3" onclick="click_div('div3')">
<p>answer3</p>
<i class="fa fa-check" aria-hidden="true"></i>
</div>
</div>
</html>

How to Show the hidden Item in ng-repeat by external directive in AngularJS?

I am displaying a loop of items from a list in controller using ng-repeat directive. They are just the regular todo items with a minimize button. So, what I am doing to minimize the items is by setting up ng-hide to true on click of minimize button for those particular elements. Code is as below.
<div ng-repeat="note in notesList">
<div class="col-md-3 single-note" style="margin:5px" ng-hide="note.minimize">
<div class="note-title" style="margin-left: 30px">
<i class="fa fa-2x fa-paperclip" style="position:absolute; left:5px; top:5px"></i>
<b ng-bind="note.title"></b>
</div>
<div class="description" style="margin-left: 30px; text-align: justify" ng-bind="note.description"></div>
<div class="note-footer" style="margin-left: 30px; margin-bottom: 2px">
<span>
<img ng-src="{{ note.priority == 'imp' && 'img/imp.png' || ( note.priority == 'trivial' && 'img/trivial.png' || 'img/critical.png' )}}" /><!--<i class="fa fa-2x fa-dot-circle-o"></i>--></span>
<div class="pull-right">
<button class="btn btn-sm btn-default minimize" style="border-radius: 100%" ng-click="note.minimize=true"><i class="fa fa-minus"></i></button>
<button class="btn btn-sm btn-default" style="border-radius: 100%" data-toggle='modal' data-target='#editNoteModal' ng-click="editNote(note.id)"><i class="fa fa-pencil"></i></button>
<button class="btn btn-sm btn-default" style="border-radius: 100%" ng-click="removeNote(note.id)"><i class="fa fa-trash-o"></i></button>
</div>
</span>
</div>
</div>
</div>
Here is how it looks like
I have shown the list in right panel using another ng-repeat where I am just showing titles of notes and a button to maximize if they are hidden (constraint is I cannot have both left and right panels in single ng-repeat). Now the problem is whenever I click minimize button, that particular item hides, But I am now unable to display it again using maximize button in right panel.
I tried creating a function in controller for ng-click of minimize button which will return true if current state of item is 'not hidden' and I have passed a variable to the same function via ng-click of maximize button setting it up as false for ng-hide. But it's not working.
I am fed up now. If you guys got the purpose, please help me achieving the same. :(
Edit: Here is right panel code
<!--Right Panel (TAKEN FIRST AND PULLED TO RIGHT IN ORDER TO MAINTAIN UPPER POSITOIN IN MOBILE RESPONSIVENESS)-->
<div class="col-md-3 right-panel pull-right">
<div id="critical-notes-bunch">
<br/>
<div class="alert alert-danger"><i class="fa fa-dot-circle-o"></i> Critical Notes</div>
<ul style="margin-left: -35px; margin-top: -10px; margin-bottom: 20px;">
<li ng-repeat="miniNote in notesList">
<a ng-click="mininote.minimize=false" style="cursor: pointer"><i class="fa fa-folder-open-o"></i></a> <span ng-bind="miniNote.title"></span>×
</li>
<a style="color: gray"><i class="fa fa-2x fa-ellipsis-h"></i> <i class="fa fa-2x fa-ellipsis-h"></i></a>
</ul>
</div>
<div id="critical-notes-bunch">
<div class="alert alert-warning"><i class="fa fa-dot-circle-o"></i> Important Notes</div>
<ul style="margin-left: -35px; margin-top: -10px; margin-bottom: 20px;">
<li ng-repeat="miniNote in notesList">
<a ng-click="mininote.minimize=false" style="cursor: pointer"><i class="fa fa-folder-open-o"></i></a> <span ng-bind="miniNote.title"></span>×
</li>
<a style="color: gray"><i class="fa fa-2x fa-ellipsis-h"></i> <i class="fa fa-2x fa-ellipsis-h"></i></a>
</ul>
</div>
<div id="critical-notes-bunch">
<div class="alert alert-success"><i class="fa fa-dot-circle-o"></i> Trivial Notes</div>
<ul style="margin-left: -35px; margin-top: -10px; margin-bottom: 20px;">
<li ng-repeat="miniNote in notesList">
<a ng-click="mininote.minimize=false" style="cursor: pointer"><i class="fa fa-folder-open-o"></i></a> <span ng-bind="miniNote.title"></span>×
</li>
<a style="color: gray"><i class="fa fa-2x fa-ellipsis-h"></i> <i class="fa fa-2x fa-ellipsis-h"></i></a>
</ul>
</div>
</div>
<!--/Right Panel-->
In your right panel you interator is called miniNode, but in ng-click you reference mininode.minimize.
Changing either miniNode to mininode or vice versa should fix your problem.
In the ng-repeat that you use for rendering the right hand list; can you not simply do
<div ng-repeat="note in notesList">
<span ng-click="note.minimize = false">Maximize</span>
...
</div>

Categories