Sidebar Not Working [closed] - html

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I am fairly new at web design and cannot seem to get a side bar working for my website.
Basically I got my files and code from www.berriart.com/sidr/ and did exactly what they asked, however the side navigation bar is still not working.
All that comes up is blue hyperlinks under my banner, you can see it here: www.justpaste.it/lzhg.
I have pasted my html underneath if anyone could please help me that would be wonderful!
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="javascripts/sidr/stylesheets/jquery.sidr.dark.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="respond.min.js"></script>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo"></div>
</div>
<div class="navbar">
<a id="simple-menu" href="#sidr">Toggle menu</a>
<div id="sidr">
<ul>
<li>List 1</li>
<li class="active">List 2</li>
<li>List 3</li>
</ul>
</div>
<script>
$(document).ready(function() {
$('#simple-menu').sidr();
});
</script>
</div>
<div class="content">
<div class="posts">1</div>
<div class="posts">2</div>
<div class="posts">3</div>
<div class="posts">4</div>
<div class="posts">5</div>
</div>
<div class="footer">asdfafdsasfsdasfad</div>
</div>
<script src="javascripts/sidr/jquery.sidr.min.js"></script>
</body>
</html>
</pre>

It looks like you forgot to add jQuery.
<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

Related

why my button doesnt work in this html file?? can anyone find what is the error of the code

I have problem with my student buttons inside this html file..can anyone help me? i take this code from the internet. when i click the button, it doesnt redirect me to the login.php..
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ie7 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ie8 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9 no-js" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Supervision System</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Fullscreen Background Image Slideshow with CSS3 - A Css-only fullscreen background image slideshow" />
<meta name="keywords" content="css3, css-only, fullscreen, background, slideshow, image, content" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<script type="text/javascript" src="js/modernizr.custom.86080.js"></script>
</head>
<body id="page">
<ul class="cb-slideshow">
<li><span>Image 01</span><div><h3>SUPERVISION SYSTEM</h3></div></li>
<li><span>Image 02</span><div><h3>SUPERVISION SYSTEM</h3></div></li>
<li><span>Image 03</span><div><h3>SUPERVISION SYSTEM</h3></div></li>
<li><span>Image 04</span><div><h3>SUPERVISION SYSTEM</h3></div></li>
<li><span>Image 05</span><div><h3>SUPERVISION SYSTEM</h3></div></li>
<li><span>Image 06</span><div><h3>SUPERVISION SYSTEM</h3></div></li>
</ul>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top">
<div class="clr"></div>
</div><!--/ Codrops top bar -->
<header>
<p class="codrops-demos">
Coordinator
Supervisor
Student//-----right here the problem
</p>
</header>
</div>
</body>
</html>
That's a link, not a button. It should just fine, so long as you intended to write a relative URL.
It looks like you intended to write an absolute URL though and you forgot to include http:// or https:// at the front of it (or possibly // if you wanted a scheme relative URL, which is unlikely since you included a port number).
Student//-----right here the problem
Should work. You forgot the http://

Href does not work

Hoping someone can help me with this. The following menu items below (Get on Amazon etc) change the information on the page within the browser, but the first menu should change the actual page to my index page. For some reason I cannot get it to work
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-- >
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
<title>Painful Words Dot Com</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<!--
Painful Words
-->
<!-- Google Web Font Embed -->
<link href='http://fonts.googleapis.com/css?family=Raleway:400,600,500,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/painful_main.css">
</head>
<body>
<div id="main-wrapper">
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a rel="nofollow" href="http://browsehappy.com">upgrade your raasclaat browser</a> or <a rel="nofollow" href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 affix text-center" style="z-index: 1;">
<h1 class="painful-site-title">
Painful Words
<img src="images/btn-menu.png" alt="main menu" id="m-btn" class="pull-right visible-xs visible-sm" >
</h1>
<ul id="responsive" style="display:none" class="hidden-lg hidden-md"></ul><!-- /.responsive -->
</div>
<div class="menu visible-md visible-lg">
<ul id="menu-list">
<li class="active back-menu">Go Back</li>
<li class="inactive purchase-menu">Purchase</li>
<li class="amazon-menu">Get on Amazon</li>
<li class="google-menu">Get on Google Play</li>
<li class="noble-menu">Get on Barnes & Noble</li>
</ul>
</div><!-- /.menu -->
<div class="image-section">
<div class="image-container">
<img src="images/gone.jpg" id="purchase-img" class="main-img inactive" alt="purchase">
<img src="images/love.jpe" id="amazon-img" class="inactive" alt="amazon">
<img src="images/fam.jpe" id="google-img" class="inactive" alt="google">
<img src="images/fam2.jpe" id="noble-img" class="inactive" alt="noble">
The following code in your http://www.painfulwords.com/js/templatemo_script.js JavaScript file is preventing the link from working.
$("#menu-list a, #responsive a").on('click',function(e){
if(this.className == "external") {
return;
}
// THIS BIT HERE cancels the link's default action
e.preventDefault();
Try giving the link the additional class of external.

HTML5UP, Image is small when browser isnt maximized

So the title says it, ill upload screenshots of the issue:
Here are the images.
I have tried to fix this but im not the most experienced coder out there. If any one has run into this problem or knows the solution please answer :) Its proboly something simple that i cant find because im stupid, LOL. Any way thank you for looking :)
This is my index.html:
<!DOCTYPE HTML>
<!--
Aerial by HTML5 UP
html5up.net | #n33co
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Oracle RPG</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/skel.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-wide.css" />
<link rel="stylesheet" href="css/style-noscript.css" />
</noscript>
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body class="loading">
<div id="wrapper">
<div id="bg"></div>
<div id="overlay"></div>
<div id="main">
<!-- Header -->
<header id="header">
<h1>Oracle RPG</h1>
<p>A BETTER EXPERIENCE • BUILT FOR THE GAMER • BY THE GAMER</p>
<nav>
<ul>
<li><span class="label">Forums</span></li>
<li><span class="label">Donor Area</span></li>
<li><span class="label">Youtube Channel</span></li>
<li><span class="label">Ranks & Apply Area</span></li>
</ul>
</nav>
</header>
<!-- Footer -->
<footer id="footer">
<span class="copyright"><font size="1">© Untitled. Design: HTML5 UP.</span></font>
</footer>
</div>
</div>
</body>
</html>
In your all your css files you state your div with id #bg as follows:
bg {
background-size: 2250px auto; /*the first value is different in all css files*/
width: 6750px;
}
The first value is the width of you images and the second one the height. The width is different in each of the css files (wide, normal, mobile, etc) so what you have to do is just change the width of the background-size to whatever you want and your problem is gone! :)

IE Specefic css not called by internet explorer

I am trying to make a website which behave differently on IE browser. I am doing this by calling a different css for IE browser and for another for different browser. But on IE browser IE SPECIFIC css is not being called
<html>
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="ie.css" if="IE 8"/><![endif]-->
<head>
<link href="new.css" rel="stylesheet"/>
</head>
<body id="bdy">
<div id="wrapper">
<div id="header">
<div id="logo">
<div id="log_in">
</div>
</div>
</div>
<div id="menu">
</div>
<div id="main">
<div id="left_div">
</div>
<div id="right_div">
<div id="table_items"></div>
<div id="addv"></div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
If you are targeting IE8 version only then you have to use this conditional statement.
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.css" />
<![endif]-->
If you don't want to create seperate css file then following syntax.
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
For example you have class called borderright and you want to apply different style for ie8 then add your class like below.
.ie8 .borderright
{
/*Your Style goes here*/
}
your code:
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="ie.css" if="IE 8"/><![endif]-->
is placed before head tag.
Put that code inside head tag !. And remove if="IE 8" part

webpage is not clickable in internet explorer

The links on my project working on is not clickable on Internet Explorer but Ok on firefox and chrome. It is essential to support this on IE. I have been researching this for days. I first I put on position:fixed on the body background, but when I removed the position: fixed, my background will not be responsive. Here is the some css
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head>
<body >
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.</p>
<![endif]-->
<div id="container">
<div id="main_corporate">
<img id="logo" src="img/logo.png">
<div id="content_corporate1">
<p >Whether you are hosting a small lunch meeting or a grand banquet, preparing for an event can be a daunting task. The venue set up, the dishes and beverages must all be carefully planned and executed to be able to provide your guests an outstanding dining experience.</p>
<p >Save yourself from all these work and engage a seasoned caterer to do everything for you! Occasions Catering is a full-service caterer that has been delivering unique and exceptional culinary experiences since 2006.</p>
<p >Occasions Catering represents the best culinary experience in Singapore. We are with our clients from the conceptualization of the ideas to the smooth delivery of the event.From high end corporate functions to intimate gatherings, our skilled kitchen and operation teams continuously astonish clients with detailed setups, appetizing meals and first class service.</p>
<p style="margin-right:90px" >Don't just take our word for it. Request for a food tasting session today! </p>
</div>
<div id="socialmed">
<img src="img/facebook.png" >
<img src="img/twitter.png">
<img src="img/instagram.png">
<img src="img/youtube.png">
</div>
<ul id="MenuBar1" class="MenuBarHorizontal2">
<li style="width:70px;"><a href="home.html" >HOME</a></li>
<li><a href="aboutus.html" >ABOUT US</a></li>
</ul>
</div>
<div id="footer" class="clearfix">
<div class="about1">
</div>
<div class="about2">
</div>
<div class="about3">
</div>
</div>
</div>
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src='//www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Here is the jsfiddle of the complete code: http://jsfiddle.net/jethph/TKM9Y/. Sorry for untidy code.
Thanks for your help.