"The defined function below is suppose to create a slideMenu on the nleft side of the index page. However its seems like i have missed something as the slide Menu doesn's work."
<!DOCTYPE html>
<html>
<head>
<title>Responsive Animated Sidebar Menu</title>
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
<link rel="stylesheet" href="style.css">
<script>
function openSlideMenu(){
document.getElementById('menu').style.width = '250px';
document.getElementById('content').style.marginLeft = '250px';
}
function closeSlideMenu(){
document.getElementById('menu').style.width = '0';
document.getElementById('content').style.marginLeft = '0';
}
</script>
</head>
<body>
<div id="content">
<span class="slide">
<a href="#" onClick="openSlideMenu()">
<i class="fas fa-bars"></i>
</a>
</span>
<div id="menu" clSS="nav">
<a href="#" class="close" onclick="closeSideMenu()">
<i class="fas fa-times"></i>
</a>
Home
About
Services
Contact
</div>
<h1>S.T. Graffix Menu</h1>
</div>
</body>
</html>
You are calling an invalid close function, that means you gave a wrong function name on the
onclick="closeSideMenu()"
So it Should be closeSlideMenu():
onclick="closeSlideMenu()"
Related
onDragEnter and onDragLeave are called, but not onDrop.
evreything works when run in firefox and chrome but not electron
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="css/upload.css">
<link rel="stylesheet" href="css/popups.css">
<script src="https://kit.fontawesome.com/8edc1bc1b3.js" crossorigin="anonymous"></script>
<title>popup test</title>
</head>
<body>
<!-- popups sit here -->
<div class="uploadTestPopup">
<!-- upload / folder popup -->
<div class="uploadSelector" data-showing="content">
<i class="uploadSelectorItem" onclick="">content</i>
<i class="uploadSelectorItem" onclick="">folder</i>
</div>
<div id="uploadContentArea" class="uploadContentArea" ondrop="FileDrop(event)" ondragenter="allowDrop(event)" ondragleave="dropLeave(event)" ondragend="dragEnd(event)">
<!-- <i id="uploadIcon" class="fa-solid fa-circle-plus uploadIcon"></i>
<i class="uploadText">well upload something</i> -->
</div>
<div class="tagArea">
<div class="tagAreaDevider">
<input type="text">
</div>
<div class="tagAreaDevider">
<i class="tag">tag</i>
<i class="tag">hello</i>
<i class="tag">hello</i>
</div>
<div class="tagAreaDevider">
<i class="tag">hello</i>
<i class="tag">hello</i>
</div>
</div>
<div class="uploadArea">
<i class="uploadButtonCancel">exit</i>
<i class="uploadButtonAccept">done</i>
</div>
</div>
<script src="./js/upload.js"></script>
</body>
</html>
upload.js
function FileDrop(e) {
e.preventDefault();
e.stopPropagation();
console.log('drop call')
}
function allowDrop(e) {
e.preventDefault();
e.stopPropagation();
document.getElementById('uploadContentArea').style = 'background-color: blue;'
console.log('allow event')
}
function dropLeave(e){
e.preventDefault();
e.stopPropagation();
document.getElementById('uploadContentArea').style = ''
console.log('drag leave event')
}
i've tied adding event listeners, document.body.onDrop and doing it within the html doc.
but each attempt it never logged the drop call to the console.
only works in the browser.
is there some sort of electon setting or package i need to install???
I found this really cool Toolbar.js JQuery library that I would love to add to my application, though the instructions on the page seem pretty straightforward, I am having issues getting it to work.
Find below my simple HTML file put together as per instructions:
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="js/jquery.toolbar.js"></script>
<link href="css/jquery.toolbar.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<script>
$(document).ready(function() {
$('#gear').toolbar({
content: '#toolbar-options',
position: 'top'
});
});
</script>
</head>
<body>
<header>
<h1>Testing toolbar.js</h1>
</header>
<div class="btn-toolbar btn-toolbar-warning">
<i class="fa fa-cog"></i>
</div>
<div id="toolbar-options" class="hidden btn-toolbar btn-toolbar-primary">
<i class="fa fa-plane"></i>
<i class="fa fa-car"></i>
<i class="fa fa-bicycle"></i>
</div>
</body>
</html>
The browser console does not render any error messages.
The HTML code renders the following image, but doesn't render the tooltips as desired:
Help!
What am I missing or doing wrong?
Your help is appreciated.
Prevent multiple elements with the same ID
id="gear"
Prevent elements with multiple ID's
id="toolbar-options gear"
Add toolbar css CDN link (instead off local file)
<link hef="https://cdn.jsdelivr.net/gh/paulkinzett/toolbar#1.0.1/jquery.toolbars.css" rel="stylesheet"/>`
After fixing those issues, it still doesn't seem to work.
It's appears the position: 'bottom' causes the error.
Setting it to top works as you can see in this demo:
$('#gear').toolbar({
content: '#toolbar-options',
position: 'top'
});
.hidden { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/paulkinzett/toolbar#1.0.1/jquery.toolbar.js"></script>
<link href="https://cdn.jsdelivr.net/gh/paulkinzett/toolbar#1.0.1/jquery.toolbars.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<header>
<h1>Testing toolbar.js</h1>
</header>
<div class="btn-toolbar btn-toolbar-warning" id="gear" >
<i class="fa fa-cog"></i>
</div>
<div id="toolbar-options" class="hidden btn-toolbar btn-toolbar-primary">
<i class="fa fa-plane"></i>
<i class="fa fa-car"></i>
<i class="fa fa-bicycle"></i>
</div>
The error is thrown in getCoordinates which shows:
getCoordinates: function( position, adjustment) {
var self = this;
self.coordinates = self.$elem.offset();
if(position == 'top') {
return coordinates = {
left: self.coordinates.left-(self.toolbar.width()/2)+(self.$elem.width()/2),
top: self.coordinates.top-self.$elem.height()-adjustment,
}
}
if(position == 'left') {
return coordinates = {
left: self.coordinates.left-(self.toolbar.width()/2)-(self.$elem.width()/2)-adjustment,
top: self.coordinates.top-(self.toolbar.height()/2)+(self.$elem.height()/2),
}
}
},
Since the function does not return anything if the value is bottom, it makes sense that an error is thrown.
I need to change the href of the a tag with id="cont".
The code I've got so far.(I was told to post the whole code here)
HTML:
<html>
<head>
<title>Adventure Game</title>
<link rel="stylesheet" href="../../styles/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="../../js/main.js"></script>
<script src="../../js/knightClass.js"></script>
<script src="../../js/choices.js"></script>
</head>
<body>
<div id="mySidenav" class="sidenav">
×
<i class="fa fa-fw fa-home"></i>Home
How 2 Play
<div>
<button onclick="goBack()">Back</button>
</div>
</div>
<!-- Use any element to open the sidenav -->
<span onclick="openNav()"><div class="menu">
<div></div>
<div></div>
<div></div>
</div>
</span>
<div id="main">
<h1 class="header"><b>Stage 2 - Knight1</b></h1>
<div id="options" class="option hide">
<a id="cont" href="#">Continue</a>
<!--Hero
Paladin
Holy Knight
Assassin-->
</div>
</div>
</body>
</html>
JavaScript
window.onload=function(){
setTimeout(knight,1);
}
function knight(){
let rand=Math.floor(Math.random() * 10) + 1;
var cont=document.getElementById("cont");
if (rand==10){
cont.href("hero/hero1.html");
} else if (rand>=7){
cont.href("paladin/paladin1.html");
} else if (rand>=3){
cont.href("holyKnight/holyKnight1.html");
} else if (rand<3){
cont.href("assassin/assassin.html");
}
}
1.Change 2.Go
<script>
function ChangeHref(){
document.getElementById("a").setAttribute("onclick", "location.href='http://religiasatanista.ro'");
}
</script>
Ref Link
I am starting completely with html and javascript and coding in general.
I want to bild a website as part of my learning. The website will be about wedding films and clips.
I want to have a side menu which menu button (three horizontal lines) in top left corner. When the menu button is 'clicked' the side menu will roll out and menu button will change to cross. When the menu button is a cross, it should have a function of hiding the side menu.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Wedding Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dancing+Script:700">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="main.js"></script>
</head>
<body>
<div id="side-menu" class="side-nav">
×
<ul class="fa-ul">
<li><img id="icon" src="/mnt/120AA1F00AA1D0D1/Programming/Wedding-Web-Page/Icons/youtube32.png"></img> Home</li>
<li>Book a date</li>
<li>Portfolio</li>
<li>Check</li>
</ul>
</div>
<div>
<span class="open-slide">
<a href="#" onclick="toCross(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</a>
</span>
</div>
<p class="quote">One video, <br> thousands memories.</p>
</body>
</html>
The connected javascript file is here:
var nav = false;
function openSideMenu(){
document.getElementById('side-menu').style.width = '250px';
document.getElementById('main').style.marginLeft = '250px';
nav = true;
}
function closeSideMenu(){
document.getElementById('side-menu').style.width = '60px';
document.getElementById('main').style.marginLeft = '60px';
nav = false;
}
function toCross(x){
x.classList.toggle("change");
nav ? closeSideMenu() : openSideMenu();
}
I have found similar question asked here: JavaScript Toggle between 2 Functions but for some reason the code stops after the first openSideMenu() is executed and the nav variable does not change from false to true.
I am stuck here hating my life and I will be so grateful for a help!
As far as I can see you haven't provided a HTML markup containing the element #main. It seems document.getElementById('main') is what causes the code to not work:
var nav = false;
function openSideMenu() {
document.getElementById('side-menu').style.width = '250px';
//document.getElementById('main').style.marginLeft = '250px';
nav = true;
}
function closeSideMenu() {
document.getElementById('side-menu').style.width = '60px';
//document.getElementById('main').style.marginLeft = '60px';
nav = false;
}
function toCross(x) {
console.log(nav)
x.classList.toggle("change");
nav ? closeSideMenu() : openSideMenu();
}
<div id="side-menu" class="side-nav">
×
<ul class="fa-ul">
<li>
<img id="icon" src="/mnt/120AA1F00AA1D0D1/Programming/Wedding-Web-Page/Icons/youtube32.png"> Home
</li>
<li>Book a date</li>
<li>Portfolio</li>
<li>Check</li>
</ul>
</div>
<div>
<span class="open-slide">
<a href="#" onclick="toCross(this)">x
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</a>
</span>
</div>
<p class="quote">One video, <br> thousands memories.</p>
I have an MVC app that uses the _Layout page to render a header and a sidebar in every page. I am trying to use Angular's Accordion for the menus. However, as soon as I try to place a controller in my _Layout page all of my angular code stops working (I have angular in the Index.cshtml which displays via RenderBody()).
Here is my _Layout page code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-sanitize.js"></script>
<script src="~/Scripts/ui-bootstrap-custom-tpls-0.13.3.js"></script>
<link href="~/Content/Layout.css" rel="stylesheet" />
<script src="~/Scripts/app/app.js"></script>
<script src="~/Scripts/app/LayoutCtrl.js"></script>
<script src="~/Scripts/app/generalsearchService.js"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
</div>
<div class="float-right">
<nav>
</nav>
</div>
</div>
</header>
<div ng-app="myModule" ng-controller="LayoutCtrl">
<nav class='sidebar sidebar-menu-collapsed'>
<a href='#' id='justify-icon'>
<span class='glyphicon glyphicon-triangle-right'>
</span>
</a>
<ul>
<li class='active'>
<a class='expandable' href='#' title='Dashboard'>
<div id="myTab" class='vertical-text collapsed-element' style="color:blue; width:300px">Expand For Menu Options
</div>
<span class='expanded-element'>Dashboard</span>
</a>
</li>
<li>
<a class='expandable' href='#' title='APIs'>
<span class="collapsed-element"></span>
<span class='expanded-element'>APIs</span>
</a>
</li>
<li>
<a class='expandable' href='#' title='Settings'>
<span class="collapsed-element"></span>
<span class='expanded-element'>Settings</span>
</a>
</li>
<li>
<a class='expandable' href='#' title='Account'>
<span class="collapsed-element"></span>
<span class='expanded-element'>Account</span>
</a>
</li>
</ul>
<a href='#' id='logout-icon' title='Logout'>
<span class="collapsed-element"></span>
<span class='glyphicon glyphicon-off'></span>
</a>
</nav>
<nav>
<accordion close-others="oneAtATime">
<accordion-group is-open="status.open">
<accordion-heading>
</accordion-heading>
</accordion-group>
</accordion>
</nav>
</div>
<div id="myBody" style="margin-top:50px; margin-left:320px; width:80%; position:absolute">
#RenderBody()
</div>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
<script type="text/javascript">
(function () {
$(function () {
var collapseMyMenu, expandMyMenu, toggleGlyphCollapse, toggleGlyphExpand, hideMenuTexts, showMenuTexts;
expandMyMenu = function () {
document.getElementById('myBody').style.width = '80%';
document.getElementById('myBody').style.marginLeft = '320px';
document.getElementById('myTab').style.color = '#E6E7E8';
return $("nav.sidebar").removeClass("sidebar-menu-collapsed").addClass("sidebar-menu-expanded");
};
collapseMyMenu = function () {
document.getElementById('myBody').style.width = '99%';
document.getElementById('myBody').style.marginLeft = '70px';
document.getElementById('myTab').style.color = 'blue';
return $("nav.sidebar").removeClass("sidebar-menu-expanded").addClass("sidebar-menu-collapsed");
};
showMenuTexts = function () {
return $("nav.sidebar ul a span.expanded-element").show();
};
hideMenuTexts = function () {
return $("nav.sidebar ul a span.expanded-element").hide();
};
return $("#justify-icon").click(function (e) {
if ($(this).parent("nav.sidebar").hasClass("sidebar-menu-collapsed")) {
expandMyMenu();
showMenuTexts();
$(this).css({
color: "#000"
});
} else if ($(this).parent("nav.sidebar").hasClass("sidebar-menu-expanded")) {
collapseMyMenu();
hideMenuTexts();
$(this).css({
color: "#FFF"
});
}
$(this).find('span').toggleClass('glyphicon-triangle-right').toggleClass('glyphicon-triangle-left');
return false;
});
});
}).call(this);
</script>
</body>
</html>
here is my Angular controller for the _Layout:
angular.module('myModule').controller('LayoutCtrl', function ($scope, generalsearchService) {
getmenuItems();
function getmenuItems() {
generalsearchService.GetMenuItems()
.success(function (data) {
$scope.menuItems = data;
});
};
});
The Angular in my Index.cshtml page works fine until I add the above to the _Layout page.
Can anyone tell me what I am missing? I've been working on this for hours and just can't seem to figure it out.
Any assistance is greatly appreciated!
I found a workaround for my issue, although it is not the best solution because it will require that I put everything in one controller. The workaround is to put a div around everything in the body of my _Layout page(which includes the "#RenderBody" which renders my Index page) and include the ng-app and ng-controller in that div on the _Layout page. If anyone knows of a better solution..I'm all ears. Thanks to those who took the time to try to help thus far.