I'm working on my own personal site here. If you hover over any of the nav bar elements you will notice there is some flicker and not all of the elements are visible. You can verify this via F12. It seems to me that the <aside> tag is "hiding" the info I'm looking for.
Would someone please tell me how to bring the nav bar to the front of something. I'm not really sure what's going on here.
index.php:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Grown Kidd Creations</title>
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
});
</script>
</head>
<body>
<header>
<img alt="Picture of me and Cian" src="img/caindaddysleepin.jpeg" title="Cian and Daddy">
<?include_once 'nav/nav.php';?>
</header>
<aside class="left"><p>No idea what to put here. how about you fill out the form and tell me?</p></aside>
<aside class="right">
Recent News/Updates:<br/>
<span class="undercon">This will be updated soon with links and maybe a blog.</span>
<ul>
<li>Cian</li>
<li>Work</li>
<li>Family</li>
</ul>
</aside>
<footer>
Send me some love at BillyThaKidd04#gmail.com<br/>
Or find me at:<br/>
<div class="g-plus" data-href="https://plus.google.com/109325835178774768962?prsrc=3" data-theme="dark" rel="author"></div>
Follow #ThaKidd04
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</footer>
</body>
</html>
nav.php
<?//navigation bar?>
<script>
var el = document.getElementsByTagName("body")[0];
el.className = "";
</script>
<noscript>
<!--[if IE]>
<link rel="stylesheet" href="nav/css/ie.css">
<![endif]-->
</noscript>
<link rel="stylesheet" href="nav/css/nav.css">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<nav id="topNav" class="no-js">
<ul>
<li>Home</li>
<li>Projects
<ul>
<li>Personal Projects</li>
<li>Work Projects</li>
<li class="last">This Site</li>
</ul>
</li>
<li>Contact Me
<ul>
<li>FaceBook</li>
<li>Google +</li>
<li>LinkedIn</li>
<li class="last">Email Me</li>
</ul>
</li>
<li>About Me
<ul>
<li>Blog</li>
<li>Resume</li>
<li class="last"><a target="new" href="https://github.com/billythakidd04" title="GitHub">GitHub</a></li>
</ul>
</li>
</ul>
</nav>
<script src="nav/js/modernizr.custom.69568.js"></script>
<script>
(function($)
{
//cache nav
var nav = $("#topNav");
//add indicators and hovers to submenu parents
nav.find("li").each(function()
{
if ($(this).find("ul").length > 0)
{
$("<span>").text("").appendTo($(this).children(":first"));
//show subnav on hover
$(this).mouseenter(function()
{
$(this).find("ul").stop(true, true).slideDown();
});
//hide submenus on exit
$(this).mouseleave(function()
{
$(this).find("ul").stop(true, true).slideUp();
});
}
});
})(jQuery);
</script>
You should post your css since it seems that the whole issue is connected—or at least can be solved—by a z-index adjustment:
The z-index CSS property specifies the z-order of an element and its
descendants. When elements overlap, z-order determines which one
covers the other. An element with a larger z-index generally covers an
element with a lower one.
Related
I am using phpstorm to create project using php, bootstrap and jquery. In this Project,I got two errors. But i don't know how to solve this error.
Can anyone tell me what is the fault? I have attached two images.
Code
<html>
<head>
<title>boutique</title>
<link rel="stylesheet" href="css/bootstrap.min.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="css/main.css" media="screen" title="no title" charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<!-----NavBar----->
<nav class="navbar navbar-default navbar-fixedtop">
<div class="container-fluid">
boutique
<ul class="nav navbar-nav">
<li class="dropdown">Men<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Shirts</li>
<li>Pants</li>
<li>Shoes</li>
<li>Accessories</li>
<li>Watch</li>
</ul>
</li>
</ul>
</div>
</nav>
<!---Header------>
<div id="headerwrapper">
<div id="back-flower"></div>
<div id="logotext"></div>
<div id="for-flower"></div>
</div>
<script>
jquery(window).scroll(function () {
var vscroll=jquery(this).scrollTop();
jquery('#logotext').css({
"transform" :"translate(0px,"+vscroll/2+"px)"
});
var vscroll=jquery(this).scrollTop();
jquery('#back-flower').css({
"transform" :"translate("+vscroll/5+"px,-"+vscroll/12+"px)"
});
var vscroll=jquery(this).scrollTop();
jquery('#fore-flower').css({
"transform" :"translate(0px,"+vscroll/2+"px)"
});
});
</script>
</body>
</html>
Why do you using same name for var?
You can extract the scroll position using jQuery's .scrollTop() method
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
// Do something
});
Or try this;
$(window).scroll(function() {
var height = $(window).scrollTop();
if(height > some_number) {
// do something
}
});
I'm creating a website. and I'm starting with the header first.
I have this code for my header page:
<!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>
<a href="index.php">
<img border="0" class="logo" src="images/logo.png" width="15%" height="20%" align="left" /></a> <font size="15%"><div align="center" class="BDtext"> Title Here<br> Description Here</font></div><br>
<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>
Which I am aware that the align="left" is used to allow everything else to be positioned to the right of image.
however.
I only want the title and description to be to the right of the image.
in some web browsers, the menu bar goes over the image.
an example of this is when I use this code in my style.css:
#media only screen and (max-width : 320px) {
.BDtext {
display: none;
}
I want this to be aligned underneath the image.
Please can someone explain how I can keep the image aligned left but stop the menu bar from overlapping the image instead of using the br code?
please help.
thank you.
I have a variable called $cat(which stands for 'category') in the URL.
Depending on whether it is "a" or "b" I swap the stylesheet using a link:
<?php
if($cat == "a") { ?>
<link rel="stylesheet" href="/css/styleA.css">
<?php }
elseif($cat == "b") { ?>
<link rel="stylesheet" href="/css/styleB.css">
<?php } ?>
styleA.css makes the background-color of the header blue, and styleB.css makes it red
<div id="header" data-role="header" data-position='fixed'>...</div>
if I click on a link that looks like this:
Click for red
Click for blue
the URL actually works (content is incuded depending on $cat) and I do get the value of $cat but the stylesheet does not seem to have swapped, since the color doesn't change. But if I reload the page (with the URL given by the link before) the stylesheets swap and everything works perfectly.
I used the same method for the desktop version of the website I'm working on and everything works perfectly fine.
This issue seems to only appear if I use jquery mobile.
Does anyone see why this isn't working as it should?
EDIT (adding html):
This is pretty much it, but here's the rest of it:
headpart:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title></title>
<link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<!-- Extra Codiqa features -->
<link rel="stylesheet" href="/css/codiqa.ext.css">
<link rel="stylesheet" href="/css/style.css">
<?php if($cat == "a") { ?> <link rel="stylesheet" href="/css/styleASS.css"> <?php }
if($cat == "b") { ?> <link rel="stylesheet" href="/css/styleBB.css"> <?php }
?>
<!-- jQuery and jQuery Mobile -->
<script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
<script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<!-- Extra Codiqa features -->
<script src="https://d10ajoocuyu32n.cloudfront.net/codiqa.ext.js"></script>
</head>
<div data-role="page" id="page">
<div id="panel_menu" data-role="panel" data-display="overlay">
<ul data-role="listview">
<li role="heading">Navigation</li>
<li>Home</li>
<li>Products</li>
<li>Service</li>
<li>Contact</li>
<li>Login</li>
</ul>
</div>
<div id="header" data-role="header" data-position='fixed'>
<h1>Header</h1>
Menu
</div>
<div data-role="content">
<?php include "$menu_page_content";?>
a
b
</div>
<div data-role="footer" data-position="fixed" data-theme="d">
<div data-role="navbar" class="ui-icon-nodisc">
<ul>
<li><a href="#" id='language' data-icon='custom'>Change Language</a></li>
<li><a href="#" id='category' data-icon="custom" >Change Category</a></li>
<li><a href="#" id='contact' data-icon="custom" >Contact</a></li>
</ul>
</div>
</div>
</div><!-- page -->
EDITIT:
Uploaded it to a free hoster: here
You may either click on one of the links in the content area, or on "category" in the footer area. Click & reload the page.
If most of your styles are the same with the exception of the color I would suggest putting them in a single style sheet and writing in a class to the body.
For Example
.header {
/* general header styles margins paddings and whatnot */
}
.cat-a .header {
background-color: red;
}
.cat-b .header {
background-color: blue;
}
Then variably write the class in on the body
<body class='cat-<?php echo $cat; ?>'>
It must depends on how data are cached on the browser you're using.
Several solutions are possible.
You could not swap CSS stylesheet, but add style properties using PhP or Javascript. That way you'll be 100% sure it will change. (As long as the user has javascript by the way, PhP would make it really 100% sure)
Or force the browser to reload CSS sheets everytime, but it's not a bandwidth friendly solution, I would not recommend that.
In case you want to use it to save user's choice and reload the correct background everytime, give a look at this :
http://www.dynamicdrive.com/forums/archive/index.php/t-44389.html
Didn't find any SO link though
Ok , so I am trying to load content from a another page using JQUERY LOAD method SO THE content can appear without the page refreshing. I did that but when I click on the link below generated from PHP , it still redirects me to the other page instead of the content loading into the <div class="panel">
Below is my code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title> MadScore, A Social Scoring Platform </title>
<link rel="stylesheet" type="text/css" href="css/madscore.css">
<link rel="stylesheet" type="text/css" href="css/skins/tango/skin.css" />
<script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="javascript/jquery.jcarousel.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
scroll: 1, buttonNextHTML:"<div></div>", buttonPrevHTML:"<div></div>"
});
});
</script>
//Here is where I made the Jquery call for the div below with class "panel" but it won't load ..
<scrip type="text/javascript">
$(document).ready(function(){
$("profile").click(function(){
$(".panel").load("this.href");
});
});
</script>
</head>
<body>
<div class="sliding-panel">
<div class="container">
<ul id="mycarousel" class="jcarousel-skin-tango">
<li>
<li>
<div class="panel"> //panel supposed to be triggered by Jquery
<h1> People </h1>
<?php
database_connect();
$query = "select * from People";
$result = $connection->query($query);
$row_count =$result->num_rows;
for($i = 1; $i <= $row_count; $i++)
{
$row = $result->fetch_assoc();
echo "<a href='/profile.php?id=".$row['ID']."' id='profile'><img src ='../".$row['Picture']."' width='100' height='100' /> </a>";
}
?>
</div>
</li>
<li>
<div class="panel">
<h1>Ballers</h1>
</div>
</li>
<li>
<div class="panel">
<h1>Movies</h1>
</div>
</li>
<li>
<div class="panel">
<h1> Talking heads</h1>
</div>
</li>
</ul>
There are few errors,
1 Wrong spelling of script. scrip should be script
2 wrong syntax of id selector. $("profile") should be $("#profile")
3 loading constant string instread of current element href. load("this.href") should be
load(this.href)
Change
<scrip type="text/javascript">
$(document).ready(function(){
$("profile").click(function(){
$(".panel").load("this.href");
});
});
</script>
To
<script type="text/javascript">
$(document).ready(function(){
$("#profile").click(function(){
$(".panel").load(this.href);
});
});
</script>
I basically use php variables to store the value of the title and the body's ID.
This last one is a technique to have my button (pressed) in the navigation according to which section of the page the user is (in this case the user will know he is currently at "home").
Beginning of my index.php:
<?php
$title = "New Project";
$body = "home";
include("common/header.php");
?>
<div id="content">
<div class="container">
<div id="tagline">
Beginning of my header.php
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<title><?php echo $title; ?></title>
<link rel="stylesheet" type="text/css" href="styles/slimbox2.css" />
<link rel="stylesheet" type="text/css" href="styles/global.css" />
<link rel="stylesheet" type="text/css" href="styles/home.css" />
<link rel="stylesheet" type="text/css" href="styles/contact.css" />
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.corner.js"></script>
<script type="text/javascript" src="scripts/jquery.validate.js"></script>
<script type="text/javascript" src="scripts/slimbox2.js"></script>
<script type="text/javascript" src="scripts/custom.js"></script>
</head>
</head>
<body id="<?php echo $body; ?>">
<div id="header">
<div class="container">
<div id="topbar">
<h1>wider design</h1>
<ul id="lang">
<li>English</li>
<li>Español</li>
<li>中文(繁體)</li>
<li>中文(简体)</li>
</ul>
<ul id="nav">
<li class="home">home</li>
<li class="products">products</li>
<li class="about">about</li>
<li class="contact">contact</li>
</ul>
To let the user know in which section he/she is:
#home li.home a, #products li.products a, #contact li.contact {
color: #999;
}
is there a simpler way of doing this?
Am I using unnecessary those PHP variables?
Yes, what you're doing is fine. I do something similar with a PageTemplate class. In addition to setting the title and navigation, it allows navigation links to appear based on user authentication, allows javascript and css to be added to the head section, etc.
What you're doing is very common. There are a million ways to do it, but they'll all require setting some variables.
janoChen,
I use the following method:
// get the url
$url= $_SERVER['PHP_SELF'];
// add a class on the menu item
<ul id="lang">
<li><a href="index.php" <?php if (strpos($url, "index.php")) { echo " class='active'"; } ?>>English</a></li>
//with css I set a style for the class active
li a.active {
color: #990000;
}
But you method also works.
Or else use an MVC framework like CakePHP
This works, but you should consider using a template engine such as Smarty instead.