I have the following html/php code. On clicking any of the tabs link the content of the file is not getting loaded in the specific <div> tag.
PHP code :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul.tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }
ul.tabs li { display: inline; }
ul.tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.4em 2.5em 0.3em 2.5em; border-radius : 5px 5px 0 0; }
ul.tabs li a:hover { background-color: #f1f0ee; }
ul.tabs li a.selected { color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
div.tabContent {border: 1px solid #c9c3ba; border-top : none; padding: 0.5em; background-color: #f1f0ee; border-radius: 0 0 5px 5px}
div.tabContent.hide { display: none; }
.tabs a {
padding:5px 10px;
background:#D8D8D8;
color:#fff;
text-decoration:none;
}
.tabs a.active {
background:#f1f0ee ;
color:black ;
font-weight:bold;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<ul class='tabs'>
<li><a href="#desktop" >Desktop</a></li>
<li>Laptop</li>
</ul>
<div class="tabContent" id="desktop">
</div>
<div class="tabContent" id="laptop">
</div>
</body>
</html>
jQuery code : Through this external jQuery file I want that whenever I click a link the required file gets loaded in the specific <div> tag.
$(document).ready(function() {
var hideid = "#laptop";
var showid = "#desktop";
$(hideid).hide();
$('a[href="' + showid + '"]').addClass("active");
$('a[href="#laptop').click(function() {
$(this).addClass('active');
$('#laptop').show('slow');
$('#desktop').hide('slow');
$('a[href="#desktop"]').removeClass("active");
$("#laptop").load("laptop.html");
});
$('a[href="#desktop').click(function() {
$("#desktop").load("/test.html");
$(this).addClass('active');
$('#desktop').show('slow');
$('#laptop').hide('slow');
$('a[href="#laptop"]').removeClass("active");
$("#desktop").load("desktop.html");
});
});
What is wrong in the code?
$('a[href="#desktop').click(function () {
Quotation mark is wrong.
Looks like the issue is with this line,
$("#desktop").load("/test.html");
if test.html is in same directory, try removing the /.
Related
Index function works fine, any other does not show bootstrap effects. I think I have seen all the topics about it here and i cant find any solution.
Controller:
<?php
class Certyfikat extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->view('/templates/header');
}
function index()
{
}
function nowy()
{
$this->load->view('/certyfikat/dodaj_nowy');
}
}
View header:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin 0;
padding: 0;
overflow: show;
background-color: #333333;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
padding: 20px;
text-decoration: none;
}
.main {
margin-top: 50px;
background-color: #cccccc;
}
a.button {
background-color: black;
border: none;
color: white;
padding: 5px 70px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0,4s;
}
a.button:hover {
color: white;
background-color: red;
font-size: 20px;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
</style>
<link rel="stylesheet" href="<?php echo base_url("assets/css/bootstrap.css"); ?>" />
</head>
<body class="main">
<ul>
<li><a class="button" href="/home">Home</a></li>
<li><a class="button" href="/certyfikat">Certyfikaty</a></li>
<li><a class="button" href="/category_create">cr</a></li>
</ul>
<?php $this->load->view('/templates/alrets'); ?>
<script type="text/javascript" src="<?php echo base_url("assets/js/jquery-3.1.1.js"); ?>"></script>
<script type="text/javascript" src="<?php echo base_url("assets/js/bootstrap.js"); ?>"></script>
</body>
</html>
View dodaj_nowy:
<!DOCTYPE html>
<html>
<head>
<title>My Blog</title>
</head>
<body>
<h1>Welcome to my Blog!</h1>
</body>
</html>
My blade view shows a empty page, but if I press CTRL + U to show the source code, then I get this:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='http://localhost/portal_testing/public/css/style.css'/>
<script src='http://localhost/portal_testing/public/js/main.js'/>
</head>
<body>
<div>
<div class='infoBox'>
<h4 class='infoBoxTitle'>Log:</h4>
<div class='infoBoxContent'>
<p>test</p>
</div>
</div>
<div class='errorBox'>
<h4 class='errorBoxTitle'>Error Log:</h4>
<div class='errorBoxContent'>
<p>test</p>
</div>
</div>
</div>
</body>
</html>
Why is it not rendering even though there is valid code?
UPDATE:
Javascript:
//Accordion:
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
}
}
CSS
.infoBox {
font-family: arial;
padding:2px;
background-color: #DADADA;
min-width: 300px;
min-height: 100px;
margin:2px;
border:1px solid black;
}
.infoBoxTitle {
padding:4px;
font-size: 13px;
color: red;
margin: 1px;
text-decoration: underline;
}
.infoBoxContent {
font-size: 10px;
padding-left:5px;
margin-left:10px;
border: 1px solid gray;
}
.errorBox {
font-family: arial;
padding:2px;
background-color: #838383;
min-width: 300px;
min-height: 100px;
margin:2px;
border:1px solid black;
}
.errorBoxTitle {
padding:4px;
font-family: calibry;
font-size: 13px;
color: white;
margin: 1px;
text-decoration: underline;
}
.errorBoxContent {
color: white;
font-size: 11px;
padding-left:5px;
margin-left:10px;
border: 4px solid white;
}
I found the problem...
I noticed that all the content was rendered inside of the script tag:
The reason is, becaues the script element was missing it's closing tag.
Fix:
<script type="text/javascript" src='{{ URL::asset("js/main.js") }}'></script>
<!--
<script type="text/javascript">
function showSpoiler(obj)
{
var inner = obj.parentNode.getElementsByTagName("div")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
</script>
<style>
.button1 {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 12px 26px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
outline: none;
background-color: blue;
color: lightblue;
}
.button1:hover {
background-color: lightblue;
color: blue;
}
</style>
<div class="spoiler">
<input type="button" class="button1" onclick="showSpoiler(this);" value="[Spoiler]" />
<div class="inner" style="display:none;">
Hello noobies
</div>
-->
<!DOCTYPE html>
<html>
<style>
tab1 { padding-left: 2em; }
body {font-family: arial;
background-color: #00111a;
color: white;
}
.button1 {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 12px 26px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
outline: none;
background-color: #1ab2ff;
color: white;
font-weight: bold;
transition: 0.3s;
}
.button1:hover {
background-color: #66ccff;
}
.button1:active {
background-color: #0088cc;
}
ul.tab {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1ab2ff;
}
ul.tab li {float: left;}
ul.tab li a {
display: inline-block;
color: white;
font-weight: bold;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
ul.tab li a:hover {
background-color: #66ccff;
}
ul.tab li a:focus, .active {
background-color: #0088cc;
}
.tabcontent {
display: none;
padding: 6px 12px;
border-top: none;
}
h3 {
opacity: 0.5;
}
p {
opacity: 0.5;
}
</style>
<body>
<tab1><h2>SuperBlaze27-Core</h2>
<ul class="tab">
<li>Overview</li>
<li>Files</li>
</ul>
<div id="Overview" class="tabcontent">
<h3>SuperBlaze27 Core</h3>
<p>
Still in development but really cool!<br>
If you want to download click the spoiler button or click files. In the spoiler is the latest version. I would reccomend downloading from the files section. ;)
<div class="spoiler">
<input type="button" class="button1" onclick="showSpoiler(this);" value="[Spoiler]" />
<div class="inner" style="display:none;">
<h3>www.superblaze27.com/site/minecraft/plugins/spigot/projects/superblaze27-core/downloads/latest</h3>
</div>
</p>
</div>
<div id="Files" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<script>
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
function showSpoiler(obj)
{
var inner = obj.parentNode.getElementsByTagName("div")[0];
if (inner.style.display == "none")
inner.style.display = "";
else
inner.style.display = "none";
}
</script>
</script>
</body>
</html>
With that I want the blue bar to not go all the way to the right and just stop after files. This is just a test but I wanted to see how it can work. I got some of the code from W3Schools. I just couldn't figure out how to get rid of the rest of the bar that isn't being used. THX in advance! ;)
Add display inline-block to both the ul and li.
ul.tab {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1ab2ff;
display: inline-block;
}
ul.tab li {
float: left;
display: inline-block;
just add the last line to your code:
ul.tab {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #1ab2ff;
display: inline-block;
}
I have a problem with my selected menu in my php script.
When i am clicking on one of my menu options it wont set the li class to selected.
Im searching for hours now and still i can not find it. Thanks in forehand for the help!!
Here the PHP code :
private $selectedmenu = '';
public function set_selectedmenu($set_selectedmenu) {
$this->selectedmenu = $set_selectedmenu;
}
public function html() {
$html_menu='';
$menu = array(
'test'=>array('optie'=>'test', 'url'=>'index.php?page=test'),
'test2'=>array('optie'=>'test2', 'url'=>'index.php?page=test2'),
'test3'=>array('optie'=>'test3', 'url'=>'index.php?page=test3'),
'test4'=>array('optie'=>'test4', 'url'=>'index.php?page=test4'),
);
foreach($menu as $key => $menuoptie) {
if ($key==$this->selectedmenu) {
$class=' class="selected"';
}else{
$class='';
}
$html_menu.="<li{$class}>{$menuoptie['optie']}</li>\n";
}
return(
<<<EOT
<!DOCTYPE html>
<html>
<head>
<title>{$this->html_titel}</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="stylesheet/css.css" />
</head>
<body>
<ul class="menu">
{$html_menu}
</ul>
</body>
</html>
EOT
);
}
Following the CSS :
.menu{
padding-left: 117px;
margin-top: 10px;
list-style: none;
overflow: hidden;
margin-left:40px;
}
.menu li {
padding: 0;
margin: 0;
float: left;
width: 200px;
border: 1px solid black;
}
.menu li:hover a {
background-color:#FF8055;
font-weight:bold;
}
.menu li a {
text-align:center;
background-color:#f60;
text-decoration: none;
display: block;
padding: 10px 0px 10px 10px;
text-align: left;
font-weight:bold;
color:white;
}
.menu li.selected a{
background-color: black;
text-decoration:underline;
}
I have this code for my header.php
<!DOCTYPE html>
<html>
<head>
<title>Responsive Navigation Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
</script>
</head>
<body>
<div class="desktop">
<a href="index.php">
<img border="0" class="logo" src="/images/logo.png" width="15%" height="20%" /></a> <font size="15%"><div class="BDtext">title<br> Description</font></div><br>
</div>
<div class="mobile">
<a href="index.php">
<img border="0" class="mobilogo" src="/images/logo.png" width="15%" height="20%" /></a>
</div>
<nav class="clearfix">
<ul class="clearfix">
<li class="home">Home</li>
<li class="about">About</li>
<li class="me">About Me</li>
<li class="sessions">Sessions</li>
</ul>
Menu
</nav>
</body>
</html>
and this one in my style.css:
body {
background-color: #ece8e5;
}
.logo{
float: left;
}
.BDtext {
text-align: center;
}
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* Menu */
#sub-header ul li:hover,
body.home li.home,
body.Ben li.Ben,
body.about li.about,
body.sessions li.sessions { background-color: #000;} /* Current Page Background Colour */
nav {
height: 40px;
width: 100%;
background: #455868; /* Menu Background Colour */
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
position: relative;
border-bottom: 2px solid #283744;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
}
nav li {
display: inline;
float: left;
}
nav a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
nav li a {
border-right: 1px solid #576979;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #8c99a4; /* Hover Over A Page Background Colour */
}
nav a#pull {
display: none;
}
/*Styles for screen 600px and lower*/
#media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/
#media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
#media only screen and (max-width : 600px) {
.desktop {display:none;}
.mobilogo{
margin-right: 45%;
width:50%;
height: 50%;
}
}
#media only screen and (min-width : 601px) {
.mobile {display:none;}
}
/*Smartphone*/
#media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
/* End Menu */
my problem is.
my .mobilogo code in my CSS will not center the image.
I need this image to appear in the center of the page and not be aligned to the left.
please can someone help tell me what is holding it back?
.mobile class could have text-align:center; if you don't want to use the text-align try the below:
Also you can give .mobilogo width and have margin:0 auto; to center it.
.mobilogo{
margin:0 auto;
width:50%;
height: 50%;
}
In order for the width and height to work with percentages you need to give the parent elements width and height.
Make your .mobilogo class block and give it margin: 0 auto like this. Even though it has a width of 50% you'll have to make it a block element to center it with margin: 0 auto, or else you'll have to specify the width in pixels.
Like this:
.mobilogo {
margin: 0 auto;
display: block;
}