MyBB Logo position does not change - javascript

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

Related

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.

Selecting Div Rows to highlight it one at a time

[enter image description here][1]I am creating an examination appointment, and I wanted to highlight the selected row as green each time I clicked on it one at a time. The data in the rows are from the database. I tried to put class directly inside the div but the two rows were highlighted.
Thank you in advance
here's the output
$(document).on('click', '.selectdate', function(){
var selected = $('#walakapake').hasClass("highlight");
$("walakapake").removeClass("row");
if(!selected)
{
$('#walakapake').addClass("row highlight");
}
});
<style type="text/css">
#table-wrapper {
position:relative;
}
#table-scroll {
height:500px;
overflow:auto;
margin-top:20px;
}
#table-wrapper table {
width:100%;
}
#walakapake:hover{
background-color: #fafafa;
}
.highlight { background-color: red; }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'>
</script>
<div id="table-wrapper">
<div id="table-scroll">
<div class="container" >
<a name="submitting" class="selectdate" id="1">
<div class="row" style="border-style: solid; border-width: 1px; cursor: pointer; " id="walakapake" >
<div class="col-2 text-right">
<br>
<h1 class="display-4"><span class="badge badge-info">24</span></h1>
<h2 style="text-transform: uppercase;" id="month_name" >NOV</h2>
</div>
<div class="col-10">
<br>
<h3 class="text-uppercase"><strong>Examination day</strong></h3>
<ul class="list-inline">
<li class="list-inline-item"><i class="fa fa-calendar-o" aria-hidden="true"></i> Sunday | 2019</li>
<li class="list-inline-item"><i class="fa fa-clock-o" aria-hidden="true"></i> 8:00AM - 3:00PM</li>
<li class="list-inline-item" style="color: orange;" ><i class="fa fa-location-arrow" aria-hidden="true" style="color: black;" ></i> Slot 32</li>
</ul>
<p>Please bring your requirements</p>
<br>
</div>
</div>
</a>
<br>
<br>
<a name="submitting" class="selectdate" id="2">
<div class="row" style="border-style: solid; border-width: 1px; cursor: pointer; " id="walakapake" >
<div class="col-2 text-right">
<br>
<h1 class="display-4"><span class="badge badge-info">23</span></h1>
<h2 style="text-transform: uppercase;" id="month_name" >NOV</h2>
</div>
<div class="col-10">
<br>
<h3 class="text-uppercase"><strong>Examination day</strong></h3>
<ul class="list-inline">
<li class="list-inline-item"><i class="fa fa-calendar-o" aria-hidden="true"></i> Saturday | 2019</li>
<li class="list-inline-item"><i class="fa fa-clock-o" aria-hidden="true"></i> 8:00AM - 3:00PM</li>
<li class="list-inline-item" style="color: orange;" ><i class="fa fa-location-arrow" aria-hidden="true" style="color: black;" ></i> Slot 32</li>
</ul>
<p>Please bring your requirements</p>
<br>
</div>
</div>
</a>
</div>
</div>
</div>
$('.foo').click(function() {
$('.foo').removeClass('highlight'); //Removes every highlight
$(this).addClass('highlight'); //sets highlight to the clicked one
});
.highlight {
background-color:yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="foo">Element 1</li>
<li class="foo">Element 2</li>
<li class="foo">Element 3</li>
</ul>

open div on click of image

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>

knockout sortable update function afer moving item to different position

I have knockout sortable bookmark page where it is possible to group your bookmarks and change the position. I have all my functions working but i can't seem to get the "afterMove" to work. This is my view:
<div class="col-lg-12">
<div class="bookmarkIconsBox">
<div data-bind="droppable: newGroup, connectClass : 'lists'" class="lists col-lg-6 bookmarkIcons bookmarkActionsBackground"><i class="fa fa-5x fa-plus"></i>Nieuwe groep aanmaken</div>
<div data-bind="droppable: deleteItem, connectClass : 'lists'" class="lists col-lg-6 bookmarkIcons bookmarkActionsBackground"><i class="fa fa-5x fa-trash"></i>Bookmark verwijderen</div>
</div>
<div class="bookmarkBoxTitle" data-bind="visible: $root.visible()">
<input class="title" data-bind="textInput: $root.groupname()" />
<span data-bind="click: function() { $root.setVisible(), $root.changeGroupName($root.groupname())}"><i class="fa fa-2x fa-save"></i></span>
<span data-bind="click: $root.setVisible, visible: $root.visible()"><i class="fa fa-2x fa-close"></i></span>
</div>
<div class="bookmarkBoxTitle" data-bind="visible: $root.visibleBookmarkName()">
<input class="title" data-bind="textInput: $root.bookmarkname()" />
<span data-bind="click: function() { $root.setVisibleBookmarkName(), $root.changeName($root.bookmarkname())}"><i class="fa fa-2x fa-save"></i></span>
<span data-bind="click: $root.setVisibleBookmarkName, visible: $root.visibleBookmarkName()"><i class="fa fa-2x fa-close"></i></span>
</div>
</div>
<div data-bind="foreach: allBookmarks.bookmarkGroups" class="col-lg-12">
<div class="bookmarkBoxTitle">
<h3 class="title" data-bind="text: Description" />
<span data-bind="click: function(){$root.edit(Description)}" class="editName"><i class="fa fa-2x fa-edit"></i></span>
</div>
<div data-bind="sortable: { template: 'itemTmpl', data: bookmarks, connectClass : 'lists', afterMove: $root.update($parent.allBookmarks.bookmarkGroups)}" id="sortable" class="lists bookmarkBackground">
</div>
</div>
<script id="itemTmpl" type="text/html">
<div class="card col-lg-4">
<div>
<span class="moveItem"><i class="fa fa-2x fa-arrows"></i></span>
<span data-bind="click: function(){$root.editBookmarkName(Description)}" class="editName"><i class="fa fa-2x fa-edit" data-bind="visible: !$root.visibleBookmarkName()"></i></span>
</div>
<div class="card-block">
<div class="bookmarkBoxTitle">
<h4 class="card-title" data-bind="text: Description " />
<h4 class="card-title" data-bind="text: $index" />
</div>
<ul class="card-text">
<li data-bind="text: workspace"></li>
<li data-bind="text: role"></li>
</ul>
<a class="btn btn-primary" data-bind="attr : {'href': '/#page/' + link }">Ga naar</a>
</div>
</div>
When i move an item in in a group or to a different group i want it to execute the $root.update() but i can't seem to get it to work.

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